Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки

Рисунок 6.20. Измеритель завершенности Klout приглашает пользователей быть активнее и вычеркнуть пункты из списка дел

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

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

Рисунок 6.21. Уведомления в режиме реального времени в Bagcheck

В приложении есть еще больше «штучек», работающих в режиме реального времени. Например, когда кто-нибудь дает комментарии по теме, они тотчас появляются.

Веб-сокеты открывают новые грани для экспериментов с веб-приложениями и сайтами. Аналитика и игры в реальном времени – это явное использование, но, как показывает Bagcheck, режим реального времени может применяться также к элементам интерфейса, которые мы привыкли расценивать как статические, таким как список комментариев.

Но то, что мы можем обеспечить этот режим, не значит, что мы должны это делать. Существует явный риск того, что пользователи, которые не хотят изменений на странице, расстроятся.

Селекторы страныпредставляют собой выпадающее меню, открывающее на странице длинный список стран, который вы будете прокручивать, чтобы выбрать нужную вам. Можем ли мы придумать что-то получше? Да. Кристиану Холсту и Джейми Эплсиду из института Baymard удалось переделать селектор страны, чтобы сделать процесс более удобным [70]. Идея такова – использовать живое поисковое поле для выбора страны. Так если пользователь начинает печатать название, включается поиск и выпадает список совпадений. Верхний вариант будет выделен, поэтому пользователь просто должен нажать клавишу Enter, и этот вариант окажется в поле. Пользователь уже знает, чего он хочет, поэтому впечатывание первых букв из названия страны намного быстрее, чем прокручивать список, в котором может стоять тысяча позиций.

Рисуок 6.22. Селектор страны в действии

Эта реализация работает, так как она решает три основных проблемы. Во-первых, вы должны учитывать опечатки и последовательность; пользователь может печатать слова в неправильном порядке или неверно по буквам. Во-вторых, некоторые страны имеют не одно название. Например, Нидерланды – это Голландия. Поэтому люди, которые пишут «Голландия», должны быть уверены, что получат правильное сочетание. То же касается и Америки, когда это название пишут вместо Соединенных Штатов.

И, наконец, некоторые страны более распространены среди ваших пользователей. Поэтому, если кто-то начинает впечатывать «United» (Соединенный, объединенный), первым сочетанием лучше сделать «United States»(Соединенные Штаты), а не «United Arab Emirates» (Объединенные Арабские Эмираты). Если только, конечно, большинство ваших пользователей не из ОАЭ.

Живое текстовое окно поиска может применяться и для других вещей, но три основных вопроса, которые я только что осветил, должны оставаться во главе угла. Таким образом, вы сможете улучшить вашу разработку.

Сегодня многие сайты используют посредников, для того чтобы авторизовать пользователя. Люди, у которых уже есть учетная запись на Google или Facebook либо на любом другом сервисе, который позволяет идентифицировать и авторизовать их, могут разрешить доступ к данным авторизации и на других сайтах.

Подчас несколько логин-провайдеров используются одновременно, а это может привести к тому, что люди забудут, какой из них они использовали для регистрации.