Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UX

Искусство эффективного структурирования информации

by
Read Time:9 minsLanguages:

Russian (Pусский) translation by Dmitri Verovski (you can also view the original English article)

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


Обобщенные категории

Начнем с разработки категорий, которые будут содержать примеры информации.

Первое требование к понятным категориям - они должны быть обобщенными.  Под этим подразумеваю, что они сгруппированы по смыслу. Лишь несколько вещей более разражают чем презентация, которая нарушают это правило.  Например:

  • Месячный отчет
  • Отчет продаж
  • Отчет Джо
  • Новый отчет

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

  • Месячный отчет
  • Недельный отчет
  • Квартальный отчет

Или:

  • Отчет продаж
  • Отчет расходов
  • Отчет налогов

Или:

  • Отчет Джо
  • Отчет Джека

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

  • Отчеты за период времени
  • Отчеты по движению наличности
  • Ответы по агентам
  • Отчеты по возрасту

Определяем разновидность

Для развития терминологии скажем, что обобщенные категории должны принадлежат к одному виду. Так, "за период времени" будет видом, а "за месяц" категорией внутри вида. Это ведет нас к следующему принципу: пользователь не должен видеть более одного вида за раз.

Таким образом, если в системе содержатся:

  • Отчет за период времени
  • Отчет по регионам
  • Кубы (OLAP отчеты)

то этот принцип нарушен. Отчеты "по регионам" и "Кубы" не принадлежат к одному и тому же виду. Вот лучший пример:

  • Отчеты
  • Кубы (OLAP отчеты)

Эти относятся к видам, например "Презентация автомобилей". "Отчеты по регионам" и "отчеты по периоду времени" принадлежат к виду "Отчеты".

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

  • Вид: Презентация автомобиля
  • Категории: Отчеты и кубы (OLAP отчеты)
    • Вид: Отчеты
    • Категории: Ответы по периоду времени; Отчеты по потоку наличности; Отчеты по агенту; Ответы по возрасту
      • Вид: Ответы по потоку наличности.
      • Категории: Ответы по продажам; Ответы по расходам; Ответы по налогам

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

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


Организационные решения

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

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

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

Маркеровка категорий должны определять содержание категории. Принцип столь элементарен, что вам может показаться будто это саркастическое замечание. Если бы. Чтобы мы могли вернуться к этому принципу давайте дадим ему название: принцип содержательных наименований.

Наименования категорий могут быть содержательными для постоянных пользователей, но не для новеньких. Проблему можно решить добавлением пояснений. Как-то я забрел на театральный сайт с наименованием в меню "Откройте серии". Я так и не понял о чем это было, к тому времени сайт потерял мое расположение. Краткое разъяснение не украло бы у сайта много места. "Откройте серии — наши суботние вечерние лекции" или "Откройте серии — Записи наших постановок".

Визуальная монополия: когда пользователь выбирает категорию, все варианты выбора отображены вместе.

Выбор категорий доложен быть организованным согласно принципу визуальной монополии. Список позиций притягивает внимание; если пользователь выбирает из горизонтального ряда кнопок, он врядли заметит еще один список на том же экране. А если заметит, то будет раздражен — ведь он уже потратил усилия на то, чтобы определить свою цель в первом ряде кнопок. Он уже попытался сложить мысленную картину информации, основываясь на данных из первых категорий. Однако усилия были потрачены в пустую, если пользователь находит другой набор категорий в другом месте.

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


Психологический тип пользователя

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

Чтобы увидеть как эти принципы нарушаются в жизни рассмотрим выбор из опций в Microsoft Word под кнопкой "Офис", Параметры Ворда:

  • Основные (Popular)
  • Экран (Display)
  • Правописание (Proofing)
  • Сохранение (Save)
  • Дополнительно (Advanced)

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

Кликнув по кнопке Параметры, вы видите список вышеперечисленных пунктов. Мы видим не содержательные по смыслу наименования разделов. Откуда пользователю знать, что искомое находится в разделе Основные (Popular)? Откуда пользователю знать, что оно не находится в разделе Дополнительно (Advanced)? Эти пункты нарушают принцип содержательного наименования категорий.

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


Резюмируя

Будет тяжело

Во-первых, создайте категории. Они будут основой иерархии. На верхнем уровне установим разновидности. Каждая разновидность будет содержать набор категорий. Каждая категория сама по себе станет разновидностью, с вложенным набором категорий. И так далее. Разновидности верхнего уровня, как и подчиненный список категорий должны быть обобщены между собой: наш основной принцип. Пользователь не должен видеть необобщенный список категорий. Категории обобщены если подразделаются на соизмеримые разделы. Это тяжелая работа, результатом которой будет концептуальный скелет ваших усилий. Поэтому чтобы не переусердствовать, у вас должно быть ясное представление о содержании проекта. Им может быть небольшой набор событий фирмы или список продуктов.

Вам придется определить эстетический подход. Мне нравится простой ясный и локаничный дизайн. Я люблю унифицированные интерфейсы больше чем, к примеру, горизонтальный список в одном месте, вертикальный в другом (хотя и они могут быть сделаны со вкусом). Подробно останавливаться на этом не будем. Это часть творческого процесса, и любой дизайнер хочет развивать свои собственные стандарты.

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

Хорошо подумайте об иконках. Иногда они помогают, но не всегда. Internet Explorer становится менее словесным с каждым новым релизом. Зеленая округлая стрелка означает "историю". Я не вижу связи. Желтый квадратик с задранным углом означает "обсудить". Ни желтый квадратик ни даже вербальное "Обсудить" не говорят мне ни о чем. Говоря в целом, клиенты не археологи, которые светят фанариком по стенам пещеры. Клиент ожидает более вразумительные символы, а не пазл.


А вот и принципы:

  • Категории должны быть обобщены.
  • Категория - это компонент разновидности. Он сам может стать разновидностью, если в него вложить другие категории.
  • За раз пользователь должен видеть только одну разновидность (и вноженные в неё компоненты категории) за раз.
  • Выбор между множественными и единичными ячейками. Может ли позиция быть отнесена к более чем одной категории?
  • Будьте последовательны в использовании маркировки: они идентифицируют пользователя или информацию? Сделайте это очевидным.
  • Принцип содержательного описания: пользовать может сделать вывод о содержании категории по её названию.
  • Описания могут помочь, если наименования категорий не достаточно ясны. Для подобных ошибок нет оправланий, но наименование категории может содержать собственное имя программы, продукта или запатентованного атрибута.
  • Визуальная монополия: если пользователь выбирает категорию, все варианты выбора отображены вместе.
  • Думаю вы удивитесь, сколько усилий уходит на подобную работу. Большинство сайтов развиваются эволюционно, по мере добавления нового в оригинальный дизайн. Такой подход может казаться практичным. Визуализация всего в целом является главнейшей задачей, но лучший опыт вы приобритете на практике.
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.