UX/UI-ДИЗАЙН

Классические приложения на Android и iOS имеют свои ограничения – требуют разработки и поддержки двух отдельных кодовых баз. В ситуациях, когда приложение нужно реализовать быстро на обе платформы, Flutter становится идеальным решением – он предлагает: ускоренный процесс разработки,  единый дизайн и пользовательский интерфейс на всех платформах,  высокую производительность,  быструю отзывчивость приложений. «Экономия ресурсов достигает 20–50%, при этом специалисты могут сосредоточиться на создании качественного пользовательского опыта, не тратя время на решение платформенных различий» Ринат, руководитель направления мобильной разработки В статье рассказываем про разработку Flutter-приложения для ElectroPoint – компания развивает стационарные и мобильные электрозаправочные станции и создает необходимые для этого цифровые продукты. Задача Реализация MVP ElectroPoint Мобил для быстрого выхода в продакшн. Разработка и дизайн: сервис для вызова мобильной зарядной станции (МЗС). Автомобилист может в приложении выбрать удобное ему время и место зарядки. Дизайн приложения для специалистов, обслуживающих мобильные зарядные станции - им доступны функции приема заказа и отчета о показателях зарядной сессии. Дизайн внутреннего портала администратора. Функции - мониторинг заказов, обработка обращений, управление расписанием слотов зарядки. Для проекта был выбран Flutter. Недавно подробно описывали его преимущества. Мы проектировали и полностью реализовали как Flutter-часть, так и backend для нее: от авторизации и профиля пользователя до непосредственной работы с заказом. Расскажем про наиболее интересные кейсы. Разработка Интеграция с геолокацией Вызов МЗС работает как приложение такси – нам нужно было реализовать поиск адреса через текстовое поле, передвигание метки на карте и по координатам (геолокации). Для всего этого нужна интеграция с внешними коммерческими продуктами – онлайн-картами.  Нам нужно было решить не только каким образом осуществлять интеграцию, но и в каком объеме. Важными факторами были ограничения лицензий и стоимость услуг. В итоге функциональность, которая определяла входит ли адрес в допустимую географическую зону, мы реализовали самостоятельно, а отрисовку карт – с привлечением Яндекс.Карт. При этом наш разработчик адаптировал нативные карты Яндекса на Flutter.  Вся работа с адресами строится на отправлении запросов на SDK внешнего ресурса с картами. В процессе интеграции наш специалист нашел баг в SDK Яндекса – не поддерживался кастомный тип данных. Он исправил его с помощью JSON-метода и отправил мерж-реквест в техподдержку. Добавление оплаты Мы использовали Ю-кассу, которую также поддерживает Яндекс. Проблема была в том, что Flutter-пакет сервиса был завязан на Swift-пакете. Зависимость в последнем была прописана для iOS 10 – она устарела. Мы вручную подняли ее до 13 версии, предложили изменения Яндексу, и они внесли их в свой пакет. Дизайн Мы разрабатывали интерфейс для всех продуктов ElectroPoint Мобил: проектировали первичные прототипы основных сценариев приложений, определяли стиль проекта, создавали дизайн-концепты и библиотеки компонентов. По утвержденным прототипам мы отрисовывали дизайн и представляли команде – на всем протяжении проекта мы вели активную коммуникацию со всеми участниками команды, проводили дизайн-ревью на этапах реализации. Особенность этого проекта – его многосторонняя функциональность: в приложении для автовладельцев мы прорабатывали добавление электромобиля, оформление и отмену заказа, экраны меню и профиля; в приложении для владельцев МЗС особое внимание уделяли сценарию активного заказа, где водитель берет заказ в работу, отмечает свой приезд, вносит показания счетчиков до и после зарядки и завершает заказ; в административной панели проектировали дизайн работы с заказами, просмотр и редактирование их расписания. Некоторые сценарии менялись уже после проектирования прототипов, например, так было с заказом МЗС – несколько раз он пересматривался и редактировался. Тогда мы опирались на уже утвержденные элементы и отрисовывали дизайн в соответствии с ними. Результаты реализовали основную бизнес-логику приложения для владельцев электромобилей; выполнили интеграцию с сервисами геолокации и оплаты, системой push- и СМС-уведомлений; разработали комплект макетов и состояний приложений проекта – суммарно  более 100 экранов; сформировали библиотеку дизайн-компонентов проекта; отрисовали визуалы для Google Play и App Store. Приложение для  Android и  iOS уже доступны в сторах. Что ещё мы писали про Flutter Разработка на Flutter: MVP аграрного маркетплейса Мобильное приложение на Flutter: плюсы и минусы для бизнеса  Один плагин, чтоб править всеми. Как разработать сканер на Flutter для 3 платформ и ускорить ввод данных в 2 раза Создание мобильных приложений — что важно учесть в нынешних условиях?

Налаживание связей с клиентами — один из ключевых факторов успеха для b2b-компаний. Однако, возможны такие ситуации, когда потенциальный заказчик перестает выходить на связь. В этом случае важно проанализировать, как аудитория воспринимает ваше предложение. На помощь приходят сервисы отправки документов  — они позволяют собирать статистику по файлам, которые вы выслали клиенту. На основе полученной аналитики можно принимать решения: как изменить акценты и улучшить коммерческое предложение, стоит ли связаться с получателем в ближайшее время или следует сосредоточиться на других клиентах. Именно такой сервис SimbirSoft запустила в 2022 году. Linkory.io подскажет вашему отделу продаж, какому потенциальному заказчику и в какое время звонить для максимальной эффективности взаимодействия. Платформа подходит для сейлз-менеджеров, маркетологов и и всех, кто обменивается цифровыми документами в своей работе. Загрузив файлы на Linkory и отправив ссылку получателю, пользователь видит, какие страницы клиент просмотрел и что именно его заинтересовало. Идея запуска собственного продукта пришла к нам в 2021 году. В декабре 2022-го мы выпустили beta-версию Linkory и получили первую обратную связь от пользователей. В этой статье подробно рассказываем о новом продукте SimbirSoft. С чего все начиналось Сервисы поддержки продаж — не новинка на рынках США и Европы. Специалисты по продажам (преимущественно из b2b-сегмента) давно интегрируют подобные системы в повседневную работу. Мы провели исследование российского рынка и пришли к двум выводам. Во-первых, бизнес нацелен на сокращение времени прохождения воронки продаж. Во-вторых, сотрудники компаний не знают, что происходит после отправки документов клиенту, из-за чего упускают потенциальные сделки. На этой аудитории мы и сфокусировались. Возможности Планируя запуск MVP, мы сосредоточились на ключевых функциональностях сервиса — загрузки документов, создания микросайта и сбора аналитики. Загружаем документы. Сервис поддерживает добавление презентаций, текстовых и .pdf-файлов, таблиц, изображений и ссылок на YouTube. Для удобства и корректного отображения на разных устройствах все документы автоматически конвертируются в формат .pdf. Создаем микросайт. Это веб-страница, на которую можно загрузить файлы с компьютера или из облачного хранилища Linkory Drive, а ссылку отправить клиентам. Контент доступен для просмотра с любого устройства. Собираем аналитику. Сервис отображает список посетителей, которые переходили по вашей ссылке, а также действия каждого из них: какие файлы они открыли, какие страницы документа просмотрели и сколько времени уделили каждой из них. Эти данные помогают определить оптимальный момент для выхода с клиентом на связь и обсуждения дальнейшего сотрудничества. Разработав концепцию продукта и определив основные функциональности, мы приступили к созданию MVP. В команду проекта вошли: project-менеджер, аналитик, дизайнер, техлид, два frontend-разработчика, четыре backend-разработчика, SDET-инженер и два специалиста QA. Разработка Архитектурный комитет SimbirSoft сделал выбор в пользу микросервисной архитектуры приложения, где каждый микросервис отвечает за свою функциональность — профиль пользователя, аналитику, отправку уведомлений и другие фичи. Это увеличило срок разработки, но дало нам возможность масштабировать продукт в будущем. На основе разработанного дизайна мы реализовали свой набор UI-компонентов. После этого приступили к разработке, разбив проект на несколько этапов. Мы начали с создания механизма авторизации и регистрации пользователя, после чего проработали методы хранения данных. Функционирование системы требует хранения большого количества изображений — в качестве хранилищ мы использовали Clickhouse и Yandex Cloud. После этого мы перешли к разработке сервиса микросайтов и механизма загрузки документов. Для отображения файлов мы использовали pdf.js. Помимо этого, мы разработали собственный .pdf-конвертер для преобразование документов в .pdf-формат. Это позволило добиться корректного отображения документов в браузере на разных устройствах. Разработанный микросервис помог снизить нагрузку на систему и избежать зависимости от сторонних сервисов. При создании конвертера мы использовали очередь задач в многопоточном режиме. После того, как базовая часть системы была готова, мы приступили к разработке механизмов сбора аналитики и отправки push- и email-уведомлений. Блок аналитики отслеживает действия посетителей страницы и отправляет информацию на сервер. Также система автоматически направляет уведомления владельцу микросайта о важных событиях: просмотре документа пользователем, скачивании файлов, просьбе клиента связаться с ним. Для разработки этой функциональности мы провели интеграцию с сервисом рассылки почты, а также внедрили push-уведомления. Мы запустили beta-версию продукта в декабре 2022 года, опубликовав его внутри SimbirSoft и открыв доступ ранним пользователям. Сейчас мы собираем первую обратную связь, дорабатываем и активно продвигаем сервис на рынок. Попробуйте Linkory бесплатно и узнайте больше о работе сервиса на нашем сайте.

В сфере дизайна цифровых продуктов выделяют две формы: пользовательский опыт (UX – user eXperience) и пользовательский интерфейс (UI – user interface). Под UX зачастую понимают только дизайн, красивую картинку, хотя на практике это “зона ответственности” UI. UX  — это история о взаимодействии посетителя сайта и самой площадки. Рассмотрим, чем отличается UX от UI, а также приведем примеры аудита UX и UI из практики IT-компании. Если вы ищете подробную информацию по данному вопросу, то найдете ее в этой статье. О чём поговорим: Принципы UX/UI Сходства и различия UX и UI Какие тренды существуют в UX/UI Задачи UX Как оценить эффективность UX Зоны ответственности UX и UI Аудит UX: пример из практики Хотите разобраться в этом поподробнее? Тогда читайте дальше! Основы UX/UI Понятие UX/UI в первую очередь подразумевает под собой взаимодействие пользователя с интерфейсом. Мы сталкиваемся с тем или иным интерфейсом в самых разных ситуациях  — при использовании мобильных приложений, банковских карт или, к примеру, палочек для еды. Главная задача UX — сделать путь пользователя к решению его проблемы или достижению цели максимально простым, а процесс взаимодействия с системой — максимально эффективным. Если рассматривать это с точки зрения бизнеса, можно добавить, что UX — это способ побудить пользователя к совершению требуемого действия. В свою очередь UI — это часть UX, интерфейс, который встречает пользователя. К примеру, это цвета, стиль кнопок, графика, анимация, типография, инфографика, виджеты, поведение, отклик кнопок и так далее. Разработка UI  — это искусство делать интерфейс правильным, решающим задачу. Сходства и различия UX и UI Мы подготовили небольшой видеоролик, который наглядно показывает, в чем разница между UX и UI. В качестве примера пользовательского опыта рассмотрим ужин в японском ресторане. Клиент приходит в ресторан с целью утолить голод и получить удовольствие, при этом он может использовать разные “элементы интерфейса” — азиатские палочки для еды или вилку, в соответствии с европейской традицией. Процесс достижения этой цели — это и есть UX, а палочки или вилка  — это UI. Так и в цифровых продуктах. UX помогает направить пользователя к цели, а UI готовит место встречи пользователя и цели. UX дизайнер указывает, как человек будет пользоваться продуктом и какие действия совершит. Задача UI дизайнера  — определить, как будут выглядеть элементы интерфейса в этом случае. При этом UX и UI дизайнеры работают в тесном взаимодействии. Тренды Осознание бизнесом важности влияния UX на продукт привело к тому, что проектирование UX/UI стало одним из необходимых этапов разработки. В результате сложилось несколько трендов: Упрощение визуальной части интерфейсов. Специалистам по UX/UI, дизайнерам интерфейсов, теперь не нужно тратить время на отрисовку рельефной кнопки и поиск хорошо считываемых образов. Современный пользователь без труда понимает условные обозначения. Уже не нужно объяснять, что цветной прямоугольник – это кнопка, а три горизонтальные полоски – меню. Усложнение самого дизайна как дисциплины. Интерфейсы упростились, но сам дизайн стал сложнее и многослойнее. Сейчас сайты представляют собой комплексные системы с множеством разных элементов: формами заявки, личным кабинетом, подписками и онлайн-консультантами. Нужно четко продумывать путь пользователя на сайте, чтобы он не заблудился, быстро находил нужные разделы, а в идеале – совершал целевые действия. Появление профессии UX/UI дизайнера. На рынке появилось множество узкоспециализированных экспертов, которые наслышаны о UX, имели дело с web-сайтами и другими IT-продуктами и добавляют к своей профессии слова UX/UI. Однако, на практике только опытный UX/UI-дизайнер видит все стороны процесса и умеет хорошо делать и аналитику, и дизайн. Задачи UX UX нацелен на то, чтобы помочь пользователю достичь желаемого и оставить у него положительное впечатление. Его задачи заключаются в следующем: Дать пользователю ощущение уникальности продукта; Побудить пользователя изучать продукт и пользоваться контентом; Убедить нового пользователя “попробовать” продукт; Побудить пользователя продолжать применять продукт; Рассмотрим, как UX работает на практике и способен ли он оказать влияние на конкретные бизнес-показатели продукта.  Какую пользу UX приносит бизнесу В качестве примера возьмем мобильное приложение для заказа еды. Когда приложение удобно, пользователю с первого взгляда понятно, как добавить товар в корзину, изменить состав заказа, познакомиться с условиями оплаты и доставки. Положительный UX в этом случае повышает лояльность пользователей, на 50% снижает показатели отказов. Согласно исследованиям, инвестиции в дизайн способны значительно увеличить прибыль. Один доллар, вложенный в дизайн, приносит от двух до 100 долларов прибыли, согласно оценкам независимой аналитической компании в сфере информационных технологий Forrester Research. Таким образом, UX действительно помогает бизнесу заработать: Увеличить конверсию Повысить продажи Повысить лояльность пользователей Кроме того, тщательная работа с UX способна сделать продукт понятнее, а также сэкономить на его обслуживании: Снизить расходы на поддержку Снизить недовольство пользователей (и даже избежать судебных издержек) Снизить затраты на привлечение пользователей UX может навредить бизнесу? Как мы разобрались выше, качественный UX помогает бизнесу развиваться, повышать прибыль и сокращать ненужные расходы. Невнимание к UX, в свою очередь, грозит бизнесу непредвиденными расходами. Если вы не занимаетесь UX (или качество проработки UX низкое), неизбежны ошибки в продукте. Устранение ошибок, которые найдены уже после разработки, обходится дорого. А значит, вы несете убытки, рискуете потерять клиентов и репутацию, о вас появляются негативные отзывы. HEART: как оценить эффективность UX Оценить, насколько эффективна работа UX дизайнера, можно по разным критериям и ключевым параметрам. В частности, для этого применяется методика HEART: H — happiness (счастье пользователя) E  — engagement (вовлеченность) A  — adoption (принятие) R  — retention (удержание) T  — task (успешность достижения цели) Метрики эффективности UX: примеры Метрики счастья пользователя: Рост числа положительных отзывов и сокращение отрицательных Рост числа сделок, покупок Удовлетворенность (net promoter score) Метрики вовлечения: Число посещений в неделю, повторных визитов Количество пользователей, которые нажимают кнопку “Поделиться” Число фотографий, загруженных одним пользователем Метрики принятия: Новые подписки, регистрации Покупки, сделанные новыми пользователями Метрики удержания: Повторные покупки Продление подписки, обновление до последней версии Число активных пользователей Метрики успешности выполнения задач: Время на выполнение задачи (например, сколько времени уходит на совершение покупки) Сокращение числа ошибок пользователей Нашел ли пользователь то, что искал Зоны ответственности UX и UI Над UX работает группа специалистов, поскольку один человек редко может совместить в себе все компетенции с точки зрения бизнеса, маркетинга, психологии, дизайна, разработки IT-продукта. Обычно в команду UX входят следующие специалисты: аналитик-проектировщик - готовит прототип системы бизнес-аналитик и системный аналитик - описывают бизнес и системные требования UX эксперт - анализирует потребности всех стэкхолдеров и проверяет гипотезы идей UI дизайнер - готовит макеты представитель бизнеса - отвечает за соответствие результаты потребностям бизнеса Разберемся, в чем заключается разница между зонами ответственности UI дизайнера и команды по проектированию UX.  За что отвечает команда UX Коммуникации  — способность объяснять и интерпретировать, выступать посредником между командой разработчика и заказчиком. Исследование пользователей. Понимать пользователей, их боли и желания для того, чтобы сделать продукт таким, как им нужно. Информационная архитектура. Дизайнер упорядочивает беспорядок в проекте, рисует план действий, который позволяет дойти от начала до результата. Работа в команде. Навыки продуктивного общения обязательны. Может ли специалист доступно объяснить свою идею? А помочь в этом другому члену команды - программисту, директору, будущим пользователям продукта? Проектирование «сценария взаимодействия» (User-Flow)  — последовательности макетов, по которым строится путь пользователя к цели. Тестирование UX/UI. Проверка корректности работы продукта. Это касается не только дизайна интерфейса UX/UI, но и всего customer journey  — от первого соприкосновения с продуктом до покупки. Аналитика. Эксперт на основе аналитических данных определяет, как пользователи применяют продукт, что им нравится и не нравится. UX writing (копирайтинг). Создание подписей, сценариев диалогов и т.п. В большинстве продуктов текст является основой контента. За что отвечает дизайнер UI Сборка макетов (Wireframe)  — это каркас интерфейса, состоящий из линий, прямоугольников и фигур. Дизайн, визуальная составляющая интерфейса. Работа с продуктом должна оставлять у пользователя приятное впечатление. Прототипирование. Создание прототипа  — простой способ увидеть, как всё будет работать. Сторителлинг. Инициировать действие со стороны пользователя, используя минимум слов. Важно добиться нужной реакции с помощью визуального образа, чтобы человек взаимодействовал с интерфейсом системы, согласно заранее продуманному сценарию. При этом важно, чтобы он думал, что “я сделал это сам”. Графика и анимации. Дизайнер должен уметь работать с графикой, создавать элементы и переходы. Исследование юзабилити UX/UI: пример из практики Мы в компании SimbirSoft c 2001 года создаем программное обеспечение на заказ. К нам обращаются за разработкой решений для бизнеса с нуля, а также в тех случаях, когда нужно “спасти” продукт и повысить его эффективность. Бывает, что приложение оказывается неудобным, потому что разработано без учета конкретных бизнес-процессов компании или потребностей пользователей. Неудобный IT-продукт — это риск в конкурентной борьбе, который следует исключить. В этом случае мы проводим аудит — то есть анализируем, как сайт или иной IT-продукт выполняет свои задачи и насколько UX и UI отвечают требованиям рынка. С помощью аудита UX можно выявить основные проблемы продукта, а это первый шаг на пути к их устранению. Мы в своей практике часто работаем с решениями для дистанционного банковского обслуживания (ДБО). Рассмотрим на примере банковского мобильного приложения, как аудит UX помогает наметить вектор развития продукта. Аудит банковского продукта В 2017 году к нам обратился крупный региональный банк СКБ. Перед нами стояла задача усовершенствовать мобильный банк, сделать его удобнее для клиентов банка из числа малого и среднего бизнеса. На старте мы проанализировали работу пользователей с мобильным банком. На основе аналитики UX и UI мы предложили банку гипотезу о том, как улучшить функциональность и популярность продукта. Как мы работаем с гипотезами: UX/UI анализ продукта начинается с выявления проблем. Для этого мы анализируем поведение пользователей и находим “узкие места” при взаимодействии с приложением.В данном случае мы опросили тех специалистов, которые являются ключевыми пользователями приложения – в первую очередь это бухгалтеры, юристы и экономисты. Выяснилось, что больше всего времени они тратят на работу с бумагами, проверку данных и перевод информации (реквизитов) из финансовых документов в электронный вид. При этом случаются ошибки: например, пользователь может ошибиться при вводе номера расчетного счета. Далее исследуем, действительно ли существует эта проблема и насколько она важна. После подтверждения проблемы мы выдвигаем гипотезу о решении. На основе своего опыта мы предложили банку добавить в приложение функцию автоматического распознавания данных финансовых документов. Также мы оценили эту гипотезу вместе с ключевыми пользователями продукта. Когда гипотеза подтверждена, мы детально прорабатываем новую функциональность. С помощью автоматического распознавания работа пользователя с документами сводится к тому, чтобы сфотографировать данные на смартфон. При этом данные автоматически загружаются в нужные формы, передаются в банк, проверяются и подтверждаются. Такой алгоритм работы позволяет быстро и без ошибок переводить информацию в электронный вид. Далее мы протестировали новую функциональность и проверили ее в фокус-группах. Как показала практика, новый алгоритм работы позволяет быстро и без ошибок переводить информацию в электронный вид, ускорить и упростить работу пользователей с мобильным банком. С новым ДБО наш партнер вошел в ТОП5 по версии Markswebb: мобильный банк занял 4 место среди лучших банков для малого бизнеса (2017 год), а онлайн-банк – 2 место в рейтинге интернет-банков для индивидуальных предпринимателей (2018 год). Подробнее об аудите банковского продукта мы рассказывали ранее в нашем блоге. Подводя итоги На сегодняшний день работа с UX и UI необходима для создания актуального IT-решения. Качественная проработка UX и UI помогает не только обеспечить лояльность и положительные отзывы пользователей, но и ощутимо улучшить бизнес-показатели продукта. В свою очередь плохой UX способен принести бизнесу убытки. Над проектированием UX работает целая команда специалистов из разных отраслей. Мы в SimbirSoft рекомендуем нашим клиентам и партнерам контролировать эффективность UX в их IT-продуктах. Если продукт устаревает или не выполняет свои задачи, необходимо провести аудит UX и выяснить причины проблем и возможные решения. Приглашаем узнать больше о наших продуктах в разделе “Портфолио”: