'

Возвращение простоты

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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


Слайд 2

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


Слайд 3

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


Слайд 4

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


Слайд 5

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


Слайд 6

Что приходится решать? Какой тип выбрать? Должен ли он быть анимированным (“пролистываться” самостоятельно) Вертикально или горизонтально расположить элементы управления? Как должно происходить переключение? Как дать понять, что этот элемент actionable? …


Слайд 7

Forbes.com


Слайд 8

Whitehouse.gov


Слайд 9


Слайд 10


Слайд 11

Skynews.com


Слайд 12

Леди@mail.ru


Слайд 13

Kremlin.ru


Слайд 14

Microsoft


Слайд 15

SAP


Слайд 16

Tochka.net


Слайд 17

Yahoo.com


Слайд 18

Паттерн “телевизор”* - ЧТО и КОГДА Что Блок, содержащий список элементов, из которого пользователь может что-либо выбрать, и детальное представление по выбранному элементу. Детальное содержимое ротируется (опционально). Когда Есть несколько единиц содержимого, но нет места для того, чтобы разместить его по отдельности Надо сфокусировать пользователя на нескольких ключевых моментах Надо предоставить возможность ознакомиться с деталями списка элементов без перезагрузки страницы * Связанные паттерны: stacked tabs, two-panels selector, carousel


Слайд 19

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


Слайд 20

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


Слайд 21

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


Слайд 22

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


Слайд 23

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


Слайд 24

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


Слайд 25

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


Слайд 26

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


Слайд 27

Спасибо! Вопросы?


×

HTML:





Ссылка: