Джейк Цакудакис написал, как правильно делать всплывающие подсказки:

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

http://sketchapp.me/proektiruya-luchshie-obuchayushhie-vsplyvayushhie-podskazki/

Михаил Капанага пересказал историю о том, как запутанный дизайн бюллетеня повлиял на выборы 2000 года в США.

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

https://medium.com/kapanaga/8c65f2953312

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

Время можно объективно измерить, но в жизни оно воспринимается субъективно. В человеко-машинном взаимодействии пользователь чувствует прирост, если скорость изменилась минимум на 20%. Важно выбрать правильный индикатор.

Среди приёмов управления восприятием: установка верхних и нижних границ, упреждающий запуск и раннее завершение, нелинейная индикация выполнения, постоянное информирование, целенаправленное отвлечение (демонстрация интересной и важной информации).

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

https://designpub.ru/47c75807498d

Джон Яблонски написал, каким должен быть интерфейс, чтобы работа с ним требовала меньше ментальных усилий.

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

#cognitive_load

Антон Николов написал об использовании в дизайне когнитивного диссонанса.

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

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

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

In English.

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

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

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

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

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

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

Кашмир Хилл написал, как социальная сеть для соседей Nextdoor боролась с расистским профайлингом — сообщениями вроде «видел в переулке подозрительного негра».

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

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

https://medium.com/rofldorf/6d3d9b81dca9

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

Хороших исполнителей много, конкуренция станет ещё сильнее. Чтобы через 5 лет не потеряться в текучке типовых клиентских проектов:
— Не уходите в ремесло;
— Никого не спрашивайте, а пробуйте;
— Делайте свои проекты.

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

— Ничего не делать. Подойдёт, если действие совершается часто, и цена ошибки невысока;
— Запросить подтверждение: через диалоговое окно, повторное нажатие в другом месте (удаление будильника в iOS), повторное нажатие в том же месте (загрузка приложения в App Store), замена тапа на свайп (подтверждение заказа в Amazon). Подойдёт для редких действий и высокой стоимости ошибки;
— Позволить отменить. Подойдёт для частых действий с высокой стоимостью ошибки. Например, Google Inbox позволяет отредактировать отправленный мейл, ненадолго задерживая его отправку. Эта стратегия обычно дороже и не всегда может быть реализована.

In English.

Как именно Твиттер борется с агрессивным поведением пользователей, Джон Белл не рассказал (несмотря на название статьи). Зато стало понятно, что это очень непростая тема. Цитаты:

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

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

Мы стараемся не гадать о стандартах качества, а дать пользователям возможность устанавливать их. В Twitter вы можете блокировать определённые слова, не получать уведомления от новых пользователей, от пользователей, на которых не подписаны, которые не подписаны на вас, которые не оставили свою почту, которые не указали свой номер телефона. Если я заблокирую слово «Трамп», я не увижу его в своей ленте. Но если моя мама напишет мне: «Боже, ты видел, что написал Трамп? Ну, неважно, с праздником тебя. Увидимся завтра?» — я должен это видеть или нет?

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

Саша Бизиков сходил в БВШД на «Большую дискуссию» с Артёмом Геллером, Денисом Башевым и Владимиром Лифановым. Основные тезисы:

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

2. Дизайн — не только решение задачи. Ложная установка пришла из бизнеса и мало соотносится с дизайном. Задача дизайнера не только решить задачу, но и принести в мир частицу прекрасного.

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

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

5. Узнали что-то новое — примените.

6. Учитесь аргументировать решения.

7. Критиковать и предлагать — недостаточно. Пробуйте сделать сами.

Копия в Вебархиве.

Пулкит Агравал написал, как правильно рассказывать пользователям о новой (или просто дополнительной) функциональности продукта с помощью всплывающих подсказок:

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

https://medium.com/rofldorf/92c67d0408c9

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

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

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