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

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


امیر سروری ۲۶ دیدگاه استاندارد وب سایت , اصول طراحی وب سایت یکشنبه, ۲۷ام شهریور , ۱۳۹۰ 29723 بازدید

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

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

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

webtarget.ir usability

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

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

webtarget.ir usability

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

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

webtarget.ir usability

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

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

webtarget.ir usability

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

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

webtarget.ir usability

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

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

webtarget.ir usability

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

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

webtarget.ir usability

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

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

webtarget.ir usability

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

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

webtarget.ir usability

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

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

webtarget.ir usability

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

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



نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


۲۶ دیدگاه برای این نوشته ثبت شده است


  1. علیرضا
    ۲۷ شهریور ۱۳۹۰

    سلام ممنون مفید بود….یه سوال در مورد لینک های خروجی سایتتون برام پیش امده که می خوام بدونم از چه پلاگینی برای نمایش دادنشون استفاده می کنین. ممنون میشم




    • امیر سروری
      ۲۷ شهریور ۱۳۹۰

      علیرضا @ سلام و ممنون . دقیقا متوجه نشدم منظورت چیه ؟ لطفا دقیق تر بگو تا بتونم کمک کنم .




  2. علیرضا
    ۲۸ شهریور ۱۳۹۰

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




    • امیر سروری
      ۲۸ شهریور ۱۳۹۰

      علیرضا @ از پلاگین خاصی استفاده نشده یک تکنیک Css هست که به صورت دستی استفاده کردم . در مورد ساتتون هم باید ببینم تا بتونم نظر دقیق بدم . اگه دوست داشتید لینک سایتتون رو برام بفرستید تا بررسی کنم . موفق و پیروز باشید .




  3. بابک
    ۲۸ شهریور ۱۳۹۰

    سلام عالی بود مرسی




  4. حامد
    ۲۸ شهریور ۱۳۹۰

    ممنون امیر جان.مطلب مفیدی بود. ;)




  5. علیرضا
    ۲۹ شهریور ۱۳۹۰

    سلام بازم ممنون از پاسخ ، اکی متوجه شدم من فکر می کردم که توی پسته ها هم از این لینک های خروجی با ایکن هم استفاده می کنی دیدم نه فقط توی سایدبار ها و غیره انم که از طریق ادیت اچ تی ام ال میشه این کلاس رو اضافه کرد. ;)




  6. حمید حسین وند
    ۲ مهر ۱۳۹۰

    سلام
    جالب بودم استفاده کردیم!




  7. فاطمه
    ۲۱ آذر ۱۳۹۰

    سلام ممنون از مطالبتون لطفا درمورد راه اندازی صفحات وب روی اینترنت توضیح دهید




  8. راوندي
    ۷ دی ۱۳۹۰

    سلام آقای سروری.
    من یه مشکلی دارم که به هر کی گفتم نتونسته کمکم کنه.
    من میخواستم قالبی بسازم که با همه ی نمایشگر های یکسان نمایش داده باشه. طوری نباشه که فقط توی یه نمایشگر مثل crt کامل نشون بده ولی توی lcd کوچکتر باشه.
    من تونستم با دادن مقدار درصد به عرض div این مشکل رو حل کنم و به فونت هم مقدار em بدم ولی و به عکس هم مقدار درصد ولی عکس زمینه رو نفهمیدم چیکارش بکنم. هر کاری کردم درست نشد.
    شما میتونی راهنماییم کنی؟
    متشکرم.




  9. Diho
    ۲۸ دی ۱۳۹۰

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




  10. diho
    ۳۰ دی ۱۳۹۰

    مرسی از پاسخ سریعتون :)
    عالی شده :)




  11. مهرداد
    ۹ فروردین ۱۳۹۱

    ممنون از نوشتارتون، مبتدی ولی بسیار آموزنده بود. ساده و قابل فهم بود.




  12. baran
    ۱۶ شهریور ۱۳۹۱

    همین که مطالب را با عکس های جالبی گذاشتید خیلی خوبه.ممنون




  13. حسین کربلایی دوست
    ۱۴ آبان ۱۳۹۱

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




  14. امیر امامی
    ۱۹ اردیبهشت ۱۳۹۲

    سلام خسته نباشید. ی سوال داشتم. در قسمت ” استفاده از محتوای متنی طولانی و خسته کننده ” متنی که نوشته شده توسط تگ های هدر و پاراگراف مشخص شدن. ما که این تگهارو به صورت دستی نباید مشخص کنیم؟ خود مثلا ورد یا جایی که تو سی ام اس می نویسیم اینو تشخیص می دن دیگه؟




  15. kanyar
    ۲۵ اردیبهشت ۱۳۹۲

    تشکر
    موفق باشین




  16. فهیمه
    ۱۱ مرداد ۱۳۹۲

    احسنت
    ظریف بود!!justif




  17. علی
    ۱۹ تیر ۱۳۹۳

    خیلی عالی بود . ممنون




  18. شهاب
    ۷ مهر ۱۳۹۳

    ممنون
    مفید بود!




  19. ali
    ۲۰ اسفند ۱۳۹۳

    خیلی ممنون .سایت خیلی خوبی دارید




  20. spielen
    ۳۱ مرداد ۱۳۹۴

    موارد بسیار کاربردی است.
    به خصوص مورد زدن Alt برای تصویر و نشان دادن لینک های مشاهده شده. ممنون.




  21. یاسر
    ۳۱ مرداد ۱۳۹۴

    ممنون از سایت خوبتون.



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

لطفا دیدگاهتان تا حد امکان مربوط به پست بالا باشد. اگر حرف دیگری دارید و یا قصد تماس با من را دارید، از فرم تماس استفاده کنید.

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.