2 заметки с тегом

москва

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

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

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

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

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

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

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

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

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

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

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

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

2013   дизайн   москва   навигация   совет

Как меняется Москва

Глазам своим не верю. Незамедлительно дизайн-код стал воплощаться в жизнь.

Слева видны две ужасные вывески Дома книги и Лавки писателей. Сейчас хочется туда зайти.

Полностью почистили вход и козырек (его, думаю, тоже уберут). Посмотрите, сколько говна была. Нам даже пришлось отдельно выносить на фотографии. А теперь чистота.

Эти страшные баннеры под окнами теперь уже история.

Катарсис. Можно еще улучшать и улучшать, потому что все идут друг другу на встречу.

2013   дизайн-код   москва   студия