Кроссплатформенный дизайн в обертке, часть 3: UI-полировка и дизайн взаимодействия

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

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

Тонкая настройка мельчайших деталей — вот что создает тот опыт, к которому мы стремимся: интуитивно понятный, приятный и оптимизированный.

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

В этой части я рассмотрю «UI Polish and Interaction Design» — процесс совершенствования и улучшения визуальных и интерактивных аспектов пользовательского интерфейса для создания всесторонних восхитительных впечатлений. Давайте рассмотрим вещи, которые помогут вам создавать впечатления, которые найдут отклик у ваших пользователей на более глубоком уровне.

Как воспринимаются приложения

Самое замечательное в UI и UX то, что каждый дизайнер также является пользователем, и чувство наслаждения потоком интерфейса прекрасно независимо от вашей профессии. В этом нет никакой ошибки! Единственное отличие в том, что для пользователей все заканчивается на восторге, для нас работа продолжается.

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

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

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

Теория Нормана объясняет, что эти уровни — интуитивный (первое впечатление) , поведенческий (как это работает) и рефлексивный (долгосрочное эмоциональное воздействие) — не являются линейными; они постоянно взаимодействуют. Визуальная привлекательность продукта (интуитивный) продолжает влиять на пользователей, пока они взаимодействуют с ним функционально (поведенческий), и каждое действие влияет на то, как пользователи относятся к нему с течением времени (рефлексивный).

Например, интерфейс гладкого телефона с плавной навигацией, скорее всего, вызовет немедленное волнение, но именно сочетание простоты использования и долгосрочного удовлетворения создает длительную лояльность. В дизайне фокусирование на том, как эти уровни пересекаются, является ключом к созданию пользовательского опыта, который запомнится.

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

Что делает приложения восхитительными

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

Возьмем, к примеру, опыт сохранения фотографии в ленте открытий Pinterest.

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

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

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

В примере Pinterest, помимо фундаментального удобства использования, приложение добавляет слои полировки, которые делают опыт гораздо более «целостным». Например, при длительном нажатии на фотографию и выборе действий, таких как «Нравится», «Сохранить» или «Поделиться», пользователи могут заметить тонкую тактильную обратную связь.

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

Но настоящая магия происходит посередине — когда удобство использования и эстетика работают вместе, создавая единый опыт, который резонирует на нескольких уровнях. Вот когда пользователи переходят от «Это работает» к «Мне это нравится!» Речь уже не идет просто о доставке продукта.

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

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

Однако разделение эстетики и функциональности в пользовательском интерфейсе на самом деле больше формальность. Любой интерфейс может быть восхитительным, а любой «эстетический» элемент может стать «функциональным». Возьмем Dynamic Island от Apple — печально известную черную выемку на ранних iPhone. В более поздних моделях она превратилась из простой дизайнерской необходимости в функциональную и стильную функцию. Сначала выемка была компромиссом для размещения фронтальной камеры и датчиков при максимальном увеличении пространства экрана.

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

Вот несколько примеров того, как чистые «утилитарные» элементы можно обогатить нотками восторга:

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

Давайте посмотрим правде в глаза: даже самая восхитительная анимация может стать источником разочарования, если вы с тревогой смотрите ее, пока платеж в размере 1000 долларов не проходит.

Пример 1. Анимация ключевых слов iMessage

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

Пример 2. Фирменные фотографии профиля в Google Docs/Sheets

Google Docs и Sheets отображают красочные фирменные фотографии профиля, которые показывают, кто редактирует документ в режиме реального времени. Это не только делает совместную работу более персонализированной, но и помогает пользователям быстро идентифицировать своих соредакторов.

Пример 3. iOS Memoji после поля ввода пароля

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

Пример 4. Google Dinosaur при отключенном Интернете

В Google Chrome есть скрытая игра с динозаврами, которая появляется, когда нет подключения к Интернету. Это простая, затягивающая игра, но самое главное – отличный способ превратить минутное разочарование в немного веселья.

Пример 5. Telegram Удаление сообщения

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

Не заставляйте меня думать: шаблоны проектирования и компоненты

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

Вместе шаблоны и компоненты создают бесперебойный пользовательский интерфейс, в котором пользователи интуитивно понимают, как ориентироваться в приложении.

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

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

Пример 1. Игривый виджет Duolingo

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

Пример 2. Анимация карточек Netflix

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

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

Пример 3. Быстрые команды Slack

Восторг и эмоциональное вовлечение могут также исходить от функций продукта, а не только от дизайна пользовательского интерфейса. Быстрые команды Slack служат примером этого, повышая производительность и упрощая взаимодействие в приложении. Разработанные с упором на производительность, быстрые команды позволяют пользователям значительно экономить время, просто набирая нужную команду. Например, пользователи могут обновлять свой статус с помощью /status или отключать уведомления с помощью /mute непосредственно в поле ввода сообщения.

Это не только ускоряет рабочий процесс, но и минимизирует прерывания, позволяя пользователям сосредоточиться на своих задачах. Интуитивно понятная и экономящая время природа быстрых команд — именно то, почему пользователи так их любят. Мой личный фаворит — /shrug, который добавляет ¯\(ツ)/¯ в конец вашего сообщения, и это так весело!

Роль интерактивного дизайна

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

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

Отличным примером эффективного дизайна взаимодействия является эффект «Джинн» в macOS , используемый для минимизации окон Finder. Эта анимация плавно переводит окно в док, напоминая движение лампы джинна. Она визуально привлекательна и функционально информативна, а также показывает пользователям, куда именно направляется окно, что помогает поддерживать пространственную ориентацию.

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

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

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

Превзойти обыденность

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

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