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

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

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

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

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

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

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

• чтобы обозначить ссылку лучше использовать спецкнопку, которую оформите соответствующим образом (оттенки, рельеф);
• доступ к подробностям лучше обозначить с помощью стрелки;
• используйте те иконки, которые знакомы большинству пользователей, такой себе классический вариант.

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

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

Шестой совет, который дает Патрик Кокс, касается использования элементов содержимого сайта в навигации мобильного приложения. В частности, речь идет о том, что нажатие пальца на какую-либо область экрана – уже может быть способом выполнения какого-либо действия. Например, не нужно использовать функцию прокрутки, поскольку ее может выполнять и сам сенсорный экран.

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

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

Девятый принцип – наличие обратной связи. Речь идет даже не о том, чтобы пользователь мог написать вам, а о том, чтобы он мог видеть, что происходит с приложением в данный момент. Создавайте диалоговые окна, показывайте ход загрузки страницы, сообщайте о том, что пользователь забыл заполнить какое-либо поле. Для полноценного диалога лучше всего использовать JavaScript (JQuery или Scriptaculous).

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