UX: Сокращение помехи и визуальной перегрузки

Я предполагаю, что клиент действительно говорит от имени пользователей, и действительно полезно показать больше информации «с первого взгляда».

Мне кажется, что каждый пользователь обычно интересует только работа, назначенная ему / ей, поэтому первое, что нужно сделать, - это создать отдельную страницу для каждого пользователя.Дайте каждой странице уникальный URL-адрес, чтобы пользователь мог пометить ее закладкой / ярлыком и перейти прямо к ней. Еще лучше, сбросить cookie после первого посещения пользователя, чтобы страница по умолчанию была его / ее. Помимо удаления ненужного беспорядка, это устраняет столбец «Имя», предоставляя вам больше места для другой информации.

Чтобы по-настоящему увидеть все «с первого взгляда» - без прокрутки, щелчка или наведения - вам нужно сделать информацию как можно более компактной и незагроможденной:

• Разрезайте шаблон страницы до минимума. Горизонтальное пространство наиболее ценно для таблицы, поэтому не используйте меню на боковой панели или элементы управления навигацией. Сведите брендинг и меню к одной полосе вверху, желательно не более 50 пикселей в высоту. При необходимости используйте раскрывающееся меню, по крайней мере, для удержания менее часто используемых команд.

• Сжимайте поля как можно ближе друг к другу, разделяя их всего на 10 пикселей. Если количество элементов задачи в таблице также является проблемой (в дополнение к количеству полей), сожмите поля вместе, возможно, не более 20 пикселей от верха одного до верха другого при размере шрифта по умолчанию. . Удалите или отключите границы полей, чтобы уменьшить визуальный беспорядок. В частности, избегайте трехмерных (например, скошенных) или разноцветных границ. Некоторые конкретные рекомендации и идеи можно найти в Coded, Compailed, Contrasting Controls .

• Приглушите графический дизайн, уменьшив или исключив вариации в цветах, трехмерном внешнем виде, текстурах и любых светлых и темных заголовках или тексте. Используйте достаточно графики, чтобы визуально сгруппировать информацию, когда это необходимо.Не беспокойтесь о том, чтобы "выглядеть скучно". Пользователи будут изучать информацию, а не графический дизайн.

• Используйте модель «выбор-действие» в стиле рабочего стола, в которой пользователь сначала выбирает элемент (ы) задачи для выполнения действий, а затем выбирает действие для выполнения из меню. Это избавляет от необходимости повторять каждое командное управление для каждого элемента в таблице, позволяя отображать в таблице только данные.

• Храните каждый элемент задачи в списке в одной строке таблицы, а не складывайте поля для одного и того же элемента друг над другом. С одной строкой вам не нужно повторять названия полей, избегая этого беспорядка. Это также позволяет вам исключить горизонтальные и / или вертикальные правила в вашей таблице, полагаясь на сами поля для направления взгляда по таблице (однако вы можете захотеть включить тонкую полосатую полосу , поскольку это помогает глазам следить ряды, когда они плотно прижаты друг к другу). Одна строка для каждого элемента также упрощает сканирование, сортировку и сравнение элементов; Я предполагаю, что причина, по которой у вас вообще есть таблица, заключается в том, чтобы позволить пользователям расставлять приоритеты для своих элементов задач.

• Рассмотрите возможность использования курсора мыши для отображения полных значений строк, длина которых превышает ширину поля. Это может позволить вам использовать значительно более короткие поля, поскольку вам не нужно изменять их размер, чтобы отображать полные значения на 99-м процентиле длины. Вы также можете изменить размер столбцов путем перетаскивания, чтобы пользователи могли установить минимальную ширину, необходимую для соответствующих данных.

