Презентация для ThinkPHP #3

1. Дизайн пользовательских
Интерфейсов для
Разработчиков
Докладчик: Малиновский Игорь
#3

2. ПЛАН
• Что это и зачем?
• Что такое хороший интерфейс
• Как создать awesome интерфейс
• Практические примеры

3. Что это и зачем?
Usability
Human Factors
Design
Utility
USER Accessibility
HCI EXPERIENCE
Ergonomics Marketing
System Performance
Источник схемы: http://uxdesign.smashingmagazine.com/2010/10/05/what-is-user-experience-design-overview-tools-and-resources/
Источник материала: Jon Innes «Integrating UX into the Product Backlog The User Experience Integration Matrix»
http://www.boxesandarrows.com/view/integrating-ux-into

4. ЗАЧЕМ ВСЕ ЭТО ?
1 Программирование
BLACK SUPER
BLUZ
X CORE
HYPER
ENGINE
framework library CMS

5. ЗАЧЕМ ВСЕ ЭТО ?
2 Дизайн интерфейсов
«Прикрутили» дизайн

6. Microsoft Office and Microsoft Word is registered trademarks of Microsoft Corporation
MS Office 2007 (Ribbon bar)
MS Office 2003
ЗАЧЕМ ВСЕ ЭТО ?

7. ЗАЧЕМ ВСЕ ЭТО ?
Соотношение количества проданных копий
+108%
250
200
150
100
50
0
MS Office 2003 MS Office 2007
Источник: Исследование NPD Group 2007 опубликованное в www.informationweek.com

8. ЗАЧЕМ ВСЕ ЭТО ?
1 Дизайн интерфейсов
Материал по теме: Денис Кортунов. User experience design: как построить сайт для клиентов, а не для себя

9. ЗАЧЕМ ВСЕ ЭТО ?
2 Программирование

10. ЗАЧЕМ ВСЕ ЭТО ?
Agile
♡
Development
+ =
User
Experience
Материалы по теме: Асхат Уразбаев - UX в Scrum — итерация ноль для проектирования продуктов (UXRussia - 2011);
Jeff Patton - http://agileproductdesign.com (blog, presentations, articles)

11. Что такое хороший интерфейс
1 2 3 4 5 6 7 8
Материалы по теме:
Dmitry Fadeev. User interface design in modern. Smashing book #1 2009;
Влад Головач. Дизайн пользовательского интерфейса. Искусство мыть слона 2010

12. Как создать хороший интерфейс
1 Создавайте «быстрые» прототипы
2 Тестируйте полученные результаты
Материал по теме: Стив Круг. Веб-дизайн: книга Стива Круга или «не заставляйте меня думать» (тестирование)

13. КАК СОЗДАТЬ ХОРОШИЙ ИНТЕРФЕЙС
do {
улучшение
} while
Проблемы устранены
( тестирование not Хорошо )
Материал по теме: Влад Головач. Дизайн пользовательского интерфейса. Искусство мыть слона 2010

14. КАК СОЗДАТЬ ХОРОШИЙ ИНТЕРФЕЙС
Тестируем задавая себе следующие вопросы:
1. Можно ли ускорить взаимодействие пользователя с этим
интерфейсом?
2. Где в этом интерфейсе места, которые могут продуцировать
человеческие ошибки? Можно ли изменить эти фрагменты?
3. Что в этом интерфейсе не способствует обучению? Что
пользователю нужно знать, чтобы успешно
взаимодействовать с этим интерфейсом? Есть ли в этом
перечне что-то, чего сам интерфейс не сообщает
пользователю?
Источник: Влад Головач. Дизайн пользовательского интерфейса. Искусство мыть слона 2010

15. КАК СОЗДАТЬ ХОРОШИЙ ИНТЕРФЕЙС
4. Известно ли мне о пользователях что-нибудь, что делает
этот интерфейс плохим?
5. Удовлетворяет ли этот интерфейс все известные мне
мотивы пользователей?
6. Совместим ли этот интерфейс со средой, в которой
работают пользователи?
7. Есть ли задачи, которые неэффективно отрабатываются
интерфейсом?
8. Сексуален ли этот интерфейс и можно ли его сделать ещѐ
сексуальнее?
Источник: Влад Головач. Дизайн пользовательского интерфейса. Искусство мыть слона 2010

16. Анализ сайта thinkPHP thinkphp.com.ua
Пользователи VK.com не могут авторизоваться (4)
Ребята признающие Подписи побуждающие к действию
исключительно JS (Ruby,
ect) могут сразу отказаться Где я ? (1, 3)
от сайта, так и не узнав, - что это за сайт ?
что их опыт нам тоже - в каком разделе сайта я нахожусь ?
интересен (4) (отсутствует навигация по сайту)
Можно улучшить качество лого (8)
Оригинал

17. АНАЛИЗ САЙТА
Дизайн не адаптирован под
мобильные устройства (6)
Оригинал

18. АНАЛИЗ САЙТА
Пользователи должны действовать –
«Выбрать темы докладов на thinkPHP #4» (7)
Оригинал

19. АНАЛИЗ САЙТА
Каждая буква имеет значение
Материалы по теме:
Денис Кортунов. User experience design: как построить сайт для клиентов, а не для себя;
Разработка реалистичных пользовательских интерфейсов http://habrahabr.ru/post/103317/

20. АНАЛИЗ САЙТА
Вариант улучшения

21. АНАЛИЗ САЙТА
Люди НЕ читают текст*, главное должно быть выделено (1)
18 августа или 8 ? (2)
Нельзя быстро узнать: Что будет? Где будет? Сколько стоит? (7)
* - Материал по теме - Jakob Nielsen How Users Read on the Web http://www.useit.com/alertbox/9710a.html
Оригинал

22. АНАЛИЗ САЙТА
Вариант улучшения

23. АНАЛИЗ САЙТА
Материал по теме - What Makes People Trust Online Gambling Sites? http://fegger.com/articles/chi2002.pdf
Вариант улучшения

25. АНАЛИЗ САЙТА
Можно ускорить
интерфейс за счет
декомпозиции страницы
на две – «Программа» и
«Регистрация» (1)
Интерфейс не отвечает
на следующие
потенциально важные
вопросы:
- Когда начнется?
- Когда закончиться?
- Какая продолжитель-
ность доклада?
- Есть ли «кофе
брейки»?
(5)
Отсутствует
выравнивание
Оригинал некоторых элементов

26. АНАЛИЗ САЙТА
Отсутствует возможность указать количество участников (7)
Оригинал

27. АНАЛИЗ САЙТА
Вариант улучшения

28. АНАЛИЗ САЙТА
Вариант улучшения

29. АНАЛИЗ САЙТА
Неправильное использование паттерна
Пользователь может только догадываться, что это
индикатор наличия докладчика (3)
Можем ускорить интерфейс за счет переноса кнопок
голосования вправо (1)
Оригинал

30. АНАЛИЗ САЙТА
До голосования После голосования
Пользователь не может определить, голосовал ли он
за эту тему или нет (1, 2, 3)
Оригинал

31. АНАЛИЗ САЙТА
Протестируйте этот интерфейс ;)
Оригинал

32. АНАЛИЗ САЙТА
Мой вариант улучшения :)

33. АНАЛИЗ САЙТА
Вариант улучшения

34. Спасибо за внимание