طراحی رابط کاربری (UI)
رابط کاربری یا user interface که به اختصار UI نامیده می شود یکی از مهم ترین بخش های هر برنامه است و به طور کلی به هر چیزی گفته می شود که از طریق فعل و انفعال با آن، بتوان با صفحه ی نمایش کامپیوتر ارتباط برقرار کرد. در واقع رابط کاربری مجموعه ای از دستورها و تصویرهاست، اگر رابط کاربری به صورت تصویر باشد کاربر می تواند با انتخاب یک گزینه از میان چند گزینه با برنامه ارتباط برقرار کند و اما اگر رابط کاربری به صورت دستور باشد کاربر می تواند با درج دستور با برنامه ارتباط برقرار کند.
اجازه دهید با چند مثال رابط کاربری (UI) را بیشتر برای تان توضیح دهیم، هر محصولی برای انسان طراحی و تولید می شود باید به گونه ای باشد که انسان بتواند از آن استفاده کند، برای مثال دستگیره ی در وسیله ای است که می توان از آن برای باز کردن در استفاده کرد حال اگر دستگیره ی در یا هر وسیله ی جایگزین دیگری نبود انسان قادر به استفاده از در نبود.
اما جالب است بدانید که اولین رابط کاربری (UI) از زمانی که برای اولین بار که بشر محصولی را اختراع کرد مطرح شده، اما به شکل امروزی نبوده است.
اصول طراحی رابط کاربری (UI)
طراحی رابط کاربری (UI) دارای اصولی است که با دانستن این اصول می توان رابط کاربری مناسبی را طراحی کرد:
- اصل ساختار : اولین اصلی که باید در طراحی رابط کاربری (UI) به آن توجه داشت اصل ساختار است. در این اصل باید چیزهایی که به هم ربط دارند کنار هم باشند و چیزهایی که به هم ربط ندارند جدا از هم باشند. همچنین رعایت اصل ساختار در طراحی رابط کاربری (UI) باعث می شود که رابط کاربری هدفمند، کاربردی و معنادار داشته باشیم. در ضمن رابط کاربری باید به گونه ای باشد که کاربر بتواند آن را درک کند و ثابت و مشخص باشد.
- اصل تحمل : اصل دیگری که باید در طراحی رابط کاربری (UI) به آن توجه داشت اصل تحمل است، اصل تحمل به این معناست که رابط کاربری (UI) باید تحمل پذیر و انعطاف پذیر باشد و همچنین باید در ضمن این که باعث کاهش هزینه های خطا و اشتباهات می شود از بروز اشتباه نیز جلوگیری کند.
- اصل پدیداری : اصل پدیداری یا اصل قابلیت دیده شدن یعنی برای این که کاربر بتواند یک کار را انجام دهد تمام گزینه ها و اطلاعات لازم در اختیار کاربر قرار دهد بدون این که با قرار دادن اطلاعات فرعی و غیر ضروری برای کاربر ایجاد مزاحمت کند.
- اصل بازخورد : چهارمین اصل طراحی رابط کاربری (UI) اصل بازخورد است بدین معناست که اگر تغییراتی ایجاد شد یا عملیات ها، خطاها و استثنائاتی انجام شد به گونه ای که برای کاربر قابل فهم باشد به کاربر اطلاع داده شود.
- اصل سادگی : آخرین اصل طراحی رابط کاربری (UI)، اصل سادگی است یعنی رابط کاربری (UI) باید ساده باشد به گونه ای که فرایندهای دشوار را با استفاده از راه های میانبر و راه هایی که برای کاربر قابل فهم است انجام دهد.
عناصر رابط کاربری (UI)
برای این که بتوان در هزینه های کلی صرفه جویی کرد و فرایند جلب رضایت مشتری و انجام کار سرعت بخشید باید رابط کاربری (UI) مناسبی طراحی کرد. توجه داشته باشید که چیدمان عناصر بسیار حائز اهمیت است.
رابط کاربری (UI) دارای عناصری است این که این عناصر چگونه استفاده شوند و چگونه به کار گرفته شوند به نوع رابط کاربری (UI) بستگی دارد، این عناصر عبارتند از:
- بخش های اطلاعاتی : بخش های اطلاعاتی شامل مواردی همچون آگاه سازی ها، جعبه های پیام، نوار پیشرفت و .. می شود.
- کنترل های ورودی : یکی دیگر از عناصر رابط کاربری (UI) کنترل های ورودی است کنترل های ورودی شامل فیلدهای داده، دکمه های رادیویی، چک باکس ها، فیلدهای متنی، دکمه ها و … است.
- بخش های ناوبری : آخرین عنصر رابط کاربری (UI)، بخش های ناوبری است بخش های ناوبری شامل مواردی همچون فیلدهای جستجو، تگ ها، آیکن ها، اسلاید و … است.
چند نکته در مورد طراحی رابط کاربری (UI)
برای طراحی رابط کاربری (UI) باید چند نکته را مدنظر داشته باشید تا بتوانید در کنار رعایت اصول طراحی رابط کاربری (UI)، رابط کاربری (UI) عالی و کاربرپسند طراحی کنید.
1. نحوه ی استفاده از رابط کاربری
اولین نکته ای که باید در طراحی رابط کاربری (UI) و طراحی سایت به آن توجه داشته باشید این است که نحوه ی استفاده از رابط کاربری خود را برای افراد مشخص کنید. افراد با استفاده از دو روش از وب سایت ها و یا برنامه ها استفاده می کنند: روش اول به طور مستقیم و روش دوم به طور غیر مستقیم.
در روش مستقیم افراد با یک element از محصول تعامل دارند که این تعامل می تواند به صورت کارت کشیدن، کشیدن و رها کردن یک ایتم و یا ضربه زدن روی یک دکمه باشد. اما در روش غیر مستقیم، افراد با یک element خارجی از محصول تعامل دارند که این تعامل می تواند به صورت اشاره و کلیک با ماوس، تایپ کردن یک فرم، استفاده از دستورات کلیدی و یا کلمات میان بر باشد.
در طراحی رابط کاربری (UI) خود به این نکته توجه داشته باشید که این که چه کسانی و چه دستگاه هایی از برنامه های شما استفاده می کنند تاثیر بسیاری در تصمیمات شما دارد، برای مثال اگر می خواهید رابط کاربری (UI) را برای برنامه ای تهیه کنید که برای افراد سالخورده است و یا این که افرادی که می خواهند از برنامه استفاده کنند در استفاده از دست محدودیت دارند، روی کشیدن تکیه نکنید.
2. طراحی المان های ساده
همان طور که گفتیم یکی از اصول طراحی رابط کاربری (UI)، سادگی است، منظور از سادگی در اینجا این است که درک مفهوم برنامه ساده باشد، به عبارتی رابط کاربری (UI) سایت باید به گونه ای ساده باشند که سوالی در ذهن کاربر برای استفاده از آن ها ایجاد نشود. در واقع این یکی از وظایف طراح رابط کاربری (UI) است که رابط کاربری (UI) را به گونه ای طراحی کند که وقتی افراد وارد سایت می شوند به گونه ای المان ها به صورت هماهنگ و ساده کنار هم قرار گرفته باشند که کاربر به راحتی متوجه منظور آن ها شود.
3. ارتباط رابط کاربری (UI) و UX
نکته ی بعدی که باید به آن توجه داشته باشید این است که طراحی رابط کاربری (UI) جدا از تجربه ی کاربری UX نیست به عبارتی UI مناسب می تواند باعث افزایش تجربه ی کاربری شود. پس قبل از این که طراح رابط کاربری (UI) شروع به فعالیت کند باید اطلاعاتی از مسئول تجربه ی کاربری دریافت کند، این اطلاعات شامل مواردی همچون حل مشکلاتی که قبلا وجود داشته است، جریان فعالیت هایی که کاربر انجام می دهد و نمایش محصولات و اطلاعاتی که نیاز است.
4. ساده کردن فرم ها
یکی از راه هایی که کاربر می تواند با سایت تعامل داشته باشد، فرم های سایت است و همچنین با استفاده از این فرم ها، اطلاعات ارزشمندی در اختیار مالکان سایت قرار می گیرد. نکته ای که باید در طراحی رابط کاربری (UI) به آن توجه داشته باشید این است که بررسی کنید آیا واقعا سایت به فرم نیاز دارد یا خیر، متاسفانه امروزه سایت ها برای این که مخاطبان بیشتری جذب کنند برای ساده ترین اطلاعاتی که کاربر نیاز دارد کاربر را مجبور به ثبت نام در سایت و استفاده از فرم می کنند، این کار باعث رنجش کاربران و همچنین کاهش مخاطبان سایت می شود.
نکته ی بعدی در طراحی فرم ها این است که فرم ها نباید همرنگ با پس زمینه باشند و یا این که نباید طول آن به اندازه ای کوچک باشد که کاربر نتواند تمام اطلاعات مورد نیاز را وارد کند.
5. گرفتن بازخورد از کاربران
یکی از راه هایی که می توان متوجه شد که کاربران تا چه اندازه از رابط کاربری (UI) سایت رضایت دارند، گرفتن بازخورد از کاربران است، ولی خب به این مسئله توجه داشته باشید که کاربران نمی توانند ایرادات فنی را بیان کنند پس می توانید از سایت های تخصصی که در این زمینه فعالیت می کنند کمک بگیرید تا متوجه شوید طراحی رابط کاربری (UI) تان مناسب بوده است یا خیر.
یکی دیگر از راه هایی که می توان کیفیت رابط کاربری (UI) را با آن ارزیابی کرد، مدت زمانی است که کاربر در سایت سپری می کند، به عبارتی اگر کاربر وارد سایت شود اما زود از سایت خارج شود ممکن است به علت نقصی که در رابط کاربری وجود دارد کاربر تصمیم بگیرد که سریعا از سایت خارج شود البته این مسئله می تواند به علت محتوای نامناسب سایت نیز باشد.
روش دیگری که می توانید متوجه رضایت کاربران از سایت خود شوید این است که ببینید کاربر آیا مراحل و یا فرم های سایت را تکمیل کنند یا خیر و یا این که این فرم ها را ناتمام رها می کند، این مسئله می تواند ناشی از طولانی بودن فرایند و یا این که رابط کاربری (UI) نتوانسته اعتماد کاربر را جذب کند.
6. استفاده از تایپوگرافی مناسب
نکته ی دیگری که باید در مورد رابط کاربری (UI) به آن توجه داشته باشید این است که از تاپیوگرافی با فونت مناسب استفاده کنید، این کار باعث می شود که هم مطالب خواناتر شود و هم زیبایی بصری ایجاد شود.
اما در مورد تایپوگرافی نیز باید نکاتی را به یاد داشته باشید که از نوع قلمی برای مرورگر استفاده کنید که توسط همه ی مرورگرها پشتیبانی شود، نکته ی بعدی که باید به آن توجه داشته باشید این است که فونت تایپوگرافی باید کاملا خوانا باشد، این نکته از این جهت حائز اهمیت است اندازه ی صفحه در گوشی و تبلت نسبت به دسکتاپ کوچک تر است.
همچنین اگر می خواهید کاربران به اطلاعاتی که نسبت به سایر اطلاعات مهم تر است بهتر توجه کنند از فونت های بزرگ تر و بولدتر استفاده کنید.
7. شناسایی کاربران
ممکن است شما به عنوان یک طراح رابط کاربری تصور کنید سایتی که طراحی کرده اید رابط کاربری (UI) مناسبی دارد اما مسئله این جاست نظر نهایی و اصلی نظر کاربر است، پس باید در طراحی رابط کاربری (UI) کاربران فعلی و آینده ی خود را شناسایی کنید و سعی کنید که کاربران خود را در هنگام طراحی رابط کاربری (UI) وب سایت خود در نظر داشته باشید.
برای این که کاربران خود را به عنوان یک طراح رابط کاربری (UI) کاربری بهتر بشناسید و درک کنید می توانید از سایت های رقیب خود کمک بگیرید، برای این کار می توانید به وب سایت های رقیب خود مراجعه کنید و ببینید که به عنوان یک کاربر آیا واقعا به آن چه که می خواهید رسیده اید یا خیر. در واقع دومین مرحله ای که باید در طراحی مدنظر داشته باشید شناخت کاربر است.
برای تجزیه و تحلیل سایت خود می توانید از گوگل آنالاتیک و وبمسترتولز استفاده کنید با استفاده از این ابزارها می توانید نوع کاربران و موقعیت آن ها را شناسایی کنید و میزان ورودی سایت خود را بررسی کنید، با این کار می توانید نیازهای کاربران خود را شناسایی کنید.
نیازمندی های طراحی رابط کاربری (UI)
افرادی که می خواهند در زمینه ی طراحی رابط کاربری (UI) فعالیت کنند باید با طراحی دیداری نیز آشنا باشند، این مسئله به این دلیل است که غالبا شرکت ها به دنبال افرادی هستند که هم گرافیست خوبی باشند و هم طراح UI خوبی. پس فرد باید با ابزارهای گرافیکی همچون فتوشاپ و Illustrator آشنا باشد.
به تازگی مفهوم جدیدی به نام UI Developer رواج پیدا کرده است، این مفهوم به افرادی اشاره دارد که هم مهارت هایی در زمینه ی طراحی رابط کاربری (UI) دارند و هم مهارت هایی در زمینه ی برنامه نویسی front-end دارند.
توسعه دهنده های رابط کاربری (UI) باید در مواردی همچون CSS، HTML و Javascript مهارت داشته باشند و با فریمورک هایی همچون React، VueJS یا Angular نیز آشنا باشند و کار کرده باشند.
برای کسب مهارت بیشتر در زمینه ی طراحی رابط کاربری (UI) اگر فرد می خواهد در زمینه ی طراحی وب سایت فعالیت کند باید با سبک های مختلف طراحی وب سایت همچون سبک هایی همچون تخت، رئالیسم، سه بعدی و .. و مزایا و معایب آن ها آشنا باشند.
