Состояния Загрузки Меню: Skeleton vs Spinner — Лучшие Практики

Университетское кафе на 14 столов в Бурсе Гёрюкле снизило показатель отказов на мобильных с 18% до 11%, заменив спиннер на shimmer-skeleton в цифровом меню. Те же данные, те же изображения, та же сеть 3G.

Исследование Nielsen Norman 2023

Исследование Nielsen Norman Group 2023 показывает, что skeleton-экраны снижают воспринимаемое время загрузки на 38%, а классические спиннеры увеличивают на 12%. Мозг лучше принимает намеченную структуру, чем анимированную пустоту.

Для ресторанного меню это критично. Клиент сидит за столом, телефон в руке, хочет решить быстро. Две секунды белого экрана рождают сомнение — "сети нет?". Skeleton убирает это сомнение.

Дефолт thMenu: shimmer-skeleton

thMenu применяет CSS gradient shimmer для карточек товара, табов категорий и плейсхолдеров изображений. Во время загрузки изображений виден blur-up placeholder и каркас skeleton.

• Табы категорий: 5 серых пилюль, shimmer 1,5с
• Карточка товара: изображение + 2 строки текста + цена
• Cart drawer: строки skeleton вместо спиннера

Когда уместен спиннер?

Для подтверждения действия — "Отправка заказа", "Обработка платежа", "Вызов официанта" — лучше маленький инлайн-спиннер. Здесь ждут результат, а не контент.

Правило: skeleton для данных, спиннер для действий. thMenu показывает инлайн-спиннер в 200мс после тапа "В корзину", затем тост успеха.

FAQ

Может ли медленная skeleton-анимация навредить? Да. Циклы дольше 2 секунд раздражают. Оптимум 1,2-1,8с; thMenu — 1,5с.

Skeleton достаточно при плохой сети? Skeleton + тост через 8+ секунд + service worker offline fallback.

Доступен ли skeleton? Да с aria-busy="true" и aria-label="Меню загружается".

Было полезно? Поделитесь.