1 of 24

Дизайн взаимодействия

как часть процесса разработки

Ганиев С. Хабаровск 2019

2 of 24

О чем доклад?

  • Интерфейсы
  • Взаимодействие
  • Боль пользователя
  • Боль разработчика
  • UI/UX, юзабилити

3 of 24

UI/UX дизайн

  • Эргономика
  • Понятность
  • Простота

​

  • Красивость

UX

UI

Виды элементов

Расположения на форме

Методы взаимодействия

Сценарии поведения

Цвет Шрифт

Декор Отступы

Размеры

4 of 24

Сложная тема

  • Чувство прекрасного уснуло
  • Выученная беспомощность

5 of 24

Проблемы современного интерфейса

  • Развитие ПО = усложнение
  • Развитие процесса = усложнение
  • Низкие стандарты качества
  • Отсутствие фидбэка

6 of 24

Проблемы современного интерфейса

Свистоперделки

7 of 24

Семь�принципов�дизайна

8 of 24

Хороший интерфейс – это…

1

Наглядность

Где я нахожусь? Какие действия возможны?

9 of 24

Хороший интерфейс – это…

2

Возможности

Желаемые действия = правильные возможности

10 of 24

Хороший интерфейс – это…

3

Фидбэк

Полная информация о состоянии и результатах

11 of 24

Хороший интерфейс – это…

4

Означающие

Наглядно, понятно донести фидбэк. Указатели на пути

12 of 24

Хороший интерфейс – это…

5,6

Проекция и концептуальная модель

Связь между регуляторами и результатом. Представление сложного в простом образе

13 of 24

Хороший интерфейс – это…

7

Ограничения

Направляют пользователя, упрощают понимание

14 of 24

Советы разработчику

15 of 24

Муки выбора

  • Помоги пользователю сделать выбор
  • Сделай выбор за него
  • Предположи, что он выберет
  • Не давай сделать неправильный выбор

16 of 24

Твой пользователь – лентяй, …

  • Минимум элементов на форме
  • Всплывающие группы элементов
  • Переключатель лучше списка выбора (но не всегда ☺)
  • Флажки vs Переключатель

17 of 24

… а ты – маг и волшебник

  • Заблаговременно информируй обо всех результатах
  • Фидбэк – наше всё!
  • Помни о возможностях горячих клавиш
  • Лучше неактивная кнопка с пояснением, чем предупреждение после нажатия

18 of 24

Практические кейсы

19 of 24

Альтернативные кнопки

20 of 24

Альтернативные переключатели

21 of 24

Слайдер

22 of 24

Индикаторы групп отбора

23 of 24

HTML + CSS + JS = «Красинт»

24 of 24

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

@stas_ganiev

stas@benony.pro