Дизайн и юзабилити
Опубликовано: 12.01.2018
Автор: Анна Лысак и Татьяна Головко Дата публикации: 16.05.2011
При проектировании сайта для мобильных устройств проблемы могут начаться уже на старте. Если ты изначально разрабатываешь сайт под какое-то конкретное мобильное устройство, то можешь сразу забыть о варианте, когда сайт соответствует дизайну прямо до пикселя. Просто в таком случае в разных типах мобильных устройств твой сайт будет выглядеть по-разному и разрабатывая проект дизайна ты должен постоянно помнить об этом факте.
Лучший совет, который я могу тебе дать касательно создания дизайна для мобильного веб-сайта: пусть он останется простым! Но, сделать его простым совсем не значит сделать его ужасным.
В идеале мобильный сайт выглядит как документ с вертикальной прокруткой. Привычный двух- или трех-колоночный дизайн не подходит для мобильных веб-страниц. В каждом мобильном веб-документе есть определенные зоны:
Грубая ошибка юзабилити. Дизайн сайтов для людей
шапка (header); главное меню; модуль под контент; навигация второго уровня; подвал (footer).
Эти зоны размещаются вертикально одна за другой. Альтернативный вариант организации страницы, когда ты можешь переместить раздел с основной навигацией в правую колонку, подходит только для устройств альбомного типа или для смартфонов.
Как повысить конверсии и юзабилити сайта? –Premium-дизайн для интернет-магазина
В high-end смартфонах основное меню может размещаться на верхней или нижней панели вкладок и блок контента может уменьшаться при помощи каких-нибудь дизайнерских ухищрений или в стиле «аккордеон».
При создании мобильной версии существующего сайта, ты должен понимать, что твоя задача именно «мобилизировать» его, а не просто урезать. Минимизация декстопного сайта значит, что тот же самый контент отображается на экране меньшего размера. А вот подгонка сайта под мобильные стандарты требует уже и понимания контекста, в котором будет использоваться сайт и предлагаемых услуг, и умение представить контент наиболее удобным для мобильного пользователя способом.