Миссия “Переход”

Жизнь и природа полны изменений. Солнце медленно поднимается, чтобы обозначить новый день и также медленно садится, чтоб показать, что день закончился, и началась ночь. А наши жизни начинаются в лоне, где мы растем из маленькой клетки, рождаемся и постепенно стареем вплоть до самой смерти.

Наверное, вот эти природные изменения в жизни позволяют ощущать искусственные переходы как правильный порядок вещей. Иногда, конечно, если что-то перескакивает из одного состояния в другое – это кажется нормальным, но не правильным.

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

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

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

Что такое переход?

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

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

Примеры переходов

Кинематограф

В начале фильма «Вилли Вонка и Шоколадная Фабрика» 1971 года победители, выигравшие золотой билет, собрались у ворот загадочной фабрики чтобы, наконец, увидеть Вилли Вонку.

Кадры из фильма «Вилли Вонка и Шоколадная Фабрика» (1971)

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

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

Интерфейс

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

Эффекты перехода в iOS в замедленном действии (Lim Chee Aun)

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

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

Приложение Path для смартфонов Android и iPhone предлагает множество интересных переходов между состояниями. Его стоит скачать только ради того, чтобы посмотреть как оно «перескакивает» между элементами.

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

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

Дизайн продуктов

Боюсь, мне снова придется использовать в качестве примера компанию Apple. Если вы когда-либо покупали iPhone, вы наверняка обратили внимание на дизайн упаковки. Компактная коробка с матовым покрытием продумана до последней мелочи. Эффект вакуума, который ощущается при поднятии крышки, означает не только то, что вы вскрываете изоляцию и открываете коробку; медленное скольжение крышки (что напоминает ощущения от взаимодействия с операционной системой) занимает пару секунд, после чего можно наконец извлечь новое блестящее устройство. Такой способ распаковки можно описать как физический переход.

Не такое очевидное изменение состояния у MacBook. Кнопка питания на нём слегка мигает, когда устройство в состоянии сна. Интерес этого перехода состоит в том, что его усиление и затухание повторяет природный ритм дыхания спящего человека. Это явление можно отнести к изменению состояния, так как оно дает визуальное отображение состояния устройства, которое и не включено, и не выключено, а находится в промежуточном состоянии.

Автомобили

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

(источник: eduard_orbitron)

Природа

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

В чем состоит важность переходов?

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

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

Лучшие способы воплощения переходов

Существует множество способов, как внедрить переходы в дизайн. Вот несколько основных рекомендаций:

• Избегайте пауз при нажатии, касании или считывании.
  Скорость оборудования всегда остается определяющим фактором, однако лучше сказать, что чипы, процессоры и память становятся с каждой секундой быстрее, поэтому протестируйте работу кода и времени загрузки, чтобы убедиться, что нет задержки.
• Тестируйте «вживую».
  Нет способа лучше, чем тестирование переходов, путём запуска их на реальных устройствах — особенно если вы занимаетесь дизайном мобильных приложений, потому что в них люди меньше внимания обращают на навигацию. Запустите прототип вашего дизайна в супермаркете или поезде, чтобы посмотреть, как он будет работать в “полевых” условиях.
• Не изобретайте колесо.
  Старайтесь чаще использовать основные концепции операционной системы, для которой создаете дизайн, так как если стиль переходов будет сильно отличаться от того, к чему привыкли пользователи – он будет сбивать с толку и раздражать. Однако не стоит ограничивать себя в создании новых переходов, просто держитесь в рамках имеющихся стандартов.
• Думайте о будущем.
  Сегодня мы взаимодействуем с приложениями при помощи кнопок, голоса, касаний и пролистываний экрана. Однако в скором времени новым способом управления контентом станут жесты, а потому задумайтесь об этом уже сейчас. Если люди смогут управлять экраном не только пальцами или мышью, но и всем телом, нам придется задуматься о времени отклика, скорости и физике – то есть, скорость, с которой человек выполняет какой-либо жест, должна будет совпадать со скоростью движения контента. Представьте, как бы вас раздражало, если бы вы ударили теннисный мяч со всей силой, а он пролетел только пару метров. Такое же раздражение будут чувствовать пользователи если переходы будут неполноценными.

Заключение

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

Следующие ресурсы помогут вам при создании переходов и принесут немного вдохновения:

• Ролик Марка Колерана
  Отличный ролик, в котором показаны искусственные интерфейсы и взаимодействия, разработанные для фильмов и ТВ-программ.
• «CSS Easing Animation Tool», Мэтью Лейн
  Полезное онлайн-приложение для тестирования CSS-анимации и переходов.
• «Touch-Optimized Web Framework for Smartphones and Tablets», проект jQuery
  Универсальная система пользовательского интерфейса на базе HTML5 для всех популярных мобильных платформ, основанная на jQuery и пользовательском интерфейсе jQuery.
• «How to Use jQuery to Make Slick Page Transitions», Дэйв Гамаш
  Добавление нескольких завершающих штрихов в дизайн вебсайта может показать разницу между «отшлифованным» и отличным продуктом, и тем, который не производит никакого впечатления на пользователя.

Это перевод статьи под названием “Mission Transition” от Mark Cossey. Перевели в компании UXDepot с одобрением издания Smashing Magazine.

PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите нам по адресу editor@uxfox.ru, пожалуйста 🙂