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

Этапы создания интерфейса

(

Интерфейс программного продукта проходит четыре этапа соз­дания: бумажный прототип, электронный прототип, макет, соб­ственно интерфейс.

Бумажный прототип?! Это так долго. Я на компьютере Сделаю все гораздо быстрее!

Неизвестный проектировщик

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

ДолймхА. Ц**че>4 Ъ-аЛ л Me <aI'H о-4.о с

СЛ«ГЄ^£

Puc. 4.1. Бумажный прототип интерфейса с пояснениями и пометками

Глава 4. Этапы создания интерфейса

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

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

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

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

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

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

Электронный прототип — аккуратно оформленная версия бу­мажного прототипа в графическом или текстовом редакторе, на­пример, MS Visio, Corel Draw, MS Word (рис. 4.2).

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

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

Четвертый этап — собственно интерфейс рабочей системы (рис. 4.4). Это уже никакой не макет и не прототип, это конечная цель. Если при проектировании и анализе интерфейса все было сделано верно и вовремя, то этот интерфейс уже конечный, он не дора­батывается и не исправляется.

Глава 4. Этапы создания интерфейса

і шчкнмжжз

: г Регистраций инФоо^йи : ? Ш Рёристр^йя инфсюйаііж о гю драме лений і

■ ■ сотруднике ‘:ЖЇ: IfподоаздаПбіШ ::. .- ;'>|

Печать сведенто сотруднике ( Печать сведений о подразделении

іммтші* і ***** шштштш

I Регистрация информации об организации '■'•■ Регистрация категорий- , •' і ’

I Печать сведений об ооганоации *; Помещение файлов і,, j

Рис. 4:3. HTML-макет формы главного меню

і:Рєгистр&іий ййФорйШи об ^ Регистрация категорий:: і - л

ШййгсайШ

: Печать сведений об организации ;і ПонеіЦение Файлов (

Рис. 4.4. Конечный результат — главное меню как элемент интерфейса

рабочей системы

Резюме

Резюме

1. Интерфейс программного продукта проходит четыре этапа создания: бумажный прототип, электронный прототип, макет интерфейса и собственно интерфейс.

2. Бумажный прототип — нарисованное от руки первое внешнее представление программного продукта.

3. Электронный прототип — версия бумажного прототипа, выпол­ненная в каком-либо графическом или текстовом редакторе.

4. Макет интерфейса — интерфейс, который выглядит как ре­ально работающая система. Это эмуляция работы.

5. Собственно интерфейс — конечная цель разработки интер­фейса.;