Кейт Моран с Ким Флаэрти из Nielsen Norman Group написали про ментальные модели.

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

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

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

https://vc.ru/design/56471

И ещё хороший материал по теме, который я публиковал ранее: «Ментальные модели в проектировании продукта».

https://www.cossa.ru/trends/142341/

Лакшми Мани написала о таком когнитивном искажении как гиперболическое дисконтирование (hyperbolic discounting).

Оно проявляется в склонности людей предпочитать пусть меньшие но мгновенные вознаграждения большим но получаемым некоторое время спустя. Большинство выберет 100 долларов сейчас, а не 120 через неделю.

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

Как снизить его влияние на наш выбор:
— Посочувствуйте себе в будущем. Если вы весь день собираетесь смотреть Netflix, а накопившиеся дела сделать завтра, представьте, в каком огне вы окажетесь завтра.
— Возьмите на себя обязательства заранее. Настройте автоматический перевод части дохода на сберегательный счёт. Подпишитесь на доставку здоровой еды.
— Разбивайте большие цели на посильные для выполнения задачи. Так вы сможете получать вознаграждения после выполнения каждой маленькой задачи, а не только в самом конце после достижения цели.

https://newochem.ru/psixologiya/giperbolicheskoe-diskontirovanie-pochemu-my-chasto-prinimaem-nevernye-resheniya/

Дмитрий Макаров написал, чем UX-писатель отличается от копирайтера.

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

https://sobakapav.ru/articles/ux-writer-difference

Саша Бизиков сделал первый видеовыпуск своего подкаста.

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

А вот отрывок про дизайн-школы:

«Отучившись в Британке 1,5 года и свалившись с истощением, ушла в свободное плавание. Сказала, что больше не вернусь в эту шарашкину контору, буду пить, есть, спать и гулять. Потом денег на Британку уже не было. Я решила продолжить образование и пошла в „Национальный институт дизайна“ в Москве. Он более чем оправдывает своё название, это полное дно. Может быть, сейчас что-то поменялось, я на это надеюсь, но сильно вряд ли».

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

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

Сегодня в 17:00 эксперт Сбербанка по инклюзивности Валерия Курмак поделится своими знаниями в подкасте «Нормально делай, нормально будет».

http://radio.mediametrics.ru/normalno_delaj/61086

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

«В 1930 году психолог Гарвардского университета Скиннер провёл эксперимент. Он поместил голодную крысу в камеру с рычагом, нажав на который крыса получала кусочек корма. После нескольких визитов в камеру крыса научилась нажимать на рычаг, чтобы утолить голод.

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

Скиннер — наиболее яркий бихевиорист. Представители этого направления психологии считали, что поведение человека зависит от стимула и вознаграждения. Они изучали то, что можно непосредственно наблюдать — реакцию человека на окружение. И считали, что для контроля за поведением достаточно создать правильную „камеру“».

https://vandergrav.ru/the-scientists-who-make-apps-addictive/

Михаил Нозик рассказал о контрасте в вёрстке.

Показал:
— Как эффектно сверстать блок с помощью контраста начертаний, полей формата, размеров объектов, пропорций, расстояний, массы объектов;
— Примеры контрастной вёрстки на сайте Apple и «Коворкафе»;
— Когда правило внутреннего и внешнего можно игнорировать.

Легко можно смотреть на скорости 1,25.

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

Наташа Гермогентова написала о работе UX-редактора в «Яндекс-деньгах».

Текст для кнопок, ссылок, лейблов и тултипов — примерно шестая и последняя часть её работы. Она начинает на уровне общего смысла и подключается, когда есть обоснование, идея и общий концепт, началась проработка техрешения (или не началась).

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

Иногда после серии редакторских «почему» оказывается, что логику можно поменять, а ограничения — обойти. Так редактор влияет на сценарий, и вместо пяти экранов остаётся два.

Очеловечивание текста:
— Система хочет, чтобы пользователь «ознакомился с условиями» и нажал «Подтвердить». Человек хочет сказать ей, что ему «Понятно»;
— Система хочет сказать: ошибка, неправильный номер. Человек хочет увидеть: здесь опечатка — проверьте номер ещё раз.

«Нам долгое время казалось, что для технических ошибок есть отличный заголовок „Что-то пошло не так“. Подходит для любых кейсов, указывает на факт ошибки, при этом в нём ни капли роботизированности. Но время и фидбэк показали: людей очень раздражает, когда „что-то идёт не так“. Что, спрашивают они, что именно?»

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

https://habr.com/ru/company/yamoney/blog/439186/

Евгений Яровой и Илья Федоренко рассказали, как заказчик может испортить отношения с дизайнером (2-й выпуск рубрики «Референт»).

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

2. Постановка задачи «сделать красивый сайт». Красота — составляющая результата, но не самоцель.

3. Изменение задачи в процессе работы, завуалированное под «я вам объяснял, а вы не поняли», «я представлял себе это иначе». Это может случиться после этапа аналитики, когда клиент осознаёт, что ему нужно немного не то, о чём он договорился с дизайнером изначально. Дизайнер придерживается изначальной постановки задачи, клиент тянет в сторону своих новых ожиданий.

4. Неконструктивная обратная связь — «переделайте, мне не нравится» без обсуждения конкретных минусов предложенного. Без обратной связи не понять, где дизайнер ошибся с пониманием бизнеса клиента и поставленной задачи.

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

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

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

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

Михаил Греков написал о добавлении и поиске данных в таблицах, с которыми работают.

Как помочь пользователю добавлять данные быстрее:

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

2. Если данные достаточно однородны, пригодится возможность создать копию или создать на основе. В первом случае в ключевое поле добавится текст «Копия». Во втором — отобразится форма, в которую уже введены данные из основной записи.

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

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

5. Дать возможность не возвращаться к таблице после добавления первой записи, а сразу добавить вторую. Например, с помощью кнопки «Сохранить и добавить новую».

6. Учитывать параметры поиска при добавлении записи. Если пользователь искал проект «Сайт города С» для исполнителя «Иванов», эти параметры могут быть заполнены в форме добавления нового проекта. Как в Jira.

7. Импорт записей из файла полезен для работы со внешними источниками информации, первоначальном наполнении данными, которые раньше велись в Excel.

Поиск:

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

2. Иногда пользователю для работы требуется всего несколько полей из расширенного поиска. Можно вынести их на панель основного поиска или дать пользователю настроить поля для основного поиска.

3. Когда нет основного поиска, полезен поиск по столбцу таблицы. Многие табличные движки поддерживают его из коробки.

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

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

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

7. Поиск не должен сбрасываться после ухода со страницы и после выхода из системы. При этом важно, чтобы пользователь понимал, что применены критерии поиска.

8. Должна быть возможность отключить фильтр одним нажатием.

9. При выборе параметров поиска из раскрывающегося списка бывает полезен множественный выбор и возможность выбрать и снять все варианты из списка. Например, так можно найти записи всех цветов кроме жёлтого.

https://designpub.ru/ed9675d3136e

Алита Джойс написала о всплывающих подсказках (tooltips).

Всплывающая подсказка — это краткое сообщение, которое отображается при наведении курсора на элемент интерфейса (или фокусировке на нём с помощью клавиатуры).

1. Не стоит прятать в подсказки важную информацию, без которой пользователю не выполнить нужное действие. Например, длинный список требований к паролю.

2. Подсказка должна быть краткой.

3. Подсказка должна быть полезной. Если на кнопке написано «Add new line», в подсказке к ней нет смысла писать «Add new line».

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

5. Чтобы было ясно, с каким элементом связана подсказка, у неё должна быть стрелка, указывающая на этот элемент.

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

7. У иконок без подписей должны быть всплывающие подсказки.

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

https://ux.pub/rukovodstvo-po-vsplyvayushhim-podskazkam-tooltips/

Игорь Васильев написал о проектировании страниц-заглушек.

Пользователь видит пустой экран, когда:

1. Что-то сломалось. Надо продумать все причины ошибок (нет связи, завис сервер, сбой в работе модуля и так далее) и для каждой подготовить текст о том, что могло произойти и что делать пользователю.

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

