Топ-3 книг для UX-дизайнеров

Это уже вторая подборка книг на канале. Первая была вот тут.

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

Погнали:


1. Marty Cagan: "Inspired: How to Create Tech Products Customers Love"

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

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

2. Colin Ware: "Information Visualization: Perception for Design"

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

3. Jeff Johnson: "Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Guidelines"

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

Пожалуй, на этом фсё

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

#почитать

Как использовать иллюзию контроля в UX-дизайне #3 — всплывающие подсказки

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

Возьмем интернет-магазин ЦУМа. Когда добавляете товар в корзину, тут же вскакивает сообщение "Товар добавлен в корзину". Посмотрите на картинку снизу.

Теперь пользователь спокоен. Ведь он проконтролировал, чтобы его выбор добавили в корзину. Не забывайте про такой эффект, когда будете делать дизайн интерфейса.

Визуализация данных в интерфейсе. Ч 2 — с чего начать

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

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

Вывод

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

Вроде разобрались с тем, что это такое. Если остались вопросы, пишите в @uxtrends_bot.

Визуализация данных, всплывающие подсказки и книги для UX-дизайнера

Список постов за эту неделю:

/ Иллюзия свечения или как белое кажется больше черного

/ Продуктивность: метод помидора

/ Как с помощью смены дизайна повысить продажи на 500-600 %

/ Топ-3 книг для UX-дизайнеров

/ Как использовать иллюзию контроля в UX-дизайне #3 — всплывающие подсказки

/ Визуализация данных в интерфейсе. Ч 2 — с чего начать

Если есть какие-то замечания, вопросы или предложения, пишите @uxtrends_bot. До скорой!

Тренды дизайна первой половины 2022 года

В Editor X разобрали главные тренды этого года.

От победы метавселенной и 3D-надписей до цветовой палитры дофамина. Почитайте:

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

Продуктивность: метод 90/30

Главная идея метода: "Сосредоточиться на главном в течении 90 минут, а потом отдыхать полчаса. И так продолжать снова и снова, пока получается".

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

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

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

Думаю, на этом фсё. Было полезно? Дайте знать в реакциях. До встречи в следующем посте!)

Нейросети против художников

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

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

https://youtu.be/ACKnrECORG4

Эффект превосходства изображения — что это такое

Более 40 лет назад психолог Аллан Пайвио провел интересное исследование.

Испытуемым предложил показать серию объектов в визуальной и вербальной форме и запомнить их. То есть, он показывал им картинки и тексты об одном и том же.

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

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

Микроанимации — для чего они нужны в UX

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

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

Акцентируйте внимание на изменениях

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

Помогите понять ключевые функции вашего интерфейса

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

Призывы к действию

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

Отображайте статус процесса

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

На этом фсё

Пост на этот раз получился длинным, но оч полезным. Согласны?

Визуализация данных в интерфейсе. Ч 3 — базовые элементы

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

Для отображения данных используются базовые элементы изобразительного искусства:

Точка

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

Линия

Соединяет две точки и отображает тенденцию изменения данных.

Цвет

Поможет выделить качество данных. Популярный пример, зеленый означает "хорошо", красный — "плохо". Имейте в виду, что около 4% людей из-за физиологических или национальных причин могут трактовать значение цвета по-разному. Те же дальтоники видят и красный и зеленый цвета как коричневый.

Пропорции

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

На этом фсё

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

Тренды дизайна, метод 90/30 и микроанимации

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

• Тренды дизайна первой половины 2022 года

• Продуктивность: метод 90/30

• Нейросети против художников

• Эффект превосходства изображения — что это такое

• Микроанимации — для чего они нужны в UX

• Визуализация данных в интерфейсе. Ч 3 — базовые элементы

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

"Я потерял веру в UX"

С таких слов начинается статья, на которую я наткнулся несколько дней назад. Автор материала — основатель собственного агентства.

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

"Теперь профессионалы не облегчают жизнь пользователю, а манипулируют ими, чтобы увеличить продажи"

Как он это подает и объясняет, читайте здесь:

https://vc.ru/design/202669-ya-poteryal-veru-v-ux-osnovatel-agentstva-o-tom-kak-korporacii-uslozhnyayut-interfeysy-radi-uvelicheniya-pribyli

Продуктивность: "съешь лягушку"

Автором этого метода является Брайан Трейси. Его суть: нужно есть лягушку каждое утро.

У каждого есть самая объемная и трудная задача в списке дел на день. Вот её и называем "лягушкой". Обычно её оставляют на вечер и долго не хотят приступать.

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

Почему "лягушка"?

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

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

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

В догонку к моему посту про микроанимации нашел хороший пример но забыл опубликовать…

Посмотрите насколько интересно можно сделать нудное заполнение формуляра.

Визуализация данных. Ч.4 — инструменты

Сегодня на разборе главные инструменты для отображения данных в интерфейсе. Погнали:

/ Крупный показатель

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

/ Диаграмма

Широкий диапазон использования. Зависит от вида диаграммы. Круговая отлично подходит для отображения количества чего-либо от общей массы. Горизонтальную и столбчатую можно использовать для сравнения значений. А диаграмму Венна — отображения пересечений, классов и общих черт. Примеры и другие виды можете посмотреть по ссылке.

/ График

Для обозначения роста или падения какого-то показателя. Часто используется в сайтах аналитики. Пример: курс Биткоина

/ Схема

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

/ Таблица

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

Под конец

Конечно, инструментов на порядок больше. Я привел самые популярные, иначе пришлось бы перевести в большую статью, которую вы вряд ли прочтете. Если было полезно, знаете, куда жмакать. До скорой!

Как создать качественную цветовую палитру

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

Выбирайте с умом

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

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

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

На этом фсё

В следующих частях расскажу об остальных советах. Интересно?

Работа в фрилансе и компании: преимущества и минусы обоих вариантов

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

• Работа в компании

Плюсы

Гарантированный доход. Не нужно париться по заработку.

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

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

Минусы

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

Монотонность. Одинаковая работы каждый день рискует превратиться в скучную рутину и перестать приносить наслаждение.

• Работа в фрилансе

Плюсы

Свободный график. Можете хоть в 12 часов дня просыпаться и к 14 приступить к работе, никто вас не поругает. Главное, чтобы задачи к сроку выполняли.

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

Минусы

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

Итог

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

Лягушка, цветовая палитра и фриланс

Воскресный дайджест. Посты, которые вышли на этой неделе:

\ "Я потерял веру в UX" или как корпорации умышленно усложняют интерфейсы ради увеличение прибыли

\ Продуктивность: "съешь лягушку"

\ Пример того, как улучшить взаимодействие с пользователем за счет анимации

\ Визуализация данных. Ч.4 — инструменты

\ Как создать качественную цветовую палитру

\ Работа в фрилансе и компании: преимущества и минусы обоих вариантов

Завтра выйдет опрос про контент на следующую неделю. Если было полезно, то вдарьте по реакциям. Говорят, это занимает 1 секунду, проверим?)