رابط کاربری و تجربه کاربری چیست

طراحی رابط کاربری و تجربه کاربری یا به اصطلاح، UI/UX DESIGN از مهم‌ترین مفاهیم تو حیطه‌ی تکنولوژی و فناوری هست.

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

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

رابط کاربری چیست ؟ 

رابط کاربری یا UI (user interface) ، یکی از عوامل مهم و اساسی ارتباط کاربر با محصول هست. محصول می‌تونه یک سایت باشه، یا یک کالای فیزیکی. رابط کاربری به زبان ساده ظاهر محصول ما هست و ساز و کاری ‌ست که روند استفاده‌ی کاربر از خدمات یا محصول رو ساده می‌کنه و مهم‌تر از این، زیبایی خاصی رو به کاربر هدیه می‌ده.

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

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

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

اگه ui یک محصول خوب باشه، در واقع یعنی اگه محصول زیبا و تاثیرگذار باشه، ما در مواجهه با اون ازش حس خوبی می‌گیریم و احتمالا باز هم به اون باز خواهیم گشت.

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

انواع رابط کاربری (UI)

رابط خط فرمان (command line interface)

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

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

مزایای رابط خط فرمان

ساختار ساده

حداقل استفاده از حافظه

برای رایانه‌های کم کار یا حافظه کم مناسب است

یک کاربر CLI متخصص می‌تونه دستورات رو بسیار سریع‌تر از زمان استفاده از نوع UI دیگر انجام بده.

معایب رابط خط فرمان

مشکل در یادگیری زبان فرمان

رابط کاربری گرافیکی (graphical user interface)

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

مزایای رابط کاربری گرافیکی

خود توضیحی

استفاده‌ی آسان

حفظ لیست دستورات ضروری نیست

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

قالب مشابه در بین برنامه‌های مختلف، آشنایی رو افزایش می‌ده.

معایب رابط کاربری گرافیکی

از مقدار زیادی حافظه استفاده می‌کنه. اگرچه این امر با افزایش قدرت رایانه‌ها چندان نگران کننده نیست.

رابط کاربری گرافیکی صفحه لمسی (Touchscreen Graphical User Interface)

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

رابط منو محور (Menu-Driven Interface)

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

مزایای رابط منو محور

لازم نیست یک لیست طولانی از دستورات دستی رو به خاطر بسپرید

رابط کاربری ساده‌ای برای مبتدیان هست

معایب رابط منو محور

برای کاربران با تجربه ممکنه عملکرد کندی داشته باشه.

منو گزینه‌های محدودی داره.

اکثرا برای انجام عملکردهای ساده نیاز به دسترسی به چندین صفحه منو دارید.

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

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

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

تجربه کاربری چیست ؟

“UX” مخفف “تجربه کاربر ( user experience)” هست.

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

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

طراح تجربه کاربری چه کاری را انجام می‌دهد ؟

اگه قصد دارید طراح UX باشید، باید بدونید طراحان UX چگونه کار می‌کنن. انتظار دارید داخل چه نوع پروژه‌هایی کار کنید؟ نقش شما در یک شرکت چیست؟ طراح UX در واقع چه می‌کند؟

“چگونه کارهایی که در یک پروژه انجام می‌دم رو تو یه مهمونی برای بقیه افراد توضیح بدم؟ نسخه کوتاهش این هست که بگیم : من فناوری رو انسانی می‌کنم. “

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

به عنوان یک طراح UX، وظیفه شما در درجه اول حمایت از کاربر نهایی یا مشتری هست. شما در حال طراحی یک محصول کاملاً جدید هستید، یا ویژگی جدیدی ارائه می‌دید، یا تغییری در محصول یا خدمات موجود ایجاد می‌کنید. طراح UX باید اون چیزی که برای کاربر بهتر هست و تجربه کلی کاربر رو در نظر بگیره.

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

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

تفاوت رابط کاربری و تجربه کاربری

یک قیاس وجود داره که من دوست دارم از اون برای توصیف قسمت‌های مختلف یک محصول (دیجیتال) استفاده کنم:

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

همانطور که راهول ورشنی ، خالق Foster.fm می‌گه :

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

اگه برای یک مقایه‌ی دیگه جا دارید، Dain Miller رابطه بین طراحی UX و UI رو کاملاً خلاصه می‌کنه :

“درک این نکته ضروری است که UX و UI دست به دست هم می‌دهند. شما نمی‌توانید یکی را بدون دیگری داشته باشید با این حال، برای طراح UX نیازی به مهارت طراحی UI ندارید و برعکس . UX و UI نقش‌های جداگانه‌ای با فرایندها و وظایف جداگانه دارند! “

تفاوت اصلی که باید در نظر داشته باشید این هست : طراحی UX  به احساس کلی تجربه مربوط می‌شه، در حالی که طراحی UI به نحوه ظاهر شدن و عملکرد رابط‌های محصول مربوط می‌شه.

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

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

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

در حالی که طراح UX سفر کاربر در حین استفاده از محصول رو ترسیم می‌کنه، طراح UI بر تمام جزئیاتی که این سفر رو ممکن می‌سازه تمرکز می‌کنه. این به این معنی نیست که طراحی رابط کاربری فقط به ظاهر مربوط میشه. طراحان رابط کاربری تأثیر بسزایی در دسترسی یا عدم دسترسی به محصول دارن. اون‌ها سوالاتی از جمله “چگونه می‌توان از ترکیب رنگ‌های مختلف برای ایجاد کنتراست و افزایش خوانایی استفاده کرد؟” یا “چه ترکیب رنگی به کوررنگی کمک می کند؟”

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

