В чем польза вашего сайта или приложения? В том, что с его помощью просто собирать информацию? Или же покупать в один клик, а доставку товара получать уже завтра? Или главное – быстро находить ответы на нужные вопросы?
Подумайте о людях, которые разработали этот сайт или приложение. Какую они преследовали цель?
Они пытались сделать веб-ресурс, на котором было бы все то, за что его полюбят. Простой в использовании сайт, который бы быстро выдавал искомую информацию и помогал принимать взвешенные решения.
UX, или опыт взаимодействия, охватывает – восприятие и эмоции, которые вызывает программный продукт или сервис. UX характеризуется простотой использования, доступностью и удобством. О UX чаще говорят в контексте электронных устройств, смартфонов, компьютеров, софта или веб-сайтов. Но такое понятие не новое; это то, что быстро меняется под влиянием технологического прогресса, новых видов взаимодействий и потребительских трендов.
Пользователи ищут молниеносные способы решения проблем, поэтому UX крайне важен. Позаботьтесь о том, чтобы сайт был понятен и прост в понимании пользователей.
Если клиентам ресурс не покажется полезным и простым в использовании, они быстро откажутся от подписки. Большинство пользователей в течение минуты решают, закрывать ли сайт.
В этой статье рассказываем больше о развивающейся отрасли UX, о том, каких дизайнеров нанимают коммерческие организации, и почему продуманный дизайн приносит пользу каждому бизнесу.
Что такое UX-дизайн?
UX-дизайн, или дизайн опыта взаимодействия, – то, от чего зависит, насколько пользователь будет доволен программным продуктом или сервисом; этот процесс предусматривает улучшение функциональности, юзабилити и удобства. UX-дизайн – создание программных продуктов с продуманным и релевантным пользовательским опытом. Область UX-дизайна охватывает массу подразделов, которые стоит учесть.
1. Интерактивный дизайн
Интерактивный дизайн, или IxD – подраздел UX-дизайна, определяющий взаимодействие между пользователем и продуктом; цель этих взаимодействий – хороший пользовательский опыт.
2. Визуальный дизайн
В визуальном дизайне применяются иллюстрации, фотографии, типографика и цветовые схемы – все это расширяет опыт взаимодействия конечного пользователя. В визуальном дизайне важно соблюдать принципы художественного оформления. Среди такого – баланс, пространство, контраст… Цвет, форма, размер и другие элементы также влияют на дизайн.
3. Пользовательское исследование
Это последний из составных элементов UX-дизайна, с помощью которого компании выясняют ожидания своих клиентов. Успешный веб-проект служит определенной цели и решает конкретные задачи, поэтому важный шаг – узнать, что нужно потребителю. Без этого в основе дизайна – лишь догадки и предположения.
4. Информационная архитектура
Дизайнеры используют информационную архитектуру, чтобы структурировать и маркировать контент конкретным образом, чтобы пользователи проще находили нужную информацию. Информационная архитектура применяется в веб-разработке, разработке смартфонов, приложений, просматривается и во многих физических объектах. Простота использования и доступность – два главных аспекта информационной архитектуры.
Для иллюстрации рассмотрим карту нью-йоркского метрополитена. К слову, это хороший пример информационной архитектуры, которая помогает людям добираться из условного пункта «А» в пункт «Б». И, как звучит постулат Института информационной архитектуры, «если вы делаете что-то для других, вы применяете информационную архитектуру».
Составные процессы UX-дизайна
Выделяют три этапа UX-дизайна:
1. поиск целевой аудитории
2. понимание целей компании – как такие цели влияют на пользователя
3. нешаблонное мышление
Обычно В UX-дизайне используется подход, в центре которого пользователи – за три этапа создается нужный конечный продукт.
Проще – следует учитывать потребности тех, для кого дизайн разрабатывается. Применяется масса решений, чтобы устранить всевозможные сложности и шероховатости; создаются прототипы, которые тестируются на пользователях.
По итогам работы выбирают лучший из проработанных вариантов. Если смотреть на вещи с точки зрения пользователя и разрабатывать дизайн, ориентируясь на его предпочтения, результат понравится всем.
Принципы UX-дизайна
Отрасль UX-дизайна стремительно меняется, но основополагающие принципы все те же. Дизайнеры должны понимать, что им нужно с точки зрения визуального баланса. Краткость и понятность – важные нюансы; здесь применим принцип – чем меньше, тем лучше. Стремитесь к тому, чтобы дизайн был интуитивно понятен, и, что еще важнее, учитывайте интересы и потребности пользователей.
Сфера применения UX, как правило, сводится к новым технологиям, но в основе всего этого старые, как мир, принципы, которые помогают дизайнерам решать всевозможные проблемы за счет последовательной и предметной методологии.
Учитывайте контекст : Пользователь должен знать, где он находится в текущий момент. Не должно возникать ощущение информационной перегрузки, или что он потерялся. Ваша задача – подсказывать и указывать правильное направление.
Будьте человечны : Никому не нравится чувство, будто взаимодействуешь с машиной. Вы с большей вероятностью сможете выстроить доверительные отношения, если покажете свою компанию с человеческой стороны.
Доступность : Никто не хочет понапрасну тратить свое время. Успешный UX-дизайн улучшает навигацию.
Легкость : Последовательность и незамысловатость дизайна – это всегда хорошо. Вы строите отношения с пользователями за счет удобного UX.
Простота : Никаких просчетов или лишних описаний. Сразу переходите к главному.
Результат UX
Когда UX-проект завершен, дизайнер и команда показывают клиенту и своей команде список того, что было сделано. Нужно показать процесс работы, перечень реализованных идей.
Это важная часть общего процесса. Так UX-дизайнерам проще найти искомое, продемонстрировать свое видение, объяснять те или иные рекомендации по улучшению.
1. Пользовательское исследование
Потребности, тенденции и мотивация пользователей – все это выясняется в ходе различных пользовательских исследований. Это могут быть количественные и качественные данные, полученные за время тестов, например, с участием фокус-групп; детальное описание процесса регистрации, онбординга и запросов в клиентский сервис. Цель в том, чтобы получить подробный анализ того, что есть на сайте, и что еще можно улучшить – все идеи тестируются на реальных пользователях.
Исследователи создают портреты потребителей на основе фактических данных о людях, что помогает точно определять, кто будет взаимодействовать с веб-сайтом или приложением.
С помощью пользовательских исследований дизайнеры находят и определяют своего пользователя.
2. Оценка конкурентов
Оценка сильных и слабых сторон конкурентов – способ расширить собственную UX-стратегию. Лучше всего действовать с помощью аналитических отчетов, в которых бы освещались конкурирующие разработки. По сути, это детальный анализ интерактивного дизайна конкурентов, список слабых мест, просчетов и упущений, в общем, того, что может стать конкурентным преимуществом.
3. Интерактивный дизайн
Описание пользовательских взаимодействий может быть в форме прототипа – так проще понять, как пользователи будут выполнять ключевые задачи, находить информацию, и, в общем, пользоваться продуктом. Описывается процесс поиска информации, и того, насколько разработка удобна. Прототип должен быть максимально упрощенным и приближенным к финальному варианту.
4. Информационная архитектура
IA – это процесс получения информации и превращения ее в удобоваримый вид, что в особенности важно для крупных сайтов. Важно понимать, в каком контексте люди будут пользоваться дизайном. Конечным результатом может быть карта сайта с подсказками, или образец потоков пользователей, который показывает, как посетители перемещаются по сайту.
Что такое дизайн пользовательского интерфейса?
Когда Apple представила навигационный компонент Click Wheel для iPod, эта штука была интуитивно понятной и высокофункциональной – не говоря уже о визуальной составляющей. Это хороший пример успешного пользовательского интерфейса, или UI. UI – это способ взаимодействия с компьютерами, машинами, сайтами, приложениями, носимыми устройствами и пр. UI-дизайн – это то, что делает все эти вещи максимально упрощенными и эффективными.
UI vs. UX
UX, опыт взаимодействия, относится к перемещению пользователя на сайте или в приложении. UX-дизайнеры работают над формой и функциональностью продукта или технологии. UI, или пользовательский интерфейс, ориентирован на то, как выглядит и функционирует внешняя оболочка продукта. Сфера деятельности UI-дизайнеров – осязаемые и видимые компоненты этого процесса.
Общие UI-элементы
У UX и UI много общего, но важно отметить и ключевые отличия этих двух предматов. Опять же, UI ориентирован на внешнюю составляющую продукта, тогда как UX больше связан с тем, как люди взаимодействуют с сайтом или приложением. Вот самые распространенные элементы UI, о которых нужно знать, чтобы лучше разобраться в отличиях:
Информационные компоненты : UI-дизайнеры используют информационные компоненты, чтобы расширить т.н. читательский опыт – передать больше информации. Примеры информационных компонентов: индикаторы состояния, уведомления и окна с сообщениями. Все это используется как подтверждение: пользователь выполнил определенную задачу. Или чтобы уведомить, что с его стороны требуется определенное действие.
Навигация «хлебные крошки»
Это дизайнерский инструмент, который визуально улучшает юзабилити сайта.
Так люди видят свое местонахождение на веб-странице, в ее иерархической структуре. Какие-либо вычурные дизайнерские элементы не обязательны, нужно лишь показать, в каком разделе сайта находится пользователь. Обычно такие ссылки размещаются вверху веб-страницы интернет-магазинов, или на других ресурсах.
Элементы управления вводом : пользователям предоставляется несколько вариантов, чтобы ответить на вопрос, который им задают. Это могут быть чекбоксы, выпадающие списки и переключатели. Информация должна быть краткой и сжатой, чтобы было проще выяснить потребности.
Исследование опыта взаимодействия
Без исследования не удастся узнать о потребностях и предпочтениях людей. UX-исследование – это поиск того, что нужно пользователям; полученные данные ложатся в основу UX-дизайна. Компании и дизайнеры применяют исследования, чтобы сделать определенные выводы, о том, что работает и что лучше изменить. Есть несколько вариантов UX-исследований.
Юзабилити-тестирование
Задача такого исследования – узнать, насколько успешен продукт; в тестировании участвуют пользователи. Так компании получают реальную информацию о том, как люди пользуются продуктом или системой, или как этот продукт или система работают. Есть два основных способа тестирования.
Юзабилити-тестирование на случайных пользователях – это быстрый и дешевый способ для компаний и исследователей получить информацию от людей, которые могут и не знать об их продукте. Случайные люди пользуются продуктом и делятся своим мнением.
Удаленное юзабилити-тестирование позволяет компаниям провести исследование в условиях, когда пользователи находятся в своей естественной среде (например, у себя дома или в офисе).
Инструменты юзабилити-тестирования
Такие инструменты позволяют узнать мнение пользователей, проанализировать фидбек, и сделать определенные изменения на основе данных. Если ищите инструмент, который бы помог выяснить, насколько прост в использовании ваш сайт или приложение, у вас есть два варианта:
Adobe Fireworks СS6 позволяет веб-дизайнерам создавать графику для веб-страниц без необходимости вникать в тонкости программного кода или дизайна. У Adobe Fireworks есть ряд преимуществ. У этого инструмента впечатляющая точность пикселя, есть опции сжатия изображений (JPEG, GIF и т.д.), что позволяет пользователям создавать функциональные сайты и строить векторы.
С помощью Adobe XD можно создавать дизайн сайтов и мобильных приложений, а также прототипы, каркасное моделирование и векторную графику. Можно делиться интерактивными прототипами на нескольких платформах, включая Windows, Mac, iOS и Android – инструмент идеально подходит для командной работы.
Axure RP Pro – еще один хороший инструмент для UX-дизайна и, к тому же, бесплатный. В Axure реализованы несколько опций, в т.ч. прототипирование и документирование. Можно даже создавать схему перемещения пользователя и карты сайтов. Axure идеально подходит для создания веб- и десктопных приложений, пользователям предоставляется возможность быстрого экспорта в PDF или HTML.
Это комплексный софт со множеством специфических функций, в т.ч. недиструктивное редактирование (под этим подразумевается то, что Sketch не будет менять плотность пикселей изображения, с которым вы работаете). Экспорт кода, пиксельная точность, прототипирование, векторное редактирование – вот основные преимущества Sketch.
6. Софт для сторибординга
Вы можете задаться вопросом, зачем в UX-дизайне нужен сториборд. Но это хороший способ, чтобы визуально предугадать, как пользователь будет взаимодействовать с вашим продуктом в широком контексте. Есть несколько инструментов для сторибординга, с разными функциями и уровнями сложностями.
Storyboarder – бесплатная разработка с базовым функционалом, которая подойдет для всех дизайнеров, независимо от уровня их мастерства. Это ПО быстро создает наброски или фигурки, чтобы описать план или идею. Еще один инструмент – Toon Boom Storyboard Pro . Он совмещает в себе функцию рисования, анимации, контроля камеры и другие многочисленные опции – за ежегодную или ежемесячную плату. Широкий функционал, для усложненного сторителлинга и детальной подготовительной работы. Все это подойдет для дизайнеров, которые ищут возможность, чтобы визуально рассказать свою историю с помощью интерфейса.
Как стать UX-дизайнером?
Если вы любите дизайн, исследования и работу с людьми – выслушивать рассказы других о своем опыте, тогда, возможно, стоит подумать о карьере в UX-дизайне. В таком случае вам придется сосредоточиться на концептуальных аспектах дизайна; создавать качественный опыт взаимодействия для других пользователей.
Есть несколько важных шагов на пути к карьере UX-дизайнера. Многие университеты мира предлагают свои курсы, но чтобы на них записаться, 4 года образования в сфере дизайна – это, как правило, обязательное условие. Есть более гибкие программы, такие как Quinnipiac University Graduate Program in User Experience Design . Существуют и программы сертификации профессионалов. Многое зависит от продолжительности обучения и уровня подготовки.
Если вы готовы воплотить свою мечту и стать UX-дизайнером, понадобится резюме и яркое портфолио. Пригодятся такие ресурсы, как Dribbble или Behance . Свои работы можно продемонстрировать на собственном сайте, созданном с помощью таких конструкторов, как SquareSpace.
Не упускайте из поля зрения следующие нюансы:
Визуальная привлекательность
Презентация – это все. Работа должна говорить сама за себя… показывайте, а не говорите! Выбор цвета, типографика – все это важно.
Добавьте страницу «о себе»
Почему кто-то должен вас нанять? Что нового вы можете принести в какую-либо организацию? Продемонстрируйте рекрутерам свое уникальное видение, или то, что вас вдохновляет.
У сотрудника компании вашей мечты не должно быть сложностей с навигацией по сайту-портфолио. В меню добавьте такие разделы, как контакты, резюме, портфолио, обо мне и т.д. дабы упростить навигацию.
Объясните, как вы создаете свой UX
Ваш будущий работодатель хочет понять ваш образ мышления. Добавьте информацию, которая бы рассказала рекрутеру о вашем UX-исследовании, брейнсторминге, процессе создания дизайна или прототипировании.
Создайте дополнительное портфолио
Используйте другие инструменты, чтобы ваши работы были доступны на веб-ресурсах, где проводят время дизайнеры и те, кто хотят их нанять,
Итог
Вы можете быть графическим дизайнером, блогером, разработчиком или кем-либо еще, но, в любом случае, UX-дизайн – это то, что может помочь вам и вашей компании развиваться. Счастливый пользователь – залог успеха, но без продуманного UX-дизайна добиться этого будет невозможно.
Технологии все больше проникают в повседневную жизнь, а успешный UX-дизайн устраняет любые барьеры между пользователем и его девайсом (или приложениями). UX-дизайн сейчас как никогда важен – присоединяйтесь к этому движению и извлекайте пользу для своего бизнеса.
От автора: прошедший год принес целую волну новых техник, стилей и трендов, большинство из которых возникли для удовлетворения потребностей растущего рынка мобильных устройств. Технический прогресс изменил ожидания пользователей по поводу эстетики и функциональности сайтов и приложений. В данной статье мы обсудим интерактивный дизайн сайта, а именно 5 лучших трендов 2015 года.
Давайте разберем несколько распространенных тактик, описанных в книге Лучшие практики интерактивного дизайна .
Фрейминг – То, как вы представляете определенную информацию. Вместо того чтобы показывать, что оплата картой будет стоить дороже, можно было бы включить ее в общую стоимость и представлять другие способы оплаты, как со скидкой.
Анкоринг – Суть заключается в отображении более дорогого товара выше, тем самым устанавливая его цену за эталон. В таком случае более дешевые товары будут выглядеть намного привлекательнее. Способ особенно эффективен в паре со скидками, когда пользователь четко видит, сколько он может сэкономить.
Боязнь потери – По результатам исследования выяснилось, что инстинкт покупателя избежать боли намного сильнее инстинкта удовольствия от покупки. Постановка вопроса «Если вы не зарегистрируетесь, то потеряете 10$» намного эффективнее, чем «Если вы зарегистрируетесь, вы сэкономите 10$».
Дефицит – Чем меньше товара, тем больший на него спрос. Внимательно посмотрев на сайты Groupon и Amazon, вы заметите, как они подчеркивают дефицит товара для управления конверсией.
Невидимый интерфейс
Хороший дизайн не привлекает к себе внимание. Такой дизайн работает на заднем плане, создавая ощущение у пользователей, что все, чего они достигли, все это благодаря только их усилиям. Ниже я представил несколько полезных способов по расширению возможностей пользователя во взаимодействии с сайтом:
Уменьшение и упрощение этапов – Чем меньше шагов пользователь делает для достижения цели, тем более успешен ваш интерфейс. Этапы могут быть небольшими, но даже если вы избавите пользователя от одного лишнего клика, то он оценит это. Просто взгляните, как Uber (ниже скриншот) превратил многоступенчатый процесс добавления данных кредитки в один простой шаг.
Понятная визуальная коммуникация – Придерживайтесь последовательной визуальной темы и универсальных и понятных значков, чтобы пользователь не запутался (т.е. иконка почты означает список сообщений или входящие).
Всепрощающий интерфейс – Предугадывайте распространенные ошибки пользователей и устанавливайте соответствующие меры безопасности. К данным мерам можно отнести отмену, автосохранение, многоформатный ввод данных, а также пояснительную обратную связь.
Следите за передвижением пользователя – Лучший способ выявить избыточность интерфейса и ненужные шаги это визуализировать передвижение пользователя по сайту. Jessica Downey на примере своей «карты щупалец » создает визуальную карту, помогающую правильно организовать этапы. Ryan Singer с сайта Basecamp придумал похожий, но более быстрый способ .
Значение пробелов
В книге «Лучшие практики пользовательских интерфейсов в веб-дизайне» сказано, что пустое место это не всегда скучно. Пробелы необходимо использовать как активную часть дизайна. С точки зрения интерактивного веб-дизайна пробелы это паузы между словами и предложениями. Распознавание и обработка элементов с экрана быстро теряет смысл без кратких передышек.
Ниже я составил парочку советов относительно пробелов, которые стоит запомнить:
Пробелы создают иерархию – Чем больше пустого пространства вокруг объекта, тем больше к нему приковывается внимание. Только этот трюк уже может помочь дизайнерам повлиять на визуальную иерархию того, на что хочется посмотреть первым.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Минимализм добавляет искушенности – Минимизировав количество элементов и увеличив пустое пространство, вы придаете своему сайту атмосферу элегантности и роскоши. Данный подход часто можно встретить на веб-сайтах модных брендов.
Пространство оказывает влияние на четкость – Пробелы используются не только для фона: если отбросить все и посмотреть на дизайн с атомного уровня, то пробелы могут, как улучшить, так и снизить читаемость текста. В нашем случае под четкостью подразумевается легкость чтения сложных букв в слове. Следуйте этим советам по пробелам между строками/буквами, чтобы быть уверенными в читаемости текста.
Текст интерфейса тоже часть дизайна
Развивая аналогию пользовательского взаимодействия, как диалога, можно сказать, что интерфейс должен тщательно подбирать слова. Все на экране приложения или сайта считается интерфейсом, и текст не исключение. Если смысл написанных слов не совпадает с задачей сайта, не поможет даже самый лучший шрифт.
Вас не спасет то, что ваш основной текст может принимать различные формы и размеры. Обычно, весь текст можно разделить и изменить по категориям. Слова приветствия могут быть непринужденными или доброжелательными, но текст призыва к действию на той же странице должен быть более смелым и кратким. Вне зависимости от цели вашего текста, следующие советы могут помочь донести до пользователя правильный смысл:
Знайте свою аудиторию – Этот совет стар, как мир. Знайте своих пользователей и то, что они хотят от вас, чтобы вы им сказали. К примеру, на сайте для детей слова или фразы могут повторяться для привлечения внимания, в то время как на юридическом сайте такой подход не приветствуется.
Определите контекст применения вашего сайта – Вы пишите для веб-сайта или приложения? Домашняя или страница описания? Так же, как вы изменили основной текст под аудиторию, измените сайт под среду использования. Если ваше приложение спроектировано для использования в суетливых или отвлекающих ситуациях (Waze при вождении), сокращение текста ускорить обработку информации.
Показывайте свою индивидуальность – Ваш стиль письма вносит свой вклад в общее настроение и атмосферу сайта так же, как и сильный образ или плавная анимация. Необходимо понять, какие эмоции вызывают определенные цвета. Текст не должен конфликтовать с визуальным взаимодействием.
Отличный дизайн
Последний, но не менее важный, хороший интерактивный дизайн это всегда приятно. Эмоциональная связь с пользователями – самый надежный способ завоевать доверие. Когда дело доходит до дизайна сердце так же важно, как и разум.
На примере MailChimp окно подтверждения является важнейшей частью привлечения пользователей через email рассылку. Забавная картинка и смешной текст только усиливают наслаждение от использования сайта (не говоря уже о том, что данный подход снижает раздражение от массовой рассылки почты). Ниже я составил несколько быстрых советов:
Не жертвуйте юзабилити – Думайте об отличном дизайне как о вишенке на торте: вишенка разбавляет вкус торта, но сама по себе она ничего не дает. Никогда не жертвуйте дизайном ценой ясности.
Оторвитесь от привычного – Как сказал Ben Rowe, ваша первостепенная задача в создании «осмысленного восторга». Как ваш сайт или приложение могут ввести людей в состояние, где действия не ограничены ничем?
Исследования – Пользователя любят сюрпризы. Подходящие микровзаимодействия (типа затухающей анимации, если пользователь завершил задачу) могут сделать довольно общие задачи более эмоционально стоящими. На рисунке ниже показано, как даже простая анимация плавного появления меню добавляет увлекательности повторяющимся действиям.
Была привнесена целая волна новых методов, стилей и направлений. Большинство из них появились, чтобы удовлетворить потребности растущего рынка мобильных устройств. Технологические достижения изменили пользовательские ожидания от эстетики и функциональности сайтов и веб-приложений.
Из всего, что происходило в мире интерактивного дизайна в 2015 году, мы выделили 5 наиболее существенных тенденций, которые, скорее всего, будут перенесены на текущий год.
Убедительный дизайн
Сердцем интерактивного дизайна всегда было «очеловечивание» взаимодействия с компьютером, разговор между пользователем и сайтом. Не смотря на то, что почти каждый сайт имеет свои собственные бизнес цели, почти половина такого взаимодействия применяет классические методы продаж. Давайте взглянем на некоторые из наиболее распространенных тактик, применяющихся в интерактивном дизайне:
— Кадрирование.
То, как вы представляете определенную информацию, называется кадрированием. Вместо предложения надбавки для кредитных карт, как дополнительной платы, можно сформулировать ее как нормальную цену и сказать, что оплачивая товар альтернативным методом, клиент зарабатывает скидку.
— Закрепление.
Представьте более дорогой пункт первым, предложив эту цену в качестве стандарта. Тогда каждая меньшая цена покажется клиенту торговой сделкой. Это особенно эффективно работает на ценах со скидками, где пользователи могут точно видеть, сколько экономят.
— Неприятие потери.
Исследования показывают, что клиенты больше реагируют на избегание убытка, чем на приобретение дополнительных бонусов. Окно с месседжем — «если вы не зарегистрируетесь, то потеряете $10» приносит больше результатов чем — «если вы зарегистрируетесь, то сэкономите $10».
— Дефицит.
Чем меньше предлагаемое количество, тем выше спрос. Вы видите, как такие сайты как Groupon и Amazon по-прежнему управляют потреблением, выделяя дефицит товара.
Незаметный интерфейс
Хорошие проекты не перетягивают на себя одеяло. Они работают в фоновом режиме, так чтобы пользователи чувствовали, что любой успех обусловлен чисто их собственными силами. Вот некоторые полезные способы для расширения возможностей пользователя при взаимодействии с сайтом:
— Меньше и проще.
Чем меньше шагов нужно сделать вашему пользователю для достижения цели, тем более успешен ваш интерфейс. Шаги могут быть незначительными, но даже если вы уберете хотя бы одни клик, пользователь оценит это. Посмотрите на то, как Uber превращает многоэтапный процесс ввода информации о кредитной карте в один простой шаг.
— Ясная визуальная коммуникация.
Чтобы избежать путаницы, поддерживайте постоянную визуальную тему и используйте понятные обозначения. Например, значок почты означает сообщение или почтовый ящик.
— Снисходительный интерфейс.
Умение предвидеть распространенные ошибки пользователей и обеспечить соответствующие гарантии во взаимодействии с сайтом – очень полезное качество дизайна. Мы подразумеваем варианты отмены действий, автосохранение, входы в разных форматах и поучительную обратную связь.
— Карта пользовательского пути.
Лучший способ выявить избыточность дизайна и ненужные шаги – составить визуально путь пользователя к услуге.
Значимость белого пространства
Пустое пространство не всегда скучно. Белое, или негативное, пространство, должно быть реализовано в дизайне так же, как и визуально активные элементы. С точки зрения интерактивного дизайна – белое пространство как паузы между словами. Без коротких передышек от просмотра информации, все элементы на экране быстро теряют свой смысл. Вот некоторые основные рекомендации о белом пространстве, которые стоит помнить:
— Негативное пространство создает иерархию.
Чем больше пробелов вы размещаете вокруг объекта, тем больше внимания он получает. Один только этот простой трюк может помочь дизайнерам влиять на визуальную иерархию, заставляя пользователя увидеть именно нужный элемент в первую очередь.
— Минимализм добавляет изысканности.
Минимизация количества элементов и максимизации количества отрицательного пространства придает вашему сайту атмосферу элегантности и роскоши. Эта тактика наиболее часто применяется в веб-сайтах модных брендов.
— Пространство влияет на читабельность.
Белое пространство используется не только для фонового шума. Опускаясь вплоть до атомного уровня, расстояние может улучшить или ухудшить читаемость. В этом случае, четкость — это правильное использование символов в слове. Интервал между строками и буквами может обеспечить приемлемую читаемость.
Текст интерфейса как дизайн
Рассматривая интерфейс как аналогию взаимодействия с пользователем в разговоре, дизайнер должен тщательно выбирать слова. Все, что находится на экране приложения или сайта, считается интерфейсом. И текст – не исключение. Если смысл, стоящий за словами, не соответствует вашему сайту или приложению, даже отличная типографика не имеет значения.
Как правило, вы можете изменять варианты своего дизайна для разных категорий. Приветствие может иметь случайный и доброжелательный тон, в то время как текст с призывом к действию на той же странице должен быть более смелым, точным и кратким. Независимо от цели текста, следующие принципы помогут вам донести до пользователя правильную мысль:
— Знайте свою аудиторию.
Это совет стар, как мир. Знайте своих пользователей и то, что они хотят. Например, сайт для детей может повторять фразы и слова для корректировки концентрации внимания, в то время как сайт для юридической фирмы должен делать прямо противоположное.
— Учитывайте контекст.
Представьте: вы пишете текст для веб-сайта или приложения; для домашней страницы или о домашней странице. Наверняка, вы будете изменять текст, чтобы удовлетворить ожидания аудитории. Сделайте то же самое в целом для веб-среды. Если ваше приложение предназначено для использования в суете или отвлекающих ситуациях (например, при движении), текст, выполненный коротким и толстым шрифтом, поможет быстрее воспринимать информацию.
— Отображайте вашу индивидуальность.
Стиль написания будет способствовать общему настроению и атмосфере сайта так же, как сильный образ или анимация. Согласование по цвету позволит тексту не конфликтовать с визуальным взаимодействием.
Очаровательный дизайн
И последнее, но не менее важное замечание. Хороший интерактивный дизайн – всегда приятный. Формирование эмоциональной связи с вашими пользователями — надежный способ заработать их лояльность. Когда дело доходит до дизайна, прислушайтесь не только к уму, но и к сердцу.
На сайте MailChimp — окно подтверждения является неотъемлемой частью электронного маркетинга. Добавление прикольной графики и юмористического текста добавляет немного удовольствия без каких-либо затрат (не говоря уже о том, что это подрывает часть напряженности, присущей массовой рассылке через электронную почту). Вот несколько простых советов, которые помогут сделать дизайн приятным:
— Не жертвуйте удобством.
Подумайте о дизайне как о глазури на торте: глазурь добавляет торту привлекательности, но глазурь в одиночку — уже не торт. Никогда не увлекайтесь искусностью в ущерб ясности.
— Выйдите за пределы.
Ваша конечная цель заключается в создании «значимого восторга». За восхитительной эстетикой дизайна стоит цель заманить людей на сайт и дать им почувствовать неограниченные возможности.
— Способность делать открытия
Люди любят сюрпризы. Соответствующее микровзаимодействие (например, анимационные элементы, которые помогают пользователю выполнять задание) очень помогает вашему сайту. Иногда даже простая исчезающая анимация в навигационном меню добавляет удовольствия в повторяющихся действиях.
Интерактивность помогает сделать пользовательские интерфейсы выразительными и простыми в использовании. Несмотря на большой потенциал, интерактивность, пожалуй, наименее понятно из всех дисциплин дизайна. Это может быть связано с тем, что интерактивность является одним из новых членов семейства пользовательских интерфейсов. Визуальный дизайн и дизайн взаимодействия восходят к ранним графическим интерфейсам, но интерактивный дизайн должен был дождаться более современного оборудования для плавного рендера анимации. Наслаивание интерактивности пользовательского интерфейса на традиционную анимацию вносит свою лепту недопонимания. Целую жизнь можно потратить на освоение 12 основных принципов Диснея , означает ли это, что интерактивность пользовательского интерфейса также сложно? Люди часто говорят мне, что проектировать интерактивность сложно или что выбор правильных значений неоднозначен. Я утверждаю, что в областях, наиболее важных для пользовательского интерфейса, интерактивный дизайн может и должен быть простым.
С чего начать?
Основная задача интерактивного дизайна - помочь пользователям ориентироваться в приложении, проиллюстрировав взаимосвязь между элементами пользовательского интерфейса. Интерактивный дизайн также имеет возможность добавлять персонажа в приложение с анимированными иконками, логотипами и иллюстрациями; однако удобство использования должно иметь приоритет над элементами выразительности. Прежде чем демонстрировать навыки анимации персонажа, давайте начнем с создания базовой интерактивности, сосредоточившись на переходах навигации.Паттерны перехода
При разработке навигационного перехода ключевыми являются простота и согласованность. Для этого мы выберем два типа движений:- Переходы на основе контейнера
- Переходы без контейнера.
Переходы на основе контейнера
Элементы, такие как текст, значки и изображения, группируются внутри контейнеров
Если композиция включает в себя контейнер, такой как кнопка, карточка или список, тогда проект перехода основан на анимации контейнера. Контейнеры обычно легко обнаруживаются на основе их видимых границ, но помните, что они также могут быть невидимыми до начала перехода, как элемент списка без разделителей. Этот шаблон разбивается на три этапа:
* Анимация замедлена, чтобы проиллюстрировать, появление и исчезания элементов
Применение этого паттерна ко всем переходам с контейнером устанавливает согласованный стиль. А также делает понятной связь между начальной и конечной композициями, так как они связаны анимированным контейнером. Для демонстрации гибкости этого паттерна, здесь показаны пять разных композиций:
* Анимация замедлена, чтобы проиллюстрировать, как начальная и конечная композиции связаны контейнером
Некоторые контейнеры просто появляются из за экрана с помощью стандартного смягчения. Направление его движения определяется местоположением компонента, с которым он связан. Например, нажатие значка навигационного меню в верхнем левом углу приведет к перемещению контейнера слева.
Если контейнер из за границ экрана, он плавно появляется и увеличивает масштаб. Вместо анимирования от 0%, он начинает анимацию с 95%, чтобы избежать чрезмерного внимания к переходу. Масштабная анимация использует смягчение замедления , то есть начинается с максимальной скорости и мягко замедляется. Чтобы исчезнуть, контейнер просто плавно затухает без масштабирования. Окончание анимации должно быть менее выраженным, чем начало, чтобы сосредоточить внимание пользователя на новом контенте.
* Анимация замедлена, чтобы проиллюстрировать, как контейнеры могут возникать благодаря постепенному изменению элемента (масштабирование, появление и исчезание)
Переходы без контейнера
Некоторые композиции не имеют контейнера, на котором основывается переход, например, нажимая значок в нижней навигации, который выводит пользователя в новое место назначения. В этих случаях используется двухэтапный шаблон:- Композиция начинается путем плавного затухания, заканчивается плавным появлением.
- По мере того как конечная композиция исчезает, она также едва заметно масштабируется используя уменьшение смягчения элементов. Опять же, масштабирование применяется только в момент появления композиции, чтобы подчеркнуть новый контент по сравнению со старым.
* Анимация замедлена, чтобы проиллюстрировать, как происходят переходы без контейнера использую масштабирование, появление и исчезание элементов
Если начало и конец композиции имеют четкую пространственную или поэтапную связь, то совместное движение может быть использовано для ее усиления. Например, при навигации по шаговому компоненту начало и конец композиция прокручивается по вертикали по мере их постепенного затухания или появления. Это усиливает их вертикальную компоновку. При нажатии следующей кнопки для ознакомления с дальнейшим материалом, композиция прокручивается по горизонтали. Перемещение слева направо усиливает понимание последующего события. Совместное движение использует элементы стандартного смягчения.
* Анимация замедлена, чтобы проиллюстрировать, как происходят движение по вертикали и горизонтали
Лучшие практики
Чем проще тем лучше
Учитывая их высокую частоту и тесные связи с юзабилити, навигационные переходы должны в целом поддерживать функциональность по стилю. Это не значит, что они никогда не должны быть стилизованными, просто убедитесь, что выбор стиля оправдан брендом. Движение глаз обычно лучше всего задерживается на элементах, таких как маленькие иконки, логотипы, загрузчики или свободное состояние. Простой пример ниже может не привлечь столько внимания на Dribbble, но это сделает более удобным приложение.
* Анимация замедлена, чтобы проиллюстрировать, различные стили движения
Выберите правильную продолжительность и смягчение
Навигационные переходы должны использовать длительности, которые определяют приоритетность функциональности, будучи быстрыми, но не настолько быстрыми, чтобы они не стали дезориентирующим фактором. Длительность выбирается в зависимости от того, какой процент экрана занимает анимация. Поскольку навигационные переходы обычно занимают большую часть экрана, длительность 300 мс является проверенным методом. Напротив, небольшие компоненты, такие как переключатели, используют короткую продолжительность 100 мс. Если переход слишком быстрый или медленный, отрегулируйте его продолжительность с шагом 25 мс, пока он не достигнет правильного баланса.Смягчение описывает скорость, с которой анимация ускоряется и замедляется. Большинство навигационных переходов используют стандартное смягчения элементов, которое является асимметричным типом смягчения. Это означает, что элементы быстро ускоряются, а затем осторожно замедляются, чтобы сосредоточить внимание на конце перехода. Этот тип смягчения придает анимации естественное качество, поскольку объекты в реальном мире не могут вдруг начать и прекратить движение. Если переход кажется жестким или роботизированным, вероятнее всего, симметричное или линейное смягчение было выбрано ошибочно.
* Анимация замедлена, чтобы проиллюстрировать, различные типы смягчения
Паттерны и лучшие практики, изложенные в этой статье, предназначены для создания практичного и ненавязчивого стиля движения. Это подходит для большинства приложений, однако некоторые бренды могут требовать более интенсивных выражений стиля. Чтобы узнать больше о стилизации движения, ознакомьтесь с нашими инструкциями по настройке .
После того как навигационные переходы реализованы, начинается задача добавления персонажа в ваше приложение. Именно здесь простые паттерны не действуют, и тут в полной мере можно реализовать свои анимационные умения…
Персональная анимация может добавить непринужденности к серьезной ошибке
Если вам интересно узнать больше о возможности движения, обязательно прочтите наши
Как правило, для стимулирования человека, использующего продукт, сервис, систему, нужна возможность дать ответную реакцию. Эта реакция должна быть оцененной, с четко прописанной коммуникацией, и, в большинстве случаев, вызывать четкий и наполовину предсказуемый ответ. И тогда это работает.
Приведенное выше – это базисное определение интерактивного дизайна (Interaction Design - IxD), соединяющее вместе общие тенденции определений, данных известными дизайнерами Денном Саффером (Dan Saffer 1 ) и Робертом Рейнманном (Robert Reimann 2 ), а также Ассоциацией Интерактивного Дизайна (Interaction Design Association 3 ).
Также очень важно отметить, что интерактивный дизайн – это понятие, совершенно отличное от других видов дизайна. Это не информационная архитектура, или промышленный дизайн. Это также не разновидность пользовательского интерфейса. Интерактивный дизайн – это не какая-либо форма или структура, а что-то более эфемерное – это, скорее, понятие того «почему» и «когда», а не «что» и «как».
Для любой разновидности дизайна первоочередная задача – сформулировать то, что называется основами или базисными элементами. Создание таких семантических понятий обеспечивает:
- более качественную коммуникацию между участниками
- создание общих эстетических понятий
- лучшие инструменты для обучения
- область для исследований
Что такое основания?
Первое мое знакомство с “основаниями” состоялась при подготовке программы для специалистов по промышленному дизайну в институте Пратта в Бруклине, Нью-Йорк. Программа создавалась Ровиной Рид Костеллоу (Roweena Reed Kostellow) на основе ее образовательной философии оснований (более детально см. «Элементы дизайна» от Гейл Грит Ханна - Elements of Design , Gail Greet Hannah 4 ).
По Костеллоу, существует шесть элементов, которые образуют основания промышленного дизайна: линия, освещение и цвет, пространство, объем (размеры), отрицательное пространство (задний план, фон) и текстура (поверхность, фактура). Смешивание этих элементов и эксперименты с ними – сердце дизайна в области 3D-форм. Студенты института Пратта осваивали эти основания в течение годичного курса. Они должны были определять границы и зависимости, обсуждая абстракции и реальные проекты.
Поскольку я не единственный человек, который задумывался об этих вещах, можно предположить, что все мы думаем об этом по-разному. Например, Ден Саффер, в своей книге «Разработка интерактивностей» отвел большую главу, где он описывает элементы интерактивного дизайна: время, движение, пространство, появление, текстура и звук. Элементы Дена скомпонованы по тому, как я могу вызвать их на форме для появления интерактивности, а не по тому, какая форма интерактивности будет доступна для меня или нет, за исключением, наверно, времени.
Если это действительно основания интерактивного дизайна, они должны быть полностью абстрагированы от формы и не иметь физических атрибутов.
Основания интерактивного дизайна
Время
«Время» отличает интерактивный дизайн от других видов. Это оболочка наших понятий об интерактивности.
Но время не единственное основание интерактивного дизайна. Есть очень много взаимосвязанных аспектов манипулирования временем. И как мы все знаем, время относительно, оно существует по множеству осей в один и тот же момент. Так что можно выделить три зависящих от времени оснований интерактивного дизайна:
Темп
Интерактивный дизайн – это создание повествования, постепенных изменений в индивидуальном опыте, но при этом оставаясь в границах. Например, если я использую почтовый клиент, мне совершенно не хотелось бы включать печку в тот момент, когда я пишу письмо.
Повествование имеет темп. Мы ясно понимает это, когда смотрим кино. Если кино хорошее – мы никогда не смотрим на часы. Темп – это также часть интерактивного дизайна, поскольку иногда вы можете смотреть на часы вовсе не из-за скуки, а потому, что хотите понять – сможете ли вы вовремя завершить процесс «интерактивности».
По моему мнению, темп в интерактивном дизайне часто коррелирует с тем, что мы можем сделать в отдельно взятый момент. При этом недостаточно того, чтобы я мог что-то сделать, надо еще, чтобы я это мог сделать до перехода на следующий шаг. Например, когда я что-то покупаю, я могу заполнять одну очень громадную форму, где есть вся информация обо мне и проверять все данные сразу, или я могу проверять данные по частям, разделив процесс проверки на несколько.
Поскольку общая длина полей одинакова, время на заполнение должно быть также примерно одинаково в каждом случае, но ощущение темпа в каждом дизайне будет отличаться. В общем случае, одна большая форма более эффективна, а поделенная на куски – более управляема.
Реакция
Простейший путь определения времени в интерактивном дизайне – «время реакции». Насколько долго система отвечает на событие? Это происходит, когда мы види, как курсор превращается в песочные часы или в, ставший притчей во языцех, прогресс-бар, и мы ждем когда система нам ответить, но важны и другие времена реакции.
Действие, совершающееся в реальном времени (синхронно), связано с текущим моментом, в то время как асинхронное действие теряет эту связь. Поскольку некоторые системы чувствительны ко времени, надо знать, как учитывать различия этих типов реакции.
Контекст
Каждый базисный элемент, такой как время, должен иметь подэлемент – «контекст». В нашем случае, интерактивности курса для человека, это означает, что нельзя рассматривать дизайн сам по себе. Например, говоря «время», мы не можем заниматься дизайном приложения без понимания того, как долго человек может потратить на прямой контакт с системой.
Метафора
Метафора – это литературный прием, при котором одно хорошо понимаемое явление или понятие используется для объяснения другого понятия, более трудного для понимания, или когда его трудно объяснить другим образом. Виртуальная природа компьютеров требует нахождения «вещественных» метафор для того, чтобы объяснить людям все эти туманные вещи. От того, какого типа и насколько много метафор вы используете, напрямую зависит качество и эмоциональное восприятие вашего продукта.
Самый наглядный пример метафоры – урна или мусорное ведро (в операционной системе на вашем компьютере). Идея состоит в том, что ваши файлы лежат в виртуальном «ведре» или «корзине», так что если вы ошиблись, то вы можете покопаться там (Ой!) и восстановить их в оригинальном виде. И, конечно, вы можете всегда «опустошить ведро», сделав содержимое невосстанавливаемым. Метафора работает хорошо для любых людей, поскольку она точно и гибко связана с реальностью.
Все метафоры не имеют обратного хода. Например, мы попытались использовать термин «удалить», для того, чтобы быстро объяснить, как добавить что-то в ведро или урну. Но, мы ведь не можем что-то удалить в реальное мусорное ведро или урну, не так ли?
Но иногда метафора бывает слишком отдаленной. Тогда она позволяет расширить границы наших способностей к воображению. Если у меня есть книга для записей, картотечный шкаф, почтовый ящик, календарь и тому подобное для удобной работы на моем экране, я могу называть мои объекты карточками, использовать блокнот, оставлять свои сообщения в почтовом ящике и отмечать встречи в календаре, не правда ли?
Но при этом метафоры лучше достигают цели, если они немного не точны, и пользователь сам должен заполнять пробел согласно собственному пониманию предмета. Так, например, мы адаптировали метафоры рабочего стола к нашим современным компьютерам.
Дизайнер интерактивности должен достигать этого баланса, внимательно используя метафоры своих предшественников и строя что-то поверх них, так долго, насколько оригинальная метафора (возможно, всеми признанная) будет способна сопротивляться новым течениям.
Абстракция
Работая в тандеме с метафорой, абстракция соотносится больше с физической и ментальной активностью, которая исключительно необходима для того, чтобы интерактивность имела место. Я впервые начал думать об абстракции тогда, когда прочел статью Йонаса Лоугрена (Jonas Lowgren) 7 , о том, что он обозначил термином «пластичность». Прочитав эту статью и использовав этот термин несколько раз в разговорах и дискуссиях, я вдруг понял, что в действительности Йонас говорил о том, как абстракция в интерфейсе является отображением продукта.
По большому счету, все что мы видим в компьютере – изначально абстракция, поскольку у нас есть два первичных интерфейса для точки ввода – мышь и клавиатура. Некоторые правда размещают монитор внутри особого рода указательных устройств и понижают уровень абстракции для некоторого типа интерактивностей, в основном – для рисования. Тем не менее, большинство из нас использует нажатие на клавишы, указание, клик и перемещение мыши по экрану.
Давайте сфокусируемся на «мышеводстве». Мы смотрим на монитор, по которому перемещается курсор (в виде иконки) в соответствии с движениями мыши. Не глядя на мышь (обычно) мы перемещаем ее и, в соответствии с заданным направлением, иконка на экране (обычно стрелка) – перемещается тоже. Отлично, сортируем. Направо и налево работает так, как видится, но вот перемещение мыши «от себя» двигает курсор вверх, а «на себя» - вниз экрана. Отличная возможность метафоры для понятия перспективы.
Когда мы подводим иконку к цели, мы нажимаем на кнопку мыши. Это высший уровень абстракции. Мышь, монитор и процессор работают в унисон и создают серию эффектов того, что мы соединены с этими тремя устройствами. Но соединение это очень и очень абстрактное и должно быть изучено.
В поведении мыши заложены различные уровни абстракции. Мои фавориты для сравнения этого - Google Maps и MapQuest. В Google Maps, нажав на кнопку мыши и двигая рукой, я могу перемещать центр области карты. Там очень быстрое время реакции, но тип движения – перемещение руки так, как если бы я двигал лист бумаги в луче света – менее абстрактен, чем в MapQuest, где я просто кликаю на рамку или на карту (устанавливая соответствующий режим). Можно сказать что клик – это быстрее (меньший набор навыков), но это более абстрактно, наверное, менее увлекательно и, определенно, менее точно. Все это делает работу с Google Maps (и его подражателемя) более приятной и эффективной интерактивностью.
Системы становятся все более комплексными и все более интегрированными в нашу жизнь. Многие системы стали полностью абстрактными и это не всегда хорошо, когда комплексность увеличивает абстрактность информации. Каждый из нас рано или поздно сталкивался с экранами, чувствительными к нажатию. Это резкое уменьшение уровня абстракции при взаимодействии с компьютерными устройствами.
Некоторые новые и популярные технологии создают трудности для новой волны дизайнеров интерактивности… Расширяющийся мир пространственных указателей, RFID и других подобных устройств дает скачок абстракции, так как просто отсутствует интерфейс прямого взаимодействия с такими устройствами. Для них просто невозможно найти простые эффективные метафоры, чтобы дать пользователям понимание о работе таких устройств, подобно тем метафорам, что мы подобрали для мыши.
Отрицательное пространство
Все «правильные» дизайнерские дисциплины имеют понятие о форме отрицательного пространства. В архитектуре и промышленном дизайне это полости или пространство между массивами. В графическом дизайне это «белое пространство» без цвета, линий или форм – как белые места на напечатанном листе бумаги. Дизайн звука использует тишину, дизайн света - темноту.
Так что такое отрицание интерактивности?
Есть много мест, где «что-то» может отсутствовать, или, говоря точнее, есть много слоев. Мы можем только говорить о действиях продукта? О наших действиях? О пространстве между частями действий?
Пауза – Очень ясное понятие о времени, когда не совершается никаких действий, связанных с интерактивностью. Часто интерактивный дизайн пытается заполнить такие провалы, но может быть, эти провалы полезны.
Остановиться и подумать – Что делать, если от системы нет реакции? Подумать, как сделал один студент Шведского института интерактивности и придумал «шар мысли». Если вы мало думаете, шар укатывается все дальше.
Неактивность – Ничего не делать, продукт не реагирует на действие, может быть из-за его неправильности. Это не то, что пауза, так как в этом случае неактивность – это реакция на действие, а не остановка в действии.
Смешивание в интерактивности
В отличии от других, формообразующих дисциплин дизайна, интерактивный дизайн очень запутан, потому что требует других дисциплин, чтобы строить взаимодействия. По этой причине, интерактивный дизайн больше схож с хореографией 8 или съемкой фильма, чем с музыкой или пошивом костюмов. Основные элементы, перечисленные выше, подходят только для интерактивного дизайна или были переопределены исключительно для него.
Например, использование цвета, как эстетического инструмента, улучшает или ухудшает уровень интерактивности. В общем, для большинства случаев, требуется информационная архитектура для подготовки информации, прежде чем будет создана интерактивность.
В конце концов, интерактивный дизайн – это хореография или оркестровая аранжировка других, формообразующих видов дизайна для создания взаимосвязанного диалога между людьми и окружающими нас продуктами и системами.
4 As captured in this recent book: Hannah, Gail Greet, Elements of Design: Rowena Reed Kostellow and the Structure of Visual Relationships , New York: Princeton Architectural Press, 2002.
8 Heller, David (NKA Malouf, David), “Aesthetics and Interaction Design: Some Preliminary Thoughts.” (ACM membership required) , Interactions 12:5 (September-October 2005): 48-50.