Татьяна Гущина написала, как учесть когнитивные искажения при проектировании интерфейсов.

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

1. Простота вызывает доверие. Чистый UI и продуманный UX.
2. Симпатия при повторе. Использование паттернов.
3. Пик в начале. Создание хорошего впечатления при первоначальном использовании продукта (знакомство, демо-версия).
4. Пик в конце. В конце сценария — что-то приятное и необременительное.
5. Дешевый подарок всё портит. Лучше меньше фич, но более качественных.
6. Образы вместо статистики. «11% пользователей» → «1200 из 20 000 пользователей».
7. Примеры против стереотипов. Конкретные примеры и честные факты, чтобы пользователь избавился от стереотипов.
8. Эффект владения. Постепенное внедрение изменений, возможность выбора между новым и привычным, объяснение преимуществ нового.
9. Переоценка редких событий. Не стоит преувеличивать проблемы и сообщать пользователю то, что не касается лично его.
10. Эффект фрейминга. Форма подачи информации влияет на её восприятие.
11. Принимать решения — тяжело. Продуманные варианты по умолчанию.

https://www.redmadrobot.ru/fyi/dumay-medlenno-proektiruya-interfeysyi

Наталья Прокофьева написала о проблеме с завершением сложных дизайн-проектов.

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

Работа над дизайн-проектом заканчивается примерно посередине процесса запуска нового продукта. Расставаясь с внешней дизайн-командой, заказчик боится, вдруг он надумает что-то ещё, что-то пропустил или просто ему понадобится помощь?

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

Как не ходить по кругу бесконечных улучшений:

1. Дизайн никогда не будет готов на 100%. Заказчик должен решить, когда ставить точку и передавать проект разработчикам. Всё, что вылезет потом, — фиксировать и прорабатывать в следующей версии.

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

3. Вместе с макетами дизайнеры должны передать полное описание прототипов: логику переходов, поведение элементов, принципы использования визуальных и смысловых компонентов интерфейса, UI-кит.

4. Отличная практика — shadowing. Заказчик может прислать своих дизайнеров или разработчиков в офис дизайн-команды на день-неделю, чтобы поработать вместе.

https://vc.ru/design/73633

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

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

2. Используйте современные инструменты, в которых есть интерактивные схемы, встраиваемые в страницы с текстом, перекрёстные ссылки на разделы, макросы и динамические содержания конкретных частей, краткие выжимки из разделов и прочее. Павел использует Confluence с плагинами, Axure и Figma.

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

4. Формат документации подстраивайте под особенности проекта и команды, которая его делает. Технологичные стартапы и типовые икомерс-проекты на Битриксе, инхаус-команды и фрилансеры-удалёнщики, разработчики сайтов и приложений требуют разной информации.

5. Придерживайтесь одинаковых формулировок.

6. Ведите словарь терминов. Особенно, если это проект в специфической отрасли.

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

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

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

https://sherer.pro/blog/uchim-proektnuju-komandu-chitat/

Вадик Мармеладов рассказал о проектах Lapka и ЛОТ, работе с Канье Уэстом.

— Хардверный проект Lapka. «Давайте сделаем что-то с сенсорами». Как не специалист будет использовать алкотестер или дозиметр? Получился модный аксессуар. Человек сначала хочет его купить, а уже потом думает о функциональности.
— Работа с Канье Уэстом над Yeezy. Дизайн магазина Adidas&Yeezy, Канье сказал: «У меня дети, в магазине не должно быть никаких острых углов». Придумали место, похожее на психоделический экспириенс.
— Канье: «Каждый элемент, который мы предлагаем, должен быть изобретён». Тарелка не может быть круглой, даже если это удобно. Мы обязаны попробовать другие версии. Треугольная тарелка появилась в контексте: в пространстве нет столов, и люди едят, положив тарелку себе на колени. Её свойства определены историей.
— Делаем вещи такими, какими они должны быть. И оказывается, что так действительно можно сделать. Хотя раньше мы ограничивали себя и делали как нужно.
— Единственный проект для Канье, который вышел за пределы концепта, — награды и прочие материалы для церемонии награждения PornHub.
— Проект ЛОТ (сейчас): не прямолинейно в диалоге выясняет потребности клиента («любишь ли ты дождь», а не «нужен ли тебе зонт») и формирует персонально для него посылку с повседневными вещами.
— Продукт создаётся через страдание. Создатель либо страдает до конца, либо передаёт его пользователю через недоделанный продукт.
— Мы делаем дизайн не зубной щётки, а ритуала.

https://www.youtube.com/watch?v=CKBA-ABD1Fw

Вадим Шлячков написал о законе Хика.

В статьях (и даже в википедии) пишут, что закон Хика утверждает следующее: с увеличением количества вариантов увеличивается время принятия решения.

В своей работе Хик пишет не о «времени принятия решения», а о «времени реакции выбора», что не одно и то же.

1. Время простой реакции (simple reaction time) — испытуемый даёт единственный ответ на единственный раздражитель.
2. Время реакции выбора (choice reaction time) — от испытуемого требуется реагировать различным образом на разные типы раздражителей.
3. Время реакции различения (discrimination reaction time) — предполагает единственный ответ на один из нескольких раздражителей.

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

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

Также исследования показали, что закон:
— Перестаёт работать после практики. После 6000 попыток время реакции на 8 вариантов раздражителей приблизилось ко времени реакции на 2 варианта.
— Не работает, когда раздражитель и способ реакции взаимосвязаны. Надо указать стилусом на подсвечиваемую область.
— Не распространяется на реакцию зрачков.
— Не учитывает эффект последовательностей.
— Ограничен количеством вариантов. Время реакции в эксперименте с 1023 вариантами отличалось всего на 20−30 мс от эксперимента с 31 вариантом.
— Не всегда хорошо описывает ситуацию, когда пользователь может связать предлагаемые варианты ассоциациями.

https://medium.com/v.shliachkov/2d577e005a69

Артём Полтавцев написал о формах записи в салоны красоты.

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

Сервис GBooking можно связать с сайтом по API. Логика заказа: выбор первой услуги → выбор студии → добавление услуг → выбор мастера и времени. Выбор первой услуги ограничивает выбор студий, так как не везде может быть одинаковый набор специалистов и оборудования.

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

https://vc.ru/design/70728

Олег Якубенков написал о разнице между Customer Development и Custdev.

Знание термина Customer Development в англоязычном IT очень низкое. Не говорите, что вы кастдевили своих клиентов, вас не поймут. Также это будет звучать странно в контексте изначального значения термина.

Изначально Customer Development — методология создания новых продуктов и стартапов, где через взаимодействие с потенциальными клиентами проверяются гипотезы о проблеме, решении, рынке, каналах привлечения. Состоит из этапов:
1. Обнаружение клиентов;
2. Подтверждение клиентов;
3. Создание клиентов;
4. Построение компании.

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

В русскоязычном IT методология сузилась до конкретного метода проверки гипотез — глубинных интервью. То, что мы называем кастдев, англоязычные коллеги называют User Research.

https://gopractice.ru/customer-development-custdev/

Шейн Дойл написал о неидеальных состояниях интерфейса.

Многие дизайнеры проектируют только идеальное состояние, когда всё отображается корректно и контент идеален. Но есть ещё состояния:

1. Пустое: контент ещё не добавлен, нулевые результаты поиска, пользователь удалил контент.
2. Загрузка: когда загружается контент или выполняется какое-то действие. Важно донести до пользователя, что программа не зависла.
3. Частичная наполненность: когда есть только часть контента. Подумайте, как помочь пользователю сделать так, чтобы получить идеальное состояние.
4. Неидеальное: слишком длинный или короткий текст, изображения в неправильном формате или отсутствуют, нет части контента. Пользователь не должен думать, что программа сломалась.
5. Интерактивное: фокус на элементе, заполнение поля и другие изменения интерфейса после взаимодействия с пользователем.
6. Ошибка: нет подключения к сети, пользователь сделал что-то не то, системная ошибка. Важно, чтобы пользователь понимал суть ошибки и что ему делать.
7. Выполнение действия: когда пользователь справился со своей задачей. Состояние может отличаться для разных пользовательских задач.

https://ux.pub/proektirovanie-razlichnyh-sostoyaniy-interfeysa/

Если попробуете в приложении «Сбербанка» пополнить баланс телефона, номер которого отличается от вашего на 1−2 цифры, приложение обратит на это внимание.

Нашёл Александр Караваев: https://twitter.com/aakaravaev/status/1154347701460525056

Опубликованы записи докладов с Everfest 2019:

1. Алексей Раменский — Как распорядиться бюджетом и выбрать подрядчиков
youtube.com/watch?v=k89S8PzXSjw

2. Ольга Каверина — Судиться нельзя уступить. Юридические отношения в digital
youtube.com/watch?v=xTirDtJ5w7Q

3. Роман Шелехов — Adobe XD. Как проектировать и дизайнить продукт в одном приложении
youtube.com/watch?v=rOC-V65SFqE

4. Олег Чебулаев — Дизайн мобильных приложений. Принципы хороших интерфейсов
youtube.com/watch?v=ORK4eGVu6Vc

5. Денис Ломов — ImmersiveUX: как мы ищем решения
youtube.com/watch?v=G7UNxqM6tDk

6. Владимир Белоусов — Интерфейсы, которые спасают жизни
youtube.com/watch?v=PB5QZpxoOE8

7. Пётр Федюшкин — Как бизнесу получить хороший продукт, работая с подрядчиками
youtube.com/watch?v=GQpm9jxtCBo

8. Кирилл Кириллов — Почему жестить с клиентом — нормально
youtube.com/watch?v=3rnWM7E159w

9. Дмитрий Тюрин — Твёрдое и пустое. Чеклист руководителя проектов
youtube.com/watch?v=i8okFkRatjA

10. Иван Куксин — Архитектурная 3D визуализация: реализм, экономичность, WOW
youtube.com/watch?v=0bN4XI7QD_U

11. Александр Васильев — Дизайн корпоративной культуры
youtube.com/watch?v=2zYk09RQcn0

12. Талли Кельми — Для чего городам нужен бренд и что такое маркетинг территорий
youtube.com/watch?v=VtNmj3AZnbY

13. Илларион Гордон — Эстетика в типографике
youtube.com/watch?v=qTZN5j6Oo-A

14. Владимир Лифанов — В закромах у Родины
youtube.com/watch?v=33N_6rsObyM

15. Олег Капитонов — Введение в игры
youtube.com/watch?v=46wWhVwGh14

16. Павел Постников — Современные способы работы с 3D графикой
youtube.com/watch?v=dhyfLsr-GsU

17. Владислав Денисов — Геобрендирование и особенности работы с городской инфраструктурой
youtube.com/watch?v=P5SUsDC5gc4

18. Константин Ершов и Дмитрий Лимонов — Как подружить дизайнера и верстальщика?
youtube.com/watch?v=OIoyJxLeyxE

19. Алексей Бородкин — Ваш дизайн никому не нужен
youtube.com/watch?v=WINHpq6-wgs

20. Антон Артюшин — Юзабилити в цифрах
youtube.com/watch?v=17uyft5eCCc

21. Григорий Коченов — Интерфейсы, дизайн и будущее через призму кино и реальности
youtube.com/watch?v=nkszxg2KzAM

22. Борис Шпирт — Как нейтрализовать клиентские манипуляции
youtube.com/watch?v=pPxpFf_MuVk

23. Алла Штауб — Упорядочиваем дела: как из хаоса сделать в агенстве порядок
youtube.com/watch?v=Zn4_algTBt8

24. Александр Аверин — Нет времени объяснять, показывай!
youtube.com/watch?v=pLXnfhLNuSk

25. Константин Замуренко — Как получить работу продуктового дизайнера
youtube.com/watch?v=oEC0fBuy0Bo

26. Мелор Курдованидзе — Работаю со вкусом: как мы дизайним сайт
youtube.com/watch?v=javMmob_nLM

27. Денис Пушкин — Дизайн, который помогает зарабатывать деньги
youtube.com/watch?v=KhMRexDlyQc

28. Анастасия Шевченко — Ловушки мышления в проектировании интерфейсов
youtube.com/watch?v=PoJm1Nlpfrw

29. Виталий Пудовкин — Почему UX/UI вторичны при работе с крупным заказчиком
youtube.com/watch?v=K5lb4TZLblI

30. Анастасия Чуракова — Доступный интерфейс для людей с ограниченными возможностями
youtube.com/watch?v=0C1mnPJN5eQ

Все видео в одном месте: youtube.com/playlist?list=PL4qk7ELFq29nJeeUIwthiQyTpszVni-LD

Фабрицио Тейшейра и Тайо Брага написали, что может сделать дизайнер, чтобы цифровые продукты, над которыми он работает, становились этичнее. Несколько цитат:

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

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

Хотя мы понимаем, что такая тактика — проектирование ради метрик — реально не всегда полезна, мы называем свои методы позитивно: взлом роста (growth hacking), геймификация и петли вовлечения. Мы стараемся не думать о возможных пагубных последствиях.

«Пока мы не начнём измерять то, что ценим, мы будем переоценивать то, что измеряем», — Ким Гудвин.

Представьте: девушка присоединяется к ЛГБТК-хору в колледже. Руководитель хора добавляет её в группу в Facebook, и Facebook автоматически делится этим действием в новостной ленте студента. Однако девушка ещё не рассказала семье о своей сексуальной ориентации. Могут ли продукты случайно нанести вред?

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

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

https://awdee.ru/world-needs-a-tech-diet/

Энтони из UX Movement написал, как показать в переключателе, какой вариант выбран.

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

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

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

https://ux.pub/pochemu-knopki-pereklyucheniya-toggle-buttons-sbivayut-s-tolku/

Денис Бесков написал о Customer Development (в том виде, в котором подход разработал Стив Бланк).

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

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

Product-market fit — ситуация, когда нашлась значимая проблема, за избавление от которой клиент готов платить, и есть решение, как это сделать. После этого решение можно масштабировать.

Если появилась идея продукта:
1. Предварительно оцените объём рынка. Он должен быть достаточно большим для будущей компании.
2. Сформируйте гипотезы о целевой аудитории продукта, в ходе какой деятельности у людей возникают проблемы, которые может решить продукт, что это за проблемы.
3. Проведите глубинные интервью с представителями целевой аудитории, чтобы подтвердить гипотезы.
4. По результатам интервью уточните гипотезы.
5. Проведите количественные исследования, чтобы уточнить объём рынка для каждого сочетания проблемы и сегмента целевой аудитории.
6. Выберите проблему с самым большим рынком.
7. Создайте ценностное предложение и проверьте его «решенческим интервью» и последующей продажей.
8. Создайте решение, с помощью которого вы в ручном или полуавтоматическом режиме сдержите данное клиенту обещание. На этом шаге оказание услуги может быть нерентабельным, это нормально.
9. Окажите некоторый объём услуг в ручном режиме, чтобы проверить, получается ли сделать клиентов довольными, и заодно узнать о сложностях и подводных камнях.
10. Если клиенты недовольны, ищите другие решения. Если попробовали все возможные решения, возвращайтесь к ценностному предложению и выбору проблемы.
11. Если клиенты довольны, проанализируйте алгоритм выполнения услуги и определите, что можно автоматизировать.
12. Оцените затраты на оказание услуги с учётом будущей автоматизации и стоимость привлечения клиентов в разных рекламных каналах. Поймите, получается ли зарабатывать на отдельной услуге. Это сейчас называют юнит-экономикой.
13. Если экономика не сходится, ищите способ изменить проблемный показатель. Если не получается, пересматривайте решение или возвращайтесь на более ранние этапы.
14. Если экономика сходится, можно разрабатывать первую версию продукта и далее переходить к построению компании.

На основе Customer Development Эрик Рис придумал Lean Startup — упрощённый подход к созданию стартапов.

https://vc.ru/marketing/53090

Владимир Лалош написал о FAQ (частых вопросах).

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

Формулируйте вопросы так, как их задал бы человек. «Вы гарантируете безопасность оплаты банковской картой через интернет?» → «А платить у вас картой безопасно?»

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

Если вопросов много, распределите их по разделам.

В тексте ответа должен быть только ответ на вопрос, без рекламы и лирики.

https://medium.com/maratori/501067e7a8da

Энтони из UX Movement написал о таком состоянии кнопки как «загрузка».

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

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

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

Чтобы пользователь лучше понимал, что происходит, текст на кнопке можно менять, например: «Отправить» → «Отправка…»

https://ux.pub/v-kakih-sluchayah-neobhodimy-knopki-s-indikatorom-zagruzki/

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

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

Выбор зависит:
— От запроса команды. Какую потребность исследование должно закрыть?
— Отношения к исследованиям. Надо ли убедить команду в надёжности выводов?
— Особенностей продукта. Это прототип или готовый продукт?
— Связи исследователя с командой. Продолжите ли вы работать вместе после окончания исследования?

Юлия рассмотрела плюсы и минусы 4 основных инструментов и сделала выводы, для каких исследований они подходят:

1. PowerPoint. Подходит для результатов интервью, фокус-групп, юзабилити-тестов, а также если надо показать много скриншотов. Скорее подходит для крупных проектов, когда есть время на оформление слайдов, которые увидит много людей.

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

3. Excel или Google Таблицы. Подходит для любых количественных данных. На одном листе могут быть исходные данные, а на других — результат их обработки. Можно делиться с командой промежуточными результатами с дополнительными гипотезами и инсайтами.

4. Word или Google Документы. Подходит, когда не нужны рекомендации по изменениям, а нужны только факты по результатам исследования (например, перечень проблем, с которыми столкнулись пользователи). Отчёт в таком формате легко оформить.

https://medium.com/julie.kozhukhova/284673aa2b6e

Опубликованы записи лучших докладов с 404fest 2018:

1. Антон Шеин, арт-директор, Яндекс Поиск — Мечтать вредно
youtube.com/watch?v=0wgj5ARt-GU

2. Евгений Кот, frontend teamlead, Wrike — Flutter против мобильной Инквизиции
youtube.com/watch?v=EazZVeXSqGQ

3. Михаил Танский, дизайнер и cо-основатель, Хантфлоу — Дорогой UX: экономим на всём. Несколько историй про интерфейс и бабло
youtube.com/watch?v=KBlsZRpdows

4. Денис Пушкин, head of product marketing, Skyeng — Как заработать миллиард
youtube.com/watch?v=6pVVA_E6uG4

5. Владимир Маринович, ex-CEO GetTaxi, основатель бизнес-школы Вверх — Типология отмазок и способы борьбы с ними
youtube.com/watch?v=h8RCViK__p4

6. Сергей Котырев, директор, 1C-UMI — Мой путь предпринимателя и менеджера. Период зрелости
youtube.com/watch?v=hNqAf_c7TPQ

7. Евгений Казначеев, head of product, Ecwid — Как сделать тайм-менеджмент, если ты ленивая безвольная скотина
youtube.com/watch?v=6soEK56hd9s

8. Александр Ковальский, design director, CreativePeople — Дизайн-прокачка: как мы качаем дизайнеров в агентстве
youtube.com/watch?v=LqVpjctBzew

9. Самвел Аветисян, ex-главный маркетолог Тинькофф, основатель АрхИдея — Тренды потребления в эпоху перепостмодернизма
youtube.com/watch?v=KMKddJMK88c

10. Евгений Романовский, руководитель проектов, Собака Павлова — Добро пожаловать в мир сложных интерфейсов
youtube.com/watch?v=9GB0vF8zLBI

Все видео с описаниями в одном месте: https://habr.com/ru/company/404fest/blog/465973/

Михаил Греков написал о формах, с которыми пользователи работают постоянно.

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

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

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

Автосохранение:
— Если можете, делайте автосохранение, но только для всех форм системы сразу.
— Сохраняйте данные при переходе от поля к полю и при бездействии пользователя в течение 3−5 секунд. Он может долго заполнять некоторые большие поля.
— Регулярно сообщайте пользователю, что данные сохранены.
— Если можете, сохраняйте версии документов. Если это сложно, дайте пользователю возможность найти прежние данные для конкретного поля.
— Если автосохранения нет, не делайте короткие рабочие сессии и предупреждайте пользователя при закрытии несохранённой формы.

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

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

Автоформатирование:
— Отделяйте пробелами разряды чисел.
— Разделяйте номера документов так, как они выводятся в конкретном документе, чтобы проще было сверять.
— Принимайте за разделитель дробного числа и запятую, и точку.
— Если в поле с номером телефона предустановлено +7 или код страны находится в отдельном поле, учтите, что пользователь может скопировать имеющийся номер телефона и вставить его целиком.

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

Выделяйте цветом статус формы. Его изменение во время заполнения формы проще заметить, чем изменение наименования статуса. Обновляйте статусы на лету.

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

https://designpub.ru/ed64e2e367b4

Александр Слобженинов из &Walsh написал, как стать дизайнером одной из лучших студий в мире.

1. Больше времени тратьте на самообразование, а не заказы. Если человек что-то уже делал, это не значит, что он делал это хорошо. Чем больше времени вы тратите на добывание денег, тем дольше будет путь наверх.

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

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

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

4. Обращайтесь в студии, в которых мечтаете работать. Многие из них готовы к удалённому сотрудничеству.

https://awdee.ru/to-manhattan-from-siberia/

Дизайнер Лили написала про 12 типов тёмных паттернов.

1. Завлечь и переключить. У пользователя нет уведомлений, но Фейсбук показывает, что они есть, когда тот не залогинен.

2. Заставить испытывать вину или стыд. 2 кнопки: «Скачать буклет о здоровом питании» и «Нет, спасибо, мне плевать на своё здоровье».

3. Замаскировать рекламный баннер. На баннере может быть изображено содержимое или элементы навигации, которые ожидает увидеть пользователь.

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

5. Собирать контакты друзей и спамить им от вашего лица. Как LinkedIn.

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

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

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

9. Упрощать пользователям желательные (для вас) действия и затруднять нежелательные. Попробуйте удалить свой профиль на Фейсбуке.

10. Формулировки с подвохом. Кажется, что ставя флаг вы отказываетесь от рассылки, а на самом деле наоборот на неё соглашаетесь.

Запрещено в Великобритании:

11. Скрывать полную стоимость. На последнем шаге оформления стоимость заказа немного увеличивается: появляется информация о доставке или дополнительном сборе.

12. Добавлять в корзину товар или услугу по умолчанию. Например, страховка при покупке билетов на самолёт.

https://vc.ru/design/76845

Илья Александров написал о дизайне предсерийного прототипа «Симкомата Х».

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

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

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

В то же время решения со сканером, направленным вверх, встречаются в природе, например, для сканирования билетов на турникетах. И похоже, они привычны для людей».

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

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

https://vc.ru/design/80772