Как не изобретать велосипед, или кратко о секретах создания удобного веб-интерфейса

Елена БелоножкоXB Software Ltd.

То чувство, когда ты решаешь usability-задачу…

И ты прекрасно знаешь, как ее решить).

Принцип проектирования Это принцип взаимодействия пользователя с интерфейсом.

ШаблонНе просто периодическая задача и описание основных принципов ее решения, а шаблон проектирования взаимодействия.

Принцип проектирования Это принцип взаимодействия пользователя с интерфейсом.

Никакого дизайна!

ШаблонНе просто периодическая задача и описание основных принципов ее решения, а шаблон проектирования взаимодействия.

Интерфейсы создаются, чтобы ими пользовались.

Принципы проектирования1. Прямые действия2. Легким касанием3. Применение переходов4. Не уходя со страницы5. Очевидность приглашений6. Мгновенная реакция

Принципы проектирования1. Прямые действия2. Легким касанием3. Применение переходов4. Не уходя со страницы5. Очевидность приглашений6. Мгновенная реакция

Прямое управление

 "Where there is output, let there be input."

Alan Cooper,SW designer & programmer

I Прямые действия

Шаблоны взаимодействия:1. Непосредственное редактирование2. Перетаскивание3. Непосредственное выделение

1. Непосредственное редактирование

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

- Редактирование однострочного текста- Редактирование многострочного текста- Редактирование в оверлее- Редактирование в таблице- Групповое редактирование- Конфигурирование модуля

I Прямые действия

Главное правило!

Если отображение информации важнее возможности ее редактирования – скрываем до взаимодействия с контентом. (с)

(с) Тетушка Сова 

Редактирование однострочного текста

Основная проблема:

ЗАМЕТНОСТЬ

I Прямое управление1. Непосредственное редактирование

Решения:

- Всплывающая текстовая подсказка (Click to edit)- Подсветка области с возможностью редактирования- Превращение указателя мыши в текстовый курсор- Избегайте использования двойного щелчка мыши для

активизации режима редактирования

Редактирование комментария в Facebook

Редактирование комментария в Facebook

1

2

3

Редактирование многострочного текста

Основная проблема:

РАЗНИЦА МЕЖДУ РЕЖИМОМ ОТОБРАЖЕНИЯ И РЕЖИМОМ РЕДАКТИРОВАНИЯ

I Прямое управление1. Непосредственное редактирование

Решения:- WYSIWYG (What You See Is What You Get)- Умеренное использование анимации- Равное пространство под режим отображения и

редактирования

Редактирование заметки в Backpack (37signals)

1 2

3

Редактирование в оверлее

Основная проблема:КОГДА СЛЕДУЕТ ИСПОЛЬЗОВАТЬ

I Прямое управление1. Прямое или непосредственное редактирование

Решения:- Если существует вероятность нарушения структуры контента

страницы в режиме редактирования- Если модуль редактирования больше отображаемого

значенияРекомендации:- Оверлеи для редактирования данных должны быть

одинаковыми с облегченным стилем- Перемещаемое окно – лучшее решение

Редактирование данных в Wildberries

Редактирование в таблице

Основная проблема:

ВИДИМОСТЬ

I Прямое управление1. Прямое или непосредственное редактирование

Решения:- Делать редактирование таблицы в веб-приложении

похожим на настольное.- Контент ячейки в режиме редактирования может

перекрывать остальные ячейки.- Переход в режим редактирования только по щелчку на

ячейку.

Редактирование ячейки в Google Sheets

1

2

Групповое редактирование

Основная проблема:

ЗАМЕТНОСТЬ

I Прямое управление1. Прямое или непосредственное редактирование

Решения:- Используйте подсказки- Соблюдайте принцип симметрии взаимодействия

(Активация и выход из режима должен осуществляться одним способом)

Режим перемещения пиктограмм в iPhone

1

2

Режим группового редактированияв Basecamp

1 2

Конфигурирование модуля

Основная проблема:

ЗАМЕТНОСТЬ и ВИЗУАЛЬНЫЙ ШУМ

Решения:- Соблюдайте Главное Правило (то, что с совой ))

I Прямое управление1. Непосредственное редактирование

Конфигурирование модуля в Top Stories (Yahoo!)

1

2

I Прямое управление2. Перетаскивание

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

- Перетаскивание объекта- Перетаскивание элемента списка- Перетаскивание модуля- Действия при перетаскивании- Группирование объектов путем перетаскивания

Основные проблемы:

• ВИДИМОСТЬ

• КУДА МОЖНО ПЕРЕТАСКИВАТЬ ОБЪЕКТ, А КУДА НЕЛЬЗЯ

• ЧТО ПЕРЕТАСКИВАЕМ – САМ ОБЪЕКТ, ЕГО КОПИЮ ИЛИ ЕГО ОБРАЗ

• ОБРАТНАЯ СВЗЯЬ ПРИ ПЕРЕТАСКИВАНИИ

I Прямое управление2. Перетаскивание

2. Перетаскивание

1. Предусмотрите альтернативные способы перетаскивания элементов.

2. Обеспечьте обратную связь при перетаскивании.3. Изменяйте указатель мыши.4. Apple Guide: «Перетаскивание модуля должно начаться,

