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

CAROUSEL (КАРУСЕЛЬ)

Проблема

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

Решение

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

Рис. 8.46. Flickr использует метод карусели в своем слайд-шоу

Зачем

Карусель обеспечивает пользователям доступ к нескольким элементам на относительно небольшой области экрана и позволяет проектировщикам выделить больше места для каждого элемента. Использование круговой карусели также позволяет пользователям получать доступ к элементам, нажав как стрелку влево, так и стрелку вправо. Карусели наиболее часто используются для изображений, например, при просмотре фотоальбомов (www.flickr.com), списков фильмов, музыки или книг (movies.yahoo.com, www.amazon.com) или списков объектов недвижимости (www.zillow.com, www.funda.nl).

Как

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

Рис. 8.47. Amazon представляет элементы в карусели по горизонтали с крупными кнопками с каждой стороны

Предоставьте пользователям информацию о наличии или отсутствии дополнительных элементов

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

Рис. 8.48. Yahoo! Food использует стрелки навигации вправо и влево для просмотра. Кроме того, поскольку используется линейная карусель, для указания «раздела», просматриваемого пользователем в данный момент, применяются индикаторы (в виде точек), подобные разметке страниц

Рис. 8.49. Pandora показывает частичные изображения предыдущей и следующей песни для обозначения наличия дополнительных элементов карусели

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

Карусели используют визуальные эффекты (ANIMATIONS/TRANSITIONS), такие как смещение влево, вправо, вверх и вниз, чтобы позволить пользователям поддерживать визуальный контекст между элементами карусели. В линейных каруселях, чтобы показать местоположение пользователей в карусели, используйте индикаторы разбиения на страницы (PAGINATION) (см. главу 6).

Проблемы практичности, неизбежно возникающие при RIA

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

Проблемы с кнопкой «Назад»

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

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

Распространенное решение этой проблемы – предоставление пользователям возможности отменять свои действия на той же странице. Однако важнее понять естественное поведение пользователей при работе с приложением и определить, является ли метод RIA подходящим для выполнения данной задачи.

Хорошим примером является почта Gmail, использующая RIA для списков или электронной почты (например, Inbox (Входящие), Starred (Избранные), Sent Mail (Отправленные) и т. д.) и при просмотре разговоров (т. е. хронологического потока электронных обменов), но позволяющая пользователям использовать кнопку браузера «Назад», чтобы вернуться со страницы разговора на страницу списка (рис. 8.50).

(а)

(б)

Рис. 8.50. Когда пользователи нажимают на разговор в списке (а), Gmail переносит их на отдельную страницу (б). Это позволяет пользователям нажать «Назад» в браузере для возврата на страницу списка со страницы разговора

Проблема установки закладок

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

Хотя существуют некоторые умные подходы, решающие проблему установки закладок путем переписывания URL-адресов, это обычно не является большой проблемой для веб-приложений, поскольку пользователям не требуется устанавливать закладки конкретных состояний. Более подробную информацию о перезаписи URL, см. в книге «AJAX: How to Handle Bookmarks and Back Buttons», Brad Neuberg (2005) на веб-сайте www.onjava.com/pub/a/onjava/2005/10/26/ajax-handling-bookmarks-and-back-button.html.

Глава 9
Социальные приложения

Введение

В большей степени веб-приложения разрабатываются, чтобы поддержать пользовательское участие и распространение информации. Пользовательское участие обычно представляет собой форму содержимого, вносимого пользователем, когда пользователи добавляют свой собственный контент в приложение (ADD/UPLOADCONTENT) и описывают его при помощи тегов (TAGGING). Другие способы пользовательского участия – это обеспечение рейтинга (RATINGS) и отзывов (REVIEWS) по контенту, предлагаемых приложением. Многие приложения также вовлекают пользователей в продвижение позиций, позволяя им голосовать за их полезность и значимость (VOTE TO PROMOTE).

