Как улучшить навигацию

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

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

Основные недостатки существующей:

  1. Слишком много нефункционального цвета. Не сразу очевидно, почему Место встречи и Аптека выделены красным.
  2. Плохая верстка. Информация разбросана по разным сторонам (в надежде, что это лучше покажет направление). Правая флаговая выключка — редкий некрасивый прием, если только навигация не на идише делается. Я даже не помню какую-то очень сложную ситуацию, когда такой прием мне был необходим.
  3. Заигрались в пиктограммы. Иконки очень массивные, и в данном случае не выполняют никакой функции. Текста не сильно много, он прост и понятен, поэтому пиктограммы тут лишние.
  4. Не совсем понятно, зачем было использовать наклонное начертание в английском языке. Museo, конечно, красивый шрифт, но курсив у него не для навигации.
  5. Стрелки очень жирные.
  6. Расстояния между отделяющими желтыми плашками очень скудное. А из-за плохой верстки создается ощущение, что Место встречи принадлежит Карте зоопарка.

Я не стал делать пошаговую инструкцию в картинках, потому что нет в этом смысла. Лучше по пунктам опишу ход мыслей и исправлений.

Короче, поехали улучшать.

  1. Сперва разберемся с цветами. Попробуем поработать с уже существующим желтым, и по мере необходимости добавим еще один. Как я уже говорил выше, иконки тут лишние. Я бы вообще их убрал. Но представим, что заказчик очень хочет иконки. Красим их в желтый и делаем маленькими.
  2. Двойная строка для русского и английского не сильно хорошо работает в данном примере, потому что короткие строки. Ставим рядом. Здесь появляется необходимость как-то визуально отделить русский от английского. Вводим легкие различия в виде тепло-серого цвета.
  3. Чтобы организовать хорошую вертикаль, переносим иконку Информации вправо, а блоки текста равняем по левую сторону. Синий цвет слишком активный, поэтому меняем цвет иконок на белый.
  4. Между последним пунктом в списке и последующей плашкой Карта зоопарка даем больше расстояния, потому что список принадлежит верхнему заголовку.
  5. Меняем размер стрелок (на самом деле, я взял символы < > из шрифта, чтобы не заморачиваться).
  6. Меняем WC на Toilet, потому что дурной тон так оставлять. Да и слишком короткая аббревиатура.

Теперь стало лучше и чище. Информация правильно организована. Заметьте, что кегль я оставил прежним, при этом сократил площадь носителя на высоту желтой плашки, а это удешевляет производство. Скорее всего, высота определяется не количеством информации, а уровнем зрения человека, но мысль понятна — где-то можно сэкономить. Я вижу еще десяток улучшений, но мы сейчас не редизайн делаем.

Основной принцип хорошей навигации — минимум телодвижений при максимуме информации. Особенно это касается пиктограмм. Мне кажется, что надо постепенно отказываться от иконок в пользу грамотного и понятного текста. По крайней мере, сводить к минимуму. Иконки нужно использовать тогда, когда могут быть разночтения основного текста. Например, если есть надпись Coffeshop, то это не всегда о том, чтобы попить кофе :-) А слово Exit не всегда является выходом из здания (есть еще пожарные, служебные, запасные выходы).

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

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

Поделиться
Отправить
Запинить
5 комментариев
Илья

Придираюсь ко второму недостатку, который про информацию, разбросанную по сторонам. Илья Бирман объясняет так: «Сторона, с которой стоит стрелка на знаке, помогает понять, куда она указывает, чуть ли не сильнее, чем форма этой стрелки».

Совет Бирмана про указатели: http://artgorbunov.ru/bb/soviet/20140624/.

Seryozha S.

Заголовки не дадут вам следовать этому принципу. Они тогда просто превратятся в часть направлений.

Илья

Я процитировал не ту часть совета. Надо было так: «Чтобы лучше связать объекты со своей стрелкой, лучше пододвинуть поближе (иногда можно ради этого даже нарушить сетку)».

Бирман в совете приводит пример ломания вёрстки, а вы говорите, что так нельзя. Я теперь не знаю, кто прав.

Seryozha S.

Я нигде не говорил, что так нельзя. В примере Бирмана ход вполне оправдан: небольшой список, отсутствует подстрочник, нет другой графики. А главное — он ничего не ломал :-)

Правая флаговая выключка (в примере зоопарка) и Indent (смещение относительно линии набора) — два разных приема. Мне кажется, вы их не отличаете.

Если я неправильно понял, то накидайте скриншоты и цитаты, о которых идет речь.

Илья

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

Seryozha S.

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

Илья

Вот Артём Горбунов помогает дизайнерам, формулируя универсальные принципы вёрстки. Давайте тоже сформулируем: «Смещать подписи объектов относительно линии набора только в коротких строках». Предлагаю вам подправить или дополнить правило.

Seryozha S.

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

Илья

Сергей, как скажете.

Горбунов скоро выпустит книгу «Типографика и вёрстка». Будете читать? Как вам книга? Просто интересно ваше мнение.

Seryozha S.

Когда выйдет, прочту.

Популярное