4 хороших совета по улучшению UX приложений. Всё с примерами и подробным объяснением, почему стоит делать именно так, а не иначе: https://tprg.ru/GWo6

Их понимание позволит вам избегать не только этих, но и других очевидных ошибок при разработке UX.

#фронтенд #дизайн #ux

​​Метрики для оценки и оптимизации UX

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

В этой статье подробнейшим образом рассматриваются самые важные из них: https://web.dev/metrics

— First contentful paint (FCP): время от начала загрузки страницы до отображения на экране хоть какого-то контента.
— Largest contentful paint (LCP): время от начала загрузки страницы до отображения самого большого блока на странице (текст, картинка).
— First input delay (FID): время от первого взаимодействия пользователя с сайтом (например, клик по ссылке или кнопке) до момента, когда браузер способен обрабатывать это взаимодействие.
— Time to Interactive (TTI): время от начала загрузки страницы до момента, когда пользователи сможет взаимодействовать с сайтом.
— Total blocking time (TBT): время между FCP и TTI, т.е. когда контент на сайте отображён, но пользователь взаимодействовать с ним не может.
— Cumulative layout shift (CLS): подсчитываются все «внезапные» сдвиги контента на сайте с момента его загрузки. На видео в посте показан как раз такой сдвиг (который может вызвать нервный срыв у пользователя).

#фронтенд #ux

Лучшие IT-выступления прошлого года

Составили несколько подборок лучших IT-выступлений прошлого года по нашей версии. Делимся с вами подборками по веб-разработке и дизайну интерфейсов:

— веб-разработка: https://tprg.ru/u1lc
— UX и дизайн: https://tprg.ru/JiPQ

#фронтенд #бэкенд #ux #дизайн

​Типичные ошибки в дизайне сайта

Пиксельное проектирование, игнорирование user-flow, использование старых шаблонов — эксперты рассказали, какие типичные ошибки допускают новички при разработке дизайна и интерфейса сайта:

https://tprg.ru/CpUo

#дизайн #ux

UX-исследования для начинающих

Как провести UX-исследование, чтобы разработанное в итоге приложение действительно решало задачи пользователей и улучшало их жизнь?

Рассказывает эксперт:

https://tprg.ru/iP3r

#фронтенд #ux

Гайд по качественной реализации популярного в интерфейсах поведения drag-and-drop:

https://tprg.ru/uM3h

#фронтенд #ux

​101 UX-принцип

Чтобы не напортачить при проектировании UX приложения, важно понимать лежащие в его основе принципы.

В этой статье описан 101 такой принцип — с подробным пояснением и примерами для каждого из них:

https://growth.design/psychology/

#фронтенд #дизайн #ux

Полное руководство по правильному использованию анимации в UX

Ловите исчерпывающий материал с примерами плохих и хороших практик в гифках:

https://tprg.ru/5FQv

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

#фронтенд #дизайн #ux

​Хотел кликнуть, но не смог: как правильно настроить размер области клика

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

https://tprg.ru/nPEi

#фронтенд #дизайн #ux

Оптимизация CLS для списков с бесконечным скроллом

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

— зарезервировать место перед подгрузкой элементов;
— удалить футер или любые DOM-элементы после списка;
— использовать prefetch для предварительной загрузки данных вне области браузера.

Планируете работать с бесконечной прокруткой? Тогда вам будет полезна эта статья:

https://tprg.ru/StXG

#фронтенд #дизайн #ux

Bad UX формы

Интерактивная коллекция форм ввода телефонного номера с адовым UX. Автор собрал девять худших практик, наглядно продемонстрировав, что всякому решению — своё место:

https://fun.mishasaidov.com/badux

А на сколько форм хватит ваших нервишек? Проверьте себя.

#дизайн #ux

​Решаем проблемы с CLS на примере Tproger

Благодаря советам из нашей статьи вы можете улучшить техническую оптимизацию сайта в «глазах» Google и постепенно подняться в поисковой выдаче. Всё со скринами и на реальных примерах:

https://tprg.ru/KMau

Остались вопросы? Спрашивайте в комментариях под статьёй: с радостью ответим.

#фронтенд #дизайн #ux

​Доступность сайта: 6 главных проверок

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

— Описания изображений alt
— Проверка работы с отключёнными стилями
— Валидация HTML
— Структура документа
— Монохромный режим
— Использование одной лишь клавиатуры

Больше информации и ссылки на полезные ресурсы:
https://tprg.ru/wHLQ

#фронтенд #ux

​Исчерпывающий гайд по CLS

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

https://tprg.ru/g8Vx

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

#фронтенд #дизайн #ux

Какие типичные ошибки в дизайне сайта допускают новички — рассказывают эксперты

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

https://tprg.ru/SJUF

#дизайн #ux

​Такого ужасного интерфейса вы ещё не видели

Вы же встречали неудобные формы для ввода данных на сайте? Тут в одной месте собрали целую коллекцию UX-адовых форм для ввода номера.

Забирайте к себе в проекты: https://fun.mishasaidov.com/badux/

#дизайн #ux

​​Про UI/UX в двух словах: как и зачем применяют принципы логики в дизайне интерфейсов?

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

Логика и дизайн-мышление помогают создавать выдающиеся интерфейсы. О том, как это работает, и как «прокачать» эти навыки, рассказывает наш читатель Иван Сержантов: https://tproger.ru/articles/kak-i-zachem-primenyayut-principy-logiki-v-dizajne-interfejsov

#дизайн #ux

Прокачайте свой UI Kit: 10 практических советов для UX/UI дизайнеров

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

https://habr.com/ru/articles/805581/

#ui@tproger_web #ux@tproger_web #дизайн@tproger_web

CSS-стилизация курсоров нового уровня

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

В статье показано, как превратить обычный <div> в кастомный курсор, который отслеживает движение мыши, меняет внешний вид при отдельных состояниях и автоматически отключается на тач-устройствах и при запросе снижения анимации.

#фронтенд #css #ux

Как переносить «висячие» слова с помощью JavaScript

Тексты, в которых на новой строке одиноко торчит «в», «на» или «и», сразу теряют в читаемости. В этой статье — короткий, но полезный приём: как с помощью JavaScript автоматически заменять пробелы после коротких слов на неразрывные и избавляться от висячих слов. Работает и для HTML-содержимого, и для Markdown. Минимум кода — максимум пользы для интерфейса и редактурной чистоты.

#фронтенд #javascript #ux