Хитрости UX-дизайна
Главные лайфхаки, которые должен
знать любой разработчик
Дизайн – это не то, как предмет
выглядит, а то, как он работает.
Стив Джобс
Хороший дизайн:
1.Инновационный
2.Делает продукт полезным
3.Эстетичен
4.Помогает продукту быть понятным
5.Ненавязчив
6.Честен
7.Надёжен
8.Продуман до мельчайших деталей
9.Беспокоится об окружающей среде
10. Хороший дизайн — это как можно
меньше дизайна
Дитер Рамс, проектировщик Braun
«10 правил хорошего дизайна»
UX = User eXperience
(пользовательский опыт)
— это ощущения, возникающие у человека при
непосредственном взаимодействии с объектами
окружающего мира. В более узком смысле, опыт
взаимодействия характеризует личное восприятие
человеком функциональных и эмоциональных
характеристик продукта или услуги в процессе
использования.
Wikipedia
UX не рождается в голове дизайнера, его формируют
пользователи
UX – не графический
дизайн или
интерфейс
UX – то, что
пользователь
ощущает, когда им
пользуется
UX – преобладание практики над теорией. Решения
UX-дизайнера должны базироваться на рациональном
фундаменте.
Поэтому…
UX должен измеряться. Будь то количество
пользователей, которые произвели ключевое действие
или количество уникальных пользователей, которые
заходят ежедневно в личный кабинет, добавляют
контент, удовлетворены работой с продуктом.
UX без метрики не существует.
UX должен измеряться
UX должен измеряться
Инструменты:
1. Google Analytics (http://www.google.com/analytics/)
2. Yandex.Metrika (https://metrika.yandex.ua)
3. Piwik (http://piwik.org/)
4. Clicky (http://clicky.com/)
5. Отчеты из базы данных ресурса
6. NPS http://www.npscalculator.com/
UX должен измеряться
Место UX
? ?
?
Место UX
UX
UI / Usability / UX
UI
Функция: Она работает
Usability
Действие: Оно хорошо работает
UX
Эмоции: Оно хорошо работает и заставляет воскликнуть «Вау!»
Дж. Гаррета
Визуальный (графический) дизайн
Дизайн интерфейса Дизайн навигации
Проектирование
взаимодействия
Информационная
архитектура
Функции (фичи) Требования контента
Описывает бизнес цели, цели пользователей, что будет
мерилом успеха
Список функциональности, тип контента – всё, что
необходимо для удовлетворения потребностей
пользователей
Структура (страницы) продукта, иерархия, пути
использования продукта пользователями
Вид / представление информации, элементы навигации
по структуре продукта, представление контента
Визуальное / графическое представление каждого
элемента продукта
5 уровней UX
Информационный дизайн
Потребности пользователей
Цели сайта
User Experience = Experience
И ТОЧКА!
Персонаж – это архетип пользователя, представляющий
определенную поведенческую модель.
Персонаж
Социально-демографические данные1
Психологический профиль и поведение2
Кто и как влияет на персонажа3
Архетип и ключевая цитата
персонажа
4
Опыт работы с технологиями (кроме устройств)5
UX ожидания6
Использование устройств и платформ7
Сфера использования устройств8
Должен делать / Не должен делать (в рамках
продукта)
9
Отношение к бренду / продукту, конкурентам10
Стиль жизни+
Персонаж
Сценарии взаимодействия
Как получить необходимую информацию?
Сформируйте одну цель для
опроса, не распыляйте;
Используйте онлайн опросы;
Старайтесь проводить опросы на
своей аудитории;
Опросы
Не перестарайтесь с количеством
вопросов;
Измеряйте результаты.
Заранее готовьте вопросы;
Задавайте открытые вопросы;
Во время интервью один беседует,
другой записывает;
Интервью
Общайтесь с вашей аудиторией;
Не бойтесь остановить
респондента, если при ответе
ушел в сторону.
A/B тестирование (split)
Ставьте конкретную цель;
Не плодите много вариантов за
один тест;
Заранее продумайте необходимые
данные, которые нужны для
определения эффективности теста;
Не делайте преждевременные
выводы;
Не упускайте из виду
второстепенную статистику;
Источники траффика должны быть
одинаковыми для всех вариантов;
Результат должен выражаться в
числах (% конверсии).
Привлекайте как можно меньше
модераторов (один моделирует
действия, другой записывает);
Просите их комментировать свои
действия;
Обращайте больше внимание на то,
что делают, а не говорят;
Расслабьте респондента;
Пользовательское (юзабилити) тестирование
Тестируйте существующий продукт
или прототип;
Приблизьте тестирование к
максимально реальной ситуации
респондента;
Давайте задания респонденту;
Не подсказывайте, а спросите про
ожидания.
Этапы UX
Empathize
Define
Ideate
Prototype
Test
Evaluate
Мифы о дизайне
Пользователи не скроллят.
Нужно главное размещать в первом экране
1
Пользователь должен достичь цели за 3 клика2
S1E4 Shock Therapy
Главная страница - самая важная3
Пользователь читает весь текст,
что вы написали
4
Зеленая кнопка "Сохранить" – хорошо.
Красная "Сохранить" - плохо
5
Дизайн должен быть оригинальным6
Вы и ваш пользователь – одно и тоже7
Пользователи действуют рационально8
Мои пользователи – все люди на Земле9
Если это сработало у Google (любая другая компания),
это сработает у меня
10
Больше выбор (возможностей) - лучше11
Можно создавать дизайн, не имея контента12
UX нужен только внутри интерфейса13
На этом всё. Спасибо вам за внимание.
Николай Грачёв
grachov.nick@gmail.com
http://facebook.com/nick.grachov
Литература
Алан Купер об
интерфейсе. Основы
проектирования
взаимодействия
Алан Купер
Дизайн привычных
вещей
Дональд Норман
Веб-дизайн: книга Стива
Круга или "не
заставляйте меня
думать!", 2-е издание
Стив Круг
UX-дизайн. Практическое
руководство по
проектированию опыта
взаимодействия
Расс Унгер
Полезные ссылки
О персонажах
http://www.ux-lady.com/introduction-to-user-personas/
http://www.uxbooth.com/articles/creating-personas/
http://www.copyblogger.com/empathy-maps/
http://zillion.net/ru/blog/354/sozdaniie-profilia-potriebitielia-na-osnovie-karty-empatii
http://uxexperience.net/useful/artefakty-karta-empatii
О сценариях
http://www.usability.gov/how-to-and-tools/methods/scenarios.html
http://www.webdesignerdepot.com/2015/04/how-to-perfect-your-ux-with-persona-scenarios/
http://www.uxforthemasses.com/scenario-mapping/
http://blog.usabilla.com/how-user-scenarios-help-to-improve-your-ux/
Методы и способы
http://www.usabilityfirst.com/usability-methods/
Ресурсы по теме
http://uxmovement.com/
http://uxmag.com/
http://usabilitypost.com/
https://medium.com/mental-notes/7bbb96465500

Хитрости UX-дизайна: ключевые лайфхаки, которые должен знать разработчик

  • 1.
    Хитрости UX-дизайна Главные лайфхаки,которые должен знать любой разработчик
  • 2.
    Дизайн – этоне то, как предмет выглядит, а то, как он работает. Стив Джобс
  • 3.
    Хороший дизайн: 1.Инновационный 2.Делает продуктполезным 3.Эстетичен 4.Помогает продукту быть понятным 5.Ненавязчив 6.Честен 7.Надёжен 8.Продуман до мельчайших деталей 9.Беспокоится об окружающей среде 10. Хороший дизайн — это как можно меньше дизайна Дитер Рамс, проектировщик Braun «10 правил хорошего дизайна»
  • 4.
    UX = UsereXperience (пользовательский опыт) — это ощущения, возникающие у человека при непосредственном взаимодействии с объектами окружающего мира. В более узком смысле, опыт взаимодействия характеризует личное восприятие человеком функциональных и эмоциональных характеристик продукта или услуги в процессе использования. Wikipedia
  • 5.
    UX не рождаетсяв голове дизайнера, его формируют пользователи
  • 6.
    UX – неграфический дизайн или интерфейс UX – то, что пользователь ощущает, когда им пользуется
  • 7.
    UX – преобладаниепрактики над теорией. Решения UX-дизайнера должны базироваться на рациональном фундаменте. Поэтому… UX должен измеряться. Будь то количество пользователей, которые произвели ключевое действие или количество уникальных пользователей, которые заходят ежедневно в личный кабинет, добавляют контент, удовлетворены работой с продуктом. UX без метрики не существует.
  • 8.
  • 9.
  • 10.
    Инструменты: 1. Google Analytics(http://www.google.com/analytics/) 2. Yandex.Metrika (https://metrika.yandex.ua) 3. Piwik (http://piwik.org/) 4. Clicky (http://clicky.com/) 5. Отчеты из базы данных ресурса 6. NPS http://www.npscalculator.com/ UX должен измеряться
  • 11.
  • 12.
  • 13.
    UI / Usability/ UX UI Функция: Она работает Usability Действие: Оно хорошо работает UX Эмоции: Оно хорошо работает и заставляет воскликнуть «Вау!»
  • 14.
    Дж. Гаррета Визуальный (графический)дизайн Дизайн интерфейса Дизайн навигации Проектирование взаимодействия Информационная архитектура Функции (фичи) Требования контента Описывает бизнес цели, цели пользователей, что будет мерилом успеха Список функциональности, тип контента – всё, что необходимо для удовлетворения потребностей пользователей Структура (страницы) продукта, иерархия, пути использования продукта пользователями Вид / представление информации, элементы навигации по структуре продукта, представление контента Визуальное / графическое представление каждого элемента продукта 5 уровней UX Информационный дизайн Потребности пользователей Цели сайта
  • 15.
    User Experience =Experience И ТОЧКА!
  • 16.
    Персонаж – этоархетип пользователя, представляющий определенную поведенческую модель.
  • 17.
    Персонаж Социально-демографические данные1 Психологический профильи поведение2 Кто и как влияет на персонажа3 Архетип и ключевая цитата персонажа 4 Опыт работы с технологиями (кроме устройств)5 UX ожидания6 Использование устройств и платформ7 Сфера использования устройств8 Должен делать / Не должен делать (в рамках продукта) 9 Отношение к бренду / продукту, конкурентам10 Стиль жизни+
  • 18.
  • 19.
  • 20.
  • 21.
    Сформируйте одну цельдля опроса, не распыляйте; Используйте онлайн опросы; Старайтесь проводить опросы на своей аудитории; Опросы Не перестарайтесь с количеством вопросов; Измеряйте результаты.
  • 22.
    Заранее готовьте вопросы; Задавайтеоткрытые вопросы; Во время интервью один беседует, другой записывает; Интервью Общайтесь с вашей аудиторией; Не бойтесь остановить респондента, если при ответе ушел в сторону.
  • 23.
    A/B тестирование (split) Ставьтеконкретную цель; Не плодите много вариантов за один тест; Заранее продумайте необходимые данные, которые нужны для определения эффективности теста; Не делайте преждевременные выводы; Не упускайте из виду второстепенную статистику; Источники траффика должны быть одинаковыми для всех вариантов; Результат должен выражаться в числах (% конверсии).
  • 24.
    Привлекайте как можноменьше модераторов (один моделирует действия, другой записывает); Просите их комментировать свои действия; Обращайте больше внимание на то, что делают, а не говорят; Расслабьте респондента; Пользовательское (юзабилити) тестирование Тестируйте существующий продукт или прототип; Приблизьте тестирование к максимально реальной ситуации респондента; Давайте задания респонденту; Не подсказывайте, а спросите про ожидания.
  • 25.
  • 26.
  • 27.
    Пользователи не скроллят. Нужноглавное размещать в первом экране 1
  • 28.
    Пользователь должен достичьцели за 3 клика2 S1E4 Shock Therapy
  • 29.
    Главная страница -самая важная3
  • 30.
    Пользователь читает весьтекст, что вы написали 4
  • 31.
    Зеленая кнопка "Сохранить"– хорошо. Красная "Сохранить" - плохо 5
  • 32.
    Дизайн должен бытьоригинальным6
  • 33.
    Вы и вашпользователь – одно и тоже7
  • 34.
  • 35.
    Мои пользователи –все люди на Земле9
  • 36.
    Если это сработалоу Google (любая другая компания), это сработает у меня 10
  • 37.
  • 38.
    Можно создавать дизайн,не имея контента12
  • 39.
    UX нужен тольковнутри интерфейса13
  • 40.
    На этом всё.Спасибо вам за внимание. Николай Грачёв grachov.nick@gmail.com http://facebook.com/nick.grachov
  • 41.
    Литература Алан Купер об интерфейсе.Основы проектирования взаимодействия Алан Купер Дизайн привычных вещей Дональд Норман Веб-дизайн: книга Стива Круга или "не заставляйте меня думать!", 2-е издание Стив Круг UX-дизайн. Практическое руководство по проектированию опыта взаимодействия Расс Унгер
  • 42.
    Полезные ссылки О персонажах http://www.ux-lady.com/introduction-to-user-personas/ http://www.uxbooth.com/articles/creating-personas/ http://www.copyblogger.com/empathy-maps/ http://zillion.net/ru/blog/354/sozdaniie-profilia-potriebitielia-na-osnovie-karty-empatii http://uxexperience.net/useful/artefakty-karta-empatii Осценариях http://www.usability.gov/how-to-and-tools/methods/scenarios.html http://www.webdesignerdepot.com/2015/04/how-to-perfect-your-ux-with-persona-scenarios/ http://www.uxforthemasses.com/scenario-mapping/ http://blog.usabilla.com/how-user-scenarios-help-to-improve-your-ux/ Методы и способы http://www.usabilityfirst.com/usability-methods/ Ресурсы по теме http://uxmovement.com/ http://uxmag.com/ http://usabilitypost.com/ https://medium.com/mental-notes/7bbb96465500