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

Разбор уровней юзабилити

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

Итак, у меня есть два электронных почтовых ящика. Первый я зарегистрировал достаточно давно на Yahoo!. Этот сервер все­гда сильно загружен, размер ящика долгое время был скром­ненький, всего 4 мегабайта, да и далеко это от наших широт. Словом, позже я решил завести еще один почтовый ящик по­ближе, на белорусском портале TUT. BY. Скорость хорошая, патриотизм, места сколько угодно... Вот только работать с по­чтой мне гораздо приятнее на Yahoo!. Я объясню, почему.

При входе в электронный почтовый ящик на TUT. BY я должен вводить одни и те же данные всякий раз, даже если работал с поч­той пять минут назад и закрыл браузер (рис. 7.24).

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

Паропь:і j Забыл пароль

Рис. 7.24. Фрагмент страницы входа в почтовый ящик на TUT. BY

графический редактор, слегка обработал картинку. За это время Yahoo! еще не появился. По прошествии целой минуты страница Yahoo! загрузилась и я попал в свой почтовый ящик, введя толь­ко пароль (рис. 7.25). Изредка, наверное, один раз в два-три ме­сяца, меня просят подтвердить свой логин и пароль (рис. 7.26).

Return to Yahoo! Mail

Yahoo! ID' an_kalinovski

Password:

Mode: Standard | Secure Sign in as a different user

Рис. 7.25. Фрагмент страницы входа в почтовый ящик на yahoo. com. Я должен ввести только пароль

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

ExistlnflYahool users

Eht, er your Ю and password to sign in

