​​Основы дизайна - закон прегнантности

Закон прегнантности был описан Максом Вертгеймером, одним из основателей гештальтпсихологии, на основе исследования восприятия человека. Он установил, что в зрительном восприятии человека наблюдается стремление интерпретировать неоднозначные образы как простые и завершенные, а не сложные и незаконченные. От этого и название явления - прегнантность (нем. «хорошая, полная форма»). При этом было выделено 5 свойств облегчающих восприятия целостной формы из группы разрозненных элементов: близость, сходство, непрерывность, завершенность и взаимосвязь.

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

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

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

Подборка продвинутых приемов Figma

В последнем обновлением о котором я писал раньше Фигма приобрела несколько очень крутых функций. Но некоторые полезные фичи остались все-таки незамеченными в большинстве обзоров. Вы знали например что SVG элементы со страниц в браузере можно копировать прямо в фигму? Или добавив "_" в название стиля он станет невидимым? Эти и многие другие советы, которые значительно облегчат работу в Figma по ссылке внизу:

https://www.uprock.ru/articles/samye-prodvinutye-priemy-figma-2022-goda

Как сфокусироваться и усилить концентрацию внимания

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

Простой метод сфокусировать внимание на том, что важно, и устранить то, что не важно, придумал известный инвестор Уоррен Баффетт. Он предлагает расставить приоритеты с помощью 3-х шагов:

1) запишите 25 самых главных задач

2) обведите в списке 5 наиболее важных пунктов

3) в результате получим два списка с 5 самыми срочными задачами и 20 менее срочными

По мнению Баффетта именно с 5 самых срочных задач и нужно начать. А вот к остальным 20 даже не стоит приступать пока не будут завершены топ-5. Все предельно просто, зато очень эффективно! Устранив кучу второстепенных дел мы высвобождаем время для решения наиболее важных задач. Этот метод можно использовать как и глобально (жизненные/карьерные задачи) так и для более короткого периода (задачи на неделю).

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

UX-исследования — Как протестировать ваш сайт за 5 секунд

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

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

Участнику исследования показывают фрагмент сайта или макета ровно на 5 секунд, после чего испытуемому задаются ряд вопросов. Например:

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


В чем преимущество

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

Было интересно? Если хотите увидеть больше таких обзоров по методам UX-исследований наберите 50 👍 под постом.

Грейды в дизайне, фокусировка внимания, 5-ти секундный тест…
По традиции недельный дайджест:

— Разбираемся в грейдах дизайнеров

— Как правильно использовать сегментированные переключатели

— Основы дизайна - закон прегнантности

— Подборка продвинутых приемов в Figma

— Как сфокусироваться и усилить концентрацию внимания

— UX-исследования: как протестировать ваш сайт за 5 секунд

И не забываем поднажать на реакции постом выше если тема про UX-исследования вам интересна.

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

Много новичков в UX/UI не знают с чего начать. У всех разный багаж опыта — кто-то уже немало лет работает веб-дизайнером, а кто-то только делает первые шаги в дизайне. Подобрать курс под свой уровень не всегда просто. Тут ведь важно, чтобы было и интересно и личному опыту соответствовало. С другой стороны в курсе должно быть достаточно жизненных практических заданий. Наткнутся на отличный обзор топ-7 лучших онлайн-курсов по UX-дизайну для новичков. Автор подробно разбирает кому стоит пройти обучение, чему конкретно научитесь, в чем основная фишка отдельного курса. Для всех кто в поиске и хочет прокачать свои скилы будет несомненно полезно почитать:
https://ux-journal.ru/obzor-7-luchshih-kursov-ux.html

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

В 1982 исследователи из IBM Research Уолтер Доэрти и Арвинд Тадани выяснили, что оптимальная скорость ответа компьютера — 0,4 секунды, а не 2 секунды, как было принято считать раньше. Если система реагирует медленнее этого порога, то пользователь скорее, переключится на что-то другое. Таким образом основной посыл закона Доэрти - чем быстрее откликается система, тем проще удержать внимание пользователя.

Почему это важно для UX

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

Сократить время загрузки сайта можно с помощью:

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

Также стоит не забывать всегда тестировать сайт или приложение с реальными данными.
На этом все! Было полезно?

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

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

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

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

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

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

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

Если было полезно — не забываем про реакции!

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

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

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

https://www.editorx.com/shaping-design/digital-design-trends-2022

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

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


1. Выберите приоритетную задачу на день

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


2. Выберите наилучшее время

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


3. Ставьте мини-цели

Если мы работаем над чем-то не ставя конкретную цель, то фокус и мотивация могут улетучится довольно быстро. Это очень часто происходит если мы пытаемся овладеть сложными навыками такими, как изучение языка. Поставьте конкретную цель. В случае с изучением языка это могут быть, например: научится читать простые тексты за месяц обучения; после трех месяцев уметь вести простую беседу итд... Чтобы мотивация не пропадала необходимо анализировать свои достижения, ставя мини-цели на более короткие периоды. Например: выучить за день 20 слов, прочитать 50 страниц книги итд. Таким образом вы сможете постоянно оценить свой прогресс.


4. Устраните отвлекающие факторы

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

На этом все! Если было полезно, реакции к вашим услугам!

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

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

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


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


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

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


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

Если у вас сложная форма регистрации с 10+ полями ввода - сгруппируйте их, разделите на этапы и дайте пользователю визуальную подсказку, на каком этапе он находится и сколько еще предстоит пройти. Старайтесь не превышать 4 шага. Обратите внимание как Airbnb разбивает процесс регистрации на 2 шага на картинке внизу.


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

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

Порог Доэрти, Тренды 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


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