Возвращение простоты 82 вебинар сообщества UX Russia Андрей Сикорский, Дмитрий Сатин

Содержание

Слайд 2

Предыстория Эволюция интернет от технически простого в сторону увеличения информационной емкости

Предыстория

Эволюция интернет от технически простого в сторону увеличения информационной емкости
“портализация”
Бои за

“место под солнцем”
Рождение сверхпредложения
Много информации остается неувиденной и незамеченной
Слайд 3

Постановка задачи Необходимо вернуть фокус пользователя Сконцентрировать его на чем-то главном Донести мысли Вовлечь во взаимодействие

Постановка задачи

Необходимо вернуть фокус пользователя
Сконцентрировать его на чем-то главном
Донести мысли
Вовлечь во

взаимодействие
Слайд 4

Один из вариантов решения Создание объекта, являющегося презентацией “сайт в сайте”

Один из вариантов решения

Создание объекта, являющегося презентацией
“сайт в сайте”
Содержит важные, ключевые

вещи
Привлекает внимание в первую очередь
Возможно, не требует первого шага от пользователя
Слайд 5

Если у нас портал… объект является одним из многих элементов страницы

Если у нас портал…

объект является одним из многих элементов страницы (порталы,

электронные СМИ)
Часто обновляется (ежечасно или сопоставимо)
Содержит контент одного вида (например, новости)
По назначению напоминает dashboard (сводка высокой информационной емкости)
Слайд 6

Если это промо… объект является центральным и едва ли не единственным

Если это промо…

объект является центральным и едва ли не единственным элементом
Уделяется

большое внимание созданию впечатления (графическая реализация, анимация, эффекты)
Фокусирует пользователя на нескольких точках
Может содержать разнородную информацию
реклама события и ссылка на скачивание нового продукта в одном месте
Слайд 7

Что приходится решать? Какой тип выбрать? Должен ли он быть анимированным

Что приходится решать?

Какой тип выбрать?
Должен ли он быть анимированным (“пролистываться” самостоятельно)
Вертикально

или горизонтально расположить элементы управления?
Как должно происходить переключение?
Как дать понять, что этот элемент actionable?

Слайд 8

Forbes.com

Forbes.com

Слайд 9

Whitehouse.gov

Whitehouse.gov

Слайд 10

Слайд 11

Слайд 12

Skynews.com

Skynews.com

Слайд 13

Леди@mail.ru

Леди@mail.ru

Слайд 14

Kremlin.ru

Kremlin.ru

Слайд 15

Microsoft

Microsoft

Слайд 16

SAP

SAP

Слайд 17

Tochka.net

Tochka.net

Слайд 18

Yahoo.com

Yahoo.com

Слайд 19

Паттерн “телевизор”* - ЧТО и КОГДА Что Блок, содержащий список элементов,

Паттерн “телевизор”* - ЧТО и КОГДА

Что
Блок, содержащий список элементов, из которого

пользователь может что-либо выбрать, и детальное представление по выбранному элементу. Детальное содержимое ротируется (опционально).
Когда
Есть несколько единиц содержимого, но нет места для того, чтобы разместить его по отдельности
Надо сфокусировать пользователя на нескольких ключевых моментах
Надо предоставить возможность ознакомиться с деталями списка элементов без перезагрузки страницы

* Связанные паттерны: stacked tabs, two-panels selector, carousel

Слайд 20

Паттерн “телевизор”: КАК

Паттерн “телевизор”: КАК

Слайд 21

Расположение Расположить элементы списка вертикально или горизонтально от задачи (центральный и

Расположение

Расположить элементы списка вертикально или горизонтально
от задачи (центральный и единственный объект

или часть портала
от контента (объема, характера)
Слайд 22

Элементы списка Сделать элементы списка достаточно большими для клика (закон Фиттса)

Элементы списка

Сделать элементы списка достаточно большими для клика (закон Фиттса) и

“приглашающими” к клику (пиктограммы, физические имитации)
Искуственное увеличение (on hover)
Все составные части являются actionable (иллюстрации, пиктограммы)
Слайд 23

Связь между областями Дать четкую связь между элементами списка и областью

Связь между областями

Дать четкую связь между элементами списка и областью детального

отображения
Стрелки,
направляющие,
близость,
Объединение в блок (подсвечивание, выделение цветом и формой) и тп
Слайд 24

Ожидания от перехода Сформировать ожидание относительно перехода Preview, анонсы, краткое описание

Ожидания от перехода

Сформировать ожидание относительно перехода
Preview, анонсы, краткое описание

Слайд 25

Выделение активного Четко указывать текущий активный элемент и его связь с областью детального отображения

Выделение активного

Четко указывать текущий активный элемент и его связь с областью

детального отображения
Слайд 26

Привлечение внимания Ротировать содержимое элементов списка до первого взаимодействия с пользователем Время ротации должно быть достаточным

Привлечение внимания

Ротировать содержимое элементов списка до первого взаимодействия с пользователем
Время ротации

должно быть достаточным
Слайд 27

Примечания Пока с пользователем взаимодействия нет, содержимое должно ротироваться Интервал зависит

Примечания

Пока с пользователем взаимодействия нет, содержимое должно ротироваться
Интервал зависит от контента

внутри блока
Для кликовых контейнеров должны применяться очевидные указатели
Двойные стрелки “вверх” и “вниз” для вертикальных, стрелки для горизонтальных
Содержимое должно заканчиваться призывом