روش های کاربردی و اصولی بهبود UX/UI وب سایت: اصطلاحات UX (تجربه کاربر) و UI (رابط کاربری) اغلب به جای یکدیگر استفاده می شوند. آنها به قدری به هم مرتبط هستند که درک تفاوت آن ها دشوار است، بنابراین قبل از ادامه، اجازه دهید آنها را تعریف کنیم.
- UX تجربه کلی استفاده از یک وب سایت یا سرویس است
- UI چیزی است که کاربر برای انجام کاری روی آن کلیک یا ضربه می زند
این UX است که کاربران را در وب سایت شما نگه می دارد، بنابراین این اصل اساسی است. این در صندلی رانندگی قرار دارد و رابط کاربری عامل مهمی در نحوه دستیابی به آن است. وقتی به این فکر میکنید که چگونه وبسایت یا خدمات خود را بهتر کنید، این احتمال وجود دارد که هر کاری را که می‌خواهید انجام دهید می‌توان گفت در UX یا UI قرار می‌گیرد.
به یاد داشته باشید: شما رقابت دارید و ایمن ترین راه این است که فرض کنید رقبای شما هر کاری را انجام می دهند که شما می توانید انجام دهید، اما انجام نمی دهند.
بنابراین اجازه دهید برخی از عناصر کلیدی UX و UI را بررسی کنیم تا به شما در درک اصول بهبود وب سایت خود کمک کنیم.
نحوه بهبود UX وب سایت
همانطور که گفته شد،UX تجربه کلی است که کاربران از یک سایت تشکیل می دهند. در تمام اشکال تعامل، انسان ها از “رفلکس جهت گیری” استفاده می کنند. مشهورترین آن توسط یوجین سوکولوف و اولگا وینوگرادوا، عصب‌روان‌شناسان مورد بررسی قرار گرفت، این چیزی است که ما را قادر می‌سازد درباره چیزهایی که نمی‌فهمیم قضاوت فوری داشته باشیم. بنابراین، این قابلیت در روان‌شناسی ما «سخت» است و با مواجهه با چیزهای جدید آشکار می‌شود.
این چیزی است که زیربنای واکنش های فوری ما در مواجهه با افراد جدید و موقعیت های جدید است. برای مثال وب سایت ها. بنابراین درک کنید که اگر قابلیت استفاده ضعیف باشد، مردم واقعاً از وب سایت شما خارج می شوند، نه تنها در چند ثانیه، بلکه به طور بالقوه در چند میلی ثانیه.
بیایید نگاهی به برخی از مشکلات بالقوه و نحوه برخورد شما با حل آنها بیندازیم.
1- حسابرسی و تجزیه و تحلیل UX
هر کسی که در مورد بهبود چیزها جدی است ابتدا آنچه را که در تلاش برای بهبود است اندازه می گیرد. اگر وضعیت کنونی خود را نمیدانید، نمی‌توانید ارزیابی کنید که آیا در حال پیشرفت هستید یا خیر.
بنابراین برای تعیین کمیت معیارهای کلیدی وقت بگذارید. ممکنه سرعت صفحه باشه نرخ پرش. زمان روی صفحه نرخ تبدیل. تعداد فروش. کل فروش مجموعه ای از معیارها را بسازید تا چیزی برای آزمایش داشته باشید، موارد استفاده واقعی که بتوانید برای بهبود آن تلاش کنید. بدون اینها، رویکرد شما فقط می تواند تلاش پراکنده باشد و شما نمی توانید ارزش خود را نشان دهید.
2- سرعت لود صفحه
سرعت صفحه زمان بارگذاری یک صفحه وب است. شاید وسوسه انگیز باشد که فکر کنیم همه از 5 G و اینترنت فیبر استفاده می کنند، اما حتی در شهرهای پایتخت، لزوماً اینطور نیست. شهرها می توانند مناطقی داشته باشند که به درستی از طریق اینترنت فیبر خدمات رسانی نمی شود. در طول بازدید از وب سایت شما، مشتریان دستگاه های تلفن همراه (بیشتر تمام فعالیت های اینترنت تلفن همراه است و سال ها بوده است) می توانند به منطقه 5G رفته و دوباره خارج شوند. یا حتی ممکن است تلفن 5G نداشته باشند.
یک استاندارد تنظیم کنید: آیا صفحه شما حداقل در کمتر از 4 ثانیه در Wi-Fi بارگیری می شود. اگر اینطور نیست، فرض کنید که برخی از بازدیدکنندگان وب سایت شما به سرعت باز می گردند و دیگر باز نمی گردند. ابزارهای رایگانی از منابع مختلف از جمله PageSpeed Insights Google برای کمک وجود دارد. ابزار گوگل نه تنها سرعت، بلکه علل کاهش سرعت را تجزیه و تحلیل می کند و راه حل های ممکن را پیشنهاد می کند.
3- سرفصل های هدفمند
با فرض اینکه شما کلمات کلیدی را تنظیم کرده اید، آیا آنها را در عنوان صفحات خود قرار می دهید؟ موتورهای جستجو گرایش دارند که وزن بیشتری به متن در سرفصل ها بدهند. این بدان معناست که اگر سرفصل‌ها با عباراتی مطابقت داشته باشند که کاربران در موتورهای جستجو وارد می‌کنند، وب‌سایت‌هایی که آن عبارات را دارند به احتمال زیاد توسط الگوریتم‌های موتور جستجو بازگردانده می‌شوند. بله، سئو (بهینه سازی موتور جستجو) بسیار بیشتر از این است، اما این یک قدم مفید در این مسیر است. سرفصل های موجود در محتوا نیز برای مطالعه مناسب هستند. آنها صفحات را برای کاربران به قطعات تکه تکه می کنند در حالی که به طور همزمان آنها را راهنمایی می کنند که قسمت بعدی چیست.
اما محتوا همچنان باید خوب باشد، همچنان باید از برخی موارد آموزنده یا قانع کننده باشد. بدون محتوای مفید، مشتریان چگونه می دانند که شما کی هستید؟
4- فضای سفید
فضای سفید در طراحی وب سایت این است که آیا فضای سفید در اطراف عناصر صفحه مانند متن و عنوان قرار می دهید؟ این فاصله همچنین می تواند برای تصاویر اعمال شود زیرا در حالی که تصاویر تمام صفحه می توانند قدرتمند باشند، می توانند بسیار زیاد نیز باشند. فضای سفید حسی از فضا و اتاق تنفس می دهد که به جلب توجه کاربر کمک می کند.
5- قابلیت دسترسی
مشکلات دسترسی می تواند برای طیف شگفت انگیزی از مردم ایجاد شود. 8 درصد از مردان و 0.5 درصد از زنان کوررنگ هستند. 3.5 درصد افراد دچار اختلال بینایی هستند. اگر نیازهای آنها را برطرف نکنید، پس چرا آنها سراغ یکی از رقبای شما نروند؟
W3C تا به یک مجموعه از دستورالعمل در مورد چگونگی بهبود قابلیت دسترسی برای وب سایت شماست. پیروی از این راهنمایی کمک می کند تا تعداد مشتریانی که می توانند از شما خرید کنند به حداکثر برسد. بنابراین استانداردهای WCAG 2.0 W3C را رعایت کنید.
6- نمایش لیستی مطالب (bullets lists)
هنگامی که محتوای کلیدی را منتشر می کنید، نمایش لیستی می توانند بسیار مفید باشند. آنها برای کاربران واضح هستند زیرا فضای خاصی را در اطراف هر نقطه ایجاد می کنند. همچنین، این درک ضمنی وجود دارد که نمایش لیستی خلاصه‌هایی را ارائه می‌کنند، نه اطلاعات دقیق، بنابراین باعث فشرده شدن اطلاعات می‌شود. این نیز به خوانایی کمک می کند.
نمایش لیستی نیز نباید کسل کننده باشند. آیا چیزی وجود دارد که بتوانید از برندسازی خود استفاده کنید که هر نقطه را به طور مؤثرتری برجسته کند؟ آیا می توانید نمادهای تصویری نمادین را به عنوان نشانه های بصری ایجاد کنید که برند شما را به نحوه ارائه این نقاط گلوله گسترش دهد؟
7- سازگاری و سلسله مراتب
اگر در توسعه همه موارد فوق موفق بوده اید، آخرین عنصر کلیدی که باید در نظر داشته باشید ثبات است . آیا فونت شما در هر صفحه یکسان است؟ اندازه فونت؟ رنگها؟ صفحه آرایی؟ اگر هر صفحه متفاوت باشد، نه تنها مشکل برند است، بلکه ناهماهنگی نیز می‌تواند آزاردهنده باشد. هنگامی که کاربران در مورد نحوه “کارکرد” یک وب سایت تصمیم گرفتند، سپس معرفی صفحاتی که منو را در مکان دیگری قرار می دهند یا رنگ های متفاوتی دارند، واقعا آنها را اذیت می کند.
به عنوان مثال، همانطور که در تصویر صفحه فروشگاه آمازون مشاهده میکنید، تصور کنید که تصویر سرصفحه «فروش اسباب‌بازی‌ها و بازی‌ها» ناگهان زیر چهار تصویر زیر در یک صفحه باشد. این یک ناهماهنگی وحشتناک از نظر ظاهر آن ایجاد می کند. با قرار گرفتن در بالا، یک سلسله مراتب ایجاد می شود. از بالا به پایین می بینیم:
- نوار جستجو
- منو یا دسته‌ها پس از ورود به سیستم
- تصویر بنر برای تبلیغات کلیدی
- تبلیغات ثانویه، دسته ها و یادآوری ورود
این سلسله مراتب چیزی نیست که به تازگی اتفاق افتاده باشد. آمازون به طور تصادفی به جایی که هستند نرسید. همچنین توجه داشته باشید که صفحه از من می‌پرسد که آیا می‌خواهم با ارز محلی خرید کنم یا خیر. این درخواست است، نه تشخیص خودکار و اجبار.
بنابراین سعی کنید قالب های صفحه ایجاد کنید. می توانید با قلم و کاغذ شروع کنید و به استفاده از نرم افزار تصویرسازی مانند Sketch ادامه دهید . تنها در این صورت است که می توانید وب سایتی ایجاد کنید که ظاهر را در کنار هم قرار دهد.
خلاصه پیشرفت های UX
همه موارد فوق، طراحی UX و راهنمایی های زیر، بخشی از بسته ای هستند که هدف آن ایجاد یک تجربه کاربری خوب برای مخاطبان هدف شماست. با معیارهای خود، می‌توانید تصمیم بگیرید که کدام عناصر UX قانع‌کننده هستند. اما با فرض اینکه وبسایت شما یک فروشگاه است، دو معیار کلیدی احتمالاً کل فروش و تبدیل (نسبت افرادی که از سایت شما بازدید می‌کنند و سپس خرید را تکمیل می‌کنند) است. تغییرات به ظاهر کوچک می تواند تبدیل ها را افزایش دهد. اگر فقط سرعت صفحه یا زمان بارگذاری را در نظر بگیریم، VBO دریافت که اگر یک صفحه در 4 تا 5 ثانیه بارگیری شود، نرخ تبدیل تقریباً نصف صفحاتی است که در 1 تا 2 ثانیه بارگیری می شوند.
بنابراین بله، چنین تغییرات به ظاهر کوچکی نه تنها مرتبط، بلکه مهم هستند. اما به یاد داشته باشید: آنها بخشی از بسته ای از بهبودهایی هستند که باید با ایجاد تجربه کاربری بهتر انجام دهید.
نحوه بهبود رابط کاربری وب سایت
UI چیزی است که کاربران در وب سایت شما لمس می کنند. این همان چیزی است که روی آن کلیک یا ضربه می زنند تا آنچه را که نیاز دارند پیدا کنند. اگر UI گیج کننده است یا به آنها کمک نمی کند آنچه را که نیاز دارند پیدا کنند، در این صورت به UX بد کمک می کند که باعث می شود کاربران به جای دیگری بروند.
1- سازگاری
سازگاری در طراحی UI به همان اندازه که در طراحی UX مهم است. تصور کنید اگر روی پیوندی در صفحه اصلی سایت ما کلیک کرده اید و متوجه می شوید که کادر جستجو ناگهان در پایین صفحه قرار دارد. این باعث ناهماهنگی می شود. همچنین، مطمئن شوید که از همان نوع عناصر رابط استفاده می کنید. آیا منوهای شما از کشویی استفاده می کنند؟ چک باکس ها؟ ضامن؟ اگر دائماً این موارد را تغییر دهید، کاربران هرگز نمی توانند در سایت شما مستقر شوند.
بنابراین در نظر بگیرید که چه عناصر رابطی را برای کمک به کاربران وب سایت برای پیمایش و خرید در سایت شما نیاز دارید. چیزی که باید به آن برسید، وب سایتی است که کاربران بتوانند بدون فکر کردن در مورد آن حرکت کنند. هرچه بیشتر باید فکر کنند، رابط کاربری بدتر است. بنابراین به این فکر کنید که چگونه باید رابط کاربری خود را چیدمان کنید. مجدداً، می‌توانید از ابزارهای تصویرسازی برای ترسیم این موارد استفاده کنید. همچنین می توانید ماکت های سریع و کثیف از صفحات وب ایجاد کنید، عناصر رابط مختلف را آزمایش کنید و از یک ژنراتور ipsum lorum برای متن صفحه استفاده کنید. همچنین اطمینان حاصل کنید که نحوه اعمال آن را به طور مداوم در تمام صفحات بیان می کنید.
2- دعوت به اقدام (call to action)
به زبان ساده، «تماس برای اقدام (CTA)» یک انگیزه برای کاربر برای انجام یک اقدام خاص است. مناسب است که به این موضوع آخر بپردازیم زیرا همه چیز به این نقطه منتهی می شود. اگر عناصر بالا برای ایجاد یک تجربه بد وجود نداشته باشند، دکمه فراخوانی به خودی خود همه چیز را تغییر نخواهد داد.
با این حال، اگر موارد فوق را رعایت کرده اید، زمان آن رسیده است که دکمه تماس به اقدام خود را نیز ثابت کنید. ابتدا به متن نمایش داده شده در دکمه فکر کنید. باید فعال باشد، نه منفعل، و فواید کلیک کردن روی دکمه را حتی سریعتر از نقاط گلوله خلاصه کند. شما فضایی برای هدر دادن ندارید، پس دست به کار شوید.
درک مکان قرار دادن دکمه تماس به اقدام و ظاهر دکمه واقعی نیز بسیار مهم است. یک مطالعه نشان داد که اگر برای یافتن دکمه‌های CTA نیازی به پیمایش نباشد، 84 درصد بیشتر کلیک می‌شود.
خلاصه بهبود رابط کاربری
UI صرفاً به این نیست که استفاده از سایت شما را برای مشتریان بالقوه آسان تر کند. بنابراین رابط کاربری در سرویس UX فقط تلاشی انتزاعی برای ارائه تجربه بهتر نیست. UI و UX برای افزایش نرخ تبدیل بهبود یافته اند.
با در دست داشتن معیارها و تکرار مداوم، می توانید تغییرات هدفمندی ایجاد کنید که پتانسیل واقعی برای افزایش فروش دارند.
سخن پایانی
یکی از اصول توسعه چابک درک این موضوع است که همه چیز می‌تواند و باید برای تکرار مداوم در جستجوی بهبود باز باشد، نه اینکه انتظار داشته باشیم همه چیز فوراً کامل شود.
فرآیند طراحی وب سایت شما نیز به همین صورت است. حتی زمانی که همه موارد بالا را اجرا کردید و به یک طراحی خوب با تجربه کاربری مثبت رسیدید، لازم نیست این پایان باشد. در واقع نباید اینطور باشد.
از قابلیت‌های تست A/B استفاده کنید تا بتوانید برای مثال، اگر رنگ دکمه‌های کلیدی را در قسمت تسویه‌حساب تغییر دهید، آزمایش کنید که آیا کاربران سفارش بیشتری می‌دهند یا خیر. می توانید قالب های مختلف صفحه را تست کنید. گزینه های مختلف رابط کاربری را با تفکر اجرا کنید. رویکرد تلاش پراکنده را در پیش نگیرید. درعوض، معیارهای خود را در نظر بگیرید و مشخص کنید که عملکرد شما در کجا ضعیف‌تر است. سپس، شما قادر خواهید بود توسعه وب سایت خود را به موثرترین روش ممکن اولویت بندی کنید.
یک وبسایت خوب باید در چرخه‌ای مداوم از اندازه‌گیری عملکرد باشد. این مزیت شامل UX و UI، تجربه و رابط است، بنابراین از آن استفاده کنید. یک تجربه کاربری عالی با عناصر طراحی جذاب یک شبه اتفاق نمی افتد. وب سایت های بزرگ و موفق از این اصول در طراحی وب سایت خود استفاده کرده اند و همچنان در حال بهبود آن ها هستند.
تیم طراحی وبسایت گروه بازاریابی کوشا ر تلاش است تا با بکارگیری موارد فوق، وبسایتی شایسته کسب و کار شما را ارائه نماید.
