ThinkPHP #3: Дизайн пользовательских интерфейсов для разработчиков

Доклад о том, как продавать свой тру (и не очень) код дороже, доставляя удовольствие заказчикам и пользователям.

Transcript

1. Дизайн пользовательских Интерфейсов для Разработчиков Докладчик: Малиновский Игорь #3
2. ПЛАН • Что это и зачем? • Что такое хороший интерфейс • Как создать awesome интерфейс • Практические примеры
3. Что это и зачем? Источник схемы: 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 USER EXPERIENCE Usability Design Accessibility Marketing System Performance Ergonomics Utility Human Factors HCI
4. ЗАЧЕМ ВСЕ ЭТО ? BLACK X CORE BLUZ HYPER SUPER ENGINE framework CMS library 1 Программирование
5. ЗАЧЕМ ВСЕ ЭТО ? 2 Дизайн интерфейсов «Прикрутили» дизайн
6. MS Office 2003 MS Office 2007 (Ribbon bar) ЗАЧЕМ ВСЕ ЭТО ? Microsoft Office and Microsoft Word is registered trademarks of Microsoft Corporation
7. 0 50 100 150 200 250 MS Office 2003 MS Office 2007 +108% Соотношение количества проданных копий ЗАЧЕМ ВСЕ ЭТО ? Источник: Исследование NPD Group 2007 опубликованное в www.informationweek.com
8. ЗАЧЕМ ВСЕ ЭТО ? Материал по теме: Денис Кортунов. User experience design: как построить сайт для клиентов, а не для себя 1 Дизайн интерфейсов
9. ЗАЧЕМ ВСЕ ЭТО ? 2 Программирование
10. ЗАЧЕМ ВСЕ ЭТО ? Agile Development + User Experience ♡ = Материалы по теме: Асхат Уразбаев - UX в Scrum — итерация ноль для проектирования продуктов (UXRussia - 2011); Jeff Patton - http://agileproductdesign.com (blog, presentations, articles)
11. Что такое хороший интерфейс Материалы по теме: Dmitry Fadeev. User interface design in modern. Smashing book #1 2009; Влад Головач. Дизайн пользовательского интерфейса. Искусство мыть слона 2010 1 2 3 4 5 6 7 8
12. Как создать хороший интерфейс 1 2 Создавайте «быстрые» прототипы Тестируйте полученные результаты Материал по теме: Стив Круг. Веб-дизайн: книга Стива Круга или «не заставляйте меня думать» (тестирование)
13. ( not Хорошо ) КАК СОЗДАТЬ ХОРОШИЙ ИНТЕРФЕЙС тестирование улучшение do { } while Проблемы устранены Материал по теме: Влад Головач. Дизайн пользовательского интерфейса. Искусство мыть слона 2010
14. КАК СОЗДАТЬ ХОРОШИЙ ИНТЕРФЕЙС Тестируем задавая себе следующие вопросы: 1. Можно ли ускорить взаимодействие пользователя с этим интерфейсом? 2. Где в этом интерфейсе места, которые могут продуцировать человеческие ошибки? Можно ли изменить эти фрагменты? 3. Что в этом интерфейсе не способствует обучению? Что пользователю нужно знать, чтобы успешно взаимодействовать с этим интерфейсом? Есть ли в этом перечне что-то, чего сам интерфейс не сообщает пользователю? Источник: Влад Головач. Дизайн пользовательского интерфейса. Искусство мыть слона 2010
15. КАК СОЗДАТЬ ХОРОШИЙ ИНТЕРФЕЙС 4. Известно ли мне о пользователях что-нибудь, что делает этот интерфейс плохим? 5. Удовлетворяет ли этот интерфейс все известные мне мотивы пользователей? 6. Совместим ли этот интерфейс со средой, в которой работают пользователи? 7. Есть ли задачи, которые неэффективно отрабатываются интерфейсом? 8. Сексуален ли этот интерфейс и можно ли его сделать ещѐ сексуальнее? Источник: Влад Головач. Дизайн пользовательского интерфейса. Искусство мыть слона 2010
16. Анализ сайта thinkPHP thinkphp.com.ua Оригинал Подписи побуждающие к действию Где я ? (1, 3) - что это за сайт ? - в каком разделе сайта я нахожусь ? (отсутствует навигация по сайту) Пользователи VK.com не могут авторизоваться (4) Ребята признающие исключительно JS (Ruby, ect) могут сразу отказаться от сайта, так и не узнав, что их опыт нам тоже интересен (4) Можно улучшить качество лого (8)
17. АНАЛИЗ САЙТА Дизайн не адаптирован под мобильные устройства (6) Оригинал
18. АНАЛИЗ САЙТА Пользователи должны действовать – «Выбрать темы докладов на thinkPHP #4» (7) Оригинал
19. АНАЛИЗ САЙТА Каждая буква имеет значение Материалы по теме: Денис Кортунов. User experience design: как построить сайт для клиентов, а не для себя; Разработка реалистичных пользовательских интерфейсов http://habrahabr.ru/post/103317/
20. АНАЛИЗ САЙТА Вариант улучшения
21. АНАЛИЗ САЙТА 18 августа или 8 ? (2) Оригинал Люди НЕ читают текст*, главное должно быть выделено (1) Нельзя быстро узнать: Что будет? Где будет? Сколько стоит? (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. Спасибо за внимание