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

В этом материале поделимся советами по проектированию дизайна приложений и разберём распространённые ошибки.

Развитие приложений

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

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

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

Давайте проанализируем типичные ошибки, которые допускают специалисты без опыта.

Пять распространённых ошибок

Перед подробным разборов недочётов расшифруем одно важное понятие. UX или UXD (user experience design) — дизайн пользовательского опыта. Если говорить простым языком, это тонкая грань между графикой и аналитикой. Хороший проектировщик создает UI после анализа продукта. Он определяет, какие эмоции вызывает услуга или сервис и на базе этих ощущений готовит структуру приложения.

1. Разработка без анализа потребностей ЦА

Чаще всего заказчики приходят к дизайнеру и дают техническое задание на разработку макета приложения. Лишь некоторые говорят о том, какие задачи оно должно решать. В большинстве случаев клиенты ждут креатива и «полёта» творческой мысли.

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

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

2. Негативный первый опыт

После установки программы пользователь запускает её и начинается «магия» первого знакомства с интерфейсом. Если дизайнер подошёл к решению задачи правильно, положительный опыт закрепится в памяти представителя целевой аудитории, и он вернётся к использованию приложения через время.

Первый опыт — очень важный компонент, который влияет на дальнейшую судьбу проекта. Некоторые проектировщики делают ставку на красоту и запоминаемость. Фокусируйтесь на удобстве и решении задач. Если на этом этапе начались проблемы, шанс вернуть доверие крайне низкий. 90% людей удалят программу и начнут искать аналоги в Google Play или App Store.

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

3. Отсутствие подсказок

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

Визуальная коммуникация — сильный компонент, который позволяет быстро установить связь. Обязательно добавьте в настройки возможность отключить подсказки. Некоторые люди любят изучать виртуальный мир самостоятельно.

Оформляйте тултипы в едином стиле, чтобы они выглядели как часть экосистемы. Не делайте текст подсказок чересчур длинным, максимум 2-3 предложения. Всплывающий элемент должен появляться после клика. Чаще всего это иконка со знаком вопроса возле пункта меню, списка или блока.

4. Отсутствие баланса

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

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

5. Плохая обратная связь

Дизайнеры без опыта часто не понимают, что юзерам очень нужна обратная связь. И речь идёт не о форме, которую надо отправить разработчику. Каждый элемент внутри макета должен отзываться на действие и транслировать определённую мысль.

Обратная связь помогает:

1. Создать удобную навигацию.
2. Уведомить о совершении определённого действия. К примеру, после заполнения формы появляется подсказка.
3. Сократить ожидание. Прогресс-бар отображает индикацию загрузки. Человек понимает, что скоро контент прогрузится.
4. Усилить положительное впечатление.

Советы по дизайну

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

Решайте задачи

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

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

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

Используйте микровзаимодействия

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

Несколько примеров:

1. Анимация после клика по иконке.
2. Навигация при скролле во время просмотра контента.
3. Индикация событий. Изменение количества непрочитанных писем или оповещений.
4. Визуализация ввода данных. В формы оплаты часто добавляют картинку с пластиковой картой. После заполнения полей цифры автоматически появляются на изображение.
5. Призыв к действию (CTA).

Микровзаимодействия работают потому, что они дают обратную связь и чёткое понимание, что действие выполнено или находится в процессе решения.

Упростите структуру

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

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

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

Внедрите знакомые элементы

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

Примеры:

1. Лента новостей.
2. Начало работы.
3. Результаты поиска.

Делайте минималистичные формы

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

Советы:

1. Чем меньше полей, тем лучше. В идеале 2-3 инпута.
2. Используйте маски ввода. Обычно они применяются для поля с телефонов. Если программное обеспечение адаптировано под разные страны, добавьте автоподстановку национальных кодов после выбора региона.
3. Внедрите динамическую проверку данных до отправки. Больше всего раздражает, когда заполнил длинную форму, нажал на кнопку, а на экране появилась ошибка и поля очистились. Приходится начинать процедуру заново.
4. Сделайте подсказки для полей.
5. Используйте простые капчи. Google Captcha иногда плохо срабатывает и вызывает негативные эмоции.

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

Соблюдайте последовательность

Постепенное знакомство с UI — хороший способ установить связь. Юзер проходит по заданному маршруту и получает решение своих проблем. Согласованность увеличивает конверсию и обеспечивает положительный опыт.

Как проявляется последовательность:

1. Пошаговая регистрация. Вписали email, ввели код подтверждения с почты и получили доступ к личному кабинету.
2. Визуальная гармония. Типографика, кнопки и блоки образуют единое целое.
3. Единство стиля. Программы под Android и iOS должны быть максимально похожими, чтобы при переходе с одной системы на другую не было дискомфорта.

Учитывайте потребности людей

По данным статистики, почти 5% населения планеты не различают цвета, а 4% плохо видят. При разработке UI дизайнеры редко учитывают особенности этих групп людей.

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

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

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

Контент — основа любого продукта. Он должен быть полезным, продуманным и структурированным. На дисплее смартфона с трудом помещается несколько абзацев. Информацию часто разбивают на несколько виджетов для удобного восприятия.

Советы:

1. Учитывайте особенности горизонтального и вертикального отображения.
2. Подбирайте гармоничные шрифты.
3. Находите баланс. Белый текст на чёрном фоне читается легко.
4. Проектируйте UI под разные устройства.
5. Не используйте слишком часто верхний регистр.
6. Ограничьте длину текста.

Дизайн мобильных приложений — одно из ключевых направлений веб-студии IDBI. Мы создадим идеальное решение под вашу целевую аудиторию.