О том, что ваш сайт должен адекватно отображаться на мобильных устройствах, не сказал лишь ленивый. Да вот только адекватно — это как? Сегодня мы рассмотрим особенности юзабилити мобильных сайтов и дадим рекомендации по улучшению их удобства для посетителей. Итак, 5 принципов юзабилити для мобильных устройств:
1 Минимализм
В связи с ограниченностью области отображения информации (достаточно сравнить монитор с экраном мобильного), тот контент, который вы привыкли размещать на сайтах, должен быть сведен к минимуму.
Если вы просто уменьшите страничку сайта до масштаба экрана телефона, результата это не даст. Мобильные пользователи сканируют текст и картинки, и если за что-то внимание зацепится — лишь тогда перейдут к подробностям. Как же они смогут зацепиться, если все буквы и значки настолько мелкие, что тяжело их рассмотреть?
N.B. Уменьшите количество контента и увеличьте его масштаб. То есть, вместо 5-7 фотографий разместите одну. Вместо 1500 символов текста разместите 150. Вообще, идеальная посадочная страница для мобильного пользователя — заголовок с заманчивым предложением, акцент на выгоды, яркая картинка и кнопка призыва к действию.
2 В столбик
Не заставляйте пользователя использовать прокрутку чтобы дочитать предложение, то и дело уменьшать и увеличивать текст. Используйте верстку в формате столбца. Естественно, не забывайте про первый пункт — увеличьте масштаб контента, сократив при это его объем.
N.B. Избавьтесь от всей лишней информации по бокам (баннера, дополнительные блоки). Навигационное меню также можно спрятать, сделав его вызывающимся при клике на определенную иконку, например.
3 Акцент только на одном
Чтобы не рассеивать внимание пользователя, делайте в рамках видимой области сайта только один акцент. К примеру, для интернет-магазинов на странице товара придется отказаться от дополнительных кнопок (поделиться в соц. сетях, посмотреть похожие и т.п ), оставив только один призыв к действию — положить к корзину.
N.B. Определите для каждой страницы один ключевой акцент, одно важное сообщение, поставьте одну задачу, которую они должны решить. Здесь как никогда актуальна старая добрая пословица о том о трех зайцах.
4 Ведите пользователя
Пошаговая инструкция о том, что и когда нужно сделать пользователю — для mobile очень важна и полезна. Ведите «за руку» клиента к покупке, к оформлению заявки, к регистрации — визуализируйте алгоритм действий, превратив его в интерактивное путешествие с подсказками и возможностью перескочить ненужный шаг.
5 Помните про пальчики
Утверждение о том, что в интернете ничего нельзя потрогать, постепенно утрачивает свой смысл. Пользуясь мобильными, мы, можно сказать, касаемся товаров, которые нам предлагает интернет-магазин, или даже услуг (к примеру, можно потрогать фотографии Тайланда в туристическом агентстве). Поэтому важно не просто разместить на сайте красивые фотографии и кнопки, а сделать их такими, чтобы их захотелось потрогать. А еще лучше, дать возможность покрутить товар во все стороны, всего лишь одним касанием пальца.
N.B. Помните о том, что большинство пользователей, как показывают исследования, «юзают» мобильный одним большим пальцем. А это значит, что только 1/3 экрана хорошо «тапабельна». Сместите информацию в эту область и эффективность вашего сайта вырастет.
И напоследок, список важных мелочей:
- шрифты должны быть крупными
- кнопки должны быть размером «под пальчик»
- используйте простые формы (2-3 поля)
- адекватный размер полей для заполнения (не требующий масштабирования)
- быстрая скорость загурзки
- возможность совершить звонок «в один клик»
Все эти принципы важно учитывать как в адаптивном веб-дизайне, так и в разработке мобильного приложения.
