5 заметок с тегом

дизайн

Не скрывать, а показать сразу

Расскажу об одном простом принципе в информационном дизайне и дизайне вообще

ТАСС сделало интерактивный рассказ про дирижабль «Италия»:

Не собираясь оценивать их рассказ, я расскажу об одном моменте рассказа.

На странице есть схема устройства дирижабля:

Все детали скрыты за красными точечками, нужно навести мышку, чтобы узнать что это за деталь. Чтобы посетители справились, пришлось даже сделать мини-онбординг (↑ справка). Я бы предположил, что он не очень помогает.

Но даже те, кто по каким-то причинам знают, что делать, будут мучиться: навел — прочитал — навел — забыл что только что было — навел — прочитал. Это неудобно, желание изучать схему почти сразу пропадает.

Лучше сразу всё подписать:

Особенно глупо точки смотрятся на этой фотографии:

Чтобы не заставлять читателя страдать, есть простое правило:

Если можно не прятать, лучше не прятать.

Когда будете подписывать схемы и скриншоты почитайте на что обращать внимание: Как подписывать скриншоты

Подписаться на блог…

Переверстка: письмо из Пикпоинта

Сеть постаматов Пикпоинт присылает письмо, когда заказ приезжает в постамат.

Письмо выглядит так:

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

Самая важная часть письма — код, вот она:

Мой вариант вышел таким:

Не буду описывать процесс, вот что делал:

  • минимальная редактура: написание дат, тема письма, советы и прочее,
  • код получения — самое важное, он сделан крупно,
  • график работы и адрес постамата вытащены из ссылки «Здесь»,
  • информация о заказе перенесена ниже, она не так важна,
  • убраны картинки-иллюстрации к трем советам,
  • логотип из подвала поднят наверх, справа как раз место для него,
  • изменен адрес отправителя (вспомнил уже только в мобильной версии, в десктопной не стал менять).

Мобильная версия. Мне она кажется важней, тот случай когда mobile first. Перед постаматом я всегда стою с открытым письмом, там нужный мне код.

Что осталось нерешенным:

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

Как подписывать скриншоты

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

Я подключился совсем рано, когда подписи скриншотов были совсем сырыми:

То, что ко мне попал один из самых первых черновиков — большая удача, из черновика получились хорошие примеры. Их не пришлось придумывать из головы, они вышли иллюстративные и при этом реальные.

Общие правила

Про оформление подписей есть бюрошный совет: bureau.ru/bb/soviet/20140728. В нем Артём рассказывает о роли подписей, о том, как их ставить и как рисовать выноски. Подписчики учебника «Типографика и верстка» могут дополнительно посмотреть разворот 71.

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

Прием 1: УВЛ (убрать все лишнее)

Самое простое, с чего можно начать улучшение этой картинки — убрать очевидные сущности. Текста станет меньше, свободного места — больше, подписи станут компактней и аккуратней.

Слово button встречается 12 раз и все они используются, чтобы сказать «это — кнопка». Вообщем почти все элементы на этом скриншоте — кнопки, поэтому button безболезненно убирается:

Прием 2: вынести общее за скобки

Иногда от повторений нельзя избавиться совсем. В примере ниже повторяется не просто button, а filter button.

Убрать button можно, а вот от filter избавиться нельзя. Если убрать слово filter, то потеряется важный смысл. При этом filter button относится ко всем четырем действиям, все они — действия над сохраненными фильтрами. Нет необходимости писать про сохраненные фильтры 4 раза, можно написать один раз и больше не повторяться.

Например, так:

Фактически мы вынесли filter button за скобки, как в математическом выражении.

Прием 3: соблюдать теории близости

Нужно следить, чтобы при расположении подписей не нарушалась теория близости. Здесь надпись близка к чужой палочке, возникает путаница:

Прием 4: использовать естественное соответствие

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

На этом куске скриншота все 4 иконки стоят ровно в ряд с одинаковыми отступами:

По возможности лучше не подписывать что-то сбоку, что-то снизу, а расположить подписи в ряд, с одинаковыми интервалами, — это усилит взаимосвязь:

