Дизайн мобильного сайта: 10 правил

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

1. Чем проще, тем лучше

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

2. Функциональность превыше всего

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

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

3. Оптимальный размер элементов

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

4. Контент в одну колонку

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

5. «Лёгкая» графика

Быстрая загрузка лежит в основе дизайна сайта для мобильных устройств. Страницы должны открываться в считанные секунды, иначе пользователь уйдёт к конкурентам. Самый верный способ ускорить загрузку — оптимизировать изображения. Уменьшайте разрешение и размер файлов, если качество не пострадает.

6. Отсутствие сложной анимации

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

7. Удобный ввод текста

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

 

8. Интуитивность

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

9. Наличие обратной связи

Иногда пользователям необходима помощь менеджера компании, поэтому предусмотрите не только раздел «Вопросы и ответы», но и наличие обратной связи. Её не заменяет онлайн-консультант — не всем клиентам удобно набирать текст на мобильной клавиатуре.

Используйте возможности смартфонов: разместите номер телефона компании и добавьте вызов по клику. Это сэкономит время клиентов и поможет оперативно решить их проблемы.

10. Единый фирменный стиль

Основной сайт, социальные сети, email-рассылки — всё это точки контакта с пользователем. В этот же ряд встаёт мобильная версия сайта, поэтому она должна содержать элементы фирменного стиля компании. К ним относятся, например, корпоративные цвета и логотип. Используйте их в макете, чтобы сайт стал узнаваемым и отвечал общей стилистике фирмы.

Современный дизайн сайта основывается на запросах аудитории: ресурс должен быть не столько красивым, сколько продуманным и функциональным. Именно такие готовые решения мы делаем для онлайн-конструктора MoAction. Вам не придётся соблюдать все правила дизайна мобильного сайта — мы уже об этом позаботились, осталось загрузить ваш контент. Попробуйте!