Базовые правила дизайна #1 — теория близости

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

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

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

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

На этом фсё

Давайте соберем под этим постом 70 🔥 и я расскажу про следующее правило. Спойлер: называется оно "закон Фиттса". До скорой!

Подборка текстовых циклов на канале #2

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

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

Вообще, стоит начать с основ:

Дизайн-методологии — что это и почему они так важны для дизайнеров

А теперь перейдем к самой первой методологии, вышедшей на канале — латеральное мышление:

1. Латеральное мышление — мощный софт-скилл для дизайнера

2. Этапы решения задачи латеральным мышлением

Следующая методология — CRAFT:

> Часть 1 — Методология CRAFT — как генерировать новые идеи

> Часть 2 — Этапы методологии CRAFT

Последняя пока в этом канале — дизайн-мышление:

#1 Дизайн-мышление — идеальная методология для UX-дизайнера

#2 Этапы "Дизайн-мышления"

Вот и конец

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

Топ-2 фатальных ошибок начинающих UX-дизайнеров

Это продолжении серии, которая началась ещё на прошлой неделе. Первую тройку можете увидеть вот здесь. Сегодня на разборе 4 и 5 самая популярная ошибка новичков. Поехали:

4. Отсутсвие фокуса в интерфейсе

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

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

5. Непонимания в команде или с клиентом

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

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

На этом фсё

Если было полезно, реакции к вашим услугам. До скорой!

Конкурентный анализ. Ч.1 — с чего начать

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

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

> Определение конкурента

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

У Netflix, например, главный конкурент HBOMax. А вот Ютуб или разные онлайн-игры — уже не прямые конкуренты. Они удовлетворяют одну и ту потребность пользователя, — скуку, — но разными методами.

> Определение целей пользователей

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

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

> Попробовать на себе

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

Если это онлайн-магазин, следите за тем, как поделены товары на категории и как это реализовано в дизайне. И т.д.

Под конец

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

Влияние возраста человека на восприятие шрифта

Шон Уоллес, докторант факультета информатики Университета Брауна, решил выяснить, как шрифты влияют на эффективность чтения. Результаты оказались достаточно интересными.

Попросили 352 участников в возрасте от 18 до 71 лет прочитать на своих устройствах тексты. Так протестировали 16 самых популярных шрифтов:

Avenir Next, Arial, Avant Garde, Calibri, Franklin Gothic, EB Garamond, Helvetica Neue, Lato, Montserrat, Noto Sans, Open Sans, Oswald, Poynter Gothic Text, Roboto, Times и Utopia.

Оказалось, что люди старше 35 лет читают медленнее во всех шрифтах, кроме 2-х: Montserrat и EB Garamond.

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

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

P.s. Это новый формат на канале: краткое изложение дизайн-исследований. Как вам он?

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

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

Понедельник

* Чем отличается дизайн в В2С от В2В

Вторник

* Базовые правила дизайна #1 — теория близости

Среда

* Подборка текстовых циклов на канале #2

Четверг

* Топ-2 фатальных ошибок начинающих UX-дизайнеров

Пятница

* Конкурентный анализ. Ч.1 — с чего начать

Суббота

* Влияние возраста человека на восприятие шрифта

Утром будет опрос по темам на следующей неделе. Свои предложение кидайте сюда @uxtrendsbot.

Ну, на этом фсё. До завтра;)

То, что вы видите на картинке — интерфейс

только очень древний

Чтобы было более понятно, давайте начну по порядку. Интерфейс — то, через что контактируют 2 объекта. Это механизмы, программы, устройства и даже люди.

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

В общем, полезное чтиво на ночь. Почитайте:

https://vc.ru/design/454094-kratkaya-istoriya-interfeysov-ot-doshchechek-do-kiberpanka

Необходимые софт-скиллы для любого фрилансера

