Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Дизайн пользовательскихИнтерфейсов дляРазработчиковДокладчик: Малиновский Игорь            #3
ПЛАН• Что это и зачем?• Что такое хороший интерфейс• Как создать awesome интерфейс• Практические примеры
Что это и зачем?                                           Usability       Human Factors                                  ...
ЗАЧЕМ ВСЕ ЭТО ?  1    Программирование        BLACK              SUPER   BLUZ        X         CORE                       ...
ЗАЧЕМ ВСЕ ЭТО ?  2    Дизайн интерфейсов        «Прикрутили» дизайн
Microsoft Office and Microsoft Word is registered trademarks of Microsoft Corporation                                     ...
ЗАЧЕМ ВСЕ ЭТО ?       Соотношение количества проданных копий                                                              ...
ЗАЧЕМ ВСЕ ЭТО ?    1           Дизайн интерфейсовМатериал по теме: Денис Кортунов. User experience design: как построить с...
ЗАЧЕМ ВСЕ ЭТО ?  2    Программирование
ЗАЧЕМ ВСЕ ЭТО ?Agile                                                                             ♡Development            +...
Что такое хороший интерфейс  1      2       3      4      5      6       7      8Материалы по теме:Dmitry Fadeev. User int...
Как создать хороший интерфейс           1                       Создавайте «быстрые» прототипы         2                  ...
КАК СОЗДАТЬ ХОРОШИЙ ИНТЕРФЕЙС  do {                     улучшение   } while                                               ...
КАК СОЗДАТЬ ХОРОШИЙ ИНТЕРФЕЙСТестируем задавая себе следующие вопросы:1. Можно ли ускорить взаимодействие пользователя с э...
КАК СОЗДАТЬ ХОРОШИЙ ИНТЕРФЕЙС 4.     Известно ли мне о пользователях что-нибудь, что делает        этот интерфейс плохим? ...
Анализ сайта thinkPHP            thinkphp.com.uaПользователи VK.com не могут авторизоваться (4)Ребята признающие          ...
АНАЛИЗ САЙТА    Дизайн не адаптирован под    мобильные устройства (6)Оригинал
АНАЛИЗ САЙТА    Пользователи должны действовать –    «Выбрать темы докладов на thinkPHP #4» (7)Оригинал
АНАЛИЗ САЙТА Каждая буква имеет значениеМатериалы по теме:Денис Кортунов. User experience design: как построить сайт для к...
АНАЛИЗ САЙТАВариант улучшения
АНАЛИЗ САЙТА        Люди НЕ читают текст*, главное должно быть выделено (1)        18 августа или 8 ? (2)       Нельзя быс...
АНАЛИЗ САЙТАВариант улучшения
АНАЛИЗ САЙТАМатериал по теме - What Makes People Trust Online Gambling Sites? http://fegger.com/articles/chi2002.pdfВариан...
АНАЛИЗ САЙТА               Можно ускорить               интерфейс за счет               декомпозиции страницы             ...
АНАЛИЗ САЙТА  Отсутствует возможность указать количество участников (7)Оригинал
АНАЛИЗ САЙТАВариант улучшения
АНАЛИЗ САЙТАВариант улучшения
АНАЛИЗ САЙТА   Неправильное использование паттерна  Пользователь может только догадываться, что это  индикатор наличия док...
АНАЛИЗ САЙТА До голосования                  После голосования    Пользователь не может определить, голосовал ли он    за ...
АНАЛИЗ САЙТА       Протестируйте этот интерфейс ;)Оригинал
АНАЛИЗ САЙТАМой вариант улучшения :)
АНАЛИЗ САЙТАВариант улучшения
Спасибо за внимание
Дизайн пользовательских интерфейсов для разработчиков
Upcoming SlideShare
Loading in …5
×

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

2,267 views

Published on

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

