Мобильный веб-дизайн 10 советов по улучшению удобства использования

Ожидается, что мобильный веб-браузер станет следующей крупной интернет-платформой. Теперь легко просматривать сеть практически из любого места, используя мобильные устройства, которые умещаются в руке благодаря технологии. Из-за недостатка практической реализации в мобильном веб-дизайне трудно ориентироваться в различных популярных мобильных веб-сайтах. Проектирование для мобильных устройств должно быть более простым, чем его стандартный веб-сайт, и основано на задачах, чтобы выполнить работу, потому что пользователи ищут что-то конкретное и срочное.

Вы должны принять во внимание, как использовать минимум минимального доступного пространства для вашего основного контента и оставаться интересным для мобильных пользователей. Избегайте больших изображений и флеш-анимации, так как это замедлит ваш сайт. Помните, что функциональность важнее стиля для мобильных сайтов. Если ваш веб-сайт не закодирован и оформлен должным образом, он может выглядеть лучше на одном телефоне, хуже на другом или хуже, вообще не отображаться. Тестируйте, проверяйте и проверяйте совместимость со всеми мобильными устройствами.

Чтобы помочь вам в создании веб-сайта, доступного не только на настольных компьютерах или ноутбуках, но и на мобильных устройствах, вот несколько вещей, которые следует учитывать в мобильном веб-дизайне с примерами изображений вместе с прямой ссылкой на версию мобильного веб-сайта..

1. Определитесь с разрешением экрана

Мобильный мир содержит множество вариантов дизайна, от разных размеров экрана и разрешения до разнообразных форм. Стремитесь найти баланс между достаточной шириной экрана и размером аудитории. Узнайте характеристики современных мобильных устройств и прислушайтесь к их мнению. Что является сложным для мобильных разработчиков, так это для того, чтобы заставить его отображаться соответствующим образом на разных экранах без необходимости заново создавать страницы для разных платформ..

Вот список веб-разрешений, популярных на мобильных устройствах по состоянию на февраль 2011 года, представленный Uxbooth.com с опубликованной статьей., Соображения по поводу мобильного веб-дизайна (часть 2): размеры, Дэвид Леггетт. Автор объясняет несколько моментов о размерах дисплея и решениях для макета дизайна..

2. Разбейте веб-страницы на маленькие порции

Длинные фрагменты текста могут быть трудночитаемыми, поэтому размещение их на нескольких страницах ограничивает прокрутку в одном направлении. Избавьтесь от контента с низким приоритетом. Придерживайтесь одного столбца текста, который оборачивается, чтобы не было горизонтальной прокрутки.

В приведенном ниже примере мобильная версия веб-сайта CBS News показывает только основной раздел новостей и разбивает новостные статьи на небольшие части. В то время как Treehugger представляет свои последние статьи и последние твиты с некоторыми функциями полного веб-сайта. На обоих сайтах пользователь нажимает текстовую ссылку, чтобы просмотреть оставшуюся часть статьи..

CBS News

Дерево Hugger

3. Упростить дизайн

Простота приравнивается к удобству использования. Пусть они перемещаются по сайту без затруднений. Избегайте включения таблиц, фреймов и другого форматирования. Если вы используете заполнение, не забудьте сохранить его до абсолютного минимума, намного меньшего, чем вы бы использовали для обычной веб-страницы. По сравнению с настольными компьютерами, чем больше вы нажимаете ссылки на мобильных веб-сайтах, тем больше вы ждете из-за времени загрузки. При этом вам нужно сократить и упростить ваш сайт с балансом между контентом и навигацией.

В нашем примере на веб-сайте мобильной версии Best Buy перечислены только наиболее важные категории продуктов, сокращающие уровень иерархии контента. Хотя на домашней странице YouTube для мобильных устройств показаны только четыре последних видео.

Лучшая покупка

YouTube

4. Возможность просмотра полного сайта

