طراحی ux برای موبایل: bottom navigation

طراحی ux برای موبایل: bottom navigationReviewed by مهرخ on Nov 25Rating: 5.0طراحی ux برای موبایل: bottom navigationطراحان به خوبی می دانند که طراحی چیزی فراتر از صرفا یک ظاهر خوب است. طرح چگونگی تعامل کاربر با محصول (وب سایت و یا اپلیکیشن) را مشخص می کند. جهت یابی در برنامه یک نوع مکالمه است. چون صرف نظر از اینکه برنامه ی شما چقدر خوب باشد کاربر باید بتواند به راحتی از برنامه استفاده کند.

طراحی ux برای موبایل: bottom navigation

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

چرا bottom navigation اهمیت فراوانی دارد؟

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

touch-screen

پس این خیلی مهم است که برنامه های مهم تر و کارهایی که بیشتر کاربرد دارند را در قسمت پایینی صفحه قرار بدید چون دسترسی به این قسمت ها راحت تر است.

 Tab bar

بسیاری از برنامه ها از این روش پیروی می کنند و از bottom navigation برای مهم ترین کارکرد های برنامه ها استفاده می کنند.در برنامه ی فیسبوک مهم ترین قسمت های برنامه به راحتی در دسترس هستند و میتوانید به راحتی از بین گزینه ها، گزینه ی مورد نظر را انتخاب کنید.

facebook

طراحی navigation

Navigation وسیله ای ست که کاربر می تواند با آن به هر قسمتی که میخواهد برود. از bottom navigation برای گزینه هایی استفاده میکنند که بیشترین کاربرد را دارند و تقریبا شبیه هم هستند و کاربر بتواند از هر قسمت برنامه بتواند به طور مستقیم به این موارد دسترسی پیدا کند.یک bottom navigation خوب سه ویژگی زیر را دارد.

اهمیت کارکرد ها

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

destinations

بیشتر از پنج کارکارد هم برای bottom navigation استفاده نکنید چون اینطوری target ها بسیار به هم نزدیک می شوند. گذاشتن گزینه های زیاد در تب باعث می شود کاربر ها به راحتی نتوانند گزینه ی مورد نظرشان را انتخاب کنند. و با هر تبی که اضافه می کنید پیچیدگی های برنامه تان هم زیادتر میشود.

targets

اگر بیشتر از پنج مورد مهم در برنامه تان داشتید بجای bottom navigation از alternative location استفاده کنید.

 پرهیز از به کاربردن متن های اسکرول شده

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

scrollable

موقعیت

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

بدون اینکه کسی کاربر ها را راهنمایی کند باید خودشان بتوانند با یک نگاه بفهمند که چگونه از نقطه ی a به نقطه ی b بروند. باید از ابزار بصری مناسب مانند آیکون، برچسب و رنگ … برای راهنمایی کاربرها استفاده کنید.

آیکون ها

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

icons-baar

رنگ آمیزی

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

common-color

از این روش استفاده کنید:

Bottom navigation را (آیکون و برچسبش) را طبق رنگ اولیه ی برنامه رنگ کنید.

primary-color

اگر bottom navigation bar خودش رنگی بود برای آیکون هاو برچسب هایشان از رنگ سیاه وسفید استفاده کنید.

colorsssssss

المنت های منو باید به راحتی اسکن شوند. کاربر ها باید به راحتی متوجه بشوند که با زدن هر دکمه چه اتفاقی می افتد.

برچسب آیکون ها

برچسب آیکون ها باید خلاصه باشد و به بهترین نحو کارکرد ایکون را توضیح دهد. از متن های طولانی برای برچسب ها استفاده نکنید.

target-labels

اندازه ی target

اندازه ی target ها را طوری انتخاب کنید که کاربر به راحتی بتواند روی آن کلیک کند. برای محاسبه ی پهنای هر bottom navigation action  عرض هر view را بر تعداد اکشن ها تقسیم کنید.

اندروید اندازه های زیر را برای سایز bottom navigation bar موبایل پیشنهاد می دهد.

size

اعلان tab

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

badge

جهت یابی(navigation) خوب مثل دستی نامرئی ست که کاربر را دربرنامه راهنمایی می کند. اگر بهترین کارکردها و ویژگی ها را برای برنامه تان بسازید اما کاربر نتواند به آسانی به آنها دسترسی پیدا کند، کارتان بی فایده می شود.

Behavior

هرآیکون bottom navigation باید به یک صفحه و مکان جدید ختم شود و نباید منو و یا pop-up ها را باز کند.با هر بار زدن بر آیکون bottom navigation باید صفحه ی جدیدی مرتبط با آن ایکون باز شود و یا اینکه  یک active view به روز رسانی شود.

behavior

برای کنترل کردن صفحه ی برنامه و یا حالت برنامه ،tab bar در اختیار کاربر قرار ندهید و به جای آن از toolbar استفاده کنید.

toolbar

تلاش برای ثبات برنامه

تا جایی که امکان دارد از یک tab برای تمامی جهات استفاده کنید. این به کاربر حس ثبات و پایداری را انتقال می دهد. درصورتی که عملکرد یک tab در دسترس نیست tab را حذف نکنید. اگر یک tab را در یک جا بردارید و در جای دیگری نمایشش دهید این کار باعث می شود که ui برنامه نا پایدار و غیر قابل پیشبینی شود. بهترین راه این است که تمامی tab ها فعال باشند اما توضیح دهید که چرا بعضی tab ها در دسترس نیستند. برای مثال ، اگر کاربر offline flies نداشته باشد در قسمت dropbox یک offline tab بزارید و در یک صفحه توضیح دهید که کاربر چگونه می تواند از آن tab استفاده کند. این ویژگی empty state نام دارد.

empty-state

پنهان کردن

اگر صفحه اسکرول می شود با اسکرول شدن صفحه می شود tab bar را پنهان کرد و وقتی دوباره به سمت بالا اسکرول شد دوباره ظاهر شود.

scroll-page

زیبایی های بصری

از حرکت  lateral motion برای جا به جا شدن بین view ها استفاده نکنید. برای جا به جا شدن بین view فعال و غیر فعال از حرکت cross-fade animation استفاده کنید.

visual

نتیجه گیری

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

ترجمه کاری از گروه learnstu-(مترجم:مهرخ اکبری)

پاسخ دهید