16 августа 2018
6 правил мобильного дизайна
Во время работы над e-learning проектами у педагогического дизайнера иногда возникает задача «переработать классический десктопный курс под мобильную версию». Задача на первый взгляд несложная — материалы собраны, структура примерно понятна, упражнения готовы. Уменьшай себе экран и сокращай текст. Но не все так просто. Правила размещения и восприятия информации на экране компьютера и мобильного отличаются. Об этом и поговорим.
Правило 1. Учесть «мобильную хватку»
Если вы читаете эту статью с экрана мобильного, обратите внимание, как вы держите свой телефон. По данным исследования дизайнера мобильных приложений Стивена Хубера 49% пользователей пользуются одним пальцем при обращении с телефоном. Стивен приводит изображение, на котором указано, какие области экрана легче достать большим пальцем.
Зеленый цвет – легкая область для взаимодействия; желтая область требует растяжки; а красная вынуждает изменить положение устройства в руке. Источник: uxmatters
Стивен Хубер провел данное исследование в 2013 году, а в 2017 году опубликовал серию статей, в которых оспорил свои же выводы. Стивен утверждает, что невозможно говорить об одном «главном» способе работы с мобильным: люди держат смартфон по-разному в зависимости от девайса, потребностей и ситуации.
Шесть распространенных моделей мобильной "хватки". Источник: uxmatters
При этом способ взаимодействия со смартфоном во многом зависит от типа выполняемой задачи, что показано на диаграмме ниже:
Пользователи меняют хватку в зависимости от выполняемой задачи: длинный или короткий скролл, набор текста, чекбокс, клики по ссылке. Источник: uxmatters
При проектировании курса для мобильного устройства важно проверить, насколько интерфейс будет соответствовать задачам пользователя. Например, если предполагается частый набор текста, учтена ли возможность держать смартфон двумя руками?
Выводы
- Учитывать при создании контента и интерфейса, что пользователи держат телефон разными способами.
- Адаптировать интерфейс под наиболее распространенные задачи курса.
Правило 2. Все важное – в центр
Согласно данным тепловых карт при чтении текста с экрана компьютера и мобильного используются разные паттерны.
О других паттернах чтения с экрана — Gutenberg Diagram и Z-pattern, можно прочитать в блоге дизайнера Стивена Бредли.
Даже при наличии скролла пользователь предпочитает сначала перенести контент на середину экрана и после этого приступить к чтению информации. То же правило действует для интерактивных объектов. Например, при выборе необходимого контакта из адресной книги или чтении новостной ленты.
Даже при наличии скролла пользователь предпочитает сначала перенести контент на середину экрана и после этого приступить к чтению информации. То же правило действует для интерактивных объектов. Например, при выборе необходимого контакта из адресной книги или чтении новостной ленты.
Данные тепловой карты: при чтении новостной ленты в Twitter пользователи кликают по центру экрана.
Источник: uxmatters
Источник: uxmatters
Интерактивные вкладки и кнопки расположены в центре экрана для удобства пользователей. Примеры из курсов LEVEL:
Выводы
- Помещать важный контент в центр экрана для привлечения внимания пользователей.
- Располагать кликабельные объекты в центре экрана. В верхней и нижней части добавлять дополнительные опции и кнопки, которые ведут к вторичным экранам.
Правило 3. Гарантировать точность попадания в цель
Точно попасть по кликабельному объекту можно, соблюдая три принципа:
1. Располагать кликабельные объекты в центре.
Чем ближе к центру интерактивный объект, тем выше вероятность попадания точно по нему. Источник: uxmatters
2. Выбирать оптимальный размер интерактивных объектов. Важно оставлять вокруг кликабельных объектов больше пространства, чтобы пользователи не задели ничего лишнего. Это подтверждает закон Фиттса.
Приведу пример. Мы создали мобильный курс, цель которого — научить работать с терминалом сбора данных. В курсе отобразили терминал, сделали его кнопки кликабельными, чтобы обеспечить моторное запоминание самых частых операций:
При разработке курса возникла трудность — «экран внутри экрана» и мелкие кнопки. Для решения этой проблемы мы сделали кликабельными не только целевый кнопки, но и области вокруг них
3. Использовать удобный формат интерактивных объектов.
В мобильных курсах некоторые кликабельные элементы должны выглядеть иначе: например, гиперссылки или «карусели». Возьмем гиперссылки: они удобны при использовании компьютерной мыши, но при touch-взаимодействии появляется риск задеть ссылку нечаянно. Поэтому в мобильных курсах лучше использовать вместо ссылок вкладки или кнопки.
В мобильных курсах некоторые кликабельные элементы должны выглядеть иначе: например, гиперссылки или «карусели». Возьмем гиперссылки: они удобны при использовании компьютерной мыши, но при touch-взаимодействии появляется риск задеть ссылку нечаянно. Поэтому в мобильных курсах лучше использовать вместо ссылок вкладки или кнопки.
Таким образом, при переносе интерактивного элемента из классического курса в мобильный важно проверить, насколько удобно с ним взаимодействовать в новом контексте.
Выводы
- Располагать кликабельные объекты в центре экрана.
- Оставлять достаточно пространства вокруг кликабельных объектов.
- Менять вид активных объектов для улучшения пользовательского опыта.
Правило 4. Обеспечить быстрый вход и выход из обучения
При всех своих преимуществах мобильное обучение имеет ряд недостатков: оно более фрагментировано, пользователи склонны отвлекаться и переключаться на другие приложения или задачи. Средняя продолжительность одной мобильной сессии — 72 секунды. В сравнении, на компьютере длина подобной сессии — 150 секунд, то есть в в 2 раза дольше. Поэтому дизайн курса должен предусматривать тот факт, что пользователь будет часто прерываться. Легче всего решить эту задачу с помощью удобного содержания, которое сохраняет прогресс по курсу и позволяет быстро переходить к конкретному разделу.
Важность подробного содержания в мобильном курсе также подтверждается исследованиями, согласно которым частое взаимодействие с интернетом и смартфонами повлияло на наши процессы памяти: мы запоминаем меньше фактической информации, а больше ГДЕ ее можем найти.
Чтобы глубже изучить эту гипотезу, был проведен эксперимент, в котором участникам надо было рассортировать информацию в различные папки — факты, данные, имена, предметы. Результаты эксперимента показали, что участники лучше запомнили не саму информацию, а ту папку, в которой она была сохранена. Однако следует учитывать, что данный вывод зависит от сложности предлагаемой информации. Чем она сложнее, тем проще запомнить только название папки.
В содержании приложения Swifty с помощью выпадающих списков можно легко перейти к конкретному материалу курса:
Чтобы глубже изучить эту гипотезу, был проведен эксперимент, в котором участникам надо было рассортировать информацию в различные папки — факты, данные, имена, предметы. Результаты эксперимента показали, что участники лучше запомнили не саму информацию, а ту папку, в которой она была сохранена. Однако следует учитывать, что данный вывод зависит от сложности предлагаемой информации. Чем она сложнее, тем проще запомнить только название папки.
В содержании приложения Swifty с помощью выпадающих списков можно легко перейти к конкретному материалу курса:
Выводы
- Делать содержание мобильного курса детальным, давать доступ к конкретной информации.
- Отображать в содержании прогресс по курсу, не заставлять пользователя запоминать, где он остановился.
Подпишитесь на нашу рассылку и получайте свежие новости два раза в месяц
Если вы нажали на кнопку, вы согласны с политикой конфиденциальности.
Правило 5. Адаптировать механику упражнений
Почти все форматы упражнений, которые отлично смотрелись в классическом e-learning курсе требуют адаптации под мобильный формат. Основные сложности связаны с представлением обратной связи, выделением областей экрана, куда необходимо «переместить» объект, предотвращением случайных касаний активных кнопок.
Чтобы избежать трудностей в выборе формата упражнения, полезно завести свой список референсов с удачными механиками. Несколько примеров из моей библиотеки:
Чтобы избежать трудностей в выборе формата упражнения, полезно завести свой список референсов с удачными механиками. Несколько примеров из моей библиотеки:
Выводы
- Оценивать упражнения на предмет удобства пользования в мобильном формате.
- Вести библиотеку с форматами мобильных упражнений.
Правило 6. Давать правильные подсказки
Знакомить пользователя с функционалом через подсказки на затемненном экране, или оверлее, — распространенный подход в классических e-learning курсах.
В мобильном курсе использовать оверлей — не лучшее решение, так как пользователи привыкли быстро пропускать этот экран из опыта взаимодействия с приложениями.
Лучше придумать другой сценарий знакомства с интерфейсом, который будет более заметным для пользователей. В одном из наших курсов мы добавили персонажа, который перечислял полезный функционал интерфейса.
Лучше придумать другой сценарий знакомства с интерфейсом, который будет более заметным для пользователей. В одном из наших курсов мы добавили персонажа, который перечислял полезный функционал интерфейса.
Знакомство с курсом через персонажа
Другой способ — встроить знакомство с курсом в процесс обучения, как это бывает в некоторых приложениях по изучению иностранных языков. Например, Memrise.
В приложении Memrise пользователь получает инструкции в тот момент, когда он впервые сталкивается с конкретным функционалом интерфейса:
В приложении Memrise пользователь получает инструкции в тот момент, когда он впервые сталкивается с конкретным функционалом интерфейса:
Выводы
- Отказаться от знакомства с курсом на затемненном экране.
- Встраивать обучение по пользованию интерфейсом в структуру курса.
Рассмотренные правила показывают, что переработка классического e-learning курса под мобильную версию выходит за пределы подхода «уменьшай экран, сокращай текст». При создании мобильного курса педагогический дизайнер адаптирует структуру и выбирает форматы подачи информации под новый контекст, облегчая тем самым процесс обучения для целевой аудитории.
Автор: Инесса Абрамян
Поделиться