Сила интервалов. Как соорудить удобный интерфейс из воздуха
Начинаю серию статей о базовых правилах дизайна.
Что делает интерфейс плохим?
Неряшливость, Неудобство, Неочевидность. Если в интерфейсе есть хотя бы одна из этих трёх Н, то его уже нельзя будет назвать хорошим.
Откуда берутся неряшливость и неудобство?
В первую очередь, они возникают из-за отсутствия логичной структуры и ритма на странице. Если элементы не сгруппированы, либо сгруппированы абы как, найти нужную информацию или решить пользовательскую задачу, будет нелегко.
Задача правильной группировки элементов – фундаментальная задача любого дизайна, и речь не только об IT . Оглянитесь вокруг, и вы увидите безобразно свёрстанные чеки, квитанции, билеты, визитки, листовки, флаеры и многое-многое-многое.
Как же создаётся хорошая структура?
Она создаётся, буквально, из ничего. Она достигается правильной расстановкой интервалов. Принцип расстановки интервалов очень простой, его можно сформулировать так:
Связанные друг с другом элементы должны быть плотно сгруппированы и расположены в порядке, удобном для восприятия.
Вместо тысячи слов - один простой пример. Он покажет, на какие чудеса способны пустоты в нужных местах и блоки, расставленные в правильном порядке.
Пример
1. Заказчик поручает сделать визитки и скидывает ТЗ. Дизайнер почитал ТЗ и понял, что на визитке нужно разместить довольно много информации. Для начала, он просто располагает данные на макете, не заморачиваясь со структурированием. Вот что у него получается:
Результат - ниже среднего. Нужно продираться через строчки, чтобы добраться до нужной информации. Хочется просто выбросить визитку подальше.
2. Дизайнер рассмотрел, какие данные хранятся на визитке и решил сгруппировать их по смыслу. Вот что получилось у него во второй раз:
Визитка по-прежнему остаётся очень простой: дизайнеру есть с чем поработать. Но теперь она намного информативнее и удобнее для восприятия.
- Читатель видит логотип и официальное название организации.
- Быстро понимает, кому принадлежит визитка.
- Видит, по каким каналам и как можно связаться с этим человеком.
- На досуге может почитать регалии и посмотреть информацию на сайтах.
Нужный эффект достигается без колоссальных затрат, всего за пару минут.
Как не надо делать
3. На досуге дизайнер решил поэкспериментировать со структурой визитки. И расставил блоки совсем иначе. Но это не особенно помогло. Вот результат его упражнений:
Теперь на визитке появился воздух, а информация разделена на смысловые блоки. Но как движется взгляд наблюдателя?
Сначала он падает на центральную область, а затем начинает хаотично блуждать по углам в попытках собрать картинку и извлечь из неё что-то полезное. Вручая такую визитку, вы заставляете незнакомого человека впустую тратить своё время.
Выводы
1. Когда несколько элементов находятся в непосредственной близости, они воспринимаются, как один визуальный элемент. Поэтому связанные друг с другом элементы должны быть сгруппированы плотнее.
2. Структурируйте и располагайте информацию правильно. Чем лучше организованы ваши данные, тем вероятнее, что их прочтут и запомнят.
3. Думайте о том, в каком порядке расположены блоки: не заставляйте пользователя целую вечность искать нужный элемент.
На этом теоретическая часть закончена. В следующей статье попрактикуемся и применим этот принцип на живом примере.