Как спроектировать интерфейс мобильного приложения

Как вы приступаете к созданию интерфейса? Насколько сильно вы ориентируетесь на web-интерфейсы? Помните о 5 самых важных аспектах проектирования UI для мобильных приложений.

В этом материале - проверенные способы сделать удобный интерфейс... или найти готовый.

1. Правила взаимодействия с пользователем не отменяются

Вспомним 4 ключевых правила интерактивного дизайна:

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

2. Понимание пользователей

Есть пара тактик, позволяющих понять поведение пользователей и проектировать интерфейс с его учетом:

- Внедрение персонажей
Результатом небольшого брейнсторма становятся один или несколько персонажей, являющихся классическими представителями вашей аудитории. Этот метод очень подробно описывал А. Купер, и даже рекомендовал давать имя этим персонажам и придавать им личные характеристики, чтобы приблизить их к реальным людям. 
Соответственно, вы проектируете интерфейс только для них, а не для абстрактного "пользователя".

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

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

3. План потоков

Просто набросайте ход действий пользователя на бумаге - от начала пути до момента достижения цели. Это должно дать понимание количества и сложности шагов между первым и последним действием.

Пример: банковское приложение. Сценарий: настройка пополнения депозитного счета.

Автоматическое пополнение депозита
[Установить]
Выберите частоту пополнения
[Раз в месяц] [Два раза в месяц] [Раз в несколько недель] [Каждую неделю]
Один раз в месяц
[Выберите дату]
Подтвердить
Введите сумму
[Введите сумму]
[Установить автоматическое пополнение счета]

Эскизы и прототипы помогают изучить одну из наиболее важных составляющих хорошего приложения - содержание. Вот несколько инструментов, которые помогут сделать это online:

Mockflow
iPhone Mockup
Mockup Builder
Fluid UI

4. Ориентация на поведенческие шаблоны, привычки и неписанные стандарты. Учет движений

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

По этой причине навигационные кнопки, как правило, находятся в нижней части экрана:

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

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

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

Учет движений
Анатомический фактор - очень важный элемент проектирования. Учитывайте строение тела человека и статистику использования мобильных устройств при проектировании. Левый верхний угол подходит для размещения важной информации, в то время как нижняя граница экрана - для навигации.

Именно так выглядят схемы наиболее удобных для человека жестов.

94% времени пользователи держат смартфон в вертикальном положении.

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

И большинство пользователей используют смартфоны с диагональю экрана в пределах 4-5,5 дюймов.

5. Использование итеративного подхода

Говоря просто, лучше всего начинать с малого функционала, анализируя его важность, необходимость и качество исполнения, постепенно дополняя нововведениями. Это не только ускорит запуск проекта, но и сократит риски. А главное - позволит избежать перегруженности интерфейса.

Бонус: web-помощники для проектировщика интерфейсов приложений

1. Как подобрать хорошо сочетающиеся цвета для мобильного приложения? Используйте эти сервисы:
getuicolors.com
www.coleure.com
bootflat.github.io/color-picker.html

2. Изучите готовые примеры отличных интерфейсов, чтобы лучше понять необходимый уровень:
www.mobile-patterns.com/

3. Используйте готовые мокапы:
www.premiumpixels.com/tag-index/
uispace.net/all-psd
dbfreebies.co/mobile

Автор статьи Ольга Землякова
За статью спасибо: http://geekbrains.ru/posts/mob_interface

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Как спроектировать интерфейс мобильного приложения | | 2015-08-10 02:57:16 | | Статьи Web-мастеру | | Как спроектировать интерфейс мобильного приложения. В этом материале - проверенные способы сделать удобный интерфейс... или найти готовый. | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: