Золтан Коллин написал о проблемных паттернах в мобильных интерфейсах.

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

In English.

Алексей Бородкин (Notamedia), Виталий Мазуревич (AGIMA) и Вадим Митякин почти 2 часа разговаривают о проектировании:

Тема 1: Что такое проектирование — 1:51
— Что предшествует проектированию
— Стадии проектирования
— Оправданность проектирования
— Договора на разные этапы, оценка и стоимость проектирования
— Разделение аналитики, функционального и технического проектирования
— Итоговые тезисы о проектировании

Тема 2: Как становятся проектировщиками, какие бывают типы — 45:47
— Про опыт и возраст проектировщиков
— Про проблемы экспертного мнения проектировщика

Тема 3: Концепция специализированного проектного бюро — 1:03:37
— Формат организации такого бюро и заинтересованность в участии специалистов

Тема 4: Гильдия вольных проектировщиков — 1:14:02

Тема 5: Про методологии — 1:23:04
— Про роль проектирования и гарантия результата проекта

https://www.youtube.com/watch?v=EMN75584ZUg

Подготовил пересказ доклада Александра Брагина из продакшена VR2GO на тему «Виртуальная реальность для бизнеса. Особенности проектирования взаимодействия»:

— Как используется сейчас (ссылки на интересные кейсы);
— Советы маркетологам;
— Технологии;
— Рекомендации по дизайну виар-приложений.

https://medium.com/rofldorf/5820f05091b4

Работу аналитика и дизайнера, когда это 2 разных человека, обычно видят так: аналитик собирает и предоставляет данные, а дизайнер на их основе принимает решения и создаёт макеты. Наталья Бабаева объяснила, почему это не работает.

Работа детектива заключается в 1) сборе улик, 2) рождении гипотез, 3) их проверке. В связке аналитик+дизайнер собирать улики и формировать гипотезы должен дизайнер. Проверять — аналитик. Но часто проверить их невозможно. Поэтому специалисты не должны работать поодиночке.

Одна из точек пересечения — пользовательские сценарии. Дизайнер может их увидеть, а аналитик просчитать. Основные вопросы: 1) откуда люди переходят на страницу, 2) куда уходят? Маршрут помогает понять людей и цель их визита гораздо лучше, чем средний возраст и пол. Из идей, как изменить эти маршруты, рождаются дизайнерские решения.

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

«Раз в две недели начали ходить на заседания градостроительного совета и рассказывать о нашем проекте. Раз в две недели нам отказывали. Причин было много, но основные три: она была чёрной, на ней не было функции обращения к правительству и она не несла патриотической нагрузки. Да. Управление транспорта ставило остановки из металла со скамейками, раскрашенными в триколор.

Раз в две недели мы объясняли, что тёмный цвет и прозрачные стенки делают её менее заметной в среде. Что ржавчина и теги не так бросаются в глаза. На каждом заседании повторяли, что разукрасить остановку в триколор и поставить тачскрин с возможностью написать сообщение правительству не кажется нам возможным. Каждый раз нам отказывали. Так прошло 4 месяца. Мы продолжали ходить».

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

Чтобы такого не происходило, Мэтт Ходжес рекомендует и показывает, как это делает Intercom:

— Поймите, ради какой работы пользователи нанимают ваш продукт (методика JTBD);
— Определите, на какие вопросы и в каком порядке следует ответить;
— Подумайте, как на страницу попадут люди без конкретного образа продукта, и поправьте текст и URL;
— Покажите на первом экране, как продукт справляется с работой;
— Если есть возможность, добавьте объясняющие видео (не длиннее 2 минут);
— Используйте прилипающую шапку со ссылками на ключевые разделы, чтобы облегчить навигацию;
— Покажите, из каких подзаданий складывается выполнение работы;
— Расскажите, за счёт какой функциональности это возможно (функции необходимые, плюс, отличающие продукт от конкурентов);
— Предъявите доказательства качества: покажите клиентов и достигнутые ими результаты;
— Помогите определить, сколько продукт будет стоить;
— Дайте возможность легко перейти к регистрации: разместите несколько призывов к действию;
— Измеряйте эффективность страницы и тестируйте другие варианты.

In English.

Кристиан Холст из Baymard Institute по итогам большого исследования чекаута написал, как упростить ввод номера карты. Рассмотрены: разделение номера на блоки, валидация с учётом пробелов и разной длины номера, форматы и разметка номера (есть шпаргалка).

Основные рекомендации:
— Дайте пользователям ввести пробелы в поле ввода номера карты;
— Сайты не должны запрещать символ пробела и устанавливать ограничения на количество символов;
— В идеале поле должно на лету форматировать введённый номер;
— Для номеров карт VISA, MasterCard, JCB и Discover, состоящих из 16 цифр, можно автоматически добавить пробел после каждой 4-й цифры;
— Для состоящей из 15 цифр AMEX — использовать схему 4−6−5.

https://vc.ru/27451-kak-uprostit-vvod-nomera-kreditnoy-karty-dlya-polzovateley

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

Продавать рассылку обещанием не присылать спам — всё равно что продавать пиццу, обещая не добавлять в неё крысиные хвосты. Мы как вид уже давно условились, что в пицце не должно быть крысиных хвостов, а в рассылках — спама.

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

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

