ОПТИМИЗАЦИЯ ТАБЛИЦ Основные приемы юзабилити Sigma Software

План n Обзор основных приемов юзабилити для таблиц n Практическое применение приемов n Обзор типов табличных действий n Для чтения 2 Sigma Software

ТАБЛИЦЫ С ДАННЫМИ Что мы знаем о таблицах? 3 Sigma Software

Назначение Таблицы используются для отображения структурированных данных, и их основное назначение заключается в том, чтобы сделать: n Данные – Удобочитаемыми – Легко сканируемыми – Легко сопоставимыми n Действия – Наглядными 4 Sigma Software

Пример таблицы 5 Sigma Software

ПРИЕМЫ ЮЗАБИЛИТИ Для табличных интерфейсов 6 Sigma Software

Прием #1 – чередование стилей оформления строк n Оформляйте «шапку» /футер таблицы темнее (или светлее) фона табличных строк n Используйте для чередующихся строк более темные оттенки чем фон страницы (в соответствии с цветовой схемой) 7 Sigma Software

Прием #2 – контраст текста n Соблюдайте высокий контраст между цветом текста и цветом фона n Используйте различный контраст и начертание текста для отображения информационной иерархии 8 Sigma Software

Прием #3 – границы и отступы n Используйте границы и отступы, чтобы сделать колонки и строки таблицы легко сканируемыми и легко различимыми друг от друга n Соблюдайте правило: чем больше отступ, тем меньше необходимость использования границ и наоборот 9 Sigma Software

Прием #3 – границы и отступы n Используйте «тонкие» границы для поддержания взаимосвязи между данными, если отступы между колонками слишком большие 10 Sigma Software

Прием #3 – границы и отступы n Комбинируйте цвет фона и границы 11 Sigma Software

Прием #4 – группировка данных n Группируйте связанные данные и используйте одинаковый набор колонок для групп n Оформляйте каждую секцию внутри группы по-разному. Группы и секции могут быть раскрывающимися 12 Sigma Software

Прием #5 - сортировка n Используйте кликабельные заголовки колонок n Выделяйте визуально колонку, по которой была отсортирована таблица 13 Sigma Software

Прием #5 - сортировка n Используйте стрелки в заголовках колонок для обозначения порядка отсортированной колонки (по возрастанию или по убыванию) n Оформляйте четкие визуальные различия между сортируемыми и не сортируемыми колонками 14 Sigma Software

Прием #6 - фильтрация n Используйте фильтрацию для больших объемов данных n Используйте встроенную “inline” фильтрацию, когда пользователям нужно «что-то простое» 15 Sigma Software

Прием #6 - фильтрация n Используйте выпадающие списки, радио кнопки и чекбоксы для фильтрации по предопределенному списку значений n Реализуйте “live” фильтр, использующий ключевые слова для фильтрации данных с неограниченным количеством вариантов 16 Sigma Software

Прием #7 - пейджинация n Используйте, если возможно, критерий сортировки таблицы для наименования страниц n Используйте числа для наименования страниц, если невозможно использовать критерии сортировки, и показывайте дополнительную информацию по наведению на ссылки 17 Sigma Software

Прием #8 – раскрывающиеся строки n Используйте для редактирования/отображения дополнительной информации или функционала таблицы, в то время как основная информация всегда будет в поле зрения пользователя в исходной строке 18 Sigma Software

ПОДВЕДЕМ ИТОГИ Основные положения 19 Sigma Software

Основные положения n Чередующееся оформление строк n Контраст текста n Границы и отступы n Группировка данных n Сортировка n Фильтрация n Пейджинация n Раскрывающиеся строки 20 Sigma Software

ЧТО БУДЕТ ЕСЛИ … Применение некоторых приемов 21 Sigma Software

… чередование в оформлении строк 22 Sigma Software

… контраст и группировка данных 23 Sigma Software

…реализация раскрывающихся строк 24 Sigma Software

ТАБЛИЧНЫЕ ДЕЙСТВИЯ Основные типы 25 Sigma Software

Строковые “Inline” действия … располагаются в начале или конце строки. 26 Sigma Software

“Hover” действия … используются для организации нескольких действий в строке. Элементы показываются при наведении на них курсора мыши, что позволяет сократить уровень визуального шума на странице 27 Sigma Software

Меню действий … используется, если для одной строки данных предполагается выполнение нескольких действий – слишком много, чтобы отображать их непосредственно в строке или при наведении 28 Sigma Software

Действия на несколько строк … используется при необходимости выполнения одного действия для группы данных. Выполняется при нажатии на флажок, который, как правило, помещается в начале каждой строки 29 Sigma Software

ССЫЛКИ Если вы хотите знать больше… 30 Sigma Software

Веб-ресурсы n Статьи – uxmatters. com – smashingmagazine. com – jankoatwarpspeed. com – www. noupe. com n UX patterns – ui-patterns. com – smileycat. com/design_elements/ – patterntap. com – patternry. com 31 Sigma Software

СПАСИБО ЗА ВНИМАНИЕ! 32 Sigma Software