هفت نکته اساسی برای طراحی یک دکمه جذاب

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

1. دکمه ها را طوری بسازید که شبیه دکمه باشند

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

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

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

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

همیشه در نظر داشته باشید که چیزهای زیادی در رابط کاربری شما برای کابر غیرشفاف و نا واضح است.

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

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

از طرح های رایج برای دکمه هایتان استفاده کنید

در اینجا چند مثال از دکمه هایی که برای اکثر کاربران آشنا هستند را آورده ایم:

دکمه های پر شده با گوشه های زاویه دار
دکمه های پر شده با گوشه های گرد
دکمه های پر شده به همراه سایه
شبه دکمه ها

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

فضای سفید را فراموش نکنید!!

مقدار فضای خالی استفاده شده در اطراف دکمه تشخیص آن را برای کاربران ساده تر (و یا حتی ممکن است سخت تر!) کند.

به عنوان یک کاربر، شما نمی توانید تشخیص دهید که این یک دکمه است یا یک باکس که درون آن “Button” نوشته شده است

2. دکمه ها را در جایی قرار دهید که کاربران انتظار دارند در همانجا باشد

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

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

3. استفاده از عنوان دقیق بر روی دکمه ها

استفاده از عنوان های عمومی و گمراه کننده برای دکمه ها، کاربران شما را سرگردان و ناامید خواهد کرد. به صورت واضح و شفاف، عنوان ها را طوری بنویسید که کارایی هر دکمه را بیان کند.

کاربران باید به صورت شفاف بفهمند که وقتی روی دکمه ای کلیک می کنند، چه اتفاقی خواهد افتاد. این موضوع را با طرح یک مثال توضیح می دهیم. تصور کنید شما به صورت تصادفی بر روی یک عمل حذف کلیلک کرده اید، و اکنون پیام زیر برای شما نمایش داده می شود:

در مثال بالا، اکثر کاربران از خود می پرسند که اگر روی "خب" کلیک کنیم چه اتفاقی می افتد؟ و یا اگر روی "لغو" کلیک کنیم چه اتفاقی خواهد افتاد؟

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

4. انتخاب اندازه مناسب برای دکمه ها

اندازه دکمه ها میزان اهمیت آنها را نمایش میدهد، دکمه های بزرگتر از اهمیت بیشتری برخوردار هستند.

اولویت بندی دکمه ها

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

از تغییر اندازه و کنتراست رنگی برای جلب توجه بیشتر کاربر، استفاده شده است

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

مطالعات موسسه MIT touch lab ثابت کرده است که، میانگین لبه های انگشت بین 10 تا 14 میلی متر و نوک انگشتان 8 تا 10 میلی متر است. بنابر این حداقل اندازه برای یک دکمه لمسی 10 میلی متر در 10 میلی متر می باشد.

5. دستورات را به خاطر داشته باشید

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

6. از دکمه های بیش از حد اجتناب کنید

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

7. ایجاد باز خورد بصری و یا صوتی

زمانی که کاربران بر روی دکمه کلیک کرده یا روی آن ضربه بزنند، انتظار دارند که رابط کاربر با بازخورد مناسب پاسخ دهد. براساس نوع عملیات، ممکن است بازخورد بصری یا صوتی باشد. زمانی که کاربران بازخوردی ندارند، ممکن است در فرض کنند که سیستم فرمان خود را دریافت نکرده و عمل را تکرار می کند. چنین رفتاری غالبا باعث عملیات غیر ضروری متعدد می شود. چرا این اتفاق می افتد؟ انسانها، پس از اینکه با یک شیء ارتباط برقرار کنند، انتظار واکنش از آن شی را دارند، و پس از اینکه هیچ واکنشی دریافت نکنند، آن عمل را تکرار خواهند کرد. بازخورد بصری و یا حتی صوتی، کاربران را از این اشتباه منع می کند.