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

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

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

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

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

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

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

Давайте разберём пример: проработаем сценарий оформления заказа для приложения доставки пиццы. Наш пользователь — 28-летний Василий. Характер прескверный, не женат. Он живёт во Фрязино, работает в Москве. Сегодня вечер пятницы. Василий после работы выпил немало пива с коллегами. Сейчас он возвращается домой на электричке, в которой не всегда хорошо ловит интернет, и хочет есть.

2. Выписать всё, что может пригодиться

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

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

Бизнес (пиццерия) заинтересован в том, чтобы Василий сделал заказ как можно быстрее и оплатил заранее.

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

Если не спросить у Василия время доставки, курьер может привезти пиццу не вовремя и ему придётся ждать под дверью. Про время надо спросить.

Василий хочет оплатить пиццу через Apple Pay, но не все с ними солидарны. Во-первых, не у всех смартфоны поддерживают Apple / Google / Samsung Pay, а во-вторых, при первом заказе люди опасаются предоплат — вдруг вообще не привезут. Получается, что в приложении нужны, как минимум, четыре способа оплаты: Apple / Google / Samsung Pay, картой в приложении, картой курьеру и наличными.

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

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

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

Итого, в форме оформления заказа нужны следующие поля:

• Имя и телефон клиента.
• Способ получения заказа: доставка или самовывоз (мы разберем только доставку, потому что Василию нужна именно она).
• Время доставки: чем скорее, тем лучше, или к указанному времени.
• Адрес доставки.
• Способ оплаты.

Так форма будет смотреться на экране. Для начала поделим оформление заказа на 2 шага. На первом проверим, знаком ли нам пользователь, на втором узнаем, как он хочет получить и оплатить заказ.

3. Убираем то, без чего можно обойтись

Лучше не перегружать экран и подбирать максимально лаконичные формулировки. Главное при сокращении — не потерять смысл.

В черновике нас смущают повторы «доставки», «при получении» и формулировка «Способ оплаты» (хоть это и не критично, но выглядит слишком формально). Переформулируем все три подзаголовка в одном стиле, уберем «при получении» из оплаты наличными — всё равно иначе деньги передать невозможно:

Теперь нас смущает только «Укажите адрес». Можно заменить его на подсказку о том, что именно придётся указать:

Мы вынесли указание адреса доставки на отдельный экран, чтобы не перегружать текущий.

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

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

Форма получилась большая, но убрать из неё нечего. Что делать?

Один приём мы уже использовали — поделили её на 2 шага. Второй способ сработает при повторном заказе — можно запоминать введённые данные и показывать поля предзаполненными.

4. Заботимся и объясняем

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

Превышен лимит неактивности → Просто верните человека на предыдущий шаг.

Неверный формат данных → Показывайте сразу правильную клавиатуру.

Если предотвратить ошибку невозможно, формулируйте оповещения на понятном человеку языке и объясняйте, что произошло, в чем причина и что сделать. Как правило заботливое сообщение об ошибке занимает больше места, чем «роботизированное», но люди не будут на нас в обиде.

Сервер не отвечает →

1. Если сервер недоступен из-за того, что у пользователя пропало соединение с интернетом, так и говорим → Нет соединения с интернетом. Проверьте настройки сети.
2. Если сервер недоступен по собственным мотивам, единственный вариант, продумать автоматическое решение проблемы и подсказать, как можно решить её прямо сейчас. → Нет связи с сервером. Не закрывайте приложение, и ваш заказ отправится автоматически, как только мы устраним неполадку. Или позвоните нам по телефону +7 (495) 999-99-99 — и мы оформим заказ.

Неверный номер телефона →

1. Если не хватает цифры → Не хватает цифры
2. Иногда пользователь сознательно «допускает ошибку». Например, не указывает номер телефона или пишет случайный набор цифр, потому что не хочет, чтобы ему лишний раз звонили. Постарайтесь найти в этом пользу для человека и расскажите о ней. → По такому номеру курьер не дозвонится, если не сможет вас найти.

5. Перечитываем

Когда экран готов, перечитываем текст с начала до конца. Хороший интерфейс будет звучать как диалог между заботливым оператором и пользователем. Если «диалог» не складывается — возвращаемся к предыдущим шагам.

6. Тестируем на людях

Когда мы довольны результатом, пора проверить интерфейс на целевой аудитории. Лучше всего собрать прототип с нажимаемыми кнопочками (в InVision, Marvel, Flinto и т.п.) и дать нескольким людям из целевой аудитории задание пройти целевой сценарий — заказать пиццу с доставкой на дом в 20:00. На что нужно обратить внимание:

• Легко ли пользователям? Всё ли им понятно?
• Где у них возникают проблемы? Почему?
• Нравится ли им тон общения, который вы выбрали?

Что нельзя делать:

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

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

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

7. Определяем правила

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

Источник: redmadrobot.ru

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

1. Минимализм: простота во главе дизайна мобильных приложений 2019

Идея простоты и минимализма пропагандируется большинством современных дизайнеров мобильных приложений.

Основные черты минималистичного дизайна:

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

В 2019 году тенденция минимализма продолжит набирать популярность. Убрав из интерфейса все лишнее, можно упростить навигацию в приложении, сделать его более понятным и удобным.

Основная задача — не потерять фокус в погоне за простотой. Главное — не переступить грань, за которой чистый и гармоничный интерфейс переходит в примитивный.

2. Полуплоский дизайн: эстетика требует еще одно измерение

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

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

Такой стиль хорошо смотрится и в анимации, так как каждый слой может двигаться отдельно. Для типографики в таких приложениях отлично подойдет шрифт sans serif, который перекликается с трендом минимализма.

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

3. Функциональная анимация: важность мелких деталей

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

Задачи анимации:

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

4. Natural Experience (NX): приложения становятся более интуитивными

Удобный и понятный механизм работы с приложением (UX), который остается неизменной основой интерактивного дизайна, в 2019 году станет еще более интуитивным. Относительно новая концепция, получившая название Естественный опыт (англ. Natural experience, NX), позволит пользователям полностью погрузиться в работу приложения, что потребует от дизайнеров в 2019 году еще более детальной проработки интерфейсов.

Чтобы приложение было успешным, оно должно соответствовать следующим критериям NX:

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

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

5. Открытая композиция: тренд безграничного дизайна

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

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

6. Яркие цвета, градиенты и их сочетания: чем смелее, тем лучше

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

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

7. Меню Priority +: будущее без «гамбургеров»

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

Поэтому на смену «гамбургеру» приходит отзывчивое меню «Priority +» или меню с вкладками. Динамический дизайн такого шаблона обеспечивает более стабильную иерархию пунктов меню и подходит для экранов разных размеров и с разными возможностями масштабирования.

Подведем итоги

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

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

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

Источник: apptractor.ru