UX/UI дизайн для мобильных сервисов

19 августа 2022
~8 мин

Вас могут заинтересовать услуги:

UI, UX дизайн
Подробнее
Разработка мобильных приложений
Подробнее
Разработка приложений под Android
Подробнее
Разработка под IOS
Подробнее
Разработка приложений на Xamarin
Подробнее
Разработка мобильных приложений для Android
Подробнее

>Введение

Хорошее мобильное приложение – это не только его полезные функции и доход, который оно приносит. Как часто вы удаляли  со своего смартфона вроде бы нужную вам программу, потому что вам надоедало “ковыряться” в ее интерфейсе, чтобы выполнить свою задачу? Чтобы это не случилось с вашей работой, нужно внимательно проанализировать пользовательский опыт (часто сокращаемый как UX – User Experience) – и трансформировать его в грамотный интерфейс (UI – User Interface).

Анализ аудитории

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

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

Поэтому, проектируя мобильное приложение, нужно позаботиться о том, насколько оно соответствует ожиданиям целевой аудитории (ЦА).

Чтобы вычислить свою ЦА, нужно ответить на пять вопросов, известных также как 5W Марка Шеррингтона.

Что? (What?) – товар или услуга, которую вы предлагаете пользователям;

Кто? (Who?) – тип потребителя по таким характеристикам, как пол, возраст, место жительства, социальный статус;

Почему? (Why?) – какую проблему решит ваш товар или услуга и почему пользователя они должны заинтересовать?

Когда? (When?) – в какое время пользователь будет совершать покупку? Это может сезон, праздники, время суток.

Где? (Where?) – где произойдет покупка – в оффлайн-магазине, в приложении, на сайте?

Однако ответы на эти вопросы не дают полного представления о потенциальном пользователе приложения. Выделите важные уникальные характеристики, которыми обладают будущие пользователи вашего приложения. Они любят собак? Интересуются редкими книгами? Слушают виниловые пластинки?

От этого можно отталкиваться дальше. Разделите ЦА на сегменты, которые можно описать сочетанием критериев – например, для приложения онлайн-кинотеатра это могут быть активные пользователи соцсетей, которые увлекаются кино, постоянно находятся в движении и любят смотреть видео по пути на работу и домой. Выделив несколько таких сегментов, можно переходить к “наращиванию мышц на кости” – созданию персоны.

Метод персон, разработанный Аланом Купером, позволяет сосредоточиться на конкретном пользователе продукта, а не безликой среднестатистической массе. С его помощью можно создать подробную модель взаимодействия пользователя с приложением и персонифицировать его. 

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

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

У персоны есть:

  • Драйв или мотив – то, чего она хочет;

  • Источник драйва – почему она этого хочет;

  • Контекст использования – как персона хочет осуществить свои желания?

  • Контекст персоны – позволяет представить ее как реального человека.

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

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

Принципы UX-дизайна

UX – user experience – пользовательский опыт. Таким образом, UX-дизайн это создание интерфейса, который будет понятен, предсказуем и удобен для пользователя. На протяжении многих лет дизайнеры, разработчики и психологи изучали человеческое взаимодействие и поведение, и на основе полученных данных разработали принципы UX-дизайна, на которые теперь ориентируются создатели мобильных приложений.

Можно выделить пять основных принципов.

Принцип масштаба

Чем важнее элемент дизайна, тем он крупнее.

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

Принцип визуальной иерархии

Важно направлять взгляд пользователя на элементы в порядке их важности.

Реализовать этот принцип можно за счет расположения элементов, их цветов, оттенков или размеров. Иерархия позволяет пользователю быстро найти важные элементы на странице – и быстрее достичь своей цели.

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

Баланс

Одна область экрана не отвлекает внимание пользователя от другой.

Если провести в центре экрана воображаемую ось, количество элементов по обе стороны экрана будет равномерным.

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

Принцип контраста

Контраст элементов позволяет пользователю понять, что разные элементы на экране выполняют разные функции.

Чаще всего этот принцип применяется в отношении цветов или размеров: так, в приложениях на iOS кнопка “Продолжить” будет серого или синего цвета, а “Отмена” – красного. 

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

Гештальт-принципы

Организованное целое воспринимается как большее, чем сумма его частей.

Это целая группа принципов, в которую входят:

  • Сходство;

  • Продолжение;

  • Замкнутость;

  • Близость;

  • Общая область;

  • Фигура/фон;

  • Симметрия;

  • Общая судьба (также известная, как общее поведение или предназначение).

Люди упрощают и организовывают сложные изображения, состоящие из множества элементов. Сгруппировав, казалось бы, обособленные объекты, мы видим полноценную фигуру.

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

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

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

UI-дизайн приложения

UI (user interface) – этап разработки пользовательского интерфейса, на котором создаются все элементы интерфейса: кнопки, меню, визуальный дизайн. Важно, чтобы UI и UX шли рука об руку, тогда пользователю будет проще взаимодействовать с приложением.

Для разработки интерфейса также выделяют несколько принципов.

  • Пользователь должен легко ориентироваться в интерфейсе. Для этого стоит использовать лаконичные элементы, а компоненты размещать в легкодоступных местах.

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

  • Используйте гайдлайны (инструкции и требования производителей). В них описаны и UX, и UI принципы для разных платформ – для Android есть Google Material Design System, а для iOS – Apple Human Interface Guideline.

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

Чтобы создать идеальный дизайн, важно помнить, что вы создаете приложение для людей – а они должны извлечь из него максимальную пользу. 

Как понять, удобен ли дизайн пользователю?

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

  • эффективность – достигает ли пользователь своих целей;

  • результативность – время, которое он тратит на их достижение;

  • удовлетворение пользовательским опытом и качеством сервиса.

До релиза приложения дизайн можно протестировать в интерактивном или кликабельном прототипе (например, в сервисе Figma). Также есть другие сервисы, которые демонстрируют процесс взаимодействия с приложением – Userlytics, UserTesting и т.д.

В идеале тестирование проводится на всем протяжении разработки приложения. Постоянная проверка работоспособности и оценка интерфейса на экранах с разным разрешением позволят найти и искоренить ошибки еще до релиза.

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

Заключение

Приложение можно создать и не опираясь на принципы UX/UI разработки. Однако миссию дизайнера интерфейсов можно считать выполненной только тогда, когда все элементы отчетливо воспринимаются пользователем и ведут к конечной цели приложения. 

 

Над статьей работали:

Никита Неминущий, ведущий инженер-программист

Михаил Королев, UX/UI дизайнер

Софья Комарова, редактор

 

Найдем решение вашей задачи

Заполнить бриф
Форматы: jpg, png, xsl, PDF, doc. Размер до 2 МБ
Нажимая кнопку «Отправить», Вы принимаете условия обеспечения конфиденциальности персональных данных.
Отправить