تصویر نویسنده

۲۱ فروردین ۱۳۹۹

0

طراحی دکمه ها در رابط کاربری

آموزش

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

چرا دکمه ها را همه جا می بینیم؟

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

راشل پلاتنیک (Rachel Plotnick) در کتاب دکمه پاور (Power Button)، منشا دکمه های امروزی را دنبال می کند و نحوه تبدیل شدن آنها به فرمان های دیجیتال را توضیح می دهد.

تغییر و تحول دکمه ها در طول تاریخ

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

دکمه ها در مقابل لینک ها

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

  • لینک ها زمانی استفاده می شوند که شما می خواهید از جایی به جای دیگری بروید مثلا از این لینک استفاده کنید تا در مورد آزمون رابط کاربری اطلاعات کسب کنید.
  • دکمه ها زمانی کاربرد دارند که شما می خواهید عملی را انجام دهید. اعمالی مانند: ثبت کردن، فرستادن، ذخیره کردم و …
آناتومی دکمه ها

حالت دکمه وضعیت خود را به کاربر اعلام می کند

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

حالت های مختلف دکمه
  • نرمال: یعنی این دکمه فعال است.
  • متمرکز: یعنی دکمه با صفحه کلید یا دیگر ورودی ها در حال برقراری تعامل است.
  • شناور: وقتی کاربر ماوس را روی یک دکمه می برد.(حالت hover)
  • فعال: یا حالت فشرده شده که بیان می کند کاربر روی دکمه کلیک کرده است.
  • پیشرفت: یعنی دکمه در حال انجام یک کار است و عمل هنوز انجام نشده است.
  • غیرفعال: دکمه در حال حاضر غیرفعال است اما ممکن است در آینده فعال شود.

دکمه ها رنگ ، شکل و اندازه های مختلفی دارند

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

دکمه ها ویژگی های مختلفی دارند

سبک ها اهمیت یک عمل را نشان می دهند

دکمه ها در درجه اول برای ایجاد تمایز بین اعمال پر اهمیت از اعمال کم اهمیت بکار می روند به عبارت دیگر سلسله مراتبی از اقداماتی که کاربر را بین تعداد زیادی از انتخاب ها راهنمایی می کنند، ایجاد می کنند. در این سلسله مراتب معمولا یک دکمه با اهمیت بالا ( که به آن primary می گویند)، چند دکمه با اهمیت متوسط (دکمه های secondary) و دکمه های کم اهمیت (tertiary) وجود دارد.

اهمیت سبک ها

گاهی اوقات “پیش فرضی” وجود ندارد

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

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

پیش فرضی وجود ندارد

مرا وادار به تفکر نکن

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

مرا وادار به تفکر نکن

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

همخوانی باعث افزایش سرعت و دقت خواهد شد

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

همخوانی در عناصر

برای تعامل قابل اعتماد دکمه ها را به اندازه کافی بزرگ کنید

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

دکمه های به اندازه کافی بزرگ

استفاده از لیبل صحیح می تواند مفید باشد

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

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

از لیبل صحیح استفاده کنید

Ok/Cancel یا Cancel/Ok

هر دوی این انتخاب ها درست هستند و هیچ کدام از دیگری برتری ندارد اما بیاید نگاهی به ویژگی های هر دو گزینه بیندازیم :

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

در مقالات بعدی دوست دارید در مورد کدام عنصر در طراحی رابط کاربری صحبت کنیم؟ پیشنهادات خود را با ما از طریق بخش نظرات در میان بگذارید.

۰ ۰ vote
Article Rating