Пользовательский интерфейс — Глава 4 «Экраны»

Окна
Управление окнами — не задача пользователя.
В качестве примера — почта, в которой всё в одном окне, но при клике открывается в новом. Без необходимости окна не плодятся.
Вкладки — организация пространства без окон.
Бока экрана — лучшее место для кнопок. Прицеливание минимально.
Попап — самое тупое, что можно придумать. не требует никаких интеллектуальных усилий дизайнера.
Дальше приводится пример (как замена попапа) с анимацией сдвига и раскрытия информации.
Как аргумент приводится интерфейс службы охраны, в котором всё должно быть на виду (за уши притянуто).
Формы
Данные формы бесконечно ценны. Не надо забывать, что на мобильном можно промахнуться, вернуться, отвлечься, перезагрузить страницу свайпом и ... потерять данные.
Поля ставить лучше друг под другом, избегая «кирпичной кладки».
Подпись и текст полей должен быть набран одним шрифтом и стоять на одном baseline’е с первой строкой (если их много).
Пишут, что выравнивать надо по левому краю. Если подписи выравнивать по правому краю, то ломается левый край и тяжелее читать.
Если подпись длинная по сравнению с остальными, то лучше переносить на 2 строки (или лучше сократить).
На большом экране лучше «табличная вёрстка», на мобильниках подпись можно ставить над полем.
Размер поля должен подсказывать, что ожидается от пользователя (код домофона — небольшое поле).
Сообщение об ошибке должно максимально помогать человеку.
Место для ошибок лучше заранее предусматривать.
Преждевременный показ ошибок так-же неправильно.
Вместо подсказок по исправлению ошибок надо их минимизировать (маски, отключение недоступного).
О незаполненном поле надо говорить перед отправкой.
Все поля должны быть обязательными или убирать их нафиг. Подписать только «Комментарии, если есть». Необязательные лучше отделить и дополнительно подписать.
Кнопки не надо отключать, если не заполнено единственное обязательное поле — вся форма кажется неработающей.
На страницах, где пользователь принимает решение о покупке кнопки лучше не отключать.
Если логика сложная и кнопка отключена, то можно подписать причину («Осталось заполнить...») и дать ссылку на не заполненные поля.
Навигация
Пошаговый процесс добавляет порядка. Но злоупотреблять этим не стоит.
Слова «Продукты» и «Услуги» не информативны. Хороший пример — ИКЕЯ.
Фильтры
Хорошие фильтры способны заменять сложную иерархию
Нельзя вываливать на посетителя фильтры — БД
Поиск
Должен работать совместно с тегами, должен подсказывать где найдены результаты.
Сетка
Тут всё стандартно — всё должно быть по сетке, даже размеры полей формы.
Как и в слу­чае с отсту­пами между эле­мен­тами, текст в интер­фейсе выиг­ры­вает от умень­ше­ния числа раз­ных кег­лей и стилей.
В общем, сетка, сетка, гайдлайны....

Поделиться
Отправить
13 марта