Задният двор на дизайнаВалентин Ликьов

Interaction designer, Телерик

Защо се налага да правя това?

Не може ли направо да се правят дизайни?

Ами може, но...

• дизайните имат повече детайли и изискват повече време

• скъпи промени

• не показват взаимодействие

Mind the... общата картинка

Прототипите спестяват времена по-късен етап

• бързо изграждане на концепция

• прецизност в правенето на дизайна

• концентрация в съдържание и функционалност

Варианти на подреждане на продукти в главното меню

Супер!

Но откъде да започна?

Как да си направя прототип?

• изисквания

Как да си направя прототип?

• изисквания

• инвентаризация на съдържанието и анализ

Анализ за възможни

оптимизации за достъп

до съдържание през

системата за вход

Как да си направя прототип?

• изисквания

• инвентаризация на съдържанието и анализ

• подреждане на информацията

Как да си направя прототип?

• изисквания

• инвентаризация на съдържанието и анализ

• подреждане на информацията

• инструменти

Фиксирано меню

Фиксирано меню в реалния свят

Падащо меню в реалния свят

Chrome Mobile Google+ app Facebook app

• да се опрости йерархията на страниците

• да се обобщи информацията за продукта - да

разказва история

• отделните секции да са лесно достъпни

• винаги да са под ръка най-важните действия

• да се запазва контекстът на продукта

Нужно ли е да ползвам фиксирано меню?

• често манипулиране на информацията

• много дълги страници

• когато имаме важен CTA

Не е нужно, но помага при:

Ако ползвам фиксирано меню трябва да

• не заема много място

• има контраст

• помисля дали наистина е нужно

Как да разбера правилно ли е това, което правя?• тестове с хора

• софтуер за статистика и анализ

• A/Б тестове

Clicktale stats: страница Telerik Platform

Atention map Scroll reach Mouse move heatmap

Как се правят А/Б тестове?

Hamburger vs MenuThe Final AB Test

exisweb.net

Вариант1 – икона

Вариант2 – надпис

240 000 участници

Android users are almost 3x less likely to click a navigation button than iOS users.

http://exisweb.net/menu-eats-hamburger

А/Б тест на текста в бутона на Тест Студио

Оригинал: Try now Вариант1: Download trial

Валентин Ликьов

facebook.com/valix

twitter.com/valix

Използвани материали

1 - http://starwarsaficionado.blogspot.com/2013/12/classic-image-pre-race-fix-up.html

2 - http://thehipperelement.com/post/77994680911/ui-is-what-you-see-ux-is-why-you-see-it

5 - http://www.tfl.gov.uk/maps/track/tube

19, 20, 21,22 - http://www.optimalworkshop.com/optimalsort.htm

23 - https://www.flickr.com/photos/fergaloid/6334228220/

25 - http://www.rachelilansimpson.com/what-is-it-that-you-do-exactly

26 - https://popapp.in/

27 - http://www.axure.com/

29 - http://libertyhardwares.net/services.html

30 - http://forums.rennlist.com/rennforums/10366251-post278.html

40 - http://www.clicktale.com/

43 - http://exisweb.net/mobile-menu-abtest

45, 46, 47 - https://www.optimizely.com/

48 - http://starwars.wikia.com/wiki/Star_Wars_Episode_I:_The_Phantom_Menace

www.telerik.com

Полезни връзки

Nielsen Norman Group: UX Training, Consulting, & Research

Using, abusing & designing human behaviour

User Experience Stack Exchange

UX Magazine | Defining and Informing the Complex Field of User Experience (UX)

Ideas | Adaptive Path

Design / UX — Medium

UXmatters :: Insights and inspiration for the user experience community