طراحی رابط کاربری چیست؟
رابط کاربری یا همان User Interface مسئول ایجاد یک زبان بصری برای کاربران سایت شما است. یعنی قرار است اطلاعات سایت یا به عبارتی محتوای سایت شما را در حالتی زیبا و کاربرپسند ارائه کند. کاربران سایت به کمک آن می‌توانند داده‌هایی را به سایت انتقال دهند و به نوعی با سایت یا نرم‌افزار شما تعامل کنند.
مباحث مختلفی در زمینه طراحی UI مطرح می‌شود. استایل‌های بصری سایت و روش‌های ایجاد کردن آنها (مانند اضافه کردن CSS به سایت)، تایپوگرافی و انتخاب فونت مناسب برای سایت، چگونگی تعاملی کردن محتوای سایت، رنگ‌بندی به کار رفته در بخش‌های مختلف، ابعاد المان‌ها، انیمیشن‌ها یا افکت‌های نمایشی یا حتی فایل‌های صوتی یا تصویری که در طراحی سایت خود به کار می‌برید، همگی در مقوله طراحی رابط کاربری تعریف می‌شوند. البته که به‌کارگیری صحیح این المان‌ها اصول و قواعد خاص خود را می‌طلبد. لذا در صورتی که می‌خواهید سایتی جذاب و کارآمد ایجاد کنید، باید با این اصول آشنایی داشته باشید.
در واقع این المان‌های بصری رابط بین کامپیوتر و بشر هستند. به نوعی باعث می‌شوند که انسان بتواند با فضای مجازی و کامپیوتر ارتباط برقرار کند. فرقی نمی‌کند که فضای کاری در چه ابعاد و چه شکلی باشد، مثلاً اینکه شما از طریق موبایل به یک سایت دسترسی پیدا کنید یا بر روی کامپیوتر شخصی خود به دنبال جستجوی یک مطلب باشید. در هر صورت طراحی مناسب رابط کاربری باعث می‌شود که کاربران بتوانند با سایت یا نرم‌افزار به خوبی ارتباط برقرار کنند.
اصول طراحی UI
به عنوان یک هدف باید به این مسئله توجه داشته باشید که طراحی رابط کاربری برای آن است که محیطی مناسب برای کاربران فراهم شود. منظور از محیط مناسب برای کاربر آن است که وی بتواند به راحتی از آن استفاده کند، اطلاعات موردنیاز خود را به خوبی بدست آورد، عملکرد و کارایی مناسبی داشته باشد و در یک کلام بازدید‌کننده از استفاده چنین سایت یا نرم‌افزاری لذت ببرد.
البته که دستیابی به چنین هدفی نیازمند آشنایی با اصول طراحی UI است. در دنیای امروز که اطلاعات و مطالب به وفور برای علاقه‌مندان یافت می‌شود، شاید شما حتی کتاب‌ها و مستندات کاملی را هم پیدا کنید که به صورت خاص صرفاً به بحث طراحی UI می‌پردازند. هدف آنها این است که تنها به یک سوال پاسخ دهند که «طراحی رابط کاربری چیست؟». اما در این مقاله قصد داریم به صورت خلاصه به برخی اصول طراحی Ul اشاره کنیم.
این مطلب صرفاً زمینه‌ساز آشنایی شما با چنین موضوعاتی است. ممکن است سؤالات گوناگونی در ذهن شما مطرح باشد که با خواندن این مقاله به پاسخ همه آنها نرسید. برای برخی ممکن است جای سؤال داشته باشد که مثلاً چرا در نرم‌افزارها از علامت X یا ضربدر برای بستن یک پنجره استفاده می‌شود؟ چرا چنین دکمه‌ای معمولاً در گوشه سمت راست و بالای پنجره قرار دارد؟ یا مثلاً چرا دکمه آغاز1start در نرم‌افزارها و رابط‌های کاربری معمولاً در سمت چپ (بالا یا پایین) یافت می‌شود؟ دلیل اینکه بعضی از المان‌های یک سایت به راحتی در همان نگاه اول قابل تشخیص هستند، اما برای یافتن برخی ویژگی‌های دیگر باید دقیق‌تر و عمیق‌تر جستجو کنید، چیست؟
این‌ها و شاید هزاران مطلب دیگر همگی سؤالاتی باشند که در ذهن یک طراح نقش بسته‌اند. ما هم قصد نداریم به آنها در این مقاله پاسخ دهیم. اما به همین مقدار بسنده می‌کنیم که اغلب در پشت صحنه چنین طراحی‌ها و تصمیم‌گیری‌هایی اصولی وجود دارد. حال این اصول می‌توانند مرتبط با اصول طراحی UI باشند یا آنکه در ارتباط با طراحی تجربه کاربری به کار گرفته شده باشند. در ادامه به برخی از این اصول اشاره می‌کنیم تا بهتر متوجه شوید که طراحی رابط کاربری چیست.
تضاد و تفاوت مناسب بین المان‌ها
این اصل از اصول طراحی UI بیان می‌کند که المان‌های موجود در یک صفحه سایت باید به وضوح از یکدیگر قابل تشخیص و تفکیک باشند و عملکرد و کاربرد هر یک کاملاً برای کاربر مشخص باشد. مسلماً در طراحی یک صفحه سایت شما از المان‌های گوناگونی جهت تولید محتوا استفاده می‌کنید. به کمک فاصله‌دهی بین المان‌ها2margins، استفاده از ابعاد و رنگ‌بندی مناسب یا تغییر فونت مربوط به عناوین و … شما می‌توانید چنین تفکیک‌هایی را بین عناصر بصری موجود به وجود آورید.
مثلاً یکی از کارهایی که در این زمینه ضروری است و باید انجام شود آن است که بررسی کنید آیا رنگ فونت و نوشتار صفحه شما با رنگ پس‌زمینه آن تضاد رنگی مناسبی دارد یا خیر؟ در این خصوص می‌توانید از ابزارهای آنلاین مانند WebAIM نیز کمک بگیرید. مثلاً به تصویر زیر توجه کنید:
همچنان که در این تصویر ملاحظه می‌کنید، اغلب صفحه یا اسکرین‌شات تهیه شده از رنگ‌های محدودی استفاده می‌کنند (اصطلاحاً به آن پالت رنگی سایت گفته می‌شود). در این حین دکمه‌های به‌کاررفته رنگ‌های خاص‌تری دارند تا تضاد مناسب را برای ذهن کاربر ایجاد کنند و توجه وی را جلب کنند. به این ترتیب در واقع طراح این صفحه، از این اصل از اصول طراحی UI استفاده کرده تا تمرکز کاربر را به سمت کلیک کردن بر روی دکمه یا دکمه‌ها جلب کند و عمل موردنظر خود را از کاربر طلب کند (مثلاً این عمل می‌تواند اقدام به خرید برای یک محصول باشد).
اصل تکرار و پایداری
این اصل بر منبای مفهوم یادگیری انسان در اثر تجربه و تکرار بنیان گذاشته شده است. یعنی ما انسان‌ها بر اثر تجربه در طول زندگی خود عادت می‌کنیم که برخی از کارها را به شکل و شمایل خاصی انجام دهیم. لذا تفاوتی ندارد که شما از چه نرم‌افزار یا سایت حتی جدیدی استفاده کنید، باز هم انتظار دارید که بتوانید همان رفتار را در محیط کاربری سایت جدید انجام دهید و همان نتیجه را بدست آورید. لذا در طراحی محیط و رابط کاربری نرم‌افزار یا سایت خود باید به این اصل پایبند باشید.
مثلاً فرض کنید می‌خواهید نرم‌افزاری طراحی کنید که در آن نیاز است کاربر فایل‌هایی را آپلود کند. مسلماً هر کاربر جدیدی به دنبال یک منو می‌گردد که در آن گزینه add new file یا شبیه آن قرار داشته باشد. از آنجایی که در اغلب نرم‌افزارها چنین گزینه و منویی معمولاً در سمت چپ و بالای صفحه قرار داده می‌شود، اگر شما در طراحی UI نرم‌افزار خود خلاف این مسئله عمل کنید (مثلاً گزینه افزودن فایل را در پایین و سمت راست صفحه قرار دهید)، باعث گیجی کاربر می‌شوید. احتمالاً کاربران نرم‌افزار شما نمی‌توانند بدون راهنمایی متوجه محل این گزینه بشوند. این همان اصل تکرار و سازگاری با تجربه انسان است که باید در طراحی رابط کاربری خود به آن توجه داشته باشید.
جهت‌دهی و همترازی عناصر
یکی دیگر از اصول طراحی UI، توجه به جهت‌دهی و توازن میان المان‌ها است. فرقی نمی‌کند که شما از متون و نوشتار استفاده می‌کنید یا از عناصر گرافیکی و ... در کار خود سود می‌برید. در هر صورت ترازبندی و توجه مناسب به محل قرارگیری المان‌ها دارای اهمیت است. معمولاً در وب‌سایت‌ها شما المان‌های مرتبط با یکدیگر را در کنار هم مشاهده می‌کنید. مثلاً محصولات یک فروشگاه اینترنتی ممکن است به شکل کارت‌هایی در صفحه مرورگر شما ظاهر شوند.
همان‌طور که در تصویر فوق مشخص است، همترازی عناصر درون کارت‌ها و همچنین توازن و در یک خط بودن خود کارت‌ها به شما به عنوان کاربر سایت حس خوبی می‌دهد. در عین حال به صورت ناخودآگاه به شما می‌فهماند که این عناصر و المان‌ها به نوعی به یکدیگر مرتبط هستند (یعنی همه محصولات یک فروشگاه هستند).
مجاورت از اصول طراحی UI
اصل مجاورت و توجه به فواصل المان‌ها نیز از جمله مواردی است که در طراحی رابط کاربری خود باید به آن توجه داشته باشید. به زبان ساده این اصل بیان می‌کند که المان‌هایی که نزدیک به هم هستند، به طور طبیعی به یکدیگر مرتبطند. به این ترتیب کاربر سایت بهتر تشخیص می‌دهد که چگونه از قسمت‌های مختلف یک نرم‌افزار استفاده کند.
مثلاً اگر به نرم‌افزار ورد از مجموعه نرم‌افزارهای Office شرکت مایکروسافت دقت کرده باشید، المان‌هایی که به یکدیگر ارتباط دارند، در دسته‌هایی مجزا در کنار یکدیگر قرار می‌گیرند. به عنوان نمونه در تب Home از نرم‌افزار، تمامی قسمت‌هایی که مربوط به ترازبندی، لیست‌دهی یا فاصله‌دهی متون هستند، در مجاورت یکدیگر در یک بخش قرار گرفته‌اند.
به این ترتیب شما با مراجعه به چنین سایت‌ها یا نرم‌افزارهایی به راحتی می‌توانید از رابط کاربری استفاده کنید. حتی گاهی اوقات شاید از قبل هم آموزشی ندیده باشید که چگونه باید از آن نرم‌افزار استفاده کرد.
جمع‌بندی
در این مقاله در مورد این موضوع که اساساً رابط کاربری چیست، صحبت کردیم. برخی از اصول طراحی UI را بیان کردیم تا بتوانید از آنها برای ساخت و طراحی سایت خود استفاده کنید. البته اصول طراحی سایت موضوع بسیار گسترده‌ای است. اما به هر شکل مهم است که با رعایت این اصول بتوانید سایتی زیبا ایجاد کنید که عملکرد و کاربری مناسبی هم داشته باشد.
