امیرحسین دوزنده
امیرحسین دوزنده
خواندن ۵ دقیقه·۵ سال پیش

دکمه‌های نوشتاری در طراحی رابط کاربری

دکمه‌ها در تجربه کاربری
دکمه‌ها در تجربه کاربری

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


از اونجایی که محدوده انگشت کاربر از نشانگر موس بزرگتر هست، قرار گرفتن بر روی اهداف کوچیک مثلا یک دکمه با نوشته SEND‌ میتونه برای کاربر گیچ کننده و حتی اذیت کننده باشه چرا که در این حالت کاربر نمیتونه نشانه‌های بصری از آن چه را که زیر انگشتش در حال اتفاق هست ببینه و خب این برای یک کاربر عادی اصلا چیز خوشایندی نخواهد بود حالا اگه متن دکمه مورد نظر ما هم به اندازه کافی بزرگ باشه برای مثال به جای استفاده از کلمه Send از کلمه‌ی Send Message‌ استفاده کنیم به کاربر خودمون یک نشانه بصری دادیم تا حداقل متوجه بشه که انگشتش بر روی چه محدوده‌ای کلیک کرده اما خب این نشانه همچنان کافی نیست و لازمه که بهبود پیدا کنه.

محدوده قرارگیری انگشت
محدوده قرارگیری انگشت

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

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

استفاده از حروف بزرگ / کشیده در کلمات

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

این نکته را در الفبای فارسی میتوان به حروف کشیده در متن تشبیه کرد برای مثال قرار دادن متن "ارســـــــــــال" به جای "ارسال" درست است که طول نوشته را بزرگتر میکند و دیگر به صورت کامل زیر انگشت قرار نخواهد گرفت اما به همان اندازه خوانایی متن شما را کاهش خواهد داد. پس چه بهتر که برای جلب توجه کاربر بر روی یک دکمه خاص از روش‌های دیگر استفاده کنیم.

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


تشخیص دکمه‌های نوشتاری

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

دکمه‌های نوشتاری در کنار متن اصلی
دکمه‌های نوشتاری در کنار متن اصلی

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

راه حل‌هایی که در این مقاله به آن اشاره خواهیم کرد استفاده از دکمه‌هایی با طراحی زیر خواهد بود:

طراحی دکمه ثانویه
طراحی دکمه ثانویه

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

چه زمانی دکمه‌های نوشتاری معنا دار خواهند بود ؟

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

عکس از حساب Kedavra در Dribbble
عکس از حساب Kedavra در Dribbble

در مثال بالا فارغ از ایرادات یا نقاط قوت طراحی انجام شده در تصویر سمت چپ با کمی دقت متوجه خواهید شد که در پایین دکمه Login as Chester‌ یک دکمه دیگر نیز قرار دارد که امکان حذف حساب را به کاربر خواهد داد اما از آنجا که میزان اهمیت این دکمه در طراحی بسیار پایین است و از طرفی این دکمه نیاز به جلب توجه زیادی ندارد پس به صورت نوشتاری به طرح اضافه شده تا تنها دسترس‌پذیری کاربر را به این فرآیند برآورده کند.

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


این مورد رو در کارهای برخی از طراحان ایرانی هم میتونید ببینید که با هم یک نمونه‌اش رو بررسی میکنیم:

عکس از حساب SanazBidad در Dribbble
عکس از حساب SanazBidad در Dribbble

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

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

منابع استفاده شده در این مقاله:

https://uxmovement.com/mobile/why-text-buttons-hurt-mobile-usability/
https://dribbble.com/SanazBidad
https://dribbble.com/Kedavra

مطالب مرتبط :

https://virgool.io/DesignersCommunity/competitor-analysis-for-ux-designer-ppvpesvm4aay
https://virgool.io/@amirzenoozi72/create-new-plugin-for-adobe-xd-hhzbu2bpo9vj


طراحیتجربه کاربریuxusabilityuser experience
برنامه نویس Front-End ، علاقه مند به جاوا اسکریپت و پایتون که گاهی وقتا هم طراحی میکنه.
شاید از این پست‌ها خوشتان بیاید