رابط کاربری (UI) و تجربه کاربری (UX) چیست؟ راهنمای جامع UI/UX

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

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

تجربه کاربری (UX) چیست؟

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

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

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

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

مطالعه بیشتر: طراحی صنعتی چیست؟ هرآنچه باید درباره طراحی صنعتی بدانید

تاریخچه‌ای از طراحی تجربه کاربری

روانشناس و طراح شناختی، دان نورمن، اصطلاح «تجربه کاربر» را در دهه 1990 ابداع کرد – اما UX تقریباً چند دهه قبل از ابداع نام آن نیز وجود داشته است.

1.  چهار هزار سال قبل از میلاد مسیح : فنگ‌شویی و اهمیت فضا

احتمالاً از خود می‌پرسید که یک فلسفه باستانی چینی چه ارتباطی با طراحی UX دارد، اما این ارتباط آنقدرها هم که به نظر می‌رسد دور از ذهن نیست. فنگ شویی (Feng shui) که قدمتی حدود 6000 سال دارد، به معنای واقعی کلمه به عنوان “باد” و “آب”‌ترجمه می‌شود و به آرایش فضایی اشیاء (مانند مبلمان) در رابطه با جریان انرژی اشاره دارد. در عمل، فنگ شویی همه چیز در مورد چیدمان محیط اطراف شما در بهینه‌ترین، هماهنگ‌ترین یا کاربرپسندترین حالت است – خواه یک دفتر، اتاق خواب یا کل ساختمان باشد. این به همه چیز از چیدمان و چارچوب گرفته تا مواد و رنگ مربوط می‌شود.

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

2. پانصد سال قبل از میلاد مسیح : یونانیان باستان و ارگونومی

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

3. اوایل قرن 19 : فردریک وینسلو تیلور(Frederick Winslow Taylor ) و تلاش برای بهره وری در محل کار

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

4. دهه‌ی 1940 : تویوتا و ارزش ورودی انسان

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

5. 1955 : هنری دریفوس (Henry Dreyfuss )  و هنر طراحی برای مردم

یکی دیگر از چهره‌های کلیدی در تاریخ طراحی تجربه کاربری، هنری دریفوس، مهندس صنایع آمریکایی است که به دلیل طراحی و بهبود قابلیت استفاده برخی از نمادین‌ترین محصولات مصرفی از جمله جاروبرقی هوور، تلفن رومیزی و… ​​شهرت داشت. فلسفه طراحی دریفوس بر اساس عقل سلیم و رویکردهای علمی ‌بود. در سال 1955، او “طراحی برای مردم” را نوشت که تقریباً طراحی UX را به طور خلاصه توضیح می‌دهد: «وقتی نقطه تماس بین محصول و مردم به نقطه اصطکاک تبدیل می‌شود، پس [طراح] شکست خورده است. از سوی دیگر، اگر افراد با تماس با محصول احساس ایمن‌تر و راحت‌تری داشته‌باشند و مشتاق‌تر برای خرید شوند، طراح موفق شده است.»

6. 1966 : والت دیزنی – اولین طراح UX؟

مهندسان و طراحان  تنها کسانی نیستند که نقشی در تاریخ UX داشتند. والت دیزنی ممکن است  که یکی از واضح‌ترین افراد تاثیرگذار در UX به نظر نرسد، اما والت دیزنی اغلب به عنوان یکی از اولین طراحان تجربه کاربری در تاریخ مورد ستایش قرار می‌گیرد. در واقع، دیزنی به ایجاد تجربیات جادویی و تقریباً کامل برای کاربران وسواس داشت، و روشی که او برای ساخت دنیای دیزنی شروع کرد، یک نبوغ واقعی در طراحی تجربه کاربری بود. دیزنی مکانی را متصور بود که در آن “آخرین فناوری می‌تواند برای بهبود زندگی مردم استفاده شود”؛ دیدگاهی که بدون شک طراحان امروزی در آن سهیم هستند.

7. دهه 1970 : زیراکس، اپل و عصر کامپیوتر

در دهه 1970 عصر رایانه‌‌های شخصی آغاز شد و روانشناسان و مهندسان با هم کار کردند تا بر تجربه کاربر تمرکز کنند. بسیاری از تأثیرگذارترین پیشرفت‌ها از مرکز تحقیقات PARC زیراکس، مانند رابط کاربری گرافیکی و ماوس، حاصل شد. از بسیاری جهات، PARC لحن محاسبات شخصی را همانطور که امروزه می‌شناسیم تنظیم کرد. و حالا اپل: در سال 1984، مکینتاش اصلی منتشر شد، اولین رایانه شخصی اپل که دارای یک رابط کاربری گرافیکی، صفحه نمایش داخلی و ماوس بود. از آن زمان، اپل یک مبتکر واقعی در تجربه کاربری بوده است، از اولین آی پاد در سال 2001 تا آیفون در سال 2007. این غول فناوری حتی در ابداع اصطلاح طراحی تجربه کاربری نیز دستی داشت.

8. 1995 : دونالد نورمن برای طراحی تجربه کاربری اسم تعریف کرد

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

9. 2018 و پس از آن: تاریخ در حال ساخت

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

مطالعه بیشتر: طراحی فراگیر چیست؟ نقش طراحی فراگیر در طراحی

طراحی UX کاربر محور است

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

وظایف معمول یک طراح تجربه کاربری متفاوت است، اما اغلب شامل تحقیقات کاربر، ایجاد پرسونا، طراحی وایرفریم‌ها و نمونه‌‌های اولیه تعاملی و همچنین آزمایش طرح‌‌ها می‌شود. این وظایف می‌تواند از یک سازمان به سازمان دیگر بسیار متفاوت باشد، اما آنها همیشه از طراحان می‌خواهند که مدافع کاربران باشند و نیازهای کاربران را در مرکز تمام تلاش‌‌های طراحی و توسعه قرار دهند. همچنین به همین دلیل است که اکثر طراحان در نوعی از فرآیند کاری کاربر محور (User Centered Design Process)  کار می‌کنند و تلاش‌‌های آگاهانه خود را تا زمانی که به همه مسائل مربوطه و نیازهای کاربر به طور بهینه رسیدگی کنند، هدایت می‌کنند.

هفت فاکتور که روی تجربه کاربری تاثیر می‌گذارند (Honeycomb UX)

• مفید بودن (Useful) : تجربه کاربری هدفی را برای مشتریان هدف خود فراهم می‌کند. اگر یک محصول هیچ هدفی نداشته باشد، نمی‌تواند توجه را به خود جلب کند.
• قابلیت استفاده (Usable) : قابلیت استفاده کاربران را قادر می‌سازد تا به طور موثر و کارآمد به هدف نهایی خود با یک محصول دست یابند. سطح بالای قابلیت استفاده نیز می‌تواند تفاوت زیادی در ایمنی و راحتی استفاده ایجاد کند.
• معتبر بودن (Credible) : معتبر بودن یک محصول به معنای قابلیت اطمینان داشتن به محصول است، اگر کاربر فکر کند سازنده محصول دروغ می‌گوید یا قصد بدی دارد، تحویل یک UX خوب تقریبا غیرممکن است.
• مطلوب بودن (Desirable) : این قابلیت از طریق برندسازی، تصویر، هویت، طراحی زیبایی شناختی و احساسی منتقل می‌شود.
• قابلیت دسترسی (Accessible) : طراح باید یک UX ارائه دهد که برای کاربرانی با طیف کاملی از توانایی‌‌ها قابل دسترسی باشد.
• با ارزش بودن (Valuable) : طرح UX باید به کسب و کار و مشتری ارزش دهد.
• قابلیت پیدا شدن (Findable) : طراح باید تضمین ‌کند که محصول و محتویات آن به راحتی پیدا می‌شود.

فرآیند طراحی تجربه کاربری  

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

• تعریف محصول
• تحقیق و پژوهش
• آنالیز
• طراحی
• اعتبارسنجی

1. تعریف محصول

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

این مرحله معمولا شامل موارد زیر می‌شود:

• مصاحبه با سهامداران: مصاحبه با سهامداران کلیدی برای جمع آوری بینش در مورد اهداف تجاری است.
• مشخص کردن ارزش پیشنهادی: تفکر در مورد جنبه‌‌های کلیدی و گزاره‌‌های ارزشی محصول (چیست، چه کسی و چرا از آن استفاده خواهد کرد) است. ارزش پیشنهادی به تیم و سهامداران کمک می‌کند تا درباره اینکه محصول چه خواهد بود و چگونه نیازهای کاربر و کسب و کار را برطرف کنند، به جمع‌بندی برسند.
• طرح مفهومی: ایجاد یک مدل اولیه از محصول آینده (می‌تواند طرح‌‌های کاغذی اولیه از فرم کلی محصول بدون جزئیات باشد).

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

2. تحقیق در مورد محصول

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

• مصاحبه عمیق فردی (IDI): یک تجربه محصول عالی با درک خوب کاربران شروع می‌شود. مصاحبه‌‌های عمیق داده‌‌های کیفی مانند نیازها، خواسته‌‌ها،‌ترس‌‌ها، انگیزه‌‌ها و رفتار را در مورد مخاطب هدف، ارائه می‌دهد.
• تحقیق رقابتی: تحقیقات به طراحان UX کمک می‌کند تا استانداردهای صنعت را درک کنند و فرصت‌های محصول را در جایگاه خاص آن شناسایی کنند.

3. تجزیه و تحلیل

هدف مرحله تجزیه و تحلیل، استخراج بینش از داده‌های جمع‌آوری‌شده در طول مرحله تحقیق از «آنچه» کاربران می‌خواهند به آن نیاز دارند، و اینکه «چرا» آنرا می‌خواهند یا به آن نیاز دارند، اطلاعاتی بدست می‌آید. در طول این مرحله، طراحان تأیید می‌کنند که مهم‌ترین فرضیات تیم درست است.

این مرحله از فرآیند UX معمولاً شامل موارد زیر است:

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

• ایجاد داستان‌‌های کاربری (سناریو): سناریو ابزاری است که به طراحان کمک می‌کند تا تعاملات محصول/خدمت را از دیدگاه کاربر درک کنند. معمولاً با ساختار زیر تعریف می‌شود: «به عنوان یک [کاربر] من می‌خواهم [به هدفی برسم]». سناریوها انگیزه شخص را برای انجام کار منتقل می‌کنند و به آشکار کردن مسائلی که شخص در طول راه با آنها برخورد می‌کند کمک می‌کند. آنها همچنین فرصت‌‌هایی را برای روان‌تر کردن فرآیند تعیین می‌کنند.
• استوری بوردینگ (Story Boarding): ابزاری است که به طراحان کمک می‌کند تا شخصیت‌‌های کاربر و داستان‌‌های کاربر را به هم متصل کنند. همانطور که از نام آن پیداست، اساساً داستانی در مورد تعامل کاربر با محصول شما است.

• نقشه‌‌های سفر کاربر (User Journey Map): نقشه سفر کاربر نمایشی از تعاملات کاربر با محصول شما است. با استفاده از چیزهایی که در مرحله تحقیق یاد گرفتید، یک نقشه سفر کاربر ایجاد کنید تا به شما کمک کند بفهمید کاربر شما هنگام استفاده از محصول یا خدمات شما چه چیزی را تجربه خواهد کرد. تنها در این صورت است که می‌توانید بهترین محصول را برای آنها بسازید. نقشه سفر کاربر برای موارد زیر بسیار مهم است:
• ایجاد همدلی
• ارائه یک تصویر بزرگ مشترک
• ایجاد تمرکز
• آشکار شدن فرصت‌‌ها