Чтобы убедиться, что пользовательское участие ведет к надежному онлайн-сообществу, пользователям необходимо открыть аккаунт в приложении и создать профайл пользователя (USER PROFILE). Несмотря на то что для продуктов и услуг доверие может быть установлено через рейтинги (RATINGS) и обзоры (REVIEWS), для пользователей важно, что они могут достичь высокой репутации (REPUTATION), особенно если они хотят взаимодействовать в Интернете или получить признание других членов сообщества. Один из аспектов репутации основан на величине социальной сети пользователя. Вследствие этого социальные приложения помогают пользователям соединяться с другими, имеющими аналогичные интересы, биографические данные и жизненный опыт (DISCOVER NETWORK MEMBERS). Будучи один раз обнаруженными, они не только могут добавить их в друзья (FRIEND LIST) и/или приобщиться к их активностям в онлайне, но также могут создавать группы, чтобы обсуждать и делиться общими интересами (GROUPS/ SPECIAL–INTEREST COMMUNITIES). Социальные приложения также облегчают взаимодействие между друзьями, позволяя им общаться в режиме реального времени, отправлять друг другу сообщения и писать комментарии в распределенных разделах (MESSAGING). Для стимулирования отправки сообщений в режиме реального времени также важно передавать онлайн-статус пользователя (PRESENCE INDICATOR).

Участие и взаимодействие дополнительно улучшаются, когда пользователи могут размещать фотографии, новые истории, видео, закладки и другой контент – зачастую упоминающийся как социальные объекты – и просматривать их со своими друзьями и доверенными коллегами (SHARING) или работать вместе, чтобы согласовать свои действия и события или создавать контент совместно (COLLABORATION).

ADD/UPLOAD CONTENT (ДОБАВЛЕНИЕ/ЗАГРУЗКА КОНТЕНТА)

Проблема

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

Решение

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

Рис. 9.1. SlideShare позволяет пользователям загружать контент (например, презентации), а также предоставляет возможность описывать и помечать его, чтобы упростить поиск и шаринг В дополнение к этому, обеспечивая загрузку контента, SlideShare предлагает несколько вариантов загрузки: массовая загрузка, единичная загрузка, загрузка посредством URL, загрузка посредством электронной почты и встраиваемая программа (плагин) в браузер

Зачем

Упрощение процесса загрузки файлов обязательно для веб-приложений, которые полагаются на пользователей, обеспечивающих им контент. Более того, чтобы облегчить для пользователей поиск своего загруженного контента, позвольте им проставлять теги (см. шаблон TAGGING ниже).

Как

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

Рис. 9.2. Flikr позволяет пользователям выбирать и загружать множество фотографий одновременно

Разрешите пользователям копировать файлы с других онлайн-ресурсов

В тех случаях когда пользователи уже могут иметь свои загруженные файлы (например, фотографии) на сайтах вроде Picasa или Flickr, упростите для них передачу файлов напрямую с тех аккаунтов (рис. 9.3), прежде чем заставлять их искать файлы на своих компьютерах или сохранять их с исходного сайта на свои компьютеры, прежде чем загрузить их снова.

Рис. 9.3. MyFolia позволяет пользователям импортировать фотографии со своих аккаунтов в Picasa, Flickr или Gravatar

Разрешите пользователям удалять выбранные файлы контента для загрузки

Для пользователей существует вероятность выбрать неверные файлы для загрузки или изменить свое мнение об отдельных файлах после того, как они выбрали их. Позвольте им удалить такие файлы (рис. 9.4).

Рис. 9.4. Flikr позволяет пользователям удалять выбранные файлы для загрузки

Разрешите пользователям устанавливать личные предпочтения

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

Рис. 9.5. Flickr позволяет пользователям определять параметры конфиденциальности для загруженных фотографий

Держите пользователей информированными о процессе загрузки

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

Подтвердите успешность загрузки файлов контента

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

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

Поскольку загруженные файлы могут быть большими, особенно при добавлении медиафайлов, использование шаблона DELAY/PROGRESS INDICATORS (см. главу 8) имеет значение и должно быть продумано. В дополнение к этому большинство приложений, которые поддерживают контент, генерируемый пользователями, предусматривают, что пользователи описывают его, используя теги (TAGGING).

TAGGING (ТЕГГИРОВАНИЕ)

