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

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


امیر سروری ۲۷ دیدگاه استاندارد وب سایت , اصول طراحی وب سایت یکشنبه, 18th سپتامبر , 2011 49161 بازدید

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

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

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

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. علیرضا
    18 سپتامبر 2011

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




    • امیر سروری
      18 سپتامبر 2011

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




  2. علیرضا
    19 سپتامبر 2011

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




    • امیر سروری
      19 سپتامبر 2011

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




  3. بابک
    19 سپتامبر 2011

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




  4. حامد
    19 سپتامبر 2011

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




  5. علیرضا
    20 سپتامبر 2011

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




  6. حمید حسین وند
    24 سپتامبر 2011

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




  7. فاطمه
    12 دسامبر 2011

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




  8. راوندي
    28 دسامبر 2011

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




  9. Diho
    18 ژانویه 2012

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




  10. diho
    20 ژانویه 2012

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




  11. مهرداد
    28 مارس 2012

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




  12. baran
    6 سپتامبر 2012

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




  13. حسین کربلایی دوست
    4 نوامبر 2012

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




  14. امیر امامی
    9 می 2013

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




  15. kanyar
    15 می 2013

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




  16. فهیمه
    2 آگوست 2013

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




  17. علی
    10 جولای 2014

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




  18. شهاب
    29 سپتامبر 2014

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




  19. ali
    11 مارس 2015

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




  20. spielen
    22 آگوست 2015

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




  21. یاسر
    22 آگوست 2015

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




  22. مینا محمدی
    15 آوریل 2018

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



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





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

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

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

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

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



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

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