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

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

Краткий перечень:

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

А теперь подробнее по каждому пункту.

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

В качестве примера можно привести корзину. Ситуации здесь могут быть такие (пока речь не о динамике, но всё же):

• Пользователь открыл пустую корзину;
  Здесь нужно объяснить пользователю почему его корзина пуста и как это исправить (например, дать ссылку на каталог).
• В корзине несколько товаров;
  Типовая ситуация для корзины, обычно такое состояние проверяется изначально.
• В корзине 1000 разных товаров.
  Ситуация редкая, но это как раз и есть пример пограничного состояния. Как показать корзину и не повесить страницу - использовать постраничную навигацию, ленивую подгрузку изображений и, вероятно, даже контента.

А теперь о динамике:

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

Резюмировать можно одной фразой - если действие можно сделать на клиенте, надо делать на клиенте; если можно обойтись без перезагрузки страницы, то стоит так и сделать.

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

Такая проверка на заполненных сайта порой помогает выявить неявные пограничные состояния.
Например:

• ошибочная каноническая ссылка;
• неверно сформированный ЧПУ;
• ссылки на уже удаленные страницы и файлы;
• ссылки на недоступные неадмину/незарегистрированному пользователю ресурсы — тут либо проблема доступа, либо проблема отображения ссылок;
  
• ссылки на себя, например, ссылка в логотипе должна вести на главную страницу, если только это не сама главная страница.

Для windows могу посоветовать программу XENU - она анализирует весь сайт и выдает отчет о битых ссылках. К тому же, можно посмотреть в общем списке сгенерированные тайтлы страниц.

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

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

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

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

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

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

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

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


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