Овој текст е дел од серијата бесплатни лекции од Brainster во категоријата UX/UI Design. Регистрирај се за уште 60 бесплатни лекции за Маркетинг, UX/UI Design, Project Management, Growth Hacking, Дигитална Трансформација и Кариера.

Кога сакаш да направиш или да купиш нешто додека си на некој вебсајт, ти правиш одлуки. Анализирајќи ги клучните елементи на UX, подобро ќе разбереш како се носат тие одлуки. Со исполнување на потребите на корисниците, ги мотивираме да останат на вебсајтот, да се вклучат во интеракцијата и да бидат позадоволни.

Постојат пет клучни елементи на UX. Сите 5 чекори се зависни еден од друг и целиот процес оди од долу па нагоре.

1. Стратегија

Стратегијата ја дефинира причината зошто апликацијата или продуктот постојат, зошто го правиш целиот бизнис, за кого го правиш и зошто луѓето би го користеле. Главната цел тука е да се дефинираат потребите на корисниците и бизнис целите. Ова може да биде направено преку стратешко истражување каде што би се интервјуирале потенцијалните корисници од една страна, и би се прилагодиле бизнис потребите од друга страна. 

2. Обем

Обемот ги дефинира функционалните и содржинските барања. Кои карактеристики и содржини треба да ги содржи продуктот. Барањата треба да ги задоволат стратешките цели.

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

Содржински барања – информациите кои ни се потребни за да дадат вредност на тоа што го правиме (текст, слики, видео). Без дефинирање на content-от, нема да знаеме колку време ќе ни биде потребно за завршување на проектот.

3. Структура

Структурата јa дефинира интеракцијата на корисникот со продуктот, однесувањето на целиот систем, како е организиран и колку треба да се прикаже во даден момент. Постојат две структурални компоненти: интерактивен дизајн & информациска архитектура.

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

Информациска архитектура (IA) – кога се дадени барањата, дефинира како треба да е организиран content-от и каде да е поставен, со цел да се олесни корисничкото разбирање на продуктот.

Одличен Интерактивен дизајн:

• Им помага на корисниците да ги исполнат нивните цели;
• Има ефективна интерактивност и функционалност (што може да направи корисникот);
• Го информира корисникот за промена на состојби додека е на страната (file has been saved, фидбек кога е внесен погрешен маил, итн.);
• Спречува грешки, кога апликацијата бара потврда од корисникот за потенцијално штетно дејство (пр. бришење).

Одлична Информациска архитектура:

• Го организира content-от по категории и приоритетни информации базирано на потребите на корисниците и бизнис целите;
• Прави лесно разбирлив content и преминувањето од една на друга содржина е едноставно;
• Соодветна е за својата публика;
• Флексибилна е за приспособување и се адаптира при промени.

4. Скелет

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

Wireframes се доста користени за креирање визуелен формат. Тоа всушност е статички дијаграм кој го презентира визуелниот формат на продуктот, во кој спаѓаат content-oт, навигацијата и сите начини за интеракција.

Скелетот е поделен на три дела: Дизајн на интерфејс, дизајн на навигација и дизајн на информации.

Дизајн на интерфејс – презентирање и уредување на елементите за да можат да дејствуваат со функционалностите на апликацијата;

Дизајн на навигација – начинот на движење низ информациите;

Дизајн на информации – презентација на информациите на лесно разбирлив начин.

Скелетотот, треба да одговори на следните прашања:

• Кои визуелни форми треба да бидат претставени на екранот?
• Како интеракциите да бидат презентирани и поделени?
• Како корисникот да се движи низ сајтот или апликацијата ?
• Како content-от јасно да биде претставен?

5. Површина

Последниот чекор. Се однесува на тоа како ќе изгледа твојот продукт, типографија, бои, вистинскиот распоред и сл. Целта е да се поедностават работите, да бидат лесно разбирливи и корисникот да ги апсорбира потребните информации. Треба визуелно да се претстави целиот content и копчињата, за корисникот да знае што може да направи и како да комуницира со нив.

Заклучок:

Сѐ е поврзано. Ако немаш јасна стратегија, цената ја плаќаш во текот на целиот проект. Една обична одлука, може целосно да го измени текот на проектот. Во ред е твоите одлуки да се менуваат од време на време и секако дека можеш да „пивотираш“. Не е добро да донесуваш фиксни одлуки, бидејќи на крај може да испадне продукт кој никој не го сака. Промените се неизбежни. 

Коренот на секој успешен дизајн е стратегија, која подоцна станува обем каде што се поставуваат целите на корисникот и на бизнисот. Следува структурата каде што се дефинираат интеракциите и распределбата на информациите. Преку wireframes „се прават скечови“ за да се презентираат интеракциите и структурата дефинирани во структура. Во скелетот се овозможува информациите да бидат јасно презентирани. На крај, на површина, се земаат во предвид сите одлуки до тогаш донесени и се прави финална визуелна презентација.

Што сакаш да научиш следно? Одбери ја темата која сакаш да ја истражиш, и со брза регистрација стигни до 60 бесплатни лекции кои ќе ти пристигнат на е-mail.

Платформата Brainster лекции произлезе од неколкумесечната едукација преку работа на реални проекти на нашите студенти. Учесниците од Академијата за програмирање и учесниците од Академијата за маркетинг ја креираа оваа алатка преку која секој може да стекне вештини за Маркетинг, UX/UI Design, Project Management, Growth Hacking, Дигитална Трансформација и Кариера.