4. طراحی

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

مرحله دیزاین شامل موارد زیر می‌شود:

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

مطالعه بیشتر: اسکچینگ (Sketching) در طراحی صنعتی چیست؟

– ایجاد وایرفریم (Wireframing): وایرفریم ابزاری است که به طراحان کمک می‌کند تا ساختار اصلی یک صفحه (یا محصول)، از جمله عناصر کلیدی و نحوه تناسب آنها با یکدیگر را تجسم کنند. ایجاد وایرفریم به عنوان ستون فقرات محصول عمل می‌کند و طراحان اغلب از آنها به عنوان پایه ای برای ماکت‌‌ها و نمونه‌‌های اولیه استفاده می‌کنند.

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

سرعت ایجاد، مزیت اصلی ایجاد وایرفریم است و این ابزار را در جلسات طوفان فکری بسیار ارزشمند می‌کند. وایرفریم‌ها مناطقی را نشان می‌دهد که عناصر اصلی محتوای محصول شما در آن صفحه ظاهر می‌شوند. آنها شامل طراحی گرافیک، رنگ‌ها، تصاویر، سبک‌های تایپ یا هر چیز دیگری که بتواند تمرکز را از هدف اصلی قاب منحرف کند مانند تسهیل ارزیابی سازماندهی منطقی محتوا و عناصر عملکردی در صفحات جداگانه، نمی‌شوند. دو نوع قاب وایرفریم وجود دارد: وایرفریم Low-Fidelity و وایرفریم High-Fidelity، وایرفریم Lo-Fi بیشتر انتزاعی هستند زیرا اغلب از جعبه‌های اشیاء ساده، فلش‌ها و متن مکان‌نما استفاده می‌کنند. آنها در مراحل اولیه طراحی محصول مفید هستند، زمانی که تیم‌‌ها به تازگی مسیر طراحی را کشف می‌کنند. این وایرفریم‌ها نیاز به سرمایه‌گذاری کمتری از طراحان دارد. ایجاد این نوع قاب‌ها، حتی با داشتن مهارت‌های اولیه طراحی، نسبتاً آسان است.

وایرفریم Hi-Fi بیشتر شبیه طراحی UI نهایی که به کاربر ارائه داده می‌شود، است. همچنین ممکن است شامل محتوای واقعی و همچنین دکمه‌ها، منوها و فرم‌های عناصر کاربردی با اندازه مناسب باشند. آن‌ها می‌توانند در پروژه برای نشان دادن استدلال پشت تصمیمات طراحی استفاده شوند، یا می‌توانند به عنوان پایه‌ای برای نمونه‌‌های اولیه کاربردی عمل کنند.

• ایجاد نمونه‌‌های اولیه (Prototype): در حالی که وایرفریم‌ها بیشتر در مورد ساختار و سلسله مراتب بصری (ظاهر) هستند، نمونه‌های اولیه در مورد تجربه تعامل واقعی (ظاهر و احساس) هستند. یک نمونه اولیه مانند شبیه سازی محصول است و ممکن است Lo-Fi تا Hi-Fi (نمونه‌‌های اولیه کدگذاری و برنامه‌نویسی شده) ساخته شده‌باشد.

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

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

5. آزمایش و اعتبارسنجی

اعتبار سنجی یک مرحله ضروری در فرآیند طراحی است زیرا به تیم‌‌ها کمک می‌کند تا بفهمند آیا طراحی آنها برای کاربرانشان کار می‌کند یا خیر. معمولاً، مرحله اعتبارسنجی پس از آماده شدن طرح با Hi-Fi شروع می‌شود، زیرا آزمایش با طرح‌های Hi-Fi بازخورد ارزشمندتری را از کاربران نهایی ارائه می‌دهد. طی یک سری جلسات تست کاربر، تیم، محصول را هم با سهامداران و هم با کاربران نهایی تایید می‌کند.

