طراحی رابط کاربری یا UI چیست ؟

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

رابط کاربری یا UI چیست ؟

مهمترین ویژگی هر محصول، قابل استفاده بودن آن است. مثلا وقتی می‌خواهید یک در را باز کنید از دستگیره استفاده می‌کنید. بدون دستگیره در باز و بسته نمی‌شود و به همین دلیل قابلیت استفاده ندارد.

وقتی می‌خواهید از یک چاقو استفاده کنید، دسته آن را می‌گیرید. بدون دسته، مجبور بودید تیغه چاقو را با دست بگیرید که هم خطرناک است و هم استفاده از آن راحت نیست.

در حقیقت هر چیزی که باعث شود بتوانیم از یک محصول استفاده کنیم، رابط کاربری نام دارد.

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

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

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

روی مسئله قابلیت استفاده تاکید می‌کنم تا طراحی UI را با طراحی گرافیک اشتباه نگیرید.

تفاوت طراحی گرافیک و طراحی رابط کاربری چیست ؟

به دلیل وجود کلمه طراح یا طراحی، گاهی اوقات رابط کاربری زیرمجموعه هنر و دیزاین قرار می‌گیرد. بزرگترین دانشگاه‌های جهان، مثلا ام آی تی، طراحی رابط کاربری را در شاخه علوم کامپیوتر ارائه می‌کنند.

حال باید ببینیم تفاوت طراحی گرافیک یا طراحی بصری Visual Design با طراحی UI چیست و چرا نمی‌توان آن را زیرشاخه هنر طراحی دانست؟

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

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

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

طراحی گرافیک خوب یعنی سایت یا نرم‌افزار باید زیبا باشد، طراحی UI خوب یعنی کار با نرم‌افزار باید ساده باشد.

اصول طراحی کاربری یا UI چیست ؟

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

پنج اصل اساسی طراحی رابط کاربری یا UI از این قرارند:

رعایت ساختار

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

رعایت سادگی

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

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

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

قابل دید بودن

قابلیت دیده شدن یا اصل پدیداری یکی دیگر از اصول مهم UI است. این که چه اطلاعاتی را در معرض دید کاربر قرار می‌دهید، اهمیت بسیاری دارد.

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

تمامی موارد مهم و مورد نیاز کاربر را در معرض دید او قرار دهید. کاربر نباید مجبور شود مطالب مورد نظرش را از محصول‌تان استخراج کند!

اصل بازخورد یا اطلاع‌رسانی به کاربر

هر سیستمی ممکن است تغییر کند. ممکن است خطاهایی پیش بیاید. وضعیت‌ها تغییر می‌کنند و موارد استثنایی رخ می‌دهد. باید بتوانید این موارد را با زبانی قابل فهم به کاربر منتقل کنید. باید به او توضیح بدهید که در این موارد چه کار کند، چه اتفاقی افتاده است و قدم بعدی چیست.

اصل انعطاف‌پذیری

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

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

تا اینجا با تعریف کلی و اصول اساسی طراحی UI آشنا شدیم اما مراحل طراحی UI چیست ؟ به عبارت دیگر، برای طراحی کاربری مناسب چه کارهایی باید انجام شود؟

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

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

مرحله دوم، شامل طراحی اتود اولیه و ارائه آن به مشتری می‌شود. در این مرحله طرحی ابتدایی از سایت تهیه می‌کنید. منوها مشخص می‌شوند. محل قرار گرفتن هر یک از گزینه‌ها تعیین می‌شود و … . این طرح اولیه را به مشتری نشان می‌دهید و با همفکری او، تغییرات لازم را در نظر می‌گیرید.

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

مهارت های لازم برای طراحی UI

با توجه به مواردی که گفته شد، حتما متوجه شده‌اید که طراح UI به مهارت‌های مختلفی نیاز دارد. یکی از این موارد، آشنایی با ابزارهای طراحی گرافیک مثل فوتوشاپ و Illustrator است. البته نباید از ابتدای پروژه به سراغ این ابزارها بروید. شروع کار یک طراح UI با وایر فریم یا ابزارهای طراحی اولیه است. می‌توانید از یک کاغذ سفید به عنوان وایر فریم استفاده کنید و طرح مورد نظرتان را روی آن پیاده کنید. ابزارها و نرم‌افزارهای دیجیتال هم برای این کار وجود دارند.

در بسیاری موارد طراح سایت و طراح رابط کاربری یک نفر است. به هر حال طراح UI باید با سبک‌های طراحی سایت آشنایی داشته باشد.

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