Прием 5: выравнивать текст осмысленно

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

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

За выравниваем всегда следят на транспортных схемах: правильное расположение названия станции помогает понять, где какая станция. Посмотрите, например, линейные схемы Московского метро: artlebedev.ru/metro/line-map.

Прием 6: убрать «почти, но не совсем»

Существует общее правило в дизайне: блоки, надписи и другие элементы нужно или выровнять совсем, или совсем не ровнять. Не должно быть элементов, неровных на чуть-чуть, не должно быть никаких «почти, но не совсем».

Посмотрим на картинку:

Здесь много почти, но не совсем, всего 6 видов разного выравнивания:

Подписи будут аккуратней, если их выровнять друг относительно друга так:

Ещё примеры «почти, но не совсем» в посте Ильи Бирмана.

Прием 7: следить за типографикой

Подписи — неблагодарный для верстки формат: колонка узкая, а тут ещё могут появиться эти длинные русские слова. В узких колонках особенно важно следить за интерлиньяжем (межстрочным интервалом), лучше уменьшить его относительно базового. Filter и panel расположены так далеко друг относительно друга, что может показаться, что это две подписи. Если уменьшить интерлиньяж будет лучше:

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

Про интерлиньяж:
bureau.ru/bb/soviet/20140310/
bureau.ru/bb/soviet/20140310/

Прием 8: редактировать текст

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

Прием 9: рассказывать по частям

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

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

Приемы

  1. Убрать все лишнее
  2. Вынести общее за скобки
  3. Соблюдать теории близости
  4. Использовать естественное соответствие
  5. Выравнивать текст осмысленно
  6. Убрать «почти, но не совсем»
  7. Следить за типографикой
  8. Редактировать текст
  9. Рассказывать по частям

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

 164   2018   верстка   гайдлайны   дизайн   подписи
Подписаться на блог…

Объявления о закрытии метро

Оригинал в ЖЖ: http://withoutbrains.livejournal.com/89319.html

Тут в субботу закрывали 4 станции метро на нашей ветке, в связи с чем были объявления о закрытии. Я видел минимум три варианта, два сфоткал.

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

Наравне с этим везде висят объявления, сделанные, судя по всему в депо:

Первое, что хочется сделать — пошутить и нарисовать классическое и потешить своё ЧСВ.

Однако, как заметила Оля, всё не так просто как кажется.

Объявление Дептранса лучше, красивей, человечней. Но при этом объявления депо более работоспособны.

Вот почему:

  • Каждый раз, когда я вижу треш-объявление на листе бумаги, я его читаю. Обычно — это существенные изменения в работе станций. Я мучаюсь, продираясь сквозь косный текст и плохую вёрстку, но читаю
  • Объявление на листе бумаги лучше видно. Оно настолько выделяется из оформления станции и вестибюлей, что видно и на станции, и в вестибюлях. Дептрансовское объявление же теряется на фоне тарифов и прочего, его хуже видно издалека. Оно не кричит «Ахтунг, Ахтунг, не проходи мимо, 4 станции метро на вашей ветке будут закрыты целый день».

Оба этих фактора, как мне кажется, приведут к тому, что дептрансовское объявление мало кто увидит.

Что же делать?

  1. Вешать всегда ахтунг-объявление и нормальное рядом. На ахтунговом писать «Изменения в графике, читайте вот тут →». Постепенно отказываться от ахтунговых, приучая к нормальным. Да, это стёб.
  1. Переделать дизайн нормальных объявлений, чтобы они были более заметны. Сделать их сначала очень заметными, прямо до рези в глазах.

А потом люди привыкнут к внешнему виду и можно будет уменьшать заметность, оставив разделение: объявления о изменении графика / справочные материалы по тарифам.

 Нет комментариев    23   2014   дизайн   метро   навигация
Подписаться на блог…

Статистика по задачам

Оригинал в ЖЖ: http://withoutbrains.livejournal.com/78773.html

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

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

Подписаться на блог…