Пограничные состояния интерфейса

В продолжение поста о граблях хочу написать о пограничных состояниях на сайте.
Может быть, непосредственно в процессе разработки все возможные пограничные состояния сложно отследить, но на этапе контроля качества (бета-тест) они вполне могут всплыть. Поэтому некоторые подсказки о проверке таких состояний напишу сюда. И стоит заметить, здесь речь о вещах не поддающихся или слабо поддающихся unit-тестам.

Краткий перечень:
  • Максимум динамических действий выносить на клиента;
  • Проверять пограничные состояния корзины, цен, количества товара;
  • Проверять сайт на битые ссылки;
  • Ситуация - пользователь в поиске ищет поиск;
  • Формы нельзя отправлять пустыми;
  • Карты. Ограничивать минимальный масштаб;
  • Если избранное/корзина хранится на клиенте, надо синхронизировать состав и проверять наличие нужных ID/артикулов и удалять неактуальные.
А теперь подробнее по каждому пункту.

Максимум динамических действий выносить на клиента

В качестве примера можно привести корзину. Ситуации здесь могут быть такие (пока речь не о динамике, но всё же):
  • Пользователь открыл пустую корзину;
    Здесь нужно объяснить пользователю почему его корзина пуста и как это исправить (например, дать ссылку на каталог).
  • В корзине несколько товаров;
    Типовая ситуация для корзины, обычно такое состояние проверяется изначально.
  • В корзине 1000 разных товаров.
    Ситуация редкая, но это как раз и есть пример пограничного состояния. Как показать корзину и не повесить страницу - использовать постраничную навигацию, ленивую подгрузку изображений и, вероятно, даже контента.
А теперь о динамике:
  • Что пользователь может сделать с пустой корзиной?
    Например, добавить товар в корзину из блока «Рекомендуемые/популярные/клёвые/хорошие товары», который находится в сайдбаре или сразу под корзиной или в попапе или неважно где - важно, обновить шаблон самой корзины без перезагрузки самой страницы.
  • Что пользователь может сделать с заполненной корзиной?
    Снова - добавить ещё товаров, как разобрали в предыдущем пункте, но ещё он может удалить все товары из корзины (поштучно или целиком все). В таком случае нужно не показывать пустую шапку таблицы, а вернуть шаблон со ссылкой на каталог.
  • Что может сделать пользователь с корзиной в 1000 товаров?
    Пусть друзьям хвалится! А пограничные состояния корзины мы разобрали выше.
Резюмировать можно одной фразой - если действие можно сделать на клиенте, надо делать на клиенте; если можно обойтись без перезагрузки страницы, то стоит так и сделать.

Проверять сайт на битые ссылки

Такая проверка на заполненных сайта порой помогает выявить неявные пограничные состояния.
Например:
  • ошибочная каноническая ссылка;
  • неверно сформированный ЧПУ;
  • ссылки на уже удаленные страницы и файлы;
  • ссылки на недоступные неадмину/незарегистрированному пользователю ресурсы — тут либо проблема доступа, либо проблема отображения ссылок;
  • ссылки на себя, например, ссылка в логотипе должна вести на главную страницу, если только это не сама главная страница.
Для windows могу посоветовать программу XENU - она анализирует весь сайт и выдает отчет о битых ссылках. К тому же, можно посмотреть в общем списке сгенерированные тайтлы страниц.

Ситуация - пользователь в поиске ищет поиск

В первую очередь стоит убедиться, что контент любого типа доступен в поиске, а обновление какой-либо информации (админка, синхронизация с сервисами) обновляет и поисковый индекс. И, главное, контент не предназначенный для поиска в поиске не должен быть найден (добавить в исключения 404 страницу, /local/, типовые страницы и т.п.).
И ещё интересное пограничное состояние поиска, когда пользователь в поле для поиска вводит «поиск» — здесь нужно либо дать ссылку на страницу детального поиска, если есть, или сообщить пользователю, что он уже на месте.

Формы нельзя отправлять пустыми

Тут всё просто - делаем валидацию полей, там где она нужно и не позволяем отправить пустую форму.

Карты. Ограничивать минимальный масштаб

В сервисах карт (yandex, google) можно отдалять карту сколь угодно долго, вплоть до того что в одном экране всю планету будет несколько раз видно. Большинству сайтов такие игры с масштабом ненужны.

Если избранное/корзина хранится на клиенте, надо синхронизировать состав и проверять наличие нужных ID/артикулов и удалять неактуальные

Ситуация вполне актуальная для сайтов с часто обновляемым каталогом, где товары не только добавляются, но и удаляются.
И вот, допустим, храним на клиенте (в localstorage) список товаров в виде массива ID/артикулов товаров, показываем количество избранного исходя из этого списка, но по факту, за какое-то время эти товары уже могут стать неакутальными и совсем удалиться с сайта.
Тут нужно либо предупреждать пользователя об этом, что бы тот не удивлялся, почему показано 5 товаров в избранном, а на странице избранного написано «пусто». Либо тихо в фоне синхронизировать список корзины/избранного с бекендом и актуализировать его.


Продолжение следует!
Следующие посты о типографе, аяксах и композитных сайтах ожидаются в скором времени...