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

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

تمامی این موارد مربوط به رابط کاربری یا UI سایت است. UI مخفف شده  User Interface می‌باشد و به معنای رابط کاربری است. تیم SEO3 در تلاش است تا اطلاعات مفید و کاربردی را در خصوص کاربردهای ui design در طراحی سایت و تأثیرات آن بر سئو سایت را در اختیار شما عزیزان قرار دهد.

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

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

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

تاریخچه UI

در دهه 1960 کار با سیستم های کامپیوتری به شکلی بود که کاربران دستورات خود را به صورت دستی به کامپیوتر وارد میکردند و رابط یا واسطی برای تعامل مستقیم کاربر باسیستم وجود نداشت. به این محیط هاری کاری Command Line Interface یا CLI گفته می‌شد.

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

در دهه 1970 شرکت Xerox اولین کامپیوتر شخصی که فقط یک رابط کاربری گرافیکی داشت را با نام Alto به بازارعرضه کرد و برای اولین بار بود که GUI معرفی شد. آلتو دارای موس و کیبورد بود که به کاربران این امکان را میداد تا با استفاده از موس و کلید‌های میانبر، با سیستم تعامل داشته باشند.

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

در دهه 1990 با معرفی ویندوز3.1 توسط شرکت مایکروسافت، GUI به مراحل بالا تری راه پیداکرد. این نسخه جدید شامل ویژگی هایی از جمله مدیریت فایل های گرافیکی، ویدئویی، ویرایشگر متن و ابزارهای جدید برای طراحی واسط گرافیکی بود. کمپانی مایکروسافت از تکنولوژی برنامه ‌نویسی Microsoft Visual Basic به عنوان ابزاری برای طراحی واسط کاربر در این نسخه استفاده می کرد.

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

سال 2007 مهم‌ترین سال در طراحی رابط کاربر به شمار می‌رود. در این سال بود که ساخت اپلیکیشن‌های متنوع برای محیط‌های کاربری مختلف رایج شد و انقلابی در صنعت طراحی UI و طراحی اپلیکیشن اتفاق افتاد.  در این سال شرکت اپل یک رابط کاربری گرافیکی لمسی پیشرفته را معرفی کرد و یک سال بعد در سال 2008 از اپ‌استور رونمایی کرد که دارای محیطی جذاب و جدیدی برای ارائه اپلیکیشن‌های مختلف به کاربران  بود. سه ماه بعد از معرفی اپ استور توسط شرکت اپل، گوگل هم اپ استور خود را معرفی کرد.

بخش‌های طراحی UI

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

• طراحی دیداری

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

• طراحی گرافیکی

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

• رنگ‌بندی و هویت بصری

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

• تایپوگرافی

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

انواع طراحی UI

• رابط کاربری لمسی
• رابط کاربری صوتی (VUI)
• رابط کاربری مبتنی بر منو
• رابط کاربری مبتنی بر فرم
• رابط کاربری خط فرمان (CLI)
• رابط کاربری زبان طبیعی (LUI یا NLUI)
• رابط کاربری گرافیکی GUI))