Published in: Design
  • Be the first to comment

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

  1. 1. Дизайн пользовательскихИнтерфейсов дляРазработчиковДокладчик: Малиновский Игорь #3
  2. 2. ПЛАН• Что это и зачем?• Что такое хороший интерфейс• Как создать awesome интерфейс• Практические примеры
  3. 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. 4. ЗАЧЕМ ВСЕ ЭТО ? 1 Программирование BLACK SUPER BLUZ X CORE HYPER ENGINE framework library CMS
  5. 5. ЗАЧЕМ ВСЕ ЭТО ? 2 Дизайн интерфейсов «Прикрутили» дизайн
  6. 6. Microsoft Office and Microsoft Word is registered trademarks of Microsoft Corporation MS Office 2007 (Ribbon bar) MS Office 2003ЗАЧЕМ ВСЕ ЭТО ?
  7. 7. ЗАЧЕМ ВСЕ ЭТО ? Соотношение количества проданных копий +108%25020015010050 0 MS Office 2003 MS Office 2007 Источник: Исследование NPD Group 2007 опубликованное в www.informationweek.com
  8. 8. ЗАЧЕМ ВСЕ ЭТО ? 1 Дизайн интерфейсовМатериал по теме: Денис Кортунов. User experience design: как построить сайт для клиентов, а не для себя
  9. 9. ЗАЧЕМ ВСЕ ЭТО ? 2 Программирование
  10. 10. ЗАЧЕМ ВСЕ ЭТО ?Agile ♡Development + =User ExperienceМатериалы по теме: Асхат Уразбаев - UX в Scrum — итерация ноль для проектирования продуктов (UXRussia - 2011);Jeff Patton - http://agileproductdesign.com (blog, presentations, articles)
  11. 11. Что такое хороший интерфейс 1 2 3 4 5 6 7 8Материалы по теме:Dmitry Fadeev. User interface design in modern. Smashing book #1 2009;Влад Головач. Дизайн пользовательского интерфейса. Искусство мыть слона 2010
  12. 12. Как создать хороший интерфейс 1 Создавайте «быстрые» прототипы 2 Тестируйте полученные результатыМатериал по теме: Стив Круг. Веб-дизайн: книга Стива Круга или «не заставляйте меня думать» (тестирование)
  13. 13. КАК СОЗДАТЬ ХОРОШИЙ ИНТЕРФЕЙС do { улучшение } while Проблемы устранены ( тестирование not Хорошо )Материал по теме: Влад Головач. Дизайн пользовательского интерфейса. Искусство мыть слона 2010
  14. 14. КАК СОЗДАТЬ ХОРОШИЙ ИНТЕРФЕЙСТестируем задавая себе следующие вопросы:1. Можно ли ускорить взаимодействие пользователя с этим интерфейсом?2. Где в этом интерфейсе места, которые могут продуцировать человеческие ошибки? Можно ли изменить эти фрагменты?3. Что в этом интерфейсе не способствует обучению? Что пользователю нужно знать, чтобы успешно взаимодействовать с этим интерфейсом? Есть ли в этом перечне что-то, чего сам интерфейс не сообщает пользователю?Источник: Влад Головач. Дизайн пользовательского интерфейса. Искусство мыть слона 2010
  15. 15. КАК СОЗДАТЬ ХОРОШИЙ ИНТЕРФЕЙС 4. Известно ли мне о пользователях что-нибудь, что делает этот интерфейс плохим? 5. Удовлетворяет ли этот интерфейс все известные мне мотивы пользователей? 6. Совместим ли этот интерфейс со средой, в которой работают пользователи? 7. Есть ли задачи, которые неэффективно отрабатываются интерфейсом? 8. Сексуален ли этот интерфейс и можно ли его сделать ещѐ сексуальнее?Источник: Влад Головач. Дизайн пользовательского интерфейса. Искусство мыть слона 2010
  16. 16. Анализ сайта thinkPHP thinkphp.com.uaПользователи VK.com не могут авторизоваться (4)Ребята признающие Подписи побуждающие к действиюисключительно JS (Ruby,ect) могут сразу отказаться Где я ? (1, 3)от сайта, так и не узнав, - что это за сайт ?что их опыт нам тоже - в каком разделе сайта я нахожусь ?интересен (4) (отсутствует навигация по сайту) Можно улучшить качество лого (8)Оригинал
  17. 17. АНАЛИЗ САЙТА Дизайн не адаптирован под мобильные устройства (6)Оригинал
  18. 18. АНАЛИЗ САЙТА Пользователи должны действовать – «Выбрать темы докладов на thinkPHP #4» (7)Оригинал
  19. 19. АНАЛИЗ САЙТА Каждая буква имеет значениеМатериалы по теме:Денис Кортунов. User experience design: как построить сайт для клиентов, а не для себя;Разработка реалистичных пользовательских интерфейсов http://habrahabr.ru/post/103317/
  20. 20. АНАЛИЗ САЙТАВариант улучшения
  21. 21. АНАЛИЗ САЙТА Люди НЕ читают текст*, главное должно быть выделено (1) 18 августа или 8 ? (2) Нельзя быстро узнать: Что будет? Где будет? Сколько стоит? (7)* - Материал по теме - Jakob Nielsen How Users Read on the Web http://www.useit.com/alertbox/9710a.html Оригинал
  22. 22. АНАЛИЗ САЙТАВариант улучшения
  23. 23. АНАЛИЗ САЙТАМатериал по теме - What Makes People Trust Online Gambling Sites? http://fegger.com/articles/chi2002.pdfВариант улучшения
  24. 24. АНАЛИЗ САЙТА Можно ускорить интерфейс за счет декомпозиции страницы на две – «Программа» и «Регистрация» (1) Интерфейс не отвечает на следующие потенциально важные вопросы: - Когда начнется? - Когда закончиться? - Какая продолжитель- ность доклада? - Есть ли «кофе брейки»? (5) Отсутствует выравниваниеОригинал некоторых элементов
  25. 25. АНАЛИЗ САЙТА Отсутствует возможность указать количество участников (7)Оригинал
  26. 26. АНАЛИЗ САЙТАВариант улучшения
  27. 27. АНАЛИЗ САЙТАВариант улучшения
  28. 28. АНАЛИЗ САЙТА Неправильное использование паттерна Пользователь может только догадываться, что это индикатор наличия докладчика (3) Можем ускорить интерфейс за счет переноса кнопок голосования вправо (1)Оригинал
  29. 29. АНАЛИЗ САЙТА До голосования После голосования Пользователь не может определить, голосовал ли он за эту тему или нет (1, 2, 3)Оригинал
  30. 30. АНАЛИЗ САЙТА Протестируйте этот интерфейс ;)Оригинал
  31. 31. АНАЛИЗ САЙТАМой вариант улучшения :)
  32. 32. АНАЛИЗ САЙТАВариант улучшения
  33. 33. Спасибо за внимание

×