$30 off During Our Annual Pro Sale. View Details »

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

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

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

thinkphp_com_ua

August 18, 2012
Tweet

More Decks by thinkphp_com_ua

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  10. ЗАЧЕМ ВСЕ ЭТО ?
    Agile
    Development
    +
    User
    Experience

    =
    Материалы по теме: Асхат Уразбаев - UX в Scrum — итерация ноль для проектирования продуктов (UXRussia - 2011);
    Jeff Patton - http://agileproductdesign.com (blog, presentations, articles)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide