Здесь собраны самые ценные и дельные рекомендации из недавно опубликованного труда компании Mobify “50 Ways to Please Your Customers: A Guide to Mobile Web Design Best Practices” («50 способов удовлетворения ваших клиентов: лучшие решения для мобильного веба»). Для справки: Mobify – один из ведущих сервисов, позволяющих быстро и просто создать мобильную версию практически любого сайта.
Ссылка на полную версию
Не запирайте пользователя в тесной комнате мобильной версии. Покажите ему возможный выход – ссылку на полную версию сайта. Значительная часть посетителей наверняка поблагодарит вас за такую щедрость, ведь далеко не все хотят тратить время и силы на то, чтобы разобраться с выбранными вами оригинальными интерфейсными решениями, которыми изобилует мобильная версия интернет-магазина.
Заголовки – короче короткого
Заголовок, занимающий более двух строк, угнетает остальной контент страницы, сдвигая его под разворот. Чем короче заголовки – названия товарных категорий, страниц и т.п. – тем лучше. Для многих продуктов и групп можно использовать понятные сокращения или принятые в разговорной речи названия.
Размещение пояснения прямо в поле
Многие формы не требуют развернутых пояснений – логин, пароль, поиск, адрес. Краткие подсказки, в одно-два слова, можно вставлять непосредственно в само поле, используя ставший стандартным для таких целей светло-серый шрифт.
Размещение пояснений над полем
Если поместить подсказку в само поле невозможно, размещайте ее над ним. При таком подходе пользователь не потеряет пояснение из виду при приближении (zoom in) самого поля. Если подсказка находится под полем, в результате «зума» она может оказаться вне видимой области.
Все, что всплывает…
Попапы и прочие всплывающие и накладывающиеся блоки выглядит в мобильной версии несуразно и могут не работать вовсе. А вставка видео с YouTube или схемы проезда с карт Google – натуральный саботаж, так как во многих случаях нажатие на такой элемент приведет к вызову нативного приложения этих сервисов. Результат – пользователь покидает ваш интернет-магазин. Ищите альтернативные варианты.
Использование иконок из шрифтовых наборов
Красивые спрайтовые иконки – замечательная вещь, но в мобильном вебе их применение далеко не всегда является лучшим решением. Разные возможности и разрешения экранов устройств усугубляют эту проблему. Хорошая альтернатива – иконки из шрифтовых наборов, например Font Awesome; glyphish; iconsweets;symbolset.
Обоснованный выбор элементов
Разрабатывая мобильную версию, не пытайтесь просто взять свой интернет-магазин целиком и засунуть его в одну колонку. Подумайте, какие элементы являются наиважнейшими для ваших посетителей, изучите статистику, проведите опросы. Организуйте контент наиболее понятным для пользователя образом, избавьтесь от «лишнего веса», перемещайте оставшиеся блоки так, как считаете нужным, а при необходимости – добавляйте контент и функционал, которые отсутствуют в полной версии.
Размер шрифта – 14 px
Думаете, это перебор? Вовсе нет. Использовать меньший размер (12 px, никак не меньше) можно только в пояснениях к формам, которые содержат более двух-трех слов.
Толстые пальцы и трясущиеся руки
Ловкость рук присуща далеко не всем вашим посетителям. Каждый владелец устройства с сенсорным экраном хотя бы раз промахивался мимо объекта, на который он хотел нажать. Ну а у кого-то просто пальцы толстые, и они могут одним махом попасть сразу в несколько рядом стоящих ссылок. Учитывайте это, и делайте все кнопки, на которые можно нажать, крупными (рекомендованный размер – 40 на 40 px). И не собирайте их в одну кучу, оставляйте вокруг каждого важного объекта по 10 px пустого пространства.
Использование API
Создавая мобильную версию сайта, мы нередко забываем, что использовать ее будут большей частью на смартфонах, которые, помимо всего прочего, позволяют звонить, определять местоположение, делать снимки и т.д. Если у вас есть оригинальные идеи, которые подразумевают использование таких возможностей – смело реализуйте их.