3. Содержимое должны добавить другие пользователи системы. Надо объяснить, что происходит. Если у пользователя нет прав, можно предложить аналогичные объекты со свободным доступом или дать ему возможность запросить приглашение.

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

Общие рекомендации:
1. Предложите действие: наполнить страницу, посмотреть аналоги, сообщить о проблеме.
2. Добавьте иллюстрацию, чтобы разрядить обстановку.
3. Будьте краткими.
4. Текст сообщения начинайте с цели: «Чтобы найти любимые места, перейдите в список ресторанов».
5. Говорите по-человечески: пишите «На сегодня ещё нет планов» вместо «13.02.2019 ничего нет».
6. Добавьте немного юмора или жаргона, если продукт нацелен на узкую аудиторию.
7. Язык должен соответствовать платформе. В мобильном приложении — tap, в десктопном — click.

https://vc.ru/design/58918

В «Сибириксе» написали о Турбостраницах Яндекса и технологии Accelerated Mobile Pages, которую поддерживает Гугл. Это отдельные версии страниц, которые моментально открываются из результатов поиска.

Плюсы: быстрая загрузка, высокие позиции в поиске, место в «карусели» в гугловом поиске.

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

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

https://blog.sibirix.ru/2019/02/19/amp-pages/

Ольга Шаврина продолжила рассказ об использовании Google Optimize для проведения а/б-тестов.

Как тестировать:
— Всплывающие блоки вроде по умолчанию скрытой плашки с календарём (режим Interactive mode);
— Сразу все типовые элементы на странице, например, карточки товаров в каталоге (кнопка Select similar);
— Совершенно новые элементы интерфейса ↓

Экспериментальный дизайн отображается после полной загрузки страницы, поэтому пользователь может заметить исчезновение новых элементов. Это снижает доверие. Скрытие всего содержимого страницы до загрузки эксперимента замедляет продукт. Чтобы избежать этого, новые элементы следует добавлять в скрытом виде (display: none), а в рамках эксперимента включать их. Тогда пользователь может заметить не исчезновение, а появление элементов, что вполне нормально для современных сайтов.

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

Как проверять экспериментальный дизайн на мобильных устройствах: Preview → Share preview → Открытие полученной ссылки в любом браузере.

#ab_testing

Эдуард Файзуллин написал о том, как способ отображения цены влияет на конверсию. Чтобы конверсия была выше:

1. Цена должна быть. В b2b её часто не указывают, так как:
— В этой сфере не принято. Контрпример: на сайте SpaceX есть цены на ракеты.
— Нет стандартных расценок. Можно указать минимальную стоимость.
— Конкуренты будут в курсе. Они и без сайта будут в курсе.

2. Пишите $2,99 или $2,90 вместо $3,00.

3. Цифры после запятой (99 или 90) уменьшайте визуально.

4. Показывайте зачёркнутую старую цену. Для усиления эффекта можно написать, сколько покупатель экономит в процентах и в абсолютном значении.

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

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

https://spark.ru/startup/conversant/blog/45663/

На «Меле» написали о канцеляризмах в тексте.

1. Слово «являться» почти всегда можно удалить. «Я являюсь писателем» → «Я писатель».
2. «Ввиду» → «Из-за».
3. «В настоящее время» → «Сейчас».
4. «В связи с этим», «в силу этого» → «Поэтому».
5. «Имеет место быть», «имеется» → «Есть».
6. «Данный» → «Этот». Иногда без указательных слов можно обойтись: «В данном тексте допущена ошибка» → «В тексте допущена ошибка».
7. Расщепление сказуемого — использование существительного с глаголом вместо глагола. «Производить проверку» → «Проверять»; «Выполнить доставку» → «Доставить»; «Озвучить возражение» → «Возразить».
8. Расщепление подлежащего или существительного: «Денежные средства» → «Деньги»; «Заработная плата» → «Зарплата».
9. «Осветить вопрос», «поставить вопрос», «поднять вопрос» → «Рассказать».
10. «В процессе чтения книги я узнал» → «Из книги я узнал».

https://mel.fm/gramotnost/2841970-officialese_phrases