مرحله اعتبار سنجی فرآیند UX معمولا شامل فعالیت‌‌های زیر می‌باشد:

• استفاده از محصول آزمایشی: هنگامی‌که تیم طراحی، محصول را تا جایی که قابل استفاده است، طراحی کرد، نوبت به آزمایش محصول در داخل می‌رسد. اعضای تیم باید سعی کنند از محصول به طور منظم استفاده کنند و عملیات روتین را برای کشف هرگونه نقص عمده در قابلیت استفاده انجام دهند.
• جلسات تست: جلسات تست کاربر با افرادی که نماینده مخاطب هدف شما هستند بسیار مهم است. فرمت‌های مختلفی برای امتحان و آزمایش وجود دارد، از جمله تست قابلیت استفاده، گروه‌های تمرکز و غیره.
• نظرسنجی‌ها:  نظرسنجی‌‌ها ابزاری عالی برای گرفتن اطلاعات کمی ‌و کیفی از کاربران دنیای واقعی هستند. طراحان UX می‌توانند سؤالات باز مانند «چه بخشی از محصول را دوست ندارید؟»، برای دریافت نظرات کاربران در مورد ویژگی‌‌های خاص را اضافه کنند.

چرا کسب و کارها به طراحی UX نیاز دارند؟

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

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

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

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

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

رابط کاربری (UI) چیست؟

رابط کاربری (َUser Interface) فضایی است که در آن تعامل بین انسان و ماشین اتفاق می‌افتد. UI یک جنبه جدایی ناپذیر از تجربه کاربر (UX) است که از دو بخش اصلی تشکیل شده است: طراحی بصری، که ظاهر و احساس یک محصول را منتقل می‌کند؛ و طراحی تعاملی (Interaction Design) که سازماندهی عملکردی و منطقی عناصر است. هدف از طراحی رابط کاربری ایجاد یک رابط کاربری است که تعامل کاربران با یک محصول را آسان، کارآمد و لذت بخش می‌کند.

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

مهم‌ترین المان‌های طراحی رابط کاربری

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

مهمترین عناصر طراحی UI عبارتند از:

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

انواع طراحی رابط کاربری UI

انواع مختلفی از طراحی رابط کاربری وجود دارد، اما سه مورد از محبوب‌ترین آنها رابط کاربری گرافیکی (Graphical User Interface)، رابط کاربری صوتی (Voice User Interface) و منو محور (Menu-Driven) هستند. در رابط کاربری گرافیکی، کاربران با دستکاری اشیاء بصری روی صفحه دیجیتال با استفاده از دستگاه یا لمس، با اطلاعات تعامل دارند. عناصر یک رابط کاربری گرافیکی خوب، باید طوری طراحی شوند که از قابلیت یادگیری و قابلیت پیدا شدن خوب پشتیبانی کنند. وقتی کاربران عناصر بصری آشنا و الگوهای تعاملی را می‌بینند، می‌توانند با نگاه کردن به آن بفهمند که چگونه با رابط کاربری تعامل برقرار کنند. همچنین مهم است که مطمئن شوید عناصر یک رابط کاربری گرافیکی یکنواخت هستند.

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

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

اصول طراحی رابط کاربری

1. وضوح (Clarity)

هنگامی‌که محصول خود را ایجاد می‌کنید، سوالات زیر را از خود بپرسید:

•  آیا بخش هدایتگر (Navigation) شما بصری است؟ آیا کاربران به راحتی از یک صفحه به صفحه دیگر منتقل می‌شوند؟
• آیا از دکمه‌‌های قابل مشاهده استفاده کرده اید که کاربر را وادار به کلیک روی آنها می‌کند؟
• آیا هدف هر عنصر در محصول، وب سایت یا برنامه شما واضح و آسان است؟

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

