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

Привет, Хабр!

Вот и первый пост из нашего цикла, итак:

Генерация гипотез

Сегодня давайте поговорим о том, почему так важна генерация гипотез в нашей работе и как правильно подходить к этому процессу. Умение формулировать правильные гипотезы - это один из основных признаков профессионального дизайнера. И если вам кажется, что это непростая задача, не переживайте - этот навык приходит с опытом. Готовы разобраться? Поехали!

Почему гипотезы так важны?

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

Как правильно формулировать гипотезы?

Есть отличная структура, которая упрощает процесс:

Если мы сделаем [изменение], то пользователи смогут [результат], потому что [обоснование].

Пример:

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

Гипотеза должна быть понятной и проверяемой. Это не гадание на кофейной гуще - мы выдвигаем предположения и тестируем их.

Где искать идеи для гипотез?

Не знаете, с чего начать? Вот несколько надежных источников:

1. Данные. Проанализируйте статистику: какие экраны вызывают затруднения? Где пользователи чаще всего «застревают»?

2. Юзабилити-тесты. Наблюдайте за пользователями, задавайте им вопросы - это кладезь инсайтов.

3. Конкуренты. Посмотрите, как похожие задачи решаются в других продуктах. Что можно сделать лучше?

4. Личный опыт. Ведь вы тоже пользователь! Иногда достаточно взглянуть на интерфейс свежим взглядом.

Что делать с гипотезами дальше?

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

2. Тестирование. Проверяйте гипотезы через A/B-тесты, прототипы, аналитику. Главное - опираться на реальные данные.

3. Итерации. Если гипотеза не сработала, не переживайте - это тоже результат! Проанализируйте, что пошло не так, и двигайтесь дальше.

Маленький лайфхак:

Не пытайтесь угадать всё с первого раза. Смотрите на гипотезы как на ступеньки. Каждая из них приближает вас к идеальному решению.

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

Где почитать:
Skillbox хорошо разобрали виды гипотез и процесс работы с ними
Шаблон формулирования гипотез от AGIMA
Гипотезы для usability теста на Tproger

До встречи в следующих постах!

Привет, Хабр!

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

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

Что планирую рассмотреть:

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

2. UX-аналитика и Бизнес-аналитика. Как связать анализ пользовательского опыта с бизнес-позициями и почему важно не забывать про оба аспекта.

3. Анализ конкурентов. Зачем и как правильно проводить анализ конкурентов, чтобы не копировать, а интегрировать самые крутые практики в свой продукт.

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

5. User Flow и Персоны. Как создавать User Flow и прорабатывать персоны для детального понимания того, как пользователи себя ведут.

6. UX-тестирование и Глубинное интервью. Как сделать тестирование таким, чтобы оно реально выявляло проблемы, а глубинные интервью давали ценную обратную связь.

7. Создание дизайн-концепции. Как развить свою дизайн-концепцию, составить UI-kit и начать работать с дизайн-системами.

8. Android и iOS гайдлайны. Как различия в дизайне для Android и iOS могут повлиять на взаимодействие с продуктом и что стоит учитывать при проектировании.

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

10. Токены. Как правильно настроить зависимости между сложными токенами и базовыми (цвета, отступы, размеры), и не потеряться в этом процессе.

11. Верстка для дизайнера. Как грамотно называть классы в HTML, чтобы не только разработчики, но и ты мог легко ориентироваться в проекте.

12. WCAG и подбор цветов. Когда и почему можно сделать исключения по WCAG, и как это влияет на доступность проекта.

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

До скорого в следующих постах!

Как выглядят котировки на бирже на смартфоне с изогнутым дисплеем.

🪬 Сломанный UX как защита от дурака

Наливал тут кипяток из автомата с водой. Режим «экстра горячая вода для чая» на нем включался только после выполнения сложного ритуала — покрутить колесико, зажать кнопку, пару секунд подумать, и только после этого кипяток начинал литься

Давайте подумаем, где такой же подход стоит использовать в приложении

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

Как минимум — показать предупреждающий экран и попросить ввести пин-код

Хотя эти действия настолько обыденные, что обычно выполняешь их с той же легкостью, как открытие двери и выключение утюга

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

◾ потрясите телефон, если хотите удалить сообщение только у себя

◾ разгадайте капчу, если действительно хотите репостнуть этот аморальный мем в чат с родственниками, а не друзьями

◾ нажмите кнопки от 1 до 9, если хотите подключиться к звонку с включенной видеокамерой

Хороший пример кстати это флоу отмены подписки в яндексе. Случайно точно не нажмешь

