UI چیست؟
UI مخفف عبارت User Interface Design به معنای طراحی رابط کاربری است. در واقع UI طراحی بخشی از وبسایت یا اپلیکیشن است که کاربر آن را مشاهده میکند و بیشتر به جنبهی گرافیکی موضوع میپردازد. اینکه ظاهر هر بخش به چه صورت باشد تا جلوهی مناسبی به وبسایت دهد را طراح بخش UI مشخص میکند.
منبع:
https://bememim.com/%d8%b7%d8%b1%d8%a7%d8%ad%db%8c-%d8%b3%d8%a7%db%8c%d8%aa-%d8%a2%d9%85%d9%88%d8%b2%d8%b4%db%8c/
طراحی رابط کاربری به کمک گرافیستهای سایت و برنامهنویس Front-end پیاده سازی میشود. طراحی رابط کاربری مهم است زیرا کاربر مستقیماً با آن ارتباط دارد و معمولاً افراد به وبسایتهایی با UI ضعیف، کمتر اعتماد میکنند.
مثالهایی از UI
ظاهر منو چگونه است؟
رنگ دکمهی جستجو با رنگ اصلی سایت هماهنگ باشد.
باکس مربوط به بنرها تبلیغاتی چگونه طراحی شوند؟
برای مطالعه بیشتر در زمینه ui، به مقاله ui چیست؟ مراجعه نمایید.
UX چیست؟
UX مخفف عبارت User Experience Design به معنای طراحی تجربهی کاربری است. به احساسات و راحتی کاربر حین کار کردن با اجزای مختلف سایت گفته میشود و جوانب تعامل کاربر را با هر بخش در نظر میگیرد. اینکه وبسایت ما طوری طراحی شده باشد که هر بخش به راحتی در دسترس کاربران قرار بگیرد و برای کار کردن با هر قسمت آسودگی و راحتی کاربر در نظر گرفته شود اینها مسائلی از طراحی UX هستند.
البته ناگفته نماند که این فقط جنبهای از طراحی UX بود. جنبهی دوم آن به هدایت کاربر مرتبط میشود. اینکه چگونه ما کاربران یک صفحه را به صفحهی دلخواه خود هدایت کنیم. اینکه چگونه کاربر اهداف ما را در وبسایت دنبال کند. در واقع بعد دوم تجربهی کاربری به مدیریت و هدایت کاربر از لحظهی ورود به سایت تا لحظهی خرید محصول (یا هر هدف دیگر) اشاره میکند.
مثالهایی از UX
در منو چه گزینههایی قرار داده شوند.
باکس جستجوی کجای صفحه قرار بگیرد.
بنرهای تبلیغاتی کجای صفحه سایت باشند.
در ادامهی مقاله با ارائه مثال بیشتر به توضیح این مفهوم میپردازیم.
تفاوت UI و UX در چیست؟
همانطور که تا اینجای مقاله توضیح داده شد، این دو اصطلاح دو مفهوم متفاوت از هم دارند اما بسیاری از مواقع توسط افراد مختلف با هم اشتباه گرفته میشوند. در طراحی سایت یا نرم افزار UI به ظاهر سایت میپردازد. درحالی که UX هماهنگی طراحی با نیازهای کاربر را بررسی میکند و موجب افزایش وفاداری کاربران و بالابردن نرخ تبدیل میشود. این بزرگترین تفاوت UI و UX است.
برای باز کردن بیشتر مفهوم به سراغ یک مثال میرویم. برای مثال ما قصد داریم بخش فیلتر محصولات را در وبسایت قرار دهیم تا کاربران با فیلتر کردن، به طور سادهتر محصول مشخصی را بیابند. حتماً تا به حال حین خرید اینترنتی از این فیلترها استفاده کردهاید.
در فیلتر اینکه ظاهر هر فیلد، نحوهی نمایش گزینهها و… چگونه باشد به طراحی UI ارتباط دارد اما اینکه چه گزینههایی در این فیلتر قرار داده شود تا کاربر زودتر به محصول مدنظر خود برسد، بخش فیلتر محصول در کجای صفحه قرار بگیرد به UX ارتباط دارد.
فرآیند انجام طراحی UX برای یک وبسایت چگونه است؟
دوره آموزش UI و UX
بعد از آشنایی با مفاهیم UI و UX مناسب دیدیم که یک دوره آموزش UI و UX عالی را نیز برای یادگیری اصولی طراحی تجربه و رابط کاربری معرفی کنیم، دورههای خارجی و ب م می زیادی در این رابطه منتشر شدهاند، که میتوانید استفاده کنید، اما یکی از بهترین دورهها دوره جامع آموزش UI و UX ب م م است، در این دوره شما از صفرتاصد با مفاهیم ui و ux آشنا میشوید، همچنین در این دوره نحوه طراحی رابط کاربری با نرمافزار Adobe XD را از صفرتاصد یاد میگیرید.
در این دوره بعد از آشنایی با مفاهیم اولیه، نحوه طراحی یک رابط کاربری حرفهای را به صورت پروژه محور یاد میگیرید، یعنی بعد از تعریف یک پروژه که یک فروشگاه اینترنتی است، رابط کاربری آن را توسط نرمافزار Adobe XD به صورت کاملا عملی طراحی میکنید.
متفاوت اما جداییناپذیر!
گرچه این دو مفهوم معنایی مجزا دارند اما در طراحی این دو مکمل هم هستند و به کمک هر دو مورد میتوان طراحی زیبا و کاربردی داشت. ممکن است با وبسایتی مواجه شده باشید که از نظر ظاهر بسیار جذاب به نظر برسد اما موقع کارکردن با آن نظرتان به کلی در مورد سایت تغییر کند! مثلا اگر بخواهید یک مقالهی مشخص از آن سایت را بیابید ولی دکمهی جستجو را پیدا نمیکنید! آن وقت است که ارزش UX طراحی مهم به نظر میرسد.
نکتهی قابل توجه این است UI و UX دو بعد جدایی ناپذیر طراحی هستند. زمانهای زیادی پیش میآید برای داشتن تجربهی کاربری بهتر باید رابط کاربری و ظاهر را تغییر داد و هر تغییری در UI در تجربهی کاربری تاثیر دارد.
نتیجه: با وجود تفاوت UI و UX در مفهوم اما این دو به صورت مکمل عمل میکنند. فقط با داشتن UX و UI مناسب میتوانید نظر کاربر را جذب کرده و اهداف خود را در سایت به واقعیت برسانید.
تا چند سال پیش خودمان هم تعریف دقیقی از ui ux نداشتیم به همین دلیل نشستیم به تحقیق و خروجی تحقیق و تجربهی ما مقالهای شد که اینجا در مورد UI UX و تفاوت این دو نوشتیم. پیشنهاد میکنیم برای آشنایی با این دو مبحث مهم تا پایان این مقاله با ما همراه باشید.
اگر کمی با دنیای طراحی، مخصوصا طراحی وب آشنا باشید، بارها به عبارت Ui و Ux برخوردید. دو سرواژهای که همیشه کنار هم میآیند. اما معنی اینها چیست؟ اگر از ده نفر بپرسید UI و UX چیست؟ ده جواب مختلف میشنوید. بیشتر افراد، کسانی که ظاهر یک سایت یا وب اپلیکیشن را طراحی میکنند «UI UX کار» مینامند. اما این واقعا تعریف درستی است؟ اصلا UI UX کار داریم؟
UI و UX چیست؟
ما بحث را به محیط وب و اپلیکیشن محدود میکنیم ولی UI و UX در همهی شرکتها کاربرد دارند. هرجایی که محصول و کاربر ( مخاطب) داشته باشد، حتما با دو مفهوم طراحی تجربه کاربری و طراحی رابط کاربری سر و کار دارد. در مورد اینکه ui ux چیست؟ شاید بعضیها فکر کنند این دو در اصل یکی هستند یا هر دو وظایف یک نفر( شغل) هستند، یک چیزی مثل html و css که همیشه در کنار هم میآیند و هر دوی اینها را طراح وب استفاده میکند. اما اصلا اینطور نیست. حتی در شرکتهای کوچک هم طراح تجربه کاربری به عهده یک نفر و طراحی رابط کاربری به عهده فردی دیگر است. چون اینها خیلی با هم فرق دارند!
به صورت خلاصه UX مخفف کلمه User Experience و به معنی تجربه کاربری است. طراح تجربه کاربری، سعی دارد تجربه کاربر از کار با یک سایت، محصول یا خدمات را بهبود دهد. یعنی من اگر طراح تجربهی کاربری جایی باشم، باید تمام مسیرهایی که مخاطب به ما میرسد را بشناسم، تمام سناریوهایی که ممکن است برای مخاطب پیش بیاید را حدس بزنم و سعی کنم کاربر در تمام این مسیرها تجربهای ایدهال داشته باشد و صد البته که در کنار این تجربه به اهدافی که مد نظر ما است برسد ( یعنی کاربر را به سمتی که میخواهیم هدایت کنیم). همینطور که میبینید این کار عملا نوعی تحقیق و بررسی است و خروجیاش میشود یک سری پیشنهاد و راهکار که به بخشهای دیگر شرکت داده میشود. بهبود ux میتواند تاثیر زیادی روی درآمد کسب و کار ما داشته باشد که در مقالهی ترفندهای UX برای بهبود فروشگاه اینترنتی بیشتر به این موضوع اشاره کردیم.
Ui چیست؟
در سمت دیگر UI مخفف کلمه User Interface و به معنی رابط کاربری است. طراحی رابط کاربری یعنی طراحی بخشهای از محصول دیجیتال که کاربر آن را میبیند و از آن استفاده میکند. طراح رابط کاربری عملا با طرحهای گرافیکی و پیاده کردن این طرحها در سایت سر و کار دارد. یعنی بخشی از این کار را گرافیستی که طرح سایت یا اپلیکیشن را میزند به عهده دارد و بخش دیگر را برنامهنویس front end که طرح نهایی را پیادهسازی میکند.
تفاوت طراحی تجربه کاربری ux و طراحی رابط کاربری ui
اول از شباهت UI و UX بگوییم، هر دوی اینها با U شروع میشوند. اما در مورد تفاوتها، کسی که طراح تجربه کاربری است قدم به قدم برخورد مشتری با محصول و خدمات را مدیریت و برنامهریزی میکند. فکر میکند که کاربر چرا و در چه شرایطی از این محصول( سایت) استفاده میکند، قرار است پس از ورود به سایت یا اپلیکیشن به کجا هدایت شود، چه چیزی به او نشان داده شود و اهداف ما از اینکه کاربر وارد سایت ما شده است چیست( مثلا میخواهیم در نهایت در سایت ما ثبت نام کند، خرید کند یا فقط ایمیلاش را به ما بدهد و ...).
میتوان گفت UI تنها با بخش کوچکی از UX کار دارد. اما طراح تجربه کاربری حتی بعد از پایان طراحی، مدام به بررسی رفتار کاربر و آزمایش روشهایی برای بهبود تجربه کاربر در برخورد با محصول میپردازد و همین بررسیها باعث بهبود UI در بروزرسانیهای بعدی خواهد شد.
در ui و ux طراحی رابط کاربری تنها با بخش کوچکی از طراحی تجربه کاربری ارتباط دارد
طراحی رابط کاربری تنها با بخش کوچکی از طراحی تجربه کاربری ارتباط دارد
در شرکتهای کوچک و نوپا وظیفهی طراح رابط کاربری را معمولا صاحب شرکت به عهده میگیرد و درخواستهای خود را به طراح سایت و دیگر اعضای گروه میدهد اما در شرکتهای بزرگ و حرفهای فردی برای طراحی و بررسی تجربهی کاربری استخدام میشود که تعامل بالایی با بخش طراحی دارد. البته در ب م م معمولا وظایف طراح تجربهی کاربری( UX کار) به شغلهای دیگر مثل بخش بازاریابی یا مدیر شرکت واگزار میشود. به همین دلیل در بیشتر شرکتهای ب م می UI کار داریم ولی UX کار نداریم.
وظایف طراح تجربه کاربری UXd
مدیریت و بررسی رفتار کاربر
بررسی و انتخاب محتوا و متنهای استفاده شده در سایت یا محصول و ...
تمرکز روی اطلاعاتی که به کاربر داده میشود یا از او گرفته میشود
بررسی بخش مارکتینگ
و ....
یک طراح تجربه کاربری تقریبا با تمام تیم تعامل دارد و باید به ابزارهای تحقیق و آنالیز مسلط باشد تا بتواند هدف از ایجاد محصول( سایت) را برآورده کند. اما در مقابل طراح رابط کاربری، وظیفهی طراحی و پیادهسازی رابط کاربری را با توجه به اهداف و نیازهایی که به او منتقل شده است دارد. همانطور که میبینیم دو مفهوم UI و UX با هم در ارتباط و تعامل هستند اما وظایف این دو با هم تفاوت اساسی دارد. توجه به تجربهی کاربری میتواند طراحی سایت ما را بهبود دهد و درنهایت به موفقیت کسب و کار ما کمک کند.
وظایف طراح رابط کاربری Uid
یک طراح رابط کاربری در دو سطح کار میکند:
طراحی رابط کاربری
کدنویسی رابط کاربری (اجرای نهایی)
در خیلی از پروژهها و شرکتها این دو بخش کاملا از هم جدا هستند. یعنی یک طراح که معمولا پیشزمینهی گرافیک دارد، ابتدا طرح را به صورت وایرفریم یا اسکچ ( همان طراحی ساده با دست روزی کاغذ) میکشد و بعد آن را با ابزارهایی مثل فتوشاپ یا adobe xd پیادهسازی میکند. طرح به شکل کاملا گرافیکی پیاده شده و اصلا روی سایت یا اپلیکیشن نیست. این طرح بر اساس نیازها و ایدههای Uxd پیاده میشود. یعنی گرافیست نیازها و درخواستهای طراح تجربهی کاربری را میگیرد و بعد با ایدههای خودش آن را کامل میکند و خروجی نهایی تحویل کدنویس Front-end یا همان کدنویس رابط کاربری میشود.
قدم بعدی کدنویسی این طرح است که وظیفهی برنامهنویس Front-end (نمای سایت یا اپلیکیشن) است. این کدنویسی با HTML، CSS و JS انجام میشود. اگر دوست دارید یک برنامهنویس Front-end شوید، بهترین مسیر شرکت در دوره آموزش طراحی سایت است. برنامهنویس معمولا هیچ تغییری در طراحی انجام نمیدهد و فقط طرح را تبدیل به کد میکند. یعنی بار ایدهپردازی پروژه از نظر کاربری با Uxd و از نظر گرافیکی با طراح رابط کاربری است. در نهایت برنامهنویس فقط آن را اجرا میکند.
ابزارهای یک طراح رابط کاربری Uid
در بخش طراحی گرافیکی معمولا ۴ ابزار بیشتر از همه کاربرد دارند:
قلم و کاغذ: برای طراحی وایرفریم یا همان طراحی ساده و نسخهی اولیه. گاهی هم این طرح را با فتوشاپ یا یک ابزار ساده طراحی پیاده میکنند. این طرح فقط برای آن است که گرافیست ذهنیت خودش را به بقیهی اعضای تیم نشان دهد و با آنها در کلیت کار همنظر شود.
فتوشاپ یا ایلوستریتو: این دو ابزار به صورت ویژه برای طراحی رابط کاربری طراحی نشدهاند اما در عمل بیشتر طراحیهای رابط کاربری با کمک این دو ابزار معروف انجام میشود. در ب م م بیشتر طرحها با یکی از این دو ابزار تولید میشود.
Sketch: این ابزار فوقالعاده فقط و به صورت اختصاصی برای سیستم عامل مک توسعه پیدا کرده است و طراحی UI با آن تجربهای حیرتانگیز است. این نرمافزار آنقدر قدرتمند، ساده و کاربردی است که خیلی از طراحان فقط به خاطر این Sketch لپتاپ مک میخرند! ( البته کلاس گذاشتن هم بی تاثیر نیست)
Adobe xd: شرکت ادوبی برای اینکه قافیه را به Sketch نبازد، نرمافزار اختصاصی و رایگان خودش را با نام Adobe xd توسعه داد که روی ویندوز هم کار میکند و در نسخههای جدید واقعا کاربردی است.
در بخش برنامهنویسی Front-end اما گزینههای خیلی بیشتر است. گزینههایی مثل atom، Visual Studio یا netbeans متداولتر هستند ولی واقعا هرکسی بسته به اینکه با کدام ادیتور راحتتر است کار میکند.
این عکس تفاوت سناریویی را نشان میدهد که ما انتظار داشتیم پیش بیاید با تجربهای که کاربر انجام داده
شاید عکسی مثل تصویر بالا را جایی دیده باشید، این عکس معمولا به عنوان تفاوت ui و ux معرفی میشود. ولی در اصل اینطور نیست. فرض کنیم عکس بالا گوشهای از یک سایت است. uxکار به صورت پیشفرض گفته که بسته به نیاز کاربر باید یک راه ایجاد کنیم. ui کار طرح این جاده را زده و خروجی (راه سنگ فرش) را ساخته. اما وقتی تجربهی واقعی کاربران اتفاق افتاده، دیده شده که کاربر کار دیگری میکند.
حالا uxکار باید نسبت به اولویتهایی که دارد طرح دیگری بدهد. مثلا اگر اولویت راحتی کاربر است، باید پیشنهاد بدهد مسیر را تغییر بدهند. یا اگر اولویت حفظ ظاهر یا چمنهاست، باید پیشنهاد استفاده از فنس را بدهد. دوباره که این مسیر تغییر کرد (بروزشد) طراح تجربه کاربری باز باید تجربه مخاطب را زیر ذرهبین بگذارد و تحلیل کند تا نتیجه نهایی باز هم بهتر شود. یعنی این کار هیچ وقت قطع نمیشود. امیدوارم این مثال دقیقا نشان داده باشد که ux چیست؟ ui چیست؟ و این دو به چه دردی میخورند.
Ui مخفف کلمه ( user interface ) است ، که در فارسی به اصطلاح رابط کاربری شناخته می شود.
به طور کلی طراحی ظاهری و آنچه که مشاهده می شود ، طراحی ui محصول نامیده می شود.
در طراحی وب سایت و نرم افزار ui به هرچیزی که در صفحه نمایش دیده می شود :
مانند تصاویر ، رنگ ها ، جداول ، متن ها و هر آنچه قابل مشاهده باشد ، گفته می شود.
همین صفحه ای که دارید مشاهده می کنید ، نیز شامل می شود.
طراحان رابط کاربری یا ui designer وظیفه ایجاد یکپارچگی و زیبا سازی ظاهری یک محصول یا وب سایت را دارند.
ui برای جذب مشتری و گرفتن امتیاز از گوگل برای بهینه سازی سایت ، نیز فاکتور مهمی بشمار می آید.
در اینجا چند مثال از ui برای شما اورده ایم:
اینکه ظاهر منو به چه صورت باشد.
رنگ دکمه هایی که کاربر روی آن کلیک می کنید.
اینکه باکس تبلیغات شما چگونه باشد.
Ux چیست؟ ux مخفف چیست؟
ui و ux به زبان ساده
Ux مخفف کلمه ( user experience ) است ، که در فارسی به اصطلاح تجربه کاربری شناخته می شود.
به طور کلی، نحوه تفکر و احساسی که یک کاربر از محصول دارد، ux می باشد.
ux موجب رفتار و پاسخ فیزیکی یا احساسی کاربر در زمان استفاده از محصول می شود.
در طراحی سایت و نرم افزار ux به توانایی ادراک کاربر از سایت و کیفیت ارائه آن گفته می شود.
طراحان تجربه کاربری یا ux designer وظیفه ایجاد محتوای با کیفیت و معتبر بودن یک محصول یا وب سایت را دارند.
مثالهایی برای ux:
چه گزینه هایی در منو قرار دهیم.
باکس جستجوی کلمات در کجای صفحه سایت یا اپلیکیشن قرار بگیرد.
بنرهای تبلیغاتی کجای صفحه قرار داده شوند.
ui و ux چه تفاوتی باهم دارند؟
اگر بخواهیم ui و ux را به زبان ساده توضیح دهیم ما هر روز به نوعی با این دو واژه در ارتباط هستیم. همچنین اگر بخواهیم بگوییم ui و ux چه تفاوتی باهم دارند؟ باید برای شما مثال بزنیم تا بهتر متوجه شوید.
تعاریف زیادی راجع به این دو واژه وجود دارد که در این جا با بیان ساده و قابل درک به شناخت آن ها می پردازیم.به عنوان مثال زمانی که شما برای خرید یک لپ تاپ مراجعه می کنید ، فاکتورهای مختلفی مدنظر دارید :
طراحی ظاهری لپ تاپ ، رنگ ، اندازه صفحه نمایش و اندازه ی فیزیکی دستگاه ، بخشی از طراحی ui محصول می باشد.
کانفیگ دستگاه از قبیل : نحوه کار با لپ تاپ ، سرعت دستگاه در اجرای نرم افزارها ( ram ) و میزان حافظه دستگاه ( hard ) ، سرعت پردازنده ( cpu ) و در کل احساسی که به ما در زمان کار کردن با لپ تاپ منتقل می شود ، طراحی ux محصول می باشد.
به عنوان مثالی دیگر برای تفهیم موضوع :
یا هنگامی که قصد خرید یک لباس را داریم ، رنگ و طرح لباس ui آن و جنس پارچه و کیفیت دوخت ux آن می باشد.
دست ظاهری من ui و رگ و خون و سلول و … ، ux می باشد.
طراحی ui/ux
در طراحی سایت ui و ux از اصول ضروری و مهم در جذب مشتری می باشد.
درست است که طراحی ui/ux دو مفهوم از هم جدا هستند ولی مکمل یکدیگرند.
در واقع شما با استفاده از هر دوی انها می توانید طراحی زیبا و کاربردی داشته باشید.
بعنوان مثال:
شما وارد سایتی می شوید که ظاهری بسیار جذاب دارد و شما را ترغیب می کند در سایت چرخی بزنید.
اما
وقتی از دکمه جستجو می خواهید استفاده کنید با مشکل مواجه می شوید.
یا نمی توانید بخش های مختلف سایت را پیدا کنید.
پس نظرتان نسبت به ان سایت تغییر می کند.
یک طراح ui باید توانایی های دیداری بالایی داشته باشد و به رنگ ها و تصاویر و چیدمان و در کل ظاهر محصول توجه کند.
در حالی که …
یک طراح ux باید توانایی های ادراک بالاتری داشته باشد و به موارد زیر توجه کند :
محتوای مناسب سایت ، معتبر بودن سایت ، رضایت بخش بودن سایت برای کاربر، کاربرد پذیر بودن سایت ، در دسترس بودن سایت و در کل کیفیتی و رضایتی که سایت به کاربر انتقال می دهد.
ui ux designer چه کسی است؟
یک طراح وب سایت خوب باید قدم را فراتر از طراحی محیطی زیبا و جذاب برای وب سایت خود بگذارد ، و میزان رضایت و احساس کاربر را در زمان استفاده از سایت در نظر گرفته و سایت را به گونه ای طراحی کند که کاربر ارتباط موثر و کاربردی با سایت برقرار کند.
رعایت این موارد موجب رسیدن ما به هدف اصلی که جذب کاربران به محصول یا سایت و رساندن اطلاعات لازم به کاربر است ، می شود.
اگر شما وب سایتی داشته باشید که ظاهر بسیار زیبا ، جذاب و خاص داشته باشد ، اما عملکرد و نحوه کار با آن ضعیف باشد، سرعت لود صفحه پایین باشد و … این یک سایت با ui خوب و ux بد است.
حال اگر وب سایت شما ظاهر زیبایی نداشته باشد و استفاده از آن برای کاربر گنگ و نامفهوم باشد و کاربر در هنگام استفاده از آن رضایت نداشته باشد، اما عملکرد و نحوه کار مناسب باشد ، سرعت لود صفحه بالا باشد و … این یک سایت با ui ضعیف و ux خوب است.
این را در نظر داشته باشید که طراحی سایت هایی که به اینگونه باشد ، نمی تواند شما را به هدفتان برساند.
ui and ux چیست
برای رسیدن به هدف باید هر دو مورد ui و ux را با هم در نظر بگیریم و هردو به نحو احسن انجام شوند.
برای این کار باید طراحان حرفه ای ui و ux در کنار هم و با همفکری و مشورت متقابل سایت شما را طراحی کنند ، تا وب سایت شما به ایده آل خود برسد.
ویژگی هایی که در طراحی یک وب سایت کاربر پسند وجود دارد:
محتوای باکیفیت ، طراحی زیبا و جذاب ، سادگی طرح ، سرعت بارگذاری بالا و…است.
به عبارتی کاربر باید بتواند خیلی راحت جواب سوال های خود را پیدا کند و به آنچه که می خواهد برسد.
در پایان باید گفت که امروزه طراحانی وجود دارند که در هر دو زمینه ui و ux تخصص دارند و برای طراحی وب سایت از هر دو تخصص خود همزمان استفاده می کنند تا نتیجه بهتر و اثربخش تری بگیرند.
اگر از علاقهمندان دنیای آیتی و فناوری باشید مطمئنا با واژههای UI و UX برخورد داشتهاید، دو اصطلاحی که بین طراحان وب یا اپلیکیشن و خورههای تکنولوژی بارها و بارها تکرار میشود، در این آموزش از ب م م آی تی قصد داریم به طور کامل و با بیانی ساده با این دو مفهوم آشنا شده و تفاوت آنها را بشناسیم، بد نیست در ابتدا و به صورت خلاصه بدانیم که واژه UI مخفف عبارت User Interface و به معنای رابط کاربری و واژهی UX مخفف عبارت User Experience و به معنای تجربهی کاربری میباشد، در ادامه به طور کامل راجع به این دو اصطلاح بحث کرده و تفاوتها و شباهتهای آنها را بررسی میکنیم.
با مفاهیم UI و UX و تفاوت آنها به خوبی آشنا شوید (با مثالهای ساده)
در ابتدا بیایید کمی بیشتر با مفهوم این دو اصطلاح آشنا شویم:
UI یا رابط کاربری چیست و به چه معناست؟
همانطور که پیشتر گفتیم، واژهی UI خلاصه شدهی عبارت User Interface میباشد که در زبان فارسی آن را با عنوان رابط، واسط یا نمای کاربری میشناسیم.
رابط کاربری شامل المانهای دیداری یک محصول میشود، به عنوان مثال در یک وبسایت یا اپلیکیشن، تمام تصاویر به کار رفته، رنگبندیها، طراحی ظاهری دکمهها و… میتوانند در بردارندهی مفهوم UI باشند.
طراحان رابط کاربری یا UI Designerها وظیفهی ایجاد یکپارچگی و زیباسازی ظاهری یک محصول، برنامه یا وبسایت را بر عهده دارند.
UX یا تجربهی کاربری چیست و به چه معناست؟
اصطلاح UX مختصر شدهی عبارت User eXperience میباشد که میتوان آن را تجربهی کاربری معنا کرد، این مورد را میتوان تمام عواطف، احساسات و تجربهی کاربر از کارکردن با یک محصول دانست، باید بدانیم طراحی تجربهی کاربری بسیار گسترده بوده و خود میتواند در بردارندهی UI نیز باشد.
حال که کمی با مفهوم این دو واژه آشنا شدیم، با بررسی تصویر زیر بهتر آن را به خاطر میسپاریم.
با مفاهیم UI و UX و تفاوت آنها به خوبی آشنا شوید (با مثالهای ساده)
فرض کنید قصد خرید یک ساعت مچی را دارید، شاید اولین موردی که توجه شما را به خود جلب کنید ظاهر و طراحی آن ساعت باشد، در حقیقت شکل ظاهری ساعت یکی از عواملی است که به آن توجه میکنید و در خرید شما تاثیر گذار است، شکل و زیبایی ظاهری ساعت را میتوانیم به UI یا رابط کاربری (بصری – دیداری) تشبیه کنیم. در مرحلهی بعدی احتمالا شما ساعت را به مچ خود بسته و آن را از نظر راحتی و نحوهی استفاده بررسی میکنید، اگر استفاده از ساعت برای شما لذتبخش باشد، اصطلاحا میگوییم تجربهی خوبی از کار با ساعت به دست آوردهاید، این مورد را میتوانیم به UX یا تجربهی کاربری تشبیه کنیم.
مثال سس گوجه فرنگی در طراحی UI و UX یک محصول!
حتما بارها برای شما پیش آمده است که موقع مصرف یک سس گوجه فرنگی، دقیقا هنگامی که سس به انتها میرسد به سختی آن را از ظرف خارج میکنید و هرچه جعبهی سس را تکان میدهید سس باقی مانده در ظرف خارج نمیشود، هرچند این ظرفها ظاهر بسیار زیبا و چشمنوازی دارند اما از طرفی تجربهی چندان خوبی به شما منتقل نمیکنند.
با مشاهدهی این مشکل یکی از شرکتهایی که محصولات خوراکی تولید میکرد به این فکر افتاد که طراحی ظرف سسهای خود را تغییر دهد، آنها یک طرح عجیب برای ظروف سس خود به وجود آوردند، آن هم یک ظرف با سر پهن بود، به صورتی که شما به راحتی میتوانستید سس را به صورت سر و ته نگهداری کنید، هرچند ظاهر چندان جذابی نداشت اما مشکل قبلی را به خوبی حل کرد و مصرفکنندگان به راحتی میتوانستند تا انتها از محتوای سس مورد علاقهی خود لذت ببرند و این دقیقا همان تجربهی کاربری عالی برای مشتریان بود!
با مفاهیم UI و UX و تفاوت آنها به خوبی آشنا شوید (با مثالهای ساده)
در اکثر مواقع زمانی که شما از یک برنامه یا وبسایت راضی نیستید، این امکان وجود دارد که مشکل از طراحی تجربهی کاربری نامناسب آن سرویس باشد، هرچند یک وبسایت میتواند از از لحاظ ظاهری زیبا باشد، اما در کنار آن باید احساس خوبی در کاربر ایجاد کند، از این رو میگوییم طراحی UI یکی از بخشهای زیر مجموعه طراحی UX است.
برای درک بهتر این موضوع ب م م آی تی را مثال میزنیم، تمام آنچه که شما در ظاهر سایت میبینید، شامل رنگبندیها، فونت، تصاویر در دستهی UI یا طراحی رابط کاربری قرار میگیرند و در سمت دیگر، محل قرار گیری لینک و دکمهها، منوی دستهبندی بالای سایت، بخش جستجوی سایت و… به گونهای قرار دارند که شما بتوانید به راحتی آنها را پیدا کرده و مورد استفاده قرار دهید که در دستهی طراحی تجربهی کاربری یا UX قرار میگیرند.
با مفاهیم UI و UX و تفاوت آنها به خوبی آشنا شوید (با مثالهای ساده)
میتوان UX را مانند چتری دانست که یکی از بخشهای آن مربوط به UI یا طراحی ظاهری یک محصول میباشد.
طراحی تجربهی کاربری را میتوان در 6 بخش اصلی دستهبندی کرد، که عبارتند از:
محتوای مناسب و کاربردی: دلیل اصلی استفاده کاربر از یک برنامه یا وبسایت دسترسی به محتوای مورد نیازش میباشد، بنابراین یکی از مهمترین مراحل برای ساخت یک تجربهی کاربری عالی ارائه محتوای کاربردی و مناسب به کاربر است.
معتبر بودن محتوا: مورد بعدی که باعث اعتماد کاربر به یک محصول یا سرویس میشود، ارائهی محتوای معتبر به وی میباشد، به عنوان مثال در یک متن خبری حتما منبع رسمی خبر را ذکر کنید و همچنین از نوشتن متن به صورت عامیانه جدا خودداری کنید.
استفادهی ساده: یک محصول باید به سادگی به دست مخاطب برسد و مخاطب بتواند به سادگی از محصول یا سرویس مورد نظر خود استفاده کند، بازاریابی صحیح برای یک سرویس و کاربرد آسان برای مخاطب میتواند به طور چشمگیری تجربهی کاربری محصول را بهبود ببخشد.
کاربرد پذیری: سرویس شما هرچقدر هم باکیفیت، معتبر و زیبا باشد ولی کاربر نتواند به صورت کاربردی از آن استفاده کند تجربهی خوبی در کاربر ایجاد نخواهد کرد، قرارگیری صحیح دکمهها، دستهبندی و ساختار مناسب برای محتوا و قالببندی وبسایت یا برنامه، نامگذاری مناسب و صحیح صفحات و… میتواند احساس خوبی را به کاربر منتقل کرده و در نتیجه تجربهی کاربری خوبی را در وی ایجاد کند.
طراحی ظاهری: طراحی زیبا و دلنواز صفحات، رنگبندی صحیح، آراستگی ظاهری، استفاده از فونتهای مناسب، بهرهگیری از المان و تصاویر گرافیکی زیبا و با کیفیت، میتواند تجربهی بسیار خوبی را در کاربر ایجاد کنید، همانطور که متوجه شدهاید این موارد را میتوان UI نامید، بنابراین میتوان فهمید که UI زیر مجموعهای از UX میباشد.
در دسترس بودن: محصول یا سرویس شما باید همیشه در دسترس باشد، به عنوان مثال اگر کاربر هنگام مراجعه به یک وبسایت با خطای 404 و یا خطای سرور مواجه شود، احساس نامناسبی به وی منتقل خواهد شد، علاوه بر اینها، در دسترس بودن محتوا، سرعت بارگذاری مناسب، و نمایش صحیح سایت در مرورگرهای مختلف نیز در تجربهی کاربری تاثیر قابل توجهی خواهند گذاشت.
در نهایت UI و UX چه تفاوتی با هم دارند!
حتما تا به حال با تفاوتهای UI و UX آشنا شدهاید، در ادامه به طور خلاصه به بررسی این مورد میپردازیم:
UI و UX دو مفهومی هستند که معمولا توسط افراد تازهکار با هم اشتباه گرفته میشوند، همانطور که پیشتر گفتیم واژهی UI مخفف User Interface و به معنای رابط کاربری و واژهی UX مختصر شدهی عبارت User Experience و به معنای تجربهی کاربری میباشد.
UI به مطالعهی طراحی ظاهری محصول میپردازد، در حال UX جنبههای عاطفی و احساسات کاربر را نیز در بر میگیرد، بنابراین UI یکی از زیر مجموعههای UX است.
UI و UX به طور قابل توجهی مکمل یکدیگر هستند و برای ایجاد یک تجربهی کاربری دلنشین و لذتبخش وجود هر دوی آنها لازم و ضروری بوده و نمیتوان یکی را بر دیگری ارجح دانست.
طراحی UI یک محصول بیشتر به سلیقهی طراح بستگی دارد، در حالی که در طراحی UX باید سلیقه، عواطف و فرهنگ کاربران را در نظر گرفت.
کاربر پسند بودن رابط کاربری به چه معناست؟
یک طراحی کاربر پسند (User Friendly) یعنی تمام اجزا و المانهای سایت یا برنامه به خوبی کار کرده، در جای صحیح خود قرار داشته باشند و همچنین کاربر بتواند به راحتی با طرح ارتباط برقرار کرده و نیاز او هنگام کار با سیستم فراهم شود.
به عنوان مثال اگر بخواهیم یک سایت را باهم بررسی کنیم، مواردی مانند واکنشگرا (ریسپانسیو) بودن سایت، محتوای با کیفیت، طراحی زیبا و چشمنواز، سرعت بارگذاری بالا، سادگی و شلوغ نبودن طرح از جمله مواردی هستند که میتوانند از ویژگیهای یک سایت کاربر پسند به شمار بیایند.
علاوهبر آن پیروی از اصول روانشناسی در طراحی یک سایت نیز میتواند به صورت مستقیم بر تجربهی کاربری یک وبسایت تاثیرگذار باشد؛ به زبان ساده میتوان گفت، محصول کاربر پسند آن چیزیست که کاربر واقعا به آن علاقهمند شده و از کار کردن با آن لذت ببرد.
با مفاهیم UI و UX و تفاوت آنها به خوبی آشنا شوید (با مثالهای ساده)
همانطوری که گفتیم یکی از مهمترین عواملی که در کاربر پسند بودن یک محصول یا خدمت نقش دارد، سادگی بصری و همچنین سادگی در کار با آن محصول است، به عنوان مثال فکر میکنید چرا موتور جستجوی گوگل در نهایت از یاهو پیشی گرفت و به انتخاب اول اکثر کاربران تبدیل شد؟ به نظر میرسد یکی از مهمترین عوامل موفقیت گوگل سادگی آن بود، در آن زمان که صفحهی نخست یاهو پر بود از لینکهای گوناگون و امکانات مختلف، صفحهی اصلی گوگل تنها از یک باکس جستجوی ساده تشکیل شده بود!
چگونه میتوان سایتی مطابق با اصول UI و UX ایجاد کرد؟
در یک کلام، به شما میگوییم کاربر باید بتواند خیلی راحت به آنچه میخواهد برسد، چه از نظر محتوا و چه از نظر ظاهر و طراحی رابط کاربری، در طراحی UX یک اصل مهم وجود دارد و آن این است:
کاربر اصلا نباید برای رسیدن به آنچه میخواهد فکر کند!
چیدمان و نحوهی قرارگیری المانهای سایت باید به گونهای باشد که کاربر بدون هیچ درنگی به نیاز خود برسد، از چیدمان منویهای سایت گرفته تا صفحات و محتوای داخلی، سرعت دسترسی، نمایش صحیح پیغامها، خطاها و… همهوهمه باید به بهترین شکل ممکن در اختیار او باشد.
نظر شما در اینباره چیست؟ محتوای این آموزش را یک محتوای کاربر پسند میدانید؟ چه نظری درباره ب م م آیتی دارید؟ به نظر شما اصول UI و UX در سایت رعایت شدهاست؟ دیدگاههای ارزشمند خود را در بخش نظرات همین پست با ما و سایر کاربران به اشتراک بگذارید.
رای اینکه توضیح دهیم UX یا همان User experience چیست از یک مثال بسیار ساده استفاده میکنیم.
User experience که معنی آن تجربه کاربری است به نحوه تعامل کاربر با یک محصول اشاره دارد. بهطور مثال وقتی میخواهیم در یک اتاق چراغی را روشن کنیم با یک کلید تعامل داریم. اینکه این سویچ یا کلید چطور طراحی شده باشد و مواردی از جمله رنگ، ابعاد و طرح آن چگونه باشد بر احساس ما بر نحوه تعامل با این محصول تأثیر میگذارد.
در دنیای طراحی دیجیتال نیز UX به هر چیزی که بر تعامل کاربر با یک محصول دیجیتال تأثیر میگذارد، اشاره دارد. مثلاً اینکه یک کاربر بهمحض ورود به یک وبسایت یا اپلیکیشن چطور با آن ارتباط برقرار کند، موارد موردنظر خود از جمله دکمه خرید، نوار اسکرول، دکمه هوم، بخش وبلاگ سایت را چگونه و با چه سرعت و میزان آسایشی پیدا کند و … به موضوع UX یا طراحی تجربه کاربری آن سایت یا نرم افزار مربوط میشود.
هنگامیکه افراد از محصول، سایت یا اپلیکیشنی استفاده میکنند، معمولاً تجربیات خود را بر اساس معیارهای زیر ارزیابی میکنند:
۱- ارزش یا Value : آیا این محصول یا سایت به من ارزش میدهد؟
۲- عملکرد یا Function: آیا این محصول یا سایت عملکرد مثبتی برای من دارد؟
۳- قابلیت استفاده آسان یا Usability: آیا این محصول یا سایت قابلیت استفاده آسان دارد؟
۴- برداشت کلی یا General impression : بهطورکلی آیا استفاده از این سایت یا محصول برای من خوشایند است یا خیر؟
بنابراین باید بگوییم UX همان چیزی است که باعث میشود کاربر پس از استفاده از سایت، اپلیکیشن یا محصول ما به تمام پرسشهای فوق پاسخ مثبت بدهد.
ux یا تجربه کاربری چیست
Ux desing چیست؟
در پاسخ به این پرسش که UX design یا طراحی تجربه کاربری چیست باید گفت:
UX design اصلاً مفهوم جدیدی نیست. این اصطلاح از اوایل دهه نود میلادی وجود داشته است و توسط دونالد نورمن هنگامیکه در اپل به عنوان دانشمند شناختی کار میکرد، مطرح شد.
دان نورمن به تمام جنبههای تجربه کاربر با یک محصول یا خدمات علاقه داشت. از جمله طراحی صنعتی ، گرافیک ، رابط کاربری و تعامل فیزیکی. برای دربر گرفتن همه عناصر مختلف که تعیین کننده احساس کاربر در هنگام تعامل با یک محصول است، وی اصطلاح “تجربه کاربر” یا همان UX را مطرح کرد. از آن زمان تاکنون طراحی UX مترادف شد با تجارت خوب؛ یعنی تنها آن دسته از محصولات و خدمات که تجربه کاربری خوب و خوشایند را به مخاطبان خود ارائه میدهند در بازار موفق خواهند شد.
آیا UX روی سئو تاثیر دارد؟
حال سوالی که اینجا پیش می آید این است که ux بر روی سئو تاثیر دارد؟ در فضای دیجیتال و در حوزه طراحی سایت نیز باید گفت سایتهایی که از UX خوب برخوردار باشند شانس بسیار بیشتری در کسب رتبه بهتر در گوگل خواهند داشت.
چرا که یک سایت با طراحی خوب است که کاربر را برای مدت طولانیتری در خود پاگیر میکند و گوگل نیز خیلی زود متوجه این حضور پررنگ، فعال و طولانی مدت کاربر در سایت شده و اینطور برداشت میکند که این سایت خدمات خوبی را به کاربر ارائه میکند که او را برای مدت طولانیتری در خود نگه داشته است. پس به آن رتبه بهتری اعطا میکند. بنابراین ابداً اثر غیر مستقیم Ux خوب روی سئوی سایت را نادیده نگیرید.
برای آشنایی بیشتر با سئو مقاله سئو چیست را مطالعه کنید.
تفاوت UX و UI چیست؟
طراحی UI و طراحی UX دو اصطلاح بسیار رایج در طراحی وب و برنامه هستند. علیرغم تفاوتهایی که این دو مفهوم با یکدیگر دارند، در یک اصطلاح واحد طراحی UI/UX در کنار هم قرار میگیرند. به همین سبب توضیح تفاوت بین UI و UX کار دشواری به نظر میرسد.
در مورد UI می توانید مقاله UI چیست را بخوانید.
اما اکنونکه شما میدانید طراحی تجربه کاربری چیست، بهتر میتوانید مفهوم UI را نیز درک کرده و به تفاوت این دو اصطلاح با هم پی ببرید. UI مخفف واژه user interface است.
این واژه به معنی طراحی رابط گرافیکی یک برنامه بوده و طیف وسیعی از مفاهیم و المانها را در برمیگیرد. این طیف وسیع شامل طراحی دکمههایی که کاربران روی آنها کلیک میکنند، متنی که روی آنها میخوانند، تصاویر، اسکرول بار، فیلدهای ورود متن و بقیه مواردی میشود که کاربر به هر نحوی در یک سایت با آنها تعامل دارد.
به این ترتیب میتوان این طور شرح داد که گرچه UX و UI به هم مرتبط هستند اما چند تفاوت کلیدی بین آنها وجود دارد.
اول اینکه UI بهطور خاص با دستگاههای دیجیتال و وبسایتها و توانایی مردم در استفاده از آنها سروکار دارد. این در حالی است که تجربه کاربر اصطلاحی است که بهطور گستردهتری با یک نام تجاری ، محصول یا خدمات ارتباط برقرار میکند. یعنی درحالیکه اصطلاح UX نیز اغلب درزمینهٔ دستگاهها یا وبسایتها استفاده میشود اما لزوماً محدود به محصولات دیجیتال یا سایتها نیست.
تفاوت دیگر بین UI وUX در این است که UX بیشتر تلاش میکند احساس شما در خصوص استفاده از یک محصول یا سایت خوشایند باشد، این در حالی است که همت UI معطوف به ظواهر امر و زیبایی آن میشود.
بهطور مثال ممکن است یک سایت از نظر ظاهری بسیار عالی به نظر برسد اما استفاده از آن برای کاربر دشوار باشد. در این حالت UI خوب عمل کرده است اما UX موفق ظاهر نشده و کاربر تجربه خوشایندی در استفاده از سایت به دست نمیآورد. البته این حالت به شکل برعکس نیز رخ خواهد داد. در واقع می توان گفت UX حول هدف و عملکرد محصول میچرخد، در حالی که UI بر کیفیت تعامل کاربر با محصول تمرکز میکند.
UX شامل مولفههایی مانند تحقیقات بازار و شناسایی نیازهای کاربر است، در حالی که UI دارای اجزای طراحی هنری بیشتری است که به ظاهر و احساس تجربه کاربر مربوط میشود.
UX بر مدیریت کلی پروژه از ایده پردازی تا توسعه و تحویل تمرکز میکند، در حالی که UI به طور خاص بر طراحی محصول نهایی تمرکز می کند.
تفاوت ui و ux
Ux designer کیست؟
کسی که موظف است برای یک سایت، اپلیکیشن یا محصول یک UX خوب طراحی کند، UX Designer است. طراحان UX باید مجموعه بسیار متنوعی از مهارتها را داشته باشند. آنها باید علاوه بر مهارتهای فنی و طراحی مانند قاببندی، نمونهسازی، تفسیر دادهها و بازخوردها، مهارتهای نرم دیگری نیز داشته باشند. سازگاری، ارتباط، همدلی، حل مسئله و کار گروهی همه مهارتهای نرم ضروری برای این افراد هستند.
دانش کسب و کار نیز در صنعت طراحی UX لازم است. مهم است که هم اهداف شرکت و هم نیازهای مخاطبان موردنظر را درک کرده و در هنگام ارائه راه حلهای طراحی آنها را با یکدیگر هماهنگ کنند.
نکته دیگر این است که طراحان UX ترجیح میدهند درمراحل اولیه طراحی و پیاده سازی یک سایت ظاهر شوند. چرا که برای ایجاد یک حس خوشایند از کار کردن با یک سایت در کاربر نیاز به تحقیقات گستردهای وجود دارد. طراحان UX باید رفتار کاربران را خوب بشناسند. در خصوص آنها به اندازه کافی تحقیق کنند. کل سفر کاربر روی سایت را از مسیرهای متفاوت پیش بینی کنند و تشخیص دهند که برای بهبود این سفر چه مسیرهایی باید پیش بینی و ترسیم شود. بعد از این مرحله است که یک طراح UI وارد عمل شده و به طراحیهای UX کار سر و شکل داده و آنها را پیاده سازی میکند.
چطور UX خوب را از UX بد چطور تشخیص دهیم؟
برای درک بهتر اینکه بدانیم نقش UX designer چیست و چطور این فرد یا تیم میتوانند طراحی یک تجربه کاربری خوب یا بد موفقیت یا شکست یک سایت یا نرم افزار را تعیین کنند، بهتر است چند مثال برای UX خوب و بد بزنیم.
تشخیص تجربه کاربری خوب از بد
به تصویر فوق نگاه کنید که دو شکل متفاوت از طراحی UX را نشان میدهد. گرچه به ظاهر المانهای هر دو یکی هستند و یک اطلاعات را به کاربر میدهند اما کاربر احساس خوشایندتر در کارکردن با اپلیکیشن سمت راستی دارد. چرا که در این مورد دکمههای next, cancel ,continue و حتی نوار اسکرول نیز به راحتی دردسترس کاربر بوده و او نیاز به تلاش و جستجوی بسیار برای پیداکردن این موارد ندارد. ضمن آن که قرار دادن چند تصویر گرافیکی ساده و تنظیم ابعاد آیکنها تجربه کاربری خوشایندتری برای افراد ایجاد میکند.
نمونه طراحی خوب ux
تصویر فوق نیز نشان میدهد که در یک سایت وجود یک UX design خوب در کنار یک UX design بد چطور ظاهر میشود. طراحی بدی که کاربر را در یک سایت مجبور میکند برای پرکردن یک فرم ساده چندین بار به صورت زیگراگی روی آن حرکت کند در کنار همان فرم با همان فیلدها و حرکت ساده از بالا به پایینی که ابدا کاربر را به دردسر نمیاندازد.
بازدید: