Как поднять чек на лендингах, экранные разрешения, карта эмпатии...

Дайджест постов за эту неделю:

Как в разы поднять чек на создании лендинов

Что нужно знать про экранные разрешения

Как качаться в мидла UX/UI-дизайнеру

Инструменты UX – Карта эмпатии

Если посты были полезными, дайте знать в реакциях.

Как выйти на высокий чек в фрилансе?

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

Почему клиент заплатит больше?

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

Разберем три основных фактора, которые определяют бюджет проекта:

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

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

3. Уровень заказчика
Под уровнем подразумевается размер бизнеса клиента, опыт разработки похожих продуктов, а также профессиональный подход в работе. Опытный клиент не будет тратить свое и ваше время на бесполезную коммуникацию и кучу ненужных доработок. Если есть выбор – лучше выбирать клиентов из среднего бизнеса, IT и продуктовых компаний, где налажен эффективный процесс взаимодействия с внештатными работниками. Кроме того, успешные компании банально готовы платить больше.

Вывод

Основная стратегия для фрилансера – получать больше, тратя на работу меньше времени.

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

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

Кейс банковского приложения на Behance

Хочу поделиться с вами хорошим примером презентации кейса. Ссылка на Behance

Что мне особенно понравилось

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

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

– Ребята создали крутую анимацию в AfterEffects, демонстрирующую работу приложения, а также записали видео о процессе создания макета.

– Также порадовали качественные мокапы с билбордами.


Что можно было бы улучшить

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

– Упомянуто, что проводились интервью, создавалась CJM, но в презентации этого не видно

– Кроме того, вайрфреймы представлены не очень информативно, хотелось бы более детально понять логику работы приложения.

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

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

Как вам кейс?

Присылайте свои работы в бот @uxtrends_bot
Сделаю по ним разбор на канале.

Быстрое добавление макетов в Figma

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

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

1. Выбираете понравившийся компонент, нажимаете на кнопку "Copy to clipboard"

2. Переходите в Figma и вставляете его в свой проект. Все! Можно адаптировать макет под свои нужды.

Очень удобно и намного быстрей чем поиск по каталогу в комьюнити Figma.

Якорные объекты - основы композиции в веб-дизайне

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

Для направления взгляда пользователя в вёрстке страниц используются якорные объекты – наиболее заметные элементы дизайна, привязанные к сторонам экрана или его центру.
Рассмотрим два основных метода размещения якорных объектов в макете...

1) В точках

Якорный объект может располагаться в одном из углов или в визуальном центре прямоугольного контейнера. Если в дизайне есть крупный элемент (текст или графика), его можно расположить по центру, а остальные мелкие объекты (логотип, элементы навигации, иконки) - по углам экрана.


2) По сторонам

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


Вывод

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

Думаю стоит написать серию постов про основы композиции. Поддержите в реакциях, если тема вам интересна!

Зачем разрабатывать продукты по методу Jobs to be Done

Jobs to be Done (JTBD) - одна из наиболее популярных теорий, которая помогает определить, что движет пользователями, когда они приобретают товары или услуги. Она смещает фокус с размышлений о решениях и возможностях на то, чего на самом деле хотят достичь клиенты. Разберемся в сути теории и в том, в каких проектах её стоит применять.


Что такое JTBD

Часто JTBD называют фреймворком, но на самом деле это теория, методологический подход, который может быть встроен в фреймворк. Основной посыл – выявить ценность в том, что продукт делает для пользователя, а не в том, чем этот продукт является. Наиболее ярко эту идею выражает высказывание американского экономиста Теодора Левитта: "Людям не нужна дрель, им нужна дырка в стене".


Кому следует применять JTBD

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


Как это работает

Ключевым моментом в JTBD является теория "работ" (jobs). Человек "нанимает" продукт на работу, чтобы решить свои задачи. При этом у вашего клиента есть не только первостепенная задача (Main Job), но и косвенная (Related Job), о которой он может даже и не подозревать. Первостепенные и косвенные задачи могут быть:

1) функциональными – то, как люди используют продукт для решения задачи
2) эмоциональными – то, как люди хотят себя ощущать используя продукт
3) социальными – то, как клиенты хотят, чтобы их воспринимали другие люди

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

JTBD не является заменой существующих подходов и рабочих процессов. Он лишь помогает посмотреть на то, как люди принимают решения, и сформулировать гипотезы на основе теории "работ".
Если мы понимаем ситуацию, которая приводит к возникновению проблемы, мотивацию, которая побуждает её решить, и конечный результат, то мы можем создать наиболее ценный продукт. Ключевыми элементами здесь являются набор данных о потребности человека (Job Story), которые можно выразить в следующей формулировке:

"Когда..." - ситуация
"Я хочу..." - мотивация
"Чтобы..." - результат

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

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

Разбор кейса банковского приложения, якорные объекты, Метод JTBD...

Обзор статей за эту неделю:

Как выйти на высокий чек в фрилансе?

Кейс банковского приложения на Behance

Figcomponents: Быстрое добавление макетов в Figma

Якорные объекты - основы композиции в веб-дизайне

Зачем разрабатывать продукты по методу Jobs to be Done

Если была годнота, дайте знать в реакциях.

Наиболее прибыльные направления в UI/UX дизайне

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

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

Поэтому, если вы хотите заработать больше, то лучше всего ориентироваться именно на работу в продукте, а лучше если таких проектов будет несколько. 2-3 проекта в год могут вполне обеспечить вам хороший доход не имея при этом нерватрёпку с постоянным поиском новых клиентов.

Выделю топ-3 наиболее перспективные ниши:

1. Сервисы для бизнеса

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

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

Примеры: CRM-системы, сервисы управления проектами, сервисы email рассылок, автоматизации бизнес процессов, аналитики


2. Потребительские сервисы

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

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

Примеры: сервисы доставки еды, развлекательная индустрия, аренда, eCommerce, маркетплейсы


3. Финансовые приложения

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

Примеры: онлайн банки, платформы для инвестиций, трейдинг, NFT, крипта

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

На этом все!

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

Работу прислала подписчица. Приложение предназначено для учеников студии и должно помочь в оформлении абонемента, а также предоставлять дополнительную информацию о занятиях.
Ссылка на Behance

Что понравилось

– С первого скрина понятно о чем презентация. Проект подробно описан, выделены цели и ЦА, прописаны этапы проекта.

– Хорошо проработана подготовка исследований: сделан подробный портрет пользователя и CJM. Особо стоит отметить продуктовый подход – были проведены реальные интервью и проверены гипотезы.

– Онбординг и основные шаги по приложению представлены в виде анимации. Это не только оживляет презентацию, но и позволяет более наглядно понять, как пользоваться приложением.

– Общее впечатление от приложения положительное: оно выглядит функциональным и логичным, а главные экраны проработаны очень детально.


Что можно улучшить

1. Оформление презентации

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

– Типографика в презентации выглядит немного монотонно. Особенно в разделах "Исследования" и "Портрет пользователя" текст трудно читать. Чтобы облегчить восприятие информации, стоило бы выделить ключевые моменты и сделать их более заметными.

– К сожалению нет достаточного пояснения к экранам. Это, кстати наиболее частая ошибка в кейсах! Пример как можно сделать, пояснение: “Пользователь может всего за 2 клика продлить свой абонемент” и показать взаимосвязанные скрины.


2. Исследования

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

– В User Flow диаграмме необходимо отображать только релевантные экраны и наиболее важные шаги пользователя к достижению цели. Компоненты UI, как "кнопка о продлении" или "число и дата" ими не являются. Следует также избегать слишком сложных ответвлений в карте.

– В презентации представлены 4 скрина вайрфреймов без пояснений – это затрудняет понимание их роли в презентации.


3. Визуальный стиль

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

– Дизайн сделан под темную тему, было бы интересно посмотреть на приложение в светлой теме

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


4. Типографика

– Montserrat смотрится на мой вкус слишком формально. Вместо довольно избитого шрифта соило бы попробовать более интересное сочетание

– Также стоит учесть, что размер headline3 не должен быть больше headline2


