5 правил для интерфейса приложений

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

Итак. Главное правило, которое мы усвоили — не нужно взрывать мозг пользователя!
А теперь подробнее.
Мы расположили 5 правил по убыванию значимости, то есть работает всегда предыдущее правило, если следующее ему противоречит в конкретных проектах.

1. Думайте как пользователь

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

В каждом проекте «главное» определяется индивидуально, но важно исходить из конкретных жизненных задач пользователя, который существует не только в вашей голове, но и где-то на этой планете. Дальше нужно записать эту задачу и повесить у всей команды на виду, чтобы никогда не забывать. Это курс вашего корабля. Отклонения от курса чреваты потерей ориентиров и, как следствие, нарушением концепции приложения.

2. Ничего лишнего

По последним исследованиям человек может без стресса воспринимать только 3-5 объектов сразу. Видели светофор? Очень удобная штука, которая помогает нам безопасно передвигаться по городу. А теперь представьте, что в светофоре не 3 цвета, а десять, каждый из которых что-то означает. Или представьте, что вы ведете автомобиль, и перед вами вырастает десять дорожных знаков. Скорее всего, ваш мозг закипит. При создании интерфейса приложения это правило тоже действует, правда, с поправками. Нужно сокращать количество элементов до минимума пока это возможно, но не в ущерб задачам, которые решает пользователь.

3. Контекст использования тоже важен

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

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

Или приложение с кнопкой «SOS». Логично, что у пользователя не будет столько времени, сколько есть у человека, который вечерком решил повыбирать книжку в интернет-магазине.

4. Все взаимосвязанные элементы логически соединены

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

5. Иерархия по важности

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

Дизайнеры и разработчики могут креативить, но мозг среднестатистического пользователя не откажется от привычки. И если действительность не совпадает с привычным представлением о ней — мозг взрывается. Однако не стоит путать «важное» с «главным». Важное, это то, к чему пользователь обращается, чтобы начать решать задачу — к примеру, меню.
Наименее важное располагается в противоположном углу. Таким образом, степень важности элементов нисходит с верхнего левого угла к нижнему правому.
Это не единственный способ выделить важное. В каждом проекте мы разрабатываем индивидуальный UX-дизайн. Однако необходимо помнить, что важное все-таки выделять стоит, чтобы помочь пользователю решить задачу быстро. И не взорвать ему мозг.

Резюмируем:

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