Как уеб дизайнерите могат да предотвратят потребителски грешки в сайта

Как насочваме потребителите в сайта към извършване на конкретно действие – това ви споделям в днешната статия, която е своеобразно продължение на „Как да осъществите целите на сайта чрез дизайн на съдържанието“.

Подсказвам ви как да помогнете на потребителите да не сгрешат по пътя, да не излязат от сайта, да не стигнат до „задънена улица“.

В един сайт има доста места, на които потребителят може да се „препъне“, да сгреши, да се затрудни дотолкова, че дори да се откаже от поръчка, която е започнал да прави. Работа на дизайнера е да изследва тези точки на триене и да ги сведе до минимум или когато това е невъзможно, да ги оформи така, че да не се прекъсва действието, което посетителят извършва в сайта.

Ако сте си правили сайта сами и сте използвали готов CMS (система за управление на съдържанието), то тези точки са оформени от разработчика на темата така, че да работят във ваша полза. За всеки случай ги изследвайте и преценете дали съвпадат с вашите цели. След като персонализирате темата и добавите своето съдържание, отново проверете дали има места, които могат да спънат потребителя, за да ги коригирате и да направите престоя му в сайта максимално лек и полезен.

Кои са точките на триене в един фирмен уеб сайт

Цялостната структура на уеб сайта.
Навигацията и елементите, свързани с извършване на действие.
Формите за обратна връзка и поръчка.
Изображенията.
Страница 404.

Как да ги оформите така, че да предотвратите възможността елемент, грешка или неразбран детайл да откажат потребителя да продължи да взаимодейства със сайта, а и с бранда ви?

Направете всичко ясно, отчетливо и недвусмислено:

Постарайте се да си личи кой елемент какъв е, защо е поставен точно на това място и накъде води.
Изяснете изисква ли се извършване на действие от посетителите, или става въпрос само за възприемане на информация.
Погрижете се да е ясно как потребителят да се върне обратно или да продължи напред, когато все пак се стигне до грешка.

Как да осигурите максимална яснота в точките на триене

1. Цялостната структура на уеб сайта

Структурата на сайта е свързана с цялостната подредба на елементите и съдържанието. От нея зависи дали сайтът дава яснота за бранда и продуктите/услугите и дали потребителят ще се ориентира достатъчно лесно, за да изпълни своята лична цел. Колкото е по-ясна е структурата, толкова по-малко грешни решения биха взели потребителите.

От цялостната структура зависят и ограниченията, които ще поставите на посетителите. Важно е да структурирате нещата така, че да става ясно какви решения няма смисъл да бъдат взимани, защото не са релевантни с вашата сфера, дейност, etc. Например, ако не продавате продуктите си онлайн, трябва да става ясно, че това не е онлайн магазин, като в същото време е указано как посетителят може да си поръча.

Ако този фундамент не е спазен, всички останали детайли губят значението си и ориентацията може да стане дори невъзможна. Най-важното е да се съобразите с обичайните модели на поведение. Хората имат изградени навици при работа с уеб сайтове. Ако им позволите да разчитат на тях, няма да имат проблеми с ориентацията. Това значи да поставите елементите на обичайните им места.

Логото и главното меню да са в хедъра. Нека логото ви е видимо от всички страници на сайта.

Социалните мрежи да са във футера. Ако сте по-социални и наистина искате да ангажирате вниманието на хората, то тогава може да ги поставите и в хедъра.

Да има лесен достъп до контактната страница, продуктите и услугите чрез линкове в менюта, футера и в края на съдържанието.

Ако има поп-ъпи, нека те да се появяват след като потребителят е стигнал поне до средата на страницата и са минали поне няколко секунди. Не забравяйте, че техният дизайн е част от цялостното впечатление, което създава сайта ви. Направете офертата консистентна, ако предлагате продукт или много ярка, ако имате промоция. Ако поп-ъпът е свързан с бисквитки и социални мрежи, по-добре го оставете с обичайния му дизайн, за да е ясно от пръв поглед какво е това.

Запазете обичайните цветове на елементите. Тези на бранда да са по основните секции. Червеното ползвайте за грешки и горещи оферти. Зеленото – за изпълнена задача и изпратено запитване. Синьото – за информативни съобщения и т.н.

Запазете бранд консистентността си и избягвайте да се водите сляпо по модерните тенденции. Да, нека сайтът ви е модерен, но не влагайте в него нашумял елемент или функционалност, които биха затруднили четенето или биха били несъвместими с цялостния му вид.

Не преувеличавайте значението на допълнителните страници като блога (освен ако сайтът ви не е изцяло блог), но и не забравяйте да се грижите за тях – сайтът не е само началната и продуктовата страница.

Не пренебрегвайте ясната функционалност за сметка на красивия дизайн, но и не залагайте само на функционирането на сайта, без да се погрижите за естетическата наслада при използването му.

Не претоварвайте потребителите с твърде много информация, включително и визуална. Използвайте всичко необходимо, за да дадете най-пълната информация (текст, заглавия, снимки, цитати, диаграми, видео) и не добавяйте излишни неща, само за да ги има или само, за да направите статиите си по-дълги.

2. Навигацията на уеб сайта и елементите, свързани с извършване на действие

Навигацията в сайта не се изчерпва само с главното меню, тя засяга всички допълнителни менюта във футера; бутоните; всички линкове между страниците; поп-ъпите с оферти, които водят към продуктовите ви страници; продуктовите категории и филтри; дори връзките към социалните ви мрежи.

Ако тя е достатъчно ясна, то хората няма да се озоват на страници, които не ги интересуват или на такива, които са второстепенни за вас. Например оставете всичко най-важно в главното меню и изнесете второстепенните неща във футера. Така ще избегнете възможността посетителите да се подведат.

Препоръчвам да спазвате обичайните места и визия на навигационните елементи, за да водите хората в сайта си по елегантен начин:

Главното меню трябва да е изчерпателно, но и без излишна информация.

Навигацията във футера трябва да е по-малко контрастна, когато става въпрос за второстепенни страници и по-контрастна, когато става въпрос за важната информация (За нас, Услуги, Препоръчвани продукти, най-ново в блога). Не случайно футерът се използва като място за допълнителна информация. От една страна тук можете да поставите „невидими“ линкове, които сте длъжни да имате (като Общите условия) и „служебни“ връзки за доставки и условия за използване. От друга страна тук е мястото, в което сайтът просто свършва и затова е добра идея да се поставят линкове към най-важните ви страници, които да са достатъчно контрастни, за да привличат погледа.

Не прекалявайте с бутоните – тяхното място е там, където се очаква потребителят да извърши действие – поръчка, изпращане на запитване, разглеждане на оферта. Ако дадена връзка просто води някъде в сайта ви, по-добре я оформете като подчертан текст, за да е напълно ясно, че това е линк.

Ако в сайта ви има акценти, които водят до вътрешна страница (това обичайно се случва на начална страница, на лендингите или на услуги), то направете ги така, че да си личи, че са кликаеми – добавете бутон с ясен призив, подчертайте заглавието. Много по-удобно е да направите цялото поле кликаемо, особено за потребителите на мобилна версия. И обратно – ако даден елемент не е линк, не използвайте излишни подчертавания и рамки.

Листингите също са част от навигацията – това са страниците с категории; каретата със свързани постове и подобни продукти; общата страница с услуги и оферти, от която се достъпва всяка отделна услуга/оферта поотделно. Хубаво е елементите в листингите да са линкове – заглавието, изображението, бутонът или линк „Вижте повече“.

Ако имате онлайн магазин, обърнете специално внимание на продуктовите категории, филтрите и свързаните продукти. Нека визуално е ясно кое е категория и кое подкатегория – в менютата това се прави с отстъпи на подкатегориите спрямо основните категории. Филтрите трябва да са лесно достъпни и лесно кликаеми, особено на мобилна версия, където е необходима по-голяма кликаема площ, отколкото на десктоп. Допълнителните оферти в продуктовите страници е по-добре да са след продукта и да са ясно отделени чрез повече въздух и голямо заглавие (освен ако нямате много добра причина да разсейвате потребителя, за да го насочите към подобен продукт).

Линковете към социалните мрежи са част от навигацията, независимо, че те изкарват хората в сайта. Или точно заради това трябва да имате наистина основателна причина да мотивирате посетителите да напуснат сайта ви. Ако сте достатъчно активни, за да ги връщате обратно чрез постовете си, то ги поставете в хедъра и футера и ги оставете цветни, като запазите точно техните бранд нюанси. Ако не сте чак толкова активни, ги добавете само във футера и ги направете сиви. Разбира се, ако сайтът ви е по-минималистичен или много свързан с бранд цветовете ви, то можете да съобразите и тези линкове с това.

3. Формите за обратна връзка и поръчка

Формите трябва да съдържат минималния брой полета, за да улеснят потребителя и за да не го отблъснат. Никой не обича да му искат твърде много данни. Колкото по-минималистчни са формите, толкова по-лесни са за попълване – хората не се чудят какво се очаква от тях и не допускат грешки, които да ги връщат за второ попълване и проверка.

Добра практика е полетата за попълване да са добре видими, с ясно четливи описания и плейсхолдъри (текстът вътре в полето). Удобство е, когато активното поле е подчертано с по-контрастна рамка. Задължителните полета трябва да са отличими спрямо останалите, за да не бъдат пропуснати.

Видът на полетата трябва да съответства на това, което ще се пише в тях. Ако ще е текст – да е текстово поле; за телефонен номер – цифрово поле; за съобщение – text area.

Съобщенията за грешки за част от преживяването на потребителя. Можете да ги избегнете, когато направите формата достатъчно ясна. Но когато все пак човекът сгреши, е редно да бъдат ясно описани и да се намират под съответното сгрешено поле. Редно е да са в червен цвят, за да дават категорична визуална информация, че това е грешка, а и за да са контрастни спрямо останалата част от формата.

Съобщението за успешно изпратено съобщение е хубаво да е в зелено, да е ясно видимо и да дава ясна информация кога се очаква отговор. Още по-добре е, когато това съобщение се намира на друга страница (т. нар. Thank-You page), където имате възможност да сложите повече текст и добавите линк към релевантно съдържание в сайта, за да задържите потребителите още малко.

4. Изображенията

Изображенията са основна част от визията на сайта и в същото време носят много информация. Важно е да са изчерпателни и точни, да не се появяват само, за да ги има.

Правилният им подбор ще даде възможност на посетителите да разберат още на пръв поглед какъв е този сайт и какво има в него.

По-добре да са реални снимки, отколкото фотографии от имидж банки. Ако текстът е по-абстрактен, съвсем спокойно могат да са илюстрации. Когато става въпрос за продукт, е хубаво да има повече изображения, които показват външния вид на продукта и как се употребява.

Същото важи и за видеата и иконките – добре е да ги има, когато поясняват, дават информация и улесняват. Грешка е да се използват, само защото е модерно или ги има в темата, която сте използвали за основа.

5. Страница 404

Страницата с грешка 404 се появява рядко, но когато потребителят попадне на такава е добре да бъде насочен обратно към сайта. Не само към началната страница, но и към важен за вас продукт или услуга. Ако страницата е персонализирана с интересно изображение, то разочарованието от грешката може да се смени със симпатии към бранда.

Ако имате много и различно съдържание в сайта си, можете да поставите и търсачка, за да дадете възможност на хората сами да изберат какво искат да видят.

Прегледайте статията „5 страници в твоя сайт, от които губиш клиенти“, за повече идеи относно текстовото съдържание на страница 404 и благодарствената страница.

Как да изследваме точките на триене в един фирмен уеб сайт

Тествайте лично и гледайте сайта все едно сте потребител. Пробвайте всеки линк, всеки бутон и всяка форма. Опитайте се да влезете от различни страници и да проверите лесно ли се достига до най-важната ви информация. Искайте обратна връзка, когато общувате с клиенти, познати и приятели.

Гледайте статистиките – инструменти като Google Analytics могат да ви дадат ясна представа кои страници са най-посещавани, на кои страници се отказват най-често хората и какви пътища изминават в сайта ви. Инструменти като Hotjar и Yandex Metrica могат да ви покажат карти и видео сесии, в които да разберете нагледно какво прави потребителят в сайта ви.

Анализирайте резултатите и преценете как да подобрите визията, за да поясните структурата – използвайте контраст, размер и форма, за да подсилите елементите, на които искате да дадете предимство.

Keep it simple!

Никога не забравяйте да държите крайната цел под око. Ако сте онлайн магазин, всичко трябва да води към продуктовата страница. Ако сайтът ви е имиджов, нека контактите са лесно достъпни. Ако имате блог, дайте предимство на статиите.

Каквото и да добавяте в сайта, каквато и красива визия да му направите, всички страници винаги трябва да водят към крайната цел. Понякога непряко, а през няколко стъпки, но винаги потребителят трябва да има яснота, къде и да се намира.

Ако искате да задълбаете в подобренията по сайта си, препоръчвам тези статии, които съдържат основни съвети за дизайн, UX, SEO, брандинг, съдържание и потребителски нужди.

Искате ли да разберете дали вашият уеб сайт има непреодолими точки на триене, които биха отблъснали потребителя? Споделете линк в коментар под този пост и аз ще ви дам обратна връзка.

===

Любомира Попова е уеб дизайнер на свободна практика и художник-сюрреалист с артистичен псевдоним Fineluart.
Създава първия си статичен сайт през 2008. В момента се е специализирала в изработката на WordPress сайтове и визии за уеб. Занимава се с дизайн повече от 17 години, като през повечето време е била част от рекламни фирми и агенции. Създавала е визии за почти всички рекламни среди – външна, печатна, уеб, digital, TV. Работи основно с малки бизнеси в сферата на услугите, макар през годините да е правила реклами за представители на почти всички сфери.

Има професионален интереси в областта на дигиталния маркетинг, графичния дизайн и social media. Това ѝ дава възможност да вижда уеб сайтовете не само като дизайн, а като част от визуалната комуникация между бранда и потребителя. За нея всяка отделна визия е част от цялостно развитие, а не „парче дизайн“.

„Редовно консултирам клиенти и млади колеги и винаги се радвам, когато успея да улесня някого по пътя му в моята (любима) сфера. Ако имате въпроси за дизайн и реклама, съм насреща да помогна, независимо дали става въпрос за принципи в дизайна, тенденции, технически въпроси, видове реклами или се нуждаете от конкретни съвети за личните си проекти. Питайте ме.“ Люба