Дневниковое исследование — одна из методик сбора качественных данных, которая позволяет узнать, как меняется поведение и опыт потребителей с течением времени (от нескольких дней до нескольких месяцев).

Что таким образом можно узнать:
— В какое время суток люди взаимодействуют с продуктом;
— Как часто это делают;
— Как выглядит сценарий работы при выполнении долгосрочной задачи;
— Легко ли обучиться использованию системы;
— Как меняется лояльность с течением времени;
— Как выглядит взаимодействие с компанией, проходящее через разные каналы связи (сайт, почта, телефон, социальные медиа и так далее).

В статье расписаны этапы исследования и даны советы, например, как мотивировать участников.

https://lpgenerator.ru/blog/2016/06/21/dnevnikovyj-metod-v-izuchenii-polzovatelskogo-opyta/

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

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

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

Настройте кнопки быстрого доступа. В Твиттере с помощью кнопок «J» и «K» можно перемещаться между твитами, а с помощью «.» — загрузить новые и переместиться в их начало.

https://vc.ru/39701-chto-nuzhno-uchest-v-razrabotke-specialnoy-navigacii-po-saytam-dlya-lyudey-s-ogranicheniyami-zreniya-i-drugih-vozmozhnostey

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

Подписывайтесь, если ищете работу или просто хотите быть в курсе вакансий.

Если ищете сотрудников, присылайте ссылки на вакансии: @zGrav.

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

Хороший пример кейса в портфолио аналитика-проектировщика:
— Описание предметной области и проблемы;
— Анализ потребности и целевой аудитории с помощью форума;
— Выделение ключевых сценариев;
— Создание в Axure детализированного прототипа с реальным контентом.

Закладывать в прототип реальные данные о билетах и ценах (880 строк) и показывать билеты, которые действительно соответствуют пользовательскому запросу, — это слишком. Но если такая задача у вас всё-таки появится, акшура для неё подойдёт.

https://designpub.ru/9763be9bc739

Грейс Но написала о перетаскивании (drag and drop) на примере интерфейсов VMware.

Где используется:
— Изменение порядка и уровня вложенности элементов дерева;
— Изменение порядка колонок в таблице данных;
— Изменение порядка рядов в таблице данных;
— Перемещение элементов между древовидным меню и таблицей данных;
— Упорядочивание и объединение карточек.

Если элемент можно перетаскивать, надо проработать:
1. Состояние покоя;
2. Состояние перетаскивания;
3. Обозначение исходного местоположения элемента — где он был до начала перетаскивания и куда вернётся, если пользователь не найдёт для него подходящее место приземления;
4. Обозначение места приземления — новое место, в котором элемент окажется после завершения перетаскивания.

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

В состоянии перетаскивания:
— Стилистически выделять элемент. Например, с помощью тени приподнимать его над соседними. В Трелло перетаскиваемые карточки слегка наклоняются;
— Менять курсор, например, на сжатую руку.

Исходное местоположение можно показывать полупрозрачным экземпляром перетаскиваемого элемента. Его может не быть, если создаётся эффект естественного движения, когда все элементы вокруг сдвигаются и уступают место перетаскиваемому (пример — упорядочивание вкладок в Хроме или Сафари).

Место приземления можно показывать жирной линией с кружком. Если место приземления недоступно, можно менять курсор, например, на запрещающий знак.

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

#drag_and_drop

Ольга Шаврина написала о поисках работы UX-дизайнером в Барселоне.

В 1-й части статьи: список сайтов для поиска работы, возможные названия должностей, рекомендации по составлению резюме и прокачке профиля в LinkedIn, а также интересные наблюдения и выводы:

— Описание вакансии на испанском не означает, что компания не рассматривает англоговорящих соискателей. Возможно, просто затупил HR-специалист. Не игнорируйте такие вакансии;
— Чем компания привлекательней, тем меньше в тексте вакансии диких требований и больше собственных ценностей и видения;
— На указанный уровень специалиста можно не смотреть. На наличие или отсутствие в названии слов Senior или Lead — тоже;
— На фото в Линкедине принято улыбаться;
— Список навыков очень важен. В Линкедине есть статистика ключевых навыков для разных должностей, можно подсмотреть и добавить себе;
— Чаще всего небольшие компании и стартапы не помогают с визой. Если у вас есть право на пребывание и работу в стране, много раз напишите об этом;
— Креативное анимированное портфолио с нестандартной сеткой — ад для HRов. Для UI-дизайнера лучше всего Dribbble или Behance. Если улучшил важные бизнес-показатели, надо вынести это в заголовок;
— Не ждите, что найдёте вакансию мечты, отправите резюме, и вас пригласят работать. Поиск работы — воронка. Ваши отклики — лишь её 1-й уровень. Откликайтесь на все вакансии, которые удовлетворяют вашим критериям.

#career

Рассказал об экспериментах в области поведенческой психологии, которые показывают, как разные факторы влияют на поведение людей.

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

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

https://vandergrav.ru/behavior-design/

Илья Бирман написал, надо ли на сайтах менять курсор мыши на палец над кнопками. Одна из тех заметок, где в конце нет правильного ответа или инструкции, как надо делать.

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

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

В программах кнопки раньше были объёмными. Дополнительная подсказка с помощью курсора не требовалась. А ещё: если поведение курсора в программах изменить, то не получится спокойно провести курсором над каким-нибудь тулбаром — курсор будет постоянно меняться туда-сюда.

https://ilyabirman.ru/meanwhile/all/arrow-and-finger/

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

«Даже если вы мастерски владеете инструментом и работаете на низком уровне детализации, часть мозгового ресурса (и времени) всё равно уходит на подбор форм. Гораздо проще и эффективнее сначала зафиксировать, что вы пытаетесь сказать пользователю. Проектирование в инструменте или на бумаге подразумевает принятие дизайнерских решений (2 колонки или 3?),  хотя на начальном этапе вы ещё не уверены, нужен ли вообще этот блок и где его место».

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

https://medium.com/советы-по-проектированию-интерфейсов/77835f317def

Александр Мукомелов, владелец студии промышленного дизайна Mukomelov, рассказал о своих проектах, наградах Red Dot (у него их 5), постмодернистском дизайне (форма без функции вроде дома в виде утки), ценообразовании в дизайне предметов (оплата проекта или процент от стоимости проданных предметов), производстве в Европе, жизни в Сан-Франциско.

Кстати, у Александра более 20 000 подписчиков на Behance и место в списке Forbes 30 до 30.

https://www.youtube.com/watch?v=4DvgV3PPtNw

Джон Сайто написал о метафорах в интерфейсе.

Шестерёнка — метафора настройки. Корзина — заказа. Мы видели их так часто, что они вошли в привычный визуальный «лексикон». Встретив такую иконку без подписи, мы поймём её значение просто из контекста.

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

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

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

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

Метафоры наполняют смыслом окружающий мир и помогают нам понимать сложные идеи.

https://medium.com/product-design/455605aa7430

Николай Бабич написал вводную статью о саунд-дизайне.

Звук может быть инструментом:
1. Обратная связь.
2. Уведомления.
3. Брендирование (обратная связь и уведомления с уникальными звуками).

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

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

Рекомендации:
— В мобильных устройствах людям больше нравятся короткие звуки с тёплым звучанием.
— В одном приложении звуки должны быть похожи по характеристикам, но отчётливо различаться.
— Большое количество звуков может утомить, снизить их эффективность и со временем начать раздражать.
— Сначала необычный звук уведомления может удивлять и радовать. Что будет, если вы услышите его тысячу раз?
— Звук должен быть полезен. Отправка сообщения в Фейсбуке озвучивается не после нажатия кнопки, а во время фактической публикации — можно не следить за процессом загрузки.
— Синхронизируйте звуки и анимацию по длительности.
— Отрегулируйте громкость: если она выше необходимой, даже приятный и мелодичный сигнал будет восприниматься агрессивно.

https://vc.ru/42298-zachem-prilozheniyu-zvuk

Анна Кануникова протестировала контролы выбора дат на билетных и отельных сайтах и поделилась выводами. Например:

У людей не всегда есть чёткий план путешествия. Они могут указать даты, потом подумать и изменить их. Большинство сайтов скрывает календарь сразу после выбора даты (например, Booking, Aeroflot), что раздражает таких пользователей. Хорошо сделано в Google flights — календарь скрывается после нажатие на кнопку «Готово».

Чтобы пользователям было легко ввести новые даты, можно рядом с полями разместить кнопку «Сбросить» (как в Google flights).

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

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

Если клиенты часто заказывают услуги в выходные, эти дни в календаре стоит выделять.

Если диапазон дат короткий, в поля с датами стоит добавить кнопки для быстрого выбора предыдущего и следующего дня (например, как в Deutsche Bahn и Google flights).

https://habr.com/post/415365/

Хоа Лорангер из Nielsen Norman Group написала о кнопке «Наверх».

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

Операционные системы и браузеры предлагают способы сделать это:
— Клавиша Home на клавиатуре;
— Нажатие на строку состояния в iOS;
— Полоса прокрутки и сочетания клавиш.

Но большинство пользователей может не знать этих способов. Для них на сайты добавляют кнопку «Наверх».

Как добавить «Наверх» и не облажаться:
1. Добавляйте её на страницы, длина которых превышает 4 экрана.
2. Размещайте её в правой нижней части экрана.
3. Подписывайте её словом «Наверх».
4. Это должна быть одна кнопка с фиксированным положением. Не стоит размещать отдельные кнопки «Наверх» в конце каждого блока информации.
5. Кнопка должна быть небольшой, чтобы не закрывать полезный контент, но достаточно большой, чтобы удобно нажиматься на смартфонах и планшетах.
6. Она должна быть контрастировать с фоном, чтобы её заметили.
7. Попробуйте показывать её не сразу, а после прокрутки страницы на несколько экранов вниз или в ответ на попытку прокрутить страницу обратно наверх.
8. Кнопка не должна двигаться и таким образом отвлекать от изучения контента.
9. Страница не должна прокручиваться наверх автоматически, например, когда в её начале появляется новый контент. Пользователь должен сам управлять прокруткой.

Альтернативы:
1. Дублирование навигации в нижней части страницы.
2. Закреплённые меню.
3. Кнопка Home на социальных сайтах, например, в Твиттере.

http://sketchapp.me/rekomendacii-po-sozdaniyu-knopki-naverx/

В компании aic написали о тёмных паттернах: что это такое, как появился термин, зачем компании их используют, к чему это приводит в долгосрочной перспективе, какие тёмные паттерны бывают (и много примеров).

Тёмный паттерн (dark pattern) — пользовательский интерфейс, который заставляет вас делать то, чего обычно вы бы не сделали. Например, подписаться на рассылку, купить премиум-версию программы вместо пробной.

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

Зачем компании их используют? Представим ситуацию: в компании есть отдел лайков, которым управляет менеджер Арсений. Начальство оценивает его успешность по разным показателям. В данном случае — по количеству лайков.

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

http://blog.aic.ru/tyomnyj-pattern-kak-veb-servisy-zastavlyayut-polzovatelej-oshibatsya-v-svoix-dejstviyax/

Опубликован конспект лекции руководителя отдела веб-дизайна «1+1 медиа» Евгения Демченко об основах композиции.

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

Для правильной подачи контента необходимо:
1. Определиться с контентом.
2. Выбрать область композиции, её формат.
3. Учесть окружающую среду (где будет выставлена композиция).
4. Учесть условия взаимодействия (сколько времени наблюдатель будет коммуницировать с композицией и так далее).
5. Изучить особенности потребления.
6. Учесть другие факторы.

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

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

Чтобы наблюдателю было легче заметить и считать якорный объект, нужно дать объекту больше пространства (white space). Это нужно, чтобы облегчить восприятие элементов мозгом наблюдателя. При помощи увеличения или уменьшения белого пространства можно управлять вниманием наблюдателя. Из этого выведено правило «внутреннего и внешнего».

http://telegraf.design/konspekt-dizajnera-osnovy-kompozitsii/

Ольга Шаврина опубликовала продолжение рассказа о поисках работы UX-дизайнером в Барселоне.

HR спросил меня то, чего я совсем не ожидала: «Расскажите о себе». Позже обнаружила, что этот вопрос задают все интервьюеры. Это не потому, что они не читали CV, а потому, что хотят услышать что-то интересное, составить первое впечатление о человеке. И это — прекрасный шанс выделиться из толпы, рассказать историю, зацепить.

Продумала хитрый ход конем — спрашивать у интервьюера: «Почему лично вы считаете эту компанию отличным местом для работы?» Этот вопрос можно задавать вообще всем — от HRа до CEO. Отвечая на него, люди раскрываются и рассказывают о ценностях — своих и компании. Особенно круто, если ответы нескольких людей в компании сходятся.

Также в статье:
— Сервис, где можно потренироваться в ответах на вопросы в псевдоинтервью и посмотреть на себя в видеозаписи.
— Типовые вопросы (стартовые от HR, общие профессиональные, конкретные профессиональные), чтобы подготовить на них осмысленные ответы.
— Вопросы, которые можно задать представителям компании по темам: strategy and ideas, company and team, customers, my role.
— Особенности процесса найма в Испании. Процесс очень долгий, за 2 недели и даже 2 месяца, скорее всего, работу не найти.
— Разница в менталитете: амбициозность и самоуверенность соискателя не считаются плюсом. «Стала меньше спрашивать о карьерной перспективе и больше о планах и целях самой компании. И вообще меньше говорить о том, как я сейчас приду, начну махать шашкой и всё улучшу».

Разница заметна и в том, как мы задаём вопросы. Можно спросить «Почему у вас однотипные кнопки разного размера?» Звучит, как наезд и обвинение в непрофессионализме.

А можно сказать: «Я заметила, что некоторые кнопки крупнее, чем другие. Вы их специально выделяете? Они более важны с точки зрения конверсии?» Звучит так, как будто вы искренне интересуетесь процессом и априори считаете, что люди исходили из разумного решения.

https://olgashavrina.com/find-job-barcelona-2

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

https://medium.com/v.shliachkov/2883074102bc — часть 1:
— «Думай медленно… Решай быстро», Даниэль Канеман;
— «Как мы принимаем решения», Джона Лерер;
— «Мозг и душа», Крис Фрит;
— «Эмоциональный интеллект», Дэниел Гоулман;
— «100 новых главных принципов дизайна. Как удержать внимание», Сьюзан Вейншенк;
— «Визуальное восприятие», И. Б. Аббасов;
— «Nudge. Архитектура выбора», Ричард Талер, Касса Санстейн.

https://medium.com/v.shliachkov/ce027e720100 — часть 2:
— «Тайны нашего мозга, или почему умные люди делают глупости», Сандра Амодт и Сэм Вонг;
— «Законы влияния», Сьюзан Вейншенк;
— «Психология. Люди, концепции, эксперименты», Пол Клейман;
— «Покупатель на крючке», Нир Эяль и Райан Хувер;
— «50 идей, о которых нужно знать. Мозг человека», Мохеб Костанди;
— «Теория поля в социальных науках», Курт Левин;
— «Индустрия счастья», Вильям Дэвис.

Zina Szőgyényi написала, как упростила выбор нескольких элементов из незнакомого длинного списка объектов. В её случае таким образом поставщики услуг выбирали подходящие теги.

1. Отобразила сразу все теги.
2. Объединила их в тематические группы.
3. Теги в группах разделила на 2 колонки (чтение сверху-вниз).
4. Сделала выбор тегов отдельным шагом (перенесла на отдельную страницу).

Раньше пользователи выбирали теги с помощью multi-select pill box. В новом дизайне они стали выбирать на 4 тега больше и делать это на треть быстрее.

http://sketchapp.me/uluchshenie-yuzabiliti-vybora-neskolkix-elementov-iz-dlinnogo-spiska/

Андрей Пономарёв рассказал о своём мегадокументе, с помощью которого собирает комплексное представление о проектируемом продукте.

Документ включает:
— Роли и персоны;
— CJM;
— Сценарную карту;
— Список Use Cases;
— Список Job Stories;
— Гипотезы и метрики;
— Список компонентов;
— Контентная матрица.

https://medium.com/needux/daba799ca2fc

Команда Visme описала и визуализировала (смотрите картинки по ссылке) приёмы, с помощью которых можно создать хорошую композицию:

1. Соотношение элементов важнее размеров конкретных элементов.

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

3. Заголовки и важные слова выделяйте размером.

4. Для усиления силы послания и создания движения используйте свободное пространство.

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

6. Негативное пространство не только облегчает чтение информации, но и помогает фокусировать внимание на отдельных объектах.

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

8. Группа с центральным элементом и равным количеством элементов с обеих сторон привлекает больше внимания и помогает фокусироваться на центральном.

9. Повторение элементов создает единство, которое повышает понимание и узнаваемость.

10. Движение привлекает внимание. Направленные линии помогают создать такой эффект.

11. Попробуйте применить правило третей.

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

http://say-hi.me/design/12-principov-vizualnoj-ierarxii.html