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

За последние несколько лет iPhone популяризовал модель навигации посредством вкладок на мобильных устройствах.

Apple собрали все советы по ней и другую нужную данные в собственном документе «Human Interface Guidelines», но пара вопросов были не рассмотрены. Трудясь над пользовательскими интерфейсами в приложениях для iPhone, я смог преодолеть кое-какие появившиеся трудности и в данной статье желаю поделиться методами их преодоления.

Урок 1: Чудесное число 5

Вряд ли это станет новостью для разработчиков, каковые уже имели дело с пользовательскими интерфейсами в iPhone. В связи с тем, что ширина экрана iPhone образовывает 320 точек (1 точка равна одному либо двум пикселям, в зависимости от типа экрана), Apple спроектировали панель вкладок так, что она может содержать не больше пяти элементов. Это сделано чтобы иконки и текст были прекрасно видны и читаемы.

Что происходит, в то время, когда вкладок делается больше пяти? Возможно воспользоваться встроенными средствами для кнопки «Ещё» и сортировки вкладок в нужном порядке. Но я советую избегать данной самой вкладки «Ещё». Отчего же?

— Во первых, вы теряете одну вкладку.

— Вы взваливаете на пользователей обязанность запоминать то, что скрыто за вкладкой «Ещё». Это делается особенно тяжёлой задачей, в то время, когда количество вкладок делается значительно больше пяти.
— Изучения продемонстрировали, что большая часть пользователей не знают о функционале вкладки «Ещё» и просто не применяют её.

Но, если вы трудитесь, к примеру, с категориями и каталогами (как это сделано в приложении iPod), вкладка «Ещё» может оказаться нужной, поскольку пользователь может упорядочить вкладки так, как ему комфортно.

Но помните, что сортировка вкладок — удел продвинутых пользователей.

Урок 2: Спросите пользователя

Как возможно раньше, нужно на этапе проектирования, совершите тестирование на «живых» пользователях.

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

Урок 3: Израсходуйте время на текст и иконки

Пара вещей, о которых стоит не забывать в ходе текстов и подготовки иконок:

— Удостоверьтесь, что иконки и текст совершенно верно обрисовывают то, что скрыто под ними.

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

К примеру, не следует, создавая три вкладки, ставить им метки «Мои книги», «Мои диски» и «Мои журналы». Пускай это будут легко «Книги», «Диски» и «Журналы».
— Делайте иконки ясными и однозначными. Пользователь не должен гадать: «Весьма интересно, настройки — это иконка с гаечным ключом либо иконка с шестерёнкой?»
— В случае если вам сложно придумать иконку, отражающую прячущийся за ней функционал, попытайтесь добиться ясности размещением элементов на экране. Дайте пользователям визуальные сигналы.

Ещё раз напомню: задавайте вопросы пользователей (тех, кому вы предлагаете ваше приложение для тестирования):
— Как ты думаешь, что делает иконка с изображением лица?
— Что ты ожидаешь заметить на вкладке, которая именуется «Finder»?
— Имеет ли для тебя суть то, что иконка с лицом подписана как «Finder»?

Слева: NUUS 24 применяет через чур похожие иконки для вкладок
В центре: Spotify применяет иконку с домом на вкладке «What’s new» («Что нового»)

Справа: Vimeo применяет повторяющиеся слова: «My Videos» и «My Stuff»

Урок 4: Никакого автоматического переключения вкладок

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

Я допускаю, что смогут появиться ситуации, единственным разрешением которых думается как раз такое переключение. Но приложите все усилия, дабы избежать этого. Из-за чего?

— Любое неожиданное воздействие ставит пользователя в тупик.

К примеру, в то время, когда пользователь нажимает на ячейку в таблице, в 9 случаях из 10 он ожидает заметить: а) переключение на следующий вид (с анимацией справа налево) либо б) выезжающее снизу модальное окно.
— Нарушается привычное всем поведение программ на iPhone. В случае если пользователь не заметил, что вкладка изменилась, то он сходу начнёт искать кнопку «Назад» на верхней панели.

Урок 5: Не делайте вкладки дешёвыми ограниченному кругу пользователей

Не ограничивайте доступ к вкладкам (к примеру, не делайте их дешёвыми лишь зарегистрированным пользователям), если вы не даёте пользователям несложной метод взять данный доступ.

Hemnet (популярное шведское приложение для поиска недвижимости) ограничивает доступ к двум центральным вкладкам. Открыть их смогут лишь зарегистрированные пользователи. Первая информирует, что для доступа нужно пройти регистрацию, наряду с этим не даёт информации о том, как это сделать.

Урок 6: Переделывайте, но бережно

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

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

— Это продолжительно. Время от времени кроме того весьма долго. Обычно для разработчиков переделка панели вкладок (того элемента, что несёт ответственность за всю навигацию в приложения) свидетельствует написание достаточно сложного собственного кода с нуля.

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

— Кое-какие приложения применяют личные шаблоны дизайна с многослойными вкладками (к примеру, приложение Twitter). Если вы решили применять что-то подобное, не забывайте о том, что множество пользователей будет поставлено в тупик подобными новшествами.

В приложении Twitter на iPhone многослойные вкладки довольно часто ставят в тупик из-за неожиданного поведения кнопки «Назад». Нажатие на ячейку с текстом «651 favorites» перебрасывает пользователя на вид с избранным. Но так как это уже вторая вкладка, кнопка «Назад» на верхней панели поднимает нас на уровень вверх в данной многослойной вкладке, и пользователь попадает не на тот экран, с которого он пришёл.

Результат

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

Эти уроки — ни за что не правила. Но я надеюсь, что они окажут помощь вам в реализации ваших задач. [Significantpixels]