January 18, 2023

Как правильно спроектировать форму входа в систему

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

Шаг 1 — Что мы собираемся делать?

Форма, и особенно кнопка — два важных элемента интерфейса. Это фундаментальные компоненты практически любого дизайн-проекта. Поэтому важно сделать их правильно.

Сколько групп в форме входа в систему?

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

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

Шаг 2 — Сделайте шаг назад

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

Сначала спросите себя, сколько логических групп содержит форма. Сколько мысленных шагов должен сделать пользователь?

Вы готовы к следующему шагу?

Иерархия

Мы начинаем с заголовка, который помогает пользователю понять, о чём идёт речь в форме входа в систему.

Затем мы показываем обязательные для заполнения поля и чётко отделяем их друг от друга.

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

Шаг 3 — Иерархические интервалы

Следующий шаг (ещё до выбора шрифтов и цветов) — создание иерархии.

У нас есть ТРИ основные группы, которые следует отделить друг от друга. Но как это сделать?

Здесь в игру вступает правило близости…

Добавьте сетку

…используйте классическую 8-пиксельную сетку, зная о том, что нужно разделить элементы формы на группы. Убедитесь, что два синих интервала (на картинке) больше, чем все остальные.

Они чётко отделяют 1, 2 и 3 группы между собой

Шаг 4 — Используйте сетку и разделите элементы

При определении интервалов начните с того, какую сетку вы будете использовать в дизайне — чаще всего она будет 8-пиксельной.

Теперь на основе сетки примените правильные интервалы, чтобы чётко разделить три группы элементов. Мы используем для этого синие интервалы, равные 24 пикселям, потому что это самый большой интервал, который у нас есть. Его мы будем использовать только между этими тремя основными группами.

Шаг 5 — Выберите шрифты

Затем вам нужно выбрать шрифты. Вернее, один шрифт, потому что если вы только начинаете изучать дизайн, не стоит использовать несколько шрифтов в дизайне формы входа в систему.

Выберите ОДИН шрифт без засечек.

Дальше подберите максимум 3 размера и/или 3 стиля. Этого будет более чем достаточно. Здесь ключевым фактором является последовательность.

На картинке выше вы увидите, что в форме дизайнер взял три размера шрифтов, два из которых использовал только в заголовке?

Да, можно оформить форму, используя только один размер шрифта, если он достаточно большой. Такой подход поможет предотвратить многие ошибки,  которые совершают начинающие дизайнеры, связанные с неправильными пропорциями шрифтов!