UX Notes
24.8K subscribers
59 photos
3 videos
1 file
1.17K links
В соцсетях: vk.com/ux_notes и fb.com/uxnotes
Чат читателей: @uxnoteschat
О карьере в UX-дизайне и вакансии: @uxwork

Рекламодателям: uxnotes.ru/ads · В перечне РКН: gosuslugi.ru/snet/67a9a56970de7b4d761a81ae

Est. 2016 · Автор: @zGrav
Download Telegram
Анна Кочеткова кратко пересказала статью Nielsen Norman Group о самых частых ошибках пуш-уведомлений.

Что приложения делают не так и как это исправить:

1. Просят разрешения слать уведомления при первом запуске, когда продукт ещё не несёт ценности для пользователя.
Совет: просите доступ к уведомлениям, когда пользователь уже познакомился с приложением.

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

3. Отправляют несколько уведомлений подряд.
Совет: комбинируйте похожие уведомления в одно. Например, Инстаграм присылает один пуш про несколько лайков: «Боре и ещё 9 друзьям понравилось ваше фото».

4. Делятся нерелевантным контентом.
Совет: присылайте важные уведомления и не отвлекайте по пустякам.

5. Прячут настройки уведомлений.
Совет: дайте возможность выбрать нужные уведомления в настройках приложения.

https://www.nngroup.com/articles/push-notification/
Иван Серебренников написал, как делает userflow.

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

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

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

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

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

https://teletype.in/@serebrennikov/SkJ7tTee4
Егор Камелев рассказал, как составить функциональные требования к продукту перед началом работ по проектированию.

Получилось 2-часовое видео по темам:
— Вопросы клиенту для сбора функциональных требований;
— Пользовательские сценарии на лету;
— Как пользоваться шпаргалкой по составлению функциональных требований.

Начинать смотреть с 13:45.

https://www.youtube.com/watch?v=H4GWIbe4RoI&t=825
Основатели маленьких украинских агентств рассказали об особенностях своего бизнеса и нежелании расти.

— Руслан Гордиенко (Атака, 5 человек):

В большой компании сначала решаешь ты, потом твой арт-директор, креативный директор, генеральный директор, а в конце звонит клиент-менеджер со словами: «Вы что там, совсем долбанулись головой?!». Разумеется, менеджер боится генерального и приходит к креативному директору, ругается, и всё это спускается к тебе. А ты вообще не понимаешь, что происходит. Говорят, полная туфта, надо переделывать. Что переделывать?

Я семь лет через все это проходил. В какой-то момент я звонил клиенту напрямую, спрашивал и договаривался. Но большинство так не делают, им так нельзя. Есть политика — нельзя спорить с клиентом.

— Владимир Смирнов (Spiilka Design Buro, 6 человек):

Точно не хочется быть большими, забюрократизированными и неповоротливыми. Просто в какой-то момент вам хочется попробовать — и вы начинаете что-то свое, небольшое и камерное. А потом начинается рост или в качестве, или в количестве, или и в том, и другом. Либо же ваше дело умирает.

Наше преимущество — у нас большой опыт, работают только крутые. Мы дизайн-спецназ, каждый проект ведёт персонально один из партнёров.

— Дмитрий Ярыныч (Hooga, 6 человек):

Я рассчитываю на самоорганизующихся людей. Они сами знают, что надо делать: когда у них встреча и что надо подготовить. Если не знают — спросят и сами всё сделают. Но есть нюанс: такой подход не позволяет сильно масштабироваться. Найти 100 таких людей и платить им адекватные деньги невозможно.

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

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

https://vctr.media/eating-the-big-fish-ataka-spiilka-hooga-11210/
Опубликованы записи докладов с секции «Дизайн» фестиваля G8:

1. AGIMA: Гриша Коченов — Зона отчуждения. Слепая зона дизайнеров
youtube.com/watch?v=2jiFtj08T-E

