ویرگول
ورودثبت نام
Atefeh Khabazian
Atefeh Khabazian
خواندن ۷ دقیقه·۴ سال پیش

نکاتی برای فراهم کردن یک گشت و گذار راحت و هموار در وب سایت!

"فهرست" یکی از مهمترین جنبه های طراحی محصول است. کاربرها برای پیدا کردن محتوا و خدمات و امکانات سایت شما از فهرست استفاده می کنند. کمک به کاربران برای پیمایش راحت تر در فهرست ها باید از اولویت های اصلی هر اپلیکیشن یا وب سایت باشد.

به هر حال مهم نیست شما چقدر برای تهیه محتوا و ارائه خدمات و ویژگی های خوب وقت صرف می کنید، اگر بازدیدکننده نتواند آنها را پیدا کند همه این کارها بی فایده است.

1. طراحی ناوبری متناسب با مدلهای ذهنی کاربر

  • ببینید کاربران چطور سایت شما را پیمایش می کنند. از ابزار های تحلیل وب استفاده کنید تا بفهمید کاربرها دنبال چه چیزی میگردند. جلسات نشست کاربر را مرور کنید تا درک کنید چه نوع تسک هایی توسط کاربر انجام و تکمیل می شوند.
مثالی از گزارش رفتار کاربر در Google Analytics. نمای
مثالی از گزارش رفتار کاربر در Google Analytics. نمای


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


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


2. طراحیِ قابل کشف

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


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


  • منوها را در مکان های آشنا قرار دهید. به یاد داشته باشید که مردم بیشتر وقت خود را در سایت های دیگر می گذرانند. آنها انتظار دارند وب سایت شما هم شبیه به سایر وب سایت ها کار کند. بنابراین منو را در مناطقی قرار دهید که کاربران انتظار دارند آن را پیدا کنند: بالای صفحه ،سمت راست صفحه یا فوتر.


3. بازدیدکنندگان را هدایت و راهنمایی کنید

  • از برچسب های واضح استفاده کنید. طراحی فهرست وب سایت باید قابل پیش بینی باشد. بازدید کننده باید بتواند معنی هر آیتم در فهرست را پیش از تعامل با آن پیش بینی کند. به همین دلیل بهتر است از اصطلاحات تخصصی برای برچسب ها خودداری کنید. از واژه های ساده ای که برای همه در همه ی قسمت های سایت شما آشنا است استفاده کنید از جمله برچسب های منو.
  • لینک های منو را فعال و پویا نشان دهید. اگر آیتم ها تعاملی و شبیه به لینک به نظر نرسند بازدیدکنندگان حتی نمی توانند متوجه شوند که این یک منو است. از راهنمای بصری مانند رنگ های متضاد استفاده کنید تا به بازدیدکنندگان سیگنال واضحی از آنچه ایستا یا قابل کلیک و پویا است ارائه دهید.
  • آیتم های فهرست با اندازه مناسب را طراحی کنید. اگر آیتم های فهرست بسیار کوچک یا نزدیک به یکدیگر باشند می توانند باعث خطا شوند. یک منطقه قابل لمس با اندازه حدود 9 میلی متر برای اکثر کاربران مناسب است.
  • فعلی بازدیدکنندگان را اعلام کنید. به بازدیدکنندگان کمک کنید تا بتوانند تشخیص دهند در کدام قسمت از سلسله مراتب سایت شما قرار دارند. گزینه ای که در حال حاضر از فهرست انتخاب شده را برجسته و متمایز کنید و مطمئن باشید که عنوان صفحه هم موضوع فعلی را مشخص می کند.
برجسته کردن موقعیت فعلی در سایت مک دونالد
برجسته کردن موقعیت فعلی در سایت مک دونالد


  • برای صفحات با اسکرول طولانی از منوهای چسبنده (sticky menus) استفاده کنید. با یک منوی معمولی بازدیدکنندگانی که به انتهای یک صفحه طولانی رسیده اند باید برای دسترسی به فهرست، دوباره به بالای صفحه برگردند. از طرف دیگر منوهای چسبنده همیشه در معرض دید هستند و این باعث افزایش تعامل می شود.

4. طراحی برای امکان اسکن سریع

  • برچسب های 2 کلمه ای در نظر بگیرید. هر مورد از فهرست باید حاوی یک یا دو کلمه باشد. چرا؟ چون معمولا بازدیدکنندگان هنگام اسکن کردن لیست ها، حدود 2 کلمه را مرور میکنند.
  • برای شروع آیتم های فهرست از به کار بردن کلمات تکراری خودداری کنید. زیرا مانع از اسکن سریع می شود.
سمت چپ: استفاده از کلمات تکراری برای شروع موارد لیست در یک منو
سمت چپ: استفاده از کلمات تکراری برای شروع موارد لیست در یک منو


  • آیتم های فهرست را راست چین کنید (فارسی). با استفاده از ترازبندی مناسب قابلیت اسکن را بهبود می بخشید.
  • مراقب ALL CAPS باشید. (متون انگلیسی) THIS IS A SENTENCE WRITTEN IN ALL CAPS.

می بینید که خوانایی با تمام کلمات کاهش می یابد زیرا همه کلمات دارای شکل مستطیل یکنواخت هستند. ALL CAPS ممکن است برای آیتم های منوی یک یا دو کلمه ای کار کند ، اما بهتر است وقتی بسیاری از موارد منو 3 کلمه هستند از آن اجتناب کنید.

  • تعداد آیتم هایهای سطح بالا و اصلی را محدود کنید. جورج میلر روانشناس شناختی دریافت که تعداد اشیایی که یک انسان معمولی می تواند در حافظه کوتاه مدت نگه دارد 7 ± 2 است. هنگام طراحی منو به این تعداد توجه کنید. اگر یک وب سایت پیچیده طراحی کنید، می توانید تعداد محدودی از آیتم های سطح بالای فهرست ارائه دهید و در عوض بقیه را در زیر منوها قرار دهید.
  • ترتیب آیتم های فهرست را در نظر بگیرید. نه تنها تعداد آیتم ها مهم است بلکه ترتیب آنها نیز مهم است. بر اساس نظریه اثر موقعیت ترتیبی، افراد اولین و آخرین مورد از یک مجموعه را بهتر به خاطر می آورند. با توجه به این تأثیر موارد ابتدا و انتها بسیار موثرتر هستند زیرا مغز ما آنها را خیلی راحت تر از موارد میانی در یک لیست به خاطر می آورد.

به همین ترتیب آیتم هایی که در ابتدا یا انتهای فهرست خود قرار می دهیم برجسته تر می شوند. به عنوان مثال اگر یک صفحه فرود(Landing page) برای یک محصول طراحی می کنید ممکن است بخواهید ابتدا لینکی به صفحه جزئیات محصول در نظر بگیرید و گزینه های "با ما تماس بگیرید" یا "خرید" به عنوان آخرین اولویت در فهرست باشند.

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


 مگا منوها esteelauder.com
مگا منوها esteelauder.com


5. بار شناختی بازدید کننده را به حداقل برسانید

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


منبع

https://uxplanet.org

طراحی رابط کاربریتجربه کاربریپیمایشنویگیشن
دانش آموخته IT، علاقه مند به رشد و یادگیری
شاید از این پست‌ها خوشتان بیاید