Цитаты из книги «Дизайнер интерфейсов. Принципы работы и построение карьеры»

Для создания больших сущностей (проектов, заказов) используйте отдельную страницу. Небольшие же можно создать в модальном окне, не вырывая пользователя из контекста использования сервиса. Старайтесь избегать наложения одних модальных окон на другие.

ится важная информация, то случайный клик может привести к потере данных. Поэтому в данном случае лучше закрывать окно по нажатию на иконку крестика или кнопку «Отменить».

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

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

рядке располагать данные. Если это таблица контактов, то логичнее начать с имени. Если база заявок, то, скорее всего, информацию нужно отсортировать по дате или статусу (всё зависит от бизнеса). Предоставьте пользователю возможность сортировать таблицу по нажатию на заголовок столбца

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

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

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

Если вы не на Dribbble, то у полей должны быть четкие края, которые видны не только на дисплее Retina, но и на старых мониторах (советую проверять все оттенки серого). Плейсхолдер (подсказка внутри поля формы) в привычных полях не обязателен.

реалистичный эффект. Если активация определенного действия требует времени, добавьте спиннер загрузки после нажатия. Если событие завершено успешно, поменяйте спиннер на галочку. Действие должно активироваться только после того, как кнопка отпущена. Если действий много, не стоит показывать все кнопки сразу. Покажите ключевые, а остальные спрячьте в выпадающее меню под тремя точками или кнопкой «Еще». В большинстве случаев основное действие (удалить, сохранить) располагается справа. Единственное исключение – когда дизайнер хочет выровнять все элементы формы по левому краю, чтобы взгляд меньше «прыгал» слева направо. В этом случае ключевое действие оставьте слева. Ключевое действие следует выделить определенным цветом.