2. آشنایی (Familiarity)

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

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

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

استفاده از اصل آشنایی در طراحی UI در محصول شما چندین مزیت دارد:

• حفظ کاربر

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

• ایجاد سهولت بیشتر در کار طراحان

برای طراحی رابط کاربری آسان‌تر است تا با‌ ترکیب‌هایی که توسط افراد دیگر در گذشته برای یک رابط ایجاد شده است  کار کند تا که راه حل‌های جدیدی را از ابتدا ایجاد کند.  

• آسان‌تر شدن یادگیری استفاده از آن رابط برای کاربران

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

3. کنترل کاربر (User Control)

کاربران را در کنترل رابط قرار دهید. یاکوب نیلسن اهمیت این مسئله را اینگونه توضیح می‌دهد: «کاربران اغلب به اشتباه عملکردهای سیستم را انتخاب می‌کنند و برای خروج از حالت ناخواسته بدون نیاز به انجام یک گفتگوی طولانی، به یک «خروج اضطراری» مشخص شده نیاز دارند.»

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

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

به طور مشابه، هنگام استفاده از همپوشانی در وب سایت خود، مطمئن شوید که دکمه خروج {x} واضح است. در غیر این صورت، کاربران ممکن است روی دکمه بازگشت در مرورگر کلیک کنند و به جای خروج از تنها آن صفحه، دو مرحله به عقب برگردند.

4. سلسله مراتب (Hierarchy)

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

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

• رنگ

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

• اندازه

