Патрик Кокс (Patrick Cox)

От переводчика

Продажи смартфонов и планшетов растут с каждым днем, и это уже говорит о необходимости повышенного внимания к интерфейсам для мобильных устройств. На каких принципах должен основываться дизайн приложений и сайтов для мобильных девайсов? Как удовлетворить все запросы пользователей, которые становятся все более и более требовательными?
По имеющимся прогнозам, в течение 2011 года объем продаж планшетов существенно возрастет, а объем продаж смартфонов существенно превысит объем продаж телефонов традиционного образца. Как показывает практика, пользователи предпочитают приложения для веб-навигации, уже установленные на телефоне, специальному программному обеспечению, которое нужно специально покупать или скачивать. Что это означает? В первую очередь — то, что в настоящее время перед веб-разработчиками и дизайнерами стоит задача учета особенностей мобильных устройств. Задача, следует заметить, не самая простая (см. статью известного специалиста в области веб-дизайна Якоба Нильсена «Мобильный контент: вдвойне сложнее» – http://www.useit.com/alertbox/mobile-content-comprehension.html, русский перевод- http://itopti.livejournal.com/2578.html, а также множество примеров дизайна на сайте http://www.mobileawesomeness.com/).
Специалист по юзабилити Патрик Кокс сформулировал 10 принципов, на которых должна основываться разработка мобильных приложений и сайтов http://www.ergonomie-interface.com/mobile-tactile-nomade/conception-site-web-mobile/). Приглашаем читателей к обсуждению; будем рады, если кто-то сможет поделиться собственным опытом проектирования интерфейсов для мобильных приложений.

Используйте семантическую разметку
Мы знаем, что нужно всегда стараться отделить содержание от формы. Но при создании сайтов для мобильных устройств нужно двигаться еще дальше. Семантическая разметка обеспечивает лучшую сегментацию между формой и содержанием. Она обеспечивает лучшую доступность, позволяет уменьшить размеры файлов (и для этих файлов требуется минимум кода) и дает пользователю возможность лучше разобраться в содержимом веб-страницы.
Кроме того, если мобильный браузер не загружает изображений,файлов JavaScript или CSS-стилей, сайт всегда будет отображаться должным образом и адекватно восприниматься пользователями.

Практические рекомендации:

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

2. Используйте тэги для обозначения типа содержимого: например, em для подчеркивания или abbr для обозначения аббревиатуры. Подробный список тэгов см. здесь: http://www.webdesignfromscratch.com/html-css/list-of-html-tags-with-semantic-usage/

3. Пользуйтесь тэгом div только для выделения больших блоков материала, связанных друг с другом. Для выделения отдельных абзацев пользуйтесь специальными тэгами: ul для составления маркированных списков, span для выделения небольших блоков содержимого.

4. Помните о том, что семантическая паутина – это способ организации содержания, к стилю не имеющий никакого отношения.

Четко формулируйте задачу

Мобильная версия сайта должна быть предназначена для решения ограниченного числа задач. При ее создании необходимо особенно четко формулировать цели. Если место для сайта уменьшается на 80%, то и от 80% намеченных планов также придется отказаться. Функциональность мобильной версии сайта существенно ограничена по причине небольшого размера экрана. Например, в версию сайта для большого экрана можно запросто включить такие функции, как реклама новых продуктов компании, просмотре личных сообщений, заполнение небольших контактных форм, индикация последних сообщений в Твиттере и т. п. Но для мобильной версии такой вариант не годится: разместить все это на экране смартфона вряд ли получится. Уменьшение размера элементов содержимого — тоже не выход: не будет же пользователь просматривать сайт через увеличительное стекло!
Выход один: ограничиться наиболее необходимыми функциями, чтобы для них хватило места на экране.

Пример: сжатое и ясное представление информации на сайте (мобильная версия портала http://bluemountain.ca/ ).

Практические рекомендации:

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

Избегайте перезаполнения!

Не стремитесь заполнять все пустые места на экране. У всех пользователей разная скорость соединения, поэтому сайт не должен «весить» слишком много. Избыточное количество изображений, текста, кода и т. п. не только ухудшает восприятие сайта пользователями, но еще и существенно увеличивает время его загрузки. Для пользователей мобильного Интернета важна оперативность: они не сидят перед компьютером, и обращение к тому или иному сайту необходимо им для решения срочных задач.

Пример: упрощенная и хорошо организованная горизонтальная навигация (http://m.journeys.com/) .

Практические рекомендации:

• Сведите количество изображений в мобильной версии сайта к самому необходимому минимуму.
• Не включайте в мобильную версию сайта текстов большого объема.
• «Облегчите» код посредством использования семантической разметки, а также сведения к минимуму числа CSS-стилей и вложенных файлов.

Не используйте выделенного состояния!

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

Практические рекомендации:

• Для обозначения ссылок используйте кнопки, а не подчеркивание текста.
• Обозначайте доступ к более подробному содержимому при помощи стрелок.
• В оформлении кнопок пользуйтесь оттенением и рельефными линиями.
• Используйте знакомые и понятные иконки. Избегайте иконок непривычного вида для обозначения типов действий («добавить», «изменить», «назад», «вперед» и т. п.)

Пример: удачный вариант дизайна навигационных кнопок.

Пишите крупным шрифтом, просто и понятно

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

Практические рекомендации:

• Мобильная версия сайта не должна включать никакой лишней информации.
• Отбирайте тексты небольшого объема, написанные простым и понятным языком.
• Не пользуйтесь функцией прокрутки без особой необходимости.
• Включите в дизайн сайта кнопку «далее», нажав на которую пользователь сможет перейти к экрану с более подробным вариантом текста.

Пример: подача информации в виде кратких и емких текстовых блоков

Используйте элементы содержимого сайта в навигации

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

Практические рекомендации:

• Пользуйтесь списками меню для перехода к подменю или другим экранам.
• Проектируйте сайт как галерею экранов; применяйте творческий подход к организации прогулки посетителей по этой виртуальной галерее.

Пример: организация мобильной версии сайта как виртуальной галереи (сайт американской рок-группу Neon Trees).

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

Пример: минимум цветов и контрастность — залог удачного дизайна (http://world.g-shock.com/).

Практические рекомендации:

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

В общем стиле сайта главное — простота

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

Пример: форма для входа на мобильную версию сайта (социальная сеть для любителей пива Untapped – http://untappd.com/?mobile=true)

Обеспечьте возможность обратной связи

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

Практические рекомендации:

• При нажатии на определенную область экрана вид сайта должен изменяться (это служит подтверждением того, что нажатие действительно имело место).
• Используйте Java-скрипты (типа Jquery или Scriptaculous) для организации полноценного диалога с пользователем.
• Показывайте ход загрузки страницы с помощью анимации.

Сохраняйте пустые места

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

Пример — меню, удобное для навигации при помощи устройств с сенсорным экраном (мобильная версия портала http://www.charlesluck.com/ ).

Практические рекомендации:

• Для обозначения ссылок используйте не подчеркивание текста, а кнопки, объекты, иконки.
• Создавайте внутренние поля достаточных размеров, чтобы пользователь мог четко различать элементы.
• Увеличение высоты строк делает текст более удобным для чтения на экране мобильного устройства.

Первоисточник