Порог Доэрти, Тренды 2022, советы по созданию формы регистрации...
Недельный дайджест:

— Обзор 7 лучших курсов по UX и дизайну интерфейсов

— Психология в дизайне — Порог Доэрти

— Как повысить ценность продукта в глазах пользователей — эффект IKEA

— Тренды цифрового дизайна 2022 года

— Фокусировка внимания - как усилить концентрацию в течении дня

​​— 5 советов по созданию удобной формы регистрации

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

Обзор 12 лучших портфолио UX-дизайнеров

Без собственного портфолио карьерно далеко не уедешь, это знает, каждый, кто работает в диджитал. Хорошее портфолио знакомит работодателей и потенциальных клиентов с тем, как вы проектируете интерфейсы и подчеркивает ваши сильные стороны. В идеальном случае вы можете донести это за несколько секунд знакомства с портфолио.
По ссылке вы найдете 12 примеров портфолио UX дизайнеров, с разбором всех сильных сторон. Крайне рекомендую для прочтения!
https://ux-journal.ru/top-luchshih-portfolio-ux-dizajnera.html

​​Основы UX — Закон Теслера

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

Кстати, интересный факт: именно Ларри Теслер ввёл в оборот комбинацию клавиш Ctrl+C, Ctrl+V.

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

Упрощайте с умом! Если пользователю дать слишком много контроля над приложением это усложнит интерфейс, с другой стороны слишком упростив приложение ради удобства пользования может усложнить его разработку. Также не стоит забывать, что чрезмерное упрощение может снизить ценность продукта для пользователя. Для того, чтобы найти золотую середину необходимо собрать как можно больше информации о пользователях, проанализировав ее и найти наиболее ключевой функционал, который должен присутствовать в системе. На картинке внизу, пример из онлайн-магазина: пользователю необходимо просмотреть все возможные варианты чтобы выбрать нужный товар. Поэтому необходимо отобразить все самбнейлы с вариантами.

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

​​Психология в дизайне - Эффект якоря

Этот психологический эффект является одним из базовых в маркетинге и звучит следующим образом:

Первая часть информации влияет на последующие суждения клиента.

Как это работает можно описать на следующем примере: отправившись в магазин вы хотите купить новый смартфон запланировав потратить на покупку $200. Понравившийся вам стоит $300, что превышает ваш бюджет. Вскоре вы находите другой смартфон за $250. Эта цена кажется вам уже более приемлемой по сравнению с первыми вариантом, несмотря на то, что она также превышает бюджет. Таким образом, в процессе принятия решений первая цена выступает в качестве ориентира или «якоря».

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

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

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

На этом все. Надеюсь было полезно!

Метафоричный анимационный фильм Toss — THE JOURNEY

Зацените брендинговое видео финансовой платформы Toss. Очень интересное решение, где главный герой - абстрактный брендинговый элемент путешествующий по внеземным мирам. Какое это имеет отношение к финансам? Да пожалуй никакого! 🙂 зато смотрится здорово!

Также можете взглянуть как это все делалось на странице проекта: https://www.behance.net/gallery/152017931/Toss-THE-JOURNEY

Как создать идеальное поле поиска

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

1. Расположение

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

2. Внешний вид

Строка поиска должна быть видна с первого взгляда. Для этого можно выделить обводку поля и кнопку поиска более ярким цветом, а вот для самой строки ввода лучше использовать белый фон. Также учитывайте, что ваше поле поиска должно быть достаточной длинны. Оптимальный размер поисковой строки должен быть не меньше 27 символов.
Пример: сайт Aliexpress

3. Текст подсказки

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

4. Кнопка поиска

По всем правилам пользовательского удобства справа от строки поиска должна располагаться кнопка поиска. Ее можно не отображать в том случае, если запрос обрабатывается в реальном времени и пользователь может видеть результат во время печати. К томуже большинство пользователей знают, что запрос можно отправить нажав на Enter.
Если же поиск является центральной частью вашего приложения или пользователю необходимо выбрать другие параметры, то кнопка поиска должна безусловно присутствовать.
Пример: сайт Booking.com

