طراحی رابط کاربری وب UI/UX

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

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

UI مخفف User Interface و به معنای رابط کاربری است که به هر چیزی که در صفحه نمایش داده می شود گفته می شود که شامل تصاویر، متن ها، دیاگرام ها، ماژولها، جداول ، ویدئوها و همچنین رنگ و مکان آن ها می باشد. در واقع UI ظاهر اپلیکیشن / وب سایت می باشد که کاربر با آن در ارتباط است ، طراحان UI بر روی نحوه ارائه محصول کار می کنند در حالی که طراحان UX بر روی تجربه کلی کاربر (ظاهر وب سایت ، عملکرد ، کارایی ، سهولت و … ) نظارت دارند و در حقیقت رابط کاربری بخشی از تجربه کاری می باشد.

UX چیست؟

User Experience – UX شامل رفتار، حالت و احساسات کاربر در مورد استفاده از یک محصول و یا سیستم خاص گفته می شود. تجربه کاربر شامل جنبه های عملی، تجربی، موثر ، معنی دار و جنبه های با ارزش اثر متقابل انسان و کامپیوتر و محصول می باشد، که شامل درک کاربر از جنبه های مختلف سیستم شامل کاربرد، سادگی در استفاده و بهره وری می باشد. بر اساس تعریف ISO عنوان user experience شامل کلیه عواطف، اعتقادات، مزیت ها، پاسخ های فیزیکی و روانی، رفتارها و اجراها قبل از زمان استفاده، در زمان استفاده و بعد از آن اطلاق می گردد.

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

UI چیست؟

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

تفاوت بین UI و UX

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

UI مخفف User Interface می باشد که در صنعت نرم افزار به هر چیزی که در صفحه نمایش داده می شود گفته می شود که شامل تصاویر، متن ها، دیاگرام ها، ماژولها، جداول ، ویدئوها و همچنین رنگ ، سایر و مکان آن ها می باشد.

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

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

5 ابزار طراحی UI و UX یا طراحی رابط کاربری و تجربه کاربری

اسکچ

اسکچ (sketch) به‌عنوان یک ابزار طراحی تجربه کاربری و رابط کاربری برای اکثر طراحان وب جایگزین فتوشاپ شده است. ما با آنچه که کاملاواضح است بحث را شروع می‌کنیم. بله ما در جریانیم که همه از ابزار طراحی UI وکتور کدینگ بوهمین اسکچ چیزهایی شنیده اید اما به‌نظر می‌رسد که طراحان وب زیادی هنوز برای طراحی UX و UI از فتوشاپ استفاده می‌کنند و به آن اعتماد دارند ( و این علی‌رغم انتشار نسخه ادوب XD است که یک ابزار نمونه‌سازی و قاب‌مانند می‌باشد، یکی از افزونه‌های جدیدتری از Creative Cloud )

روری بری مدیر سوپرب در سال 2017 تصمیم به استفاده از اسکچ گرفت و اکنون به‌شدت آن را توصیه می‌کند. به گفته او ” من ده سال به‌عنوان کاربری بودم که از فتوشاپ استفاده می‌کردم و لذا تغییر و یادگیری یک چیز جدید برایم بسیار سخت بود اما بعد از اولین روز استفاده از اسکچ دیگر دوست نداشتم از فتوشاپ استفاده کنم و کاملا همه چیز وارونه شد”.

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

طراح افینیتی

طراح افینیتی (Affinity tools) در آیپاد و دسکتاپ عملکردی قوی دارد.

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

فلیر

فلیر ( Flare ) یک ابزار جدید برای طراحی و انیمه‌سازی وکتور آرت است.

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

اسکووش

این ابزار جدید گوگل به نام ( squoosh ) امکان فشرده‌سازی تصویر را  تا یک سطح مناسب ساده می‌دهد.

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

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

فایرفاکس ریلیتی

فایرفاکس ریلیتی ( FireFox Reality ) یک بروز جدید به خصوص برای دستگاه‌های VR است.

اگر در webVR کار می‌کنید قطعا دوست دارید که فایرفاکس ریلیتی را بررسی کنید، یک بروزر جدید برای دستگاه‌هایی با واقعیت مجازی همانند  وایوپورت، اوکلس و گوگل دی دریم.

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

مراحل طراحی رابط کاربری

  1. مشاوره حضوری یا تلفنی و بررسی پروژه و نیاز سنجی
  2. عقد قرارداد و پیش پرداخت
  3. ارسال اطلاعات مورد نیاز پروژه توسط مشتری و انتخاب رنگ بندی سازمانی
  4. ارائه اتود اولیه UI به مشتری
  5. اعلام و اعمال تغییرات مورد نظر
  6. ارسال تصویر طرح اصلاح شده به مشتری و نهایی سازی طرح
  7. پیاده سازی رابط کاربری
  8. تحویل فایل های مربوط به رابط کاربری به مشتری و تسویه حساب

در پایان

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