остальные посты 👉 https://t.me/dolgo_polo_dev

Какие книги читать дизайнеру: мнение экспертов

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

Вот какие книги они упоминают:

• «Дизайн привычных вещей» Дона Нормана;

• «Пиши-сокращай» Максима Ильяхова;

• «Спроси маму» Роба Фитцпатрика;

• «Начни с почему» Саймона Синека;

• «Переломный момент» Малькольма Гладуэлла;

• «Паттерны дизайн-менеджмента» Юрия Ветрова;

• «ВкусВилл. Как совершить революцию в ритейле, делая всё не так» Евгения Щепина;

• «Тайная жизнь цвета» Кассии Сен-Клер;

• «Настольную книгу Project-менеджера» Владимира Завертайлова;

• «То, что мы видим, то, что смотрит на нас» Жоржа Диди-Юбермана;

• «История журнального дизайна» Ольги Рожновой;

• «Об интерфейсе» Алана Купера.

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

Почему умирает OpenHarmony

Если вы откроете проект на gitee.com вы увидите что проект включает в себя больше 700 (семисот!) репозиториев. Секрет в том что ни один из этих проектов в отдельном репозитории не компилируется независимо! Один знакомый разработчик, который работает с этим богатством, рассказал мне, что чтобы скомпилировать какой либо из проектов составляющих OpenHarmony вы должны скачать и скомпилировать минимум 450 репозиториев! Дело в том что даже отдельные приложения такие как mailBox, storage с СМС-ками, с контактами, видео плеер, ... которые, казалось бы, должны быть отдельными приложениями таковыми не являются. Они все компилируются как части одной монолитной прошивки смартфона (как части операционной системы) и вы не можете скомпилировать их без компиляции всей системы, такая опция просто не предусмотрена.

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

Каждый новый добавленный в OpenHarmony репозиторий приближает видимый крах проекта.

Интересно как обстоят дела у Андроида в этом смысле.

Как начать читать научные исследования по дизайну и зачем это делать — запись со встречи с Юлей Кондратьевой, ex Tinkoff Design Lead.

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

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

Преимущества Rive при разработке Flutter-приложений

При разработке Flutter-приложений используют много типов анимации, о чем мы ранее уже писали. Но Rive всё-таки превосходит большинство из них. Во-первых, у него удобный встроенный UI-интерфейс. Во-вторых, в Rive есть раздел Community, где авторы выкладывают бесплатные анимации.

В-третьих, — и это главное преимущество — в Rive есть State Machine. Это визуальный способ связать анимацию воедино и определить логику, которая управляет переходами. State Machine позволяет создавать интерактивную графику движения, готовую к внедрению в ваш продукт, приложение, игру или веб-сайт.

State Machine включает несколько уровней:

• Graph — пространство, в котором мы добавляем состояния и соединяем переходы.

• State — анимации временной шкалы, которые могут воспроизводиться в нашей машине состояний.

• Transaction — переходы представляют собой логическую карту для State Machine.

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

• Layers — слой State Machine, который позволяет воспроизводить одну анимацию за раз.

Подробнее о том, как работает Rive и как интегрировать его в проект, в нашем блоге.

Дизейнеры заметили, что ранее анонсированный сервис Figma AI обучен на существующих приложениях. Например, «погодное приложение», созданное в с помощью новой функции «Создать дизайн» о Figma AI в результате в основном аналогична приложению «Погода» от Apple (слева). Дизайнеры пробовали три раза выполнить этот запрос, результат тот же.

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

Вова заглянул в гости в Garage Eight и провел живой диалог с нашим дизайн-комьюнити. Получилась не лекция, а спич-импровизация, из которой мы узнали: 

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

А еще спикер поделился инсайтами разработки дизайна в Яндексе, своими собственными факапами и выводами, к которым они привели. Смотри запись встречи!

А если ты уже преисполнился во всех этих вопросах, может, тебя заинтересует вакансия дизайн-лида? ;-)

#статья Как безболезненно внедрить исследования в продуктовую разработку

Дизайнеры Samokat.tech начали проводить продуктовые исследования внутренними силами команды. «‎Что из этого вышло?» и «‎Как внедрить такой подход?» – разбираем на конкретных примерах от первого лица.

Примерное время прочтения: 10 минут.

За это время вы узнаете, почему исследования своими руками оказались полезными для дизайнеров, как выбрать подходящий метод исследования, а также прочитаете о трёх наших реальных кейсах:

– Глубинные исследования пользователей сайта

– Немодерируемые UX-тесты на сотрудниках и пользователях

– Физические исследования при работе на складе

