Разлика између UI и UX дизајна

У дигиталном свету, све већи значај има начин на који корисници доживљавају апликације, веб-сајтове и друге дигиталне производе. При томе се често користе појмови UI (енгл. User Interface) дизајн и UX (енгл. User Experience) дизајн, који иако блиско повезани, имају различите улоге у процесу дизајнирања дигиталних производа. У овој лекцији ћеш научити шта значе ови термини, која је разлика између њих, и како заједно утичу на квалитет корисничког доживљаја приликом коришћења дигиталних производа.

Замисли да градиш кућу. UX дизајнер би био архитекта који планира темеље, распоред соба и прозора како би кућа била функционална и удобна. UI дизајнер би био дизајнер ентеријера који бира боје зидова, намештај и осветљење како би та кућа била визуелно лепа и пријатна за боравак

Шта је UX дизајн?

UX дизајн се односи на целокупно искуство које корисник има приликом интеракције са производом. Фокус UX дизајна није на визуелним елементима, већ на томе како је производ структуриран и колико је једноставан, ефикасан и пријатан за коришћење. Крајњи циљ UX дизајна је да кориснику пружи лако, ефикасно и пријатно искуство коришћења производа. UX дизајн треба да одговори на питање: "Како дигитални производ функционише?".

О термину UX дизајн...

Термин UX дизајн постоји од раних деведесетих, а осмислио га је Доналд Норман, когнитивни научник компаније Apple. Нормана су занимали сви аспекти корисничког искуства, од производа или услуге до индустријског дизајна, графике, интерфејса и физичке интеракције. Како би обухватио све елементе који одређују како се корисник осећа током интеракције са производом, дошао је до израза UX, односно "корисничко искуство". То је изузетно разноврсна дисциплина која комбинује аспекте психологије, пословања, истраживања тржишта, дизајна и технологије.

Иако је темеље оваквог размишљања поставио у својој чувеној књизи The Design of Everyday Things, термин UX је формално осмислио раних деведесетих док је радио у компанији Apple. Он је означио почетак ере у којој се уместо фокусирања на сам систем и естетику интерфејса, дизајнер првенствено концентрише на потребе корисника.

Улога UX дизајнера укључује:

Истраживање корисника: Разумевање потреба, циљева и понашања циљне групе кроз интервјуе, анкете и анализе.
Дефинисање структуре и тока: Организовање садржаја и функционалности на логичан и интуитиван начин. Ово укључује креирање мапа сајта и/или корисничких путања.
Креирање модела и прототипова: Израда скица и основних модела производа који се фокусирају на функционалност, а не на естетику.
Тестирање: Провера прототипова са стварним корисницима како би се идентификовали проблеми и побољшало корисничко искуство.

На пример, у веб продавници, UX дизајн се бави лакоћом проналаска производа, дефинисању корака током процеса плаћања и јасноћом целог процеса куповине.

People ignore design that ignores people.

Frank Chimero

Шта је UI дизајн?

UI дизајн се односи на визуелни изглед и стил корисничког интерфејса – све оно што корисник види и са чиме директно комуницира. UI дизајнери бирају боје, фонтове, иконе, распореде и анимације како би изглед био привлачан, јасан и доследан. UI дизајн треба да одговори на питање како дигитални производ изгледа.

О UI дизајну...

Први рачунари користили су бушене картице, прекидаче, дугмад и лампице за улаз/излаз. Кориснички интерфејс и корисничко искуство нису били у фокусу, јер се тада искључиво водило рачуна о функционалности и поузданости. Такав тренд се наставио и са рачунарима који су имали текстуалне корисничке интерфејсе.

UI дизајн дошао у фокус седамдесетих година у компанији Xerox, која је прва развила оперативни систем са графичким корисничким интерфејсом и увела прозоре, иконе, меније и показивач миша. Еволуција UI дизајна наставила се појавом веба и паметних уређаја, што је довело до нових облика интеракције и даљег усавршавања принципа UI дизајна.

Док је UX усмерен на побољшање корисничког искуства како би кориснику било што угодније и лакше, дизајн корисничког интерфејса је у неку руку допуна UX-а – изглед, осећај, презентација и интерактивност производа.

Улога UI дизајнера укључује:

Визуелни дизајн: Одређивање шеме боја, типографије (фонтова), икона и целокупног визуелног идентитета бренда.
Дизајн интерактивних елемената: Обликовање дугмића, клизача, поља за унос текста и свих осталих елемената са којима корисник комуницира.
Креирање визуелног распореда: Распоређивање свих елемената на екрану на начин који је прегледан, доследан и лак за коришћење.
Обезбеђивање доследности: Брига о томе да сви визуелни елементи буду усклађени кроз цео производ, како би се очувао јединствен визуелни стил.

