Как разработать пользовательскую инструкцию: советы и практика

Опубликовано 02 March 2020


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


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


Что такое посадка?


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


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


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


Как разработать пользовательскую инструкцию: советы и практика


Цели адаптивного пользовательского интерфейса


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


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


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


Элементы UX


Существуют различные элементы и методы общего опыта адаптации.

  • Руководство по приложению, которое называется «первый взгляд»: набор экранов, которые быстро вводят продукт для новичка и убеждают пользователя попробовать его.
  • Приветственные сообщения: короткие сообщения на экранах, чтобы приветствовать пользователя и установить связь; довольно типичный способ зажечь процесс адаптации; часто имеет элемент CTA.
  • Индикаторы выполнения и другие: уловка, основанная на естественном человеческом побуждении выполнить задачи. Индикаторы хода выполнения (точки, тире и т.д.), включенные в пользовательский интерфейс, стимулируют пользователя завершить настройку и дают представление о том, на какой стадии он активен в данный момент.
  • Видео-пояснение: видеообзор преимуществ и функциональных возможностей продукта, объясняющий основные моменты для пользователя, может стать динамичным и эффективным способом быстрого представления продукта.

Видео обзор, разработанный для приложения OffCents.

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

Как разработать пользовательскую инструкцию: советы и практика

Behance использует стратегию контрольного списка, чтобы направлять пользователей при заполнении их профиля

  • Горячие точки: этот встроенный элемент привлекает внимание к важным зонам или элементам управления, которые могут быть пропущены или не замечены неопытным пользователем.
  • Персонализированная регистрация: подход основан на настройке пользовательских предпочтений с самого начала и часто встречается в продуктах, основанных на взаимодействии с большим количеством разнообразного контента (например, Behance или Pinterest).


Как разработать пользовательскую инструкцию: советы и практика

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


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


Практика проектирования UX


Используйте изображения в инструкциях по приложениям.

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


Как разработать пользовательскую инструкцию: советы и практика

Симпатичная и забавная 3D-анимация, созданная для начинающего опыта в приложении для студии для детей, проводящих занятия по 3D-моделированию и анимации.


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

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

Как разработать пользовательскую инструкцию: советы и практика

Встроенный экран приложения «Финансовый трекер» содержит пользовательскую иллюстрацию, которая является не только модной и привлекательной, но и работает как направленная подсказка вместе со стрелкой, чтобы привлечь внимание пользователей к основным интерактивным элементам.


Не будь многословным


В написании для пользовательских интерфейсов слова - сила. Тем не менее, есть два простых правила, чтобы раскрыть эту силу наилучшим образом: кратко излагайте слова и делайте их полезными.

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


«Главное, что вам нужно знать об инструкциях, это то, что никто не будет их читать - по крайней мере, до тех пор, пока повторные попытки« запутаться »не увенчались успехом». Стив Круг однажды упомянул, и это тот момент, который нужно помнить. Если вы испытываете желание продемонстрировать свое красноречие, просто не переусердствуйте с этим: подсказки и инструкции - не место для этого.


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

Как разработать пользовательскую инструкцию: советы и практика

Короткий слоган для встроенного экрана приложения My Baby отражает суть проблемы, которую он решает, и оставляет большую часть экрана для красивой 3D-иллюстрации.


Сосредоточьтесь на потребностях пользователя


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

Как разработать пользовательскую инструкцию: советы и практика

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


Добавить жизнь и движение с анимацией


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

Как разработать пользовательскую инструкцию: советы и практика
Эмоциональная и привлекательная 3D-анимация, предназначенная для интерактивного взаимодействия с приложением My BabyЭто обучающий материал.

Допустить пропуск инструкции


Это было бы разумно, если бы у меня было достаточно продуктов. Решение должно быть принято на основе тестирования и анализа.

Следите за контекстом

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

    Как разработать пользовательскую инструкцию: советы и практика

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

    Использовать пустое пространство


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

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

    Следите за уровнем эмоций

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

    Не переигрывай

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

    Элементы начального уровня начинают играть плохую роль, когда:
    • их слишком много;
    • они слишком отвлекают;
    • они неясны;
    • пользователи не могут их пропустить или закрыть (например, «не показывай мне больше»);
    • они не несут никакой полезной информации.

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


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