منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · ترجمه: ۶ شهریور ۱۴۰۵ · زمان مطالعه: حدود ۱۰ دقیقه

رابط گرافیکی کاربر (Graphical User Interface) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند.

پیش از رابط گرافیکی، برای هر کاری باید فرمانی را به‌یاد می‌آوردید. بعد از آن، فقط باید چیزی را می‌دیدید.

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

تعریف

رابط گرافیکی کاربر سامانه‌ای بصری است که به کاربر اجازه می‌دهد از راه عناصری مثل دکمه و آیکون و منو با دستگاه دیجیتال تعامل کند.

و کارکردش این است که آدم‌ها بتوانند کارها را انجام دهند و مسئله‌ها را حل کنند — از راه یک لایهٔ بصری نرم‌افزار، به‌جای فرمان‌های تایپی.

و جمله‌ای که جایگاهش را خوب توصیف می‌کند این است: «رابط گرافیکی جایی است که کاربر با سیستم روبه‌رو می‌شود.»

تاریخچه

دههٔ ۱۹۴۰: نخستین رایانه‌ها ظاهر شدند.

دههٔ ۱۹۵۰ و ۱۹۶۰: ایوان ساترلند نمایشگرهای مبتنی بر قلم نوری را توسعه داد، و تیم داگلاس انگلبارت سامانهٔ آن‌لاین را ساخت.

دههٔ ۱۹۷۰: پژوهشگران زیراکس پارک، زیراکس آلتو را ساختند — نخستین رابط گرافیکی کاربر. و این همان نقطه‌ای است که تغییر بنیادی از خط فرمان به تعامل بصری اتفاق افتاد.

دههٔ ۱۹۸۰: مکینتاش اپل رایانش شخصی را برای کاربران غیرفنی در دسترس کرد، و ویندوز مایکروسافت پس از آن آمد و رایانش را همگانی کرد.

تابستان ۱۹۹۵: ویندوز ۹۵ به یک نقطهٔ عطف فرهنگی و فناورانه تبدیل شد — با رابط گرافیکی شهودی و پشتیبانی درون‌ساخت از چندوظیفگی.

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

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

و همین الگو در هر موج بعدی هم تکرار شده — لمسی، صوتی، و حالا رابط‌های مبتنی بر مدل‌های زبانی. فاصلهٔ میان «کار می‌کند» و «همه استفاده‌اش می‌کنند»، معمولاً مسئلهٔ فناوری نیست.

عناصر

عناصر پایه‌ای که این مدل را می‌سازند چهارتا هستند:

• - پنجره — قاب یا پنلی که محتوا را در بر می‌گیرد.
• - آیکون — بازنمایی گرافیکی یک ابزار یا کنش.
• - منو — فهرست فرمان‌ها یا گزینه‌ها.
• - دکمه — عنصر کلیک‌پذیری که کنشی را راه می‌اندازد.

و بقیهٔ عناصر روی همین چهارتا ساخته می‌شوند: نوار پیمایش · لغزنده · زبانه · نوار ابزار · فیلد متنی · جعبهٔ گفت‌وگو · و نشانه‌های بصری که سلسله‌مراتب می‌سازند.

هشت اصل طراحی

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

و چند ملاحظهٔ عملی هم کنارشان هست:

• - از شلوغی صفحه بپرهیزید و از آشکارسازی تدریجی استفاده کنید.
• - طراحی واکنش‌گرا و موبایل‌اول.
• - هر آیکونی که جهان‌شمول نیست را برچسب بزنید.
• - و توازن زیبایی با کارکرد را نگه دارید.

دو عدد که تصمیم‌ها را عوض می‌کند

و دو عدد بیرونی هست که مستقیم بر طراحی رابط اثر می‌گذارد.

یک: بیش از ۶۲ درصد کل ترافیک وب جهان از دستگاه‌های موبایل می‌آید (استاتیستا).

یعنی رابط «اصلی» شما احتمالاً همان چیزی است که در حالت باریک دیده می‌شود، و نسخهٔ دسکتاپ استثناست نه قاعده.

دو: نزدیک نیمی از اپلیکیشن‌ها ظرف ۳۰ روز حذف می‌شوند (اپس‌فلایر).

و این عدد یک چیز را دربارهٔ رابط می‌گوید: پنجرهٔ اثبات ارزش، کوتاه است. رابطی که در دفعهٔ اول کارِ کاربر را تمام نمی‌کند، دفعهٔ دومی نخواهد داشت.

و برای موبایل، یک عدد سوم هم هست که در همان دسته می‌نشیند: حداقل هدف لمسی ۴۴ در ۴۴ پیکسل.

رابط گرافیکی در برابر رابط کاربری

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

رابط صوتی، خط فرمان، رابط لمسی بدون بازنمایی بصری، و رابط‌های مبتنی بر حرکت — همه رابط کاربری‌اند و گرافیکی نیستند.

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

چیزی که رابط گرافیکی حل کرد و چیزی که ساخت

این بخش افزودهٔ من است، چون بحث معمولاً روی دستاورد می‌ماند و هزینه‌اش را نمی‌گوید.

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

و همین است که آن را برای کاربر غیرفنی ممکن کرد.

ولی سه هزینه هم داشت که هنوز با ماست.

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

و پیامدش همان چیزی است که هر روز می‌بینیم: قابلیت‌ها در منوهای تودرتو پنهان می‌شوند، و کاربر بین شلوغی و ناپیدایی گیر می‌کند.

دو: خودکارسازی سخت‌تر شد. کاری که در خط فرمان یک خط بود و هزار بار تکرار می‌شد، در رابط گرافیکی یعنی هزار بار کلیک.

و به‌همین دلیل، کاربران حرفه‌ای هنوز به میان‌بر صفحه‌کلید و ابزارهای متنی برمی‌گردند — نه از سر نوستالژی، بلکه چون رابط گرافیکی برای تکرار ساخته نشده.

سه: توصیف‌کردن سخت شد. فرمان را می‌شود در پیام نوشت و فرستاد. مسیر رابط گرافیکی را باید توصیف کرد — «برو تنظیمات، بعد حریم خصوصی، بعد پایین اسکرول کن».

و همین یکی از دلیل‌های اصلی بار پشتیبانی است، به‌ویژه وقتی رابط بین نسخه‌ها عوض می‌شود.

و این سه هزینه با هم یک نتیجهٔ عملی می‌دهند: رابط گرافیکی برای کارِ اول عالی است و برای کارِ هزارم بد.

پس محصولی که هم کاربر تازه دارد و هم کاربر روزمره، نمی‌تواند با یک لایه هر دو را راضی کند. و راه‌حل شناخته‌شده‌اش هم قدیمی است: مسیر دیدنی برای تازه‌کار، و میان‌بر برای کسی که هر روز همان کار را می‌کند.

و نکتهٔ ظریفش این است که میان‌بر باید کنار مسیر دیدنی نشان داده شود، نه جای دیگری. منویی که کنار هر گزینه میان‌بر صفحه‌کلیدش را می‌نویسد، دارد کاربرش را از لایهٔ اول به لایهٔ دوم منتقل می‌کند — بی آنکه چیزی را پنهان کند.

سه الگویی که هر رابطی دارد

و اگر از تاریخ به امروز بیاییم، بیشتر رابط‌های گرافیکی امروزی از چند الگوی تکرارشونده ساخته شده‌اند: نوار ناوبری · پیام‌واره · کارت · زبانه · و فرم.

و ارزش شناختنشان این است که هر کدام یک قرارداد با کاربر دارند — و شکستن آن قرارداد، حتی وقتی طرح زیباتر می‌شود، هزینه دارد.

نوار ناوبری قول می‌دهد که همیشه همان‌جاست و همیشه همان کار را می‌کند. ناوبری‌ای که بین صفحه‌ها جابه‌جا می‌شود یا محتوایش عوض می‌شود، این قول را می‌شکند.

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

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

و همین است که تفاوت رابط «آشنا» و رابط «شهودی» را می‌سازد: رابط شهودی چیزی است که قراردادهایش را نمی‌شکند، نه چیزی که ظاهر تازه‌ای دارد.

در بافت فارسی

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

و آنچه معمولاً فراموش می‌شود، عناصر غیرمتنی است: نوار پیشرفت، اسلایدر، و آیکون‌های جهت‌دار. آیکون «بازگشت» که به چپ اشاره می‌کند، در رابط راست‌به‌چپ معنایش برعکس است.

دو: عدد و متن لاتین در متن فارسی، جهت را می‌شکنند. شمارهٔ تلفن، شناسهٔ سفارش، آدرس ایمیل و نام برند، همه چپ‌به‌راست‌اند و داخل جمله‌ای راست‌به‌چپ می‌نشینند.

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

سه: آیکون‌های «جهان‌شمول» اینجا کمتر جهان‌شمول‌اند. و قاعدهٔ برچسب‌زدن، که در فهرست بالا آمد، اینجا سخت‌گیرانه‌تر باید اجرا شود.

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

چهار: سهم موبایل اینجا از میانگین جهانی هم بالاتر است. و دستگاه‌ها میان‌رده‌ترند.

پس آن ۶۲ درصد جهانی برای بازار ما یک کف است، نه یک برآورد. رابطی که فقط روی دسکتاپ خوب کار می‌کند، برای اکثریت کاربرانتان کار نمی‌کند.

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

و نتیجه‌اش خوانایی پایین در اندازه‌های کوچک است — همان‌جایی که رابط بیشترین متن را دارد. قلم رابط را در اندازهٔ ۱۲ و ۱۴ انتخاب کنید، نه در اندازهٔ تیتر.

جمع‌بندی

• - رابط گرافیکی سامانه‌ای بصری است که تعامل با دستگاه را از راه دکمه و آیکون و منو ممکن می‌کند، به‌جای فرمان تایپی
• - ساترلند و قلم نوری · انگلبارت و سامانهٔ آن‌لاین · زیراکس آلتو در دههٔ ۱۹۷۰ به‌عنوان نخستین رابط گرافیکی · مکینتاش و ویندوز در دههٔ ۱۹۸۰ · و ویندوز ۹۵ در تابستان ۱۹۹۵
• - چهار عنصر پایه: پنجره · آیکون · منو · دکمه — و بقیه روی همین‌ها ساخته می‌شوند
• - هشت اصل: سازگاری · وضوح · پیش‌بینی‌پذیری · بازخورد · جریان روان · پیشگیری و بازیابی خطا · دسترس‌پذیری · و ریزتعامل هوشیارانه
• - بیش از ۶۲٪ ترافیک وب از موبایل است · نزدیک نیمی از اپ‌ها ظرف ۳۰ روز حذف می‌شوند · و حداقل هدف لمسی ۴۴ در ۴۴ پیکسل است
• - هر رابط گرافیکی یک رابط کاربری است، ولی هر رابط کاربری گرافیکی نیست
• - دستاوردش تبدیل یادآوری به بازشناسی بود · و سه هزینه‌اش: هر قابلیت باید دیده شود · خودکارسازی سخت شد · و توصیف‌کردن سخت شد
• - و در فارسی: آینه‌کردن شامل عناصر غیرمتنی هم هست · جهت‌دهی متن مخلوط، رایج‌ترین باگ بصری است · آیکون‌ها را برچسب بزنید · ۶۲٪ اینجا یک کف است · و قلم رابط را در اندازهٔ کوچک انتخاب کنید