16 августа 2018

6 правил мобильного дизайна

Во время работы над e-learning проектами у педагогического дизайнера иногда возникает задача «переработать классический десктопный курс под мобильную версию». Задача на первый взгляд несложная — материалы собраны, структура примерно понятна, упражнения готовы. Уменьшай себе экран и сокращай текст. Но не все так просто. Правила размещения и восприятия информации на экране компьютера и мобильного отличаются. Об этом и поговорим.
Правило 1. Учесть "мобильную хватку"
Если вы читаете эту статью с экрана мобильного, обратите внимание, как вы держите свой телефон. По данным исследования дизайнера мобильных приложений Стивена Хубера 49% пользователей пользуются одним пальцем при обращении с телефоном. Стивен приводит изображение, на котором указано, какие области экрана легче достать большим пальцем.
Интерфейс редактора курсов
Зеленый цвет – легкая область для взаимодействия; желтая область требует растяжки; а красная вынуждает изменить положение устройства в руке. Источник: uxmatters
Стивен Хубер провел данное исследование в 2013 году, а в 2017 году опубликовал серию статей, в которых оспорил свои же выводы. Стивен утверждает, что невозможно говорить об одном «главном» способе работы с мобильным: люди держат смартфон по-разному в зависимости от девайса, потребностей и ситуации.
Виды учебного материла редактора курсов iSpring Suite 9
Шесть распространенных моделей мобильной "хватки". Источник: uxmatters
При этом способ взаимодействия со смартфоном во многом зависит от типа выполняемой задачи, что показано на диаграмме ниже:
Пример двух шаблонных «аккордеонов»: слева – из Captivate, справа – из iSpring
Пользователи меняют хватку в зависимости от выполняемой задачи: длинный или короткий скролл, набор текста, чекбокс, клики по ссылке. Источник: uxmatters
При проектировании курса для мобильного устройства важно проверить, насколько интерфейс будет соответствовать задачам пользователя. Например, если предполагается частый набор текста, учтена ли возможность держать смартфон двумя руками?

Выводы

  • Учитывать при создании контента и интерфейса, что пользователи держат телефон разными способами.
  • Адаптировать интерфейс под наиболее распространенные задачи курса.
Правило 2. Все важное – в центр
Согласно данным тепловых карт при чтении текста с экрана компьютера и мобильного используются разные паттерны.
О других паттернах чтения с экрана — Gutenberg Diagram и Z-pattern, можно прочитать в блоге дизайнера Стивена Бредли.

Даже при наличии скролла пользователь предпочитает сначала перенести контент на середину экрана и после этого приступить к чтению информации. То же правило действует для интерактивных объектов. Например, при выборе необходимого контакта из адресной книги или чтении новостной ленты.
Пример двух шаблонных «аккордеонов»: слева – из Captivate, справа – из iSpring
Данные тепловой карты: при чтении новостной ленты в Twitter пользователи кликают по центру экрана.
Источник: uxmatters
Интерактивные вкладки и кнопки расположены в центре экрана для удобства пользователей. Примеры из курсов LEVEL:
Интерактивные вкладки и кнопки расположены в центре экрана для удобства пользователей. Примеры из курсов LEVEL Интерактивные вкладки и кнопки расположены в центре экрана для удобства пользователей. Примеры из курсов LEVEL

Выводы

  • Помещать важный контент в центр экрана для привлечения внимания пользователей.
  • Располагать кликабельные объекты в центре экрана. В верхней и нижней части добавлять дополнительные опции и кнопки, которые ведут к вторичным экранам.
Правило 3. Гарантировать точность попадания в цель
Точно попасть по кликабельному объекту можно, соблюдая три принципа:
1. Располагать кликабельные объекты в центре.
Интерфейс интерактивности курса
Чем ближе к центру интерактивный объект, тем выше вероятность попадания точно по нему. Источник: uxmatters
2. Выбирать оптимальный размер интерактивных объектов. Важно оставлять вокруг кликабельных объектов больше пространства, чтобы пользователи не задели ничего лишнего. Это подтверждает закон Фиттса.
Приведу пример. Мы создали мобильный курс, цель которого — научить работать с терминалом сбора данных. В курсе отобразили терминал, сделали его кнопки кликабельными, чтобы обеспечить моторное запоминание самых частых операций. Но возникла трудность — «экран внутри экрана» и мелкие кнопки. Для решения этой проблемы мы сделали кликабельными не только целевый кнопки, но и области вокруг них.
3. Использовать удобный формат интерактивных объектов.
В мобильных курсах некоторые кликабельные элементы должны выглядеть иначе: например, гиперссылки или «карусели». Возьмем гиперссылки: они удобны при использовании компьютерной мыши, но при touch-взаимодействии появляется риск задеть ссылку нечаянно. Поэтому в мобильных курсах лучше использовать вместо ссылок вкладки или кнопки.
Таким образом, при переносе интерактивного элемента из классического курса в мобильный важно проверить, насколько удобно с ним взаимодействовать в новом контексте.

Выводы

  • Располагать кликабельные объекты в центре экрана.
  • Оставлять достаточно пространства вокруг кликабельных объектов.
  • Менять вид активных объектов для улучшения пользовательского опыта.
Правило 4. Обеспечить быстрый вход и выход из обучения
При всех своих преимуществах мобильное обучение имеет ряд недостатков: оно более фрагментировано, пользователи склонны отвлекаться и переключаться на другие приложения или задачи. Средняя продолжительность одной мобильной сессии — 72 секунды. В сравнении, на компьютере длина подобной сессии — 150 секунд, то есть в в 2 раза дольше. Поэтому дизайн курса должен предусматривать тот факт, что пользователь будет часто прерываться. Легче всего решить эту задачу с помощью удобного содержания, которое сохраняет прогресс по курсу и позволяет быстро переходить к конкретному разделу.
Важность подробного содержания в мобильном курсе также подтверждается исследованиями, согласно которым частое взаимодействие с интернетом и смартфонами повлияло на наши процессы памяти: мы запоминаем меньше фактической информации, а больше ГДЕ ее можем найти.

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

В содержании приложения Swifty с помощью выпадающих списков можно легко перейти к конкретному материалу курса:

Выводы

  • Делать содержание мобильного курса детальным, давать доступ к конкретной информации.
  • Отображать в содержании прогресс по курсу, не заставлять пользователя запоминать, где он остановился.
Правило 5. Адаптировать механику упражнений
Почти все форматы упражнений, которые отлично смотрелись в классическом e-learning курсе требуют адаптации под мобильный формат. Основные сложности связаны с представлением обратной связи, выделением областей экрана, куда необходимо «переместить» объект, предотвращением случайных касаний активных кнопок.

Чтобы избежать трудностей в выборе формата упражнения, полезно завести свой список референсов с удачными механиками. Несколько примеров из моей библиотеки:

Выводы

  • Оценивать упражнения на предмет удобства пользования в мобильном формате.
  • Вести библиотеку с форматами мобильных упражнений.
Правило 6. Давать правильные подсказки
Знакомить пользователя с функционалом через подсказки на затемненном экране, или оверлее, — распространенный подход в классических e-learning курсах.
Для знакомства пользователя с интерфейсом классического курса удобно использовать оверлей
Для знакомства пользователя с интерфейсом классического курса удобно использовать оверлей
В мобильном курсе использовать оверлей — не лучшее решение, так как пользователи привыкли быстро пропускать этот экран из опыта взаимодействия с приложениями.

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

В приложении Memrise пользователь получает инструкции в тот момент, когда он впервые сталкивается с конкретным функционалом интерфейса:

Выводы

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