رابط کاربری

رابط کاربری رابط کاربری
-۱۶ مرداد ۱۳۹۸-

رابط کاربری (UI) چیست؟ ۴۰ نکته بسیار مهم که تاثیر بسزایی دارد

بدون نظر 33 بازدید

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

ایده اول: به جای این که از چند ستون استفاده کنید از یک ستون استفاده کنید.

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

در زیر می توانید الگوی یک طرح یک ستونه و یک طرح چند ستونه را مشاهده کنید.

ایده برای UI

ایده دوم: به جای این که راه های فروش را محدود کنید، سعی کنید برای جذب بیشتر مشتری هدیه ای برای مشتریان خود در نظر بگیرید.

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

در زیر می توانید یک الگوی ارائه هدیه را مشاهده کنید.

دادن هدیه به کاربر

ایده سوم: به جای این که رابط کاربری را به چند قسمت تقسیم کنید، قسمت های مشابه را با هم ادغام کنید.

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

ساده سازی وب سایت

ایده چهارم:  به جای این که در مورد خودتان حرف بزنید از تاییدیه های دیگران استفاده کنید.

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

در زیر می توانید یک نمونه از تاییدیه های دیگران را مشاهده کنید.

تاییدیه دیگران

ایده پنجم: به جای این که، مسئله ای را تنها یک بار بیان کنید می توانید از ایده ی تکرار استفاده کنید.

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

در زیر می توانید یک الگوی تکرار را مشاهده کنید.

ایده تکرار

ایده ششم: به جای این که گزینه های سایت خود را محو کنید از گزینه های قابل کلیک و  یا قابل انتخاب استفاده کنید.

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

در مثال تصویری که مشاهده می کنید برای مواردی که نیاز است کاربر روی آن کلیک کند از رنگ آبی استفاده شده  و از رنگ سیاه نیز برای مواردی استفاده شده که انتخاب شده اند و یا این که نشان می دهد که کاربر در چه مسیری قرار دارد.

در صورتی که شما از این موارد درست استفاده کنید، کاربران به راحتی با زبان سایت شما آشنا می شوند و در نهایت با استفاده از این موارد، با رابط کاربری سایت شما ارتباط برقرار می کنند. توصیه می کنیم با محو کردن این موارد، کار را برای کاربران سایت خود سخت نکنید.

مشخص کردن مسیر وب سایت

ایده هفتم: به جای این که انتخاب های مختلفی به کاربران خود ارائه دهید می توانید به آن ها گزینه هایی را پیشنهاد دهید.

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

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

در تصویر زیر می توانید یک نمونه از پیشنهاد محصول، را مشاهده کنید.

پیشنهاد ویژه

ایده هشتم: به جای این که نیاز باشد از کاربران سایت خود، تاییدیه بگیرید از Undo ها استفاده کنید.

استفاده از Undo ها این امکان را برای تان ایجاد می کند که یک کار را  تنها با فشردن یک لینک و یا دکمه انجام دهید. اما در صورتی که شما از کاربر خود تاییدیه بگیرید یعنی کاربرتان از کاری که شما می خواهید انجام دهید آگاه نیست. در واقع تصور من این است که تمام فعالیت های انسان از قبل تعیین شده است و تنها برخی از کارهای انسان به صورت تصادفی انجام می شود و از قبل برنامه ریزی شده نیست.

زشتی و ناکارآمدی این کار زمانی خود را نشان می دهد که نیاز باشد کاربر چندین بار این تاییدیه ها را انجام دهد و در نهایت این کار به یک تجربه ی ناخوشایند برای کاربران تبدیل می شود. پس توصیه می کنیم تا جایی که امکان دارد به جای این که از کاربران سایت تاییدیه بگیرید، از Undo ها استفاده کنید.

در زیر یک نمونه از استفاده از Undo ها را مشاهده می کنید.

تاییدیه در سایت

ایده ی نهم: سعی کنید به جای این که همه را هدف قرار دهید، حرف خود را به کسی که مدنظرتان است بگویید.

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

البته این استراتژی یک ریسک به همراه دارد و آن این است که دایره ی فعالیت های خود را کوچک کنید و مشتریان احتمالی خود را محدود می کنید. اما به یاد داشته باشید که شفافیت اعتماد ایجاد می کند.

