Сначала задача и содержание
Опишите, зачем посетитель пришёл на страницу. Для вымышленной библиотеки это может быть поиск времени работы, знакомство с мероприятиями или продление книги. Эти задачи требуют разных сведений и действий. Затем составьте список необходимого содержания и расположите его в порядке, соответствующем сценарию. Не нужно автоматически делать все блоки одинаковыми по размеру. Если важное условие спрятано после длинного декоративного вступления, визуальная привлекательность не решает проблему. Бумажная схема помогает проверить последовательность ещё до рисования окончательного макета.
Иерархия показывает отношения
Заголовки, размер текста, расстояния и контраст помогают различать главные и вспомогательные элементы. При этом визуальное выделение должно соответствовать смысловой структуре. Заголовок раздела обозначает его содержание, а не просто создаёт крупную красивую строку. Связанные элементы располагают так, чтобы их принадлежность была понятна. Если подпись находится ближе к соседнему полю, пользователь может ошибиться даже при хорошем чтении текста. Не стоит использовать только цвет для важного различия: дополнительная подпись или форма помогает тем, кто воспринимает цвета иначе.
Интерфейс имеет состояния
Форма существует не только в аккуратном пустом виде. Пользователь может оставить поле незаполненным, ввести неподходящий формат или ожидать ответа. Для каждого состояния нужно понятное поведение. Сообщение об ошибке объясняет, что случилось и как исправить ситуацию, без обвинения человека. После успешного действия требуется подтверждение, соответствующее фактическому результату. Кнопка не должна обещать одно, а выполнять другое. Проверка состояния загрузки и неуспеха часто выявляет важные пробелы, которые не видны на статичном презентационном экране.
Размер экрана меняет размещение
На узком экране блоки могут переходить в другой порядок, а длинные строки и большие изображения — занимать слишком много места. Важно сохранять смысловую последовательность, а не просто уменьшать всё пропорционально. Читаемость, возможность нажать элемент и доступность подписей проверяют в разных условиях. Пользователи также могут увеличивать текст или пользоваться клавиатурой и вспомогательными технологиями. Поэтому дизайн связан с корректной реализацией структуры, а не ограничивается картинкой. Для начального прототипа полезно проверить один и тот же сценарий в широком и узком варианте.
Попробуйте на практике
Нарисуйте страницу вымышленной библиотеки для записи на открытое мероприятие.
- Определите три вопроса посетителя: что произойдёт, когда и как записаться.
- Разместите ответы на бумаге, выделив один главный следующий шаг.
- Добавьте поля формы с понятными подписями и сообщение для незаполненного обязательного поля.
- Нарисуйте подтверждение записи и отдельное состояние ошибки отправки.
- Перестройте тот же сценарий для узкого экрана, сохранив порядок смысла.
Как проверить результат. Макет понятен, если посетитель может ответить на три вопроса, различить успех и ошибку и пройти тот же сценарий на обоих размерах экрана.
Частые вопросы
Нужно ли сначала выбирать цвета?
Цвета важны, но сначала полезно определить содержание и структуру. Иначе оформление может маскировать неясный сценарий.
Достаточно ли красивого макета главного состояния?
Нет. Нужны также ошибки, загрузка, подтверждение и поведение на разных экранах. Именно в этих условиях часто обнаруживаются трудности использования.
Самостоятельный разбор темы. Содержание конкретной обучающей программы здесь не представлено.