Пять столпов разработки мобильных интерфейсов - Блог ТехноФабрика

Пять столпов разработки мобильных интерфейсов

разработка мобильного интерфейса
Чтение займет: 3 мин.

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

Встаньте на место пользователя и делайте для него, не для себя

Структура и дизайн приложения должны быть ориентированы на потребителя. Об этом помнят, когда делают развивающие игры для девочек 5+, но забывают, разрабатывая интерфейсы мобильных приложений для взрослых: барышень 20+ с фокусом на карьеру, пенсионеров, осваивающих мобильную среду или увлеченных спортом мужчин.
Мобильные интерфейсы для пожилых

При этом, даже если приложение решает одну задачу, например, упростить образовательный процесс, для двух разных аудиторий оно должно выглядеть по-разному. Как пример — разработка мобильного интерфейса для студентов. Но одним 50+, а другим 17-20 лет. Смотрите на разницу:

  • Для предпенсионеров, переквалифицирующихся в свои 50+ в закройщиков и бухгалтеров, это будет предельно четкая навигация с минимум подуровней, выделенной функцией возврата, всплывающими подсказками, увеличенными кнопками, а также прогрессивным раскрытием контента.
  • Для студентов ВУЗов все самое важное должно отправляться пуш-уведомлениями и выводиться на первый экран. Еще лучше, если каждый элемент будет интегрирован с чем-то важным и полезным: дата в календаре с с коллоквиумом, коллоквиум — с темами для изучения, темы — с методичками и учебными материалами.

Только основное

Считается, что без напряжения человек может воспринимать не более 5 объектов за раз. Это на 100% совпадает с требованиями по разработке интерфейсов мобильного приложений. Сначала определяем, что у нас на данном экране главное и выделяем его. Потом дополняем чем-то нужным, еще чем-то полезным, плюс вишенка на торте. И все, хватит.

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

Порядок и логика

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

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

Максим Никитин, арт-директор ТехноФабрики

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

Разработка мобильного интерфейса  ситуативный контекст

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

В сложных ситуациях, когда счет идет на минуты, и от испуга мозг бестолково наворачивает круги по черепной коробке, усложненная навигация и куча опций могут стоить жизни. Именно с такого ракурса мы смотрели на приложение 112 МЧС Калмыкии, когда разрабатывали интерфейс. Решение получилось простым, но эффективным — крупная красная тревожная кнопка на видном месте. При нажатии сервис автоматически отправляет геопозицию и личные данные пользователя. Кнопка большая, в нее легко попасть даже толстым пальцем, даже пальцем артрозной или, не дай Бог, раненой руки. Только попасть и ничего больше не делать. В МЧС получат вызов, адрес, ФИО и даже физические особенности владельца (ограниченный слух, зрение и пр.).
Пример лаконичного мобильного интерфейса приложения

Человеческий язык

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

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

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *