UI/UX дизайн – как ви помагат, по какво се различават, каква е връзката помежду им

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

  • лоша структура на сайта – посетителят се ориентира трудно, не намира каквото му е необходимо от пръв поглед, разсейва се лесно от излишни линкове и информация, etc.; или
  • проблеми с дизайна – недостатъчно контрастни текстове, нечетливи шрифтове, твърде подробни форми или с недостатъчно контрастни полета; неясни призиви за действие, лошо разположени/твърде малки бутони, etc.

Тестване за ползваемост ще ти помогне да разбереш къде точно е проблемът. Специалист/и по UI и UX дизайн е човекът, който ще се справи с него.

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

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

Обичайно UI/UX върви като едно цяло понятие, но всъщност са две различни неща. Защо? Макар да разглеждат два различни аспекта на човешкото поведение, те са неразделна част от процеса на създаване на един потребителски интерфейс, сайт или приложение.

 

UX – означава user experience и се отнася до дизайна на потребителското изживяване

Той разглежда човешката страна при създаване на продукта, независимо дали продуктът е физически или е сайт/приложение.

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

 

UI – означава user interface и се отнася за дизайна на потребителския интерфейс

Неговата цел е да допълни UX чрез способите на визуалната комуникация.
UI/UX в комбинация обхваща целия процес на създаване на дигитален продукт от потребителската персона (образ на вашия потенциален клиент), през функционалността и структурата на приложението, до чисто визуалните елементи (бутони, цветове, изображения, анимации и т.н.)

UX дизайнерът поставя на първо място проблемите на човека и намира най-подходящия път за решаването им.

В процеса на своята работа той:

  • Дефинира проблем.
  • Създава персоната – образ на потенциалния клиент.
  • Разбира нейните нужди и затруднения.
  • Генерира задачите и пътя на потребителя от възникването на нуждата му до крайната цел.
  • Създава идейните скици и прототипи за структурата на системата.
  • Тества системата върху реални фокус групи, за да изследва реалното потребление преди системата да бъде напълно разработена.

UI дизайнерът прави крайния продукт естетически издържан и напълно ясен чрез способите на визуалния дизайн

Създава приятен за използване интерфейс; с помощта на визуалната йерархия фокусира потребителя върху най-важното и го води по разбираем начин до крайната цел. Постига всичко това чрез:

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

Какви цели изпълняват UI и UX

Целта на UX дизайна е да обхване всички аспекти на човешкото изживяване и да ги подобри

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

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

Целта на UI дизайна е визията на продукта да подсилва заложените в UX процеса цели

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

  • анимации и подсказки;
  • удобни за кликане връзки и бутони (особено на мобилна версия);
  • шрифт и размер на буквите;
  • адаптивност за различни устройства;
  • accessibility (достъпност за всички хора с всякакви състояния) и т.н.

Каква е връзката между UI и UX

В идеалния случай UI следва и допълва UX. Докато UX начертава изживяванията на потребителя по потребителската пътека, UI се фокусира върху детайлите, които правят това пътуване възможно.

Най-простичко казано това означава, че:

Ако нещо изглежда страхотно, но работи ужасно, това е пример за добър UI и лош UX. Докато ако нещо работи лесно и приятно, но не е естетически издържано, това е добър UX и лош UI.

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

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

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

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

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

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

===

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

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

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

13 comments to “UI/UX дизайн – как ви помагат, по какво се различават, каква е връзката помежду им”
  1. Здравейте! Аз използвам шаблон на Super Hosting и в началото бях просто спокойна, че вече имам сайт. Но сега ми се иска наистина да помогна на посетителите да намират лесно точно това, което ги интересува, а не знам как да го направя. Затруднява ме разпределянето на съдържанието по страници, но особено ми е трудно да измисля по какъв начин да представя графика на курсовете ни, така че визуално да изглежда добре и също информацията да е лесна за възприемане. Друг въпрос е къде да сложа линкове към медийните представяния на школата и как да го направя – кликане върху заглавие, заглавие с картинка или друг начин. Ще бъда безкрайно благодарна за Вашите насоки!

    • Здравейте, Деяна,

      Моят съвет е да започнете от структурата на сайта:

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

      В това отношение можете да видите предишната ми статия “Как да осъществите целите на сайта чрез дизайн на съдържанието” – https://svobodnapraktika.com/celi-site-design-sadarjanie
      В нея описвам точно логиката на тази структура и изграждането на структуриран за потребителя път до целта.

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

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

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

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

      В статиите в блога можете да добавите линкове към други релевантни статии или към ваши обучения (където е подходящо).

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

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

      Поздрави,
      Люба

  2. Привет Люба 🙂
    Благодаря за предоставената възможност!
    С първият сайт се бях справила добре, но проекта порасна и реших, че ще е по-удачно да се премести на друго място. И така създадох нов сайт – https://domoments.eu/
    Ще съм благодарна за мнението ви и за него, препоръки и забележки.
    Поздрав

    • Здравейте, Дора,

      Помня вашия проект и много се радвам, че се разраства 🙂

      Много добре сте се справила с този сайт, изглежда приятен, ненатрапчив и ясен.

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

      Бутонът в началото води до трите основни продукта и съветвам да сложите линкове към всеки от тях за удобство.

      Като цяло е ясно какво се предлага, но когато се влезе в преглед на конкретен планер, първото впечатление е, че “всичко изчезва”. Виждам, че са на поддомейн, но не разбирам защо е необходимо това и с какво помага на целия бранд.

      Съветвам във футера (или преди него) да се сложат линкове към основните продукти/категории, за да могат хората да бъдат задържани в сайта още малко, дори когато стигнат до края.

      Най-много ми харесва енергията, която струи от сайта, както и леко щурото отношение, което сваля границите с читателя 🙂

      Поздрави,
      Люба

      • Благодаря ви Люба!

        За планерите – нямам идея защо реших, че трябва да са ландинг страници. Сложих им пълното меню от сайта в хедъра и социалните мрежи във футъра 🙂

        За останалото – ще се погрижа. Платформата не дава много възможности, но мисля ще се справя с наличното.

        Хубав ден от мен!
        Поздрави,
        Дора

        • Здравейте, Дора,

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

          Другият вариант е да са страници в същия сайт, като си останат със същия дизайн и елементи. Т.е. да са от типа domoments.eu/лендинг, а не лендинг.domoments.eu.

          Иначе сега началната страница е доста по-ясна. Хубаво е и подменюто с основните продукти.

          Поздрави,
          Люба

  3. Здравейте!
    Имам онлайн магазин за авторско дамско облекло. Преди няколко месеца правихме редизайн и редица подобрения. Все още има неща за довършване. Но много бих искала странично дизайнерско око да го прегледа и даде своите съвети.
    Предварително благодаря!

    • Здравейте, Албена,

      Много добре сте се справили с редизайна. Сайтът излъчва енергия и свобода. Самите продуктови снимки са свежи и цветни и най-важното – изглеждат реалистично.

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

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

      В страница За нас белите букви върху розовия фон също не се четат добре. Можете да направите фона по-тъмен или обратно – по-светъл фон и много тъмно сиви букви.

      Подобряването на контраста важи и за мобилната версия.

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

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

      Поздрави,
      Люба

      • Много благодаря за изчерпателния коментар!
        Това наистина бяха и моите забележки към дигиталната агенция. Все още липсват, реални снимки от работния процес в рубриките За нас, Марката, Дизайнерът, но скоро ще бъдат длбавени.
        А относно това как изглежда видеото на екрана – опитваме се да бъдем максимално гъвкави и различни и често сменяме началната страница.
        Отново благодаря за “точния поглед” отвън на сайта ми.
        Поздрави :Албена

Leave a Reply to Любомира Попова Cancel reply

Your email address will not be published. Required fields are marked *