http://avemisha.com/korotko-i-bez-spama/

Константин Самойлов рассказал о голосовых помощниках и своём опыте работы над OK Google. Снова актуальная тема в свете выхода яндексовой Алисы.

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

4 года назад начали проводить тесты. На первом же тесте пользователь сказал что-то, чего разработчики не планировали. Система не сработала, разработчики сказали: "Чёрт, мы об этом не подумали".

Год назад на очередном тесте пользователь сказал улучшенной системе что-то такое, что она не сработала, и разработчики сказали: "Чёрт, об этом мы тоже не подумали". Шло время, развивалось дерево решений и грамматики для конкретной задачи, и каждый новый тест выявлял исключение, которое разработчики не учли».

https://vc.ru/27565

Саша Бизиков сделал редизайн иконки нашего канала. Ура, товарищи!

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

Дмитрий Мацкевич рассказал о поведенческом дизайне:

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

В лекции о поведенческом дизайне (в прошлой заметке) Дмитрий Мацкевич порекомендовал книги для более глубокого изучения темы:

1. «Думай медленно… Решай быстро» Дэниел Канеман
ozon.ru/context/detail/id/24286114/

2. «Психология глупостей. Заблуждения, которые мешают нам жить» Дэвид Макрэйни
ozon.ru/context/detail/id/17968046/

3. «Покупатель на крючке. Руководство по созданию продуктов, формирующих привычки» Нир Эяль
ozon.ru/context/detail/id/28516860/

4. «Правила мозга. Что стоит знать о мозге вам и вашим детям» Джон Медина
ozon.ru/context/detail/id/28349838/

5. «Nudge. Архитектура выбора. Как улучшить наши решения о здоровье, благосостоянии и счастье» Касс Санстейн, Ричард Талер
ozon.ru/context/detail/id/142027458/

6. «Пластичность мозга: Потрясающие факты о том, как мысли способны менять структуру и функции нашего мозга» Норман Дойдж
ozon.ru/context/detail/id/5102427/

7. «Как мы принимаем решения» Джона Лерер
ozon.ru/context/detail/id/5317226/

8. «Buyology: Увлекательное путешествие в мозг современного потребителя» Мартин Линдстром
ozon.ru/context/detail/id/4734395/

9. «Neuroscience» Dale Purves, George J. Augustine
amazon.com/Neuroscience-Dale-Purves/dp/0878936955/

10. «Theory of Fun for Game Design» Raph Koster
amazon.com/Theory-Game-Design-Raph-Koster/dp/1449363210/

11. «Мозг. Ваша личная история» Дэйвид Иглмен
ozon.ru/context/detail/id/137324220/

12. «Переломный момент. Как незначительные изменения приводят к глобальным переменам» Малкольм Гладуэлл
ozon.ru/context/detail/id/19901037/

13. «Эгоистичный ген» Ричард Докинз
ozon.ru/context/detail/id/142030241/

14. «Эволюция разума» Рэй Курцвейл
ozon.ru/context/detail/id/32926032/

15. «Sapiens. Краткая история человечества» Юваль Ной Харари
ozon.ru/context/detail/id/141677922/

Николай Бабич написал об интерфейсных анимациях, которые улучшают UX.

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

In English.

Гай Лигертвуд поделился рекомендациями UX-писателям.

— Сотрудничайте с дизайнерами, вместе прорабатывая структуры страниц и адаптируя дизайн под контент;
— Сотрудничайте с исследователями, чтобы говорить с пользователем на одном языке;
— Ориентируйте текст на пользователя. Пишите «вы ввели неверный пароль», а не «произошла ошибка входа»;
— Пишите лаконично, сначала говорите о важном;
— Убирайте жаргон и технические термины, чтобы расширить контекст;
— Призывайте пользователей к адекватным ситуации действиям. На кнопке под сообщением «неверный пароль» пишите не «Ок», а «Попробовать ещё» и «Восстановить пароль»;
— Переписывайте текст в стиле вашего бренда. Google вместо «Wrong password» напишет «That password doesn’t look right» (но это не точно);
— Проводите а/б-тесты.

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

In English.

Филипп Фильченко рассказал, как MobileUp использует прототипы и дизайн-концепты в своих продажах, в том числе через тендеры. Сколько времени на это тратят и по каким критериям выбирают клиентов, за чьи проекты стоит побороться.

https://vk.com/video-128666765_456239035

Дмитрий Коваленко написал о формах оформления заказа. Среди рекомендаций:

— Спрашивайте как можно меньше данных и заполняйте за пользователя поля, которые можете;
— Автоматически фокусируйтесь на первом поле;
— Используйте одноколоночную структуру (есть исключения);
— Разделяйте поля на смысловые группы;
— Ограничивайте размеры полей и вводимые данные;
— Проверяйте данные сразу после заполнения поля;
— Не прячьте подписи к полям после их заполнения;
— Помечайте необязательные поля (если их меньше, чем обязательных);
— Не отвлекайте пользователя лишними ссылками;
— Активируйте кнопку отправки данных после заполнения формы;
— Объясняйте, зачем вам нужны специфические данные;
— Не забывайте о дальтониках.