От автора: в процессе проектирования пользовательских интерфейсов (UI) появилось довольно-таки новое словечко – «Интерактивный дизайн». В 2015 году для элементов дизайна уже не хватает простого переключения между двумя состояниями. Сегодня такие слова, как «слайд», «скачок» и «отскок» стали неотъемлемой частью хорошего пользовательского интерфейса.
Тем не менее, в мире взаимодействий – как и в случае с дорогими часами – «модный» не всегда значит «элегантный». Рассматривая часы ниже, мало кто из вас решит носить довольно необычные часы слева на картинке. Природная элегантность всегда притягивает, то же относится и к украшениям в дизайне.
Если вы такой же творческий человек, как и я, то мы бы легко поддались соблазну создать причудливые анимации для различных взаимодействий, и все только для того, чтобы оживить свой сайт, сделать его более современным и привлекательным. И мы, конечно же, знаем, что такие действия могут похоронить все представление от сайта у пользователя.
Таким образом, я понял, что важнее сосредоточить свое внимание на настолько плавных анимациях, что они почти незаметны, неназойливы человеческому глазу. Это тот случай, когда анимация уходит с переднего плана, и незаметно помогает пользователю добиться определенных целей.
Почему же это так важно?
Почему Apple тратит столько времени и денег на разработку упаковки, которую в большинстве случаев люди быстро выкидывают в корзину? Почему производители дорогих автомобилей настраивают звук закрытия двери? Все потому, что то, что вроде бы для нас является незначительным, на самом деле оказывает огромное воздействие на общие ощущения и может поднять удовлетворенность от сайта с уровня «отлично» до «потрясающе».
Внедрение в ваш дизайн элементов «микровзаимодействия» не только сделает его удобнее, но и может вызвать положительные эмоции у ваших пользователей (как в случае с открытием коробки Apple). Такие чувства помогают вырабатывать дополнительный гормон дофамин, что буквально притягивает пользователя к вашему сайту/приложению.
Что значит термин «микровзаимодействие»?
При наборе чего-то пользователем (т.е. клики по полям, перетаскивание элементов, ввод текста) ваш сайт реагирует на это – это и есть взаимодействие. Так пользователи общаются с вашим сайтом, своего рода диалог. При проектировании возможного пользовательского поведения на вашем сайте у вас есть несколько различных способов взаимодействия:
Взаимодействие с навигацией: Тот случай, когда пользователь переходит по страницам/состояниям страниц.
Модальные взаимодействия: Состояние, когда основное окно сайта заморожено, а сверху него отображается временное модальное окно (к примеру, lightbox галерея или окно подтверждения данных).
Микровзаимодействия: Случай, когда пользователю необходимо изменить состояние всего одного элемента на странице – к примеру, раскрытие выпадающего списка меню или показ дополнительных характеристик товаров.
Как сделать эти микровзаимодействия элегантными?
Ощущение от сайта должно быть такое, будто все элементы интерфейса играют общую симфонию, чтобы произвести на вас максимальное впечатление. Элегантность – ключевой критерий для достижения этой цели. Вообще, трудно понять, что такое элегантность чисто в техническом смысле, но мы можем заложить некоторую логику, которая поможет нам создать элегантные элементы интерфейса.
Ключевое правило №1 – никаких телепортаций
Идея проста – всегда используйте плавные переходы при изменении положения элемента на странице. Это значит, что не должно быть никаких мгновенных прыжков в вашем графическом интерфейсе. Любой появляющийся, исчезающий или трансформирующийся элемент должен выполняться с анимацией.
Такой подход помогает сфокусировать внимание пользователя на той области, к которой вы хотите притянуть внимание. И, конечно, это придает чувство элегантности и последовательности дизайна.
Правило №2: Переключатели лучше кнопок
У вас дома есть точно такие же переключатели для включения и выключения света. Та же концепция используется и на вашем сайте. Если у контроллера включается новое состояние, то тот же самый контроллер должен и откатывать это состояние.
Более того, по закону Фиттса переключение контроллера в состояния вкл/выкл должно быть быстрым и не занимать много усилий.
Правило №3: Место взаимодействия должно быть непосредственно рядом с триггером
Плавным переходам требуется какой-либо тип триггеров. Пользователь, обычно, во время взаимодействия фокусирует свое внимание на триггерах. Это означает, что переходы должны начинаться непосредственно с них или рядом с триггерами. Если запустить анимацию слишком далеко от элемента взаимодействия, пользователь может просто не заметить ее, и цепочка общения с пользователем прервется.
Более того, плавный переход должен, как правило, фокусировать внимание пользователя от триггера до конечной точки анимации. Очень простой трюк – вы просто ведете пользователя от триггера к месту, от которого тот должен сделать следующий шаг. Таким образом, посетитель вашего сайта не растеряется и будет следовать именно тому пути, который вы для него заложили.
Правило №4: Используйте естественное время анимации
Время перехода определяет, как долго анимация будет длиться. Основная проблема в том, что не существует заклинаний для того, чтобы правильно вычислить это время. Если переход будет слишком долгий, то это будет болевым местом, когда пользователю придется повторно выполнять эти действия.
С другой стороны, если анимация будет слишком быстрой, то это будет выглядеть неестественно – или пользователь вообще пропустит что-то важное. К сожалению, все, что вы можете сделать, это оценить на глаз анимацию. Лучший совет, который я получил, это не задавать одинаковое время анимации для всех элементов. Достаточно немного повозиться с каждым из них и настроить время индивидуально. Более того, отметьте, что разница даже в 0,05 секунды уже заметна.
Правило №5: Возвращение анимации на прежнее место не должно разрушать чувство контроля у пользователя
Иногда случается так, что пользователь передумал прямо в момент анимации триггера. В таких случаях то, насколько отзывчивым будет переключатель, играет ключевую роль. Если пользователь отменяет последнее действие (к примеру, двойным кликом) анимация должна мгновенно пойти в обратном направлении. Если этого не происходит, пользователь моментально теряет чувство контроля ситуации. Более того, вы заставляете пользователя думать, что он совершил ошибку.
Правило №6: Всегда используйте автофокус в сериях анимаций
Этот совет относится к тем случаям, когда пользователь выполняет цепочку действий. Проектируя такие последовательности, всегда избегайте излишних анимаций при взаимодействии на направляйте внимание пользователя исключительно на следующий в последовательности элемент. Самый базовый пример это кнопка редактирования текста. При нажатии на нее, поле с текстом автоматически получает фокус, пользователю не нужно делать это вручную.
Правило №7: Всегда сообщайте пользователю о завершении взаимодействия
Пользователи всегда должны представлять, когда взаимодействие заканчивается. Если в анимацию не заложено конкретных сигналов о завершении взаимодействия, всегда следует добавить какие-либо типы завершенности действия, например, текстовый — «Эй, все сделано!». Если же вы все-таки не послушались этого совета, то пользователи, как правило, будут повторять действия много раз, тем самым они могут наделать ошибок или даже поломать что-то важное.
Как использовать эти советы
Если коротко, то для создания микровзаимодействия на вашем сайте приведенные советы можно использовать как лист с читами. Такой подход помогает спроектировать все детали взаимодействия еще до его воплощения в код. Но все же, скорее всего вы не сможете воспользоваться всеми советами идеально с первого раза. В таком случае вам придется подгонять их под свои конкретные ситуации – так что будьте готовы немного поэкспериментировать.
И еще один последний совет. Чем больше ваша анимация подчиняется законам физики, тем более она естественна и элегантна. Создавайте свои анимации, развлекайтесь!
Автор: Petras Baukys
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