Ученые фонда Карнеги, Гарварда и Стэнфорда пришли к интересному выводу: 85 % успеха в любой профессии зависит от софт-скиллов, а 15 % — хард-скиллов. Про них подробнее я писал вот тут.

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

> Продажа своих услуг

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

> Самопрезентация

Тесно связан с первым навыком в списке. Хорошая самопрезентация создает ваш образ в глазах клиента, который вы хотите навязать. Идеально дополняет "продажу услуг" — по сути, эти скиллы не могут существовать раздельно, если вы хотите добиться успеха.

> Переговоры или деловая переписка

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

> Тайм-менеджмент

Думаю, тут не нужно никаких объяснений. Если не будете соблюдать дедлайн и приходить на встречи во время, то испортите не только впечатление и отношения с клиентом, но и карьеру.

Под конец

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

Ещё раз напомню, дедлайн до завтра. Погнали!

Материалы для прокачки четверки софт-скиллов

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

> Продажа своих услуг

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

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

Ну и напоследок офигенная статья от Текстерры:

10 приемов, которые помогут продавать услуги

Самопрезентация

Тут оч в тему придет недавний цикл на канале о холодных письмах:

1. Фриланс-биржи — не единственный способКак ещё можно находить клиентов

2. Как писать холодные письма с предложением своих услуг

3. 2 главных ошибок в холодных письмах

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

Как презентовать себя качественно за минуту

> Переговоры или деловая переписка

Начнем с оч крутых видосов:

Правила переговоров от Стива Джобса

Психология победителя: самый мощный прием переговоров

И, думаю, на этом и закончим по этому софт-скиллу. Переходим к следующему.

> Тайм-менеджмент

Супер-полезно интервью Брайана Трейси по тому, как все успевать и не откладывать на потом — тык

И не менее офигенная статья Лакодина: "Хакнуть" прокрастинацию

Под конец

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

Топ-2 фатальных ошибок начинающих UX-дизайнеров #3

Без долгого предисловия. Поехали:

6. Отсутсвие реального контента в прототипе или финальном дизайне

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

Как можно раньше запрашивайте у заказчика финальный контент.

7. Контент спрятан или находится не на своем месте

Изучите поведенческие паттерны вашей аудитории. Например, сейчас пользователи привыкли, что ссылкой на главную страницу сайта является логотип. А раньше для этого использовали отдельный пункт меню «Главная». Это стало паттерном и все его используют. Больше на сайтах нет ссылки «Главная». Если она будет в центре, то пользователь не найдет её или ему будет некомфортно.

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

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

Под конец

Это была третья часть серии. Для того, чтобы почитать первую и вторую, просто скопируйте заголовок поста и вставьте в поиск, только уберите #3. Если было полезно, реакции к вашим услугам. До скорой!

Базовые правила дизайна #2 — закон Фиттса

В 1954 году психолог Пол Фиттс провел эксперимент. Он на доске заклеил 2 мишени и попросил испытуемого коснуться их по очереди пером. И так каждый раз Фиттс менял размер мишеней и расстояние между ними. В итоге выяснил такую закономерность:

"Чем дальше расстояние между объектами и чем меньше их размер, тем сложнее по ним попасть"

Как, казалось бы, такое очевидное правило можно использовать в дизайне? На самом деле, это оч эффективный принцип.

Кнопки в интерфейсе — те самые "мишени". И чем они крупнее, тем пользователи чаще будут по ним "попадать", т.е. кликать. Этим можно неплохо манипулировать. Например, кнопку "Выйти" сделать маленькой, чтобы было долго и неудобно по ней кликать. А "Зарегистрироваться" крупной.

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

Про это правило подробно и с формулами написано в этой статье. Почитайте, если желаете узнать больше про Закон Фиттса. На этом фсё)

Конкурентный анализ. Ч.2 — сравнительный

Думаю, не стоит говорить о том, насколько конкурентный анализ важен в UX, ибо текстов об этом на канале чуть больше, чем дофига. Поэтому давайте сразу перейдём к делу. Как проводить сравнительный анализ?

