Частые ошибки в сопроводительном письме

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


1. Плохая читаемость и орфографические ошибки

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

Решается очень проосто: если текста получилось больше половины страницы, перечитайте и сократите! Проверяйте читаемость, например сервисом Главред. Обязательно дайте просмотреть ваше письмо знакомым.

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


2. Много про личную жизнь или хобби

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

Что-то типа: "Ещё у меня есть кот Фёдор. В свободное время я люблю гулять в парке." Вряд ли это как-то приблизит вас к получению работы мечты. 

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

Пишите кратко! Одного предложения должно полностью хватить. Если про хобби писать нечего – просто не пишите! Это тоже норм.


3. Невнятный адрес электронной почты

При отправке, используйте вразумительный адрес электронной почты, а также фамилию и имя в строке отправителя. Например, отправитель: Иван Пирогов; ivan.pirogov(a)yа .ru а не отправитель: Иван; pirojok4(a)ya .ru

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


4. Непоследовательное повествование

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

И самое главное! Если вы отправляете резюме не рекрутеру, а тому кто отвечает за дизайн – арт директору или дизайн лиду, сокращайте ваш текст в 2-3 раза. Эти люди не будут уделять внимание тексту. Первым делом они хотят увидеть, что вы умеете – ваше портфолио. В этом случае долгие вступления могут только помешать. 


На этом все! Про то, как составлять и упаковывать портфолио напишу в другой раз.

Психология в дизайне – эффект прайминга

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

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


Как применять в дизайне

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


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


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

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


Избегайте негативных ассоциаций
Упоминания негативных эффектов в контексте продукта могут вызвать нежелательные ассоциации у аудитории и повысить отток пользователей. Например, попытка убедить пользователей при подписке на рассылку "100% гарантия – никакого спама" может скорей иметь обратный эффект.


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


На этом все!

Какими скилами необходимо владеть начинающему UX/UI-дизайнеру?

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

Какие основные знания в дизайне необходимо освоить на старте

1) Базовые знания типографики
2) Умение работать с цветом и конрастом
3) Лейаут и работа с сетками
4) Основы проектирования интерфейсов / понимание UI-паттернов

Умение ретушировать в Фотошопе или рисовать иллюстрации в векторе – не обязательны, но будут большим плюсом!


Какими инструментами нужно уметь владеть джуну

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

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


Итак, что должен уметь UI/UX-джун?

– владеть базовыми знаниями в разработке интерфейсов

– владеть инструментами (Figma, оновные дизайн методологии, исследование ЦА)

– уметь различать плохой дизайн от хорошего (тренировать насмотренность)

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

– уметь самостоятельно учиться

Также не забываем про софт-скилы – навыки взаимодействия с командой и презентации.

На этом все! В следующий раз напишу про то, какие методы исследования нужно изучать на старте и как качаться в мидла. А пока дайте знать было ли все понятно? Может какие-то вопросы остались нераскрыты?

Как избежать доработок в дизайне веб страниц

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

1. Продумайте адаптивную верстку

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

– Ноутбуки и стационарные компьютеры с шириной макета 1024 или 1920 пикселей

– Планшеты: ширина макетов — 768 пикселей

– Мобильные телефоны:  ширина макетов — 360 пикселей

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


2. Проработайте состояния интерактивных элементов

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

– Отображайте следующие состояния: не выбранный элемент, выбранный элемент, ховер (наведение курсора), нажатие, неактивное состояние (элемент нельзя выбрать)

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

– для полей ввода не забывайте про сообщения об ошибках/успешной отправке формы 


3. Предусмотрите пустые состояния динамических страниц

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

– прорабатывайте внешний вид “пустых страниц”, даже если никаких действий от пользователя не требуется

– создавайте дизайн страницы подгрузки данных, если вывод данных должен занимать какое-то время


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

Создавая мобильную версию страницы используйте другие стили для шрифтов, не смешивая их с десктопной. Например, если у вас в десктопной версии заголовок Title (80px) не стоит менять его на Subtitle (45px) в мобильной версии только потому, что там используется шрифт меньшего размера.

– создавайте отдельные стили для каждого устройства, соответственно подписывая их в макете, например Desktop/MainTitle, Tablet/MainTitle, Mobile/MainTitle итд

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


В заключение

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

Также почитайте по теме: Топ 6 частых ошибок в дизайне лендингов 


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

Ошибки в сопроводительном письме, эффект прайминга, скилы в UX/UI...

Посты вышедшие на этой неделе:

Частые ошибки в сопроводительном письме


Психология в дизайне – эффект прайминга


Какими скилами необходимо владеть начинающему UX/UI-дизайнеру?


Как избежать доработок в дизайне веб страниц


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

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

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

