Надежда Ляшенко рассказала, как UsabilityLab проектировали CRM для операторов контакт-центра банка, и штатные дизайнеры заказчика стали с ними конкурировать.

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

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

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

(В быстро развивающихся проектах нужно забыть, что такое «план проекта».)

https://usabilitylab.ru/blog/proektirovanie-crm-sistemyi-dlya-tinkoff-banka-vzaimodejstvie-dvux-komand-na-slozhnom-proekte/

Любопытная статья о том, как Фейсбук борется с недостоверными публикациями.

Внимание пользователей в ленте привлекают 3 области (порядок индивидуален):
— Аватар друга, группы или страницы, которые поделились публикацией;
— Лица (если есть) в превью статьи;
— Заголовок статьи.

Рядом с заголовком будет кнопка «About this article», анимировано сжимающаяся до «i».

Нажатие на неё будет приводить к отображению:
— Информации о странице издателя в Фейсбуке;
— Кнопки для подписки на издателя или её отмены;
— Статей других издателей по теме;
— Количества друзей и других пользователей, которые поделились статьёй;
— Карты, которая показывает, откуда эти пользователи.

http://sketchapp.me/proektirovanie-novyx-sposobov-dobavleniya-konteksta-v-novosti-ot-komandy-facebook/

Дмитрий Мрачковский рассказал о нюансах создания структуры интернет-магазина для лучшей индексации поисковиками. Например:

Один товар относится к разным категориям и доступен по нескольким адресам. Лучшее решение — вынести адреса товаров в отдельную директорию. Если все категории располагаются в /catalog/, то товары размещайте в /products/, /goods/, /items/. Это поможет поисковикам понять, какая страница относится именно к товару. А вас избавит от необходимости придумывать сложные решения, чтобы сохранить в URL вложенность товара в категорию.

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

https://vc.ru/39432-kak-pravilno-strukturirovat-internet-magazin-s-tochki-zreniya-seo

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

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

2. Сложно определить, какой контент подавать пользователям. В профессиональных интерфейсах число ролей измеряется десятками. Вид и возможности системы зависят от выбранной роли.

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

https://medium.com/sobaka/e6a63a6da236

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

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

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

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