Отобрать конкурентов

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

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

Прогнать через фильтры

То есть, ключевые вопросы:

Как они удерживают пользователей

Как решают их проблемы

Какие цветовые гаммы используют

И т.д.

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

На этом фсё

Если было полезно, знаете, куда жмакать. До скорой!)

История интерфейса, софт-скиллы и закон Фиттса

Время недельного дайджеста на канале. Все, что было на этой сдемице:

+ История интерфейса: от дощечек до киберпанка

- Необходимые софт-скиллы для любого фрилансера

+ Материалы для прокачки четверки софт-скиллов

- Топ-2 фатальных ошибок начинающих UX-дизайнеров #3

+ Базовые правила дизайна #2 — закон Фиттса

- Конкурентный анализ. Ч.2 — сравнительный

Завтра выйдет опрос с темами постов на следующую неделю. Я бы не пропустил такое событие. До завтра;)

3 стиля иллюстраций, которые хорошо решают задачи клиентов

• Плоский стиль, упрощённые образы и ограниченная палитра

• Контурные с диспропорцией (картинка выше)

• Изометрические

Эта троица сейчас задает тренд в дизайне. Через них оч эффективно работает эмоциональный маркетинг.

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

https://vc.ru/design/459871-illyustracii-i-biznes-3-stilya-kotorye-horosho-reshayut-zadachi-klientov

Как новичку ускорить карьерный рост

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

Ну, поехали:

> Любить то, что делаешь

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

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

> Реально вникайте в проблемы клиентов

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

Логично, правда?

Только вот многие начинающие почему-то забывают или вовсе не задумываются об этом. А зря. Не надо так.

На этом фсё

В смысле конец текста, а не советов. Они ещё будут. Только в следующей части. А выйдет она, если соберете под этим постом 100 ❤️. До скорой;)

Figma обновили auto-layout

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

Нашел для вас подробный гайд по обновленному auto-layout Фигмы. Он небольшой, но оч полезный.

На чтение уйдет всего 5 минут. Загляните:

https://design-glory.com/16260/novyj-auto-layout-v-figma-za-5-minut?_thumbnail_id=16393

Базовые правила дизайна #3 — якорные объекты

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

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

А "прямоугольники" — модули. Несколько таких объединяются и образуют большой прямоугольник — интерфейс.

Правило: в каждом модуле якорные объекты должны находиться в центре и углах.

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

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

Конкурентный анализ. Ч.3 — итоги

Это уже 3 часть цикла. Вот предыдущие:

1. С чего начать

2. Сравнительный

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

• Анализ каждого продукта конкурента.

• Скриншоты вместе с комментариями, объясняющими специфику каждой функции

• Список функций и/или приблизительная карта сайта каждого конкурента

• Сильные стороны каждого проанализированного продукта — и советы, как можно их улучшить

• Матрица анализа конкурентов — таблица с характеристиками и отдельными столбцами для каждого продукта

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

На этом, пожалуй, все. Как составить матрицу анализа конкурентов расскажу в следующей части. Если интересно, реакции к вашим услугам.

Иллюзия контроля — что это такое и как её использовать в дизайне

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

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

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

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

Эту фишку психологии человека оч любят использовать маркетологи в своих целях.

В тех же сайтах, когда предлагают несколько вариантов товара. У вас не возникнет вопрос "Купить или нет?", вы будете думать "Какой из них купить?" Сечете разницу? А если приправить это подробным описанием преимуществ товаров, то вообще супер. Вот вам иллюзия контроля, когда кажется, что вы контролируете покупку, но на самом деле не совсем так.

И эту иллюзию контроля можно использовать и в дизайне. Как? Есть несколько вариантов, но об этом уже в следующей части. Ибо места тут для всего не хватит. Вдарьте по реакциям, если интересно. До скорой!)