Видео с петербургского Design Prosmotr 2018 года:

1. Дмитрий Пёрышков — Дизайн как социальный инструмент
youtube.com/watch?v=Eix4JHKWkuI

2. Юрий Гордон — Композиция как образ жизни
youtube.com/watch?v=-0VIaXfImGI

3. Денис Машаров — Парадигмы типографики
youtube.com/watch?v=LJJXYgMMbUc

4. Покрас Лампас — Дизайн и искусство будущего
youtube.com/watch?v=MY9xLfGHpnA

5. Денис Шлесберг — Зачем дизайнеру оба полушария
youtube.com/watch?v=ODNlOZLcri0

6. Александр Ратасеп — Инструменты дизайна будущего
youtube.com/watch?v=Tf5CcqBdn-0

7. Максим Пономарёв — Ловушки креативного мозга
youtube.com/watch?v=pbPQAMUzkPM

8. Андрей Курпатов — Мозг: инструкция по применению
youtube.com/watch?v=953uZgYNj9g

9. Артур Арсёнов — Как превратиться из дизайнера в компанию
youtube.com/watch?v=hSlHG0IldhU

10. Данила Шорох — Медиа-дизайн сейчас
youtube.com/watch?v=VdyiVkxhfZg

Александр Овчаренко рассказал о красном цвете в ночном режиме интерфейса.

Приборные панели в автомобилях часто подсвечиваются красным или переключаются на красную подсветку ночью. Красными лампами освещаются судовые мосты на ночной вахте. У судовых радаров некоторых производителей — красный интерфейс.

За ночное зрение отвечают рецепторы-палочки. Химические процессы, повышающие чувствительность палочек, занимают от 10 до 20 минут. Рецепторам-колбочкам, которые отвечают за дневное зрение, для активации надо около 15 секунд.

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

Самые чувствительные дневные рецепторы — колбочки L-типа. Они воспринимают жёлто-красную часть спектра.

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

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

#dark_theme

Хосе Торре написал, как проектировать быстрее.

Проектирование — итеративный процесс. Чем быстрее вы работаете, тем больше вариантов можете попробовать, чтобы понять, что не работает, и улучшить решение.

1. Определите свою цель.

2. Не ждите вдохновения, просто начните работать. Не ждите появления музы. Благодаря итерациям работа со средней идеей поможет появлению хорошей идеи.

3. Делайте много эскизов. Это эффективный способ превратить абстрактные идеи во что-то осязаемое и понять, работают ли они. Эскизы проще отбрасывать, так как вы к ним ещё не привязались. Звучит как лишний шаг, но это возможность быстро и недорого экспериментировать.

4. Поделитесь своим прогрессом и получите обратную связь. Лучше раньше, чем позже. Члены вашей команды могут что-то добавить, и это будет уже ваша общая идея, защищать и продвигать её будет проще.

5. Слушайте. Не стоит полагаться исключительно на своё мнение, если вы проектируете не только для себя.

6. Проектируйте поэтапно. Разделите проект на контрольные точки:
— Общая идея в виде грубых набросков, несколько вайрфреймов, которые показывают сценарий взаимодействия;
— Расширение идеи в виде грубого прототипа;
— Завершение в виде прототипа высокой точности или финальной анимации.

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

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

https://ux.pub/7-sovetov-kotorye-pomogut-proektirovat-bystree/

Лев Соломадин написал об особенностях подхода к дизайну в реальном производственном секторе на примере компании «Сибур».

«Тобольск, −40, темно, видимость не особо, ты ходишь брать пробы. К тебе приходят ребята из цифрового подразделения и радостно сообщают: „Всё, порешали мы твою проблему с бумажками, на тебе, мужик, смартфон“. А ты сидишь и думаешь — ну офигеть теперь, на 20 метров забираться, а там ещё смартфон этот доставать и тыкать чего-то».

«Мы гораздо ближе к пользователю нашего продукта. Это же касается и онбординга — никаких непоняток и разночтений. Собираем ребят, показываем им, как именно порешали их проблему, чего и где изменилось, как пользоваться всем этим».

https://habr.com/ru/company/sibur_official/blog/439818/