Интерфейсы мобильных приложений: дизайн и эргономика

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



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

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

1. Изображения улучшают понимание, но не являются самодостаточными для обозначения чего-либо. Представляйте изображения, используя свойства CSS бэкграунда или другие методы.
используйте тэги для обозначения типа содержимого: например, em для подчеркивания или abbr для обозначения аббревиатуры. Подробный список тэгов см. здесь: www.webdesignfromscratch.com/html-css/list-of-html-tags-with-semantic-usage
2. Пользуйтесь тэгом div только для выделения больших блоков материала, связанных друг с другом. Для выделения отдельных абзацев пользуйтесь специальными тэгами: ul для составления маркированных списков, span для выделения небольших блоков содержимого.
3. Помните о том, что семантическая паутина — это способ организации содержания, к стилю не имеющий никакого отношения.

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

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


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

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

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

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

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


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

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

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

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

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

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

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


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

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

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

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

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


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

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

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

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

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

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

7. Уделяйте внимание цветовой гамме

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


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

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

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

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

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


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

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

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

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

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

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

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


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

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

1. Для обозначения ссылок используйте не подчеркивание текста, а кнопки, объекты, иконки.
2. Создавайте внутренние поля достаточных размеров, чтобы пользователь мог четко различать элементы.
3. Увеличение высоты строк делает текст более удобным для чтения на экране мобильного устройства.
Метки:
ALEE Software 40,60
ПО для электронных архивов и библиотек, оцифровка
Поделиться публикацией
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама
Похожие публикации
Комментарии 12
  • 0
    Java-скриптов

    Может лучше «файлов javascript» или «javascript-сценариев»?
    • 0
      Спасибо, в текст статьи внесены поправки с учетом Ваших замечаний.
    • 0
      Разумно.
      Примеры чудесные.
      Я пока не встретил сайт, которым было бы приятно пользоваться именно со своего смартфона.
      • 0
        А с какими трудностями, на Ваш взгляд, приходится чаще всего сталкиваться при работе с мобильными версиями сайтов? Есть ли у Вас какие-то пожелания и идеи по улучшению юзабилити и дизайна сайтов для мобильных устройств?
        • 0
          1. Про оптимизацию сайтов с точки зрения их использования я дополнительно написал подробнее ниже
          2. Про попытку запихнуть в мобильную версию сайта функциональность полной версии Вы сами написали выше.
          3. Отдельно хочется сказать «спасибо» дизайнерам мобильных версий сайтов, которые до сих пор создают их «под стилус», благодаря чему приходится пытаться пальцем попадать в управляющие элементы разметом со спичечную головку. Яркий пример — мобильная версия сайта Яндекс-почты, где значки «предыдущее сообщение» и «Следующее сообщение» имеют микроскопический размер и размещены рядом друг с другом!
          4. Еще одна тема, про которую забывают творцы мобильных порталов — Мобильный интернет на мобильных устройствах есть только эпизодически! Повальный и тотальный 3G интернет 24/7/365 есть только в воспалённых мозгах у ОПСОСОВ. В реальности, даже в поездках по центру Москвы, я могу загрузить страницу, а затем выпасть из интернета на достаточно долгий период времени. Поэтому сайты, которые загрузившись единожды, периодически пытаются что-то подкачивать, а потом начинают вопить, когда подкачать не получилось, лично у меня вызывают тихую ненависть.

          Это так, только на вскидку.
      • 0
        Казалось бы, очевидные вещи в статье написаны, но как важно постоянно их держать в голове. Из примеров безумно понравились charlesluck.com и untapped.com.
        • 0
          Да, эти примеры с точки зрения эргономики весьма удачны. Мне еще bluemountain.ca нравится — емко, красиво, и система навигации неплохо продумана.
          • 0
            У меня на телефоне открылась такая же версия, что и на компе.
            Очень классно сделан stephencaver.com/ — попробуйте уменьшить окно браузера. Такой сайт отлично выглядит как на экране мобильника, на и на fullhd-мониторе.
        • +1
          Хорошие мысли в правильном направлении.
          Но я бы построил причинно-следственные звязи по-другому.
          Дело не в том, что на экране мобильного устройства размещается меньше информации, а в том, что мобильные устройства (а) используются по-другому, (б) люди при помощи мобильных устройств решают другие задачи. Это должно быть в фундаменте понимания «мобильного» сайта.
          Пытаться перенести функционал «большого» сайта на «мобильный» — это в корне неправильная идея, изначально обеспечивающая провал проекта (ну, если не провал, то уж точно, уничтожающая его успех). Прежде чем рассуждать о дизайне страниц, нужно решить следующие вопросы:
          1. Какие именно цели будут пытаться достичь пользователи, используя именно мобильную версию, а не полную? Очень часто цель использования мобильной версии продукта будет другой по сравнению с полнофункциональной. Например, в мобильном банкинге я с очень малой вероятностью буду выполнять ежемесячные платежи за коммунальные услуги — это я спокойно сделаю в какой-нибудь из вечеров с домашнего ноута, а вот информация о ближайших к моему текущему местоположению банкоматах, в которых в настоящий момент есть наличные доллары (ну или просто рубли) — эта информация дорого стоит! Но для «полной» версии сайта информация о наличии наличных ^_^ в банкоматах будет иметь чисто академический интерес.
          2. Второй вопрос — приоритезировать сценарии использования продукта (гм, думаю понятно, что сперва эти сценарии надо проработать). Чем пользователь будет пользоваться чаще, а чем — реже. После чего сфокусировать свои силы на реализации сценариев первого приоритета, а всё остальное оставить на потом. На пример, для клиентов соц.сетей наиболее часто будут использоваться сценарии «Что нового у друзей», «Чат с другом», «Обновление своего настроения» или «Публикация фотографии». Мало кто с мобильного устройства будет постить достаточно пространные публикации в ЖЖ, например.

          А вот когда определены цели использования мобильной версии сайта (сервиса), установлены решаемые при её помощи задачи, расписаны сценарии, тогда уже разбиение на экраны станет просто очевидным делом и, действительно, надо будет думать о дизайне и виде иконок, кнопочек, гиперссылочек и т.п.
          • 0
            ничего… порой тепло. Но конец — полная благоглупость.
            • 0
              Спасибо за интересные дополнения. Кстати, перенос большой версии сайта на мобильный является весьма и весьма распространенной ошибкой: так, в мобильных версиях можно встретить объемные тексты (а читать их с телефонного экрана весьма и весьма неудобно) или изображения в неудобных форматах. Поэтому представляемой в мобильной версии информации стоит уделять повышенное внимание. А что бы разобраться, какую информацию и в какой форме размещать на сайте, нужно сделать все, что Вы описали выше.
              Как Вы думаете, какими методами следует выявлять и анализировать пользовательские цели и приоритетные сценарии: анкетирование? Опрос? Какие-то особые методики юзабилити-тестирования для мобильных устройств? Буду очень признателен, если Вы поделитесь информацией по данным вопросам. И еще: можете ли Вы привести примеры удачных (с точки зрения эргономики и дизайна) русскоязычных мобильных сайтов?
            • 0
              Эталонной книгой по обсуждаемому сейчас вопросу я считаю книгу Алана Купера в соавторстве с Робертом Рейманом и Дэвидом Крониным «Об Интерфейсе». Очень объемный и познавательный труд. Судя по задаваемым Вами вопросам, начинать стоит именно с него, а потом уже все уточняющие и дополнительные книги. Но вашим коллегам, которые будут работать с вами плечом к плечу, я бы обязательно посоветовал прочитать предыдущую книгу Алана Купера — «Психбольница в руках пациентов». Это как Букварь, как Библия идеологии Проектирования Взаимодействия. А «Об Интерфейсе» — это уже более детализированное учение. В первых главах как раз и рассказано, как, зачем и каким образом собирать исходную информацию для проектирования.
              Забегая вперед могу сказать, что да, анкетирование и собеседования — это основные инструменты подготовки исходных данных. Экспертная оценка не всегда может быть применима для тех случаев, когда вы создаёте что-то совсем уж новое.
              К сожалению, совсем уж эталонных примеров мобильных сайтов пока мне встречать не приходилось. Пока я больше работаю с клиент-серверными решениями, каковыми, в частности, являются клиенты для мобильного банкинга и разных соц-сетей. Там вопросы стоят чуть по-другому, но их перечень точно такой же.

              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

              Самое читаемое