ДеталиКак полезные интерфейсы вызывают вау-эффект

Роль правильно разработанных интерфейсов в успехе продукта всё возрастает — кажется, пользователи впервые начали столько задумываться о том, как именно они взаимодействуют с приложениями и сервисами. Последний пример — всеобщее восхищение новым приложением компании Facebook Paper, при использовании которого есть риск подхватить морскую болезнь, так там все динамично. По просьбе Look At Me дизайнер интерфейсов Дмитрий Чута разобрал несколько интерфейсных приёмов и объяснил их значение.

Очень важно понять, что анимация в интерфейсы пришла давным-давно, но вся шумиха началась именно после выхода iOS7, когда на это сделали упор. Сразу после этого интернет начал бурлить концептами и гифками, все быстро изучили основы и начали клепать анимацию, которая скорее вредит интерфейсу, чем создаёт вау-эффект. Это как с дизайном сайта школьника, который хочет выделиться и использует 15 разных шрифтов на странице с множеством цветов и градиентов. Просматривая Dribbble и другие подобные ресурсы, я вижу неправильную анимацию, которую скорее можно назвать презентационной и использовать разве что в гифке, но не как не в продукте.

Анимация должна быть правильной — Clever use of animations. Хорошая анимация служит дополнительным индикатором правильности работы интерфейса. Она должна объяснять пользователю, как работать с интерфейсом, должна помогать ориентироваться в нём — сейчас, во времена «плоского» дизайна, это суперважно. Я собрал подборку интересных, на мой взгляд, решений, когда анимация действительно помогает пользователю.

Анимация как дополнительный индикатор
правильности работы интерфейса

Анимация в приложении с калькулятором, которая показывает, куда мы нажимали.

Анимируем зону захвата изображения, если лицо не попадает в кадр. Тем самым сообщаем пользователю анимацией/звуком/вибрацией, что что-то происходит не так.

Анимация как способ экономить место

Выдвижные меню.

dribbble.com/search?q=side+menu

Так называемые side-меню, которые стали популярными из-за «Фейсбука».

В стандартном браузере iOS при скролле скрывается адресная строка.

Разные выпадающие менюшки при удержании пальца на экране: Path, Pinterest, Behance. Многие приложения используют такую анимацию и паттерны интерфейса.

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

Анимация как способ добавить реалистичности к интерфейсу и создать вау-эффект без вреда для использования

Passbook App.

Приложение с радиостанциями, где мы видим кастомный pull to refresh с участием радиотюнера.

Виниловый проигрыватель, в котором за счёт анимации добились реалистичности.

Разные погодные приложения.

Много приятной и полезной анимации в приложении Peek Calendar.

Анимация как способ скрыть косяки или отвести внимание пользователя (лоадеры, парралакс-загрузки, индикаторы процесса)

Лоадер, у которого можно увеличить скорость движения, и из-за этого пользователь будет думать, что загрузка происходит быстрее. Подобной анимацией пытаются отвлечь пользователя, пока идёт загрузка, для которой нужно больше времени по разным причинам, а в конце показываем, что загрузка завершена. Обычно используют в случаях, когда время загрузки зависит от пользователя (скорости интернета, мощности операционной системы и так далее).

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