Проектирование и дизайн приложений: детали и хитрости

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

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

Для создания навигационной схемы необходимы:

1. Портрет пользователя;
2. Задачи пользователя;
3. Контекст использования;
4. Сценарий использования;

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

В качестве… (описание представителя ЦА, его роль в приложении), он получает..(действия в приложении) для… (цели его действий в приложении).

Для создания навигационной карты все эти сценарии нужно упростить и представить в виде последовательных действии:

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

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

1. Обязан быть
2. Должен быть
3. Может быть
4. Мог бы быть

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

Главная: Политика, Экономика, Общество, Культура, Меню, Поиск, Обновить, Избранное, Настройки, Обсудить.

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

Структурно, навигационная схема состоит из блоков, соединенных между собою горизонтальными и вертикальными связями. Горизонтально связанные блоки подразумевают контент одного уровня, навигация по которому не подразумевает открытие нового окна. Вертикальные блоки подразумевают переход пользователя на другой уровень контента приложения. Подобная иерархическая модель навигации предполагает последовательное предоставление информации пользователям. Отличный пример такой навигации — новостные приложения. В них основной акцент сделан на разделы и главные новости дня. Для того, чтобы ознакомится с повесткой дня прошлой недели, нужно перейти по определенной вкладке. А прочтение новости подразумевает еще один переход. В такой иерархии и нужно распределить блоки внутри навигационной карты.

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

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

1. Лучший функционал — интегрированный. Взаимодействие с контентом происходит напрямую, без переходов в разделы или открытия полных текстов по кнопкам далее и читать.
2. Доступ к контекстным командам осуществляется только в контексте. До перехода на нужный раздел или в нужное меню пользователю не нужен функционал этой части приложения. Поэтому, доступ к функционалу — только из раздела.
3. В приложениях есть меню. И об этом следует помнить. Туда можно добавить функции, доступные для каждого раздела приложения: Поиск, Избранное, О компании и т.д.
4. Приоритезация. Или выделение идеологически важных элементов на фоне остального контента. Ведь помощь в решении пользовательских проблем является главной задачей разработчиков.

Пару слов о дизайне

Дизайн всегда был и остается дискуссионной темой прежде всего благодаря неоднозначным показателям подсчета его эффективности. И хоть в России более 78% мобильной аудитории обращают внимание на цвета в повседневной жизни, яркость и красочность в мобильном приложении важны всего для 6% аудитории. По мнению компании Apple, идеальный дизайн мобильного приложения строится на трех китах:

1. Контент. Интерфейс призван помогать пользователям, направлять их, а не отвлекать.
2. Четкость. Легкий для восприятия текст, простые иконки, функциональный дизайн.
3. Глубина. Визуальное разделение информации.

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

Нужно помнить:

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