Что фронтендер должен знать про UX и зачем прокачиваться в этом направлении
https://proglib.io/w/357ea1f9
#ux
https://proglib.io/w/357ea1f9
#ux
Хекслет
Что фронтендер должен знать про UX и зачем прокачиваться в этом направлении
Как именно фронтендер влияет на пользовательский опыт? На что нужно обращать внимание во время работы над проектом и что нужно изучать, чтобы лучше понимать UX? Чтобы разобраться в этих вопросах, пригласили опытных экспертов в области фронтенд-разработки…
👍4
Проблема с отключенными кнопками и что делать вместо них
Adam Silver считает, что атрибут disabled в кнопках вредит UX. И вот почему:
➖Они не дают обратной связи
➖Из-за них интерфейс кажется сломанным
➖Их трудно увидеть
➖На них нельзя сфокусироваться
➖Они вводят в заблуждение
➖Пользователи могут не заметить, что кнопка становится активной
📌 Что делать вместо этого?
1️⃣Напишите четкую метку и текст подсказки, чтобы пользователи поняли вопрос
2️⃣Начните с одной формы ввода на странице, чтобы уменьшить когнитивную нагрузку
3️⃣Включите кнопку, чтобы пользователи всегда получали обратную связь
4️⃣Прощайте тривиальные ошибки
5️⃣Дайте четкие сообщения об ошибках, чтобы помочь пользователям решить проблему
#ux #tip
Adam Silver считает, что атрибут disabled в кнопках вредит UX. И вот почему:
➖Они не дают обратной связи
➖Из-за них интерфейс кажется сломанным
➖Их трудно увидеть
➖На них нельзя сфокусироваться
➖Они вводят в заблуждение
➖Пользователи могут не заметить, что кнопка становится активной
📌 Что делать вместо этого?
1️⃣Напишите четкую метку и текст подсказки, чтобы пользователи поняли вопрос
2️⃣Начните с одной формы ввода на странице, чтобы уменьшить когнитивную нагрузку
3️⃣Включите кнопку, чтобы пользователи всегда получали обратную связь
4️⃣Прощайте тривиальные ошибки
5️⃣Дайте четкие сообщения об ошибках, чтобы помочь пользователям решить проблему
#ux #tip
Adamsilver.io
The problem with disabled buttons and what to do instead
Adam Silver – interaction designer - London, UK
❤9👍3🤯3
This media is not supported in your browser
VIEW IN TELEGRAM
💡 Псевдокласс
Это помогает избегать ненужного выделения элементов при навигации с помощью мыши, что делает интерфейс менее загроможденным и более чистым.
#css #tip #ux by Shripal Soni
:focus-visible
вместо :focus
в CSS применяется только тогда, когда фокусировка элемента происходит способами, видимыми для пользователя, например, через клавиатурный ввод. Это помогает избегать ненужного выделения элементов при навигации с помощью мыши, что делает интерфейс менее загроможденным и более чистым.
#css #tip #ux by Shripal Soni
👍12🥰8❤1
Сегодня смотрим, за счёт чего сетка Pinterest выглядит цельной и удобной.
#ux_review
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9🔥3
Сегодня смотрим, за счёт чего Spotify ощущается живым и динамичным.
#ux_review
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9👏1🥱1
Чтобы не теряться в потоке постов, мы собрали удобную навигацию по тегам. Всё нужное — в пару кликов:
#readme — код-сниппеты, CSS-трюки, JS one-liners, команды Git/CLI
#hotfix — реальные баги и проблемы с объяснением, как их исправить
#blueprint — high-level концепции и паттерны
#under_hood — разбираем, что происходит внутри фреймворков и браузера
#stack — обзоры библиотек, плагинов, инструментов
#release_digest — все важное за неделю/месяц в одном месте: новые версии фреймворков, релизы библиотек, ссылки и краткие описания
#code_challenge — интерактивные задачи с разбором на следующий день
#code_battle — столкновение технологий или подходов
#pixel_pause— мемы, юмор и забавные истории из фронтенд-жизни
#career_merge — советы по резюме, soft skills, вопросы с собеседований, обсуждение зарплат
#ux_review — изучаем интерфейсы и UX известных сайтов и приложений
#read_watch — подборки полезных материалов: статьи, конференции, GitHub, книги
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4🔥1
Это не просто приложение для изучения языков, а пример того, как интерфейс, микроанимации и мгновенный отклик создают ощущение прогресса и превращают обучение в игру.
#ux_review
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥13❤5👍5
Свайп, вспышка, совпадение.
Tinder — пример интерфейса, где фронтенд буквально программирует ощущение награды. Каждое движение, микровибрация, анимация и цвет работают на одно — дать фидбек до того, как пользователь успеет подумать.
#ux_review
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥4🥰3🥱1