Стоимость создания лендинга из 5 блоков включая дизайн и верстку на конструкторе в среднем колеблется в пределах $100 - $300

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


Сколько на самом деле можно заработать на лендинге?

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

1. Исследование ЦА
2. Конкурентный анализ
3. Проработка структуры на основе пользовательских сценариев
4. Создание контента на основе УТП
5. Разработка прототипа
6. Тестирование
7. Разработка уникального дизайна
8. Верстка под разные устройства
9. Разработка стратегии продвижения
10. Настройка аналитики

Так за полный цикл разработки лендинга можно попросить на порядки выше, чем просто за дизайн (в размере $900 - $1500) и дать клиенту гораздо более качественный результат.


Что делать если навыков нехватает?

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

Это лишь один из подходов, есть и другие. О них напишу в другой раз. Стоит также разобрать другие виды фриланс проектов?

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

Когда мы говорим о разрешении дисплея, мы всегда подразумеваем количество пикселей на экране. Например, первый iPhone имел базовое разрешение 320 x 480. С улучшением качества дисплеев, плотность пикселей на экранах стала расти. Для измерения физической плотности точек традиционно использовался дюйм. Разберем наиболее часто применяемые обозначения:

DPI (Dots Per Inch) — количество точек на дюйм. Величина измерения изначально использовалась в печати. Чем меньше DPI, тем ниже разрешение.
Android позаимствовал термин DPI для обозначая плотности экранных точек (пикселей) на дюйм. Поэтому в описании разрешения андроидных дисплеев можно встретить сочетания HDPI, XHDPI, XXHDPI итд...

PPI (Pixels Per Inch) обозначает плотность пикселей на дюйм для мониторов и Apple дивайсов. Например, в экранном дюйме iPhone 8 помещается 326 экранных точек (пикселей). Стандартные параметры для Mac – 72 PPI, для Windows – 92 PPI.

DP (Device independent Pixel) пиксель независимый от устройства – это единица измерения используемая Android, для обозначения размера пикселя независимо от разрешения устройства. В зависимости от разрешающей способности дисплея в одном DP может поместится от 1 до 4 пикселей.

PT - Point (точка) по существу тоже самое, что и DP, только этот термин использует Apple.

Зачем это нужно знать?
В векторных программах, как например Figma, можно создавать дизайн кратный 1х не зависимо от PPI конечного устройства. Поэтому если вы работаете с векторной графикой, то беспокоится о плотности пикселей устройства не стоит.

Однако в тех случаях когда необходимо передать разработчикам растровую графику для мобильного приложения базовые пиксели придется масштабировать под соответствующие экранные разрешения. Для этого в экспорте PNG/JPG файлов указывается множитель кратный разрешению конечного устройства. Например, для разных версий iPhone достаточно использовать суффиксы @1x, @2x, @3x, чтобы получить соответствующие множители. С Android все немного сложней из-за огромного количества разных устройств.

На картинке под постом – 5 наиболее популярных экранных PPI параметров для Android с соответствующими множителями. 

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

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

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

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


Какими методологиями должен владеть мидл?

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

Если вы хотите в продуктовую команду – пригодится умение работать в Agile и Scrum.

Что должен уметь мидл?

– Уверенно владеть всеми основами UI дизайна
– Работать следуя дизайн-процессу
– Иметь базовый опыт UX-исследований
– Уметь строить гипотезы и тестировать их на практике
– Уметь агрегировать и анализировать информацию, приоритизировать задачи
– Уметь работать в команде
– Иметь хорошие навыки самоорганизации, презентации и коммуникации

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

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

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

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

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

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


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


Как составить карту эмпатии
Создание карты эмпатии обычно состоит из пяти этапов:

1. Постановка цели

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


2. Сбор информации о ЦА

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


3. Создание персонажей

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


4. Заполнение карты эмпатии 

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

1) Что видит и слышит?
Откуда персонаж получает информацию о вашем продукте. Например от друзей, из рекламы, соцсетей итд.

2) Что он видит и слышит?
С чем персонаж соприкасается в быту и на работе, какими продуктами пользуется, какие места посещает.

3) Что думает и чувствует?
Какие эмоции испытывает совершая действие? Чем мотивированы его решения? 

4) Что он говорит и делает?
Как персонаж ведет себя? Как аргументирует свои поступки?

5) Боли
Страхи, сомнения и препятствия, которые мешают принятию решения

6) Выгоды и ценности
Какие проблемы он решает и как ваш товар поможет их удовлетворить 


5. Анализ полученных данных

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

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

Шаблон Empathy Map в FigJam

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

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

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

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

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

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

Как качаться в мидла 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 

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


Заключение

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