Автор: Ольга Вахромеева, "Связной" (Ведущий UX дизайнер продукта)

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

Навигация

Меню. Горизонтальная прокрутка

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

Навигации по контенту

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

Горизонтальная прокрутка экранов

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

Горизонтальная прокрутка отдельных контентных блоков

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

Endless scroll

Бесконечным скроллингом можно снабдить как прокрутку отдельных контентных блоков по горизонтали, так и вертикальную прокрутку контента. Например, endless scroll хорошо ложится на просмотр контента из социальных сетей, когда поток должен быть бесконечным и человеку не обязательно понимать где он находится. Контент можно подгружать как автоматически (пример - facebook) или по нажатию на кнопку «еще» (пример - bookmate). Как говорится, не все йогурты одинаково полезны и бесконечная прокрутка не всегда уместна, допустим если есть каталог чего-либо, то скорее имеет смысл использовать стандартный пейджер для того, чтобы человек понимал на какой странице он видел ту или иную заинтересовавшую его позицию. Всегда нужно анализировать задачу и не использовать решений, которые кажутся привлекательными, но могут оказаться неуместными. При использовании endless scroll необходимо обеспечить возможность навигации по приложению из того места контента где находится пользователь, без необходимости прокрутки в начало. Это можно сделать за счет фиксированной шапки с необходимой навигацией.

Элементы интерфейса

Акцентирование на ключевых элементах интерфейса

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

Кликабельные сниппеты вместо ссылок

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

Четкая визуальная зональность

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

Подписи внутри зон, с которыми происходит взаимодействие

Для чего нужны подписи внутри зон, с которыми можно взаимодействовать? Они могут выступать в качестве подсказок или, к примеру, при ввода текста, сообщать какого именно рода текст нужно вводить. В десктопном приложении эту задачу можно решить при помощи всплывающих подсказок, которые появляются при наведении мыши на элемент интерфейса, в мобильном приложении задача несколько усложняется. Если мы будем выводить подсказку рядом, при нажатии пользователем на активную зону, придется резервировать место, которое в режиме экономии пространства хочется использовать более рационально. Еще один способ – предугадать вопрос пользователя и заранее отобразить всплывающую подсказку с возможностью закрытия (пример - remember the milk). Минусы этого решения – лишние действия пользователя (закрытие подсказки), затруднительный повторный вызов подсказки. В качестве альтернативы можно располагать подсказки и подписи непосредственно внутри зон, с которыми взаимодействует пользователь.

Работа с текстом

Отображение функционала на месте клавиатуры

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

Возможность открытого ввода пароля

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


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