طراحی خوب یک دکمه (button) چیزی است که اکثر کاربران وب سایت هرگز به آن فکر نمی کنند… زیرا زمانیکه یک دکمه  خوب کار می کند، تقریبا وجودش نامرئی است. کلیک کردن روی دکمه های خوب کار آسانی است، آنها عملکردی آشکار دارند و به کاربران کمک می کنند تا بدون فکر کردن در تعامل با طرح باشند. این کار یک فرمول نسبتاً ساده دارد، اما ممکن است با به تعویق انداختنش برایتان دشوار گردد.

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

۱. آن را ساده نگه دارید

keep it simple

این نکته در تئوری طراحی به این عبارت کلاسیک برمی گردد: (Keep it simple, Stupid)

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

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

بنابراین، هنگامی که نوبت به طراحی دکمه می رسد، ساده فکر کنید نه بیش از اندازه!

 یک دکمه باید مانند یک دکمه باشد، تا این حد ساده!!

۲. تضاد فراوانی ارائه دهید

تضاد فراوان در طراحی دکمه ها

تقریباً به همان اندازه که قابل فهم و شناسایی بودن دکمه مهم است باید مطمئن شویم که به راحتی قابل روئیت نیز می‌باشد.

دلیل محو شدگی سریع دکمه‌ های شبح در بالای تصاویر نبود اهمیت کافی برای تشخیص دادن آنهاست و کاربران نمی توانند فوراً آنها را پیدا کنند.

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

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

۳. از رنگ استفاده کنید

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

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

۴. نوشته کوتاهی(میکروکپی) بنویسید که باعث ایجاد انتظار شود

میکروکپی در طراحی دکمه

این اشتباه را نکنید: دکمه ای با کلمات “اینجا کلیک کنید”روی آن.  (چقدر اسپم است؟)

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

۵. با انیمیشن نافذ (نامحسوس و دقیق) درگیر شوید

انیمیشن در طراحی دکمه

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

فقط زیاده روی نکنید. دکمه های چرخان، پرشی و چشمک زن بیشتر از آنکه مفید باشند، آزار دهنده هستند.

۶. آن را به اندازه کافی برای ضربه زدن بزرگ کنید

دکمه ها باید دارای یک منطقه قابل کلیک (قابل لمس) باشند که حداقل ۱۰ میلی متر قطر داشته باشد، واگر بزرگتر بهتر. این توصیه از مطالعات آزمایشگاه لمسی MIT گرفته شده است که نظری به اندازه پد انگشت در ارتباط با دستگاه های لمسی داشته است.

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

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

۷. از یک سبک آشنا استفاده کنید

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

  • یک دکمه ی پُرِ مستطیل شکل با لبه های مربع و متن داخل آن
  • یک دکمه ی پُرِ مستطیل شکل با لبه های گرد و متن داخل آن
  • یک دکمه ی پُرِ مستطیل شکل با سایه ی قطر قابل مشاهده (در بالا)
  • دکمه شبح مستطیل شکل
  • دکمه های دایره ای ساده، که معمولاً در گوشه سمت راست پایین برای نشان دادن پشتیبانی ، کمک یا گپ استفاده می شود.

 8. در یک مکان مورد انتظار قرار دهید

سایت LG

نه تنها انتظار می رود که دکمه ها ظاهر شوند و عملکرد مورد انتظار را داشته باشند بلکه باید در مکانی قرار بگیرند که کاربران به دنبال آنها می گردند.

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

۹.  بازخورد را فراموش نکنید

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

یک راهنما یا یک نشانه بصری را ارائه دهید که دکمه کار خود را انجام داده است. برخی از دکمه ها نسبت به سایرین به کار بیشتری نیاز دارند. برای مثال دکمه هایی که به صفحه یا وب سایت دیگری پیوند دارند، بازخوردی را ارائه می دهند که در صورت بارگذاری صفحه جدید، این دکمه کار کرده است. اگر اطلاعات به درستی ارائه شود، یک دکمه ارائه ی فرم می تواند پیام “سپاسگذاریم” را روی صفحه نمایش دهد.

۱۰. از دکمه ها به صورت عمدی استفاده کنید.

دکمه ها در طراحی سایت

بسیاری از دکمه ها هرج و مرج ایجاد می کنند.

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

نتیجه

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

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

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

نظرات شما باعث دلگرمی ما و افزایش کیفیت در ارائه مطالب می‌گردد.