2. Ярослав Рассадин — В поисках своего языка
youtube.com/watch?v=OTVsYZua6zo

3. SketchAR: Андрей Дробитько — Синергия технологий и искусства. Дополненная реальность
youtube.com/watch?v=p2Hok7b68FA

4. Mail.Ru Group: Юрий Ветров — Алгоритмический дизайн
youtube.com/watch?v=_c6vb6AKfwY

5. SASHA design studio: В. Аюев — Будущее визуальной коммуникации. Утопия и способы её приближения
youtube.com/watch?v=7SF_-D21dA8

6. TypeType: Виктория Усманова — Кастомизация шрифтов: мифы и реальность
youtube.com/watch?v=5cDXxkl2li8

7. Вьюга: Х. Улумбекова — Как иллюстрация стала единым языком коммуникации
youtube.com/watch?v=ShubvsFyOT8

8. SilaSveta: Александр Ус — Light is the New King
youtube.com/watch?v=aKglxTmWgbo

9. Red Collar: Денис Ломов — Влюбиться в интерфейс
youtube.com/watch?v=_kP-_1ZXL5E

10. Wearable Tech: Никита Реплянский — Дизайн тела. Современные киборги. Умные аксессуары
youtube.com/watch?v=terqqIaCnLc

11. Сандра Ковальски — Искусство, которым можно достучаться
youtube.com/watch?v=8s6sYwFHVoM

12. Максим Жестков — Оставаться собой в мире, который постоянно пытается сделать вас чем-нибудь другим
youtube.com/watch?v=Nxi4iuLi2kU

13. SpecialOne: Станислав Яковлев — Искусство спорта
youtube.com/watch?v=7j2lFM58oOA

Все видео в одном месте: youtube.com/playlist?list=PLzqQCeTtpSBo39FMR-s3ub5VpPsqGaHfp
Собрал 20 заметок, которые получили больше всего лайков и репостов в ВК.

В топ попали: 6 оригинальных статей, 5 переводов, 4 подборки записей докладов с мероприятий, 2 подборки книг, 1 гайдлайн, 1 видео и 1 конспект лекции.

https://vandergrav.ru/popular-ux-notes-2018/
Илья Сидорчик сделал конспект книги Пако Андерхилла «Почему мы покупаем» о проектировании торговых пространств.

«После входа в магазин начинается транзитная зона. Всё, что попадает там в поле зрения покупателей, никак на них не влияет. Поставите горку корзинок — посетители вряд ли станут их брать; передвинете на 3 метра дальше от входа — корзинки моментально разберут. Это закон природы: посетителям нужна посадочная полоса.

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

https://sidorchik.ru/blog/all/summary-of-why-we-buy/
Игорь Ермоленко написал, как в Беларуси снизили смертность на дорогах.

Согласились на норматив — минус 100 смертей в год на каждые 10 млн человек. Начальники ГАИ, которые не справлялись со снижением, считались неэффективными и лишались погонов.

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

Приоритетные факторы:
— незащищённость пешеходов,
— тёмное время суток,
— плохо спроектированные пространства.

Решения:
— Не экономить на городском освещении. В Минске это всего 3% от общего энерготрафика.
— Перепроектировать проблемные участки дорог. Например, в местах с 4-полосным движением и центрами притяжения водители часто паркуются слева и справа. Жертвами становятся пешеходы, которых не видно из-за припаркованных автомобилей.
— На оживлённых улицах для пешеходов строить островки безопасности.
— Выделять пешеходные участки на дорогах цветом и другими сигналами.
— Снижать автомобильный трафик в городе. Например, с помощью платных парковок в центре.
— Снижать максимальную скорость до 50 км в час в жилых районах и центре города.
— Снижать значение, на которое можно превысить ограничение скорости без штрафа.