Читать статью

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

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

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

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

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

«AI-инструменты для дизайнеров» — новый курс Яндекс Практикума

Курс для дизайнеров с опытом: вы не будете тратить время на освоение базовых инструментов, а сосредоточитесь на главном — работе с нейросетями. По итогу обучения вы научитесь подбирать и применять AI-инструменты, а не просто пользоваться набором готовых решений.

В программе минимум теории — вас ждут воркшопы с практикующими дизайнерами, а также индивидуальная и групповая работа над учебными кейсами. Воркшопы проходят с 12:00 до 16:00 мск, сессии ответов на вопросы — по средам с 19:00 до 20:00 мск. 

Курс рассчитан на 4 недели. Чтобы процесс обучения был комфортным, мы рекомендуем уделять ему не менее 7 часов в неделю: 4 часа на воркшоп, 1 час на сессию Q&A и не меньше 2 часов на самостоятельную работу.

Будете практиковаться сразу в нескольких нейросетях, с фокусом на Midjourney— доступ мы предоставим. Начнёте с неё и Stable Diffusion в оболочке Fooocus, а потом постепенно добавите и другие нейросети, чтобы сформировать устойчивый навык работы с ИИ. В конце обучения у вас будет 2 групповых проекта, которые можно добавить в портфолио.

Разбор реального кейса от команды Яндекса. Креативная инхаус студия Magic Camp поделится кейсом создания фотобанка изображений с помощью ИИ. Команда подробно расскажет про весь цикл и детали: какая была проблема и задача, какие инструменты использовали, по каким этапам шли и какие результаты получили.

→ Узнать все подробности и записаться на курс

Должен ли дизайнер думать об этике приложений, которые он создает?

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

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

В новом выпуске подкаста «Бремя технологий» Артур Арсенов, Product design lead Garage Eight, рассказал, почему специалистам не стоит пытаться решать краткосрочные цели бизнеса манипулятивными методами, и как простым пользователям защищаться от такого абьюза. 

Слушай подкаст по ссылке и делись в комментариях своим мнением по теме :-)

OpenAI обновила интерфейс приложения ChatGPT, сделав его минималистичным. Теперь пользователь общается с большим чёрным кругом, который изменяет свои формы и размеры в зависимости от происходящих событий. Когда ИИ говорит, то круг меняется, визуально усиливая ощущение диалога и взаимодействия.

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

Чёрный круг, выступающий в роли ИИ-собеседника, превращается в стилизованные волны звука, когда ChatGPT даёт ответ. Это визуально усиливает у пользователя ощущение коммуникации.

В настоящее время обновлённый интерфейс ChatGPT доступен только для настольных и мобильных приложений ChatGPT. В веб-версии сервиса по-прежнему используется стандартный текстовый интерфейс.

У Apple оказалось так много всего интересного в экосистеме, что компания представила роадмапы (Pathways) по своим сервисам. Внутри каждого из шести направлений есть ссылки, где структурно представлена через документацию и видео-туториалы подробная база данных по необходимым библиотекам для разработчиков.

Apple пополнила свою библиотеку макетов для Figma. Дизайнерам стали доступны следующие шаблоны:

• TipKit;

• Wallet;

• Tap to Pay on iPhone;

• Siri & App Shortcuts;

• Sign in with Apple;

• Messages;

• Live Activities;

• Apple Pay;

• App Clips.

На YouTube-канале DesignCode опубликовали бесплатный курс по созданию 3D-моделей для iOS и visionOS в Spline. В двухчасовом ролике обсуждают следующие темы:

• Базовые формы;

• Материалы, свет и эффекты;

• Камера, анимации и состояния;

• Кнопки и компоненты;

• Пошаговая анимация;

• Создание 3D-иконки для iOS-приложения;

• Создание 3D-иконки для visionOS-приложения;

• Создание 3D-сцены;

• Анимация частиц;

• Экспорт моделей в SwiftUI-проекты.

Главные принципы инклюзивного дизайна 

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

Чтобы соответствовать высокому уровню доступности по WCAG, необходимо придерживаться 4 принципов.

1. Воспринимаемость

• Всегда должна быть текстовая альтернатива нетекстовому контенту.

• Капча должна быть представлена в нескольких формах.

• Нельзя пренебрегать контрастностью.

2. Понятность

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

3. Управляемость

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

4. Надежность

Интерфейс должен оставаться доступным при изменении версий продукта или операционной системы.

Больше примеров доступных и недоступных интерфейсов найдете в нашей статье. А за вдохновением приглашаем в тг-канал нашей дизайн-команды.