Булат Гарипов · 10 августа 2013
В прошлой статье мы разобрали пример создания простого дизайна. Рассмотрим обратный вариант — как сделать сложный дизайн простым, не потеряв по дороге смысла.
Еще раз уточним, что автор рассматривает дизайн, как визуальную коммуникацию (передача информации, воздействие на потребителя), поэтому будем считать дизайн «простым» или «сложным» с точки зрения восприятия, а не реализации или внешнего вида.
Примером нам послужит интерфейс терминала записи к врачу. Если вас смущает словосочетание «интерфейс терминала», то вспомните, как пополняете баланс мобильного телефона через такую штуку:
В нашем случае действия аналогичны, разве что аппарат денег не просит :-) То, что мы видим на экране, на какие виртуальные кнопки нажимаем и то, что получаем в итоге и есть интерфейс.
Последовательность действий можно посмотреть на странице проекта, мы же будем считать, что соответствующие этапы по выбору нужного врача пройдены и займемся экраном выбора даты и времени записи.
Предыдущая версия, которую клиент попросил переделать, выглядела следующим образом:
О недостатках можно говорить долго, но ключевых проблемы три:
Теперь представьте, что вы — пожилой человек, который не дружит с компьютерами, и хотите записаться на прием к врачу через терминал. Последовательно, шаг за шагом, добрались до этого экрана и пытаетесь в нем разобраться, а за вами очередь, все торопятся, нервничают. Знакомая картина?
Чтобы таких ситуаций не возникало, достаточно использовать в своей работе три полезных правила.
Для понимания важности этого правила достаточно ознакомиться с небольшой исторической байкой:
После неудачного боя Наполеон вызвал начальника артиллерии и резко спросил у него, почему не стреляли пушки. Тот начал оправдываться: «На то у нас было несколько причин. Во-первых, закончились снаряды...»
«Остальное не имеет значения!» — прервал его Наполеон.
С дизайном ситуация аналогичная. Если сходу нельзя быстро определить, о чем идет речь, то все остальное не имеет значения. Это неудачный дизайн.
При первом контакте с хорошим дизайном вы быстро понимаете, что перед вами и начинаете вникать в детали. Или не начинаете, если вам не интересно. Это как заголовки статей в газете или на новостном сайте. Пробегаешь их глазами и определяешься с тем, что читать дальше.
В нашем случае предыдущие экраны выбора врача уже пройдены, однако перейдя к текущему экрану, нам нужно быстро сориентироваться, куда мы попали и что делать дальше. Взглянем на него еще раз:
Ключевое словосочетание «Выбор времени» теряется в окружении других элементов, кроме того набрано тем же размером шрифта, что и «Бесплатный прием», поэтому конфликтует с ним. Для понимания того, где мы оказались, требуется четкий заголовок, например такой:
Cтало понятнее, но на экране все еще большое количество ненужных элементов, два из которых мы только что убрали, ликвидировав неоднозначность («Бесплатный прием» и значок времени).
Отсюда вытекает следующее правило.
Часто начинающие дизайнеры, боясь, что их дизайн окажется недостаточно «крутым», начинают создавать «дизайн ради дизайна». В особо запущенных случаях доходит до того, что за оформлением не видно содержимого.
Поэтому нужно постоянно задавать себе вопрос: «Зачем здесь стоит этот элемент, какая от него польза?» Смело удаляйте бессмысленные элементы, а также элементы, которые воспринимаются неоднозначно. Совершенство достигается тогда, когда нечего прибавить и ничего нельзя отнять.
В нашем случае можно обойтись без дублирования информации о лечебном учреждении, неприемных дней (запись возможна только на 2 недели вперед), плашек (визуальный мусор), легенды, счетчика количества экранов и интерфейс может выглядеть, например, вот так:
Дышать определенно стало легче :) Но это просто эскиз, эстетики в нем мало, поэтому переходим к следующему правилу.
Длинную формулировку можно сократить до короткого словосочетания «грамотная вёрстка», но все равно это самое непростое правило из всех трех. Для понимания того, что скрывается за этими двумя словами, достаточно изучить предыдущие две статьи: об особенностях визуального восприятия и о модульной сетке.
Воспользуемся этим правилом:
Блок с информацией о враче, как результат выбора предыдущих шагов, переехал наверх. Мы таким образом освобождаем центральную часть для ключевой информации о дате и времени приема. В центр также переместилась важная кнопка платного приема. В нижней части — навигационные кнопки и вспомогательная информация.
Кстати, обратите внимание, что все кнопки выполнены в едином стиле. Сразу понятно куда можно нажать.
Элементы выровнены по сетке:
Синий фон и белые кнопки — желание клиента. Они могут быть и другими, это просто одно из возможных визуальных решений.
Если теперь проанализировать получившийся дизайн, то выяснится, что решение построено всего на трех базовых элемента: кнопка, шрифт, подложка. Плюс немного цвета в нужных местах.
С одной стороны это говорит о профессионализме дизайнера, который решил задачу, используя минимум средств. С другой стороны клиент частенько попрекает дизайнера этой простотой: «Чего-то как-то просто получилось. Где дизайн то? Так нарисовать и я могу».
В этой ситуации важно понять следующее: для того чтобы информация начала действительно легко восприниматься, дизайнеру приходится существенно поработать. Как вы думаете, сколько пришлось сделать шагов от первого макета до финальной картинки? Около сорока.
Кому интересно, могут посмотреть процесс (показаны только ключевые изменения, поэтому количество шагов уменьшено вдвое).
Упрощайте сложный дизайн, используя всего три полезных правила:
P. S. Новые статьи — в «Школе дизайна»:
Визуальный и смысловой ритм, как основа удачного решения
Вьюпорт и медиа-запросы
Переделка дизайна листовки
