Шаблоны проектирования веб-приложений

Связанные шаблоны проектирования

Когда пользователю предлагают войти в систему, он может понять, что забыл свой логин и/или пароль. По этой причине рядом с полями, запрашивающими регистрационные данные (LOG IN), необходимо поместить ссылку для их восстановления.

Глава 4

Главная страница приложения

Введение

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

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

Что же касается приложений, для работы с которыми пользователь должен авторизоваться, то они, в зависимости от того, к какому типу относятся, могут отображать следующее (перечислены шаблоны):

• INBOX, где пользователь может найти список элементов для просмотра или обработки.

• CONTROL PANEL – панель управления, которая выступает в качестве страницы запуска функций приложения.

• DASHBOARD – информационная панель для беглого осмотра самых важных показателей эффективности.

• PORTAL, где собирается информация из нескольких источников. Портал выступает в качестве страницы загрузки информации и приложений, которые доступны для пользователя. В страницы шаблона PORTAL часто встроены некоторые составляющие шаблонов CONTROL PANEL и DASHBOARD, позволяющие пользователю быстро получить доступ к функционалу и контенту одного или нескольких приложений.

Главные страницы приложений обычно персонализированы на основе профилей, интересов и информационных потребностей пользователей, это необходимо для предоставления наиболее релевантного контента и фильтрации информации, которая не очень релевантна. Однако PERSONALIZATION на основе бизнес-правил или какого-либо социального фильтра может неточно предугадывать то, какая информация может понадобиться пользователю. Поэтому приложения часто предоставляют пользователям функции шаблона CUSTOMIZATION (настройки по заказу), чтобы они могли адаптировать приложение к своим предпочтениям и восполнить слабые места персонализации. Кастомизация не ограничивается информационными потребностями и необходимостью выполнить ту или иную задачу; часто она подразумевает выбор цвета, логотипа, темы оформления, шрифта и макета страницы.

При проектировании веб-приложений часто не продумывают, что увидят новые пользователи (BLANK SLATE). Этот аспект особенно важен в тех приложениях, в которые пользователи должны внести определенные данные.

INBOX (ВХОДЯЩИЕ)

Проблема

Важно, чтобы пользователи знали, над чем они должны работать, и о том, что произошло со времени их последнего входа в приложение.

Решение

Покажите пользователям список элементов, над которыми они могут работать или которые они должны просмотреть. Например, в почтовых приложениях показывайте пользователям список писем; в приложениях для отслеживания дефектов показывайте пользователям список дефектов; и т. д. (рис. 4.1).

Рис. 4.1. Инструмент NetResults Tracker показывает разработчикам, когда они входят в систему, список ошибок и улучшений

Зачем

Приложения для работы с данными одного типа (например, с электронными письмами, дефектами, файлами, счетами, обращениями в службу поддержки и т. д.) выигрывают от того, что показывают пользователям, вошедшим в систему, с какими элементами они могут работать. Это не означает, что приложение не позволяет пользователям работать с другими типами элементов или не предоставляет возможность быстрого доступа к другим возможностям приложения – просто они для этого приложения второстепенны. Например, почтовые приложения позволяют пользователям управлять списком контактов, хотя это и не является их основной задачей. По этой причине, когда пользователи входят в систему, им сначала показывается список писем как старых, так и новых. Понятие входящие здесь уместно, поскольку обычно это элементы, на которые пользователь должен обратить внимание, когда он вошел в приложение.

Как

Покажите пользователям список данных, работа с которыми является основной задачей приложения – электронные письма, дефекты, файлы, счета, списки дел и т. д., – выделяя те элементы, на которые пользователь должен в данный момент обратить внимание или о которых ему нужно напомнить, например, новые письма, новые файлы, новые дефекты и т. д. (рис. 4.2).

Рис. 4.2. Пользователь видит свои входящие письма, как только входит в свою учетную запись в приложении Gmail. Новые входящие письма выделены полужирным шрифтом

Предоставьте пользователям возможность установить напоминания

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

Рис. 4.3. Сервис Remember The Milk предоставляет пользователям возможность устанавливать напоминания на каждый день, а также отображает, сколько минут осталось до того момента, когда задание должно быть выполнено. Пользователи могут получать напоминания по электронной почте, интернет-пейджеру и СМС на мобильный телефон

Связанные шаблоны проектирования

Шаблон INBOX обычно задействует списки. Это могут быть как списки TABULAR LIST, так и IMAGE LIST/GRID. Кроме того, как и другие списки, эти часто нужно сортировать (SORTING) и фильтровать (FILTERING), чтобы пользователям было проще найти релевантную информацию (см. главу 7, в которой подробно рассказывается о списках).

CONTROL PANEL (ПАНЕЛЬ УПРАВЛЕНИЯ)

Проблема

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

Решение

Покажите пользователям страницу, на которой представлены все доступные функции приложения, любой из которых он сможет быстро воспользоваться (рис. 4.4).

Рис. 4.4. Хостинговая компания 1&1 предоставляет пользователям возможность доступа с панели управления ко всем функциям работы с их учетными записями. Поскольку функций достаточно много, они разделены на две группы: Administration (Администрирование) и Account (Учетная запись)

Зачем

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

Как

Создайте «загрузочную» страницу, с которой пользователи смогут получать доступ ко всем возможностям приложения или к миниприложениям. Панели управления обладают звездообразной (hub-and-spoke) структурой пользовательского интерфейса (Baxley, 2003; Tidwell, 2008), когда одна центральная страница предоставляет пользователям доступ к автономным мини-приложениям. Таким образом, пользователи могут зайти в мини-приложение, выполнить свою задачу и вернуться на центральную страницу для выполнения другой задачи с помощью другого мини-приложения.

Панели управления обладают несколькими сходствами с домашними страницами информационных порталов:

• они формируют представление о возможностях приложения и предоставляют быстрый доступ к его основному функционалу;

• они определяют общий макет проектирования страниц приложения: их оформление, расположение, поисковые возможности и т. д.;

• они информируют пользователей о новых возможностях и функциях.

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

Рис. 4.5. В приложении Dell на странице My Account (Моя учетная запись) располагается краткая сводка информации об учетной записи. Эта страница выступает в качестве загрузочной страницы, предоставляющей доступ к информации пользователя, такой как сохраненные товары, купоны на скидку, корзина, статус заказа и т. д.

Выделяйте элементы, на которые нужно обратить внимание

Как и INBOX, шаблон CONTROL PANEL используется для информирования пользователей и привлечения их внимания к изменениям в функционале и контенте приложения. Как только пользователь зашел на страницу с панелью управления, необходимо направить его к тем элементам, которым он должен уделить внимание. Поскольку может оказаться, что пользователь этого не ожидает, используйте выделяющиеся уведомления и оповещения. Хороший пример уведомления – это сообщение о запланированном простое приложения, хотя это сообщение должно размещаться также и на странице входа. Если элементы служат только для информирования (т. е. оповещения) и не требуют от пользователей каких-либо действий, предоставьте пользователям возможность их проигнорировать.

Связанные шаблоны проектирования

Используйте шаблон BLANK SLATE, чтобы не показывать пользователям пустые страницы и чтобы пользователь знал, что ему делать, когда вошел в приложение в первый раз. Также благодаря этому шаблону пользователю проще работать с приложением, прежде всего это относится к тем приложениям, которые опираются на данные, введенные пользователями.