Предоставьте ссылку для посетителей вашего мобильного устройства, чтобы переключиться обратно на ваш полный веб-сайт, чтобы пользователь мог найти и просмотреть другой контент и функции, доступные только для настольной версии сайта. Ваши зрители, несомненно, будут выполнять большую вертикальную прокрутку, поэтому помогите им с помощью ссылок «В начало», чтобы они могли перейти на верх страницы.

Например, у Ars Technica есть кнопка ссылки на стандартный веб-сайт, размещенная в заголовке. В то время как у Shangri-La есть их полная ссылка на сайт, размещенный в нижнем колонтитуле.

Арс Техника

Шангри-Ла

5. Навигация размещения

Познакомьтесь со своей аудиторией и узнайте, что они ищут. Узнайте, как они захотят ориентироваться на вашем сайте. Разместите свое навигационное меню под контентом, если целевые пользователи мобильных устройств хотят быстро увидеть изменение контента. Содержание и заголовок должны быть видны в первую очередь, чтобы не мешать просмотру содержимого страницы. Для пользователей, которые хотят сразу перейти к определенной категории, разместите навигацию вверху страницы. Ниже приведены различные примеры размещения навигации, используемые в мобильном веб-дизайне..

D & G

политикан

Ежедневный Гороскоп

6. Используйте текстовые ссылки

Ваш основной веб-сайт может использовать быстрые всплывающие меню, ролловеры или другие модные гаджеты, но мобильный браузер, вероятно, не будет. Имейте в виду, что динамические элементы страницы и графические ссылки потребляют ресурсы, поэтому выбирайте хорошо помеченные текстовые ссылки.

Список отдельно

Reddit

7. Сделайте различие между выбранной ссылкой

Перемещение курсора вниз прокручивает страницу и выделяет все ссылки сразу. Таким образом, важно четко сообщить пользователю, какой элемент находится в фокусе. Это можно сделать, изменив шрифт и цвет фона ссылок и кнопок или просто добавив несколько отступов вокруг ссылок, чтобы увеличить кликабельную область примерно с 44 до 44 пикселей. Geek Squad и Diesel использовали большие шрифты для интерактивного текста.

Geek Squad

дизель

8. Баланс ссылок

Каждая загрузка страницы требует времени и системных ресурсов, последние из которых не хватает, поэтому старайтесь не заставлять посетителя сайта копаться в множестве страниц, чтобы получить доступ к запрашиваемой информации. Добейтесь баланса между количеством ссылок на каждой странице и глубиной сайта.

Flickr

щебет

9. Уменьшить ввод текста пользователем

Трудно вводить текст в мобильных версиях веб-сайтов. Замените переключателями или списком вместо них, чтобы они могли легко выбирать то, что им нужно. Помните, что пользователи мобильных телефонов не имеют доступа к обычной клавиатуре и мыши. Чем короче URL, тем лучше, потому что вводить длинные URL однообразно.

Для нашего примера ниже FedEx использовал контрольный список и выпадающие меню. Пока Tumblr заставлял вас выбирать язык, используя выпадающее меню.

Fedex

Tumblr

10. Нет всплывающих окон или обновлений

Мобильные браузеры обычно не поддерживают всплывающие окна. И если бы они сделали, у них было бы очень узкое пространство, чтобы проникнуть в. Избегайте их использования, чтобы избежать непредсказуемых результатов. Кроме того, не нужно периодически обновлять страницы, чтобы не заполнять ограниченную память устройства. Позвольте пользователю обновить контент.

В двух словах

Проявите творческий подход и примените свой мобильный веб-дизайн по-новому. Сделайте ваш контент достаточно привлекательным и удобным для использования. Дайте своим пользователям то, что они хотят, когда они этого хотят. Пользователи не хотят копать глубже на сайт, чтобы найти то, что они ищут в мобильном Интернете.

У вас есть любимые мобильные сайты, которые действительно вдохновили вас? Можете поделиться некоторыми советами по мобильному веб-дизайну? Дайте нам знать!

Дальнейшее чтение

1. Отзывчивый веб-дизайн (Alistapart.com)
2. Сделайте свой сайт мобильным (Thinkvitamin.com)
3. W3C mobileOK Checker (W3.org)
4. iPhone Симулятор