7 способов адаптировать контент для создания лучшего мобильного UX

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

Но с чего начать? Каким образом контент должен быть адаптирован для обеспечения бесперебойной работы на мобильных устройствах? Все начинается с размышлений о том, как пользователи взаимодействуют с меньшими экранами, и как это влияет на то, что (и сколько!) они захотят прочитать.

1. Одна мысль на экране

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

Одной мысли на экране достаточно. Чуть больше, и вы рискуете потерять пользователя.

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

2. Расставьте приоритеты в навигации

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

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

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

3. Думайте, как поисковая система

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

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

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

4. Сделайте текст более крупным

Меньшие экраны не должны означать меньший текст. Вы должны увеличить размеры точек, чтобы сделать контент более удобным для чтения и переваривания. Взгляните на копию своего body и выберите размер, который позволяет вмещать от 30 до 40 символов в строке. (Это примерно половина того, что рекомендуется для экранов рабочего стола.)

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

5. Напишите хорошую микрокопию

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

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

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

6. Уберите ненужные эффекты

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

Уберите эффекты наведения. Они также излишне.

7. Адаптация

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

Иногда адаптация контента - это просто перестановка деталей.

- Боксы, которые были разбросаны на рабочем столе, могут располагаться вертикально на мобильном устройстве.

- Фотографии обрезаются более квадратно или вертикально, основываясь на доминирующей ориентации мобильного использования (по вертикали).

- Текст редактируется и максимально сжимается.

- Навигация перепрофилируется и размещается в другом месте.

- Calls to action делаются более крупными, почти размером с экран.

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

Вывод

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

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