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

Удобство работы с информацией в Web

і

7.2.1. По левую руку от светофора

Если вам приходится искать магазин или офис по описанию, то происходит это примерно так: вы начинаете поиски с какого-то

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

7.2.2. Визуальное выделение важной информации

Не всякая информация нужна пользователю, поэтому выделять следует только важную для принятия решения информацию. Вы наверняка знаете, что требуется для совершения следующего шага и как осуществляется переход к нему — нажатие на кнопку, выбор из списка, перенос по принципу «drag and drop» како - го-либо элемента. Важно сосредоточить пользователя на этой детали, сделать ее «видимой». Представьте себе, насколько легче было бы найти магазин «Вам сюда», если бы на черно-белом ландшафте выделялись оранжево-коричневый кирпичный дом, лестница с синими перилами и бирюзовые буквы на указателе. Иногда подобное выделение важной информации, точнее осо­бенности восприятия ее человеком, используют в целях сокры­тия иных сведений. Некоторое время в моем городе были рас­ставлены рекламные щиты одного из операторов сотовой связи со словами «БЕСПЛАТНЫЕ РАЗГОВОРЫ С ЛЮБИМЫМИ ' номерами до конца апреля» (рис. 7.1). После этот прием был ис­пользован еще не один раз.

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

7.2.3. «Географическое» выделение важной информации

Выделение информации может осуществляться не только на ви­зуальном уровне (при помощи цвета, размера, шрифта), но и на композиционном* уровне (рис. 7.2).

Начиная с версии 3.0, я всегда пользовался англоязычной версией редактора Adobe Photoshop. Однажды я столкнулся с его русифика­цией у знакомого, который попросил помочь с восстановлением старой фотографии. Я не понимал значения и половины слов меню, потому Что перевод совершенно очевидных для меня английских терминов оказался не на высоте. Однако, обладая хорошей зри­тельной памятью, я смог выбирать нужные пункты меню, не читая их названий, а просто вспоминая, где они располагались. Конечно же, я иногда ошибался, но работал все-таки достаточно продуктивно.

Вот постулаты композиционного выделения информации:

• человек воспринимает информацию слева направо и сверху вниз. Поэтому компонент Web-страницы, на который вы хо- тите'обратить внимание, будет быстрее замечен, если он рас­положен слева вверху;

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

Пользователь смотрит на страницу с композиционными блока­ми примерно так: мне нужен тот прямоугольник желтого цвета, который расположен слева внизу.

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

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

7.2.4. Выбор заголовка

Мы уже упоминали о том, какую роль в обеспечении удобства использования Web-сайта играют четкие,. и ясные заголовки (рис. 7.3). , ■

|ПЛ. ВУ |НА1ЛП!!Г Дс)(»<ш»н*ни. е и рі-дантк-цнш.

Fie ДО Fflyoritos loots ДО

|Q»* *&;• ІЗІ'.ШЙ О’ІР^ y*,01

I http://catdtog. tuC, by/edd. phbnl **1 йгЗ GO

гГкаталот^^;!.; Найти і ■

Добавление ресурса

Для добавления ресурса необходимо быть зарегистрированным пользователем TUT. BY, если вы не зарегистрированы, пройдите регистрацию.

Если вы. уже зарегистрированы на TUT. BY, то просто введите ваш идентификатор' и пароль в соответствующие поля ниже.

Рис. 7.3. Четкий и ясный заголовок. На сайте он еще выделен бордовым цветом

Человек никогда не начинает сразу вчитываться в текст на стра­нице. Он сначала пробегает глазами саму страницу, выхватывая лишь крупные или «видимые» куски содержимого — компози - ііибнййе блоки, заголовки, отвлекающие элементы. Они позво­ляют быстро понять содержание, что можно здесь сделать и нуж­на ли ему эта страница.

Представьте себе грибника в лесу. Сам лес — это как бы ваш сайт, грибы — информация, за которой пришел пользователь. Опытный грибник, только попав в лес, не будет искать подбере­зовики. Он сначала найдет место, где они «должны» расти: от­крытую полянку, не сырую, не в хвойной части леса, достаточно освещенную солнцем... Так же и пользователи: прежде чем на-

чать читать котировки акций, они найдут заголовок «Котировки акций».

Важно отметить, что при использовании для заголовков стан­дартного тега <hl> можно улучшить не только юзабилити самого Web-сайта, но и результаты поиска в поисковых системах. Когда индексирующие роботы поисковых серверов натыкаются на за­головок <hl>, они используют его содержимое в качестве заго­ловка результата поиска.

Раньше я как-то не задумывался о юзабилити результатов поиска на поисковых серверах. Однако недавно как-то ради интереса я задал запрос на rambler. ru на отображение всех страниц моего личного сайта, проиндексированных этим сервером. Мне вернулся список, в котором заголовок каждого результата был одинаковым. Нечто вроде «Персональный сайт Андрея Калиновского». Удручающая картина, надо заметить. Еще больше я расстроился, когда посмот­рел таким же образом страницы сайта одной знакомой мне фирмы, и там все было красиво и четко. Если страница была об «Автоматиза­ции бизнес-процессов», то и в заголовке результата поиска было то же самое.

Естественно, пользователю куда проще и понятнее «кликнуть» по конкретной ссылке «Предоставление услуг бесплатного хос­тинга», чем зайти на «Web-сайт крутейшего мегапортала». Эти ссылки приведут на одну и ту же страницу, но первый заголовок внимание посетителя не пропустит, а мимо второго Проскочит и даже не задержится. Фразы типа «10 ООО баксов в месяц — это реально!» меня лично всегда отпугивают, я думаю, не только меня одного.

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

7.2.5. Контрастность текста и шрифт

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

Задавались ли вы когда-нибудь вопросом, почему книги не печа­тают изящным шрифтом с завитушками? А почему вы не видите в магазинах поздравительных открыток на испанском языке? Правильно. Такого рода информацию трудно либо вовсе невоз­можно воспринимать. Говоря о том, что допустимо использовать не более трех шрифтов, я лишь повторю мнение большинства специалистов, работающих не только в Web. Это правило при­меняется и при верстке обычных газет, и в большинстве книг. Желательно использовать привычные шрифты (Anal, Times, Courier, Verdana...). И дело даже не в том, что????? ??????? ????? ?? ?????????, т. е., простите, у пользователя таких шрифтов может не оказаться (в конце концов, шрифты можно хранить на серве­ре и загружать в случае необходимости). Стандартные шрифты хорошо читаемы, просты для восприятия и привычны. Они как незнакомец, который чем-то похож на вашего друга: вы еще не знаете его, а уже расположены к нему, Есть еще масса других правил насчет того, что шрифт с засечками читается проще, ТЕКСТ, НАПИСАННЫЙ ЗАГЛАВНЫМИ БУКВАМИ, ЧИТА­ЕТСЯ МЕДЛЕННЕЕ, а курсив воспринимается как рукописный. Впрочем, по этим вопросам есть масса литературы.

7.2.6. Кодировка

Что касается кодировки, то эти вопросы решаются «малой кро­вью». Чаще всего правильное автоматическое распознавание браузером кодировки текста обеспечивается мета-тегом в заго­ловке страницы:

<МЕТА http-equiv="Content-Type" content="texthtml; chars- et=windows-1251">.

Достаточно прописать это на странице, и пользователю уже не придется вручную настраивать кодировку и перечитывать стра­ницу снова (рис. 7.5).

JLbJL^jFimr

=| гВЦ 01ll>fBJL [1 !|№гМ Щ тАтГт&гБ11|u м

н * - п і ~ ни - II ц г-iнШи у; ^ г<н и і н і и и п II

Рис. 7.5. Страницу можно прочитать, только переключив кодировку средствами браузера

7.2.7. Грамматические ошибки

Ничто так не раздражает, не отвлекает и не вызывает неприязни во время чтения, как грамматические ошибки в тексте. Я уже го­ворил, что хорошее не замечается, в то время как плохое помнят долго. Прежде чем выдавать посетителю информацию, прове­ряйте ее на наличие стилистических и грамматических ошибок. Это проявление элементарного уважения к пользователю и де­монстрация хорошего, стиля. Ведь вы не хотели бы работать в операционной системе; например, Microsoft Windows, где в меню «Пуке» содержатся пункты «Праграмы», «Спрафка» и «Завирше - нее сианса» (рис. 7.6). Смешным очепяткам место на развлека­тельном сайте в соответствующем разделе, а не в сведениях о компании или новостях...

TOC o "1-5" h z!(§) Програмы ►

Г& Документы ►

Q* Настройки ►

Поеск ► I

Помощь и справка 2Э Выпалиить

М Завиршение сианса user S3 Выключить кампьютер

. •

Рис. 7.6, Господа из Microsoft не имеют к надписям на этом изображе­нии никакого отношения. Это фотомонтаж. Надеюсь, достаточно пока­зательный

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

. 7.2.8. Как вы лодку назовете

Разгадка ребусов не является целью посетителей большинства сайтов, если это, конечно же, не ресурсы, посвященные голово­ломкам. Чем яснее надписи, значения пиктограмм; термины, тем быстрее пользователь поймет, надо ли ему «кликать» мышью на них и куда они его приведут (рис. 7.7). Что может означать действие, описанное как Выбрать документ, когда пользователь уже находится в форме просмотра документа? Обработать? За - прмнкть? Просмотреть подробнее? Будет ли фраза Проиндексиро­вать сайт понятна новичку’ Или он решит, что это какое-то страшное действие, которое ротрет весь интернет с лица земли? Надпись Связь в верхнем меню сайта интернет-провайдера ведет к описанию услуг связи или к координатам головного офиса компании? Никго не должен задумываться над подобными во­просами в ходе работы.

фБИБЛИОТЕКА

ВХОД В библиотек[6]/ книпх безопасность программирование I криптография | internals | wwwl тяпрґЬпния і

Puc. 7.7. Совершенно непонятный пункт меню Internals, суть которого я не понял, даже зайдя в него по ссылке. Ясность не вносит и перевод этого слова с английского — «внутренние», «внутренности»