در جهان دیجیتال امروزی، خلاقیت و تکنیک در طراحی به شدت اهمیّت پیدا کرده است و در نتیجه دو عبارت UI (رابط کاربری) و UX (تجربه کاربری) بیش از پیش مورد استفاده قرار میگیرند. با این وجود هنوز هم معنای این دو عبارت اختصاری برای بسیاری به درستی جا نیافتاده است و در نتیجه بسیار پیش میآید که با بیدقتی و در جای نادرست استفاده شوند. این شد که تصمیم گرفتیم به بررسی معنای دقیق هر یک از این عبارت بپردازیم و ارتباط و تفاوتهای میان آنها را مشخص کنیم تا استفاده هر یک برای خوانندگان نوین روشنتر شود. پس از شما دعوت میکنیم تا با ما همراه باشید.
تجربه کاربری با رابط کاربری متفاوت است (UI != UX)
بله، نیازی به گفتن این موضوع نبود. اما تفاوت این دو دقیقاً در چیست؟ بگذارید اول یک توضیح ساده و سریع بدهیم مخصوص کسانی که حوصلۀ کمتری دارند:
رابط کاربری یا واسط کاربری به مجموعه صفحات، تصاویر و المانهای بصری – مثل دکمهها و آیکونها – گفته میشود که کاربر برای تعامل با یک دستگاه یا برنامه از آنها استفاده میکند.
منظور از تجربه کاربری هم آن تجربه و حسی است که کاربر در هنگام تعامل با بخشهای مختلف از محصولات و سرویسهای یک شرکت دارد که شامل نحوه تعامل او با رابط شماست.
به تصویر زیر دقت کنید:
محتوا دلیلی است که کاربر به وبسایت یا برنامۀ شما سر میزند و با آن تعامل برقرار میکند. رابط کاربری مجموعه ابزارهای تعاملی است که کاربر برای تعامل با این محتوا از آنها استفاده میکند. تجربه کاربری هم به مصرف این محتوا کار دارد. اینکه مصرف آن تا حد ممکن برای کاربر ساده باشد و او با حس خوبی شما را ترک گوید.
اینفوگرافیک: تفاوت میان UI و UX
فکر میکنم با نگاه کردن به بشقاب غذای زیر بتوانید بهتر متوجه تفاوتهای طراحی رابط کاربری و تجربه کاربری بشوید:
همانطور که میبینید، برای شروع ما تنها مواد اولیه داریم که همان محتوا است. حال باید این محتوا را به نحوی در اختیار کاربر خود بگذاریم. اینجاست که طراح تجربه کاربری وارد معادله میشود. او درباره مشتریان تحقیق خواهد کرد تا نیازهای آنها را بشناسد. سپس مشخص خواهد کرد که معماری صفحات، نقشه سایت و المانهای مختلف به چه شکلی خواهند آمد. بعد کار طراح رابط کاربری شروع خواهد شد. او این طرح اولیه را برخواهد داشت و آن را با واقعیّت یکی میکند. که یعنی تمام مسئولیتهای طراحی، انتخاب رنگ و ... به عهده او خواهد بود.
دنبال یه کار پر درآمد از اینترنتی؟
برای مشاوره رایگان، همین الان با ما تماس بگیرید.
مسئولیتهای طراحان UX و UI
خب همانطور که متوجه شدید، هر یک از طراحان UX و UI مسئولیتهای مشخصی را در یک تیم طراحی به عهده دارند. اما شاید همچنان برایتان مبهم باشد که نقش هر یک از طراحان UX و UI در هنگام طراحی سایت یا یک برنامۀ گوشی دقیقاً چیست. پس بد نیست که کمی بیشتر وارد جزئیات بشویم و مسئولیتهای هر یک را با جزئیات بیشتری بررسی کنیم:
طراحی تجربه کاربری
وظیفۀ یک طراح تجربه کاربری این است که آنالیز و منطق را به فرآیند طراحی بیفزاید. سیستمها، ساختارها و مسیرهایی که کاربر استفاده میکند توسط او طراحی میشود. برای اینکه طراحی بر حسب نیاز کاربر شکل گیرد، طراح تجربه کاربری باید به این نگاه کند که او به دنبال چیست و بهترین راه پاسخ گفتن به این نیاز او چیست. مسیرهای یک سایت – اینکه کاربر چگونه یک مطلب را میخواند، لینکها و دکمهها در کدام قسمتها قرار دارند و کاربر چگونه میتواند اطلاعات مورد نیاز خود را مییابند – همه بخشی از طراحی تجربه کاربری هستند.
در فضای اینترنت، طراحی تجربه کاربری علاوه بر موارد بالا، شامل بهینهسازی برای موتورهای جستجو (SEO)، در نظر گرفتن محدودیتهای مرورگرها و دیگر ویژگیهای منحصر به وب نیز میشود.
حتما بخوانید: تکرار، نگهداری و رشد محتواآنچه طراح تجربه کاربری ارائه میدهد: نقشه سایت، وایرفریمها (طرحی از چیدمان صفحه) و نمونههای اولیه
آن ابزاری که در طراحی تجربه کاربری استفاده میشود: تحقیق، ابزارهای تحلیلگر و نمودارها (دیاگرام)
تجربه کاربری در عمل: در انتهای این مطلب، شما میتوانید چندین مسیر مختلف را طی کنید: یک مطلب مرتبط را بخوانید، به سراغ مطالب برگزیدۀ وبلاگ ما بروید یا آنکه در مورد کار ما بیشتر بدانید. این تجربه کاربری است که مسیرهای مذکور را برای شما مشخص کرده است.
طراحی رابط کاربری
در طراحی رابط کاربری بحث بر سر رنگ و رو دادن به ساختار و محتوا است – یعنی آنچه که کاربر در حین تجربۀ خود خواهد دید. در این مرحله است که برندیگ، رنگها، تایپوگرافی، گرافیکها، عکاسی و دیگر المانهای بصری مطرح میشوند. رابط کاربری بر روی نیاز برند (نه کاربر) تمرکز دارد و تلاش میکند آنچه را ارائه دهد که از نظر بصری مناسب با زمینۀ کاری این برند است.
طراحان خوب رابط کاربری تمام محدودیتهای کدنویسی، توسعه و همچنین زمان بارگذاری یک صفحه را در هنگام طراحی مد نظر قرار میدهند.
آنچه طراح رابط کاربری ارائه میدهد: طراحی کاشیها (Style Tiles)، موکاپ صفحه (طرح کلی که در آن تمامی جزئیات مشخص میشود)
آن ابزاری که در طراحی رابط کاربری استفاده میشود: نمونه رنگها، تایپوگرافی، عکاسی، نرمافزارهای گرافیک
رابط کاربری در عمل: وقتی که یک صفحه میبینید که در آن از یک رنگ آبی خنک استفاده شده است، نوشتهها واضح هستند و تصاویر بسیار خوبی به کار رفته که باعث میشود حس کنید مشغول سفر هستید، در واقع مشغول تماشای یک رابط کاربری خوب هستید. ایجاد این رابط کاربری خوب نیاز به تخصص و مهارتهایی دارد که در این مقاله تا حدودی با آنها آشنا شدید.
اگر قدم بعدی شما یادگیری طراحی رابط کاربری است ما یک دورۀ آموزشی آماده کردهایم. دورۀ آموزش طراحی UI متمرکز بر هر دو جنبه مورد نیاز طراحان است؛ هم اصول و مفاهیم طراحی را یاد میگیرید و هم مهارت کار با نرمافزار Adobe XD را کسب میکنید. توضیحات کاملتر را در صفحۀ آن بخوانید.
نتیجهگیری
میتوان گفت که در نهایت رابط کاربری (UI) بخشی از تجربه کاربری (UX) محسوب میشود و البته، بخش بسیار مهمی از آن هم هست. اما تنها بخش آن نیست. از طرف دیگر UX یک مفهوم بسیار کلی است و مسیر را برای UI مشخص میکند. اما در نهایت هر یک یک هویت منحصربفرد برای خود دارند و UX به هیچوجه با UI هم معنی نیست. درست است که این دو عبارت بسیار به هم نزدیک هستند، اما نمیتوان آنها را به جای یکدیگر استفاده کرد. بلکه باید از هر یک به همراه دیگری صحبت کرد، البته به شرط آنکه هر دو به درستی درک شوند و در جای مناسب استفاده شوند.
در یک طراحی خوب باید طراحی تجربه کاربری و رابط کاربری هر دو به بهترین نحو انجام شود و در نهایت به درستی با هم ادغام گردند. این یعنی لازم است که طراحان UX و UI یک همکاری نزدیک داشته باشند تا کار هر دو طراح تا جای ممکن ساده شود و آنها بتوانند محصول نهایی را به بهترین شکل تولید کنند. پس یک طراح رابط کاربری خوب حتماً باید طراحی تجربه کاربری را درک کند و اهمیّت آن را بشناسد و بالعکس. در مطالب بعدی سعی میکنیم بیشتر به بررسی هر یک از این دو بپردازیم، وظایف آنها را روشنتر کنیم و راهکارهای مختلفی را برای بهبود هر یک ارائه دهیم.
دنبال متخصص دیجیتال مارکتینگی؟
بهترین متخصصها رو در تمام زمینهها از بین دانشجوهای نوین استخدام کن.
همراه با رزومه، اطلاعات
تماس و نمونهکار
سارا پورشریفی
درود بر شما و سپاس برای محتوی خوب که مفهوم و با ارزش است.
هانا فدایی
خیلی عالی بود واقعا توضیحات کاملا اصولی و درست و در عین حال کاملا واضح و مختص و ومفید و گویا نوشته شده بود ممنون از شما
حامد رضوی
خیلی ممنونیم از لطفت هانا جان، خوشحالیم که دوست داشتی و امیدواریم در ادامه همراهمون بمونی
حمیدرضا
سلام بسیار مفید بود ممنونم
نیلوفر بیکی
یک مقاله عالی برای درک بهتر تفاوت این دو مقوله
مرضیه اقبالی
خوشحالیم براتون مفید بوده
ثمر طالبی
بالاخره فرق این دو تا رو فهمیدم 🙂
محمد جواد عبدی
خوب بود سعید
مینا شهانی
سلام آقای عبادی
خوشحالیم که مقاله براتون مفید بوده
هنگامه تقوا
بابت توضیحات شیوا و رسا و کاملتان یک دنیا سپاسگزارم
حامد رضوی
خوشحالیم که این مطلب رو دوست داشتید خانم تقوا
محمد علی عباسی نژاد
سلام
واقعاً عالی بود. فقط یه سوال.
من می خوام فری لنسر باشم و انفرادی در سایتهایی مثه انجام میدم کار کنم، امکانش هست که هم طراح UI خوبی باشم و هم طراح UX خوبی؟
حامد رضوی
سلام جناب عباسی نژاد
قطعاً این موضوع ممکنه. هر چند بستگی به تواناییها و وقتی هم که شما میگذارید، داره. صادقانه بگم، UX یک فرآیند هست که نیاز به تست، فکر و عمیق شدن داره. مساله اساسیاش هم ارائه سادهترین مسیرها برای به هدف رسیدن کاربر هست. UI هم وقتی بحث طراحی خوب هست، دنبال دادن یک محیط بصری قابل فهم با نشونههای درست هست که برای متناسب و زیبا هم باشه. این 2 توانایی قطعاً میتونن کنار هم بدست بیان. اما به شرط اینکه شما هم مرد راه باشید 🙂
به نظر ما در درجه اول روی UX مهارت و تجربه پیدا کنید. وقتی که این مهارت به اندازه کافی توسعه پیدا کرد، مهارت UI هم به اون اضافه کنید.
حسین مظهری
فقط و فقط این مقاله میتونه یه مبتدی رو قانع کنه که UI و UX چیه
دمتون گرم
سیدمحمود
بسیار عالی بود اما یک سوالی که پیش میاد، اینه که الان که اکثر جستجوها از طریق موبایل انجام می شود ایا سرمایه گذاری در رابط کاربری دسکتاپ اهمت دارد یا باید بتوانیم در تجربه کاربری با موبایل ؟
در یکی از نظرات نوشته شده بود که frontend با ui تفاوت دارد امکانش هست لطفا در این زمینه نیز بیشتر توضیح دهید؟
محمد
این مقاله هم مثل تموم مقاله هاتون عالیه. ممنون.
سوالی که برام پیش اومده اینه که زیاد میبینم برای استخدام عنوان میکنن که طراح رابط کاربری مسلط به html و css و غیره. این درسته؟ یا در واقع فقط طراحی مثلا psd وظیفه طراح هست؟
سهیل رهبری
سلام محمد جان
توی شرکتهای بزرگتر و تخصصیتر، معمولاً اینها تخصصهای جدا هستن. مثلاً در شرکت ما چون تخصصی روی بحث طراحی سایت کار میکنیم و سفارش زیاد هست، طراح ux، ui و کدنویس همه جدا هستن. اما در شرکتهای کوچیکتر و غیر تخصصیتر، کاملاً طبیعی هست که انتظار بیشتری از نیروی متخصص بره. اما نکته مثبت این مساله هم ببینید، اینکه میزان یادگیری بیشتر هست.
کوتاه کننده لینک گوگل
سلام ممنون مطلب عالی بود با تشکر
mohammad
آخه شما چقدر خوبید
حس میکنم یه خانواده ایم
خدایی دلم نیومد براتون کامنت نزارم
فک کنم نصف ترافیک یه ماه گزشتتون به خاطر من بوده (:
همه مطالب رو خوندم حالا شانس برای این مقاله کامنت گزاشتم ولی این رو به همه مقالات ارجاع بدین
کلی چیز یادگرفتم دمتون گرم و ایشالله هرچی میخواید بدست بیارید
i love yoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooou
سهیل رهبری
سلام محمد جان… فقط می تونم بگم ممنون از لطفت 🙂
جواد
با سلام . متاسفانه این روزها به UI ، Frontend میگن . در حالبکه اصلا اینطور نیست و این دو باهم کاملا متفاوت هستش . و همچنین به UX ، Backend میگن . کاش که روزی برسه همه این چهار مقوله رو به درستی بشناسن . و درک کنن .
babakfp
یا خود خدا !
سهیل رهبری
🙂 بابک جان، مشخص نیست که از نظرت مقاله خوب بوده یا بد بوده. اما با فرض اینکه این یک نظر مثبته، ممنونیم.
سهیل رهبری
🙂 بابک جان، مشخص نیست که از نظرت مقاله خوب بوده یا بد بوده. اما با فرض اینکه این یک نظر مثبته، ممنونیم.
سهیل رهبری
سلام جواد جان… قطعاً با صحبت و نوشتن در مورد تفاوت این موارد، میشه کم کم افراد فعال در زمینه دیجیتال رو نسبت به مفهوم هر یک از اونها آگاه کرد. ما هم سعی کردیم نقش هر چند کوچک خودمون رو در این مسیر داشته باشیم.
hossein
با سلام و تشکر از مطلب بسیار مفید و ارزشمندتون
میخواستم اگه لطف کنید ، چند وبسایت به من معرفی کنید که در واقع دارای UX ضعیف هستند یا UX قوی ، تا با مثال عینی این مطلب رو درک کنیم.
سهیل رهبری
سلام حسین جان
همانطور که احتمالاً متوجه شدی، یکی از دستههای اصلی سایت ما تجربه کاربری (UX) هست و قصد ما اینه که به طور کاملاً تخصصی به این موضوع بپردازیم. شما از طریق این دسته میتوانید به راهکارهای مختلف بهینهسازی UX (با ذکر مثال) دسترسی داشته باشید. در آینده نیز، بیشتر به خود مبحث UX، روشها و ابزارهای آن میپردازیم.
اینها مطالبی از وبلاگ ماست که پیشنهاد میکنم حتماً در این زمینه مطالعه کنی:
* 10 تکنیک تجربه کاربری برای متقاعدسازی مشتری
* 14 راهکار برای بهینهسازی فرم عضویت (یا همان ثبت نام) (با ذکر مثال)
* 10 روش بهینهسازی فرم ورود (sign in) وب سایت (با ذکر مثال)
* پارادوکس انتخاب: گزینههای کمتر یعنی کاربران بیشتر (با ذکر مثال)
در مورد سوالت هم، فکر میکنم یکی از بهترین مثالها سایت گوگل باشه. تو آخرین مطلبی که پیشنهاد دادم، در مورد این حرف زدیم که وقتی شما وارد صفحه اصلی گوگل میشی، فقط یک تکست فیلد میبینی و چند تا دکمه. همین! گوگل هیچ چیز اضافی به شما ارائه نمیده. البته این موضوع فقط در مورد صفحه اول گوگل نیست. روند کار با تمام امکانات مختلف گوگل آنقدر روون و بهینه هست که کاربر اصلاً متوجه مسیری که طی میکنه نیست و به مشکلی نمیخوره.
حالا شما این رو میتونی با خیلی از سایتهای فارسی مقایسه کنی که با دستهبندیها الکی و مخفی کردن (معمولاً غیر عمدی) اطلاعات مهم، کاربر رو به کل گیج میکنن. برای مثال، من همین امروز داشتم جدولهای اینترنت پر سرعت مخابرات رو میدیدم و انقدر پیچیده و در هم بر هم بود که واقعاً سخت تونستم متوجه بشم موضوع از چه قراره. اما بعد به سایت پارس آنلاین سر زدم و همون ابتدای صفحه، سه گزینه به من پیشنهاد شده بود و بعد هم، سایر پیشنهادها به صورت مرتب آورده شده بود. البته خود پارس آنلاین هم یک اشکال بزرگ داشت: ویژگیهای پلنهای مختلف در حد چند کلمه آورده شده بود و توضیحات کامل به درستی ارائه نشده بود. که در نتیجه مجبور شدم با این شرکت تماس بگیرم. (همونطور که تو یکی دیگه از مطالب خودم گفتم، ما باید اطلاعات رو به کاملترین و سادهترین شکل ممکن در اختیار کاربر سایتمون قرار بدیم.)
در کل اگر بخوام بگم، چیزی که مهمه بهش دقت کنیم، اینه که UX خوب یعنی ما در مورد مخاطب سایتمون تحقیق کنیم، حتی خودمون رو جای اون بزاریم و ببینیم که به چه چیزهایی نیاز داره و خواستههاش چی هستن. بعد بر این اساس بیایم مهمترین امکانات و اطلاعات رو مشخص کنیم و به راحتترین شکل ممکن اونها رو در دسترس کاربر بزاریم. البته، در عین حال باید به فکر کاربرهایی هم باشیم که اطلاعات و امکانات بیشتر میخوان و یک مسیر ساده فراهم کنیم تا اونها به چیزی که میخوان دسترسی پیدا کنن.
امیدوارم صحبتهای من به شما کمک کرده باشه.
تا وقتی دیگر