Дизайн мобильных приложений *

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

Когда команда запускает витрину продукта — каталог, рекомендации или подборки, —  почти сразу возникают вопросы: «Будут ли пользователи что-то из неё скачивать или покупать и какая будет конверсия?»

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

Меня зовут Таня Лескова, я ведущий UX-исследователь в магазине приложений RuStore. На примере исследований витрины RuStore расскажу, как мы проверяем такие сценарии до запуска: смотрим не на гипотетическое «скачал бы или не скачал», а на более раннюю цепочку — заметил, понял, поверил, захотел разобраться дальше.

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

Я это видел много раз — и в студии, и в больших командах. Поэтому ниже не советы в духе «потрать 10 000 часов», а разбор того, что реально ускоряет рост и почему стандартные пути часто тормозят и не помогают.

Привет, Хабр! Я Александр, занимаюсь Flutter разработкой продукта Свой бизнес и Дизайн-системы в команде РСХБ.Цифра.  РСХБ это не только банк топ 5* по размеру активов, но и огромная экосистема Своё со множеством мобильных приложений разной тематики: банкинг, туризм, жильё, маркетплейс фермерских продуктов, поиск работы в агропромышленном комплексе и другие . 

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

Привет, Хабр! Меня зовут Андрей Юрин, я мобильный разработчик в онлайн-кинотеатре «КИОН». Недавно у нас произошел ребрендинг, который коснулся всех платформ, но ресурсов на весь идейный план не хватало. Было решено все делать в мини-команде супергероев из дизайнеров и разработчиков. Я был в зоне отвественности за Android TV и хочу поделиться, с какими проблемами пришлось столкнуться и как проходит ребрендинг в большой компании.

Привет, я — Александра, юрист для digital-агентств и фрилансеров. Сегодня на примере своего кейса расскажу о том, как мой договор спас веб-дизайнера в суде.

➡️ Начнём с небольшой предыстории.

Ко мне обратился основатель и арт-директор студии разработки сайтов & фирменного стиля для бизнеса и людей FRAMELAR[I] с запросом на создание детально проработанного договора на разработку сайта под ключ. Главный запрос на договор — закрыть риск неполучения исполнителем второй части оплаты после полного завершения проекта (студия работает по модели 50% оплаты до начала оказания услуг, 50% после сдачи проекта).

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

➡️ Начало сотрудничества студии с заказчиком или ничего не предвещало беды.

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

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

В 2013 году на Randomwire была опубликована интересная статья. В ней автор указал на интересные особенности японского дизайна. Японцы известны своим минимализмом, но в случае сайтов у них, почему-то, всё наоборот. Страницы пестрят всевозможными цветами, что уже нарушает 3 принципа дизайна, плюс на них используются мелкие иконки и мно-о-о-о-го текста.  Да вы и сами видите пример этого буйства фантазии на скриншоте выше, сделанном в ноябре 2022 года.

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

И вот мне стало интересно, как обстоят дела сейчас, и можно ли как-то количественно оценить дизайн японских сайтов? Собственно, этим я и занялся.

Всем привет! Меня зовут Саша, и последние 12 лет моя жизнь — это дизайн. Сегодня я руковожу дизайн-командой в KISLOROD, а в прошлом — помогал крупным брендам и миллионным сервисам обрести их уникальный голос и форму.

Сегодня расскажу о реализации удобного функционала фильтрации и сортировки товаров.

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

Февраль — месяц UX-тематики в нашем блоге. Сегодня рассмотрим рецензию на книгу  про презентацию UX-решения, и это будет вторая книга по UX вслед за рецензией на книгу «UX для бизнеса: как создавать цифровые решения, ценные для бизнеса и пользователей». В UX есть один неудобный факт, который редко признают вслух: качество дизайна почти не коррелирует с тем, попадет ли он в продукт. Можно сделать логичное, интуитивно-понятное и аккуратное решение — и увидеть, как продукт-оунер или другие боссы его упрощают, откладывают или выбрасывают из спринта на ближайшем совещании. И наоборот: слабые решения нередко проходят без сопротивления, если они правильно «проданы». Вот про продажу UX-решения внутри команды сегодня и поговорим.

Привет, Хабр! На связи Дима Мандельштам, мобильный разработчик в core‑команде Яндекс 360, и Лёша Карпенко, руководитель команды дизайн‑системы. Дизайн — часть повседневной работы наших команд, и он не живёт отдельно. Поэтому сегодня в статье мы вместе поговорим о том, как мы собирали компонент List‑item.