если указатель мыши сместился на три пикселя или если кнопка мыши остается в нажатом состоянии более полсекунды»

5. Подсвечивайте область, доступную для размещения.6. Минимизируйте сдвиг контента страницы в процессе

перетаскивания.

Решения:

I Прямое управление2. Перетаскивание

Управление профилем в Linkedin

1

2

Сортировка почты в mail.ru

1

2

Сортировка файлов в Google Drive – D&D

Сортировка файлов в Google Drive – Альтернативный метод

Перетаскивание с лупой в iPhone

1

2

I Прямое управление3. Непосредственное выделение

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

- Выделение с помощью переключателя- Множественное выделение.- Выделение объекта.- Смешанное выделение.

Выделение с помощью переключателя

I Прямое управление3. Непосредственное выделение

Рекомендации к использованию:1. Используйте для выбора элементов, расположенных в строках.2. Для упрощения выбора элементов в произвольном порядке.3. Чтобы указать выделенную строку используйте не только флажок, но и дополнительную подсветку.4. При пейджинге операции могут выполняться только с элементами текущей страницы.5. Опция Select all должна предоставлять инфо о кол-ве выделенных объектов и позволять осуществлять операции с ними.6. Блокируйте операции, недоступные без выбора хотя бы одного элемента.

DHTMLX Email Box Demo

Множественное выделение

I Прямое управление3. Непосредственное выделение

Рекомендации:1. Используйте специально отведенную область для сбора выделенных элементов, расположенных на разных страницах.2. Операции выполняются для всех выделенных объектов.

Linkedin – управление рассылкой

Gmail – управление письмами

Выделение объекта

I Прямое управление3. Непосредственное выделение

Рекомендации к использованию:1. Используйте шаблон выделения объекта, если объекты можно перетаскивать.2. Обеспечьте возможность использования клавиш-модификаторов – Shift и Ctrl.

Flickr – управление альбомом

Смешанное выделение

I Прямое управление3. Непосредственное выделение

Исполнение:1. Флажок для выделения объекта без открытия.2. Непосредственное выделение для одновременного выделения и открытия объекта.

DHTMLX Email Box Demo

II Легким касанием

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

- Видимые контекстные инструменты- Всплывающие контекстные инструменты- Переключаемые инструменты- Многоуровневые инструменты- Вспомогательное меню

Закон Фитта

«Время достижения цели зависит от расстояния до цели и ее размера».

Контекстные инструменты:

Видимые контекстные инструменты

II Легким касаниемКонтекстные инструменты

Плюсы:1. Четкий призыв к действию.2. Быстрой доступ к важным функциям.3. Постоянно видны.

Список событий на events.dev.by

1

2

Gmail – список писем

Всплывающие инструменты

II Легким касаниемКонтекстные инструменты

Рекомендации:1. Используйте, если контент важнее инструмента.2. Избегайте размещать в оверлее.3. Значение пиктограмм должно быть очевидным.4. Можно использовать текстовые ярлыки.

Лайк для наполнения профиля на piccsy.com

Антипример «Навести и заслонить»

Антипример «Консервная банка»

Переключаемые инструменты

II Легким касаниемКонтекстные инструменты

Рекомендации:1. Минимизируйте изменения при смене режимов.2. Используйте для второстепенных действий к которым

нужно предоставить кратчайший путь.

Режим редактирования профиля Linkedin

1

2

Многоуровневые инструменты

II Легким касаниемКонтекстные инструменты

Рекомендации:1. Используйте многоуровневые инструменты, если хотите

избежать отображения контекстных инструментов при наведении указателя мыши на объект.

2. Используйте кнопку-меню при наличии набора функций, одна их которых используется чаще других.

Issuu.com – управление отображаемым контентом

1

Issuu.com – управление отображаемым контентом

2

Вспомогательное меню

II Легким касаниемКонтекстные инструменты

Рекомендации:1. Стиль меню должен отличаться от меню браузера.2. Во вспомогательном меню используйте только

дублирующие команды.3. Подходит для выполнения действий с группой выделенных

объектов.

Вспомогательное меню на Google Maps

III Применениепереходов

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

- Приглушение и подсветка- Разворачивание и сворачивание- Заполнение пустот- Анимация

Переход - «спецэффект», привлекающий внимание пользователя.

Переходы создают «сюжет».

III Применение переходовПриглушение и подсветка

Каталог товаров на dansmoncas.ca

III Применение переходовРазворачивание и сворачивание/ анимация

Форма логина и share на piccsy.com

Антипример «Анимационное безумие»

III Применение переходовЗаполнение пустот

Профиль в Linkedin

III Применение переходовОбщие рекомендации:

1. Переходы создают «сюжет».2. Скорость изменения события прямо пропорционально его важности.2. Быстрое движение воспринимается, как нечто более значимое, чем изменение цвета.3. События с приближением объекта кажутся важнее, чем события с отдалением.4. Соблюдайте симметрию взаимодействия.

БелоножкоЕлена- , Бизнес аналитик XBSoftware Ltd.

E-mail: lena.ona.nelena@inbox.ru

Skype: lena_ona_nelena