برای طراحی رابط کاربری صفحههای کوچیک (نسخه موبایل و تبلت وبسایت و اپلیکیشنها) نیاز داریم که منویی طراحی کنیم که مناسب سایز اون صفحه باشه. منویی که همهی آیتمها رو شامل بشه و آیتمها خوانایی خودشون رو با داشتن سایز مناسب حفظ کنن تا کاربرها بتونن از منوی اپلیکیشن یا وبسایت به راحتی استفاده کنن. با اینکار باعث بهبود تجربه کاربری منوی موبایل میشیم.
جالب اینه تو همین سایت با داشتن چهارتا آیتم تو منو، مجبور شدم به خاطر فضای کم، منوی مخصوص موبایل طراحی کنم. حالا مشکل جایی جدیتر میشه که منویی پر از آیتم داشته باشیم. مثلا طراحی یوآی سایت یا اپلیکیشن فروشگاهی! واویلا میشه. منویی با کلی آیتم و زیرمنو. مگه این همه مورد جا میشه تو اون عرض کوچیک صفحه موبایل؟ اگر هم که سایز آیتمها رو کوچیک کنی به سختی میشه خوندشون. بماند که ظاهر و رابط کاربری داغون میشه.
خب یه راه حل خوب برای برطرف کردن این مشکل هست. میتونیم مرسوم ترین نوع منو برای موبایل رو بکار ببریم. اون چیزی نیست جز منوی همبرگری. همهمون حداقل یه بار دیدیمش.
حالا چرا اسمش اینه؟ چون که ظاهرش به همین شکله. دقیقا مثل لایه های همبرگر که از کنار دیده میشن. جالبهها !! تو این عکس آیکنهای دیگه که اونها هم برای منو مرسوم هستن رو میتونی ببینی. قطعا خیلی از سایتها و اپلیکیشنها از این منوها استفاده میکنن. هدف من از این مطلبی که نوشتم بهتر کردن تجربه کاربری موبایل در حین طراحی رابط کاربری بود، نه اینکه صرفا از آیکون همبرگری استفاده کنی. میتونی از کباب، جعبه آبنبات یا شکلات استفاده کنی. ولی مرسومترین همبرگره.
میتونی از اینجا فونت آیکونهای مخصوص منو رو رایگان دانلود کنی!
حالا برای اینکه بتونیم منوی همبرگری خوبی طراحی کنیم باید به چندتا نکته توجه کرده و اجراشون کنیم. در ادامه به ۴ نکته کاربردی اشاره میکنم تا بتونی ازشون استفاده و منو و رابط کاربری بهتری برای موبایل با در نظر گرفتن تجربه کاربری طراحی کنی.
نکته اول: منو همیشه در سمت راست
منو باید در سمت راست صفحه قرار بگیره. چرا؟ برای چی؟ خب به این علت که زبان مادری ما فارسیه و برای مطالعه از راست به چپ می خونیم. چشمهای ما هم عادت به حرکت در صفحه از راست به چپ دارن. به همین علت به طور خودکار باعث میشه که کاربر در همون نگاه اول متوجه وجود منو بشه.
البته توجه داشته باش که این نکته برای طراحی به زبان فارسیه. اگر طراح بین المللی هستی میدونی که برای لاتین باید از چپ شروع کنی. پس منوی همبرگری اپلیکیشن یا وب سایت رو در سمت راست صفحه قرار بده.
فقط در صورتی که سفارش دهنده طرح ازت خواست یا اینکه مجبور بودی لوگو یا شعار رو در سمت راست قرار بدی، اونوقت مجبوری منو رو به چپ ببری. ولی در غیر این صورت، همیشه راست!
نکته دوم: ترتیب آیتمهای منو
دقیقا مشابه منوی دسکتاپ سایت که ترتیب قرارگیری آیتمهای منو بر اساس اهمیت اونها، از راست (اولویت بیشتر) به چپ (اولویت کمتر) هست، برای منوی همبرگر هم باید همین کار رو انجام بدی.
با این تفاوت که باید ترتیب اهمیت رو از بالا به پایین در نظر بگیری. پس مهمترین آیتم اول لیست و کم اهمیتترین، آخرین آیتم در منوی همبرگری باید باشه. رعایت سلسله مراتب یا هایراکی فراموش نشه! در غیر این صورت کاربرها گیج میشن و طراحیت از UX یا تجربه کاربری خوبی برخوردار نیست.
نکته سوم: تصویر پروفایل فراموش نشه!
اگر رابط کاربری اپلیکیشن یا وبسایتی رو طراحی می کنی که نیاز به ثبت نام و ایجاد پروفایل داره، چه بهتر میشه که تصویر پروفایل (آواتار) کاربر و اطلاعات اکانتش مثل اسم یا یوزرنیم رو در ابتدای منوی همبرگری قرار بدی.
با اینکار دسترسی به تنظیمات حساب کاربری آسونتر میشه. در کنارش ظاهر منو از سادگی و یکنواخت بودن خارج و طراحیت زیباتر میشه. تاثیر خیلی خوبی هم روی تجربه کاربری داره.
برای مطالعه بیشتر میتونی این مطلب رو هم بخونی: رابط کاربری یا تجربه کاربری: اولویت با زیبایی یا کارایی؟
نکته چهارم: آیکونها برای نمایش عملکرد
حتما به جای استفاده صرف از متن و نوشته برای آیتمها در منو، از آیکونها هم کمک بگیر. میتونی در کنار عنوان هر آیتم، آیکون مناسبی هم قرار بدی.
آیکونها بهترین وسیله برای نشون دادن عملکرد هر گزینه به کاربر هستن. و باعث میشن افراد سریعتر و در زمان کمتر گزینه دلخواهشون رو انتخاب کنن. درضمن استفاده از آیکونها باعث زیباتر شدن طراحی رابط کاربری که انجام دادی میشن. البته یادت باشه که حتما از آیکونهای مناسب با موضوع هر آیتم استفاده کنی تا کاربرها دچار سردرگمی نشن. این میشه بهبود تجربه کاربری منوی موبایل!
