Микровзаимодействия — один из ключевых моментов UI/UX-дизайна.
Они содержат детали, части изделия, выполняющие одну конкретную задачу.
Каждый раз, когда мы меняем настройки, синхронизируем данные и устройства, ставим будильник, вводим имя пользователя и пароль или выбираем определенную функцию, мы сталкиваемся с микровзаимодействиями.
Они сопровождают нас повсюду: в различных устройствах и приложениях наших телефонов, компьютеров, офисной и бытовой техники, в транспорте и дома.
И если микровзаимодействия сделаны правильно, они делают нашу жизнь комфортнее, интереснее и проще.
В этом посте мы рассмотрим 5 ошибок, которых следует избегать при создании микровзаимодействий.
1. Сдерживайте себя
Эго дизайнера можно сравнить с нежным и причудливым цветком, который нуждается не только в постоянном поливе, но и в похвале.Итак, при разработке качественных микровзаимодействий эго уходит в отпуск.
Потому что предстоит реальная и трудная работа.
Рассмотрим подробнее на примере дизайнера.
Сергей Валюх (мастер расположения элементов, выбора цвета и создания анимации).
Кстати, анимация идеально подходит для демонстрации того, как работают микровзаимодействия.
Давайте рассмотрим это шаг за шагом:
- Самое очевидное, что вы заметите, — это Flip 3D на фотографиях.
Эта технология здесь уже лишняя.
Правило микровзаимодействий: если удаление чего-то делает визуализацию более «чистой», мы без колебаний удаляем ненужные эффекты.
- Вы также заметите, что в режиме подачи фотографий изображение обрезается, а в режиме редактирования оно увеличивается.
- Навигация по верхним значкам навигации занимает много времени.
Микровзаимодействия должны быть очень быстрыми, продолжительностью не более 300-400 мс.
- Нижние значки расположены в разных местах, но имеют уже противоположное значение, тем самым увеличивая когнитивную нагрузку.
На реальном примере вы увидите, что работает, а что нет. Это не означает, что дизайнеру не следует проявлять творческий подход, добавляя детали.
Но также стоит помнить, что слишком много деталей могут перегрузить дизайн и ухудшить его.
2. Не жертвуйте повествованием ради катарсиса.
Повествование играет важную роль для пользователей.
Это связано с личным опытом, преемственностью, влиянием вышесказанного на когнитивную нагрузку и непосредственной организацией нашего мозга – тем, как он воспринимает смысл информации.
На основе этого мы строим мысленные модели вещей, чтобы их использовать.
Например Шриканта Шетти (очень сильный аниматор и дизайнер) рассмотрим вариант не очень удачного повествования: 
Первое, что вы можете увидеть, это странные отметины.
Мы ожидаем, что текст появится над линией.
Но потом оказывается, что на самом деле это вовсе не линия, а открывающаяся форма.
И здесь мы вводим логин и пароль.
Мы увидели не то, что ожидали и что казалось вполне логичным.
Это меня озадачило и заставило прервать выполнение задачи (ввода информации).
Неожиданная интерпретация полностью меняет уже построенную мысленную модель и уводит нас от намеченного результата.
Для контраста еще один пример: 
3. То, что нельзя сделать одним движением, не следует делать вообще.
Почти каждое успешное микровзаимодействие, которое я видел, состояло из одного движения.
Давайте поближе познакомимся с работой дизайнера.
Ромэн Пассиланда (кстати, обладатель очень крутого портфолио): 
Имея опыт работы с анимацией и наметанный глаз, я вижу, что здесь есть два отдельных движения, которые легко можно объединить в одно.
В приведенном выше примере происходят два разных действия: — линии трансформируются; — значок вращается.
Вместо того, чтобы совместить эти два действия, Ромен почему-то разделил их (значок возвращается, затем строки трансформируются).
Для наглядности еще один пример: 
Анимация влево и вправо также нарушает принцип «одного хода».
А вот анимация, которая находится посередине, — это то, что нам нужно.
Действие в одном движении чистое, законченное и эффективное.
Минимальная нагрузка для пользователя.
4. Проблема не в анимации, проблема в дизайне
Дизайнерам, изучающим UI-анимацию, иногда бывает трудно отделить движение от статического дизайна.Это понятно и отчасти является следствием сложной природы хороших микровзаимодействий: их трудно определить в реальном времени.
Но плохие микровзаимодействия бросаются в глаза, как сломанный палец.
На следующей диаграмме я суммирую основные детали моих теорий дизайна и анимации: 
Взгляд сразу же привлекается к области с точкой и стрелкой, указывающей на нее.
Точка выполнена в розовом цвете, поэтому ее можно мгновенно найти и выделить среди всего проекта.
Теперь перейдем от теории к практике.
Талантливый дизайнер Сэм Тибальт (у него отличный дизайн и анимация) однажды он воодушевился и решил создать потрясающую анимацию поверх не очень удачного проекта: 
Думаю, многие сейчас подумают, что это всего лишь мои придирки, ведь идея дизайна достаточно свежая.
И она действительно есть.
Как говорилось выше, Сэм талантливый парень.
В этой композиции удачно использована кнопка «Добавить в корзину».
Но в этом примере нет анимационного решения, которое бы сохраняло дизайн от самого себя.
Ошибка заключается в дизайне, а не в исполнении с течением времени.
По сути, микровзаимодействие — это проектирование с течением времени.
Здесь кнопка «Добавить в корзину» трансформируется, меняет форму и заполняет изображение.
В этом не только нет необходимости, но, учитывая масштабность этого элемента пользовательского интерфейса, он несет дополнительную когнитивную нагрузку на мозг пользователя.
В киноиндустрии говорят, что проблемы на съемочной площадке начинаются со сценария.
Плохой сценарий приводит к плохим съемкам.
А плохой дизайн приводит к плохим микровзаимодействиям.
5. Канадский хоккеист Уэйн Гретцки: «Если ты не сделал ни одной попытки поразить цель, значит, ты промазал 100%»
Поскольку дизайнеры обычно не используют для дизайна анимацию длительностью 300–400 мс, легко потерять контроль над деталями и перестать замечать возможности, которые они раскрывают. Например Иван Белаяц , давайте рассмотрим 5 недостающих деталей:
- Можно создать чистое и элегантное преобразование значка в кнопку меню/назад. Значок меню выскальзывает сверху, что создает ощущение бессвязности и нелогичности.
- Стрелка вправо в желтом квадрате — ненужный эффект вращения и масштабирования.
Это выглядит странно.
Было бы лучше, если бы стрелка смешивалась с содержимым.
- По мере навигации текст абзаца появляется и исчезает без необходимости.
Его необходимо сохранить.
- Заголовок перемещается слева направо.
Многократное исчезновение контента следовало сделать изящнее, а не обесцвечивание и непонятное скольжение текста.
- Изображение солдата обрезано.
Было бы неплохо преобразовать изображение предварительного просмотра, чтобы оно сохранило контекст. В этом случае превью просто становится фоном заголовка, показывая наименее интересную часть изображения.
В этих работах все продумано до мелочей, использованы все возможности и нет ничего лишнего.
Уэйн Гретцки бы гордился.
Если, конечно, он хоть немного заботится о пользователях (в чем лично я сомневаюсь).
В заключение
Даже если у вас нет большого опыта, вы можете создавать красивые и понятные микровзаимодействия.Вам необходимо сосредоточиться на следующих ключевых понятиях: — сдержанность; - повествование; - одно правило движения; — анимация не всесильна; — детали дают возможности.
Это, конечно, не гарантирует потрясающий дизайн, но, по крайней мере, это шаг в правильном направлении.
Теги: #разработка #дизайн #UX #web #веб-дизайн #ui #анимация #микровзаимодействия
-
Livescribe Pulse Smartpen
19 Oct, 24 -
Вы Используете Repl?
19 Oct, 24 -
Opera Mobile 10 В Статусе
19 Oct, 24 -
Как Мы Сломали Docshell.ru
19 Oct, 24
