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

Элементы содержания

6.5.1. Текст

Текст занимает 60—65 % Всемирной паутины. Способ подачи этой информации неоспоримо важен, однако большое значение имеет и заинтересованность посетителя в той информации, ко - торую он ищет. Человек согласится читать все что угодно, если у него есть к этому стимул, пусть это статья про его соседей в го­родском новостном портале или информация о лечении редкой болезни его любимого хомячка. Ресурсов, которые могут не об­ращать внимания на то, как они ведут себя по отношению к пользователям, весьма немного. Главный двигатель прогресса в Web — это конкуренция. И удержать пользователя на своем сайте разработчику ох как непросто. Представьте себе любой крупный рынок с рядом лотков, продающих одно и то же. Кто из продавцов вас заинтересует своим предложением, тот и продаст его, хотя товар у всех практически одинаковый. Можно привес­ти и другое обоснование вашего выбора. Вспомните ситуацию, когда вы оказались в городе без часов и вам нужно было узнать время. Разве вы спросите первого попавшегося человека? Лично я не раз ловил себя на мысли, что В такие моменты я спрашиваю только тех людей, которые подсознательно внушают мне дове­рие. «Этот злой какой-то... Эта расфуфыренная дамочка вообще не смотрит никуда, кроме своего маникюра... У этого, видно, и часов-то нет... А вот... Извините, не подскажете, который час?..» Доверие посетителей надо заслужить.

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

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

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

00^ Любая часть текста может быть оформлена не только в виде обычно­го статического текста, но и в виде гиперссылок.

Вот как выглядит структура любого обособленного текстового содержимого:

• Текстовое содержимое

• Заголовок

• Аннотация

• Текст

• Абзац

• Предложение • Слово • Буква

Теперь пройдем последовательно по всем этим уровням.

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

При составлении заголовка надо помнить:

• ваш заголовок будут читать все посетители — и опытные, и новички, — поэтому нежелательно использовать в заголовке профессиональный жаргон, понятный только узким специа­листам;

• заголовок должен быть кратким и ясным;

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

• в заголовок должны быть включены только самые важные слова, ничего лишнего, никакой «воды»;

• ключевое слово (фраза) должно быть первым.

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

«Визуальные редакторы: создание качественных Web-страниц». Уже лучше. Обратите внимание, что сам по себе заголовок еще и укоротился.

Далее «качественные Web-страницы». Те посетители, которые попали на ваш сайт не случайно, свято верят в то, что они всегда создают качественные страницы. Зачем говорить им об этом еще раз? В то же время, если опустить это слово и оставить только «Визуальные редакторы: создание Web-страниц», то такой заго­ловок покажется слишком общим, по принципу «все обо всем», в нем не будет изюминки. Я, конечно же, не претендую на самого лучшего составителя заголовков, но на своем сайте, над статьей о работе Web-мастеров в визуальных редакторах, я бы написал: «Визуальные редакторы: особенности создания Web-страниц».

Аннотация — это краткое изложение либо описание того, что че­ловеку предстоит прочитать. Она должна давать представление, какие именно знания получит читатель при ознакомлении с ин­формацией. Аннотация используется не очень часто, потому что не совсем соответствует той сути, которую придают Web боль­шинство людей. Зачастую сама информация организована так, что в аннотации нет нужды. Простой пример: на сайте с междуна­родными новостями расположен список статей в виде гиперссы­лок-заголовков. Щелкаешь по заголовку — попадаешь в краткое содержание статьи. Щелкаешь по ссылке читать всю статьір — рас­крывается полное содержание.

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

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

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

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

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

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

6.5.2. Особенности восприятия текста

Восприятие текста как элемента содержания Web-страницы имеет свои особенности.

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

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

В-третьих, они не всегда успевают остановиться на подроб­ностях. Осбонеотси всорпиятия члеовкеом тескта вобоще всеьма сртанны. Елси вы поыптатеесь прчоитать эотт тескт мледенно, взомжоно, вы нчиего и не пйомете. Но, не нарпягаясь и чтиая бсытро, вы лекго овсоите исукссвто ткаого четния. Члеовек во - прсиниамет пркатисечки Тоьлко певрую и полсендюю бувку, а не все слвоо. , ' -

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

В-четвертых, размер шрифта (это касается и электронной книги, и обычной) влияет на восприятие информации. ^

В-пятых, то, насколько внимательно посетители читают текст, зависит от их заинтересованности в информации и ее эксклю­зивности.

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

6.5.3. Поля ввода

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

К полям ввода относятся следующие элементы:

• текстовое поле ввода (однострочное (рис. 6.24) к многостроч­ное (рис. 6.25));

• поле Выбор из списка (однострочное (рис. 6.26) и многострочное (рис. 6.27));

• чек-боксы (рис. 6.28) и радио-кнопки (рис. 6.29);

• нехарактерные для Web-интерфейса элементы (например, пол­зунок).

Однострочное текстовое поле

Рис. 6.24. Текстовое поле ввода для одной строки

Многострочное текстовое поле Многострочное текстовое поле Многострочное текстовое поле

Рис. 6.25. Текстовое поле ввода для большого количества строк

Выпадающий список

Рис. 6.26. Элемент Выбор из списка. Он же элемент одиночного выбора

®

Рис. 6.29. Радио-кнопка

При выборе того или иного поля ввода и способа его оформле­ния обратите внимание на следующие особенности.

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

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

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

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

6.5.4. Кнопки

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

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

Глагольные формы (настроить, отменить) в надписях позволяют быстрее восстановить фокус внимания и легче понимать суть действия. Кроме того, надпись должна отражать не только дей­ствие, но и объект, если он не очевиден (Настроить параметры поиска, Удалить абонента). Исключение составляют общепринятые надписи вроде Помощь и ОК (рис. 6.30, 6.31).

6.5.5. Гиперссылки

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

Гиперссылка — основной элемент управления перемещением пользователя в Web, поэтому к ней предъявляется ряд требова­ний. Ссылка должна быть «видима»: если какой-то элемент

Vou can run the setup program at a later time to complete the installation.

To continue installing, click Resume. To quit the setup program, click Exit Setup.

Resume ll Exit Setup

Puc. 6.30. Удачные надписи Возобновить и Выйти из программы установки позвбляют вообще не читать информацию в диалоговом окне — все по­нятно и так

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

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

Не заставляйте посетителя гадать и вспоминать, где он уже был, а где еще нет.

Иногда роль гиперссылок играют другие элементы, например, вызов нового окна происходит таким образом:

<SPAN class=«span_href>> onclick="window. open('next. html', 'Вызов', ’height=300, width=300')">Вызов в новом окне </SPAN>

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

.span_href {CURSOR: hand;}

Иначе никто не поймет, что это гиперссылка и по ней можно «кликнуть».

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

6.5.6. Пиктограммы

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

Во-первых, их делают мелкими — в Web место на вес золо­та — следовательно, мало раздолья для фантазии, в иконки сложнее попасть, необходимы более точные движения и тому подобные проблемы мелких деталей. А если сделать их больши­ми, то они станут занимать больше места, чем текст, т. е. потеря­ют часть своих достоинств.

Во-вторых, порой непонятно, что они значат (а вообще, что это изображено — буква G, змея или пожарный гидрант), не го­воря уж о понятности действия.

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

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

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

Теперь о плюсах.

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

• При использовании пиктограмм увеличивается скорость по­иска взглядом нужного элемента (при условии, что пикто­граммы хорошо выполнены и грамотно скомпонованы).

• Пиктограммы «украшают» страницу, т. е. делают ее не такой скучной, как обычный текст.

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

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

Надо отметить, что стилизованная пиктограмма (как в детстве «точка, точка, запятая — вышла рожица кривая...») воспринима­ется проще, чем обремененная мелкими деталями.

Для выделения нужной пиктограммы из всех остальных можно использовать приглушенные цвета, которые становятся ярче при наведении на них курсора. Решение с серыми неактивными пиктограммами, как в Internet Explorer 5.0, несколько ошибочно: они сильно похожи друг на друга по цвету, поэтому трудно раз­личимы.

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

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

Рис. 6.32. Пиктограмма «фильтр». Непонятно даже то, что это фильтр, не говоря уже о функции данной пиктограммы

С эстетической точки зрения важно поддерживать единую сти­листику пиктограмм. Например, плавные, скругленные контуры или «плоские» пиктограммы, пиктограммы с одним фоновым элементом или стилизованные «под хохлому» (рис. 6.33).

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

Рис. 6.34. «Одинаковые» пиктограммы (слева) и то, как их видит пользователь (справа)

Без комментариев (рис. 6.35).

6.5.7. Списки

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

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

г 1 • Мк rovoft Wor d

TOC o "1-5" h z ' £айл в»»» ІИД вставка «осеш Ctpuc 1*блица fijwo £лр*вса - ' м-ыи^лте-х. х

:d & а &>&:&&*|* В *

ї$ ал , *|abl? і Омдрвмеиив... Вртуялвнив... Золочений... „

,./ <г! ------------------ *----------- q. *>,□-jsatijF:* л m'fflt'TN?

;| «Выполните пересчет> » Пересчет і I >* г Покакать w, m%x ЕЗ'-< £«*«’

; us | *u <x ok #t #* j # *£ s » ш * ✓ | 'ш.

" 4 | и:-»-) г» - h".-> | C| »6® SB as fl Ж £ї „

! дейсдаия* j Автофисуры» Ч Ч О •” ? О

!%Г0 с

' л" *' *• - м«м»» <^*Эам»»«ьн4* 11

Puc. 6.J5. Кризис жанра. Это, конечно же, шутка. Но в каждой шутке есть доля шутки, а все остальное правда

• First list item

• Second list item

о First list item о Second list item о Third list item

• Third list item

Puc. 6.36. Вот так выглядит простой список