``` ❌ Нет компенсации padding ### 3. Active State — Medium Текущая страница/секция должна быть визуально обозначена. ```html Home ``` ❌ Все ссылки одного стиля ### 4. Back Button — High На мобильных пользователи ожидают предсказуемого «назад». ```js history.pushState(null, '', '/page'); ``` ❌ `location.replace()` — ломает историю ### 5. Deep Linking — Medium URL должны отражать текущее состояние для шаринга. ```html ``` ❌ Один URL для всех состояний ### 6. Breadcrumbs — Low Показывать путь пользователя в иерархии сайта (3+ уровней). ```html ``` ❌ Только на глубоких вложенных страницах --- ## Animation (8 правил) ### 7. Excessive Motion — High Слишком много анимаций отвлекают и вызывают укачивание. ✅ Анимировать 1-2 ключевых элемента на экран. ❌ `animate-bounce` на 5+ элементах ### 8. Duration Timing — Medium Анимации должны ощущаться отзывчивыми, а не вялыми. ```css transition-all duration-200; /* 150-300ms */ ``` ❌ `duration-1000` для UI ### 9. Reduced Motion — High Уважать настройки пользователя о движении. ```css @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } ``` ❌ Нет проверки media query ### 10. Loading States — High Показывать обратную связь во время асинхронных операций. ```html

``` ❌ Пустой экран во время загрузки ### 11. Hover vs Tap — High Hover-эффекты не работают на тач-устройствах. ```html ``` ❌ Только `onMouseEnter` для важных действий ### 12. Continuous Animation — Medium Бесконечные анимации отвлекают. ✅ `animate-spin` только на лоадерах. ❌ `animate-bounce` на иконках ### 13. Transform Performance — Medium Некоторые CSS-свойства вызывают дорогостоящие repaints. ```css transform: translateY(-10px); /* GPU-accelerated */ opacity: 0.8; ``` ❌ Анимация `top: 10px` — trigger layout ### 14. Easing Functions — Low Линейное движение выглядит роботизированным. ```css transition-timing-function: ease-out; /* вход */ transition-timing-function: ease-in; /* выход */ ``` ❌ `linear` для UI --- ## Layout (7 правил) ### 15. Z-Index Management — High Конфликты stacking context'а прячут элементы. ```html

``` ❌ `z-[9999]` — хаос ### 16. Overflow Hidden — Medium Скрытый overflow может обрезать контент. ```html

...

``` ❌ `overflow-hidden` на контейнере с текстом ### 17. Fixed Positioning — Medium Фиксированные элементы могут перекрывать друг друга. ```html

``` ❌ Несколько overlapping fixed без gap ### 18. Stacking Context — Medium Новый stacking context сбрасывает z-index. ```html

``` ❌ `z-index: 9999` не работает через контекст ### 19. Content Jumping — High Сдвиг layout при загрузке контента — дёргает. ```html

``` ❌ Нет размеров на изображениях — контент прыгает ### 20. Viewport Units — Medium `100vh` проблематичен на мобильных (адресная строка). ```html

``` ❌ `h-screen` на мобильных — обрезка контента ### 21. Container Width — Medium Слишком широкий текст трудно читать. ```html

...

``` ❌ Текст на всю ширину viewport --- ## Touch (6 правил) ### 22. Touch Target Size — High Маленькие кнопки трудно нажимать точно. ```html ``` ❌ `w-6 h-6` — 24px, ниже минимума ### 23. Touch Spacing — Medium Расстояние между тач-целями — минимум 8px. ```html ``` ❌ `gap-0` или `gap-1` между кнопками ### 24. Gesture Conflicts — Medium Кастомные жесты могут конфликтовать с системой. ```html

``` ❌ Горизонтальный свайп на основном контенте ### 25. Tap Delay — Medium 300ms tap delay ощущается как лаг. ```css button { touch-action: manipulation; } ``` ❌ Нет touch-оптимизации — 300ms задержка ### 26. Pull to Refresh — Low Случайное обновление — раздражает. ```html ``` ❌ Стандартное поведение (pull-down на всём) ### 27. Haptic Feedback — Low Тактильная обратная связь улучшает взаимодействие. ```js if ('vibrate' in navigator) navigator.vibrate(10); ``` ❌ Вибрация при каждом тапе --- ## Interaction (8 правил) ### 28. Focus States — High Клавиатурные пользователи видят фокус только через visible focus. ```html ``` ❌ Кнопка кликабельна во время загрузки ### 33. Error Feedback — High Пользователь должен знать об ошибке. ```html

Invalid email

``` ❌ Тихий fail — нет индикации ### 34. Success Feedback — Medium Подтверждать успешные действия. ```html

Saved successfully

``` ❌ Действие завершается без подтверждения ### 35. Confirmation Dialogs — High Подтверждать деструктивные действия. ```html ``` ❌ Удаление без подтверждения --- ## Accessibility (10 правил) ### 36. Color Contrast — High Текст должен быть читаемым на фоне. ```css /* #333 on white = 7:1 ✅ | #999 on white = 2.8:1 ❌ */ .color { color: #333333; background: #ffffff; } ``` ❌ `#999` на `#ffffff` — fails WCAG AA ### 37. Color Only — High Не передавать информацию только цветом. ```html Error: insufficient funds ``` ❌ Только красная рамка без текста ### 38. Alt Text — High У изображений должен быть текстовый эквивалент. ```html Dog playing in park

``` ❌ `alt=""` для контентных изображений ### 39. Heading Hierarchy — Medium Экранные читалки используют заголовки для навигации. ```html

Home

About

Team

``` ❌ `h1` → `h4` — пропуск уровней ### 40. ARIA Labels — High Интерактивные элементы нужны доступные имена. ```html ``` ❌ `` без aria-label ### 41. Keyboard Navigation — High Весь функционал доступен через клавиатуру. ```html Link ``` ❌ Недоступные элементы (tabindex не совпадает с визуальным порядком) ### 42. Screen Reader — Medium Контент должен иметь смысл при чтении вслух. ```html

...

``` ❌ `

` для всего — "div soup" ### 43. Form Labels — High Каждый input должен иметь associated label. ```html Email ``` ❌ Только `placeholder='Email'` ### 44. Error Messages — High Ошибки должны анонсироваться. ```html

Error message

``` ❌ Только красная рамка — screen reader не прочитает ### 45. Skip Links — Medium Клавиатурные пользователи должны пропускать навигацию. ```html Skip to main content ``` ❌ 100 тапов до контента --- ## Performance (8 правил) ### 46. Image Optimization — High Большие изображения замедляют загрузку. ```html

``` ❌ 4000px изображение для 400px display ### 47. Lazy Loading — Medium Загружать контент по мере необходимости. ```html

``` ❌ Все изображения `loading="eager"` ### 48. Code Splitting — Medium Большие бандлы замедляют начальный рендер. ```js const Dashboard = lazy(() => import('./Dashboard')); ``` ❌ Весь код в main bundle ### 49. Caching — Medium Повторные визиты должны быть быстрыми. ```http Cache-Control: public, max-age=31536000, immutable ``` ❌ Каждый запрос на сервер ### 50. Font Loading — Medium Шрифты не должны блокировать рендер. ```css font-display: swap; ``` ❌ FOIT (Flash of Invisible Text) ### 51. Third Party Scripts — Medium Внешние скрипты блокируют рендер. ```html ``` ❌ `