• Сжимайте сами поля и столбцы, используя более компактные форматы, агрегаты, сокращения, коды (например,, оттенки / цвета) или значки для обозначения значений или заголовков столбцов. Для этого может потребоваться обучение пользователей, но вы также можете использовать наведение курсора, чтобы отображать всплывающие подсказки о том, что означают коды / значки / аббревиатуры. Сокращения, вероятно, легче распознать, выучить и запомнить.но графические коды и значки легче отсканировать, что помогает при оценке «с первого взгляда». Рекомендации по кодированию в Ввод G в графический интерфейс , хотя в этой статье также советуется комбинировать коды с текстом, что не сэкономит вам места.

• Разрешить заголовки столбцов быть многострочными, чтобы они не заставляли столбец быть шире, чем требует само поле (например, для полей Y | N). При необходимости расположите заголовки столбцов под косым углом. Он занимает не больше места, чем вертикальный заголовок, но его легче читать.

• Убедитесь, что размер таблицы изменяется вместе с изменением размера окна, чтобы, по крайней мере, пользователи с большими мониторами могли видеть все сразу.

Выполнив все вышеперечисленное, вы сделали все возможное, чтобы все было видно с первого взгляда. Если все данные по-прежнему не подходят, значит, для просмотра некоторой информации с более низким приоритетом требуется взаимодействие. Возможны следующие варианты:

• Более широкая таблица с горизонтальной прокруткой, при которой поля с более низким приоритетом смещаются вправо. Часто это самое простое и удобное решение, поскольку оно позволяет пользователю по-прежнему сравнивать все элементы задачи. Обычно это лучше, чем если бы каждый элемент занимал несколько строк в таблице. Горизонтальная прокрутка - не проблема удобства использования для таблиц, предназначенных для прозы, особенно если вы сохраняете фиксированные заголовки строк и прокручиваете только другие поля.

• Разделение "главный-подробный", в котором имеется подобная форме панель полей «переполнения» с более низким приоритетом под таблицей. Они показывают значения для текущего выбранного элемента в таблице. Сделайте эту панель переполнения вкладками, и вы сможете хранить очень большое количество полей (но не «с первого взгляда»).Поместите панель переполнения в расширитель, чтобы, когда пользователь закрывает расширитель, таблица расширяется до полной высоты окна, позволяя пользователям, которым не нужны поля с низким приоритетом, видеть больше элементов таблицы. Поля на панели переполнения нельзя легко сравнивать между несколькими элементами, поэтому это решение работает лучше всего, когда вы можете разделить поля между теми, которые используются для определения приоритетов задачи (они находятся в таблице), и теми, которые используются для решения, как выполнить задачу (они идут в переливе).

• Дерево или телескоп, где каждая строка таблицы может быть расширена для отображения полей с низким приоритетом (ваша идея с кнопкой +). Главное преимущество этого метода перед основным элементом состоит в том, что теоретически легче сравнивать поля с низким приоритетом двух элементов, но только тогда, когда эти два элемента оказываются рядом друг с другом в таблице. В противном случае у него больше проблем, чем у основной-детали: поля с высоким приоритетом, скорее всего, прокручиваются вне поля зрения, количество прокрутки для перехода к заданному элементу изменяется, и требуется больше щелчков мыши, чтобы найти элемент с определенным низким значением. приоритетные детали.

• Отдельная страница или окно для низкоприоритетных полей, которые пользователь «перебирает» из таблицы. Как правило, это хорошо только в том случае, если вам все равно нужна страница для этих полей (например, для прямого перехода) или для заполнения кучи полей с очень низким приоритетом, которые, по мнению вашего клиента, необходимы.

Подробная информация и иллюстрации этих опций на Принимая панорамы .

Отображение информации при наведении курсора мыши должно использоваться только для краткой дополнительной информации.В противном случае он будет мешать, могут возникнуть проблемы с доступностью, и пользователь не сможет скопировать или просмотреть его, одновременно манипулируя чем-то другим.

Скрытие / отображение столбцов имеет смысл (например, при горизонтальной прокрутке), если разные пользователи используют разные поля. Это может быть предпочтение пользователя, которое следует сохранять между сеансами.