Самая важная часть сайта — оформление, ведь именно его видят пользователи в первую очередь. На основе первого впечатления они формируют своё мнение о вашей компании. Чтобы создать нужный имидж и сделать удобный сайт для вашего бизнеса, руководствуйтесь нашими советами по дизайну мобильных сайтов.
1. Чем проще, тем лучше
Дизайн мобильного сайта должен быть понятным с первого взгляда, поэтому следуйте общепринятой структуре: сначала — главные элементы, затем — второстепенные. Не перегружайте макет сложной цветовой схемой или громоздкой структурой, ведь ничего не должно отвлекать от контента.
2. Функциональность превыше всего
Вовсе не обязательно делать из мобильного сайта произведение искусства — достаточно сделать его функциональным. Он должен помогать пользователям найти нужную информацию, забронировать билет на мероприятие, записаться к врачу или решить другую важную задачу.
Представьте себя на месте клиентов: для чего они заходят на ваш сайт с мобильных устройств? Ответ на этот вопрос поможет правильно организовать элементы мобильной версии сайта.
3. Оптимальный размер элементов
Лучший дизайн мобильного сайта — удобный дизайн. Замените текстовые гиперссылки на большие кнопки, откажитесь от мелких деталей и добавьте в макет «воздуха». Пользователь должен различать контент с расстояния вытянутой руки и с первого раза попадать пальцем по нужным разделам.
4. Контент в одну колонку
Экраны мобильных устройств слишком малы, чтобы делить их на несколько колонок. Лучше сделать длинную страницу и расположить элементы друг за другом, чем столкнуться с горизонтальной прокруткой и неудобной навигацией.
5. «Лёгкая» графика
Быстрая загрузка лежит в основе дизайна сайта для мобильных устройств. Страницы должны открываться в считанные секунды, иначе пользователь уйдёт к конкурентам. Самый верный способ ускорить загрузку — оптимизировать изображения. Уменьшайте разрешение и размер файлов, если качество не пострадает.
6. Отсутствие сложной анимации
Сложная анимация на мобильном сайте ни к чему. Она красиво смотрится на десктопе, а на маленьком экране может не запуститься вовсе. К тому же, существенно увеличит загрузку страницы. Откажитесь от всех анимированных элементов, которые не имеют функционального назначения — на мобильном устройстве их лучше заменить старой доброй статикой.
7. Удобный ввод текста
Если на вашем сайте есть хотя бы одно поле для ввода данных, позаботьтесь о том, чтобы им было удобно пользоваться. Настройте вызов клавиатуры и продумайте варианты автозаполнения. Например, окно для выбора времени и даты лучше оформить вот так:
8. Интуитивность
Мобильные пользователи привыкли, что меню скрывается за иконкой «гамбургер» или вызывается свайпом вправо. Используйте в дизайне мобильного сайта жесты, привычные для своей целевой аудитории, — это сэкономит место на экране и улучшит юзабилити.
9. Наличие обратной связи
Иногда пользователям необходима помощь менеджера компании, поэтому предусмотрите не только раздел «Вопросы и ответы», но и наличие обратной связи. Её не заменяет онлайн-консультант — не всем клиентам удобно набирать текст на мобильной клавиатуре.
Используйте возможности смартфонов: разместите номер телефона компании и добавьте вызов по клику. Это сэкономит время клиентов и поможет оперативно решить их проблемы.
10. Единый фирменный стиль
Основной сайт, социальные сети, email-рассылки — всё это точки контакта с пользователем. В этот же ряд встаёт мобильная версия сайта, поэтому она должна содержать элементы фирменного стиля компании. К ним относятся, например, корпоративные цвета и логотип. Используйте их в макете, чтобы сайт стал узнаваемым и отвечал общей стилистике фирмы.
Современный дизайн сайта основывается на запросах аудитории: ресурс должен быть не столько красивым, сколько продуманным и функциональным. Именно такие готовые решения мы делаем для онлайн-конструктора MoAction. Вам не придётся соблюдать все правила дизайна мобильного сайта — мы уже об этом позаботились, осталось загрузить ваш контент. Попробуйте!
