Юзабилити: как сделать сайт удобным

Комфортность

7.4.1. Комфортность в жизни и в Web

Комфортность как элемент юзабилити по своей сути не является управляющей частью интерфейса пользователя. Она носит ско­рее характер дополнительных удобств.

Представьте себе два загородных коттеджа.

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

Второй коттедж в зеленом тенистом саду. Горячая и холодная вода из водопровода круглосуточно. Удобные широкие кровати. Повсюду мягкие пушистые ковры, стоит телевизор, музыкаль­ный центр. На кухню газ подведен централизованно, и перебоев С его подачей не бывает.

Жить можно и там, и там. Только ощущения разные. Первый ва­риант — школа выживания, второй — номер-«люкс».

7.4.2. Разрешение монитора

До сих пор не существует единого разрешения монитора у всех пользователей. Кроме того, вы не заставите пользователя спе­циально для просмотра вашего сайта переключаться в режим 1024x768, если он привык к 800x600. Все прекрасно знают, что

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

7.4.3. Браузеры

Большая часть информации на странице остается доступной как при различных разрешениях монитора, так и во всех популяр­ных браузерах. Однако то, как выглядит эта информация, порой оставляет желать лучшего. Хорошая идея, часто и эффективно используемая, может сыграть злую шутку. Как-то я попал при помощи браузера Mozilla на сайт одной компании, где был про­сто сражен наповал «висящей» перед основным информацион­ным блоком совершенно непонятной таблицей. Заинтересован­ный таким поворотом событий, я стал экспериментировать: можно ли все-таки прочитать этот информационный блок, рабо­тают ли гиперссылки на этом куске таблицы. Работать с содер­жимым я все-таки смог, но в другой раз у меня не будет ни вре­мени, ни желания разгадывать подобные головоломки.

Я скопировал в буфер обмена адрес этой экстравагантной стра­ницы и открыл ее во «всеядном» MS Internet Explorer. Среди прочих достоинств он имеет свойство, нещадно эксплуатируе­мое любителями нестандартных решений, — этот браузер как будто построен по принципу «отображу все, а что не отображает­ся, то все равно отображу». Например, в спецификации HTML у тега <table> не существует атрибутов «height» и «width»:

ctable height=«100>> width=«100%»>, НО редко кто ПИЩЄТ страницы, строго следуя спецификации;

ctable style=«height: 100%; width:.l00%»>.

Internet Explorer отреагирует на обе записи одинаково, потому, что он «всеядный», в нем работают практически любые «изыски».

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

К сожалению, я не помню адреса этого «чуда», однако найти are лог не составит труда. Примеры сплошь и рядом (рис. 7.14,7.15

БВШ

frwpfWW a— .9»—»■

-

Ласга»еяостк

•уднгерм

Лосатигапп

V. ... Я

«.«.«L. .......

Рис. 7.14. Я уважаю парней из SpyLog, а вот они, похоже, совсем не ува жают семейство браузеров Gecko, в частности, браузер Mozilla. Вмест содержимого — огромный кусок пустого места

Фактически, проверив работу своего меню только в Interne Explorer, разработчик предложил мне пользоваться нагревателе* для воды вместо горячего водопровода.

7.4.4. Всплывающие окно

За время работы в интернете у меня выработался инстинкт: еслі я работаю в одном окне и не делаю специальных действий дои открытия нового, то всякое всплывающее «нечто» вызывав' у меня непреодолимое желание его закрыть (рис. 7.16). Иногд; это мне мешает, потому что разработчик решил показать і^н< информацию в новом окне, а я взял и «прихлопнул» его (окно) не желая читать очередной рекламно-завлекательный мусор. Н( один раз я закрывал окна по привычке, не дожидаясь того, что мог в них увидеть.

БЯПЯПНЩВИШПЙВПЩдНЯЩЩПЩКДО

» j* *■»№ ipeb ц*

ІЗ w • О' З Й" €St тйг»«*» <&»*> {^■мвдЦ'иііиііііііиійІіііВійиімйиіШ ■—---

Иміуіпй» >mwyii Р«ч«пмй ч»"1?

.даты paetrrat епвйї шкал*уйт» «вінежнвсти -

! Овтстт» иовост* • к«tenor і С*йчле**в*йт*: 9

Сводная статистике і_у

TOC o "1-5" h z Ії'тпііі' "• 25 *"P«n« 2004 (»e> 19:1*

: Ммцімвстк

««»

: Сегодня і і

і 8ч»р« 2 2

r Ломим і рейтинга : Р*»М«» «ГДИТОрИИ

Рис. 7.15. Вот так должна выглядеть страница сводной статистики

на SpyLog

ЯНЕ

chool87.jpg Black.66.jpg

f Video' Н УбритнІиі

Group9.jpg t Разное З

Рис. 7.16. Зайдешь, бывало, почитать анекдоты на http://fomenko. ru, а там, словно в сказке, как выпрыгнет, как выскочит...

У многооконной организации Web-интерфейса, особенно если она используется в интернете, а не интранет-сетях, есть ряд не достатков:

• порой трудно разделить ситуации на те, в которых следует но вые окна открывать «без позволения» пользователя, и те, в ко торых нужно дождаться его запроса;

• всплывающие окна часто непроизвольно «убиваются» опыт­ными пользователями;

• может случиться так, что появившееся окно можно просто ш заметить во время работы, если оно открывается на заднек плане;

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

7.4.5. Полосы прокрутки

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

Любой предмет, находясь не в нужное время и не в нужном месте, может препятствовать выполнению работы. Содержимое страницы должно прокручиваться только одной полосой прокрутки (скрол - лером) и только в одном направлении (вверх/вниз) (рис. 7.17).

Ситуация, когда необходима горизонтальная полоса прокрутки, крайне нежелательна. Также следует избегать двух и более вер­
тикальных. Мне приходилось сталкиваться со страницами, на которых надо орудовать сразу двумя полосами прокрутки. Край­не неудобно, прошу заметить. А об увеличении скорости работы пользователей не может идти и речи. Такие вольности можно позволить себе только там, где речь идет о дизайне, а пользова­тели не работают.

7.4.6. Забытые герои

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

для продолжения работы с системой. Не заставляйте пользовате­ля тянуться к мыши, а потом еще и искать нужное место для «клика».

Еще один «забытый герой» — шрифт, размер которого установ­лен в браузере по умолчанию. Некоторые любят мелкие буквы, некоторые — крупные. Ваш чудесный сайт может развалиться на • куски, если вы не проверили его поведение при установках шрифта Самый маленький и Самый большой. Как правило, если со страницей все нормально при этих граничных условиях, то в ос­тальных случаях проблемы также не возникают. Здесь есть одно «но». Часто разработчики используют размер шрифта, жестко заданный при помощи стилей. Это не совсем корректно по от­ношению к пользователям, потому что это типичная «уравни­ловка». За тысячи посетителей дизайнер решил, как им удобнее читать. Он поставил в одинаковые условия и человека с ослаб­ленным зрением, и пользователя, у которого «зоркий орлиный глаз».

Как видите, наличие хотя бы только этих «забытых героев» гово­рит о том, что всего не упомнишь. Каким бы ни был ваш опыт, он подскажет вам то, о чем я мог забыть.

7.4.7. Считаем шаги

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

Как перейти к поиску организации?

Учитывая небольшое количество объектов системы, можно пред­ложить несколько вариантов.

1. Создать пункт главного меню Поиск (рис. 7.18)

После выбора этого пункта предлагается уточнить объект одним из двух способов — выбором объекта из списка (рис. 7.19)

Главное меню

Регистрация информации Поиск информации Печать делений Дополнительно,..

Рис. 7.19. Второй шаг — выбор объекта действия Поиск или набора вкладок (рис. 7.20).

: Фамилия

ч

j ' Имя Отчество

Искать

Рис. 7.2Q. Второй шаг — переход на нужную закладку

2. Показать форму со вкладками

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

3. Вынести в главное меню опции Искать сотрудника, Искать подразде­ление, Искать организации

Человек сразу попадет в нужную ему форму поиска. Третий ва­риант предпочтительней. Теперь уточним его. Есть соблазн сгруппировать сходные действия, но это ошибочное решение. Если мы выделим композиционные блоки Найти, Регистрировать, Печатать, человек быстро перейдет к блоку поиска, но остановится на выборе объекта: он будет высматривать слово «поиск», кото­рое будет написано три раза. Поэтому пользователя необходимо направлять «от объектов», а не «от действий», в данном случае разделить главное меню на блоки Сотрудники, Подразделения и Ор­ганизации. Тогда пользователь быстро найдет блок Организации, обнаружит в нем слово «поиск» и «кликнет» на нем. Блоки меню целесообразно расположить исходя из их важности и частоты использования в соответствии с направлением восприятия (сле­ва направо и сверху вниз) (рис. 7.21).