4front Елена Белоножко

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

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

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

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

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

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

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

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

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

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

Принципы проектирования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

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


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


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

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

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

1 2

3

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

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

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

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

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

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

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

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

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


ВИДИМОСТЬ


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

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

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

ячейку.

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

1

2

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


ЗАМЕТНОСТЬ


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

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

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

1

2

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

1 2

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


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

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


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

1

2

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


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

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

• ВИДИМОСТЬ

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

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

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


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

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

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

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

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

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

Решения:


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

1

2

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

1

2

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

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

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

1

2

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


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

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


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

DHTMLX Email Box Demo

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


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

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

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

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


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

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

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


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

DHTMLX Email Box Demo

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


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

Закон Фитта

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

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

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

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

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

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

1

2

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

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


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

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

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

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

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


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

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

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

1

2

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


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

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

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

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

1

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

2

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


Рекомендации: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: [email protected]

Skype: lena_ona_nelena

mailto:[email protected]

4front Елена Белоножко

Software

Transcript of 4front Елена Белоножко