اندازه در طراحی رابط کاربری  به خصوص هنگام ایجاد سلسله مراتب بصری اهمیت زیادی دارد، هر چه عنصر بزرگتر باشد، بیشتر قابل مشاهده است. عناصر کوچکتر معمولاً آنهایی هستند که اهمیت کمتری دارند. بنابراین، به عنوان یک طراح، سعی کنید چیزهای مهم (مانند سرفصل‌‌ها یا (Call To Action) را بزرگتر و برجسته‌تر کنید.

*CTA چیست: هر جایی که در سایت‌ها، اپلیکیشن‌ها یا شبکه‌‌های اجتماعی، از شما دعوت می‌شود که اقدامی‌انجام دهید، با یک CTA روبرو هستید. مانند دکمه پرداخت، دکمه خرید یا دکمه افزودن به سبد خرید در فروشگاه‌‌های آنلاین، فرم دریافت ایمیل (برای ثبت در لیست ایمیل یک سایت و مثلاً دریافت خبرنامه هفتگی)، باکس ثبت نام و عضویت در وب‌سایت‌ها و اپلیکیشن‌ها و غیره.

• فونت‌ها

برای ایجاد سلسله مراتب بصری با اندازه‌‌ها، وزن‌‌ها و سبک‌‌های مختلف فونت‌‌ها بازی کنید. این دقیقاً همان کاری است که Odoo در اینجا انجام می‌دهد.

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

• فضای منفی

به عناصر خود کمی‌فضای تنفس بدهید – همه اشیاء و عناصر را روی صفحه در کنار هم قرار ندهید. فضای منفی باعث می‌شود عناصر مهم برجسته شوند. Swaggar از فضای منفی در صفحه اصلی وب سایت خود استفاده می‌کند.

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

5. انعطاف‌پذیری

بروک کاولینگ، یکی از بنیانگذاران و مدیر اجرایی Digital of Things توضیح می‌دهد: «انعطاف‌پذیری فقط یک مسیر خطی را دنبال نمی‌کند، بلکه در مورد شناخت مشتریان شما و دادن انعطاف‌پذیری در جهت اهداف مختلف مشتریان است.»

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

برخی از نمونه‌های طراحی رابط کاربری انعطاف‌پذیر عبارتند از:

• میانبرهایی برای انجام مراحل پر استفاده با یک کلیک
• قابلیت‌‌های جستجوی پیشرفته

6. قابلیت دسترسی

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

هنگام طراحی محصولات و وب‌سایت‌ها، مطمئن شوید که الزامات دستورالعمل‌‌های دسترسی به محتوای وب (WCAG) را برآورده می‌کنید.

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

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

تفاوت UI و UX چیست؟

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

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

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

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

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

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

به طور خلاصه تفاوت رابط کاربری و تجربه کاربری به شرح زیر است :

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

نحوه همکاری طراحان تجربه و رابط کاربری

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

مسیرهای شغلی مناسب طراحان UI و UX

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

پنج مورد از بهترین ابزارهای طراحی UI/UX

قبل از اینکه چند نمونه از محصولات ui/ux را مطالعه کنیم، به بررسی پنج مورد از بهترین ابزارهای (نرم‌افزارها) طراحی ui/ux می‌پردازیم:

 1. اسکچ (Sketch)

اگر تجربه طراحی رابط کاربری دارید، نام Sketch را شنیده اید. و دلایل زیادی وجود دارد که چرا این یکی از ابزارهای طراحی است که بسیار مورد قبول است.

توانایی ایجاد تغییرات زیاد – چه از طریق  نمادها، سبک های لایه‌ها (Layers)، یا سبک‌های متن، یا ویژگی‌های تغییر اندازه و تراز صافی (خط‌کشی و ایجاد هم‌ترازی) آن باشد – باعث صرفه جویی در زمان طراحان برای ارائه نمونه‌های اولیه می شود. آنچه خسته کننده است را حذف می‌کند و به طراحان اجازه می‌دهد وارد شوند و خلق کنند. و با وجود تعداد زیادی ابزار قابل افزودنی (Plugin) که بدون مشکل ادغام می‌شوند، هیچ کمبودی در ابزارهایی وجود ندارد که بتوان از Sketch استفاده کرد.

2. ادوبی ایکس دی (Adobe XD)

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

مزیت استفاده از ابزاری از مجموعه‌ی Adobe این است که این برنامه‌ها، کاملاً با یکدیگر ادغام می شوند. و در حالی که ابزارهایی مانند فتوشاپ، به ویژه، به قیمت بالایی می‌رسند، شرکت های بزرگتر بسته Creative Cloud را بسیار مفید می‌دانند ، زیرا بسیاری از محصولات با هم در دسترس هستند، مانند Illustrator و InDesign.

3. فیگما (Figma)

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

یکی از مزیت های بزرگ Figma ویژگی های مشارکتی آن است که به چندین کاربر اجازه می دهد تا بدون نیاز به دانلود فایل‌ها به صورت محلی، به طور همزمان تغییراتی در یک طرح ایجاد کنند (از طریق بخش آنلاین این ابزار). عملکرد مرورگر آن به این معنی است که هر کسی می تواند از Figma در سیستم عامل های مختلف استفاده کند. در نهایت، Figma به راحتی با ابزارهایی مانند Maze، Zeplin و Confluence ادغام می‌شود و Figma را به گزینه‌ای عالی برای هر چیزی که با طراحی مرتبط است تبدیل می‌کند.

4. فلومپ (FlowMapp)

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

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

5. بالزامیک (Balsamiq)

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

این ابزار طراحی به عنوان یکی از ساده‌ترین ابزارها برای شروع استفاده شناخته می‌شود، حتی برای طراح رابط کاربری که دانش فنی زیادی ندارد. این به اندازه کافی ساده است که به کاربران اجازه می دهد تا به سرعت ماکت (Mock Up) ایجاد کنند، در حالی که آیکون ها و ابزارهای کافی برای طراحان فراهم می کند تا ایده های خود را بدون ترس خراب شدن در صفحه قرار دهند.

مطالعه طراحی رابط کاربری و تجربه کاربری چند اپلیکیشن منتخب

1. طراحی UX برای آشپزی و خرید: اپلیکیشن آشپزی Perfect Recipes

در میان انواع مختلف برنامه‌‌های تلفن همراه، برنامه‌‌های اختصاص داده شده به غذا دسته‌بندی بسیار محبوبی را ارائه می‌دهند. دستور العمل‌ها و نکات آشپزی، برنامه‌های تحویل رستوران و غذا، ردیاب کالری و یادداشت‌های غذایی اکنون به مردم کمک می‌کنند تا در جریان همه‌ی جنبه و مدل‌های غذا خوردن باشند، به این معنی که طراحان UX روی انواع رابط‌های از این دست کار می‌کنند. امروز، ما مطالعه موردی یکی از آنها را بررسی می‌کنیم، اپلیکیشن موبایلی به نام Perfect Recipes که‌ ترکیبی از عملکرد پخت و پز و خرید آنچه برای وعده‌های غذایی کاربران ضروری است، می‌باشد.

– پروژه:

طراحی UX یک اپلیکیشن موبایل ساده در زمینه آشپزی، دستور پخت و خرید غذا.

– ایده:

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

– تحلیل و بررسی:

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

– طراحی رابط کاربری:

از آنجایی که برنامه دستور غذا برای عملیات اساسی روزانه و مخاطبان هدف کاملاً متنوعی طراحی شده است، رابط کاربری باید برای کاربرانی با سطوح مختلف سواد فنی و انواع دستگاه‌های تلفن همراه بسیار آسان و در دسترس باشد. طرح‌بندی برنامه حول بخش هدایتگر (Navigation) بصری، خوانایی بالا، پس‌زمینه روشن و تصاویری چشم‌نواز ساختار یافته است. پس‌زمینه روشن و مطبوع، فضای مؤثری را برای انواع عکس‌ها و گرافیک‌هایی که ممکن است همراه با دستور پخت‌ها ارائه شوند، تنظیم می‌کند. تایپوگرافی واضح و جامد بر اساس فونت های SanSerif باعث می شود اطلاعات روی صفحه نمایش با اندازه های مختلف قابل اسکن و خوانا باشد. کنتراست رنگ برای تقویت هدایتگری سریع استفاده می‌شود: رنگ روشن توجه کاربران را به مناطق تعاملی و حالت های فعال عناصر طرح بندی جلب می کند. فیلد جستجو به راحتی در بالای صفحه پیدا می شود: عملکرد آن برای کاربران با درخواست متن و نماد جستجو روشن می‌شود.

– شخصی سازی:

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

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

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

• کارت‌های دستور غذا و عکس‌های جذاب

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

• ویژگی «همین حالا بپز!»

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

• لیست خرید

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

2. طراحی رابط کاربری (UI) اپلیکیشن کنترل و برنامه‌ریزی آبیاری گیاهان Watering Tracker

– پروژه:

رابط کاربری و طراحی تعاملی برای یک برنامه کنترل آبیاری گیاه.

– فرآیند:

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

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

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

پس از جریان وایرفریم UX ، طراح مجموعه‌ای از عملکردهای اساسی زیر را برای برنامه برنامه ریزی کرد:

• افزودن گیاهان به برنامه
• تعبیه یادآور (Reminder) و پیام (Notification) در مورد آبیاری
• دریافت اطلاعات و توصیه‌هایی در مورد شرایط و مراقبت از انواع خاصی از گیاهان
• پیگیری آمار آبیاری و برنامه‌های هفته آینده.

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

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

نوار پایین بسیار کاربردی و ساده است: شامل سه منطقه تعاملی است که بیشترین تقاضا را دارد. “My Plants (گیاهان من)” فهرست گیاهانی را که برای آبیاری ردیابی شده اند باز می کند، “Add New (جدید اضافه کن)” اجازه می دهد تا یک آیتم جدید ایجاد کنید و “My Profile (پروفایل من)” به تمام داده های تاریخچه و آمار کاربر می رود.

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

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

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

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

نتیجه‌گیری:

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