Продуктовое видение в IT

2022-08-26 14:01:55 Ошибки мобильного UX: неудобный ввод данных

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

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

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

Сегодня расскажем о 10 главных ошибках полей ввода и способах их решения.

1. Большие формы, много полей. В мобильном приложении непросто заполнять большие формы: площадь экрана маленькая и перемещаться между полями тяжело. Чтобы облегчить жизнь пользователя, делите форму на несколько шагов, желательно объединенных единой темой.
2. Пропуск поля ввода. Если пользователь пропустил обязательное поле заполнения и нажал на кнопку следующего шага («Далее» или «Отправить»), то лучше не блокировать её, а прокручивать экран к пустому или ошибочному полю с указанием на него.
3. Частый запрос данных. Не повторяйте запрос одних и тех же данных, а сохраняйте их. Используйте автозаполнение, либо не показывайте повторные поля вообще. Если пользователь не хочет передавать данные, то используйте временное хранение на время открытой сессии.
4. Автооправка. Используйте автоотправку данных, если это уместно. Например, как это делается при вводе пин-кода. Пользователь ввел 4 цифры и запрос отправился сам, без необходимости нажимать отдельно кнопку для отправки.
5. Соответствующая клавиатура. Используйте соответствующие форме ввода клавиатуры: для текста — текстовую, для цифр — цифровую.
6. Разные формы ввода. Есть несколько разных способов внести данные в поле: ввод с клавиатуры, выбор из списка, использование барабана. Используйте максимально удобный способ для каждого типа задач.
7. Шаблоны ввода. Для ввода разных данных используйте маски: для телефона, для ввода номера банковской карты, водительского удостоверения, номера паспорта и т.д.
8. Поиск. Полезно помнить предыдущие запросы пользователя или предлагать сразу на старте что-то из популярных запросов, а также использовать контекстные подсказки, чтобы дополнять запрос пользователя по первым введенным буквам.
9. Ошибка поиска. В поисковой выдаче даже при ошибочном вводе данных показывайте близкие результаты, подсказками помогайте пользователю заменить неправильное слово.
10. Сброс данных. Также не забывайте дать пользователю возможность быстро стереть введенные данные одним нажатием.

Поможем спроектировать качественный UX и привести ваш цифровой проект к успеху. Заполните форму, чтобы связаться с экспертами Surf.

#ux #design Открыть/Комментировать

2022-08-25 14:01:52 Открыть/Комментировать

2022-08-25 14:01:52 UX-паттерн контроля

Это новый пост, подготовленный дизайн-командой Surf Сегодня расскажем о паттерне контроля.

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

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

1. поиск закономерностей, даже если их нет;
2. поиск несоответствия между знанием о действии и предлагаемом действии;
3. игнорирование задачи, если не получается получить результат, и, соответственно, уход из приложения или обращение в поддержку,
4. переключение на другие дела, если не получается все сделать быстро, но с возвращением к задаче до тех пор, пока не будет достигнут результат
4. критика и поиск ошибок;
5. повторение действий из прошлого опыта взаимодействия с другим приложением.

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

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

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

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

#ux #design Открыть/Комментировать

2022-08-24 11:00:32 Отличные новости! На этой неделе мы торжественно перезапускаем наш аккаунт в Twitter.
Теперь вы можете оставаться на связи с Surf на любой площадке. Но лучше следить за всеми, чтобы точно ничего не пропустить

Подписывайтесь, будем делиться:
Челленджами, с которыми мы сталкиваемся в работе над проектами, и как справляемся с ними
Тем, как происходит процесс разработки в Surf изнутри
Обзорами удачных решений для разработки приложений, которые предлагает рынок
Мемами, потому что разработка — это весело

Рады видеть каждого в фолловерах! Открыть/Комментировать

2022-08-23 14:01:02 KFC Pro.Business: управление персоналом

Продолжаем рассказывать про кастомную ERP-систему для KFC. Система, которую мы в Surf разработали для клиента, получила высокую оценку клиента и сейчас обсуждается ее внедрение в ресторанах сети во всем мире. Предыдущий пост по теме ищите тут.

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

Директорам ресторанов стало проще выстраивать смены, как следствие, количество ошибок и нестыковок в расписании удалось минимизировать. Теперь в ресторанах есть оптимальное расписание, а производительность команды выросла.

Узнать о кейсе KFC Pro.Business подробнее можно на сайте.

#best_practices Открыть/Комментировать

2022-08-22 14:00:06 ​​ Наш опыт создания PWA на Flutter web

Чтобы детально разобраться в технологии PWA и её особенностях при реализации на Flutter, мы провели эксперимент по миграции в формат# PWA готового Flutter-приложения, которое изначально разрабатывалось для мобильных платформ.
Это было банковское приложение — один из реальных проектов Surf.

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

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

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

Вот несколько вопросов, с которыми мы столкнулись:
Вопрос №1. Как устанавливаются PWA приложения?
Ответ: Нужно зайти на сайт с мобильного и после загрузки у вас появится ярлык на экране смартфона. Для того чтобы браузер предложил установить PWA, оно должно быстро запускаться и быстро работать. PWA приложение на Flutter хорошо оптимизировано и даёт высокие показатели, в том числе времени, проведённого пользователем на сайте и конверсии.

Вопрос № 2. Как понять, что мы находимся внутри PWA?
Ответ: Для пользователя оно почти не отличимо от обычного мобильного приложения. Разве что обычно он скачивает приложение из стора, а PWA устанавливает напрямую с вашего сайта, путём создания ярлыка на экран.
Попробовав перевести готовое банковское Flutter-приложение на PWA, мы убедились, что это выход для многих сфер бизнеса, которые остались без доступа к привычным сторам. С помощью этой технологии продукт найдёт своего клиента без перерыва на обход санкций. Хотя у PWA есть и минусы, особенно при работе с платформой iOS.

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

#best_practices Открыть/Комментировать

2022-08-19 14:00:41 Российский магазин приложений продолжает набирать обороты: спустя 3 месяца с начала функционирования RuStore уже скачали более 1,5 млн раз. Популярность стора эксперты объясняют возможностью скачивания оттуда любых приложений и обхода ограничений.

Аналог Google Store — RuStore начал работать в мае 2022 года как альтернатива App Store и Google Play. Проект запустил Минцифры и команда разработчиков VK. Площадку развивают совместно с крупнейшими российскими IT-компаниями — Яндексом, Сбером, Авито, Ростелекомом и банком Тинькофф. Отличительная особенность стора — он предназначен только для приложений для Android. Создать альтернативу App Store пока российские разработчики пока не могут из-за особенностей политики Apple.
Сейчас в RuStorе более 1000 приложений в 14 категориях. Открыть/Комментировать

2022-08-18 14:02:23 Как заказчику оценить UX: конкурентная оценка + адресное сравнение

Как выбрать для мобильного продукта правильное решение в UX среди множества? На какие решения на рынке опираться и сколько это будет стоить?

Улучшить ваш проект может помочь сравнение user-flow конкурентов, о котором мы рассказывали здесь. Но этот подход не универсален. Например, он не подходит, когда конкурентов слишком много или, наоборот, почти нет. В таких случаях может потребоваться адресное сравнение.

Для каких продуктов подходит адресное сравнение? Может применяться и для нового, и для уже существующего проекта.

Когда используют адресное сравнение?
- У продукта большое количество конкурентов и проанализировать общий юзер-флоу каждого трудозатратно.
- У продукта узкоспециализированная ЦА или вы впервые оцениваете свой проект.
- Вы хотите улучшить только отдельные (например, самые важные) части вашего продукта, а не переделывать его полностью.

Важно! Метод используют перед UX-аналитикой. Чтобы сравнение было результативным, важно определить параметры, по которым интерфейс мобильного приложения будет сравниваться с конкурентами.

Как проходит адресное сравнение? Выбираются уникальные параметры сравнения конкурентов, это помогает сузить фокус сравнения и получить инсайты именно в нужной области:
1. Сужаем круг конкурентов на основании ключевых параметров ниши.
2. Определяем условия рынка.
3. Выявляем самую важную функциональность для потребителей.
4. Сравниваем!

Как это сделать? Мы делимся личным опытом Surf в гайдлайне
Все полезные ссылки из карточек в комментарии к посту.

Поможем спроектировать качественный UX и привести ваш цифровой проект к успеху. Заполните форму, чтобы связаться с экспертами Surf.

#ux #design Открыть/Комментировать

2022-08-18 14:01:02 Открыть/Комментировать

2022-08-17 14:01:01 Открыть/Комментировать