Дизайн и юзабилити

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

Лучший совет, который я могу тебе дать касательно создания дизайна для мобильного веб-сайта: пусть он останется простым! Но, сделать его простым совсем не значит сделать его ужасным.

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

• шапка (header);
• главное меню;
• модуль под контент;
• навигация второго уровня;
• подвал (footer).

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

В high-end смартфонах основное меню может размещаться на верхней или нижней панели вкладок и блок контента может уменьшаться при помощи каких-нибудь дизайнерских ухищрений или в стиле «аккордеон».

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

Разрабатывая Rich Internet Application или веб-приложение для мобильных с использованием Ajax, обязательно помести в пользовательский интерфейс кнопку фоновой работы, чтобы иметь возможность предупредить пользователя о происходящем фоновом соединении. Кнопка «offline» может быть полезна пользователю, если у него нет возможности все время находится в зоне действия WiFi или же он в роуминге и не хочет какое-то время получать обновления.

Вот некоторые лучшие рекомендации, которые могут существенно помочь при разработке:

• избегай горизонтальной прокрутки;
• при наличии декстопного сайта старайтесь избегать визуальных противоречий с ним;
• уменьшай объем текстовых блоков;
• используй четкие шрифты на каждом экране, не полагайтесь на разрешение экрана;
• используй фоновые цвета для выделения отдельных секций;
• старайся ограничивать главное меню тремя-четырьмя пунктами;
• пусть на странице будет всего не больше 10-ти ссылок;
• для low- и mid-end устройств не вставляй больше одной ссылки в строчку;
• используй всю доступную ширину страницы (но не колонки) для ссылок, списков, тектовых полей и всех элементов, которые могут получить фокус;
• размести внизу страницы ссылку «Наверх»;
• размести в подвале ссылку «Назад» (просто в некоторых браузерах не обеспечена постоянная доступность такой кнопки);
• ссылки на наиболее используемые разделы сайта размещай вверху;
• большие списки группируй по категориям и старайся чтобы в одном списке было не более 10 наименований (например, выбор страны нужно начинать с выбора континента);
• минимизируй количество текста, который необходимо вводить пользователю;
• сохраняй историю использования сайта пользователем и его настройки для увеличения удобства при будущих посещениях;
• разбивай большие фрагменты текста на отдельные страницы (размер страницы зависит от возможностей браузера;
• проверь восприятие цветовой палитры твоего сайта в разных ситуациях: посещая сайт, пользователь может находится в месте с плохим освещением, в общественном транспорте, на пляже с ярким солнцем или в офисе с лампами дневного света;
• предлагай отдельные стили для сенсорных устройств;
• подумай о резиновом дизайне (для лучшей подстройки под мобильное устройство);
• используй списки, но только не таблицы;
• не используй тексты в виде картинок;
• для тач- и курсор-навигации используй ссылку на полную ширину строки, активироваться эта ссылка должна при нажатии пользователем на любой пиксель строки, в которой она содержится (только следи, чтобы в строке не было больше одной ссылки);
• для смартфонов используй цветные изображения высокого качества (об оптимизации поговорим позже);
• курсор-навигация: сделай кликабельные зоны среднего размера для курсора, который за раз перемещается на 5-10 пикселей, не заставляй пользователя перемещать курсор на большие расстояния, располагай кликабильные элементы рядом друг с другом;
• если ты хочешь предоставить ярлык (shortcut), виджет или оффлайновую версию сайта — размести предложение загрузить вместе с ссылкой в самом верху страницы (обычно используется желтый фон), не показывай это предложение после многократных просмотров или только после того, как пользователь загрузил себе это (подобные вопросы рассмотрим позже).

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

В случае с low- и mid-end устройствами рекомендую вернуться к табличной верстке, вместо резиновой на div-ах (прямо как в первые годы в Вебе). Но размещать более одной ссылки или элемента в одной строке в проектах для таких устройств не советую.

Я не хочу это покупать!

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

В сообщении у меня спрашивали разрешения снять плату за игру и предлагалось две ссылки: ДА и НЕТ. И ссылки были на одной линии, друг за другом сразу. Фокус, конечно же, был на ссылке ДА. Что я сделал? На автомате я нажал правую клавишу, чтобы переместить фокус на ссылку НЕТ.

Что произошло? Правая клавиша была в моем браузере функцией «перейти по ссылке»! Переместить фокус я могу используя только клавиши ВВЕРХ-ВНИЗ, независимо от того, как расположены ссылки на экране. Получается, из-за проблем с юзабилити я должен был платить за контент, покупать который совершенно не хотел.

Вот почему ты должен проверять свой веб-сайт на как можно большем количестве разных реальных устройств и поэтому я советую тебе использовать только одну ссылку в одной строке для low- и mid-end устройств.

Если ты хочешь подробнее изучить тему мобильного веб-дизайна, то можешь ознакомиться с книгой Брайана Флинга «Мобильный дизайн и разработка» (Mobile Design and Development, by Brian Fling. Эта книга также издательства O’Reilly. Еще есть замечательный ресурс Design4Mobile, на котором есть перечень примеров дизайнов для мобильных с пояснениями.

Среди представленных на Design4Mobile разделов, рекомендую ознакомится со следующими:

• Screen Design Basics — собраны десятки советов по разметке.
• Screen Design Patterns — перечень наиболее распространенных решений для создания кнопок, разметки списков, fisheye lists, масштабируемых списков, оформления результатов поиска, «хлебных крошек», каруселей, текстовых полей.
• Application Navigation — как реализовать навигационные списки, функцию автозаполнения, кнопку «Назад» и другое.

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

Glyphish — бесплатная галерея стилей для iPhone, где ты можешь найти примеры иконок, списков, вкладок и кнопок. На рисунке 3.1 показаны доступные варианты дизайна.

Рис. 3.1. Некоторые из иконок для сенсорных устройств, доступных на Glyphish.

В некоторых low- и mid-end устройствах есть CSS баги, например как баг 100% ширины, который приводит к появлению минимального и раздражающего горизонтального скроллинга. Ты должен протестировать свой сайт и внести необходимые изменения, если подобные вещи происходят.

Примеры дизайна для тач-устройств

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

Touch Gesture Reference Guide — отличный ресурс, на котором Люк Врублевски (Luke Wroblewski) сделал краткий обзор большинства основных сенсорных команд, как их использовать, визуально отображение каждого из них и все это задокументировал, а также сделал краткий обзор популярных платформ, которые их поддерживают. Загрузить руководство можно по ссылке http://www.mobilexweb.com/go/touchguide.

Вот некоторые полезные рекомендации для дизайна под сенсорные устройства:

• когда пользователь касается экрана, то часть его скрывается, подумай (если это важно), что именно будет выпадать из поля зрения и рассмотри варианты при касании и правой и левой рукой;
• обеспечь наличие разумного по размеру свободного пространства (от 20-и пикселей) между кликабильными элементами;
• для часто используемых кнопок и ссылок обеспечь большую кликабильную область (не менее 40-а пикселей в ширину и высоту);
• для тех кнопок, что используются менее часто, можно активную область сделать меньше (минимум 25 пикселей);
• обеспечь быструю реакцию на касание;
• продумай вариант работы прокрутки;
• если на экране будут поля ввода информации, то необходимые ярлыки размещай сверху или снизу формы ввода, а не справа и слева, а в сенсорных устройствах с виртуальной клавиатурой поле ввода, как правило, увеличивается, если пользователь наводит фокус на него и в таком случае все, что находится справа и слева просто выпадает из поля зрения;

Недавно Nokia представила Flowella — бесплатный инструмент для создания прототипов дизайна мобильного приложения с помощью макетов и определения связей между экранами. Flowella может экспортировать проект во Flash Lite или в виджеты WRT для Symbian и в целом этот инструментарий идеален для тестирования дизайна приложения (скачать Flowella можно на http://www.mobilexweb.com/go/flowella).

• на совместимых устройствах используй тач-навигацию при помощи пальца;
• вместо разбиения на странице делай бесконечные списки, в бесконечном списке (как на рисунке 3.2) есть пункт «Еще», по которому пользователь может нажать и добавить в список еще какое-то количество элементов (это делается при помощи Ajax или других технологий). В целях сохранения текущего уровня производительности нужно ограничить количество одновременно показываемых страниц. При добавлении следующих страниц лучше всего удалять первую из DOM и когда количество страниц достигает числа n (например, 5-и), то первым пунктом сделать «Предыдущая» (так будет гарантия, что одновременно будет показываться не больше n страниц);
• используй функцию автоматического очищения текстового поля для наиболее часто используемых (нужно просто сделать иконку Х справа от поля ввода, при нажатии на которую текстовое поле очистится);
• применяй шаблон долгого нажатия (long-press design pattern), также известный как «Нажать и удерживать» (touch and hold) для вызова контекстного меню (это значит, что если пользователь нажимает на какую-то область более 2 секунд, появляется раскрывающееся контекстное меню);
• кнопки навигации лучше располагать в нижней части экрана (или с правой, если речь идет о альбомном режиме), потому как она удобней и ближе к пальцу пользователя;
• анализируй нативные приложения в устройстве (возможно, почерпнешь какие-нибудь идеи для юзабилити).

Рис. 3.2. Бесконечный список предлагает возможность загружать несколько элементов в одном списке с помощью Ajax.

Panorama UI

Панорамный пользовательский интерфейс (рисунок 3.3) — прекрасный пример дизайна для сенсорных смартфонов. Дает возможность создавать большие интерфейсы (как правило, горизонтально ориентированные), а экран представить как «окно», через которое видна какая-то часть панорамы.

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

Отличный дизайнерский прием (используемый, например, в Windows Phone 7) — последние 5-10 пикселей с правой стороны экрана использовать для показа фрагмента левого края следующего экрана и прямо с обрезанными элементами экрана. Такой прием дает пользователю понять, что более подробная информация, меню или какие-то нужные действия доступны с правой стороны экрана и если его перетащить, то откроется скрытая информация.

Помни, что с панорамным UI, мы имеем дело с отображением части полного интерфейса.

Рис. 3.3. Экран Windows Phone 7. Модель панорамного дизайна пользовательского интерфейса

Официальное руководство по пользовательскому интерфейсу

Официальные рекомендации касательно пользовательского интерфейса от производителей мобильных устройств можно найти на http://www.mobilexweb.com/go/uiguides. Этот ресурс тоже один из источников вдохновения для дизайнеров под мобильные устройства. Здесь собраны основные принципы построения, примеры, советы и описание самых распространенных ошибок. Многие советы и примеры строятся на нативных приложениях, но мы вполне можем применять и в своих разработках.

Если ты используешь функцию продолжительного нажатия «touch and hold», то должен помнить, что у браузеров есть еще и свои собственные действия в ответ на применение этой функции к таким кликабельным элементам как ссылки, изображения или текст, который можно скопировать и вставить. В браузерах с движком WebKit можно отключить выделение текста (в текстовых элементах) при помощи webkit-user-select:none и потом сделать свое собственное меню.

Наиболее важными руководствами для разработчика являются:

• iPhone Human Interface Guidelines;
• UI Guidelines for BlackBerry Smartphones;
• Motorola’s Best Practices for UI;
• Forum Nokia UI Visual Guidelines;
• Sony Ericsson’s UI Style Guidelines;
• UI Guidelines for Windows Mobile;
• UI Guidelines for Android.

На рисунке 3.4 показан фрагмент iPhone Human Interface Guidelines.

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

Куда дальше

• следующая — Глава 4. Настройка среды. Настройка среды разработки
• предыдущая — Архитектура веб-сайта
• содержание