«Мы пишем проектировщику: на этой улице должно быть не более такого-то количества ДТП и раненых в год. И проектировщик должен [под эти требования] подстраиваться, он подписывает документ, что, грубо говоря, гарантирует, что на этой улице будет гибнуть не более 2 человек в год».

https://city4people.ru/post/blog_674.html
Богдан Гречановский рассказал о тонкостях написания UX-текстов.

«В CleanMyMac достаточно сухой и сдержанный tone of voice, не отвлекающий от серьезности процесса очистки, так как мы работаем с системными файлами. В программе для поиска дубликатов Gemini, которая работает с менее опасными вещами, допустим более раскованный тон.

Помещать в тексты своего продукта много фана — популярная практика, хотя она и достаточно опасна, если отдаляет пользователя от его цели. Развлекательный элемент уместен, когда пользователь находится на пути к ценности продукта. Например, происходит процесс сканирования, без которого всё равно не обойтись. Это хороший момент, чтобы развлечь пользователя — так в Gemini появляется текст: „Sit back and relax“.

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

https://telegraf.design/konspekt-dizajnera-ux-writing/
Руководство по обеспечению доступности веб-контента — WCAG 2.0 — уже давно создали в W3C и перевели на русский: w3.org/Translations/WCAG20-ru/

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

В 2018-м вышла версия 2.1. В UsabilityLab перевели новые пункты руководства: usabilitylab.ru/blog/wcag-2.1-rus/

Так что, чтобы прочитать все рекомендации, сначала смотрим документ по 1-й ссылке, затем — по 2-й.
Рекрутёр Дейв Фельдман рассказал, каким должно быть портфолио.

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

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

Описание проекта:
— Покажите макеты в полном размере, чтобы их можно было рассмотреть.
— Не используйте мокапы с изометрией и перспективой.
— Дайте краткий обзор процесса. Особенно, если новая информация привела к его корректировке.
— Дайте обзор проблемы и предметной области.
— Покажите, что сделали именно вы: с чего начали, что изменили, какие были ограничения, что вы хотели бы изменить. Изображения «до» и «после» очень ценны.

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

https://designpub.ru/7a05a381474c
Чем отличаются иконки «палец вверх», «сердце», «закладка» и «звезда», и что каждая значит по мнению большинства пользователей?

Вспомнил примеры использования этих метафор в интерфейсах и поделился своим мнением.

1. Они подходят, чтобы выделить объект в неком позитивном ключе:
— Мне нравится, что здесь написано;
— Это может мне пригодиться.

2. Выбор конкретной метафоры зависит от общей функциональности продукта и его тематики.

3. Обычно в одном интерфейсе не задействуют одновременно: закладки и звёздочки, сердечки и пальцы вверх.

https://vandergrav.ru/thumb-up-heart-bookmark-star/
Евген Ешану рассказал об основных ошибках продуктовых дизайнеров.

1. Непонимание, как люди будут использовать продукт в реальной жизни.
2. Убеждённость в их логичности.
3. Вываливание на пользователя лишней информации. Ожидание, что он прочитает весь предложенный текст.
4. Инновации ради инноваций.
5. Изменение привычных паттернов взаимодействия при редизайне.
6. Неспособность спрашивать, зачем делается продукт, какая задача таким образом решается и другие важные вопросы.
7. Нежелание писать о продукте просто, для людей.
8. Добавление большого количества не ключевых возможностей.
9. Бездумная реализация пользовательских пожеланий.
10. Привлечение многих людей к созданию продукта. Огромная команда не способствуют оригинальности.
11. Убеждённость, что пользователь при взаимодействии с продуктом будет сосредоточен и сможет уделить ему достаточно времени.
12. Добавление на дорожную карту функций вместо бизнес-проблем, которые надо решить.
13. Отсутствие пользовательского тестирования.
14. Ожидание от пользователя машинной точности при работе с интерфейсом.
15. Моментальный переход к решению заявленной проблемы вместо попытки разобраться, правильная ли это проблема.
16. Непонимание того, что человеческое мышление быстро не меняется. Что было трудным для пользователя 20 лет назад, продолжает быть трудным сегодня.

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