5. Иконка

Символ поиска (увеличительное стекло) как правило выступает ориентиром помогая найти строку поиска. В этом случае иконка располагается слева прямо в строке ввода (пример от Apple). Иконку поиска также можно использовать как кнопку справа от поля ввода. В данном случае она должна быть более контрастной, давая пользователю понять, что это интерактивный элемент (см. пример от Aliexpress).

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

Инструменты UX — Метод персон

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

Когда стоит применять

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

Как создать портрет пользователя

Основа любого исследования ЦА, это сбор данных. Рассмотрим пошагово как создать портрет пользователей по методу персон:

1. Сбор данных

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

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

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

Пример обработки данных опроса для сервиса доставки еды

3. Оформление персон

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

Пример персоны для страницы корпоративного интранета

Заключение

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

Полезные ссылки:

→ Шаблон Figma для создания персон

→ Генератор лиц для ваших персон в Figma

Что еще почитать по теме:

Книга: Путь клиента - Создаем ценность продуктов и услуг через карты путей, блупринты и другие инструменты визуализации;
Автор: Джим Кальбах

Очень подробная статья про создание персон на UX-Journal


На этом фсе... Вдарьте по реакциям если было полезно!

Лучшие портфолио UX-дизайнеров, эффект якоря, метод персон...
По традиции недельный дайджест:

— Обзор 12 лучших портфолио UX-дизайнеров

​​— Основы UX — Закон Теслера

​​— Психология в дизайне - Эффект якоря

— Метафоричный анимационный фильм Toss — THE JOURNEY

— Как создать идеальное поле поиска

— Инструменты UX — Метод персон

Как вам подборка статей за эту неделю? Поделитесь в реакциях!

Toptal для дизайнера: как пройти интервью и сколько можно заработать

Я как-то писал про западные биржи фриланса, где была упомянута Toptal. Эта компания считается одной из самых топовых фриланс-бирж для удаленной работы. Отбор сложный, зато доход обещает быть неплохим от $1000 в месяц при частичной занятости. Юля — дизайнер с опытом, попробовала пройти интервью и рассказывает так-ли хороша биржа Toptal, как они о себе рассказывают.

https://vc.ru/design/487319-toptal-dlya-dizaynera-kak-proyti-intervyu-i-skolko-mozhno-zarabotat

Психология в дизайне — Закон Миллера

В 1956 году американский ученый-психолог Джордж Миллер обнаружил что, кратковременная память человека способна запоминать одновременно 7 плюс-минус 2 элементов. При этом 7 названа «магическим числом», выступая не конкретной цифрой для деления, а как диапазон от 5 до 9.

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

Следуя закону Миллера можно снизить когнитивную нагрузку на пользователей группируя объекты по смыслу. Это позволит сделать взаимодействие с интерфейсом удобнее и быстрее. Например:

— лучше отображать на сайте одновременно не более 5-7 товаров одной категории, так пользователю будет проще держать их в памяти

— для ввода данных банковской карты или телефонного номера лучше разделить поля ввода на группы, например в формате 1 (123) 111-22222. Так считывать и запоминать числовые значения будет проще.

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

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

5 плагинов Figma для проверки доступности дизайна

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

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


Contrast Grid — проверка контраста нескольких цветов
Плагин позволяет проверить контрастность сразу нескольких сочетаний цветов текста и фона на соответствие минимальному контрасту по стандарту WCAG 2.0 minimum contrast.


Caravage — проверка на соответствие стандарту WCAG
Очень полезный плагин для веб-дизайна, если нужно проверить насколько макет соответствует требованиям доступности по стандарту Web Content Accessibility Guidelines 3.0. Проверяет не только контрастность и цвета, но и размер шрифтов.


Adee — многофункциональный плагин для тестирования доступности
С помощью плагина можно проверить цветовой контраст в 8 режимах цветового дальтонизма, потестить контрасты по стандарту WCAG, а также генерировать Alt-тексты для изображений. Кроме того, плагин может проверить соответствуют ли кнопки размеру области касания для сенсорных экранов.


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

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

Пример сторителлинга для веб страниц

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

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

Ставки в фрилансе #1 — как подсчитать?

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

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

1. Сегмент рынка

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

Ссылка по теме: анализ зарплат айтишников в первом полугодии 2022 от Хабр


2. Квалификация

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


3. Географическое местоположение

Другой не менее важный фактор, это то, в каком регионе вы работаете. Не секрет, что клиенты из мегаполисов готовы платить больше. Из-за чего разброс в часовой ставке может достигать более 50% от среднего значения. Тоже самое касается и распределения по странам. Так фрилансерам из США или ЕС платят в среднем больше, чем их коллегам из других точек мира. И это не потому, что фрилансеры на западе чем-то лучше остальных. Все дело в высоких расходах на жизнь. Например если дизайнер работающий в Германии и получающий 50 евро в час вычтет все расходы на аренду жилья, налоги, страховки итд... у него на руках останется где-то 20 евро чистого дохода. Тоже самое относится и к расходам на жизнь в столице или в регионах.

Пример: средняя зарплата UX/UI-дизайнера по регионам


4. Расходы

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

Заключение

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

Методы исследования в UХ — A/B-тестирование

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

Когда применять

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

Как проводить тестирование?

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

2) Также необходимо выбирать параметры для анализа производительности. Это могут быть количество кликов, совершенные действия, конверсии и т.д. Для анализа веб страниц используются инструменты, такие как Google Analytics или Яндекс.Метрика

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

Пример: Обратите внимание на пример эффективности А/В-тестирования компании HubSpot на картинке внизу. Вариант В показал на 5% больше конверсии чем вариант А за счет другого фона и фотографии. Также можете посмотреть другие тесты.

Заключение

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

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

Закон Миллера, ставки в фрилансе, A/B-тестирование...

Воскресенье, время недельного дайджеста:

— Toptal для дизайнера: как пройти интервью и сколько можно заработать

— Психология в дизайне — Закон Миллера

— 5 плагинов Figma для проверки доступности дизайна

— Пример сторителлинга для веб страниц

— Ставки в фрилансе #1 — как подсчитать?

— Методы исследования в UХ — A/B-тестирование

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

Как отображать таблицы на маленьких экранах

На прошлой неделе опубликовал на vc.ru перевод статьи о дизайне таблиц для мобильных экранов. В статье разбирается довольно частая проблема многих дизайнеров — что делать с таблицами на меленьких экранах? Небольшой спойлер: идеального решения нет, т.к. поместить таблицу в том виде, как на десктопе в экранную ширину мобильного телефона не получится.
Зато есть несколько добротных приемов адаптивной верстки, которые наглядно разобраны в статье.
В будущем постараюсь там чаще публиковать длинные статьи, которые не помещаются в формат телеграмма. Буду рад если поддержите!

https://vc.ru/design/518320-kak-otobrazhat-tablicy-na-malenkih-ekranah

Психология в дизайне — Эффект Зейгарник

Психологический эффект, заключающийся в том, что человек лучше запоминает прерванные действия, чем завершённые. Впервые этот эффект был замечен психологом Блюмой Зейгарник, одной из создателей факультета психологии МГУ, и был назван в её честь эффектом Зейгарник. В ходе экспериментов было установлено, что испытуемые в 90% случаев лучше запоминали те задачи, которые им не дали завершить. Это связано с тем, что невыполненные задачи имеют свойство прочно заседать в нашей памяти, и мы мысленно продолжаем к ним возвращаться.


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

Эффект Зейгарник можно встретить повсеместно: в СМИ, рекламе или в развлекательной индустрии, например чтобы привязать нас к сериалам. В дизайне интерфейсов он используется в первую очередь для постепенного вовлечения пользователя, искусственно создавая неопределенность. Вот несколько примеров:

— тизеры статей и публикаций цепляющие внимание пользователя

— предпросмотр видеоролика при наведении на видео (как это делает например Youtube)

— индикаторы прогресса в профиле (на картинке внизу, пример, где LinkedIn использует этот прием, чтобы заставить пользователей заполнить свой профиль)

Заключение

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

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