7 правил создания «элегантного» интерфейса

“Интерактивный дизайн” стал тем термином, который, как правило, привязывается к проектированию UX. В 2015 году уже неудобно и тяжело переключаться между двумя статическими состояниями, когда привычными и нужными стали такие элементы и функции, как, скажем, слайд и перелистывание.

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

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

1. Навигационные
Попадание пользователя на новую страницу или переход к новому состоянию страницы после совершения действия

2. Модальные
Лайтбоксы, галереи или диалоговые окна.

3. Микровзаимодействия
Непродолжительные взаимодействия с единственным элементом в пределах страницы — выпадающим меню, всплывающим при наведении подсказки и т.п.

В этом материале мы поговорим о микровзаимодействиях.

Определить “элегантность” с технической точки зрения достаточно трудно, поэтому мы будем опираться на два фактора: логика и эстетика. И вот 7 хаков, позволяющих достичь хорошего результата.

#1. Первое и основное правило: никакой телепортации
Идея простая: использование видимого перехода от одного состояния к другому при любом действии; возможность увидеть процесс появления результата. Мгновенные появления и исчезновения красноречиво сообщают о недоработках GUI.

#2. Переключение вместо кнопок
В домах мы используем для включения и выключения света переключатели — и достаточно крупного размера — неспроста. Если действие пользователя инициирует новое состояние элемента, такое же действие должно дать возможность откатить его.

В соответствии с Законом Фитса, усилия, направленные на совершение действия должны стремиться к нулю: чем большей точности оно требует, тем менее вероятен его положительный исход. Поэтому: переключатели и большое пространство для действий.

#3. Не уводите пользователей
Во время совершения действия внимание пользователя (что закономерно) приковано к соответствующему элементу. По этой причине анимация должна быть связана с ним расстоянием — быть рядом, а не в другой части экрана. Если отклик на действие визуализируется где-то в ином месте, его можно попросту упустить из виду.

Кроме того, траектория движения триггера фактически задает путь взгляда пользователя. Используйте это для того, чтобы показать, с чем нужно работать далее; таким образом, пользователь остановит свой взгляд именно там, где нужно вам.

#4. Естественное время перехода
Как долго продолжается ваша анимация? Основная проблема определения хорошей продолжительности перехода в том, что нет каких-то канонов, и делать это нужно с помощью собственного чутья. Слишком длинный переход может спровоцировать потерю интереса пользователя или привести к утрате контроля над ним.

С другой стороны, стоит ему оказаться слишком коротким, как он начнет выглядеть неестественным и вовсе останется незамеченным. Присмотритесь ко времени работы вашей анимации — оптимально ли оно для конкретного действия?

Разница может быть весьма ощутимой:

#5. Отмена действия не должна сбивать с толку
Иногда случается так, что пользователь меняет свое решение сразу же после совершения действия, и пытается его отменить, например, нажав на элемент повторно. В таком случае анимация должна быть немедленно прервана, не дожидаясь своего завершения, как знак того, что система “поняла” команду “отменить”.

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

#6. Автоматический фокус на поля ввода данных
Этот совет предназначен для взаимодействий, предполагающих определенную последовательность. Избегайте ненужных и лишних действий: если вы переводите пользователя в раздел, который потребует ввода данных, поле для ввода данных не должно нуждаться в лишнем клике или касании по нему. Наиболее простой пример — кнопка, открывающая форму с волшебной фокусировкой на первом поле, так что пользователю не нужно выбирать его вручную.

#7. Подтверждайте совершенное действие
Люди должны быть оповещены о том, что действие завершено. Если оно не предполагает какие-то очевидные изменения, вам стоит позаботиться о том, чтобы грамотно оповестить пользователя о результате. В ином случае вы получаете риск того, что попыток будет несколько, что не всегда правильно, и иногда приводит к отмене результата — а это уже совсем разочаровывает.

Тем, кто хочет стать программистом, рекомендуем профессию «Веб-разработчик».