https://vc.ru/design/55464
Павел Шерер написал серию статей про дизайн данных. Первая объясняет, что это (не инфографика и не информационная архитектура) и зачем им надо заниматься.

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

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

https://sherer.pro/blog/dizajn-dannyh-chast-1-chto-i-zachem/
Михаил Греков написал, как сделать удобнее таблицы, с помощью которых пользователи управляют данными (CRM, ERP и прочие системы).

В первой статье разбирается просмотр данных.

1. Рабочая таблица должна занимать максимум места на экране. Как вариант — опция «на весь экран».
2. Объединяйте данные. Если есть данные о фамилии, имени и отчестве, их целесообразно вывести в один столбец ФИО. Должность или роль в системе тоже можно присоединить к ФИО.
3. Бесконечная прокрутка и кнопка «Показать ещё» не подходят для отображения строк таблицы. Делайте постраничную навигацию. Это удобно и для коллективной работы с таблицей.
4. Показывайте по умолчанию больше строк на одной странице: 50, 100, 500.
5. Используйте цветовые индикаторы. Красить строку целиком стоит только при отклонении от нормы.
6. При наличии цветовых индикаторов полезно отображать легенду цветов.
7. Храните пользовательские настройки вида, не сбрасывайте их после окончания сеанса.
8. Связанные сущности (название организации может быть связано с карточкой организации) полезно делать ссылками на соответствующие карточки. Но если таких сущностей в строке много, выделите только полезные в работе.
9. Строка должна подсвечиваться при наведении курсора. Должна быть возможность выделить строку кликом на неё.
10. Нет ничего страшного при появлении горизонтальной прокрутки.
11. В некоторых случаях полезно маркировать просмотренные записи.
12. Должна быть настройка отображения столбцов с системными свойствами (ID, дата создания, автор, дата изменения).
13. Переход к просмотру записи удобно сделать по двойному клику.
14. Иногда удобен режим предпросмотра, когда по клику открывается не вся запись, а сводка по ней, как в Google Drive.

«Строка в таблице часто является прелюдией к просмотру полной информации по записи. На моей практике в 99% рабочих таблиц модальный режим просмотра уступал просмотру записи на отдельной странице».

https://designpub.ru/5ea60df37f12
Записи докладов с секции «Дизайн» конференции Dump-2018:

1. Сергей Абдульманов — Чем конкретно отличается понятный текст для интерфейса
youtube.com/watch?v=XrhxisJN_zQ

2. Александр Бурт — Колорпикеры
youtube.com/watch?v=xRlekzkuz4I

3. Александра Ермоленко — Проектирование дизайн-системы Рамблера
youtube.com/watch?v=ZxmcIpmenoY

4. Андрей Шапиро — Дизайнер в гостях у программиста и дата-сайентиста
youtube.com/watch?v=Nb99VQYBIRQ

5. Рушана Каюмова и Сергей Соловьев — Отказать в один клик
youtube.com/watch?v=oJ9nzjxapqA

6. Григорий Родионов — Проектирование интерфейсов в VR & AR. Практический опыт
youtube.com/watch?v=zZsrtal_KVA

7. Дмитрий Чернов — Обучение в дизайне. Как быть в тренде и стать специалистом, адекватным рынку
youtube.com/watch?v=HGMOZ7aCMH8

8. Антон Якубов-Цариков — Путь дизайнера
youtube.com/watch?v=Fo3l20K1ZeE

9. Дмитрий Трофимов — Как я женился на карте Екатеринбурга
youtube.com/watch?v=EkReIShwP9k

Все видео конференции в одном месте: https://habr.com/ru/company/it_people/blog/415527/
Кейт Моран с Ким Флаэрти из 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