Интернет-магазин в мобильном устройстве — адаптируем дизайн
Хорошо сделанный дизайн сайта — это еще и тот, который адаптирован к мобильным устройствам. Особенно это касается страниц с перечнем товаров. И поэтому, создавая именно хороший дизайн, есть смысл подумать о грамотной верстке страниц с каталогом товаров. А именно — о таких ключевых ингредиентах как хедер, призыв к действию, фотографии товаров и удобной навигации для пальцев.
1. Адаптируйте хедер
Хедер — эта та часть сайта интернет-магазина, которая обычно включает в себя название бренда, основную навигацию (часто и по разделу с товарами), ссылку на корзину, поисковую форму и информацию о проходящих акциях и скидках и появляется на всех страницах.
И если на экране обычного компьютера или ноутбука он может быть экспансивным и отображать всю возможную информацию, на мобильных устройствах ему необходимо значительно «похудеть», чтобы занимать на экране порядка 15%, не больше.
Чтобы адаптировать хедер для мобильного устройства, способов существует достаточно много. Как вариант — «собрать» список ссылок (таких как «распродажа» «товары» и т.д в одну навигационную иконку и ее уже отображать. Так, собственно и поступила канадская Aritzia, спрятав в иконке навигации все «Sale», «Clothing» и «Brands».
2. Сделайте призыв к действию приоритетом
В массе своей сайты интернет-магазинов оформляют страницу с товаром следующим образом: слева на странице помещается фотография товара, а справа — его описание, информация о наличии товара на складе и, наконец, призыв к действию в виде кнопки «Добавить в корзину».
На экранах мобильных устройств такого простора для деятельности нет, поэтому призыв к действию необходимо расположить так, чтобы он был как можно более видимым. И в таком случае вполне можно слегка пренебречь непосредственно текстовым описанием. Хороший пример — интернет-магазин одежды Motel.
3. Измените изображения товаров
Естественно, призыв к действию и вся остальная информация о товаре, в том числе и графическая, должны быть сбалансированы. Независимо от того, полноценная ли это страница на экране компьютера или страница на экране мобильного устройства, в деле конверсии и продаж фото товаров играет весьма важную роль. И, если дело касается мобильного приложения, очень важно не уменьшать изображение товара до миниатюры, а адаптировать его так, чтобы у потенциального покупателя была возможность разглядеть детали, не прибегая к помощи увеличительного стекла. Пример хорошей адаптации — сайт мужской одежды Indochino.
Конечно, с помощью компьютерной мышки можно очень точно выбрать элемент на экране. Соответственно, на экране компьютера ссылки могут быть любого размера (в пределах разумного). Того же не скажешь об экране мобильного телефона или планшета. Поэтому и дизайн мобильного приложения обязательно должен быть адаптирован с учетом этой особенности.
5. Используйте только необходимую навигацию
Ввиду ограниченного пространства, на мобильных устройствах отображать стоит лишь ту навигацию, которая необходима в конкретный момент. Когда сайт открывается на экране компьютера, естественно там есть место, чтобы разместить все категории и любые ссылки. На экране мобильного устройства столько информации поместить физически не возможно. Поэтому внедрять необходимо только ту навигацию, которая имеет значение именно в настоящий момент.
Оригинал статьи здесь