Проблема

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

Решение

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

Рис. 9.6. YouTube просит пользователей добавлять теги при загрузке видео

Зачем

Использование неограниченных тегов поощряет персональное изложение мыслей и естественный словарный запас. Также это упрощает для пользователей процесс нахождения их позиций впоследствии и позволяет им анализировать и взаимодействовать с контентом миллионами различных способов (Marlow et al., 2006). Например, разрешив пользователям помечать сообщения электронной почты (и добавлять многочисленные метки в одно и то же сообщение), Gmail позволяет пользователям не только использовать теги, которые описывают содержимое электронного сообщения, но также описывать действия и приоритеты (например, «к исполнению», «важно», «срочно» и т. д.). Кроме того, пользователи не должны втискивать позиции в рамки сочетания категорий/подкатегорий – они могут размещать их во множестве виртуальных категорий одновременно.

Разработчики приложения также получают преимущества от проставления тегов, потому что им не нужно заранее обращаться к полной схеме категоризации (так называемой таксономии). Они могут положиться на теги пользователей, чтобы постоянно создавать динамическую, развивающуюся таксономию (также опирающуюся на фолксономию)[12]12
  Томас Вандер Уол (Thomas Vander Wal, 2007) ввел термин «фолксономия» и описал его следующим образом: «Фолксономия представляет собой результат персонального свободного добавления тегов к информации и объектам (что-либо, имеющее URL) для чьего-то собственного поиска. Добавление тегов осуществляется в социальной среде (обычно распределенной и открытой для других). Фолксономия создается в процессе акта проставления тегов человеком, потребляющим информацию».


[Закрыть] и использовать ее для дополнения таксономии высокого уровня, чтобы содействовать навигации.

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

Как

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

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

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

Рис. 9.7. Flickr позволяет пользователям добавлять теги к тем фотографиям, которые они уже загрузили

Поддерживайте маркировку тегами необязательной функцией

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

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

Разрешите пользователям маркировать тегами несколько позиций одновременно

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

Рис. 9.8. Flickr позволяет пользователям применять теги в режиме групповой загрузки. Пользователь может отобрать в одну группу фотографии, которые он хочет отметить тегами, затем нажать кнопку Add Tags (Добавить теги), чтобы добавить описание ко всем элементам группы

Предположите теги, чтобы облегчить возможные варианты

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

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

• Ранее использованные теги. Теги, которые уже вводили пользователи.

• Популярные теги. Теги, которые часто используются другими пользователями.

• Рекомендуемые теги. Теги, которые пользователи могут предположить, основываясь на популярных тегах, недавно используемых тегах и других факторах.

Чтобы облегчить добавление предполагаемых тегов, позвольте пользователям выбирать из списка (рис. 9.9). В дополнение к этому во время ввода тегов предположите теги, используя шаблон интерактивного взаимодействия AUTOSUGGEST/AUTOCOMPLETION (см. главу 8).

Рис. 9.9. Приятно радуют как рекомендуемые теги, так и список популярных тегов для пользователей, предполагающих, когда добавлять закладку и маркировать ее тегом. Чтобы использовать один и более тегов, пользователи должны просто нажать на них, и эти теги переместятся в текстовое поле tags (теги)

Разрешите пользователям изменять и удалять свои теги

Пользователи могут пожелать изменить свои теги, потому что они сделали ошибку или нашли другие теги, которые лучше описывают содержимое. Также если пользователи пометили тегом элемент контента, чтобы описать действие, которое они собираются сделать (например, отмечание тегом «к исполнению» или «важно» в Gmail), они могут пожелать удалить эти теги, если те больше не актуальны. Чтобы удовлетворить такие потребности, разрешите пользователям удалять, изменять или добавлять теги к существующим элементам (рис. 9.10).

Рис. 9.10. Приятно, когда пользователям разрешено изменять или удалять теги, нажимая кнопку «редактировать», расположенную рядом с отмеченным элементом

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

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

Когда теги используются для отмечания элементов, в качестве способа навигации и исследования контента обычно прилагается облако тегов (TAG CLOUDS) (см. главу 5).