معنای UI و UX چیست؟ بررسی تفاوت این دو در طراحی


نویسنده:
دوشنبه 14 بهمن 1398
تفاوت UX و UI

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

UI‌ چیست؟

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

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

مثال‌هایی از UI

  • ظاهر منو چگونه است؟
  • رنگ دکمه‌ی جستجو با رنگ اصلی سایت هماهنگ باشد.
  • باکس مربوط به بنر‌ها تبلیغاتی چگونه طراحی شوند؟

    برای مطالعه بیشتر در زمینه ui، به مقاله ui چیست؟ مراجعه نمایید.

UX چیست؟‌

UX مخفف عبارت User Experience Design به معنای طراحی تجربه‌ی کاربری است. به احساسات و راحتی کاربر حین کار کردن با اجزای مختلف سایت گفته می‌شود و جوانب تعامل کاربر را با هر بخش در نظر می‌گیرد. اینکه وب‌سایت ما طوری طراحی شده باشد که هر بخش به راحتی در دسترس کاربران قرار بگیرد و برای کار کردن با هر قسمت آسودگی و راحتی کاربر در نظر گرفته شود اینها مسائلی از طراحی UX‌ هستند.

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

مثال‌هایی از UX

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

در ادامه‌ی مقاله با ارائه مثال بیشتر به توضیح این مفهوم می‌پردازیم.

چگونه یک طراح UX شویم؟


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

تفاوت UI و 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 مناسب می‌توانید نظر کاربر را جذب کرده و اهداف خود را در سایت به واقعیت برسانید.

دیدگاهتان را بنویسید

47 پاسخ به “معنای UI و UX چیست؟ بررسی تفاوت این دو در طراحی”

  1. سامان گفت:

    طراحی ui و ux کار طراح ui/ux هستش طراح گرافیک روی جلوه های گرافیکی کار میکنه جایگاه این طراح در تیم طراحی یک مجموعه متفاوته ولی در بعضی اوقات یک طراح میتونه هر دو تا مهارت رو داشته باشه

  2. ساناز گفت:

    طراحی ui و ux کار گرافیسته و فعال کردن، اعمال و ساخت این طراحی کار دوستان برنامه نویس و گروه کامپیوتر

  3. پارسا گفت:

    چه ساده و چه روان و صد البته پر و پیمان
    ممنون از شما

  4. سعید گفت:

    عالی بود ممنون

  5. خدیجه بشیری گفت:

    احسنت واقعااا عالی بود

  6. محمدرضا گفت:

    کاربردی و مفید بود.ممنون

  7. bahar گفت:

    خیلی خوب .ممنون که توضیح کوتاه و مفید دادید.

  8. محمد گفت:

    من که آخرش نفهمیدم چی شد !
    ساده‌تر بنویسیددقیقاً بگید چه فرقی دارن
    باز اون مثال‌های اخر بهتر بود از اول متن
    باتشکر

    • نگار گفت:

      خلاصه ی کلام. ui یعنی خوشگل طراحی کنی. ux یعنی موقعی که داری خوشگل طراحی میکنی حواست باشه که کاربردی هم باشه و صرفا فقط خوشگل نباشه

    • کریم کنعانی گفت:

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

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

  9. زهرا طهرانی گفت:

    سپاس از مطلب خوبتون

  10. Mathieo8 گفت:

    مطلب جالب و جامعی بود که در عین سادگی به طور کامل همه چی رو توضیح داد

  11. مهدی گفت:

    سلام درود برشما ..بسیار کاربردی و مفید بود ممنون از شما..

  12. محسن گفت:

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

  13. سعید گفت:

    بسیار عالی، گویا و شفاف…! 🙂

  14. نگین گفت:

    سپاااس
    توضیحات عالی و اصطلاحا مختصر و مفیـــد بود .

  15. rostami گفت:

    ممنون بابت توضیحاتتون

  16. تابش گفت:

    وقتتون بخیر.مطالب بسیار عالی بود. توضیحات بیار مفهومی بود.سپاس

  17. عبدالهی گفت:

    سلتم. متشکرم از مقاله ی خوبتون. خیلی کامل و جامع و عالی تفاوت ui و ux را بیان کردید

  18. ایمان گفت:

    ممنون برای powerpoint دانشگاه استفاده کردم با عنوان طراحی سایت در adobe xd و قوانین ان

  19. آتوسا علی پور گفت:

    خیلی عالی بود ممنون

  20. Ali گفت:

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

دیدگاهتان را بنویسید