در دنیای طراحی تجربه کاربری، مفاهیمی هستند که پایه و اساس سایر عناصر شمرده می شوند. رابط کاربری گرافیکی یا به اختصار GUI یکی از همین مفاهیم می باشد. اکثر دستگاهها و برنامههای مدرن از یک رابط کاربری گرافیکی در ساختار خود بهره میبرند.
تصویر(1)
رابط کاربری گرافیکی چیست؟
رابط کاربری گرافیکی (GUI) یک رابط دیجیتالی است که در آن کاربر با اجزای گرافیکی مانند آیکون ها، دکمه ها و منوها در تعامل خواهد بود. در یک رابط کاربری گرافیکی، تصاویری که در رابط کاربری نمایش داده می شوند، اطلاعات مربوط به کاربر و اقداماتی را که آنها می توانند انجام دهند، منتقل می شود. امروزه تصور رایانه بدون رابط کاربری گرافیکی، دشوار است.
تاریخچه مختصر رابط کاربری گرافیکی
قبل از رابط های کاربری گرافیکی، کاربران با استفاده از رابط های کاربری کاراکتر یا CUI با رایانه ها تعامل داشتند. در CUI، کاربر یک دستور متنی را به کمک صفحه کلید تایپ کرده و سپس منتظر می ماند تا آن دستورات روی دستگاه پیاده سازی شوند.
تصویر(2)
CUI تنها برای متخصصان فناوری اطلاعات و کاربران حرفه ای قابل استفاده بود. این رابط برای افراد تازه کار و مبتدی گیج کننده به نظر می رسید و کارایی داشت. علت هم این بود که دستورات باید هر بار به درستی حفظ و تایپ می شدند. در سال 1981 زیراکس (Xerox) اولین رابط کاربری گرافیکی را در محصولی به نام Xerox Star منتشر کرد. این رابط با نمونه های امروزی بسیار متفاوت بود اما نشان دهنده یک تغییر در رابط های کاربری مبتنی بر متن می باشد. این رابط، تصاویر، دکمهها و رنگهایی را به نمایش میگذاشت که برای کاربران عادی قابل تشخیص بود.
تصویر(3)
پس از آن، شرکت اپل اولین سیستم عامل GUI خود، یعنی مکینتاش را در سال 1984 منتشر نمود. مایکروسافت اولین رابط کاربری گرافیکی خود را سال بعد در ویندوز 1.0 معرفی کرد. این دو سیستم عامل، آیکون هایی را برای نمایش فایل ها، پوشه ها، اپلیکیشن ها و دکمه ها معرفی کردند. در تصویر زیر رابط کاربری گرافیکی مکینتاش در هنگام راه اندازی را مشاهده می کنید:
تصویر(4)
زیراکس استار، مکینتاش و ویندوز یکی از مهم ترین پیشرفت ها در زمینه محاسبات شخصی را رقم زدند. رابطهای آنها برای عموم مردم در دسترس بود. در حال حاضر، یک کاربر معمولی می تواند اقداماتی مانند ویرایش فایل ها و اجرای اسکریپت ها را بدون هیچ دانش برنامه نویسی انجام دهد. GUI ها هم اکنون تقریبا در تمامی محصولات دیجیتالی از کامپیوترهای شخصی و دستگاه های موبایل گرفته تا تلویزیون ها، کنسول های بازی و یخچال ها به صورت پیش فرض وجود دارند.
رابط کاربری گرافیکی چگونه کار می کند
یک رابط کاربری گرافیکی می تواند اقداماتی که کاربران انجام می دهند، مواردی که ویرایش می کنند و سایر اطلاعات مربوط به آنها را نمایش دهد. برخی از عناصر بصری رایج عبارتند از:
- نشانگر ماوس: عناصر دیگر را جابجا کرده و ویرایش می کند.
- دکمهها: کاربران میتوانند برای شروع یک عمل روی آنها کلیک کنند یا ضربه بزنند.
- نوار ابزار: شامل گروهی از دکمه ها
- آیکون ها: تصاویر کوچکی که اطلاعات یا اجزای تعاملی را نشان می دهند.
- منوها: لیستی از آیتم های قابل کلیک
- نوارهای پیمایش: برای اسکرول کردن صفحه به پایین
گاهی اوقات، رابط کاربری گرافیکی با اشیای دنیای واقعی تطابق داده می شود تا هدف خود را بهتر نشان دهد و به کاربران کمک کند تا عملکردهای موجود را درک کنند. برای مثال، یک پوشه که به عنوان زباله دان استفاده می گردد با یک سطل زباله نمایش داده می شود.
کاربران به روش های مختلفی می توانند با عناصر موجود در یک رابط کاربری گرافیکی تعامل داشته باشند. معمولاً در رایانههای رومیزی با استفاده از ماوس کلیک و پیمایش انجام شده و در صفحه لمسی دستگاههای تلفن همراه، ضربه زده می شود. تمامی سیستمعاملهای دارای رابط کاربری گرافیکی و بسیاری از اپلیکیشن ها امکان تعامل از طریق صفحهکلید را دارند. برخی از آنها فرمانهای صوتی را نیز پذیرفته و انجام می دهند.
هنگامی که کاربر تعاملی را آغاز می کند، رابط کاربری گرافیکی با نشانه هایی مانند تغییر رنگ یا اندازه در عنصر کلیک شده، صدا یا افکت دیگری پاسخ داده و سپس سیستم درخواست موردنظر را انجام می دهد. به طور کلی چندین دهه تفکر و تحقیق برای ایجاد رابطهایی انجام شده است که کاربران از آن لذت ببرند و طراحیها هر ساله پیشرفت چشمگیری می کنند. برای مثال، زمانی که نسخههای جدید نرمافزارها منتشر می گردند، اغلب شامل بروزرسانی هایی برای رابط کاربری هستند تا تجربه کاربری را بهبود بخشند.
انتزاع در رابط کاربری گرافیکی
هدف نهایی رابطهای کاربری گرافیکی این است که با جدا کردن افراد از جزئیات فنی و ارائه یک رابط کاربری ساده، به کاربر اجازه دهند تا با کدهای اصلی دستگاه تعامل داشته باشد. این فرآیند "انتزاع" یا "abstraction" نامیده می شود و یک مفهوم کلیدی در طراحی و ساخت رابط ها است. برای درک بهتر انتزاع، می توانید آن را به رانندگی با خودرو تشبیه کنید. برای رانندگی با خودرو، نیازی به اطلاع از جزئیاتی مانند نحوه عملکرد موتور و جعبه فرمان آن ندارید. در مقابل، این مفاهیم در پشت رابط کاربری خودرو مانند پدال ها و فرمان، انتزاعی شده اند.
تنها مواردی که یک راننده باید بداند این است که فشار دادن پدال گاز باعث حرکت خودرو به جلو و چرخاندن فرمان موجب حرکت ماشین به چپ و راست می شود.
همین امر برای رابط های کاربری گرافیکی نیز صدق میکند. آیکون پوشهها در صفحه نمایش، همان پوشه های دنیای واقعی نیستند و هنگامی که فایلی را به سطل زباله خود میکشید، بدیهی است که هیچ فایلی را درون سطل زباله واقعی قرار نمیدهید. این موارد صرفا انتزاعی از کد نرم افزار هستند.
نمونه های رابط کاربری گرافیکی
مجبور نیستید به دنبال مثالی از رابط های گرافیکی کاربر باشید. اکثر وب سایت ها، اپلیکیشن ها، نرم افزارها (مانند Microsoft Word و Apple Music)، مرورگرها (مانند کروم و اینترنت اکسپلورر) و سیستم عامل ها (مانند ویندوز، macOS، iOS و Android) دارای رابط کاربری گرافیکی هستند. اغلب، رابط های کاربری گرافیکی مختلف در داخل یکدیگر قرار می گیرند.
گوشی هوشمندی که استفاده میکنید، رابط کاربری گرافیکی اختصاصی برای سیستم عامل خود و رابط کاربری گرافیکی متفاوتی برای هر یک از برنامههایش دارد. تمامی وبسایتهای معروف، رابط کاربری گرافیکی خود را متناسب با اندازه های مختلف صفحه نمایش، تطبیق میدهند. این طراحی، واکنش گرا نامیده می شود و امروزه توجه به آن در طراحی رابط کاربری گرافیکی ضروری می باشد.
تصویر(5)
مزایای رابط کاربری گرافیکی
امروزه هر محصولی که دارای صفحه نمایش است رابط کاربری گرافیکی دارد. در ادامه دلیل استفاده از رابط کاربری گرافیکی ذکر شده است:
- کاربر پسند بودن: کار با رابط های کاربری گرافیکی نسبت به رابطهای مبتنی بر متن برای بسیاری از افراد راحت تر است. حتی کسانی که دانش بسیار محدودی از رایانه دارند، میتوانند بدون یادگیری زبان برنامهنویسی یا دستورات رایانه از آنها استفاده کنند.
- کارایی: رابطهای کاربری گرافیکی به افراد اجازه میدهند تا کارها را سریعتر و آسانتر به انجام برسانند. اقداماتی که چندین دستور تایپ شده در یک CUI انجام می دهد، تنها با چند کلیک ماوس در یک رابط کاربری گرافیکی در دسترس است.
- شفافیت: رابطهای کاربری گرافیکی مشخص میکنند که هر عنصر بصری چه کاری انجام میدهد و بازخورد آن چگونه است تا مشخص کند آیا اقدامات آنها موفق بوده یا خیر.
تصویر(6)
- زیبایی شناسی: رابط کاربری گرافیکی نسبت به متن ساده، برای افراد جذابتر هستند و توسعهدهندگان کنترل بیشتری بر سفارشیسازی و ایجاد یک تجربه کاربری دلپذیرتر دارند.
معایب رابط کاربری گرافیکی
برخی از کاربران، رابط های مبتنی بر متن مانند اجرای اقدامات از طریق خط فرمان را ترجیح می دهند. در ادامه برخی از اشکالات جزئی رابط کاربری گرافیکی در مقایسه با سایر رابط ها ذکر شده اند:
- سرعت: رابطهای کاربری گرافیکی کندتر هستند و نسبت به رابطهای مبتنی بر متن پیش نیازهای بیشتری نیاز دارند.
- استفاده از حافظه (Memory): رابط های کاربری گرافیکی به Memory بیشتری نسبت به رابطهای مبتنی بر متن نیاز دارند.
- عدم انعطاف پذیری: معمولا کاربر باید در فضایی محدود از یک رابط کاربری گرافیکی کار کند و نمی تواند عملکرد آن را تغییر دهد. با رابط های مبتنی بر متن، نصب پکیج ها با دستورات خاص و قدرتمند، آسان خواهد بود.
- ناکارآمدی: بسیاری از کاربران آشنا به فناوری، اجرای دستورات در CUI را کارآمدتر می دانند. علاوه بر این، دستورات CUI را می توان خودکارسازی کرد.
- ساخت: رابط های کاربری گرافیکی باید توسط یک تیم طراحی و توسعه ساخته شوند که زمان و منابع بیشتری را نیاز دارد.
تصویر(7)
جمع بندی
رابط های کاربری گرافیکی امروزه به قدری گسترده شده اند که بدیهی تلقی می شوند. قبل از رابط کاربری گرافیکی، افراد بسیار کمی از رایانه استفاده می کردند. ظهور رابط کاربری گرافیکی موجب تغییر رایانه از یک سرگرمی خاص برای متخصصان فناوری به انقلابی جدید در فناوری شد.