محدود کردن کسب و کار

 ایده دهم: به جای این که دو دل باشید، مستقیم صحبت کنید.

شما می توانید پیام خود را به صورت مستقیم و با اطمینان به مخاطبان خود منتقل کنید و یا این که می توانید پیام خود را با صدایی لرزان و دو دل برای مخاطبان خود بیان کنید. اگر می خواهید پیام خود را با علامت سوال به انتها برسانید، از واژه هایی مانند “شاید”، “علاقه مندید؟”، “می خواهید؟” استفاده کنید.

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

مطمئن رفتار کردن با مشتری

ایده یازدهم: به جای استفاده از شباهت ها بیشتر از تضادها استفاده کنید.

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

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

در ضمن بین قسمت تماس برای ثبت سفارش و سایر قسمت ها باید تضاد بیشتری در نظر گرفته شود.

در زیر می توانید یک نمونه از تضادها را مشاهده کنید.

استفاده از تضاد

ایده دوازدهم: به جای ویژگی های عمومی از ویژگی های شخصیتی استفاده کنید.

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

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

ایده سیزدهم: به جای این که نیاز باشد کاربر برای ثبت نام فیلدهای زیادی را پر کند از فیلدهای کمتری برای این کار استفاده کنید.

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

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

در زیر یک نمونه از استفاده از فیلدهای کمتر را مشاهده می کنید.

استفاده از فیلد های کمتر

ایده چهاردهم: به جای این که گزینه ها را مخفی کنید، آن ها را معرض دید قرار دهید.

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

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

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

در زیر می توانید یک نمونه از در معرض دید قرار دادن گزینه ها را مشاهده کنید.

استفاده نکردن از منوی کشویی

ایده پانزدهم: به جای انتهای کاذب از پیشنهاد ادامه دادن استفاده کنید.

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

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

ایده شانزدهم: به جای این که از لینک های زیادی استفاده کنید، سعی کنید از مواردی استفاده کنید که باعث جلب توجه شود.

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

در ضمن به این مسئله توجه داشته باشید که اگر بیش از اندازه در یک صفحه از لینک استفاده کنید، این امکان وجود دارد که مشتریان خود را از دست بدهید و در نهایت به هدف خود نرسید. به تعداد لینک هایی که در یک صفحه قرار می دهید توجه داشته باشید و سبک صفحات خود را که برخی دارای لینک های بیشتری هستند و برخی نیز دارای لینک کمتر و نرخ تبدیل بیشتری هستند را تا جای امکان متعادل سازید.

برای این کار می توانید لینک های فرعی را پاک کنید تا امکان این که کاربر دکمه مورد نظر شما را انتخاب کند افزایش پیدا کند.

در تصویر زیر می توانید یک نمونه از این ایده را مشاهده کنید.

جلب توجه

ایده هفدهم: وضعیت موجود را به کاربر نشان دهید.

در هر رابط کاربری ما از عناصری استفاده می کنیم که می توانند حالت های مختلفی را نشان دهند. برای مثال ایمیل ها می توانند حالت خوانده شده و یا خوانده نشده داشته باشند و یا فاکتورها نیز می توانند حالت پرداخت شده و یا پرداخت نشده داشته باشند و … .

یکی از روش های خوب برای ارائه بازخورد این است که کاربران از وضعیتی که در آن قرار دارند آگاه کنیم. نشان دادن وضعیت به افراد این امکان را می دهد که بفهمند کارهایی که در گذشته انجام داده اند با موفقیت انجام شده است و یا این که باید عملی صورت گیرد.

ایده هجدهم: به جای این که از دکمه هایی در سایت خود استفاده کنید که تنها یک کار خاص را انجام می دهند می توانید از دکمه هایی استفاده کنید که مزایایی برای کاربران تان به همراه دارند.

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

فرآیند ثبت نام فرآیندی است که در طی آن تلاش می شود که اطلاعاتی از کاربر دریافت شود و غالبا نیز فرم های طولانی مرتب شده ای را در بر می گیرد. فرضیه ای که در این جا وجود دارد این است که دکمه هایی که برای کاربران باعث ایجاد سود می شوند می توانند نرخ تبدیل را افزایش دهند.

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

