Как правильно спроектировать форму входа в систему
В этой статье вы найдёте пошаговое руководство о том, как создать красивую, иерархически правильную форму входа в систему, которая увеличивает конверсию сайта. Давайте начнём!
Шаг 1 — Что мы собираемся делать?
Форма, и особенно кнопка — два важных элемента интерфейса. Это фундаментальные компоненты практически любого дизайн-проекта. Поэтому важно сделать их правильно.
Сколько групп в форме входа в систему?
Мы стремимся к тому, чтобы пользователь быстро понял, что в форме входа в систему есть три основные группы.
Чтобы облегчить процесс обработки информации, финальная кнопка подтверждения входа в систему отделена от остальных полей большим отступом.
Шаг 2 — Сделайте шаг назад
Многие дизайнеры сразу же принимаются за дело. Они рисуют несколько прямоугольников, добавляют шрифты, выбирают интервалы и получают готовую форму. Но есть более лучший подход.
Сначала спросите себя, сколько логических групп содержит форма. Сколько мысленных шагов должен сделать пользователь?
Иерархия
Мы начинаем с заголовка, который помогает пользователю понять, о чём идёт речь в форме входа в систему.
Затем мы показываем обязательные для заполнения поля и чётко отделяем их друг от друга.
Дальше мы размещаем кнопку финального действия и снова визуально отделяем её от полей для заполнения, чтобы пользователь хорошо идентифицировал эти три отдельных этапа.
Шаг 3 — Иерархические интервалы
Следующий шаг (ещё до выбора шрифтов и цветов) — создание иерархии.
У нас есть ТРИ основные группы, которые следует отделить друг от друга. Но как это сделать?
Здесь в игру вступает правило близости…
Добавьте сетку
…используйте классическую 8-пиксельную сетку, зная о том, что нужно разделить элементы формы на группы. Убедитесь, что два синих интервала (на картинке) больше, чем все остальные.
Они чётко отделяют 1, 2 и 3 группы между собой
Шаг 4 — Используйте сетку и разделите элементы
При определении интервалов начните с того, какую сетку вы будете использовать в дизайне — чаще всего она будет 8-пиксельной.
Теперь на основе сетки примените правильные интервалы, чтобы чётко разделить три группы элементов. Мы используем для этого синие интервалы, равные 24 пикселям, потому что это самый большой интервал, который у нас есть. Его мы будем использовать только между этими тремя основными группами.
Шаг 5 — Выберите шрифты
Затем вам нужно выбрать шрифты. Вернее, один шрифт, потому что если вы только начинаете изучать дизайн, не стоит использовать несколько шрифтов в дизайне формы входа в систему.
Выберите ОДИН шрифт без засечек.
Дальше подберите максимум 3 размера и/или 3 стиля. Этого будет более чем достаточно. Здесь ключевым фактором является последовательность.
На картинке выше вы увидите, что в форме дизайнер взял три размера шрифтов, два из которых использовал только в заголовке?
Да, можно оформить форму, используя только один размер шрифта, если он достаточно большой. Такой подход поможет предотвратить многие ошибки, которые совершают начинающие дизайнеры, связанные с неправильными пропорциями шрифтов!