Yahool ID-. [ ZT~~~

Password:______ ' _ J

0 Remember my ID on this computer

. Mode: Standard | Secure Sion-in help Forgot vour password?

Puc. 7.26. Фрагмент страницы входа в почтовый ящик на yahoo. com. Выделена опция Запомнить мои данные при входе с этого компьютера

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

Испольгеааио 4781Кб*йт и» 20Мб*йт, ■ транше 466С

Размер Писем Новых Непро*

Рис. 7,27. Занятое письмами место на TUT. BY отображается с помощью цифр. Я никогда их не вижу

You are using 2УЬ of your 4.0MB limit.

Need more space? Get more storage.

Puc. 7.28. Занятое письмами место на yahoo. com отображается с помощью визуального индикатора. Для оценки достаточно беглого взгляда

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

На рисунках 7.29 и 7.30 показано, как отображаются письма на TUT. BY и на Yahoo!.

yuy by

лишивАЯ ІЛУЖЬА bL/ІОРУі ІКОІ О HOP f AJIA ТІІГ. Вґ

tTTVC Отії»

Г Й* storet8adobe. com

Г Eli An. Kalinovski

Thank you for creating an Adobe.. Письмо самому себе

■‘|5Г“Э<ь сЗ>‘

Ра»мі^ Попучаио

5135 25-Мар-04

12К 15-Мар-04*

Чгі ¥?

2 покэээно

r#.»Uri*.h»iavn »н^мкмы« првгодины1*, 2000-2004 Пишите н»мі Wfrftby

Рис. 7.29. Список писем на TUT. BY

шшш - ЧВиимиг - ШивыЖ ■

Рис. 7.30. Список писем на yahoo. com

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

1. Элементы навигации на TUT. BY — это пиктограммы, а на Yahoo! — текст (рис. 7.31, 7.32).

4а %3 ^3 'ta & ■ I " выберите папку - SI Cji3P fif3' ”Ш

Рис. 7.31, Элементы навигации на TUT. BY

Vibw: All I Unread I Flagged Messages 1-2 of2 і First | Previous | Ne::t | last

Puc. 7.32. Элементы навигации на yahoo. com

В спину пиктограмм вонзили уже немало ножей, и я, наверное,

не буду продолжать эту традицию. Просто скажу, что неудобно:

• форма перегружена графикой;

• я не могу запомнить значения всех пиктограмм;

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

• в мелкие картинки сложно попасть мышью.

2. На TUT. BY отсутствуют элементы навигации в нижней части списка писем. Конечно, при малом количестве «входящих» дубли кнопок на Yahoo! смотрятся, мягко говоря, странно. Однако это не покажется таковым, если в списке будут сотни старых и десятки новых посланий. Вы выделяете ненужные письма и собираетесь их удалить. Поскольку вы уже внизу списка, вам придется долго листать страницу вверх, чтобы на­жать на пиктограмму Удалить (рис. 7.33, 7.34).

3. При переходе к списку папок на Yahoo! вы сделаете всего одно движение и щелчок мыши. Кроме того, вы сразу можете ви­деть состояние других папок и наличие в них новых писем

(рис. 7.35).

EsIdsES [МІ]

Q Inbox (1)

Щ Draft Q Sent

ugl Bulk rEmptvl OS Trash [Empty]

Puc. 7.35. Папки и управление ими на yahoo. com всегда под рукой

Чтобы перейти к папкам на TUT. BY, вам придется сначала нажать на соответствующую гиперссылку (рис. 7.36).

Вспомните привычные для вас почтовые программы (Microsoft Outlook, The Bat, Becky) — везде поддержана абстракция па­пок. На Yahoo! разработчики и дизайнеры не отступали от этого, а на TUT. BY проявили оригинальность. В результате

юзабилити снизилось из-за лишних шагов и отступления от і общепринятого шаблона.

4. Следующее отличие, однако, уже не в пользу Yahoo!. Если вы захотите перенаправить кому-либо свою почту, вам придется посщать каждое письмо по отдельности (рис. 7.37). Это вам быстро надоест, и все достоинства Yahoo! уже не будут казаться столь значительными.

Puc. 7.37. На TUT. BY поддержана функция перенаправления порции писем на другой адрес, хотя назначение этого поля и пиктограмм неочевидно. На Yahoo! подобная функция вовсе отсутствует

5. С почтой я работаю таким образом: я читаю письмо, удаляю его й перехожу к следующему. Мне неудобно, что на TUT. BY я не могу так работать: я должен выбирать либо переход к сле­дующему письму при помощи щелчка мыши на пиктограмме, либо удаление, но тогда система автоматически «выбрасыва­ет» меня к списку писем. Опять лишний шаг. Плюс все та же история с отсутствием дублей кнопок, что и в списке писем. На Yahoo! этих проблем нет. Удаляя письмо, я автоматически попадаю в следующее.

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

А теперь несколько мелких «бяк».

Если работать на TUT. BY около часа, то происходит следующее (рис. 7.38).

(top отсоединены от сервера! Войдите, пожалуйста, снова.

Рис. 7.38. TUT. BY заботится о безопасности.

Сессии быстро «погибают»

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

Иногда пиктограммы не появляются, иногда вместо них крести­ки. Я приспособился работать быстрее, чем кажется: я просто помню, где находится наиболее нужная мне пиктограмма Удалить (кстати, на разных страницах она в разных местах). Я ставлю курсор в соответствующую область экрана, появляется всплы­вающая подсказка (благо здесь разработчики не поленились) и курсор в виде руки, и тогда я нажимаю на это «нечто». Но раз­ве это выход?

В этом рЙУШЕНПе (в смысле, в письме) проблемы с кодиров­кой (рис. 7.40). На Yahoo иногда случается, а вот на TUT. BY я ни разу не видел странных рЙУШЕНПов.

□ An. Kalinovski юЙУШНП УБНПНХ УЕВЕ

Рис. 7.40. Порой кодировка на Yahoo! «хромает»

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

Резюме

1. Юзабилити — степень удобства и простоты использования не­которого продукта для его потребителя, а также способы обес­печения этого удобства. Начав знакомство с вашим программ­ным продуктом с нуля, пользователь должен быстро обучить­ся работе с ним.

2. Неудачные интерфейсные решения создают негативное впе­чатление о вашем ресурсе и надолго запоминаются.

3. Для ускорения работы и повышения предсказуемости интер­фейса важную информацию необходимо выделять. Существу­ют способы выделения информации на визуальном и на ком­позиционном уровнях.

4. Надписи на элементах интерфейса должны быть понятными.

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

: намеренно желаете отвлечь пользователя.

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

7. Нежелательно использовать горизонтальную полосу прокрут­ки, а также две и более вертикальных.

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

9. Сокращенная форма отображения данных экономит место на экране, ускоряет восприятие информации, упрощает ра­боту, однако требует знания предметной области системы.

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

11. Важны четкие и ясные заголовки.

12. Грамматические ошибки в тексте недопустимы. Обработка системой ошибок пользователя обеспечивает комфортность в работе.

13. Не стоит предлагать несколько решений одной проблемы.

14. Тестирование юзабилити необходимо начинать практически одновременно с началом работы над проектом. До начала тестирования необходимо выделить базовые категории поль­зователей вашего сайта. Для результативного тестирования достаточно привлечь три — пять человек.