Некоторые принципы проектирования GUI

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

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

2. Нужно сделать так, чтобы клиент чувствовал, что он контролирует взаимодействие Интерфейс пользователя должен обеспечивать возможность отмены действий.

3. Желательно предоставить клиенту несколько вариантов завершения каждой операции, связанной с интерфейсом (наподобие закрытия окна или файла), и не обращать особого внимания на его ошибки.

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

5. Нужно учитывать пространственное расположение элементов. Связанные друг с другом компоненты экрана следует размещать рядом, например в одной рамке

6. Необходимо обращать особое внимание на удобочитаемость и ясность элементов интерфейса (использовать понятные всем и простые слова!). Для передачи идей и понятий используйте активный залог.

7. Надо ограничивать количество используемых цветов. Из всего многообразия необходимо остановиться на нескольких. Чрезмерное множество цветов будет отвлекать пользователя от выполняемых им задач. Кстати, очень неплохо предоставить клиенту возможность самому изменять цвета.

8. Тем, кто подумывает об использовании цвета для выделения содержания, необходимо помнить, что пользователю не всегда легко провести ассоциацию между цветом и содержанием. Также следует знать, что некоторые пользователи (около 10% взрослых мужчин) плохо различают цвета, поэтому им будет сложно отличить один цвет от другого.

9. Как и в случае с цветами, необходимо ограничивать число шрифтов. Желательно избегать курсивов и витиеватых шрифтов. Шрифт под названием "Haettenschweiler" довольно приятен, но не стоит его использовать постоянно.

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

11. Выравнивайте компоненты и поля данных по левому краю. Это уменьшает нагрузку на глаза при просмотре экрана.

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

Обучающие материалы

Прежде чем переходить к собственно рассмотрению обучающих материалов, необходимо оговорить одну вещь: эта книга не о том, как их делать. Создание хороших обучающих материалов является сложным и многогранным делом, требующим значительного опыта и дарования. Даже лишь пытаться впихнуть это занятие в несколько страниц, было бы непростительной поверхностностью. Так что в этой книге не будет рассказано, как писать или «подавать» справочную систему или документацию, будет только описано, как интегрировать их с интерфейсом. С другой стороны, если справочную систему или документацию обычно создают другие люди, то всплывающие подсказки, например, обычно пишут дизайнеры. Так что про дизайнерскую часть работы рассказано будет.

Что нам нужно и что у нас есть

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

Базовая справка объясняет пользователю сущность и назначение системы. Обычно должна сработать только один раз, объясняя пользователю, зачем система нужна. Как правило, не требуется для ПО, зато почти всегда требуется для сайтов.

Обзорная справка рекламирует пользователю функции системы. Также обычно срабатывает один раз. Нужна и ПО и сайтам, и нужна тем более, чем более функциональна система. Поскольку у зрелых систем функциональность обычно очень велика, невозможно добиться того, чтобы пользователи запоминали её за один раз. В этом случае оптимальным вариантом является слежение за действиями пользователя и показ коротких реклам типа «А вы знаете, что…» в случае заранее определенных действий пользователей (примером такого подхода являются помощники в последних версиях MS Office).

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

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

Контекстная справка отвечает на вопросы «Что это делает?» и «Зачем это нужно?». Как правило, наибольший интерес в ПО представляет первый вопрос, поскольку уже по названию элемента должно быть понятно его назначение (в противном случае его лучше вообще выкинуть), а в Интернете — второй (из-за невозможности предугадать, что именно будет на следующей странице). Поскольку пользователи обращаются к контекстной справке во время выполнения какого-либо действия, она ни в коем случае не должна прерывать это действие (чтобы не ломать контекст действий), её облик должен быть максимально сдержанным, а объем информации в ней — минимальным.

Справка состояния отвечает на вопрос «Что происходит в настоящий момент?». Поскольку она требуется именно что в настоящий момент, она не может быть вынесена из интерфейса. В целом это самая непроблематичная для разработчиков система справки, так что в этой книге разбираться она не будет.

Система должна индицировать все свои состояния

Сообщения об ошибках. Это тема настолько многогранная, что о ней мы поговорим отдельно несколько позже.

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

Бумажная книга. На одном листе может быть сконденсировано очень много материала, легко позволяет читателю получить большой объем материала за один сеанс, наилучшим образом работает при последовательном чтении. Сравнительно плохой поиск нужных сведений. Объем практически всегда лимитирован.

Справочная карта. Отдельная краткая бумажная документация, демонстрирующая основные способы взаимодействия с системой (quick reference card). Будучи реализована на едином листе бумаги, позволяет пользователю повесить её перед собой. Хороша как средство обучения продвинутым способам взаимодействия с системой и устройству навигации в системе.

