Сила интервалов. Как соорудить удобный интерфейс из воздуха

Начинаю серию статей о базовых правилах дизайна.

Неряшливость, Неудобство, Неочевидность. Если в интерфейсе есть хотя бы одна из этих трёх Н, то его уже нельзя будет назвать хорошим.

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

Задача правильной группировки элементов – фундаментальная задача любого дизайна, и речь не только об IT . Оглянитесь вокруг, и вы увидите безобразно свёрстанные чеки, квитанции, билеты, визитки, листовки, флаеры и многое-многое-многое.

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

Вместо тысячи слов - один простой пример. Он покажет, на какие чудеса способны пустоты в нужных местах и блоки, расставленные в правильном порядке.

1. Заказчик поручает сделать визитки и скидывает ТЗ. Дизайнер почитал ТЗ и понял, что на визитке нужно разместить довольно много информации. Для начала, он просто располагает данные на макете, не заморачиваясь со структурированием. Вот что у него получается:

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

2. Дизайнер рассмотрел, какие данные хранятся на визитке и решил сгруппировать их по смыслу. Вот что получилось у него во второй раз:

Визитка по-прежнему остаётся очень простой: дизайнеру есть с чем поработать. Но теперь она намного информативнее и удобнее для восприятия.

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

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

3. На досуге дизайнер решил поэкспериментировать со структурой визитки. И расставил блоки совсем иначе. Но это не особенно помогло. Вот результат его упражнений:

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

Сначала он падает на центральную область, а затем начинает хаотично блуждать по углам в попытках собрать картинку и извлечь из неё что-то полезное. Вручая такую визитку, вы заставляете незнакомого человека впустую тратить своё время.

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

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

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

На этом теоретическая часть закончена. В следующей статье попрактикуемся и применим этот принцип на живом примере.