5. Интерфейс

Если всматриваться в детали, есть некотрые нюансы в UI, которые стоит проработать. Например:

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

– У главного меню должно быть больше отступа от низа экрана из-за плашки home indicator.

– Выпадающий список для выбора месяца не подходит для мобильного приложения

– Стоило бы также подписать состояния компонентов


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

Обзор получилося длинный и нудный, зато надеюсь полезный.
Друзья! Если у вас есть работы, которыми вы хотите поделиться, присылайте ссылку в бот @uxtrends_bot

Как правильно качать насмотренность

Сегодня поговорим про один из наиболее недооценённых навыков начинающих дизайнеров. Оговорюсь, сразу, что я не особо люблю само слово "насмотренность". Поэтому для начала давайте разберемся, что это такое.

Насмотренность – это визуальный опыт приобретённый в результате просмотра большого количества визуальных образов. Он формирует эстетический вкус – способность отличить хорошую работу от плохой.

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

Как качать насмотренность?

1. Выделите время
Даже 1-2 часа в день могут помочь прокачать навык. Лучше всего подойдет утро т.к новый зрительный опыт довольно сильно грузит мозг. Качать насмотренность, это тоже работа!

2. Анализируйте
Просто смотреть чужие работы на Behance или Dribbble не даст вам необходимого опыта. Для того, чтобы достичь результат, важно активно анализировать чужие работы. Разбирайте макет на составляющие компоненты, обращайте внимание на композицию, шрифты и цветовую палитру.

Совет:
Попробуйте скопировать скриншот в Figma и повторить работу. Это поможет лучше понять все приёмы. Также делайте свои ремиксы взяв за основу визуальные элементы, экспериментируйте!

3. Систематизируйте
Сохраняйте интересные референсы в папках на компьютере, Pinterest или Notion. Это поможет вам быстро находить нужные идеи для вдохновения.

И наконец, что смотреть?

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

На последок, ссылки для инспирации:

https://www.awwwards.com – самый сок актуальных трендов в веб-дизайне

https://dprofile.ru/ – российский биханс ))

https://cyrillic.design/ – подборка русскоязычных страниц с хорошим дизайном

https://httpster.net – отличная подборка по веб-дизайну

https://godly.website/ – подборка крутых веб-страниц с анимироваными привью

https://www.ffffff.website/ – тут только минималистические веб-страницы с белым фоном

https://saaslandingpage.com/ – подборка продуктовых лендингов

https://www.niceverynice.com/ – хороший поиск по UI-паттернам

Если какие то забыл, кидайте ссылки в комменты!

Основы дизайна – промахи и ошибки

Совершение ошибок - неотъемлемая часть человеческой природы. Иногда людей подводит память, в других случаях это могут быть случайные промахи или отсутствие опыта.

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

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

Рассмотрим несколько подходов, как можно избежать ошибок и промахов со стороны пользователя:


1. Используйте знакомые паттерны

Ваш пользователь не обязан разбираться с логикой вашего продукта, выяснять где находится меню, как работает тот или иной элемент. Не изобретайте велосипед – учитывайте опыт своих пользователей с другими продуктами! Как этого добиться? Проводите основательный ресёрч перед проектировкой интерфейса. Выясните, какими продуктами пользуются ваши пользователи, как это выглядит у конкурентов...

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


2. Предотвращайте неопределенность

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

Примеры: 

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

– Корзина в интернет-магазине, позволяющая заранее посмотреть товары, конечную цену и условия доставки


3. Поясняйте и предупреждайте

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

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

Примеры:

– Онбординг с пошаговым пояснением как пользоваться продуктом

– Тултип с пояснениями

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


4. Прощайте промахи

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

Примеры:

– Распознавание опечаток в поле поиска Yandex

– Автоматическое сохранение документов во время печати в Google Docs 

– Возможность восстановить удаленное письмо из корзины


Заключение

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

Как исследовать по методу Jobs to be done (JTBD)

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

Как пример я взял реальное исследование малайзийской компании доставки еды GrabFood. С помощью их приложения пользователи могут заказать еду на дом (аналог ЯндексЕда) 


1. Определяем цель исследования

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


2. Гипотезы по JTBD

Для того чтобы найти “работы” по JTBD, важно было определить, что повлияло на решение клиентов отказаться от привычного поведения – покупки еды в ресторане или магазине.

Команда GrabFood использовала фреймворк “Силы прогресса” (Force Diagram Framework), где традиционной модели поведения (покупка еды в ресторане) противопоставляется новая прогрессивная модель (заказ еды на дом). При этом на выбор пользователя оказывают влияние два вида силы:

1) Удерживающие силы
Основные силы удерживают переход пользователя к новой модели поведения: страх перед будущем и привычки настоящего. Чтобы их понять необходимо выяснить: 

– Что люди использовали до появления GrabFood для выполнения тех же задач?

– Какие страхи заставят их вернуться к привычному поведению? Какие опасения вызывает новый продукт?

2) Подталкивающие силы
Другие две силы подталкивают к перемене мышления: триггеры, которые заставили пользователей изменить свои привычки и стремление к новому решению (образу будущего)

– Что подтолкнуло их к поиску иного пути? 

– Что привлекательного они нашли в новом решении?

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


3. Интервью

Опрашивая своих пользователей исследовательская команда сфокусировалась на следующих вопросах:

Для определения ситуации или обстоятельства
– Можете ли вы вспомнить, когда вы в последний раз пользовались сервисом GrabFood?

Для понимания основной потребности
– Почему вы заказали именно эту еду?

Для понимания привычки
– Что вы использовали до GrabFood, для решения той же задачи? 


4. Анализ данных

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

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


5. Создаем Job Stories

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

Job Story для покупателя может выглядить следующим образом:

Когда мои дети хотят есть я хочу быстро заказать разнообразные блюда, чтобы угодить каждому.

У владельца ресторана Job Story будет выглядеть иначе:

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

6. Решение

Были устранены препятствия мешающие заказывать родителям еду через GrabFood – в ассортименте появились комбинированные предложения для семей.

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

Пригодится вам такое в проектах? Дайте знать в реакциях!

❤️ – надо попробовать
🤓 – уже использую
😐 – пока не знаю

Прибыльные направления в UI/UX, насмотренность, пример исследований по JTBD

Дайджест статей за неделю:

– Наиболее прибыльные направления в UI/UX дизайне

– Обзор кейса мобильного приложения студии танцев

– Как правильно качать насмотренность

– Основы дизайна – промахи и ошибки

– Как исследовать по методу Jobs to be done (JTBD)

И не забывайте, если у вас есть работы, для разбора на канале, присылайте ссылку в @uxtrends_bot

Кейсы мобильных приложений на Behance – как не облажаться

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

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

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

Что же делать, если все-таки очень хочется в мобайл? Я не знаю почему большинство молодых дизайнеров начинают изобретать велосипед. Все уже придумано и отработано до вас! Просто изучайте гайдлайны iOS и Material Design, скачивайте и анализируйте топовые приложения.

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

Вот несколько ресурсов для старта:

– iOS16 Кит для Figma с компонентами под iPad и iPhone

– Тут прямо туториал в Figma для создания приложения iOS

– Официальный Material 3 Design Kit

– Material 2 Design Kit для Figma

F-паттерн в дизайне веб-страниц

Исследования NNGroup, проведенные с помощью айтрекинга, показали, что пользователи просматривают страницы по одному и тому же паттерну, известному как F-паттерн. Рассмотрим, что это такое и как применить в разработке макетов.

Что такое F-паттерн

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


Почему это важно знать

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


Как применять на практике

Основной посыл – упрощайте подачу информации. Расставляйте акценты и форматируйте текст, чтобы направить пользователей к наиболее важной информации. 

Несколько простых советов от NNGroup:

– Включите самые важные моменты в первые два абзаца на странице.

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

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

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

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


Но не стоит думать, что все страницы нужно создавать по F-шаблону! Часто именно добавление “неудобных” элементов позволяет удержать внимание. С появлением более сложных макетов, пользователи адаптировались – появились другие варианты чтения веб-страниц. О них напишу в другой раз, если вам интересно.

