Улучшение UX с помощью «каркасного» отображения разметки
Перевод заметки Parimala Hariprasad на UX in India с дополнениями.
Несколько лет назад я впервые попробовала перевести деньги через интернет, до этого пользовалась только чеками. После того, как я заполнила все поля на сайте одного известного банка для отправления средств, страница застыла белым экраном. В воздухе повис вопрос: проведен платёж или нет? Реквизитов было на 2 минуты, не меньше. Началась истерика. Я обновляла страницу в надежде, что мне всё-таки повезёт. На экране было одно сообщение: «Будьте терпеливы. Пожалуйста подождите». Было обидно, что они обвиняют меня в нетерпеливости, когда о проблемах с платежами должен заботиться сам банк.
Через несколько месяцев на том же сайте я заметила всплывающее окно с текстом: «Мы обрабатываем ваш платёж. Пожалуйста, подождите. Не нажимайте кнопку «Обновить» и не закрывайте вкладку браузера». Это сообщение реабилитировало банк в моих глазах.
Вечные спинеры
В хрестоматийных ситуациях, если мы заставляем пользователя ждать, то он должен знать, что:
- осталось совсем чуть-чуть
- нужно быть терпеливым
Так родились индикаторы процессов и колеса загрузки. Пользователи мобильных девайсов точно сталкивались со спинерами, иногда вращающимися целую вечность. Кто-то ругает приложения, кто-то скорость интернета, а кто-то винит себя* за то, что ожидания не соответствуют реальности.
*Дональд Норман в книге «Дизайн привычных вещей» рассматривает этот вопрос во второй главе.
На волне популярности дизайнеры и разработчики кладут свои жизни на выдумывание “топ прогресс баров” или “лучших спинеров года” по версии них же самих. На выходе получаем кучу нового неюзабельного барахла, особенно cами знаете где.
Даже отвечая всем требованиям функциональности, такие решения игнорируют фундаментальные положения процесса ожидания. Глядя на все это кажется, что время идет еще медленнее.
Каркасное отображение (Skeleton Screens)
В очередной раз зайдя в приложение фэйсбука на телефоне, я сделала для себя открытие. Состояние экрана подсказало, что интернет не айс и данные загружаются медленно, но было понятно, что они загружаются. Я видела, как в первую очередь прогрузился каркас экрана, а за ним лениво следовал контент. Позже я посёрфила интернет и выяснила, что это называется «каркасный экран» (skeleton screen).
«A skeleton screen is essentially a blank version of a page into which information is gradually loaded»
«Каркасный экран это заготовка страницы с разметкой, куда позже будет помещён контент»
Каркасное представление контента намекает, что загрузка происходит поэтапно. Это экономит нервы пользователям и оставляет более приятные впечатления от использования продукта. Но всегда остаются пользователи и проектировщики по другую сторону баррикад, предпочитающие спинеры.
Кстати, у десктопного медиума тоже реализована эта штука.
P.S. «Skeleton screen» было решено дословно не переводить, ибо звучит неказисто и по смыслу далеко от ux стези. Думаю, слово «каркас» подходит лучше.
P.P.S. Также можно ознакомиться со статьей по этой теме в блоге Luke Wroblewski на английском.
