4front Елена Белоножко
TRANSCRIPT
![Page 1: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/1.jpg)
Как не изобретать велосипед, или кратко о секретах создания удобного веб-интерфейса
Елена БелоножкоXB Software Ltd.
![Page 2: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/2.jpg)
То чувство, когда ты решаешь usability-задачу…
![Page 3: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/3.jpg)
И ты прекрасно знаешь, как ее решить).
![Page 4: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/4.jpg)
Принцип проектирования Это принцип взаимодействия пользователя с интерфейсом.
ШаблонНе просто периодическая задача и описание основных принципов ее решения, а шаблон проектирования взаимодействия.
![Page 5: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/5.jpg)
Принцип проектирования Это принцип взаимодействия пользователя с интерфейсом.
Никакого дизайна!
ШаблонНе просто периодическая задача и описание основных принципов ее решения, а шаблон проектирования взаимодействия.
![Page 6: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/6.jpg)
Интерфейсы создаются, чтобы ими пользовались.
![Page 7: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/7.jpg)
Принципы проектирования1. Прямые действия2. Легким касанием3. Применение переходов4. Не уходя со страницы5. Очевидность приглашений6. Мгновенная реакция
![Page 8: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/8.jpg)
Принципы проектирования1. Прямые действия2. Легким касанием3. Применение переходов4. Не уходя со страницы5. Очевидность приглашений6. Мгновенная реакция
![Page 9: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/9.jpg)
Прямое управление
"Where there is output, let there be input."
Alan Cooper,SW designer & programmer
![Page 10: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/10.jpg)
I Прямые действия
Шаблоны взаимодействия:1. Непосредственное редактирование2. Перетаскивание3. Непосредственное выделение
![Page 11: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/11.jpg)
1. Непосредственное редактирование
Виды взаимодействия:
- Редактирование однострочного текста- Редактирование многострочного текста- Редактирование в оверлее- Редактирование в таблице- Групповое редактирование- Конфигурирование модуля
I Прямые действия
![Page 12: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/12.jpg)
Главное правило!
Если отображение информации важнее возможности ее редактирования – скрываем до взаимодействия с контентом. (с)
(с) Тетушка Сова
![Page 13: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/13.jpg)
Редактирование однострочного текста
Основная проблема:
ЗАМЕТНОСТЬ
I Прямое управление1. Непосредственное редактирование
Решения:
- Всплывающая текстовая подсказка (Click to edit)- Подсветка области с возможностью редактирования- Превращение указателя мыши в текстовый курсор- Избегайте использования двойного щелчка мыши для
активизации режима редактирования
![Page 14: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/14.jpg)
Редактирование комментария в Facebook
![Page 15: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/15.jpg)
Редактирование комментария в Facebook
1
2
3
![Page 16: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/16.jpg)
Редактирование многострочного текста
Основная проблема:
РАЗНИЦА МЕЖДУ РЕЖИМОМ ОТОБРАЖЕНИЯ И РЕЖИМОМ РЕДАКТИРОВАНИЯ
I Прямое управление1. Непосредственное редактирование
Решения:- WYSIWYG (What You See Is What You Get)- Умеренное использование анимации- Равное пространство под режим отображения и
редактирования
![Page 17: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/17.jpg)
Редактирование заметки в Backpack (37signals)
1 2
3
![Page 18: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/18.jpg)
Редактирование в оверлее
Основная проблема:КОГДА СЛЕДУЕТ ИСПОЛЬЗОВАТЬ
I Прямое управление1. Прямое или непосредственное редактирование
Решения:- Если существует вероятность нарушения структуры контента
страницы в режиме редактирования- Если модуль редактирования больше отображаемого
значенияРекомендации:- Оверлеи для редактирования данных должны быть
одинаковыми с облегченным стилем- Перемещаемое окно – лучшее решение
![Page 19: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/19.jpg)
Редактирование данных в Wildberries
![Page 20: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/20.jpg)
Редактирование в таблице
Основная проблема:
ВИДИМОСТЬ
I Прямое управление1. Прямое или непосредственное редактирование
Решения:- Делать редактирование таблицы в веб-приложении
похожим на настольное.- Контент ячейки в режиме редактирования может
перекрывать остальные ячейки.- Переход в режим редактирования только по щелчку на
ячейку.
![Page 21: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/21.jpg)
Редактирование ячейки в Google Sheets
1
2
![Page 22: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/22.jpg)
Групповое редактирование
Основная проблема:
ЗАМЕТНОСТЬ
I Прямое управление1. Прямое или непосредственное редактирование
Решения:- Используйте подсказки- Соблюдайте принцип симметрии взаимодействия
(Активация и выход из режима должен осуществляться одним способом)
![Page 23: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/23.jpg)
Режим перемещения пиктограмм в iPhone
1
2
![Page 24: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/24.jpg)
Режим группового редактированияв Basecamp
1 2
![Page 25: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/25.jpg)
Конфигурирование модуля
Основная проблема:
ЗАМЕТНОСТЬ и ВИЗУАЛЬНЫЙ ШУМ
Решения:- Соблюдайте Главное Правило (то, что с совой ))
I Прямое управление1. Непосредственное редактирование
![Page 26: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/26.jpg)
Конфигурирование модуля в Top Stories (Yahoo!)
1
2
![Page 27: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/27.jpg)
I Прямое управление2. Перетаскивание
Виды взаимодействия:
- Перетаскивание объекта- Перетаскивание элемента списка- Перетаскивание модуля- Действия при перетаскивании- Группирование объектов путем перетаскивания
![Page 28: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/28.jpg)
Основные проблемы:
• ВИДИМОСТЬ
• КУДА МОЖНО ПЕРЕТАСКИВАТЬ ОБЪЕКТ, А КУДА НЕЛЬЗЯ
• ЧТО ПЕРЕТАСКИВАЕМ – САМ ОБЪЕКТ, ЕГО КОПИЮ ИЛИ ЕГО ОБРАЗ
• ОБРАТНАЯ СВЗЯЬ ПРИ ПЕРЕТАСКИВАНИИ
I Прямое управление2. Перетаскивание
2. Перетаскивание
![Page 29: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/29.jpg)
1. Предусмотрите альтернативные способы перетаскивания элементов.
2. Обеспечьте обратную связь при перетаскивании.3. Изменяйте указатель мыши.4. Apple Guide: «Перетаскивание модуля должно начаться,
если указатель мыши сместился на три пикселя или если кнопка мыши остается в нажатом состоянии более полсекунды»
5. Подсвечивайте область, доступную для размещения.6. Минимизируйте сдвиг контента страницы в процессе
перетаскивания.
Решения:
I Прямое управление2. Перетаскивание
![Page 30: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/30.jpg)
Управление профилем в Linkedin
1
2
![Page 31: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/31.jpg)
Сортировка почты в mail.ru
![Page 32: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/32.jpg)
1
2
Сортировка файлов в Google Drive – D&D
![Page 33: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/33.jpg)
Сортировка файлов в Google Drive – Альтернативный метод
![Page 34: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/34.jpg)
Перетаскивание с лупой в iPhone
1
2
![Page 35: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/35.jpg)
I Прямое управление3. Непосредственное выделение
Виды взаимодействия:
- Выделение с помощью переключателя- Множественное выделение.- Выделение объекта.- Смешанное выделение.
![Page 36: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/36.jpg)
Выделение с помощью переключателя
I Прямое управление3. Непосредственное выделение
Рекомендации к использованию:1. Используйте для выбора элементов, расположенных в строках.2. Для упрощения выбора элементов в произвольном порядке.3. Чтобы указать выделенную строку используйте не только флажок, но и дополнительную подсветку.4. При пейджинге операции могут выполняться только с элементами текущей страницы.5. Опция Select all должна предоставлять инфо о кол-ве выделенных объектов и позволять осуществлять операции с ними.6. Блокируйте операции, недоступные без выбора хотя бы одного элемента.
![Page 37: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/37.jpg)
DHTMLX Email Box Demo
![Page 38: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/38.jpg)
Множественное выделение
I Прямое управление3. Непосредственное выделение
Рекомендации:1. Используйте специально отведенную область для сбора выделенных элементов, расположенных на разных страницах.2. Операции выполняются для всех выделенных объектов.
![Page 39: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/39.jpg)
Linkedin – управление рассылкой
![Page 40: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/40.jpg)
Gmail – управление письмами
![Page 41: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/41.jpg)
Выделение объекта
I Прямое управление3. Непосредственное выделение
Рекомендации к использованию:1. Используйте шаблон выделения объекта, если объекты можно перетаскивать.2. Обеспечьте возможность использования клавиш-модификаторов – Shift и Ctrl.
![Page 42: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/42.jpg)
Flickr – управление альбомом
![Page 43: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/43.jpg)
Смешанное выделение
I Прямое управление3. Непосредственное выделение
Исполнение:1. Флажок для выделения объекта без открытия.2. Непосредственное выделение для одновременного выделения и открытия объекта.
![Page 44: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/44.jpg)
DHTMLX Email Box Demo
![Page 45: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/45.jpg)
II Легким касанием
Виды взаимодействия:
- Видимые контекстные инструменты- Всплывающие контекстные инструменты- Переключаемые инструменты- Многоуровневые инструменты- Вспомогательное меню
Закон Фитта
«Время достижения цели зависит от расстояния до цели и ее размера».
Контекстные инструменты:
![Page 46: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/46.jpg)
Видимые контекстные инструменты
II Легким касаниемКонтекстные инструменты
Плюсы:1. Четкий призыв к действию.2. Быстрой доступ к важным функциям.3. Постоянно видны.
![Page 47: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/47.jpg)
Список событий на events.dev.by
1
2
![Page 48: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/48.jpg)
Gmail – список писем
![Page 49: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/49.jpg)
Всплывающие инструменты
II Легким касаниемКонтекстные инструменты
Рекомендации:1. Используйте, если контент важнее инструмента.2. Избегайте размещать в оверлее.3. Значение пиктограмм должно быть очевидным.4. Можно использовать текстовые ярлыки.
![Page 50: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/50.jpg)
Лайк для наполнения профиля на piccsy.com
![Page 51: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/51.jpg)
Антипример «Навести и заслонить»
Антипример «Консервная банка»
![Page 52: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/52.jpg)
Переключаемые инструменты
II Легким касаниемКонтекстные инструменты
Рекомендации:1. Минимизируйте изменения при смене режимов.2. Используйте для второстепенных действий к которым
нужно предоставить кратчайший путь.
![Page 53: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/53.jpg)
Режим редактирования профиля Linkedin
1
2
![Page 54: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/54.jpg)
Многоуровневые инструменты
II Легким касаниемКонтекстные инструменты
Рекомендации:1. Используйте многоуровневые инструменты, если хотите
избежать отображения контекстных инструментов при наведении указателя мыши на объект.
2. Используйте кнопку-меню при наличии набора функций, одна их которых используется чаще других.
![Page 55: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/55.jpg)
Issuu.com – управление отображаемым контентом
1
![Page 56: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/56.jpg)
Issuu.com – управление отображаемым контентом
2
![Page 57: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/57.jpg)
Вспомогательное меню
II Легким касаниемКонтекстные инструменты
Рекомендации:1. Стиль меню должен отличаться от меню браузера.2. Во вспомогательном меню используйте только
дублирующие команды.3. Подходит для выполнения действий с группой выделенных
объектов.
![Page 58: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/58.jpg)
Вспомогательное меню на Google Maps
![Page 59: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/59.jpg)
III Применениепереходов
Виды взаимодействия:
- Приглушение и подсветка- Разворачивание и сворачивание- Заполнение пустот- Анимация
Переход - «спецэффект», привлекающий внимание пользователя.
Переходы создают «сюжет».
![Page 60: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/60.jpg)
III Применение переходовПриглушение и подсветка
Каталог товаров на dansmoncas.ca
![Page 61: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/61.jpg)
III Применение переходовРазворачивание и сворачивание/ анимация
Форма логина и share на piccsy.com
![Page 62: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/62.jpg)
Антипример «Анимационное безумие»
![Page 63: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/63.jpg)
III Применение переходовЗаполнение пустот
Профиль в Linkedin
![Page 64: 4front Елена Белоножко](https://reader030.vdocuments.mx/reader030/viewer/2022020213/587b23051a28ab736c8b6f97/html5/thumbnails/64.jpg)
III Применение переходовОбщие рекомендации:
1. Переходы создают «сюжет».2. Скорость изменения события прямо пропорционально его важности.2. Быстрое движение воспринимается, как нечто более значимое, чем изменение цвета.3. События с приближением объекта кажутся важнее, чем события с отдалением.4. Соблюдайте симметрию взаимодействия.