نکاتی مهم در مورد طراحی رابط کاربری (UI) - یادینو


نکاتی مهم در مورد طراحی رابط کاربری (UI)

طراحی رابط کاربری،طراحی UI،وب سایت،طراحی قالب،طراحی صفحات وب


آنچه در این مقاله مطالعه خواهیم کرد:

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


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

 

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

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

مرز بین UX و UI

 

ساده و سازگار کار کنید

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

 

فضای سفید در پیاده سازی المان ها (white space)

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

تکنیک فضای سفید در طراحی رابط کاربری

 

تصاویر متنی ایجاد کنید

شاید به تازگی دیده باشید که در برخی از وبسایت ها و در یک مقاله بلند بالا ، بخشی از مهمترین نکات کلیدی داخل مقاله را به صورت یک متن درشت و گرافیکی ، در قالب یک تصویر به همراه یک پس زمینه ، نمایش می دهند . (چیزی شبیه به پست هایی که در اینستاگرام می بینید)
این کار دو مزیت دارد ، اول اینکه نکات کلیدی مقاله یا متن شما ، بیشتر در دید کاربر نمایان می شود و دوم اینکه سبب ایجاد جذابیت و بهبود ماندگاری کاربران می شود.
لازم نیست برای ساخت چنین امکانی ، حرفه ای باشید ، حتی با نرم افزار هایی مثل فتوشاپ و یا پاورپوینت هم می توان چنین تصاویر متنی تاثیر گذاری را ایجاد نمود.
 

تکنیک تصاویر متنی در طراحی رابط کاربری

 

از رنگ ها با تضاد مناسب استفاده کنید

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

تضاد در رنگ ها

 

نمایش پیام مناسب پس از اقدام کاربران

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

 

رابط کاربر اضافی را حذف کنید

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

 

حذف المان های اضافه در طراحی رابط کاربری

 

رفتارشناسی رابطه مستقیمی با UI و UX دارد

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

 


حرف آخر

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

امیدوارم این مقاله هم برای شما مفید بوده باشه . لطفا نظرات ارزشمند خودتان را در پایین همین مقاله مطرح بفرمایید.
 


رای مثبت من

این مقاله را به اشتراک بگذارید:








تجربه یا نظر ارزشمند شما در مورد این مقاله چیست؟

ایمیل شما نزد یادینو محفوظ می ماند و منتشر نخواهد شد.