Pull to refresh

Хороший пользовательский интерфейс, ясность и релевантность информации

Developer Soft corporate blog
Translation
Original author: Mark Miller
Перевод статьи Марка Миллера: Great UI, Clarity, and Information Relevance

Давайте создадим таблицу 3x4 в MS Word:


Теперь заполним таблицу данными:


Давайте остановимся и зададим себе вопрос: «Что здесь не так?»

Прежде чем дать ответ на него, стоит отметить, что в таблице выше есть целый ряд графических элементов, работающих вместе для передачи информации. Данные отображаются в виде текста:


И линий, разделяющих данные:


Отметим, что в Word как линии разделяющие данные, так и сами данные показаны практически с одинаковой шириной. Толщина линии соответствует толщине штрихов, используемых для отображения текста, и контрастность линий также соответствует контрастности текста.

Однако линии и данные в данном случае вовсе не равны с точки зрения отношения к зрителю. Зритель гораздо больше заинтересован в данных, а не в разделяющих их линиях.

Давайте посмотрим на ту же таблицу в Excel:


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

Какую таблицу вы находите более удобной для чтения?


Давайте создадим противоположную Excel версию этой таблицы. А именно, уменьшим визуальный вес данных и повысим визуальный вес наименее важных разделительных линий:


Насколько легче читать эту таблицу по сравнению с таблицей Microsoft Excel выше?

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

Осознав эти два момента, мы можем сделать ещё один вывод, пожалуй, наиболее важный для достижения ясности в пользовательском интерфейсе:
Визуальный вес должен соответствовать актуальности информации.

Это правило крайне важно, легко для следования и всё же часто нарушается. Моя точка зрения, которую я представил в предыдущей статье, заключается в том, что постоянное нарушение этого правила можно объяснить отсутствием подготовки.

Вот как выглядит код на Visual Basic в Visual Studio 2008:


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

Здесь та же картинка с одним небольшим изменением:


Теперь стало намного легче увидеть необходимые данные.

Рассмотрим скриншот из Adobe Lightroom:


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

В будущих статьях мы уделим особое внимание способам контроля над выразительностью и более детально рассмотрим понятие ясности интерфейса.
Tags:
Hubs:
Total votes 128: ↑110 and ↓18 +92
Views 26K
Comments Comments 58

Information

Founded
1998
Location
Россия
Website
www.developersoft.ru
Employees
201–500 employees
Registered