Дизайн интерфейсов всё…

Теперь нейронки будут генерить интерфейсы по текстовому запросу. Сервис Galileo AI правда еще в тестовом доступе, но обещают, что сгенерированные макеты можно будет редактировать в Figma.

Ну что дизайнеры интерфейсов, пора нам искать другую работу? 🤔

Разбор кейса на Behance – фитнес приложение

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

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

В целом концепция проекта ясна, даже не надо сильно вчитываться. Основной акцент сделан на яркие, неоновые цвета и модную темную тему. К сожалению, есть ряд вещей которые мне совсем не понравились. Начнем с презентации...


Оформление презентации

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

Совет: Относитесь к текстам крайне внимательно, даже если большинство посетителей их не читают! Выделяйте главные мысли, сделайте информацию легко считываемой.

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

– Непонятно зачем пронумерованы визуальные разделители слайдов. Они не несут никакой информации, а скорей вводят в заблуждение. Я так и не понял, за что отвечают разделы 1,2 и 5…


Исследования

Довольно невнятно представлены и исследования в виде бессвязных блоков без какого-либо описания. Больше похоже, что это было сделано "для галочки".

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

– Непонятно как сформирована цветовая палитра и за что отвечают отдельные цвета. Также практически отсутствуют полутона.

– К сожалению нет описания основных элементов дизайн-системы. 


Дизайн приложения

Недостаток исследований и невнимание к деталям также просматривается и в самом интерфейсе приложения:

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

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


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


А как вам кейс?

Кстати, присылайте свою работу, на разбор в @uxtrends_bot

Сегодня знаменательный день для канала. Ровно год назад на uxtrends вышел первый пост 🎉

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

Ещё у меня большие планы на развитие канала о которых вы вскоре узнаете.
Спасибо всем подписчикам за вашу поддержку!

Как исследовать проблемы по методу “5 почему”

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

Метод "пять почему" — помогает сосредоточиться на сути проблемы, а не на её последствиях, и определить наиболее эффективные способы решения.

Прародителем метода считается, Сакичи Тоёда – известный изобретатель и основатель корпорации Toyota. Свой подход он описал в книге «Производственная система Toyota: за пределами крупномасштабного производства» которая вошла в основу методов управления качеством, производства и обслуживания клиентов. 


Как это работает

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

Вот пример, как пять почему можно использовать в продуктовом дизайне:

Проблема: Мобильное приложение имеет низкий рейтинг и негативные отзывы пользователей.

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

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

3. Почему интерфейс запутанный?
Ответ: Разработчики не провели тщательное тестирование интерфейса с пользователями.

4. Почему разработчики не провели тщательное тестирование интерфейса?
Ответ: Разработчики были ограничены по времени и бюджету.

5. Почему разработчики были ограничены по времени и бюджету?
Ответ: Менеджмент не оценил необходимый объем работы и не выделил достаточные ресурсы на проект.

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


Как применять на пактике

– Для начала убедитесь, что вы понимаете проблему как можно лучше. Изучите её, чтобы получить полную картину.

– Найдите ответ на вопрос “Почему это произошло?” Если причин несколько лучше всего отобразить их в виде диаграммы или таблицы.

– По каждой из выявленных причин задайте еще раз вопрос “Почему это произошло?”

– Копайте все глубже к первопричине. Как правило, задав как минимум 5 "почему" вы докапаетесь до первопричины.

– Раскрыв достаточно уровней проблемы, проанализируйте первопричины и сделайте выводы.


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

Было полезно? Дайте знать в реакциях.

Как не облажаться с мобильным кейсом, F-паттерн, 5 почему...

Дайджест статей за неделю:

Кейсы мобильных приложений на Behance – как не облажаться

F-паттерн в дизайне веб-страниц

Сервис Galileo AI создаёт интерфейсы по текстовому запросу

Разбор кейса на Behance – фитнес приложение

Как исследовать проблемы по методу “5 почему”

Если темы были полезны, дайте знать в реакциях!