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

Удобство работы с навигацией

7.3.1. Размеры элементов. Школа юного снайпера

Одним из основополагающих законов разработки интерфейса пользователя является закон Фитса1. Для ускорения работы эле­мент интерфейса не должен быть маленьким и находиться в от­даленных уголках экрана. В мелкие детали трудно попасть, однако это не значит, что этот элемент надо делать огромным (рис. 7.8).

Введите текст:

!

I Подтвердить..

Рис. 7.8. Неразумное увеличение элементов интерфейса и выглядит нелепо, и места занимает много

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

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

Для обеспечения удобной работы с мелкими деталями в некото­рых случаях можно их искусственно увеличивать. Вы можете по каким бы то ни было соображениям (эстетическим, дизайнер­ским) решить, что деталь должна остаться мелкой (например, элемент расширения информации в виде обычной стрелки). В таком случае сделайте его не картинкой размером 3x3 пикселя, к которой прикреплена гиперссылка, а той же стрелкой 3x3 пик­селя, только вокруг добавьте пустое поле (рис. 7.10). Тогда, це­лясь в картинку, пользователь может и не попасть точно в цель, но наверняка попадет в поле, где также есть гиперссылка.

« ] ►...]

Рис. 7.10. Два варианта одной и той же гиперссылки показаны в мо­мент, когда на них установлен фокус в HTML-форме. И куда, по-ваше­му, легче попасть?

7.3.2. Откуда я пришел?

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

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

7.3.3. Сокращенная и полная форма

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

$ 2. HTML, fit,,ХМ1. для начинающих

Моррисом М.

иене ру6 (другая валюта или оешонї

Склад в Москве [-]. Ожидаемое поступление;

Ьэ.05.2004; планируемая отправка: 04,05.2004 Склад е С.-Петербурге [*]• Ожидаемое поступление: 29.04.2004; планируемая отправка: 30.04-2004

***** «

Практическое пособие. Даже те и> еас, кто не помышляет о собственном Web-узл», вероятно, уже поняли, что в будущем им не... дальше

I HTML & ХМL для начинающих

Моррисон, .

цена 127,00 руб (другая аалгси или аетрн)

Склад • Москве {*]. Ожидаемое поступление: 03.05.2004; планируемая отправка:

04.0S.2004

Склад е С.-Петербурге [*]. Ожидаемое поступление: 29,04.2004: планируемая отправка: 30.04.2004

место в рейтинге продаж: 594

оценка покупателей (голосов: 1)

издательство: Эком (act книги издательства)

серия: Для начинающих

дата выхода: октябрь 2002

ISBN 5-7163-0100-2

страниц: 384

обложка: мягкая

иллюстрированное издание

Рис. 7.12. Сокращенная и полная форма отображения информации о книге на books. ru

Полная форма — развернутое описание объекта и его свойств, она содержит все доступные сведения о нем.

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

7.3.4. Не отвлекайте меня от работы!

Вы пытались когда-нибудь готовиться к экзамену в комнате с работающим телевизором, или, может, вы пробовали работать, когда ваш коллега мечется перед вашим столом, как загнанный зверь? Когда вас отвлекают, сосредоточиться невозможно. ,Роль такого мечущегося коллеги может исполнять прыгающий по странице текст или бегущая строка в нижней части экрана. На его месте может быть и «о-чудо-javascript-a» — ползущая за вами панель с кнопками или баннером, которая подпрыгивает, а за­тем останавливается в одном и том же месте экрана, как только вы перестаете крутить колесо прокрутки, ^то отвлекающие эле­менты, их нужно уничтожать, если только они не предназначены для развлечения (рис. 7.13).

kAvnio. nj f omin. J.iVii Scripts I ot гео/нл Сі. иь;

-«JAVA SCRIPTS*

Этот скрипт представляет собой что-то вроде обычной флешки.

Н»г*-п п^л пмгин^й гКагакітго іґ nturr,» k~nuouyn-v<. ягй чямАнаомп

Puc. 7.13. Ha сайтах зачастую помещают различные изыски, созданные при помощи JavaScript. Бегущая строка под горизонтальным меню на lia54.hll. ru сразу же отвлекла меня, и я не смог работать с информа­цией, пока не прочел всю надпись. А потом постоянно поглядывал, не

изменилась ли она

Такие элементы всегда уводят пользователя от информации,'по­тому что он. неосознанно следит взглядом за тем, что движется О какой сосредоточенности на задаче может идти речь? Долоі бегущие строки и меню-попрыгунчйки с сайтов, где пользовате­ли занимаются делом! Пользуйтесь этими приемами, если вы на­меренно желаете отвлечь пользователя или хотите ему срочно что-то сказать, но не в иных случаях.