تفاوت UI و UX چیست؟ مقایسه رابط کاربری و تجربه کاربری

حتماً براتون پیش اومده که یه جایی بشنوید «UI این طرح خوبه ولی UXش خوب نیست» و ته دلتون بگید: خب… یعنی چی دقیقاً؟ این دو تا کلمه اونقدر کنار هم استفاده می‌شن که خیلی‌ها فکر می‌کنن یه چیزن. ولی نه، دو تا مفهوم جدان که البته حسابی به هم گره خوردن.

تو این مقاله می‌خوام خیلی خودمونی براتون توضیح بدم UI چیه، UX چیه، فرقشون کجاست و چرا باید هر دوشون رو جدی بگیرید. با مثال‌های واقعی هم جلو می‌ریم که کامل جا بیفته.

UI چیه؟

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

بذارید ملموسش کنم. فرض کنید وارد یه پنل مدیریتی می‌شید:

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

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

پس خلاصه‌ش این می‌شه: UI چیزیه که با چشم می‌بینید و بر اساسش می‌گید «چه پلتفرم زیبایی!» یا «چه رنگ‌بندی چشم‌نوازی داره، رنگاش به هم می‌خونه».

UX چیه؟

UX مخفف User Experience یا تجربه‌ی کاربری هست. اینجا دیگه بحث دیدن نیست، بحث حس کردنه.

وقتی دارید از یه پلتفرم استفاده می‌کنید، از خودتون بپرسید:

• چه حسی دارم نسبت به کار کردن با این سیستم؟
• چقدر راحت می‌تونم کارم رو انجام بدم؟
• دسترسی‌پذیریش چطوره؟

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

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

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

یه مثال: بدن انسان

اگه UI Vs UX رو تو گوگل سرچ کنید و برید سراغ تصاویر، مثال‌های جالبی می‌بینید. یکیش که خیلی به دلم نشست، مثال بدن انسانه:

• UI بدن ما: رنگ پوستمون، رنگ چشممون، رنگ و مدل موهامون. همون ویژوال دیزاین و رنگ‌بندی‌ای که ظاهرمون رو می‌سازه.
• UX بدن ما: اسکلت‌بندی و استخون‌بندی بدن. همون وایرفریم و ساختاری که همه چیز روش سواره و باعث می‌شه بدن اصلاً کار کنه.

ظاهر بدون اسکلت سرپا نمی‌مونه، اسکلت بدون ظاهر هم چیزی نیست که کسی دلش بخواد ببینه. این دقیقاً رابطه‌ی UI و UXـه.

تو پروژه‌ی واقعی این‌ها کجان؟

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

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

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

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

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

جایی که UI و UX به هم می‌رسن

بذارید یه مثال بزنم که ببینید چطور یه جزئیات ریز، کل حس یه صفحه رو عوض می‌کنه.

فرض کنید تو یه صفحه ۶ تا آیتم کنار هم دارید. حالا اگه فاصله‌ی بین بعضی‌هاشون کمتر از بقیه باشه و فاصله‌گذاری‌ها ناهماهنگ باشن، چه اتفاقی می‌افته؟ نگاه می‌کنید و می‌گید: «نمی‌دونم چرا، ولی این صفحه اون چیزی که می‌خوام نیست. یه جاییش می‌لنگه، تر و تمیز درنمیاد.» این یعنی اون صفحه UI و UX خوبی نداره. فواصل، رنگ‌بندی‌ها، انتخاب رنگ‌ها، همه‌ی این‌ها روی حس نهایی صفحه تأثیر دارن.

یه مثال دقیق‌تر: فرض کنید یه تیتر دارید به اسم «قالب وردپرس» و زیرش لیست قالب‌هاست. حالا اگه فاصله‌ی این تیتر تا سکشن بالاییش کم باشه و تا سکشن پایینیش (که در واقع مال خودشه) زیاد باشه، چی می‌شه؟ کاربر تو نگاه اول فکر می‌کنه این تیتر مربوط به بخش بالاییه!

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

و اصلاً بحث حرفه‌ای به نظر رسیدن هم که کنار بذاریم، کاربری که می‌خواد بیاد تو سایتتون خرید کنه، باید یه درک درست از صفحه داشته باشه. شما یه فضایی دارید و باید تو اون فضا یه مفهومی به مخاطبتون برسونید: «من یه بخشی دارم به اسم قالب وردپرس و اینجا لیست قالب‌هاست.» این درک باید برای هر مدل کاربری راحت باشه. چه کاربر ۱۲ ساله، چه ۶۰ ساله، چه کسی که خیلی تیزه، چه کسی که حوصله‌ی فکر کردن نداره. سایتتون باید برای همه‌ی این آدم‌ها از نظر UI و UX حرفه‌ای کار کنه.

UX فقط مال سایت نیست!

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

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

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

حالا که هوش مصنوعی اومده چی؟

الان با اومدن هوش مصنوعی، این سؤال برای خیلی‌ها پیش اومده که «چطور با AI یه UI و UX بهتر برای سایتم طراحی کنم؟»

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

جمع‌بندی

اگه بخوام همه چیز رو تو چند خط جمع کنم:

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

پس دفعه‌ی بعد که یکی گفت «UI این طرح خوبه ولی UXش نه»، دقیقاً می‌دونید داره از چی حرف می‌زنه: ظاهرش قشنگه، ولی کار کردن باهاش حس خوبی نمی‌ده.

تو هر کاری که دارید انجام می‌دید، هم UI و هم UX می‌تونن فروشتون رو بیشتر کنن و رضایت کاربر از محصولتون رو بالا ببرن. پس جدی بگیریدشون!

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

شاد و سربلند باشید.

سوالات پرتکرار

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

تیم تولید محتوا

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