Upload
ivan-ginev
View
242
Download
1
Embed Size (px)
Citation preview
Задният двор на дизайнаВалентин Ликьов
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