دکمه های هدف دار

ایده نوزدهم: به جای استفاده از منوهای بدون محتوا از منوهایی استفاده کنید که امکان ویرایش مستقیم آن ها وجود دارد.

گاهی اوقات منطقی است که اجازه دهیم عناصری از رابط کاربری به صورت مستقیم در کنار  فهرستی از اقدامات عمومی غیر مرتبط، مورد استفاده قرار گیرند. برای مثال زمانی که می خواهیم لیستی از داده ها را نمایش دهیم می خواهیم این امکان را در اختیار کاربر قرار دهیم که با موارد موجود در لیست، کارهایی را انجام دهد.

از جمله کارهایی که می توان روی لیست داده ها انجام داد، این است که کاربر روی داده های لیست کلیک کند و یا این که تغییراتی روی داده های لیست ایجاد کند، داده ها را حذف کند و یا نام آن ها را تغییر دهد و … .

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

منوهای بدون محتوا

ایده بیستم: به جای این که صفحات اضافی ایجاد کنید از فیلدهایی استفاده کنید که در معرض دید باشند.

زمانی که می خواهید صفحات اصلی سایت خود را  ایجاد کنید که ارزش سایت شما را به کاربران منتقل می کنند، می توانید در این صفحه ها از فرم استفاده کنید و  مزایای واقعی فرم را در این صفحات نشان دهید. ادغام فرم ثبت نام با صفحه اصلی، در مقایسه با زمانی که شما لیست ثبت نام را در صفحات مجزا قرار دهید، مزایای بسیاری دارد.

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

البته این زمانی ساده تر است که فرم ما در مرحله ی اول کوتاه تر باشد، که ما نیز باید سعی کنیم فرم ما تا حد امکان کوتاه باشد.
فیلد های درست

ایده بیست و یکم: به جای این که تغییرات خود را فورا نشان دهید، آن ها را کم کم نشان دهید.

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

زمانی که شما نوعی تاخیر با استفاده از انیمیشن و یا انتقال ایجاد می کنید باعث می شود که کاربر متوجه شود که چه اتفاقی در حال رخ دادن است و همچنین متوجه شود که تغییری که در حال رخ دادن است تغییر در مکان است و یا سایز.

به خاطر داشته باشید که طول چنین انتقال هایی نباید بیشتر از ۰٫۵ ثانیه باشد، زیرا بیشتر از این زمان، ممکن است برای کاربر خوشایند نباشد. در واقع برای کسانی که دوست دارند همه کارها به سرعت انجام شوند، تاخیر بیش از اندازه چندان جذاب نخواهد بود.

نشان دادن تدریجی تغییرات

ایده بیست و دوم: به جای ثبت نام عجولانه، تعامل تدریجی را امتحان کنید.

به جای این که از کاربران خود بخواهید که سریعا در سایت شما ثبت نام کنند، ابتدا بگذارید عملکرد سایت شما را ببینند تا متوجه ی ارزش هایی که در آن وجود دارد شوند.

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

در واقع تعامل تدریجی راهی است که تا حد امکان روند ثبت نام را به تاخیر می اندازد و به کاربران این امکان را می دهد که از محصولات سایت شما استفاده کنند و آن را سفارش دهند.

تعامل تدریجی

ایده بیست و سوم: به جای این که توجه خود را به هدر دهید، سعی کنید کمتر از مرزها استفاده کنید.

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

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

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

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

ایده بیست و چهارم: به جای این که ویژگی محصولات خود را بیان کنید از مزایای خرید آن صحبت کنید.

فکر می کنم این تکنیک ۱۰۱ ام  بازاریابی است. مردم بیشتر از این که به ویژگی های یک محصول توجه داشته باشند به مزایای آن اهمیت می دهند. مزایا، ارزش های مشخصی از محصول را نشان می دهد. کریس گیلبو در کتاب “استارت آپ ۱۰۰ دلاری ” می نویسد: همه ی مردم به داشتن چیزهای بیشتر مانند عشق، پول، پذیرش و اوقات فراغت اهمیت می دهند و در عین حال می خواهند که استرس، تعارض، دردسر و بلاتکلیفی کمتری داشته باشند.