Структурированная электронная документация. Плохо предназначена для чтения больших объемов материала, зато обеспечивает легкий поиск и не имеет лимита объема. Занимает большой объем пространства экрана. Плохо подходит для показа крупных изображений, зато в неё могут быть легко интегрированы видео и звук.

Фрагменты пространства интерфейса, показывающие справочную информацию. Занимают пространство экрана, но пространство ограниченное. Отвлекают внимание, как минимум один раз воспринимаются всеми пользователями. Как правило, неспособны передавать большой объем информации.

Всплывающие подсказки. Хорошо справляются с ответом на вопросы «Что это такое» и «Зачем это нужно», при условии, что объем ответов сравнительно невелик. Поскольку вызываются пользователями вручную, в обычном режиме не занимают пространства экрана и не отвлекают внимания пользователей. С другой стороны, очень легко вызывают отвыкание — после первого же случая неудовлетворения пользователя подсказкой, пользователь перестает вызывать и все остальные подсказки.

А теперь те виды справочных систем, за которые ответственен дизайнер интерфейсов, можно разобрать более детально.

Базовая и обзорная справки

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

Эти системы справки обычно реализуются в бумажной документации. Это хорошо, но, вообще говоря, можно сделать и лучше, поскольку в последнее время появилась возможность интегрировать в справочную систему видео при помощи либо Macromedia Flash, либо Shockwave. Нет сомнений, что реклама, поданная не просто в виде текста с картинками, но в виде анимации, способна как повысить желание её просмотреть, так и повысить субъективное удовлетворение пользователей от системы. На этом уровне заниматься этим должен не дизайнер интерфейсов, а отдельный графический дизайнер. Как правило, работа эта не очень сложна (поскольку, фактически, всем содержимым этой анимации является показ сменяющих друг друга скриншотов). Сложно создать более-менее хороший сценарий (его лучше отдать профессиональному писателю). Дизайнер интерфейса в этом случае должен только составить список функций, которые нужно рекламировать.

Справка предметной области

Справка предметной области также реализуется обычно в бумажной документации, найти аргументы против такого положения вещей достаточно затруднительно. Однако, как минимум, часть её можно подавать пользователям в интерфейсе вместе с выдержками из обзорной справки (лучше динамически, a la «Помощник» из MS Office).

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

Процедурная справка

Лучшим местом для процедурной справки является выделенная справочная система. В неё, собственно говоря, она чаще всего и помещается. Вызывает, однако, сожаление тот факт, что разработчики чаще всего не привязывают темы справки к интерфейсу: когда пользователям непонятно, как выполнить нужное им действие, им приходится искать в справочной системе нужную тему. Это неправильно, тем более что технических проблем в этом нет.

Контекстная справка

Для контекстной справки заслуженно используют всплывающие подсказки (ToolTip) и, в последнее время, пузыри. Это очень правильное решение, с которым невозможно поспорить. Огорчает только практически полное отсутствие этого типа справки в интернете. Если разработчики ПО уже привыкли писать ко всем объектам и элементам управления подсказки, то для веб-дизайнеров это пока экзотика. Интересно при этом, что в интернете контекстная справочная система, как правило, более нужна, нежели в ПО — просто потому, что большинство сайтов являются однократно используемыми системами, пользователями которых являются изначально необученные люди.

Спиральность. В отличие от художественной литературы, справочные системы не предназначены для того, чтобы приносить удовольствие, более того, поскольку пользователи обращаются к справочной системе при возникновении проблем, можно смело сказать, что использование справочной системы всегда воспринимается негативно. Таким образом, следует всемерно сокращать объем справочной системы, чтобы тем самым сократить длительность неудовольствия. К сожалению, сокращение объема не приводит к полному счастью, поскольку при малом объеме справочной системы возрастает риск того, что пользователи не найдут в ней ответы на свои вопросы. Куда ни кинь — всюду клин.

Есть, однако, исключительно эффективный метод решения этой проблемы: так называемые спиральные тексты. Идея заключается в следующем. При возникновении вопроса пользователь получает только чрезвычайно сжатый, но ограниченный ответ (1-3 предложения). Если ответ достаточен, пользователь волен вернуться к выполнению текущей задачи, тем самым длительность доступа к справочной системе (и неудовольствие) оказывается минимальной. Если ответ не удовлетворяет пользователя, пользователь может запросить более полный, но и более объемный ответ. Если и этот ответ недостаточен (что случается, разумеется, весьма редко), пользователь может обратиться к ещё более подробному ответу. Таким образом, при использовании этого метода, пользователи получают именно тот объем справочной системы, который им нужен. Спиральность текста считается нормой при разработке документаций. Есть веские основания считать, что она необходима вообще в любой справочной системе. Учитывая тот факт, что разработка спирали в справке непроблематична, я рекомендую делать её во всех случаях.