اگر چیزی وجود داشته باشد که در طول زمان ارزش خود را حفظ کرده باشد ، محل قرارگیری انگشت شست روی گوشی های موبایل است. همین امر باعث شده است که واژه ی “محل انگشت شست” در تحقیقات استیون هوبر بگنجد و همچنان عامل مهمی در طراحی و توسعه ی رابط های کاربری موبایل است.
تا به حال شده است با یک وبسایت یا اپلیکیشن مخصوص موبایل سر و کار داشته باشید و در محل قرارگیری انگشت شست احساس ناراحتی بکنید؟ شاید گاهی لازم باشد برای دسترسی به یک منوی مهم انگشت خود را بکشید ، یا لمس کردن در آن سایت یا اپلیکیشن با دیگر بخش های لمسی ترکیب شود. چنین کاستی هایی موجب نارضایتی از محل انگشت شست می شوند.
یادگیری از بهترین نمونه ها
همانطور که قبلا گفته شد ، استیون هوبر در “طراحی رابط کاربری موبایل” تحقیقاتی انجام داده و مقالاتی نوشته است. اولین بار در همین جا بود که با اهمیت در نظر گرفتن محل قرارگیری انگشت شست در هنگام طراحی آشنا شدم.
علاوه بر هوبر، جاش کلارک در کتاب خود با عنوان “طراحی برای لمس” اطلاعات زیاد و مفیدی در مورد اینکه مردم چگونه دستگاه های موبایل خود را در دست می گیرند ثبت کرده است.
با بهره گیری از مطالعات هوبر و کلارک در مورد نحوه ی تعامل انگشت های شست با دستگاه ها ، من یک تست کاربر محور طراحی کردم که تفاوت محل قرارگیری عناصر طراحی رامشخص می کند. تست های من در مورد عناصر ناوبری (رفتن به دیگر صفحه ها) در بالا و پایین صفحه ، بخش های دارای دکمه در موقعیت های مختلف و مناطق حرکت و اشاره خارج و داخل محل قرارگیری شست صورت گرفتند.
نتایج تست من تحقیقات هوبر و کلارک را ارزیابی کرده و در عین حال ، در مورد اینکه در طراحی چه مواردی بهترین عملکرد و چه مواردی بدترین عملکرد را دارند مدارک مستدلی فراهم کرد. در زیر، من یافته هایم در مورد طراحی عناصری که تست کردم را بیان کردم. اجازه دهید شروع کنیم!
ارتباط شست ها و صفحات لمسی چیست؟
خیلی خوب است که شست های متضاد داریم. شست ها علاوه بر اینکه باعث می شوند نسبت به ستاره های دریایی خیلی قابل توجه تر باشید ، همچنین کلید نحوه ی تعامل ما با صفحه ی لمسی دستگاه های موبایل نیز می باشند. تحقیقات هوبر نشان داد که 49% از مردم گوشی های هوشمند خود را در یک دست نگه می دارند و کار اصلی را انگشت های شست انجام می دهند. کلارک در این مورد بیشتر تحقیق کرد و مشخص کرد که 75% از تعاملات لمسی با گوشی ، از طریق انگشت های شست انجام می شوند.
با این درک از محل قرارگیری دست ، می توانیم نتیجه بگیریم که اکثر گوشی های هوشمند مناطق خاصی برای قرارگیری انگشت شست تدارک می بینند. اسم این مناطق عبارت است از “مناطق با دسترسی آسان”، “مناطق با دسترسی سخت” و “مناطق میانه”.
نگاشت محل قرارگیری انگشت شست برای کاربران چپ دست و راست دست. منطقه ی ترکیبی (تصویر وسط) بهترین مناطق قرارگیری ممکن برای اکثر کاربران را نشان می دهد.
نکته ی مهم این است که طراحی باید بر اساس محل حرکت و لمس انگشت شست انجام شود. این نکته باعث ایجاد چارچوبی برای اتخاذ تصمیمات بهتر در طراحی سایت حرفه ای ، تجربه کاربری بهتر و دردسر کمتر می شود. از طریق تست و تجربه ی کاربران ، چند روش برای استفاده از این علم در پروژه های روزانه کشف شدند.
مشکلات ناوبری را چگونه حل کنیم؟
همه ی ما آن زمان هایی که ناوبری موبایل (جابجایی بین صفحات) تنها یک لیست dropdown (لیست بازشو) ساده از لینک ها بود را به خاطر داریم. آن طراحی اصلا جالب نبود، اما به هر حال کار راه انداز بود. امروزه، نمونه های زیادی از الگوهای ناوبری را شاهد هستیم. کدام برای محل قرارگیری انگشت شست بهترین است؟
حرکت طبیعی کاربر اولین چیزی است که باید یاد بگیرید در محاسبات خود بگنجانید. این سوالات را از خود بپرسید: “آیا اپلیکیشن من لیست بلند بالایی از لینک ها دارد؟”، “آیا لازم است منوها را ترکیب کنم؟”، “چه روشی برای طراحی وبسایت من مناسب است؟”. پاسخگویی به این سوالات به شما کمک می کند مشخص کنید سنسورهای ناوبری را در کجا قرار دهید.
اگر اپلیکیشن شما لیست بلند بالایی از لینک ها دارد، پس احتمالا بهتر است از یک منوی تمام صفحه استفاده کنید. این نوع منو فضای لازم برای سازمان دهی لیست، کلید های اجتماعی و دیگر محتوای مفید را فراهم می آورد. این الگو گزینه ی خوبی بین دستگاه های موبایل و دسکتاپ است و منو فرصتی برای تنظیم کردن عناصر قابل کلیک در داخل محل قرارگیری انگشت شست فراهم می کند.
Huge همیشه از منوهای تمام صفحه در دستگاه های موبایل استفاده ی خوبی می کند:
از طرف دیگر، اگر اپلیکیشن شما لیست بلند بالایی از لینک ها ندارد، پس یک منوی چسبان(sticky menu) بهترین گزینه است. این نوع منو به بالا یا پایین صفحه می چسبد و بسته به طراحی ، فضای مناسب برای لینک های زیاد را فراهم می کند.
اپلیکیشن موبایل Airbnb از یک منوی چسبان استفاده می کند، این منو به پایین صفحه چسبیده است و دسترسی راحتی به قسمت های ثبت نام، پیغام دهی و وارد کردن اطلاعات ایجاد می کند:
اگر یک وبسایت بزرگ دارید ، ترکیب منوها می تواند گزینه ی خوبی باشد. از آنجایی که ترکیب منوها می تواند پیچیده باشد، اولویت بندی لینک های منو بر اساس اهمیت آنها در اپلیکیشن می تواند مفید باشد. منوهای چسبان برای لینک هایی که زیاد مورد استفاده قرار می گیرند عالی هستند. در چنین طراحی ای، منوهای تمام صفحه و باز شونده برای لینک هایی که مهم هستند اما در اولویت نیستند بسیار مفید خواهند بود. اپلیکیشن موبایل فیسبوک را در نظر بگیرید:
فیسبوک منوها را بر اساس حجم محتوای درون آنها با هم ترکیب می کند. در تصویر بالا، دو منوی چسبان را مشاهده می کنیم که هر کدام حاوی لینک های با ارزشی برای کاربر می باشند. منوی چسبان بالایی در محلی که لازم است انگشت کیشده شود قرار دارد، اما به اندازه ای پایین هست که چندان حس غیر طبیعی نداشته باشید. آیتم های منوی چسبان پایینی به گونه ای سازمان دهی شده اند تا کلیک کردن روی لینک های پر کاربرد راحت باشد.
با فراهم آوردن داده های کاربر، تمرین برای طراحی حرفه ای و متعادل سازی محل قرارگیری انگشت شست، فیسبوک بهترین استفاده ها را از منوهای چسبان کرده است. دفعه ی بعد که در حال پرسه زدن در پست های دوستانان هستید، مجموعه تصمیماتی که برای تجربه ی کاربری شما اتخاذ شده اند را به یاد داشته باشید چون آنها باعث شده اند چنین تجربه ی عالی ای داشته باشید.
به یاد داشته باشید که علاوه بر نگاه داشتن آیتم های ناوبری مهم در داخل محل قرارگیری انگشت شست، در مواقعی قرار دادن لینک ها در خارج از منطقه ی با دسترسی راحت نیز مشکلی ندارد. قانون کلی این است که لینک های پر استفاده را در منطقه ی “با دسترسی آسان” و لینک های با استفاده ی کمتر را در منطقه ی “با دسترسی سخت” قرار دهید.
صفحات (کارت ها) را به صورت کاربرپسند قرار دهید
حالا قصد داریم بررسی کنیم ببینیم یک الگوی خوب طراحی شده چه کاربردی در اپلیکیشن یا سایت شما دارد. الگوی صفحه ای یا کارتی مدتی است که به صورت وسیع مورد استفاده قرار گرفته است. کارت ها سریع ، آسان و قابل پیشبینی هستند. آنها اطلاعات زیاد را در فضاهای کم فراهم می آورند و باعث می شوند ارائه ی محتوای صحیح در زمان صحیح آسان تر شود.
گاهی، کارت ها را با اعمالی همچون ارسال، ذخیره، انجام، بستن و غیره همراه می کنیم.
در این مثال اپلیکیشن هواشناسی Poncho را مشاهده می کنیم. این یک مثال عالی از قرارگیری لینک های اعمالی در داخل یک کارت است: گزارش هواشناسی به لمس انگشت نیاز ندارد، پس در داخل منطقه ی خارج از دسترس قرار گرفته است. آیتم اعمالی (که در این مورد یک کلید اشتراک گذاری است) مستقیما در منطقه ی طبیعی در دسترس قرار گرفته است.
از طرف دیگر، Poncho “جستجوی منطقه” و “استفاده از منطقه ی فعلی” خود را داخل منطقه ی با دسترسی سخت قرار داده است. این امر قابل قبول است: یک کاربر به ندرت از این ویژگی ها استفاده می کند، چون اپلیکیشن از دفعه قبلی که از آن استفاده کرده اید، موقعیت شما را به خاطر می سپارد.
از طرف دیگر ، اوقاتی هم وجود دارند که الگوهای کارتی از محل قرارگیری انگشت شست استفاده نمی کنند. یک مثال عمده از این امر اپلیکیشن موبایل Etsy است. در هنگام وارسی ، Etsy یک بخش در یک کارت ظاهر شونده فراهم می کند تا کاربر بتواند اطلاعات حمل و نقل خود را در آن وارد کند:
در اولین نگاه، این نوع استفاده از یک کارت به نظر مناسب و یک طراحی خوب است. اما وقتی بیشتر بررسی کنیم، می بینیم که چندان هم جالب نیست. اولین مشکل لینک “Cancel” در گوشه ی بالا سمت چپ است. آیا این لینک ، کارت را می بندد یا فرایند وارسی را کنسل می کند؟ (اگر من گیج شدم، دیگران هم حتما گیج می شوند).همچنین، “X”در لبه ی محل قرارگیری انگشت شست قرار گرفته است و کاربر را مجبور می کند انگشت خود را بکشد تا به آن برسد.
مسئله ی اصلی این است: اضافه کردن یک کلید بستن در گوشه ی بالای کارت یک الگوی مرسوم است، اما با قانون کلی محل قرارگیری انگشت شست تناقض دارد. اگر قرار است برای برطرف کردن نیاز کاربر از محل قرارگیری انگشت شست خارج شوید، پس بهتر است به دنبال یک راه حل جایگزین باشید. می توانیم با افزودن یک کلید بستن در پایین کارت یا (از آنجایی که بهترین نوع استفاده از کارت ها، استفاده از محتوای کم در آنها است)می توانیم طول محتوا را در کارت ها محدود کنیم.
وقتی ظاهر کلی طراحی مشخص شد، اجرای طراحی از طریق نگاشت محل قرارگیری انگشست شست به منظور اطمینان از اینکه اکثر عناصر طراحی به آسانی قابل دسترس هستند و گیج کننده نیستند فکر خوبی است. از پیروی تمایلات خودداری کنید، در عوض، در هنگام طراحی و توسعه ی اپلیکیشن، تصمیمات کاربر پسند اتخاذ کنید.
اشارات و حرکات را چطور بهینه کنیم؟
اشارات عبارتند از: تک ضربه ، دو ضربه ، لمس ، کشیدن ، ضربه ی محکم و فشار آوردن. این ها اعمال اصلی در گوشی های هوشمند هستند. اشارات ما را قادر می سازند از طریق لمس با تکنولوژی ارتباط برقرار کنیم.
شاید منظور را متوجه شده باشید. اشارات را در محل قرارگیری انگشت شست قرار دهید. مهمتر اینکه ، به کاربر اجازه دهید به صورت طبیعی و راحت اشارات را انجام دهد. این به نظر یک امر مسلم است ، اما برای اینکه یک تجربه ی کاربری خوب و راحت ایجاد کنید ، محاسبه ی محل دقیق اشارات از اهمیت والایی برخوردار است.
حالا اجازه دهید روی تعامل کشیدن تمرکز کنیم. از تحقیقات انجام شده روی حرکت کششی ، من اطلاعات حرکتی بسیار جالبی به دست آوردم.
در نگاشت بالا، دایره ها نشان دهنده ی ضربه ها و فلش ها نشان دهنده ی کشیدن ها هستند. داده هایی که من از تست ها به دست آوردم نشان دادند که کاربران معمولا در جایی از لبه ی دستگاه به سمت میانه ی دستگاه و از آنجا به سمت پایین حرکت کشیدن را انجام می دهند. من همچنین فهمیدم که کاربران معمولا عمل کشیدن را در منطقه ی طبیعی محل قرارگیری انگشت شست انجام می دهند.
در ابتدا، به اشتباه تصور می کردم که کاربران به صورت افقی حرکت کشیدن را انجام می دهند، که این حرکت در هنگام ارزیابی مناطق قرارگیری انگشت شست برای اشارات کشیدن باعث ایجاد مشکلاتی می شد. مشخصات طراحی من فضای کافی برای کشیدن (بدون انجام عمل کشیدن در مناطق دیگر به صورت همزمان) فراهم نمی کردند. همانند اکثر عناصر طراحی موبایل ، فضای مورد نیاز برای انگشت شست را برای عمل کشیدن در نظر بگیرید. من به این نتیجه رسیدم که سایز مناسب مناطق کشیدن حداقل 45 پیکسل ارتفاع و عرض باید داشته باشد.
با داشتن تمام این اطلاعات، می توانیم نتیجه بگیریم که بهتر است اعمال کشیدن در داخل مناطق با دسترسی راحت قرار گیرند ، چون در این صورت فضای کافی برای جلوگیری از اعمال ناخواسته نیز فراهم می آید.
یک مثال عالی از اشاره ی کشیدن اپلیکیشن بخش ورودی گوگل است.
جعبه ی ورودی گوگل از اشاره ی کشیدن در مکان های صحیح پشتیبانی می کند و این مکان ها از فضای مناسبی هم برخوردار می باشند.
تصمیمات عاقلانه در اینجا به شرح زیر هستند:
- اشاره ی کشیدن را در مناطق با دسترسی سخت قرار ندهید.
- فضای کافی برای عمل ضربه زدن فراهم کنید.
- اجازه دهید عمل کشیدن از هر جایی در عناصر بخش ایمیل شروع شود.
با رعایت این امور، اشارات ، احساس طبیعی و راحتی خواهند داشت و باعث می شوند مدیریت ایمیل سریع تر و کمتر پیچیده باشد. همیشه گوگل را الگوی خود قرار دهید!
خلاصه
چه چیزهایی یاد گرفتیم؟ امیدوارم درک بهتری از اهمیت محل قرارگیری انگشت شست به دست آورده باشید. این نکات را به یاد داشته باشید:
- دستگاه های موبایل و زبان ها تغییر می کنند ، اما تا زمانی که صفحات لمسی وجود دارند ، محل قرارگیری انگشت شست یک بخش حیاتی از طراحی باقی خواهد ماند. وقتی لینک های مهم در منطقه ی با دسترسی آسان و لینک های نه چندان مهم در منطقه ی با دسترسی سخت قرار داشته باشند، آنگاه طراحی ناوبری خوب و مناسب به حساب می آید.
- وقتی محتوا و اعمال برای محل قرارگیری انگشت شست مناسب باشند، کارت ها طراحی قدرتمندی هستند.
- وقتی نحوه ی کشیده شدن انگشت شست یک فرد روی صفحه ی لمسی را در نظر بگیریم ، مشخص کردن مناطق شروع عمل کشیدن راحت تر می شود.
منبع: smashingmagazine.com