شما نیز می توانید از این موارد برای بیان مزایای محصولات خود زیاد استفاده کنید.

در زیر می توانید الگویی که مزایا را نشان می دهد را مشاهده کنید.

مزایای خرید

ایده بیست و پنجم: به جای این که برای داده های سنگین طراحی کنید برای داده های صفر طراحی کنید.

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

دنیای داده های صفر، یک مکان سرد است. هنگامی که کاربران برای اولین بار برنامه ی کاربردی شما و آن چه درون آن است را نگاه می کنند، صفحه های خالی بدون راهنمایی را مشاهده خواهند کرد، بنابراین احتمالا شما فرصتی را از دست نمی دهید.

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

داده های صفر طراحی کنید

ایده بیست و ششم: به جای این که تنها گزینه ای برای تایید مخاطب در نظر بگیرید، دو گزینه برای تایید و عدم تایید کاربر در نظر بگیرید.

استراتژی دو گزینه ای به این معناست که کاربران و یا مشتریان به صورت پیش فرض برای شرکت در کاری، نیاز به انتخاب یک گزینه ی پیش فرض ندارند. از طرف دیگر، استراتژی انتخاب یک گزینه ای، سنتی تر است که افراد را ملزم می کند برای این که در کاری شرکت کنند و یا فعالیتی را انجام دهند تنها یک گزینه را باید انتخاب کنند.

این که چرا استراتژی دو گزینه ای بهتر از استراتژی یک گزینه ای است دو  دلیل عمده دارد. اول این که در مسیری که کاربر فعالیتی را انجام می دهد سختی ها را کاهش می دهد زیرا کاربر نیازی نیست که هر کاری را انجام دهد. دوم این که استفاده از استراتژی دو گزینه ای در واقع نوعی توصیه است که البته یک نوع هنجار به شمار می آید-“چون همه ی افراد این گونه عمل می کنند من نیز همین کار را باید انجام دهم”.

البته استراتژی دو گزینه ای به عنوان یک مبحث بحث برانگیز شناخته می شود، زیرا برخی از بازاریابان از آن سوء استفاده می کنند. یکی از معایبی که دارد این است که خوانایی متن را کاهش می دهد و عیب دیگری که دارد این است که در برخی از استراتژی های دو گزینه ای از دو گزینه ی منفی استفاده می شود که این مسئله برای مخاطب گیج کننده خواهد بود.

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

از این گذشته، نکته ی دیگری که باید به آن اشاره کنیم این است که از این تاکتیک در اروپا برای نجات زندگی ها استفاده می شود.

ایده بیست و هفتم: به جای این که نیاز باشد مجددا نکاتی را به کاربران خود بیاموزید، ثبات داشته باشید.

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

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

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

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

در زیر یک نمونه از رابط کاربری سازگار را مشاهده می کنید.

ثبات داشته باشید

ایده بیست و هشتم: به جای این که کارهای زیادی را انجام دهید از مقادیر پیش فرض هوشمند استفاده کنید.

استفاده از مقادیر پیش فرض هوشمند و یا فیلدهای که قبلا با مقادیر مشخصی پر شده اند، میزان کارهایی که کاربر باید انجام دهد را کاهش می دهد. این روش، در واقع به کاربران کمک می کند که در مدت زمان کمتری فیلدهای فرم خود را پر کنند.

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

در زیر می توانید یک نمونه از استفاده از مقادیر پیش فرض هوشمند را مشاهده کنید.

مقادیر پیش فرض هوشمند

ایده بیست و نهم: به جای این که خودتان چیزهایی جدیدی اختراع کنید از موارد قراردادی استفاده کنید.

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

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

در ضمن در هنگامی که می خواهید این کار را ا انجام دهید، اطمینان حاصل کنید که به صورت دقیق به همه نکات فکر کرده اید.

موارد قراردادی

ایده سی ام: به جای این که در سایت خود به بدست آوردن سود تاکید کنید، سعی کنید گزینه هایی ایجاد کنید که از ضرر جلوگیری کنند.

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

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

در زیر یک نمونه از این کاهش ناسازگاری را مشاهده می کنید.

جلوگیری از ضرر

ایده سی و یکم: به جای این که از روند راکدی در سایت خود استفاده کنید از حالت سلسله مراتب بصری استفاده کنید.

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

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

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

سلسله مراتب بصری

ایده سی و دوم: به جای این که اختلال ایجاد کنید موارد مرتبط را گروه بندی کنید.

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

توجه داشته باشید که این اتلاف وقت است که شما به دنبال چیزهایی باشید که برای مردم جذاب نیست.

گروه بندی

ایده سی و سوم: به جای این که در هنگام پر کردن فرم، خطاها را نشان دهید، فیلدهایی که نیاز به پر کردن دارند را نشان دهید.

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

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

فیلدهایی که نیاز به پر کردن دارند

ایده سی و چهارم: در قسمت وارد کردن اطلاعات سختگیری نکنید.

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

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

سختگیری فیلد ها

ایده سی و پنجم:  به جای این که زمان را برای کاربر از دست رفته تعریف کنید، سعی کنید محدودیت زمانی برای کاربر در نظر بگیرید.

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

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

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

در زیر نمونه ای از این الگوی محدویت زمانی را مشاهده می کنید.

محدودیت زمانی

ایده سی و ششم: به جای فراوانی، از روش کمیابی استفاده کنید.

هر چیزی که مقدار کمی از آن وجود دارد، ارزش بیشتری برای آن قائل می شویم. کمبود در واقع به این معناست که قبلا از این مورد، وجود داشته است، امروز کمتر است و فردا ممکن است از امروز هم کمتر باشد. برای مثال یک فروشگاه عمده فروشی و بوتیک را در نظر بگیرید و چگونگی قیمت گذاری آن ها را با هم مقایسه کنید.

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

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

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

همه این موارد باعث می شود که  کاربران برای کسب اطلاعات بیشتر، اقدامی انجام دهند. به عرضه و تقاضا فکر کنید. فکر کنید که کمتر، بیشتر است.

روش کمیابی

ایده سی و هفتم: به جای یاد آوری از روش شناخت کاربران خود استفاده کنید.

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

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

در زیر یک نمونه از این الگوی شناختی را مشاهده می کنید.

شناخت کاربران

ایده سی و هشتم: به جای استفاده از قسمت های کوچک، قسمت های بزرگتری را برای کلیک کردن در نظر بگیرید.

اگر اندازه ی فرم ها، لینک ها و دکمه ها بزرگتر باشد، می توان آسان تر روی آن ها کلیک کرد. طبق قانون فیت، اگر فاصله ی یک چیز از ما زیاد باشد و اندازه ی آن کوچک باشد، کلیک کردن روی آن به زمان بیشتری نیاز دارد. به همین دلیل، قسمت فیلدهای فرم، قسمت تماس برای ثبت سفارش و قسمت لینک ها باید بزرگتر باشند.

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

در زیر یک نمونه از بزرگ بودن ناحیه کلیک را مشاهده می کنید.

کلیک کردن رود وکمه بزرگ

ایده سی و نهم: به جای این که کاربران را منتظر بگذارید، سرعت لود خود را افزایش دهید.

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

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

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

در زیر می توانید نمونه از افزایش سرعت لود صفحه را مشاهده کنید.

ایده چهلم: به جای این که فقط از دکمه ها استفاده کنید، از کلیدهای میانبر نیز استفاده کنید.

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

کلیدهای میانبر مهم را به یاد داشته باشید زیرا می توانند سرعت کار را بیش از پیش افزایش دهند و روی رابط های کاربری گرافیکی نیز تاثیر بگذارند. یک نمونه از استفاده از این کلید های میانبر، استفاده از کلیدهای J و K  است که برای رفتن بعد گام بعدی و قبلی مورد استفاده قرار می گیرند که توسط برنامه هایی مانند Gmail، Google Reader، توییتر و Tumblr شهرت یافته است.

استفاده از دکمه ها بد نیستند، اما می توانید با استفاده از کلیدهای میانبر و انگشت تان، سرعت کار خود را افزایش بیشتری دهید.

0/5 ( 0 نظر )

برچسب ها
به اشتراک بگذارید

نظرات شما برای ما مهم است

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مشاوره رایگان
02177930982