طراحی UX همه چیز در مورد شناسایی و حل مشکلات کاربران است. طراحی رابط کاربری در مورد ایجاد رابط های بصری، زیبا و خوشایند و تعاملی است.

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

چگونه طراحی UX و طراحی UI با هم کار می‌کنن ؟

ما تفاوت بین UX و UI رو بررسی کردیم. حالا بیایید نگاهی به نحوه همکاری اون‌ها بیندازیم. شاید برای شما این سوال پیش اومده باشه که آیا یکی از دیگری مهم‌تر هست یا نه، اما واقعیت این هستش که هر دوی اون‌ها بسیار مهم هستن! به من اجازه بدید از طراح و متخصص هلگا مورنو نقل قول کنم، که در مقاله‌ی “شکاف بین طراحی UX و UI” این مطلب رو به طور فصیح بیان کرد:

“چیزی که بسیار عالی به نظر می‌رسد اما استفاده از آن دشوار است، مثال UI عالی و UX ضعیف است. در حالی که چیزی بسیار قابل استفاده که وحشتناک به نظر می رسد، مثال UX عالی و UI ضعیف است. “

همون‌طور که می‌بینید، UX و UI محکم در کنار هم قرار گرفتن. میلیون‌ها نمونه از محصولات هستن که یکی از این موارد رو دارن ( یا UI خوبی دارن، یا UX خوبی ). تصور کنید که اگر اون‌ها در هر دو زمینه قوی بودن، می‌تونستن چقدر موفق‌تر باشن.

تصور کنید به یک ایده شگفت انگیز برای یک برنامه رسیدید. چیزی که به وضوح در بازار وجود نداره ( کسی قبل از شما اون برنامه رو به عمل نرسونده ) و می‌تونه واقعاً زندگی مردم رو به سمت بهتر شدن تغییر بده.

شما طراح UX رو برای انجام تحقیقات کاربر استخدام می‌کنید و به شما کمک می‌کنه تا بفهمید برنامه شما دقیقاً چه ویژگی‌هایی باید داشته باشه و چگونه باید کل سفر کاربر ترسیم بشه. برنامه شما چیزی رو ارائه می‌ده که مخاطبان هدف شما بهش نیاز دارن و خواستارش هستن. با این حال، وقتی اون رو بارگیری می‌کنن، متوجه می‌شن که متن روی هر صفحه به سختی خونده می‌شه (متن زرد را در زمینه سفید فکر کنید). علاوه بر این ، دکمه‌ها بیش از حد به هم نزدیک هستن؛ اون‌ها مرتباً دکمه اشتباه رو می زنن ! این یک مورد کلاسیک از رابط کاربری بد هست که UX خوب رو از بین می‌بره.

از طرف دیگه، آیا تا به حال با یک وب سایت واقعاً زیبا روبرو شدید تا دریابید که فراتر از انیمیشن‌های حیرت انگیز و رنگ آمیزی موضعی، استفاده از اون واقعاً یک درد واقعی هست؟ رابط کاربری خوب هرگز نمی‌تونه UX بد رو جبران کنه. این مثل برداشتن یک کیک تزئین شده زیباست که وقتی اون رو گاز می زنید واقعاً طعم وحشتناکی داره.

بنابراین ، وقتی صحبت از طراحی محصول میشه، UX و UI مکمل همدیگه هستن – و در بازار رقابتی امروز ، درست کردن هر دو جنبه ضروری هست.

طراح UX ( تجربه کاربری ) چکار می‌کنه؟

ما اکنون حدودا می‌دونیم که نقش طراح UX شامل چه مواردی می‌شه – در این‌جا نمونه‌ای کلی از وظایف و مسئولیت‌های معمول یک طراح UX هست. در این راهنما شرح مفصل‌تری از روند طراحی UX خواهید یافت.

استراتژی و محتوا:

تجزیه و تحلیل رقبا

تجزیه و تحلیل مشتری و تحقیقات کاربران

ساختار و استراتژی محصول

توسعه محتوا

قاب بندی و نمونه سازی اولیه:

فریم وایر

نمونه سازی

آزمایش و تکرار

برنامه ریزی توسعه

اجرا و تجزیه و تحلیل

هماهنگی با طراح (های) UI

هماهنگی با توسعه دهنده

پیگیری اهداف و ادغام

تجزیه و تحلیل و تکرار

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

طراح UI ( رابط کاربری ) چکار می‌کنه ؟

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

ظاهر محصول:

تجزیه و تحلیل مشتری

تحقیقات طراحی

برندسازی و توسعه گرافیک

راهنمای کاربر و خط داستان

پاسخگویی و تعامل:

نمونه اولیه UI

تعامل و انیمیشن

سازگاری با همه اندازه صفحه نمایش دستگاه

پیاده سازی با توسعه دهنده

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

شما همچنین به نکته پایانی توجه می‌کنید که مسئولیت “اجرای” طرح با توسعه دهنده رو بیان می‌کنه.

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