Некоторые веб-сайты всегда превосходят другие, будь то по количеству контента, удобству пользования, дизайну, функциональности и так далее. Именно использование на современных веб-сайтах уникальных элементов дизайна и анимации привело к появлению фундаментальных различий. Мы рассмотрим основные уроки, полученные при создании различных моделей, и постараемся проанализировать, почему эти простые шаблоны так хорошо работают.
Когда мы создаем цифровые продукты, мы зачастую используем специализированные приложения для проектирования, такие как, например Photoshop и Sketch. Большинство людей, которые достаточно долго работают в этой сфере, наверняка знают, что дизайн – это нечто большее, чем просто визуальное представление. Тем не менее, многие по-прежнему продолжают создавать статический дизайн. Стив Джобс сказал о дизайне такую фразу:
«Дизайн – это не просто внешний вид или ощущения. Дизайн определяет принцип работы вашего проекта».
Наше впечатление от продукта формируются благодаря комбинации факторов, при этом взаимодействие играет фундаментальную роль. Мы не должны думать о пользовательских интерфейсах, как о статических конструкциях. В дальнейшем необходимо задействовать все преимущества пользовательского опыта взаимодействия. Мы с самого начала должны принять интерактивный характер интернета, и думать об этом как о вполне естественной составляющей.
Давайте посмотрим на некоторые примеры, в которых основу интеллектуального взаимодействия создают утонченные анимации, улучшая тем самым пользовательский опыт работы с веб-сайтом.
Анимированная прокрутка.
Гиперссылки – это благо и в то же самое время проклятие для интернета. При нажатии на ссылку вас может перекинуть куда угодно, от рекламной страницы продукта до совершенно неинтересного сайта о куклах. В результате происходят потери контекста.
Одна из наиболее важных вещей в пользовательском опыте – это книжная линейность. Каждая глава в книге основывается на предыдущей. Вы обязательно должны прочитать первую главу в учебнике по экономике, чтобы понять вторую главу. Если вы пропускаете какую-то главу, то заранее знаете, что не получите информации, которая поможет разобраться в последующем содержании. В интернете, а особенно на длинных веб-сайтах, пропуск некоторых разделов происходит подсознательно. Благодаря добавлению анимированной прокрутки, мы можем организовать фиксацию местоположения:
Сравните со следующим примером:
Сравнить поведение закрепленных ссылок по умолчанию с анимированным поведением. Пропуск материала – это больше не бессознательное действие; пользователь совершает вполне осознанные переходы. Фактически, Hope Lies at 24 Frames Per Second содержит кнопку меню для мобильного просмотра, которая перемещает вас в верхнюю часть страницы, без использования какой-либо анимации. У меня ушло больше минуты на то, чтобы выяснить, что же на самом деле случилось.
Отступление: пользователям достаточно трудно воспринимать резкие изменения в интерфейсе. Не оставляйте их один на один с проблемой; всегда нужно показывать, что произошло то или иное событие.
Фиксирующий флажок.
Из последнего примера мы увидели, что переходы помогают пользователям понять темп и поток интерфейса. Ничто не заставляет пользователя чувствовать себя более неестественно, чем внезапное изменение. Внезапные изменения просто не существуют в реальном мире. Давайте посмотрим на другой пример: меню переключения. Значок «плюс» ассоциируется у пользователей с действием добавления контента или расширением элемента. Благодаря вращению на 45° плюс становится крестиком, а данный элемент интерфейса в широком понимании означает «Закрыть»:
Этот простой переход полностью меняет смысл иконки. Такая, казалось бы, незначительная на первый взгляд деталь может иметь диаметрально противоположные состояния. Для пользователей очень важно знать каждое состояние значка, ведь от этого будет зависеть результат операции. Если вы спросите моё мнение, то я считаю, что подобное переключение довольно удобно использовать. Кроме того, отметим, что значок плюс всегда вращается в том же направлении, что и контент, усиливая информационный поток.
Отступление: пользователь должен иметь возможность однозначно определить состояние каждого элемента вашего сайта.
Сворачиваемые формы и формы комментариев.
Формы комментариев, которые так распространены на многих блогах и новостных сайтах, не самый удобный элемент. Почему? С большинством подобных форм достаточно сложно работать, не так ли? Если вы вдруг решили оставить комментарий, то просто хотите начать ввод своего текста и ничего больше. Типичная форма вместо того, чтобы предоставить вам такую возможность в первую очередь просит вас выполнить другие всевозможные вещи. Это крайне раздражает.
Чтобы мотивировать людей оставлять больше комментариев, мы можем свернуть форму и показать только самый важный элемент: поле комментариев. Когда пользователь кликает на поле, можно соответственно организовать расширение формы. Реальный пример подобного прогрессивного раскрытия можно увидеть в бета-версии веб-сайта Нью-Йорк таймс:
Вы могли бы пойти еще дальше и организовать установку фокуса курсора в поле комментариев при расширении формы. Но у этого подхода есть одна проблема: один из ключевых принципов создания взаимодействия гласит о том, что любая активность всегда должна происходить рядом с местом взаимодействия (в месте, где пользователь сосредотачивает своё внимание). Мы могли бы пойти еще дальше и анимировать поле комментариев, чтобы пользователь мог лучше ориентироваться:
Вы даже можете переместить поле комментариев ближе к верхней части страницы, расширить его соответствующим образом, а ниже отобразить дополнительные поля.
Думаю, вы заметили, что такой подход позволяет уменьшить беспорядочность и делает форму комментариев более привлекательной. А как же быть со сворачиванием всех предыдущих комментариев?
Благодаря сворачиванию комментариев мы получим полосу прокрутки для представления длины самой статьи, а не всей страницы. Довольно распространенной практикой является автоматическая загрузка комментариев при достижении пользователем нижней части страницы. Пользователь не должен выполнять какие-либо действия по вызову формы комментариев, кроме тех случаев, когда на это имеются действительно серьезные причины.
Отступление: постепенное раскрытие компонентов пользовательского интерфейса поможет понять их суть. Пользователи должны понять все особенности этих элементов.
Потяните, чтобы обновить.
Одно из самых интересных взаимодействий было создано Лореном Брихтером и получило название «потяните, чтобы обновить». Оно появилось вскоре после выхода iPhone. Данное взаимодействие позволяет пользователю обновить прокручиваемый в обратном порядке контент. Вы можете увидеть принцип работы данной схемы в приложении Twitter. После того, как вы сделали прокрутку в начало потока твиттов, пр …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров