8 تا از بهترین عملکردهای mobile UX که هر طراح باید در نظر بگیرد

مقدمه

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

امروزه ، طراحان با قرار دادن تعداد زیادی از اطلاعات که معمولاً یک مانیتور روی صفحه نمایش بسیار کوچکتر نشان می دهد، به چالش کشیده می شوند. علاوه بر این، طراحان باید از بسیاری از ساختارهای مختلف دستگاه تلفن همراه که به طور مداوم در بازار ظاهر می شوند (به عنوان مثال صفحه های خمیده، فرو رفته و غیره) مطلع شوند.

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

1. اقدامات اصلی را در دسترس نگه دارید

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

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

97afb49563288333c94c8b0e6eb185e7

 

2. خوانایی را در نظر بگیرید

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

7745d3c52e89d8bb1cc1aca03acf47df

3. از مشکل پیمایش طولانی خودداری کنید

پیمایش طولانی یک روش عالی برای تمرکز کاربران در هنگام خواندن متن های طولانی است. با این حال، در موارد دیگر، (به عنوان مثال، هنگامی که از کاربران خواسته می شود کاری را انجام دهند)، مطالعات نشان می دهد که هرچه بیشتر پیمایش کنیم، تمایل کمتر می شود.

سعی کنید صفحه ها را با استفاده از کارتهایی با ویژگی "tap to expand" یا تقسیم تسک ها در صفحه ها، تا حد ممکن کوتاه نگه دارید.

92239cc574a5b1f21330d31f02ba24dc

4. نوع و اندازه قلم

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

  • حروفچینی: نوع متنی را انتخاب کنید که در اندازه ها و وزن های مختلف به خوبی کار کند تا خوانایی و قابلیت استفاده در هر اندازه را حفظ کند.
  • اندازه قلم: از اندازه قلم خوانا استفاده کنید. اپل و گوگل حداقل 11 پوینت پیشنهاد می کنند تا کاربران بتوانند آن را در فاصله معمول مشاهده بدون بزرگنمایی بخوانند.
  • کنتراست رنگ: برای جلوگیری از مشکلات رنگ بین قلم و پس زمینه، از contrast checker ها استفاده کنید. همچنین، از قانون 60-30-10 استفاده کنید که به یک نسبت ایده آل برای رسیدن به تعادل در بین رنگ ها اشاره دارد.
Movie App - Wireframe wireframing concept clean minimal ios app ux ui wireframe

 آیا قرار است wireframing شما را به طراح بهتری تبدیل کند؟ Wireframing یک مرحله اساسی در روند خلاقیت است. ما تمام وقت این کار را انجام می دهیم تا مفاهیم وب سایت و صفحه های mobile app را ترسیم کنیم تا از نحوه حرکت کاربر در سایت مطلع شویم ...

5- فاصله و padding کافی را بگذارید

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

همچنین به خاطر داشته باشید که فناوری های جدید هر روز در حال ظهور هستند و به عنوان یک طراح ، به روز بودن مهم است. به عنوان مثال ، نمایشگر تلفن منحنی یا curve به معنای افزایش padding زدن چند پیکسل برای جلوگیری از لمس ناخواسته است (16ptحداقل padding توصیه شده برای دستگاه ها است).

45190d7f35290407e6cdff8b50666b59

6. دکمه های finger-friendly طراحی کنید

ضربه های تصادفی اغلب به دلیل کنترل های کوچک لمسی اتفاق می افتد. برای جلوگیری از این اتفاق، کنترل هایی ایجاد کنید که حداقل 10-12 میلی متر (40 پیکسل) اندازه داشته باشند تا بتوان آنها را با انگشت دقیق زد.

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

3ee0cafa794a62cc29890d6328bebca7

7. نوارهای زبانه ای را واضح کنید

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

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

11807fd1ede3d5b8ca756fbd75ad4c25

8- از navigation bar های آشنا استفاده کنید

سعی کنید از توالی های استاندارد برای منوی پیمایش خود استفاده کنید، مانند iOS tab bar یا Android nav drawer. سعی نکنید چرخ را دوباره اختراع کنید. کاربران با این pattern های معمول آشنا هستند، بنابراین برنامه شما برای آنها بصری بیشتری خواهد داشت. این مورد در مورد سایر عناصری که در این سیستم عامل ها متفاوت طراحی شده اند نیز صدق می کند.

9642d6d8614861a61532427e19643303

ایده نهایی

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

 

سعید نصیری
سعید نصیری

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

× در حال پاسخ به: