Почему все дело в микровзаимодействиях
Пока я рос и развивался, мой путь представлял собой полосу препятствий с множеством развилок и несколькими кардинальными разворотами назад. Думаю, у большинства из вас так же. Я всегда немного колебался между своей математической и творческой частями, желая угодить им обеим, но ничто в итоге не казалось мне правильным выбором.
После окончания средней школы я попытался выбрать специальность, которая казалась мне наиболее подходящей: графический дизайн. И я был доволен. Вроде в конце концов выбрал правильное направление. Но полную уверенность я приобрел только на магистратуре, когда наконец начал изучать цифровые интерфейсы и UI/UX дизайн.
Наконец то, что я изучал и делал, помогало мне создать что-то логичное и функциональное, но в то же время чрезвычайно креативное. И в хаосе понятий, составляющих эту дисциплину, бросилось в глаза одно: микровзаимодействия.
Давайте начнем с самого понятия. Что такое микровзаимодействия?
Микровзаимодействия это то, что окружает и направляет нас в течение дня. Это может быть будильник или лайк, поставленный на фото друга в Instagram.
Дизайнер и автор книги «Микровзаимодействия: дизайн с учетом деталей» Дэн Саффер определяет микровзаимодействия как:
То, что содержит моменты продукта, которые крутятся вокруг одного варианта использования.
Эти взаимодействия предназначены для того, чтобы «радовать» и сопровождать пользователя во время использования приложения. Но давайте остановимся на секунду и задумаемся, действительно ли мы замечаем присутствие всех этих микровзаимодействий, пока они не исчезнут? Ответ, вероятно, нет, но это не совсем правильно. Эти взаимодействия являются неотъемлемой и важной частью пользовательского опыта. И, как учит нас Стив Круг в своей книге «Не заставляйте меня думать», выигрышный UX — это тот, который пользователи воспринимают как интуитивно понятный, хотя на самом деле он заставляет их думать.
Если пользователь замечает эти взаимодействия, скорее всего, что-то не так.
Однако бывают случаи, когда приятное микровзаимодействие воспринимается положительно, как что-то особенно увлекательное или новаторское. Хотя большинство из них просто имитируют поведение, которое кажется нам естественным, и заставляют наш опыт из повседневной жизни хорошо сочетаться с интерфейсом. Выигрышный аспект микровзаимодействий, которые мы воспринимаем положительно, на самом деле именно в том, что они делают еще более увлекательным опыт совершения какого-то действия или навигацию, сохраняя при этом свою основную цель.
Поэтому мы говорили о том, как трудно заметить эти взаимодействия и, прежде всего, представить, каким был бы наш опыт без них. Но полное понимание того, насколько они важны, — это именно то, что мы хотим донести в этой статье.
Я попытался создать пару примеров двух разных сценариев (один с микровзаимодействием и один без него), используя один и тот же проект, в котором я занимался редизайном в качестве личного упражнения.
В первом примере микровзаимодействие представляется нам чем-то очевидным: открытие выпадающего меню кажется логичным и очевидным движением компонента, когда мы хотим открыть его, чтобы выбрать нужный пункт или просто посмотреть весь список.
На самом деле взаимодействие первой из двух гифок кажется нам в целом нормальным, тогда как вторая кажется механической и «странной», как будто переход произошел внезапно и рывками, почти как если бы мы столкнулись с ошибкой.
В примере дальше мы видим микровзаимодействие, возможно менее распространенное еще несколько лет назад, но теперь широко используемое. Оно может показаться менее необходимым, но его присутствие все равно в приоритете.
Речь идет об уведомлении, а точнее, о моменте его поступления.
На первой гифке мы видим движение иконки колокольчика, как будто он на самом деле звонит, не издавая при этом никакого звука. Он привлекает к себе наше внимание, когда мы воспринимаем движение краем глаза. Мы сразу же замечаем, что пришло какое-то сообщение.
Во втором же случае единственное, что привлекает наше внимание, это красная точка, которая хоть и эффективна, но может с большей вероятностью остаться незамеченной или быть замеченной позже. Ну и, конечно, сделать UX менее приятным для пользователя.
Дизайнер не должен недооценивать важность этих взаимодействий при проектировании интерфейса. Пользовательский опыт — это больше, чем просто расположение правильных элементов и соединений. Он включает в себя огромную работу над воздействиями и приданием им естественности. Кстати об эстетике, это правильно, что микровзаимодействие должно быть функциональным и естественным, но оно также должно быть эстетичным. Прежде всего, если вы хотите, чтобы оно было в числе тех редких случаев, когда пользователи его заметят и отметят положительно.
(Тем не менее, не забываем о согласованности при разработке интерфейса.)
Мы уже поговорили о том, что эти взаимодействия не факультативны, а по-настоящему необходимы, но уточним одну вещь: микровзаимодействия стоит использовать ответственно. Не злоупотребляйте ими, иначе вы рискуете получить полную противоположность тому, чего пытаетесь добиться. Мы же не пытаемся сделать навигацию чрезмерно громоздкой и медлительной. С избытком анимаций, которые вместо улучшения опыта утомляют пользователей или остаются незамеченными, потому что приурочены к каким-то несуществующим взаимодействиям.
В любом случае, когда мы проектируем, мы всегда должны учитывать одну вещь:
Человек – это существо, постоянно ищущее то, что даст ему немедленное удовлетворение (неслучайно у нас часто появляются зависимости). И по этой причине микровзаимодействия часто остаются незамеченными в общем контексте, но это не значит, что они несущественны.
Даже самые маленькие микровзаимодействия могут удерживать пользователя привязанным к одному приложению, а не к другому, независимо от того, насколько маленькими они всем кажутся. Микровзаимодействия имеют огромное значение для конечного пользовательского опыта. Помните об этом в работе над вашим следующим проектом.
