Контрольные списки
| Контрольные листы помогают удостовериться в том, что веб-сайт выполнен с учетом принципов функциональности дизайна. Обычно их используют на заключительной стадии работы в дополнение к экспертным методам для того, чтобы структурировать экспертные оценки по каким-то определенным признакам.
Нельзя получить хороший результат, если не определены критерии качества и завершенности проекта. Контрольный список (или «чеклист») это документ с перечнем требований к выполняемой работе. Каждому свойству готовой работы присваивается весовой коэффициент (например, "отсутствие грамматических ошибок — 4%"), а работа считается выполненной, если сумма коэффициентов больше близкого к сотне числа (например, 97%). Благодаря этому исполнителю не требуется волноваться по поводу качества работы — от него требуется только соблюдать все изложенные в списке требования, а заказчик может быстро проверить качество выполнения, выборочно проверив отдельные параграфы. Наличие контрольного списка увеличивает производительность работы, так как не нужно тратить время на размышления двух тематик — что нужно вообще сделать и что нужно ещё сделать. Ответ на оба вопроса уже содержится в контрольном списке. Использование контрольных списков является эффективным и экономичным средством повышения уровня качества программных продуктов. Он позволяет глобально оценить состояние проекта, тратя на это очень мало времени. Естественно, что в каждом конкретном случае необходимо разрабатывать свой собственный контрольный список, поскольку он должен учитывать специфику разрабатываемого программного средства и возможности средств разработки. Поэтому контрольные списки представленные ниже является скорее шаблоном, в котором представлены основные разделы. Контрольный список интерфейса ПООкна При проектировании было учтено, при каком разрешении, а так же размере монитора и шрифтов будут работать пользователи. Заголовки Заголовки короткие и адекватные содержимому окна. Заголовки соответствуют названиям элементов, при помощи которых окна были вызваны. Если окно вызывается элементом, не имеющим явного названия, в заголовке окна отражается название экранной формы. Дизайн окна Тип окна (модальное, немодальное, возможность минимизации/максимизации) был выбран осознанно, в соответствии с задачами пользователей. Управляющие и информационные элементы расположены достаточно далеко друг от друга (не менее 7 DLU). Информация в окне адекватно сгруппирована (связанные элементы объединены в группы). Кнопки находятся в секции, на которую они оказывают непосредственное воздействие. Терминационные кнопки (управляющие окном) расположены либо снизу в ряд либо справа в колонку. Переход от элемента к элементу внутри окна, осуществляется сверху вниз слева направо. Диалоговые окна В диалоговых окнах отсутствуют меню или инструментальные панели. Диалоговые окна открываются не в центре экрана, а в центре текущего действия пользователя. Меню Пункты главного меню Пункты меню имеют адекватные названия. Первая буква в названии пунктов заглавная. Все пункты первого уровня активизируют выпадающее меню. Каждому пункту меню назначены общепринятые горячие клавиши (выделены подчеркиванием). Раскрывающиеся меню и элементы основного меню второго уровня Все элементы начинаются с заглавной буквы. Если в меню используются пиктограммы, они расположены слева от названия пункта меню. Все списки содержат более одного элемента. Высота меню не превышает размер экрана (меню не нужно прокручивать). Пункты меню адекватно сгруппированы. Осмысленно использованы разделители в меню. Пункты меню расположены в порядке связанности выполняемых функций, частоте использования, важности. Используются не более двух подуровней меню. Каждый пункт меню имеет соответствующую горячую клавишу. Название пункта меню соответствует названию вызываемого окна. Пункты меню, открывающие диалоговые окна, обозначены в конце многоточием (…). Недоступные пункты меню обозначены серым цветом шрифта. Всплывающие меню Каждому пункту всплывающего меню соответствует аналогичный пункт в основном меню. Инструментальные панели Каждому элементу инструментальной панели соответствует всплывающая подсказка. Элементы упорядочены и сгруппированы в соответствии с задачами пользователей. Для стандартных действий используются общепринятые графические элементы. Управляющие элементы Переключатели (Check boxes) В одном окне используется не более 10 переключателей. Переключатели сгруппированы и каждой группе присвоено название. Внутри группы переключатели расположены строго вертикально. Переключатели не применяются для частого, оперативного использования. В названиях используется только позитивная, утвердительная форма. Командные кнопки Кнопки имеют краткие и ясные названия. В каждом диалоге используется не более 6 кнопок. Кнопки, выполняющие в разных диалогах идентичные функции, имеют одинаковые названия. Типовые кнопки имеют общепринятые названия и общепринятые горячие клавиши. Кнопки, вызывающие продолжение диалога в вложенных формах, обозначены многоточием (…). Недоступные кнопки имеют соответствующие атрибуты (серый цвет шрифта и т.п.). Опасные для пользователя кнопки не являются кнопками по умолчанию Редактируемые поля со списком (Сombo Box) Имеют функцию авто-выбора. Раскрывающиеся списки Высота выводимого на экран списка ограничена 3-8 элементами. Если список содержит более 50 элементов, используется фильтр или режим поиска. Если все элементы не умещаются в одном фрагменте списка, автоматически появляется полоса прокрутки. Группы элементов Каждая группа имеет осмысленное название, помимо рамки отделена от других групп и элементов свободным пространством. Подписи (Labels) Все элементы имеют подписи. Учтена возможность увеличения (уменьшения) длины подписей при использовании large fonts (small fonts). Подписи выровнены по левому краю поля (если они находятся над полем). Подписи расположены по середине высоты поля (если название находится с боку). Если элемент недоступен, подпись отображается серым шрифтом. Списки Если список содержит более 50 элементов, используется фильтр или режим поиска. Высота ограничена 3-8 элементами. Если все элементы не умещаются, автоматически появляется полоса прокрутки. Кнопки выбора (Option Buttons или Radio Buttons) В одной группе используется не более 6 кнопок. В пределах группы кнопки расположены по вертикали. Нет состояния, когда ни одна кнопка не выбрана. Последовательность расположения кнопок в группе учитывает частоту использования. Вкладки (Tabs) Названия вкладок выровнены по центру. Каждой вкладке присвоено осмысленное название. Количество рядов закладок не превышает двух. Все связанные между собой данные находятся внутри одной закладки. Кнопки, относящиеся ко всему блоку закладок, расположены за пределами блока закладок. Текстовые поля ввода (Text Box or Edit Field) Для недоступных полей используются серый цвет (название, текст и фон поля). Высота всех текстовых полей в окне одинакова. Содержимое полей выровнено по левому краю, за исключением полей с числовыми значением (напр., для вывода денежных сумм). Длина поля не меньше длины вводимых в него данных. Если в поле вводится численное значение границы диапазона выводятся во всплывающей подсказке. Порядок табуляции фокуса ввода При открытии окна фокус попадает на элемент внутри окна. Схема табуляции соответствует очередности заполнения полей (слева направо, сверху вниз). Командные кнопки включены в табуляцию. Невидимые и недоступные элементы исключены из схемы табуляции. Пиктограммы Направление теней во всех пиктограммах одинаково: слева сверху. Взаимодействие с пользователем Система, завершив какую-либо длительную операцию, пищит через встроенный динамик компьютера. Цифры, предназначенные для сравнения либо для копирования в буфер обмена, выводятся непропорциональным шрифтом. наверх к оглавлению Контрольный список Веб-интерфейсаПоказывает ли ваш сайт возможность воспринять действия пользователя? По преимуществу это касается активных (изменяющих свой вид в зависимости от положения курсора) кнопок. Всегда ли вы предупреждаете пользователя о неприятных последствиях его действий? В основном вопрос касается апплетов, но также затрагивает необходимость предупреждать пользователя о длительном ожидании загрузки станицы (если она богата графикой). Постоянно ли доступны пользователю все управляющие элементы сайта? К примеру, постоянно ли доступна пользователю вся необходимая система навигации? Вопрос относительный, т.к. единственный на данное время способ сделать что-нибудь постоянно видимым — это кадры, которые сами по себе нехороши. Корректно ли сайт печатается? Очень важный вопрос для страниц, объёмом больших, нежели 2Kb (их чаще печатают). Надо проверить, как печатаются страницы на монохромных и цветных принтерах. Если вы режете большие тексты на множество отдельных страниц, вы должны предоставить пользователю возможность открыть и напечатать весь текст одной страницей (причём без красот экранного дизайна). Если глубина вашего сайта больше 5 страниц, предоставляете ли вы возможность текстового поиска? Отсутствуют ли страницы с дизайном, отличающимся от актуального в настоящее время? Есть ли страницы с содержанием, стилистически отличающегося от обычного? Вопрос, по преимуществу, об оставшихся от прежних версий сайта страницах, которые не были переделаны в отношении дизайна либо стилистики текста. Всегда ли корректно работает кнопка Back браузера? Некоторые страницы, переданные по шифрующему протоколу, не могут быть взяты браузером из кэша и их требуется загружать заново (в лучшем случае пользователю нужно самому нажать кнопку Refresh, в худшем — производить более сложные и неочевидные действия). При повторной загрузке таких страниц может также слететь установленная в браузере кодировка (и весь русский текст превратится в тарабарщину). Избегайте делать такие страницы. Также, если у вас есть страницы с формами ввода, добейтесь того, чтобы вернувшийся на эту страницу пользователь (не важно, копкой ли Back, либо благодаря гиперссылке) нашел её со всеми своими установками (это очень экономит время, если нужно вернуться и что-нибудь поправить). Частично этот вопрос перекликается с последующим. Видимы ли все изменения в содержании и дизайне, произошедшие из-за действий пользователя? Например, если пользователь установил какой-нибудь переключатель, то во всех страницах, демонстрирующих результаты его действий, должно быть показано, что этот переключатель установлен в соответственное положение. Принципом, послужившим основой этого вопроса, является утверждение, гласящее, что любое действие пользователя должно быть отражено интерфейсом. Хорошо ли выглядит ваш сайт на низкокачественных мониторах? Хорошо ли он выглядит на монохромных мониторах, шестнадцатицветных или показывающих только оттенки серого? Если вы используете какое-либо цветовое кодирование информации, то имеются ли иные способы индикации (текст, графическое воплощение и т.д.)? Всегда ли вы используете изображения для иллюстрации (индикации) команд, возможностей либо параметров вашего сайта (если это вообще возможно)? Использует ли графика метафоры, известные пользователю по обычной жизни? Лишаете ли вы её несущественных подробностей, без пользы усложняющих её восприятие? Вообще говоря, нет никакого смысла как в абстрактных пиктограммах, так и в пиктограммах, инспирированных компьютером. Место хранения файлов можно обозначить изображением жёсткого диска, но при этом от пользователя будет требоваться знание того, как этот диск выглядит. Что неправильно, т.к. от пользователя вообще нельзя ничего требовать. Лучше нарисовать шкаф. Если вы используете более или менее трёхмерные изображения, то все ли они обладают одинаково направленной тенью? Это одна из самых распространённых дизайнерских ошибок. Так как сайт представляет собой единое пространство, множество разных источников света сбивает с толку (и смешно выглядит). Избегаете ли вы использовать цвет в значимых областях страницы, если этого не требует необходимость выделять важную информацию? Этот вопрос не относится к общему фону страницы. Используете ли вы яркие (насыщенные) цвета только в небольших областях и только при необходимости? Используете ли вы только нейтральные фоновые цвета? Если вы используете тёмный или чёрный фон, установлено ли жирное начертание текста по умолчанию (на большинстве низкокачественных мониторов, которые и составляют большинство, тонкий светлый текст на тёмном фоне проявляет несведение лучей и от этого выглядит сильно размытым)? Уверены ли вы, что ваш сайт приемлемо выглядит с любым размером системного шрифта? Многие пользователи устанавливают его размер на максимальный, отчего практически любой дизайн разваливается (лишить их такой возможности можно с помощью стилевых листов). Организована ли информация так, чтобы наиболее важные данные находились в начале страницы (чтобы их можно было прочесть в первую очередь)? Используете ли вы только командно ориентированные фразы в текстовых сообщениях любой природы (либо фразы, ориентированные на прямые действия)? Например, "Нажмите кнопку Абв, чтобы узнать результаты забегов" вместо "При нажатии кнопки Абв откроется страница с результатами забегов" или вместо "Не нажимайте кнопку Абв, если не хотите узнать результаты забегов". Сохраняется ли смысловая последовательность текста при его верстке (очень часто последовательность портится при использовании таблиц). Правильная последовательность важна для индексирующих машин, причем её значение будет возрастать в будущем (например, это важно для воспроизведения страниц синтезирующими речь системами). Стараетесь ли вы использовать кнопки с глаголами, нежели иными частями речи, например "Показать" вместо "Готово"? Установлен ли соответствующий альтернативный текст на все значимые графические изображения? Отвечает ли этот текст на один из трёх (или больше) вопросов: "Что это?", "Что это делает?" и "Что произойдет, если по этому щелкнуть?" Обладает ли ваш сайт своей справочной системой? В идеале каждый тип страницы должен обладать страницей со справочной информацией (вроде "Нажмите на эту кнопку, чтобы перейти к следующему разделу"). Различаются ли цвета у пройденных и непройденных гиперссылок? Проверили ли вы грамматику и орфографию? Убедились ли вы, что все страницы имеют корректный заголовок (title)? Отражают ли заголовки страниц (title) путь пользователя к этим страницам? наверх к оглавлению |
|
Дизайн, информационное наполнение - Александр Ширышев |
