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

تاریخچه طراحی گرافیکی

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

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

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

UI چه اهمیتی در طراحی وب دارد؟

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

تاثیر رابط کاربری در سئو

با توجه به توضیحات بالا، UI برای راضی نگه داشتن مشتریان ضروری است و باعث افزایش یا کاهش در بازدید و یا تعداد کلیک در صفحات می‌شود؛ پس رابط کاربری یا UI تاثیر زیادی بر رتبه بندی بهینه سازی موتور جستجو یا همان سئو (SEO) می‌گذارد. از طرفی موتورهای جستجو در حال تکامل هستند و اکنون تاکید بیشتری بر تجربه کاربران در یک وب سایت دارند. این بدان معناست که سایت هایی با کیفیت UI به احتمال زیاد در نتایج جستجو رتبه بالاتری دارند. در ادامه چندین دلیل برای ضروری بودن آن آورده شده است:

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

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

واژه‌ی UX برای اولین بار در دهه‌ی ۹۰ مطرح شد. تجربه‌ی کاربری (User Experience) به نوعی، فرایند کلی تولید یک محصول محسوب می‌شود. UX تعیین می‌کند که تعامل کاربر با یک نرم افزار چگونه باید باشد. در حالی که UI بر این نکته تمرکز دارد که این ارتباط یا همان رابط کاربری، چگونه به نمایش گذاشته می‌شود. طراحان UX مشخص می‌کنند که طراحی صفحات شامل چه المان‌ها و دکمه هایی باشد در حالی که تیم UI روی ظاهر و کیفیت گرافیکی این المان‌ها کار می‌کند. UI رابطه‌ی نزدیک‌تری با گرافیک دارد، اما UX بیشتر به تحلیل و آنالیزهای فنی سیستم می‌پردازد. این دو تیم نیاز به تعامل دائمی دارند زیرا توسعه‌دهنده‌ی رابط کاربری یک برنامه، بدون خط و مشی مشخصی که تیم UX باید آن را تعیین کند قادر به طراحی کاربردی یک محصول نیست. از طرفی در UX نیز باید ملاحظات پیاده سازی UI در نظر گرفته شود. در مرحله‌ی پیاده سازی نهایی، UX بر UI مقدم است. زیرا تیم UX طی عملیات تحقیق بازار و با شناخت کامل از اهداف شرکت و نوع مخاطبان و سایر عوامل اقدام به طراحی و پیاده سازی طرح اولیه می‌کند. طرح اولیه پس از تصویب به شکلی کاملا ساده و آزمایشی طراحی می‌شود (Sketch) تا با بررسی و تست آن، از پیش آمدن اشتباهات و نواقص جلوگیری شود. بعد از انجام تعییرات نهایی، فرایند طراحی UI آغاز می‌شود.

ویژگی‌های یک UI خوب چیست؟

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

• کاربر برای کار با آن نیازی به آموزش نداشته باشد.
• دارای المان‌های اضافه نباشد و کاربر را گمراه نکند.
• کاربر از کار کردن با آن لذت ببرد و به اصطلاح User Friendly باشد.

اصول اولیه برای طراحی یک UI مناسب

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

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

نمونه هایی از بهترین رابط کاربری

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

• دریبل (Dribbble’s card design)
• Mailchimp’s usability
• دراپ باکس (Dropbox’s responsive color system)
• پینترست (Pinterest’s waterfall effect)
• Hello Monday’s white space
• Current app’s color palette
• Rally’s dynamism
• Cognito’s custom animation
• اسپاتیفای (Spotify’s color gradients)
• تپسی، اسنپ، دیجی کالا و... (طراحی رابط کاربری محصول)

برای یادگیری UI از کجا شروع کنیم؟

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

زبانهای برنامه نویسی UI چیست؟

UI یکی از مهم‌ترین بخش‌ها در طراحی وب است که به مهارت‌های گرافیکی و همچنین آشنایی با برنامه نویسی نیاز دارد. یک طراح UI باید با زبان‌های برنامه نویسی وب آشنایی کافی داشته باشد و حتی در مواردی به آنها مسلط باشد. داشتن مهارت‌های بیشتر نیز مزیت بزرگی برای طراحان رابط کاربری محسوب می‌شود. آشنایی با مفاهیم کلی برنامه نویسی فرانت اند(Front-End) و بک اند( Back-End)، آشنایی با ترندهای روز طراحی و تبلیغات و همچنین هماهنگی طراحی با اصول بهینه سازی سایت از جمله مهارت هایی هستند که شما را ازشما را به یک طراح حرفه ای تبدیل می‌کنند. در این بخش سه زبان مهم در طراحی رابط کاربری را به شما معرفی می‌کنیم.

زبان HTML

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

زبان CSS

زبان CSS (مخفف عبارت Cascading Style Sheets) به منظور شکل دهی به المانهای مختلف صفحات مانند متن، تصویر، کادرها و… ساخته شده است. در حقیقت شما اجزا و المان‌های یک سایت یا برنامه را با HTML در صفحه‌ی خود قرار می‌دهید و با استفاده از CSS شکل و ظاهر آن المان‌ها را شخصی سازی می‌کنید. پس CSS طراحان سایت را قادر می‌سازد که بدون محدودیت خلاقیت‌های خود را در طراحی صفحات سایت پیاده سازی کنند. سایر اطلاعات مربوط به CSS در مقاله‌ی CSS چیست؟ آورده شده است.

زبان برنامه نویسی جاوا اسکریپت

زبان جاوا اسکریپت (JavaScript) به اختصار JS نیز نامیده می‌شود. این زبان برنامه نویسی در سمت کاربر پردازش شده و برنامه نویس فرانت اند به کمک آن می‌تواند به پویانمایی صفحاتی که با HTML و CSS طراحی کرده است بپردازد. در حقیقت، شما با کمک جاوا اسکریپت می‌توانید به صفحات طراحی شده جان ببخشید. برای مثال اگر  روی یک دکمه‌ی ارسال کلیک کنید، این جاوا اسکریپت است که فرم را به سرور ارسال می‌کند. در مقاله‌ی جاوا اسکریپت چیست؟ با ویژگی‌های این زبان برنامه نویسی بیشتر آشنا خواهید شد.

ابزارهای موردنیاز برای UI چیست؟

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

 فتوشاپ (Photoshop)

فتوشاپ در لغت به معنای کارگاه عکس است و یک نرم افزار حرفه ای در حوزه گرافیک و ویرایشگر تصاویر است که توسط شرکت Adobe System توسعه یافته است. فرقی نمیکند که شما یک عکاس باشید، معمار، طراحی گرافیک و یا یک طراح سایت؛ در دنیای امروز هرکسی که با دنیای دیجیتال و کامپیوتر سر و کار دارد، بدون شک حداقل یکبار به فتوشاپ نیازمند شده است.

ایلاستریتور (Illustrator)

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

Adobe XD

همانطور که در مقاله آموزش Adobe XD: آموزش طراحی رابط کاربری با ادوبی XD توضیح دادیم، این نرم افزار طراحی رابط کاربری و تجربه‌ی کاربری وب ‌سایت و اپلیکیشن بر پایه‌ی بردار است. XD مخفف واژه‌های Experience Design به معنای طراحی تجربه است. از این نرم‌افزار برای طراحی UI و UX یا رابط کاربری و تجربه‌ی کاربری استفاده می‌شود. طراحی با Adobe XD نسبتا ساده است، زیرا ابزارهای زیادی در این نرم‌افزار وجود دارد که به طراحی محصول کمک می‌کند، مانند Pen، Selection و... . نرم‌افزار Adobe XD به صورت تخصصی برای طراحان رابط و تجربه‌ی کاربری ایجاد شده است و در نتیجه نسبت به فوتوشاپ، کارایی بالاتری در این حوزه دارد.

اسکچ (Sketch)

اسکچ یا Sketch نیز یک نرم‌افزار است که برای طراحی رابط کاربری و حتی طراحی آیکن استفاده می‌شود. اسکچ نیز مانند Adobe XD، بر پایه‌ی بردار است. اصطلاح اسکچ بر گرفته از لغت ایتالیایی  به معنای نقاشی بوده و در گرایش طراحی به عمل طراحی دستی خام و سریع و ترسیم پیرامونی اشیاء گفته می‌شود. هدف اسکچ ارائه ی ایده هر چیز و یا تصویر سازی فرایند است. تفاوت این نرم افزار با XD در این است که اسکچ برای سیستم عامل مک و XD برای ویندوز استفاده می‌شود.

فیگما (Figma)

فیگما نیز یکی از ابزارهای طراحی رابط کاربری است که در مرورگر اجرا می‌شود. فیگما از لحاظ عملکردی مشابه با اسکچ و XD است، با این تفاوت که ویژگی Live Collaboration یا همکاری در لحظه را برای طراحان ایجاد کرده است. این ویژگی باعث می‌شود که چندین طراح به صورت همزمان بتوانند در یک پروژه مشغول باشند و به راحتی تغییرات یکدیگر را مشاهده کنند. البته در Adobe XD نیز استفاده از ویژگی همکاری زنده با Adobe ID به تازگی از طریق Zoom، ممکن شده است. اما در اسکچ این ویژگی به صورت ذاتی وجود ندارد و برای استفاده از آن، باید از پلاگین‌های خاصی استفاده کنید.  برای مطالعه بیشتر به مقاله آموزش فیگما مراجعه کنید.

جمع بندی

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