Адовый UX
45.9K subscribers
6.86K photos
452 videos
12 files
510 links
Примеры плохих интерфейсов, юикса и истории про это всё

Присылайте свои примеры в личку автору канала: @kirillgreen

По рекламе: @kgreenmedia
В реестре: vk.cc/cKf91b
Download Telegram
Forwarded from Оди
Глава «Трудный клиент» теперь доступна бесплатно!

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

Эта глава понравилась не только мне, но и многим, кто купил доступ к книге. Поэтому (не только, но и поэтому тоже) Женя решил сделать доступ к этой главе бесплатным для всех

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

Читайте и распространяйте, пожалуйста, крутой материал: https://intuition.team/book/chapter-4-free

#awd_article #awd_book #awd_edu #awd_gold
Forwarded from Оди
11 когнитивных искажений, которые меняют восприятие мира

Перевод статьи Сида, дизайн-ментора, блогера и UX/UI-дизайнера.

«Мозг постоянно развивается и создаёт систему фильтров, через которую мы видим мир. Эти фильтры могут оставлять дыры в восприятии реальности, из-за чего мы смотрим на вещи необъективно.

Узнав о когнитивных искажениях, вы сами заметите, как они влияют на ход мыслей, принятие решений, подход к проблемам и восприятие мира».

https://awdee.ru/11-kognitivnyh-iskazhenij-kotorye-menyayut-vospriyatie-mira/

#awd_article
Forwarded from Оди
🇬🇧 7 UX Laws You’Re Probably Getting Wrong

Шикарная статья Бена Мосса, в которой он развенчивает типичные заблуждения и неверные интерпретации законов UX.

Коротко перечислим семь разобранных законов и ошибки в их интерпретации:

1. Закон Якоба. Да, людям нравятся знакомые и привычные интерфейсы. Но новизна способствует положительным эмоциям и хорошему запоминанию
2. Градиент цели. Да, чем ближе мы к цели, тем сильнее стремление к ней и тем выше вероятность её достижения. Но дизайнеры не знают наверняка, какие цели у человека, и совершают ошибку, подменяя цель человека целью бизнеса
3. Закон Миллера. Даже если люди могут удерживать в памяти всего 7±2 элементов одновременно, это не относится к числу отображаемых на экране вещей. Покажите все 12 пунктов меню, если их у вас столько
4. Эффект эстетики в юзабилити. Да, люди считают более красивое более удобным. Но это не значит, что красоты достаточно, чтобы сделать интерфейс удобным. Нельзя этим законом оправдывать тонкий серый текст на сером фоне
5. Правило пика и конца. Да, общее впечатление основано на пике и конце. Но в случае сайтов или интерфейсов, предугадать начало, пик и конец маршрута конкретного пользователя невозможно
6. Закон Фиттса. Да, точность попадания в цель обратно пропорциональна расстоянию до цели и в квадрате — её размеру. Но в настольных интерфейсах, с мышкой, ошибку прицеливания легко и быстро исправить. А в мобильных интерфейсах расстояние до цели не играет роли, оно всё время одинаково
7. Бритва Оккама. Этот философский принцип говорит, что, при прочих равных, нужно выбирать то, что основано на меньшем количестве предположений. Но не самое простое решение, и не самое очевидное, как часто путают.

Статья полностью: webdesignerdepot.com/2022/06/7-ux-laws-youre-probably-getting-wrong

#awd_article #awd_ux
Forwarded from Оди
🙂 Принципы когнитивной инженерии Джилл Герхардт-Пауэлс

В 1994 году Якоб Нильсен из Nielsen Norman Group опубликовал популярные и знакомые дизайнерам эвристики юзабилити. Это проверенные принципы, которые помогают проектировать беспроблемные и понятные интерфейсы

Хотя Нильсен считается экспертом в области эвристической оценки интерфейсов, Джилл Герхардт-Пауэлс разработала собственные принципы оценки дизайна с позиции юзабилити, но при этом использовала более целостный подход к созданию удобного интерфейса

В статье мы разбираемся в принципах когнитивной инженерии Джилл Герхардт-Пауэлс: awdee.ru/printsipy-kognitivnoj-inzhenerii-dzhill-gerhardt-pauels/

#awd_ux #awd_article
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Оди
🙂 25 правил визуального дизайна, которые можно смело применять в любом проекте

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

awdee.ru/25-visual-design-rules

#awd_article #awd_web #awd_ui #awd_color
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Оди
🙂 10 проблем попапов и как их решить

Перевод статьи Анны Кейли из Nielsen Norman Group, из которой вы узнаете, в чём разница между всплывающим окном и модальным, какие проблемы могут вызвать всплывающие окна своим появлением и какие факторы необходимо учитывать при их проектировании. Автор также рассказывает о дизайн-решениях, которые могут заменить попапы и донести до посетителей сайта или приложения важную информацию, но при этом будут менее навязчивыми

awdee.ru/10-problems-of-popups

#awd_ui #awd_ux #awd_article
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Оди
🙂 Термин: «Понимание задачи»

Сегодня в рубрике «Термины дизайна» мы расскажем о подходе, необходимом специалистам в любой сфере, — «Понимание задачи»

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

awdee.ru/term-understanding-the-task

#awd_article #awd_edu #awd_terms
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Оди
🙂️️️️ Практическое руководство по анимации переходов в интерфейсах

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

1. Плавное появление и затухание с изменением прозрачности
2. Масштабирование
3. Постоянное направление движения
4. Баланс скорости
5. Приоритеты, порядок и группировка элементов
6. Ориентация в пространстве

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

awdee.ru/transition-animations-a-practical-guide

#awd_ux #awd_article
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Оди
Дизайн иконок: сетки и ключевые формы

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

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

🙂️️️️️️ awdee.ru/grids-and-key-shapes

#awd_article #awd_icons
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Оди
Как правильно реализовать эффект матового стекла на сайтах

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

Джош Комо написал кайфовую статью с разбором всех таких недостатков и, главное, с примерами его грамотной реализации в CSS

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

В статье есть фрагменты готового кода и интерактивные примеры

В общем, читайте, добавляйте в закладки и отправляйте своим технологам: joshwcomeau.com/css/backdrop-filter

#awd_article #awd_web