Мобильные разработчики в этой статье найдут метод, с которым можно достичь баланса между гибкостью кода и простотой поддержки. Мы расскажем, как применили data‑driven‑подход к рефакторингу UI: написали анализатор AST для поиска реальных паттернов использования и вывели математическую метрику сложности API. А ещё расскажем о том, как аргументировать и провести масштабную переработку legacy‑кода, не останавливая продуктовую разработку.

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

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

Привет! Меня зовут Евгений Шаламов, я продакт-менеджер в Битрикс24 и отвечаю за мобильное направление. В нашем основном продукте, в веб и десктопной версиях, реализованы десятки инструментов и сценариев, но весь этот масштаб сложно уместить в мобильный интерфейс. Да и сценарии работы в веб и на мобильном устройстве сильно отличаются. Поэтому мы актуализировали мобильное приложение и сделали из него рабочий инструмент, удобный для многих пользователей.

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

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

Всем привет! Меня зовут Саша, и последние 12 лет моя жизнь — это дизайн. Сегодня я руковожу дизайн-командой в KISLOROD, а в прошлом — помогал крупным брендам и миллионным сервисам обрести их уникальный голос и форму.

В этой статье мы собрали 10 интернет-магазинов в сегменте DIY и разобрали, какие UX- и юзабилити-решения делают их сайты удобными и понятными для покупателей. Мы не оцениваем визуальный стиль — фокус именно на функциональных элементах интерфейса и навигации, которые помогают пользователю быстрее находить нужные товары и совершать целевые действия.

Цель материала — показать работающие решения, которые уже используются в крупных интернет-магазинах, и помочь командам e-commerce ориентироваться в актуальных UX-подходах при развитии своих проектов.

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

Всем привет! Меня зовут Саша, и последние 12 лет моя жизнь — это дизайн. Сегодня я руковожу дизайн-командой в KISLOROD, а в прошлом — помогал крупным брендам и миллионным сервисам обрести их уникальный голос и форму.

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

Всем привет! Меня зовут Саша, и последние 12 лет моя жизнь — это дизайн. Сегодня я руковожу дизайн-командой в KISLOROD, а в прошлом — помогал крупным брендам и миллионным сервисам обрести их уникальный голос и форму.

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

В этой статье перечислим основные элементы, которые позволяют нам повышать качество поиска в клиентских проектах.

Многие дизайнеры используют 2-3 источника референсов: Dribbble, Behance, Pinterest. Проблема в том, что это решает лишь 20% задач. Статичные картинки не показывают анимации. Нет доступа к исходникам. Невозможно увидеть, как дизайн менялся во времени.

Я решил найти все существующие сервисы для поиска референсов и детально изучить их возможности. Потратил кучу времени на исследование 50+ платформ. Выяснилось: Dribbble и Behance — это лишь верхушка айсберга.

Сегодня мобильными приложениями активно пользуются не только молодёжь, но и представители старших поколений, количество которых непрерывно растёт (Pew Research Center). Чаще всего именно эти пользователи меняют системный шрифт и настраивают контрастность для комфортного использования. Это влияет не только на пользовательский опыт работы, но ещё и формирует новые потребности в развитии операционных систем Android и iOS.

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

Меня зовут Игорь, я Android-разработчик в Сбере, развиваю проект СберИнвестии в команде «Портфель клиента». Расскажу про наш опыт работы с особыми возможностями Android, как мы к этому пришли, а также на практических примерах покажу улучшения UX нашего приложения. Конечно же, я также расскажу про подводные камни, на которых мы удачно поскользнулись, куда же без этого :).

Привет, Хабр! Я Никита Черемисинов, руководитель продуктового дизайна микроядерной операционной системы KasperskyOS, изначально безопасной на уровне архитектуры, «по дефолту». Моя команда отвечает за весь пользовательский слой системы: от пикселя и виброотклика — до системных сценариев, дизайн-системы и базовых приложений. Если это видно, слышно, ощущается или в целом влияет на опыт работы с KasperskyOS — UI/UX это наша зона ответственности.

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

И вот уже несколько лет мы с командой проектируем интерфейсы для этой ОС. И если кому-то кажется, что «ну подумаешь, еще одна оболочка Android», — спешим разочаровать: это совсем другая лига. Разрабатывать интерфейсы для KasperskyOS — это не просто нарисовать набор базовых приложений от SMS до галереи. Это как делать ремонт, начиная с фундамента, а не с обоев. И в этой статье я расскажу о нюансах нашей задачи и о пути, по которому мы пошли.