На пример, у веб продавници, UI дизајн се бави распоредом артикала, бојама и фонтовима који се користе, изгледом дугмића и свих других визуелних елемената.

A user interface is like a joke. If you have to explain it, it’s not that good.

Martin Leblanc

Како се UI и UX разликују

Разлике између UI/UX дизајна можеш лако да уочиш на основу података у следећој табели:

Елемент	UI дизајн	UX дизајн
Фокус	Визуелни изглед и интерактивност	Целокупно искуство и "путовање" корисника
Циљ	Да производ буде визуелно привлачан и интуитиван	Да производ буде функционалан, користан и лак за употребу
Питање	Како изгледа?	Како функционише?
Активности	Визуелни дизајн, брендирање, анимације	Истраживање, прототипирање, тестирање, анализа
Улога	Финални изглед екрана, стилски водичи	Мапе сајта, прототипови, резултати тестирања

Како UI и UX сарађују

UI и UX дизајн се међусобно допуњују. Добар UI чини производ привлачним, али без доброг UX-а, може бити тежак за коришћење. С друге стране, апликација са добрим UX-ом, али лошим UI-јем може одбити кориснике због лошег визуелног утиска.

Процес обично почиње са UX дизајном, који поставља темеље ("костур" или wireframe). Након тога, UI дизајнер том костуру даје "кожу" – визуелни идентитет и интерактивне елементе.

Закључак

UI и UX дизајн су кључне компоненте успешног дигиталног производа. Док се UI бави изгледом, UX се фокусира на функционалности и осећају приликом коришћења. Разумевање ове разлике је темељ за свакога ко се бави креирањем дигиталних производа.

Задаци за проверу знања

1. Штиклирај тачне одговоре:

UI дизајн се односи на:
- Логичко организовање садржаја
- Истраживање потреба корисника
- Визуелни изглед интерфејса
- Побољшање искуства корисника
UX дизајн има за циљ:
- Да изглед буде леп и интуитиван
- Да побољша корисничко искуство
- Да се користе транзиције и анимације
- Да се сајт учита што брже
Пример UI дизајна може да буде:
- Дефинисање изгледа дугмета
- Побољшање брзине учитавања сајта
- Организација ставки у менију
- Дефинисање корака приликом регистрације
Пример UX дизајна може да буде:
- Дефинисање изгледа дугмета
- Организација ставки у менију
- Дефинисање боје фонта
- Избор слике у заглављу

Тачни/очекивани одговори

Визуелни изглед интерфејса
Да побољша корисничко искуство
Дефинисање изгледа дугмета
Организација ставки у менију

2. Штиклирај поља у табели:

У табели су помешани појмови који се односе на UI или UX дизајн. Штиклирај поље у одговарајућој колони за сваки појам.

Бр.	Појам	UI	UX
1.	Истраживање навика и потреба корисника
2.	Избор слике у заглављу веб сајта
3.	Дефинисање редоследа табулатора
4.	Визуелни изглед дугмади
5.	Употребљивост апликације на различитим уређајима
6.	Изгледа форме за регистрацију нових корисника
7.	Тестирање различитих корисничких сценарија
8.	Дефинисање боје фонта и боје позадине

Тачни/очекивани одговори

UX,
UI,
UX,
UI,
UX,
UI,
UX и
UI.

3. Препознај и објасни:

Погледај следеће описе ситуација и означи да ли се односе на UI дизајн, UX дизајн или оба. Објасни свој одговор у једној реченици.

Бр.	Опис ситуације	UI, UX или Оба	Објашњење
1.	Апликација лепо изгледа, али је тешко пронаћи потребне опције.
2.	Корисник брзо завршава куповину јер је процес добро осмишљен.
3.	Боје на веб-сајту су усклађене и визуелно пријатне.
4.	Навигација је збуњујућа, иако је изглед модеран и атрактиван.

Тачни/очекивани одговори

Обa - UI је добар (изглед), али UX није (навигација).
UX - UX је добар (процес куповине).
UI - UI је добар (визуелни елементи).
Обa - UI је добар (изглед), али UX није (навигација).

4. Пример из стварног живота:

Изабери један веб-сајт или мобилну апликацију коју често користиш и у кратким реченицама одговори:

Назив сајта или мобилне апликације:
Шта ти се допада у корисничком искуству (UX)?
Шта ти се допада у изгледу интерфејса (UI)?
Шта би променио?

Труди се да будеш што конкретнији у свом одговору (нпр. уместо "поправио би навигацију", напиши "отежано је пронаћи опцију за промену лозинке у подешавањима").

Тачни/очекивани одговори

Мобилна апликација YouTube
Лако могу пронаћи видео записе. Претрага је ефикасна.
Навигација је јасна, "dark" режим је користан.
Променио би UX који се тиче постављања и прегледа коментара.