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

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

(

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

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

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

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

*‘51.

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

СЛ«ГЄ^£

°'сЛ

Der~

ИІ^.

і

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

’ • /: .ЦдЦр ^cd. Olg

„Vet*"

5 «..< Сл-.^г%<й,

mo t. sv> ...

r -

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

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

46

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

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

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

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

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

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

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

Главное меню

Сотрудники

Подразделения

Регистрация информации о сотруднике

Регистрация информации о подразделении

Поиск информации о сотруднике

Поиск информации о подразделении

Печать сведений

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

Организации

Дополнительно

Регистрация информации об организации

Регистрация категорий

Поиск информации об организации

Архив отчетов и бланков

Печать сведений об организации

Помещение файлов

Рис. 4.2. Электронный прототип интерфейса. Пояснения и пометки уже вынесены и на данном рисунке не приводятся

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

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

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

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

48

і шчкнмжжз

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

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

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

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

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

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

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

^ SnnielTompanyPhonRBook. com - Microsoft Internet їкріогег

BSB

j!3© Ettt Sew Favorites Tools Цф

■ * і

1©** - o * s a

,^Dsearch •^‘Favorites ^Medto ^

jft&iressj ht^://SomeCornpariyPhoneBook. ccim

ilBa 1

Главное мено.

Г Г паені

е меню j

. Регистрация инбовмаиии 6 сотруднике 1

Ретсшаиия инботаиии о подоаідележи

■ Печать еведеіій е сотруднике :! Печать сведений о подразделении j

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

ШййгсайШ

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

Ш.

f! і ІЯ^сотДег

Л

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

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

Резюме

49

Резюме

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

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

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

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

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

Добавить комментарий

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

«Попрыгунчики»

Раньше меня раздражали стандартные в MS Windows закладки, расположенные в два уровйя (рис. 11.19). Вернее, раздражали не сами закладки, а то, что при переключении с нижнего ряда на верхний они …

Читаемость текста

Путешествуя по интернету, я встречал самые разные варианты оформления текстового материала. Недавно я попал На страницу с результатами поиска по запросу «Установка унитаза» по адресу http://otdelka. hl. ru/(я делаю дома …

Так делать нельзя

Ярчайший пример того, как делать нельзя, на pashen. kiev. ua - (рис. 11.16). Форма поиска без кнопки! Вы где-нибудь еще такое видели? Мало того, что нужно догадываться о ее использовагіии, …

Как с нами связаться:

Украина:
г.Александрия
тел./факс +38 05235  77193 Бухгалтерия

+38 050 457 13 30 — Рашид - продажи новинок
e-mail: msd@msd.com.ua
Схема проезда к производственному офису:
Схема проезда к МСД

Партнеры МСД

Контакты для заказов оборудования:

Внимание! На этом сайте большинство материалов - техническая литература в помощь предпринимателю. Так же большинство производственного оборудования сегодня не актуально. Уточнить можно по почте: Эл. почта: msd@msd.com.ua

+38 050 512 1194 Александр
- телефон для консультаций и заказов спец.оборудования, дробилок, уловителей, дражираторов, гереторных насосов и инженерных решений.