10 نکته کاربردی در طراحی وب سایت

اشتباهاتی که نباید در طراحی وب سایت خود مرتکب شوید

با گذر زمان قوانین و روشهای کاربردی تری ، برای کمک به بهبود فابلیت استفاده عمومی از وب سایت ها توسعه و گسترش یافته اند.این مقاله خلاصه ای است از ده اشتباه رایج و یا نادیده گرفته شده در طراحی وب و ارائه راه حل های جایگزین برای کمک به افزایش قابلیت استفاده از وب سایت .

لیبل فرم هایی که ارتباطی با اطلاعات ورودی آنها ندارند

استفاده از خصوصیت “for” به کاربر اجازه می دهد با کلیک کردن روی لیبل قسمتی از فرم را که میخواهد انتخاب کند.این خصوصیت ، برای check box و یا radio button برای ایجاد منطقه بزرگتری برای کلیک کردن مهم تر است، ولی سعی کنید این خصوصیت را در تمامی قسمتهای فرم رعایت نمائید .

لوگویی که به صفحه اصلی لینک نباشد

لینک کردن لوگوی وب سایت به صفحه اصلی، به روشی متداول تبدیل شده است و تقریباً اکثر وبگردها انتظار دارند که لوگو به صفحه اصلی برگردد. در بسیاری از وب سایتها از لوگو به عنوان تنها لینک به صفحه اصلی استفاده می شود و این یک مسئله جا افتاده در بین طراحان وب سایت و وبگرد ها است .

معلوم نبودن لینکهای دیده شده

لینک دیده شده دقیفاً توضیح میدهد چه بخشهایی دیده شده است. برای این کار احتیاجی به یک انتخاب کننده CSS پیشرفته نیست ولی مسئله ای است که معمولاً نادیده گرفته میشود. این یک راهنمای دیداری است که به کاربران نشان میدهد که روی کدامیک از لینکها کلیک شده است. این مسئله بیشتر در مورد صفحاتی شامل یک لیست از لینک ها به چشم خواهد خورد .

نشان داده نشدن فیلد فعال یک فرم

شما می توانید از انتخابگر “focus” در بسیاری از عناصر استفاده کنید ،اما حتما این گزینشگر را در فرم ها برای نشان دادن فیلد مورد نظر استفاده نمائید . با اضافه کردن استایل CSS برای تغییر حالت ، مثلاً با پر رنگ شدن مرز یا تغییر ظریف در رنگ پس زمینه میتوانید منطقه یا فیلد مورد نظر را مشخص نمائید .

تصویری بدون متن جایگزین

به یاد داشته باشید که همیشه یک متن توصیفی جایگزین برای تصاویر قرار دهید مگر اینکه آنها برای تزئین به کار روند که حتی در این موارد نیز ویژگی “alt” را میتوان تنها خالی گداشت (اما همچنان باید وجود داشته باشد!). زمانیکه یک تصویر را به عنوان لینک استفاده می کنیم، باید توضیح دهیم که لینک به کجا میرود. این توضیح دقیقا متن جایگزین تصویر است که با استفاده از “alt” در تصویر قرار گرفته است .

قرار دادن عکس پس زمینه بدون رنگ پس زمینه

استفاده از تصاویر پس زمینه بسیار مرسوم است اما باید به یاد داشته باشیم که ممکن است این تصاویر به هر دلیلی غیر فعال شوند و قابل رویت نباشند . در چنین مواردی ممکن است نا هماهنگی های بسیاری در طرح وب سایت به وجود آید مانند خوانده نشدن متون به دلیل همرنگ بودن با رنگ زمینه . بنابراین احتیاج است که از رنگی مشابه رنگ تصویر پس زمینه بعنوان رنگ پس زمینه استفاده کرد تا متن غیر قابل خواندن نگردد و از به وجود آمدن ناهماهنگی مقداری جلوگیری نمود.

استفاده از محتوای متنی طولانی و خسته کننده

هیچ چیزی بیشتر از این عذاب آور نیست که یک صفحه وب از یک متن ممتد طولانی تشکیل شود. سعی نمائید محتویات را با تصاویر، تیترها و قسمتهای خالی از هم جدا نمائید تا برای مرور کردن، خواندن و فهمیدن آسان تر شود.

خط کشیدن زیر متنی که لینک نیست

همه می دانند متنی که زیر آن خط کشیده شده است، یا رنگی متفاوت دارد احتمالاً باید لینک باشد . بنابراین بازدید کننده ها را با خط کشیدن زیر متن هایی که لینک نیستند گیج نکنید! برای جلب توجه به یک کلمه خاص از تگهای em و strong استفاده کنید.

گفتن به مردم که اینجا را کلیک کنید

کلمات “اینجا را کلیک کنید” از زمان بوجود آمدن اینترنت بوده است ، ولی با توجه به وجود گزینه های مفیدتر از آنها اجتناب نمائید . استفاده از کلمات “اینجا را کلیک کنید” نیازمند این است که کاربر کل جملات را بخواند تا متوجه شود چه اتفاقی افتاده است . اما بهتر است متن لینک ، توضیح دهد که چه اتفاقی خواهد افتاد وقتی روی لینک کلیک می شود.

استفاده از متن “justify” شده

این یک راهنمایی دیگر برای داشتن وب سایت مفیدتر است . متن “justify” شده به نظر تمیز و مرتب به چشم می آید، ولی میتواند باعث بوجود آمدن مشکلات خوانایی شود، مخصوصاً برای کسانی که به بیماری “Dyslexic” مبتلا هستند یعنی کسانی که سخت می توانند فواصل نا هماهنگ در متون “justify” شده را تشخیص دهند.

این مطلب توسط آقای آرش آقا مولائی ترجمه و آماده سازی شده است