Редизайн простой таблицы
Redesigning a Simple Table
Автор:
Источник:
Продуманная структура взаимодействия является ключевым элементом при построении эффективного интерфейса: глядя на интерфейс, пользователь должен понимать, что программа может сделать и как этого добиться. Создание удобных в использовании программ зависит от наших способностей общаться с пользователями. Чем лучше мы общаемся, тем легче пользователи понимают то, что мы хотим им сообщить. И, соответственно, легче разбираются и работают с нашими программами.
Интерактивные (диалоговые) программы, по своей природе, стремятся к усложнению. Они позволяют нам создавать и контролировать большие объемы информации и выполнять над ними множество различных действий. Тенденция в разработке таких интерфейсов сводится к созданию большого количества диалоговых форм (иногда даже для выполнения какого-то одного действия). Сложные понятия требуют сложных объяснений, правильно? Не всегда.
Посмотрите на рисунок. На нем приведены некоторые характеристики и соответствующие значения. Проблема состоит в том, что чрезмерный визуальный шум и лишний текст затеняют наиболее важные элементы в таблице. Сложно сконцентрироваться на значениях, поскольку цветной фон и толстые линии непрерывно отвлекают ваше внимание. Разная толщина линий, образующих внешнюю границу, и линий разделяющих ячейки, отвлекает еще больше. Другими словами, сама таблица говорит громче, чем данные в ней.
Первое что мы сделаем, чтобы уменьшить объем таблицы, это уберем цветной фон и линии. Получится такая таблица:
Величины и подписи вышли на первый план, но теперь требуется приложить дополнительные усилия, чтобы соотнести названия характеристик и их значения. Мы не сможем понять смысл числа, пока не прочтем соответствующую подпись. Одна подпись нам также ничего не даст, если мы не видим значения. Кроме того, убрав границу у таблицы, мы лишили элементы визуальной группировки, и теперь они могут смешаться с другими элементами на странице (визуально, разумеется).
Чтобы организовать связь между подписями и значениями в таблице, вернем некоторые визуальные элементы. Только на этот раз будем использовать минимально необходимый контраст. Смотрим рисунок:
Светлая однопискельная граница имеет достаточный визуальный вес, чтобы сгруппировать содержимое таблицы, и в то же время не сильно отвлекает внимание. Близкие по смыслу характеристики объединяются общим светлым фоном, при этом не используются многочисленные визуальные элементы, такие как границы между строками или столбцами (как было раньше). Мы также уменьшили контраст заголовка таблицы, который получал неоправданно много внимания.
Уже хорошо, но можно сделать еще лучше. Уберем повторяющиеся слова из подписей («Number of») и сместим визуальный акцент с подписей на сами значения (сделаем подписи регулярным шрифтом, а значения – полужирным). Получается так:
В окончательном дизайне таблицы, визуальные элементы достаточно заметны, чтобы объединить данные, но при этом не отвлекают много внимания. Подписи, повторяющиеся в разных группах, мы поместили справа от значений – это упростит сканирование таблицы и поиск нужной характеристики.
На этом простом примере показано, как можно уменьшить влияние визуальных элементов на содержание. Лаконичный дизайн является залогом успеха любого пользовательского интерфейса, особенно если пользователям необходимо быстро обрабатывать большие объемы информации. Дизайн тоже должен разговаривать.
Оставьте комментарий
You must be logged in to post a comment. Log in