Жанр: Учеба
Дизайн пользовательского интерфейса
...о в
том, что без понимания сущности происходящих в компьютере процессов
понять сущность записи невозможно. Допустим, пользователь создал
новый документ, что то в нем сделал, после чего попытался выйти из
программы. Программа спрашивает его "Сохранить документ или нет?";
тут и начинается самое интересное.
Во первых, в этом вопросе главное значимое слово непонятно. Что такое
сохранить? Где сохранить? Куда сохранить? Если же вопрос ставится
техническим языком, а именно "Записать документ на диск?", то и здесь
получается гадость: на какой такой диск?
Во вторых, что важнее, даже если пользователь понял вопрос, он все
равно не может понять, зачем документ сохранять? Как никак документ уже
имеется, сохранять его не надо.
Проблема усугубляется тем, что даже самый начинающий пользователь
знает, что если он нажмёт кнопку Ок, начнется какое то действие. А пос
кольку пользователь не хочет, чтобы действие, которого он не понимает,
начиналось, он недрогнувшей рукою нажимает кнопку Нет, после чего
программа закрывается, а файл не сохраняется.
Иной аспект той же проблемы: как научить пользователя превентивно
сохранять рабочий файл время от времени, чтобы, когда компьютер завис
нет, можно было встретить судьбу во всеоружии? Сделать это практически
невозможно, поскольку пользователь искренне уверен, что если файл есть в
компьютере, с ним уже ничего не сделается.
В результате, есть только два способа научить пользователя сохранять
файлы. Сущность первого способа состоит в научении пользователя, что
если он не будет время от времени и перед выходом из программы сохра
нять файл, у него будут проблемы. Рано или поздно пользователь начнет
. Особо неприятен в этом смысле термин "интуитивная понятность", не имею
щий, вообще говоря, никакого смысла. Чуть ли не единственными артефактами,
понятными интуитивно, являются соска и лестница. Всему остальному надо
учиться.
. Особняком стоит т. н. "синдром электрочайника", который объясняется сугубым
автоматизмом действия.
WWW.UIBOOK.RU | ВЛАД В. ГОЛОВАЧ | ДИЗАЙН ПИ: ОБУЧЕНИЕ РАБОТЕ С СИСТЕМОЙ
сохранять файл автоматически, проблема в том, что произойдет это скорее
поздно, чем рано, и вполне может оказаться, что и никогда. Этот способ
обладает определенным своеобразием: пользователь не поймет, зачем он
это делает, он будет только знать, что делать это надо. На жаргоне этногра
фов и психологов такое поведение называется ритуалом. Получившийся в
результате такого обучения ритуал не будет принципиально отличаться от,
скажем, плясок каннибалов вокруг волшебного дерева Тум Тум, чтобы не
было эпидемии: пользователь будет нажимать кнопку Сохранить в качестве
жертвы Великому Энжэмэдэ, Богу Компьютера. К слову сказать, пользова
телей, которые пользуются компьютером с помощью ритуалов, не так уж
мало.
Второй способ: пользователю можно объяснить, что в компьютере есть
две подсистемы памяти, одна постоянная, а другая временная; при выклю
чении или при зависании компьютера содержимое временной памяти
теряется, так что если документ нужен будет и позже, его надо перенести в
постоянную память; перенос туда документа называется сохранением. Это
тоже непросто, поскольку пользователь уверится, что люди, придумавшие
компьютеры, круглые дураки (ему неинтересны технологические причи
ны), но зато это знание научит его сохранять файлы. Разумеется, он ещё не
раз забудет сохранить файл, но это произойдет из за недостатка внимания.
Так вот, изначально пользователь не имеет ментальной модели памяти
компьютера. Проблема же состоит в том, что компьютер не дает ему воз
можности самому построить модель, так что единственным её источником
может являться обучение. Это один из самых больших недостатков дизайна
современных компьютеров, во всяком случае, первый компьютер без разде
ления памяти на постоянную и временную (Palm Pilot) разошелся тиражом
в миллионы экземпляров.
Таким образом, без корректной ментальной модели пользователи фак
тически неспособны научиться пользоваться системой. К сожалению, про
ектирование системы, для которой модель построить легко, есть дело слож
ное, так что придумать для него универсальный алгоритм невозможно. Но
творческий подход может помочь.
Избегайте создавать элементы управления, функциональность которых
зависит от контекста
Существует, однако, одно простое правило: поскольку элементы, выпол
няющие несколько разных функций в зависимости от контекста, сущест
венно усложняют построение ментальной модели, их лучше не создавать.
Поэтому слишком много элементов управления обычно делать лучше,
нежели слишком мало элементов, во всяком случае, опасно ставить перед
собой цель "во что бы то ни стало сократить количество элементов".
Метафора
Как было сказано, чтобы научиться пользоваться системой, пользователю
нужно построить ментальную модель этой системы. Очень хочется изба
вить его и от этой работы. Лучшим способом добиться этого является
применение метафоры, которая позволяет пользователю не создавать
новую модель, а воспользоваться готовой моделью, которую он ранее
построил по другому поводу.
Самым простым примером метафоры в интерфейсе является устройство
программ для проигрывания звуков на компьютере. Исторически сложи
лось, что вся аудиотехника имеет почти одинаковый набор кнопок:
несколько кнопок со стрелками (назад/вперед), кнопка с треугольником
(воспроизведение), кнопка с двумя дощечками (пауза), кнопка с квадрати
ком (полная остановка) и красный кружок (запись). Про них нельзя сказать,
что они совершенно понятны, но научиться им можно без труда. При этом
обычно жизнь складывается так, что сначала человек научается пользовать
ся этими кнопками на материальных устройствах, а уж потом начинает
пользоваться компьютером. Соответственно, при проектировании прог
раммы аналогичного назначения разумно скопировать существующую
WWW.UIBOOK.RU | ВЛАД В. ГОЛОВАЧ | ДИЗАЙН ПИ: ОБУЧЕНИЕ РАБОТЕ С СИСТЕМОЙ
систему маркировки кнопок. Благодаря этому пользователям для исполь
зования программы ничему не приходится учиться (и даже не приходится
переучиваться, что вдвойне обидно, поскольку полностью отрицает
возвращение инвестиций в обучение)1.
Рис. 5. Главный экран ОС Magic Cap. Будучи вся построена на метафорах, ОС приобрела
широчайшую известность среди журналистов компьютерных изданий (они сразу всё
понимали). С другой стороны, она не смогла добиться такой же любви у пользователей:
они её понимали, но отказывались с ней работать из за её неэффективности. Класси
ческий пример горя от ума. General Magic Susan Kare
К сожалению, метафоры отнюдь не безоблачны. У них есть несколько
существенных недостатков.
Во первых, не для любой функциональности можно подобрать подходя
щую метафору, причем заранее узнать, есть ли хорошая метафора или нет,
невозможно, так что можно потратить время на поиски и ничего не найти.
Это, как минимум, неэффективно.
Во вторых, даже подходящая метафора может оказаться бесполезной,
если её не знает существенная часть аудитории или её тяжело однозначно
передать интерфейсом.
В третьих, почти всегда метафора будет сковывать функциональные
возможности. Что делать, если проектируемая система обладает большим
количеством функций, чем копируемый образец? Следование метафоре в
таких условиях будет только вредить, поскольку совпадающим функциям
будет учиться легче, а несовпадающим - сложнее (они будут слишком иначе
устроены). Зачем тогда система, почему бы пользователю не воспользо
ваться её исходным образцом?
В четвертых, совершенно необязательно, что сам по себе копируемый
образец работает идеально. Если его копировать, окажется, что система не
сможет быть эффективней своего прародителя. Например, Adobe
PageMaker во многом копирует традиционные верстальные гранки, насле
дуя их известность пользователям вместе с их ограничениями. Благодаря
этому он стал чрезвычайно популярен. Однако через некоторое время
. Данный пример интересен ещё и тем, что в игру вступает стандарт (о котором
позже). Поскольку все разработчики программ для проигрывания звуков
копировали в интерфейсе материальные проигрыватели, образовался стандарт
на программы такого рода. Теперь пользователям не обязательно обучаться
значению кнопок именно по физически существующим проигрывателям, для
этого подходит и любая программа.
WWW.UIBOOK.RU | ВЛАД В. ГОЛОВАЧ | ДИЗАЙН ПИ: ОБУЧЕНИЕ РАБОТЕ С СИСТЕМОЙ
появился не копирующий гранки QuarkXpress, и отвоевал большую часть
пользователей лишь потому, что работал более эффективно, не таская на
себе груз старой идеи. Пользователи предпочитали потратить больше
времени на обучение, зато выиграть в скорости работы. Анекдотичность
ситуации заключается в том, что к настоящему времени гранки не исполь
зуются вовсе, появилось поколение пользователей, которое никогда их в
глаза не видело. Результат: обучаясь PageMaker, они должны дополнительно
обучаться идее гранок, которая им вовсе не нужна.
В пятых, почти всегда метафору можно использовать в документации, не
перенося её в интерфейс, при этом с тем же успехом. Достаточно просто
написать, что "система во многом напоминает !" и нужный результат будет
достигнут.
Таким образом, метафора, будучи лучшим средством для избавления
пользователя от обучения, не является средством хорошим. С другой
стороны, метафоры иногда всё таки работают (взять те же музыкальные
программы), так что определенную пользу от них получить можно.
Анализируя опыт успешных случаев их применения, можно вывести
следующие правила:
опасно полностью копировать метафору, достаточно взять из неё
самое лучшее
не обязательно брать метафору из реального мира, её смело можно
придумать самому
эффективнее всего метафорически объяснять значение отдельных
объектов: например, для графической программы слои можно пред
ставлять как положенные друг на друга листы стекла (этот пример
подходит и для предыдущего пункта)
если метафора хоть как то ограничивает систему, от неё необходимо
немедленно отказаться.
Суммируя, можно сказать, что применять метафору можно, но с большой
осторожностью. Не надо забывать, что большинство систем, сильно бази
рующихся на метафоре, проиграли конкурентам. Таков уже упоминавшийся
PageMaker, таковой была операционная система Magic Cap, таковой была
оболочка MS Bob, в которую было вложено множество денег, и которая
была прикрыта после нескольких месяцев микроскопических продаж (это
самые шумные падения, были и другие).
Аффорданс
Другой составляющей понятности является нечто, по английски называе
мое affordance1. Мне не удалось удовлетворительно перевести2 этот термин
(а до меня никто и не пытался), так что это понятие в книге будет
называться неоригинально: "аффорданс".
В современном значении этого термина аффордансом называется
ситуация, при котором объект показывает субъекту способ своего
использования своими неотъемлемыми свойствами. Например, надпись
"На себя" на двери не является аффордансом, а облик двери, который
подсказывает человеку, что она открывается на себя, несет в себе
аффорданс.
Польза аффорданса заключается в том, что он позволяет пользователям
обходиться без какого либо предварительного обучения, благодаря этому
аффорданс является самым эффективным и надежным средством
обеспечения понятности.
. Термин введен Дональдом Норманом (Donald Norman. The Design of Everyday
Things).
. Частично в качестве перевода подходит слово наглядность, но из за того, что в
нём упор ставится на зрение (глядеть), предпочесть его я не решился.
WWW.UIBOOK.RU | ВЛАД В. ГОЛОВАЧ | ДИЗАЙН ПИ: ОБУЧЕНИЕ РАБОТЕ С СИСТЕМОЙ
Рис. 6. Отсутствие аффорданса в дизайне кухонной плиты. Слева стандартный вариант,
недостаток которого заключается в том, что невозможно умозрительно определить,
какой диск управляет какой конфоркой. В центре и справа варианты с аффордансом,
не имеющие этой проблемы, при этом работающие по разному. В центральном при
мере расположение регуляторов повторяет расположение рабочих объектов (конфо
рок), благодаря чему неоднозначность исчезает. В правом примере каждому объекту
соответствует отдельный регулятор. Эти два способа уничтожения неопределенности
являются основными в экранном дизайне.
Проблема в том, что аффорданс на экране получить сложнее, нежели
в предметах реального мира, поскольку единственным способом его пере
дачи оказывается визуал, а такие способы, как тактильные свойства или
приспособленность к человеческой анатомии (пистолет, например, трудно
держать неправильно) оказываются за бортом. Это ограничение приводит
к тому, что доступными оказываются всего несколько способов передачи
аффорданса, из которых самыми значительными являются четыре:
маппинг, или повторение конфигурации объектов конфигурацией
элементов управления (этот способ работает хорошо в реальном мире,
но не очень хорошо на экране, поскольку предпочтительней непос
редственное манипулирование)
видимая принадлежность управляющих элементов объекту
визуальное совпадение аффордансов экранных объектов с такими же
аффордансами объектов реального мира (кнопка в реальном мире
предлагает пользователю нажать на неё, псевдотрехмерная кнопка
предлагает нажать на неё по аналогии)
изменение свойств объекта при подведении к нему курсора (бледный
аналог тактильного исследования).
В целом, создание аффордансов является наиболее сложной задачей,
стоящей перед графическим дизайнером, работающим над интерфейсом.
Область эта еще практически не разработана, так что она сулит, при удаче,
большой успех и славу. Надеюсь, что вы их достигнете.
Стандарт
Наконец, остался последний, самый мощный, но зато и самый ненадежный
способ обучения, а именно стандарт. Дело в том, что если что либо нельзя
сделать "самопроизвольно" понятным, всегда можно сделать это везде
одинаково, чтобы пользователи обучались только один раз. Например,
кран с горячей водой всегда маркируют красным цветом, а кран с
холодной - синим. Частично это соответствует свойствам человеческого
восприятия (недаром красный цвет мы называем тёплым, а синий -
холодным), но в основном здесь работает привычка1.
Как я уже сказал, стандарт штука мощная, но зато ненадежная. Он очень
хорошо работает, когда популярен, в противном случае не работает вовсе.
Так, с одной стороны, при появлении стандартизированных графических
интерфейсов количество программ на душу пользователя увеличилось на
порядок (т. е. пользователи получили возможность с тем же уровнем усилий
изучать больше программ), с другой стороны, множество хороших вещей
так и не было реализовано, поскольку в нужный момент подходящих
стандартов не было.
WWW.UIBOOK.RU | ВЛАД В. ГОЛОВАЧ | ДИЗАЙН ПИ: ОБУЧЕНИЕ РАБОТЕ С СИСТЕМОЙ
Таким образом, чтобы стандарт заработал, он должен быть популярен.
Популярен же он может быть двумя способами: во первых, он может быть
во всех системах, во вторых, он может быть популярен внутри отдельной
системы. Например, стандарт интерфейса MS Windows популярен почти во
всех программах для Windows, именно поэтому его нужно придерживаться.
С другой стороны, этот стандарт оставляет неопределенным очень многое
(никто да не обнимет необъятного), и это многое в разных системах
трактуется по разному. Бесполезно пытаться найти общий знаменатель во
всех системах, гораздо эффективнее установить собственный стандарт, не
противоречащий стандарту ОС, но дополняющий его; после чего этого
стандарта надо придерживаться.
Последовательность в реализации интерфейса есть первое условие
качества результата
Конечно, разработка собственного стандарта дело довольно тяжелое.
С другой стороны, сказать, что она совсем уж невозможна, тоже нельзя.
Во первых, самое главное уже стандартизовано. Во вторых, стандарт может
развиваться параллельно процессу разработки, при этом поддержание
стандарта не стоит почти ничего. Обширный же стандарт вполне окупает
вложенные в него усилия ускорением обучения пользователей, не говоря
уже о снижении стоимости разработки.
. Один из моих читателей рассказал мне по этому поводу поучительную историю.
Во время разговора с девушкой о космосе, читатель показал девушке Вегу,
большую, голубую звезду. При этом девушке было сказано, что если на место
Солнца поместить Вегу, то орбита Земли будет находится все еще внутри самой
звезды. Услышав это сообщение, девушка приобрела уверенность, что все боль
шие звезды есть звезды холодные, мотивировав это тем, что, дескать, кран
с холодной водой обозначается синим.
WWW.UIBOOK.RU | ВЛАД В. ГОЛОВАЧ | ДИЗАЙН ПИ: ОБУЧЕНИЕ РАБОТЕ С СИСТЕМОЙ
Обучающие
материалы
Прежде чем переходить к собственно рассмотрению обучающих материа
лов, необходимо оговорить одну вещь: эта книга не о том, как их делать.
Создание хороших обучающих материалов является сложным и много
гранным делом, требующим значительного опыта и дарования. Даже лишь
пытаться впихнуть это занятие в несколько страниц, было бы непрости
тельной поверхностностью. Так что в этой книге не говорится о том, как
писать или "подавать" справочную систему или документацию, описано
только, как интегрировать их с интерфейсом. С другой стороны, если
справочную систему или документацию обычно создают другие люди, то
всплывающие подсказки, например, обычно пишут дизайнеры. Так что про
дизайнерскую часть работы рассказано будет.
Что нам нужно
и что у нас есть
Количество подсистем справки, нужных для того, чтобы пользователь нау
чился пользоваться системой, довольно невелико, так что все их можно
легко разобрать1. Когда я говорю "подсистема справки", я имею в виду
часть справочной системы (или документации), которая выполняет сугубо
определенные функции и требует сугубо определенных методов
представления.
Базовая справка
объясняет пользователю сущность и назначение
системы. Обычно должна сработать только один раз, объясняя пользо
вателю, зачем система нужна. Как правило, не требуется для ПО, зато почти
всегда требуется для сайтов.
Обзорная справка рекламирует пользователю функции системы. Также
обычно срабатывает один раз. Нужна и ПО и сайтам, и нужна тем более,
чем более функциональна система. Поскольку у зрелых систем функцио
нальность обычно очень велика, невозможно добиться того, чтобы поль
зователи запоминали её за один раз. В этом случае оптимальным вариантом
является слежение за действиями пользователя и показ коротких реклам
типа "А вы знаете, что!" в случае заранее определенных действий пользо
вателей (примером такого подхода являются помощники в последних
версиях MS Office).
Справка предметной области отвечает на вопрос "Как сделать
хорошо?". Поскольку от пользователей зачастую нельзя рассчитывать
знания предметной области, необходимо обучать их на ходу. При этом
действуют два правила: во первых, пользователи ненавидят признавать, что
они чего либо не знают, соответственно, подавать это знание надо макси
мально "небрежным тоном"; во вторых, наличие такого знания всегда
повышает субъективную оценку справочной системы в целом, т. е. приво
дит к тому, что пользователи чаще обращаются к справочной системе и от
этого эффективней учатся.
Процедурная справка отвечает на вопрос "Как это сделать?". В идеале
она должна быть максимально более доступна, поскольку если пользователь
не найдет нужную информацию быстро, он перестанет искать и так и не
научится пользоваться функцией.
Контекстная справка отвечает на вопросы "Что это делает?" и "Зачем
это нужно?". Как правило, наибольший интерес в ПО представляет первый
вопрос, поскольку уже по названию элемента должно быть понятно его
назначение (в противном случае его лучше вообще выкинуть), а в интер
нете - второй (из за невозможности предугадать, что именно будет на
следующей странице). Поскольку пользователи обращаются к контекстной
справке во время выполнения какого либо действия, она ни в коем случае
не должна прерывать это действие (чтобы не ломать контекст действий), её
облик должен быть максимально сдержанным, а объем информации в ней -
минимальным.
. Обратите внимание, что это моя собственная классификация, вызванная к жизни
тем, что большинство существующих классификаций справочных систем
слишком тяжеловесны и размазаны.
WWW.UIBOOK.RU | ВЛАД В. ГОЛОВАЧ | ДИЗАЙН ПИ: ОБУЧЕНИЕ РАБОТЕ С СИСТЕМОЙ
Справка состояния отвечает на вопрос "Что происходит в настоящий
момент?". Поскольку она требуется именно что в настоящий момент, не
может быть вынесена из интерфейса. В целом это самая непроблематичная
для разработчиков система справки, так что в этой книге разбираться она
не будет.
Система должна индицировать все свои состояния
Сообщения об ошибках. Это тема настолько многогранная, что о ней
отдельно (см. "Каким должно быть сообщение об ошибке" на стр. 42).
Поскольку наша цель состоит только в определении интеграции
справочных систем с интерфейсом, разумно будет свести получившийся
список типов обучающих материалов, которые нам нужны, со средами
передачи этих материалов, которые у нас имеются. Среды же передачи,
имеющиеся в нашем распоряжении, таковы.
Бумажная книга. На одном листе может быть сконденсировано очень
много материала, легко позволяет читателю получить большой объем
материала за один сеанс, наилучшим образом работает при последова
тельном чтении. Сравнительно плохой поиск нужных сведений. Объем
практически всегда лимитирован.
Справочная карта. Отдельная краткая бумажная документация,
демонстрирующая основные способы взаимодействия с системой (quick
reference card). Будучи реализована на едином листе бумаги, позволяет
пользователю повесить её перед собой. Хороша как средство обучения
продвинутым способам взаимодействия с системой и устройству навигации
в системе.
Структурированная электронная документация. Плохо предназначена
для чтения больших объемов материала, зато обеспечивает легкий поиск и
не имеет лимита объема. Занимает большой объем пространства экрана.
Плохо подходит для показа крупных изображений, зато в неё могут быть
легко интегрированы видео и звук.
Фрагменты пространства интерфейса, показывающие справочную
информацию. Занимают пространство экрана, но пространство огра
ниченное. Отвлекают внимание, как минимум один раз воспринимаются
всеми пользователями. Как правило, неспособны передавать большой
объем информации.
Рис. 7. Пример пространства интерфейса, выделенный на показ справочной
информации. Обратите внимание, что даже обычная подпись к полю ввода также
является таким пространством.
Всплывающие подсказки.
Хорошо справляются с ответом на вопросы
"Что это такое" и "Зачем это нужно", при условии, что объем ответов
сравнительно невелик. Поскольку вызываются пользователями вручную, в
обычном режиме не занимают пространства экрана и не отвлекают вни
мания пользователей. С другой стороны, очень легко вызывают
отвыкание - после первого же случая неудовлетворения пользователя
подсказкой, пользователь перестает вызывать и все остальные подсказки.
А теперь те виды справочных систем, за которые ответственен дизайнер
интерфейсов, можно разобрать более детально.
WWW.UIBOOK.RU | ВЛАД В. ГОЛОВАЧ | ДИЗАЙН ПИ: ОБУЧЕНИЕ РАБОТЕ С СИСТЕМОЙ
Базовая и обзорная
справки
Как уже было показано в главе "Почему пользователи учатся", объяснить
пользователю сущность и назначение, а также отрекламировать функции
системы чрезвычайно важно, поскольку только это создаёт желание
учиться.
Эти системы справки обычно реализуются в бумажной документации.
Это хорошо, но, вообще говоря, можно сделать и лучше, поскольку в
последнее время появилась возможность интегрировать в справочную
систему видео при помощи либо Macromedia Flash, либо Shockwave. Нет
сомнений, что реклама, поданная не просто в виде текста с картинками, но
в виде анимации, способна как повысить желание её просмотреть, так и
повысить субъективное удовлетворение пользователей от системы. На этом
уровне заниматься этим должен не дизайнер интерфейсов, а отдельный
графический дизайнер. Как правило, работа эта не очень сложна
(поскольку, фактически, всем содержимым этой анимации является показ
сменяющих друг друга скриншотов). Сложно создать более менее хороший
сценарий (его лучше отдать профессиональному писателю). Дизайнер
интерфейса в этом случае должен только составить список функций,
которые нужно рекламировать.
Справка
предметной области
Справка предметной области также реализуется обычно в бумажной доку
ментации, найти аргументы против такого положения вещей достаточно
затруднительно. Однако, как минимум, часть её можно подавать пользова
телям в интерфейсе вместе с выдержками из обзорной справки (лучше
динамически, a la "Помощник" из MS Office).
На мой взгляд, справка предметной области является самой важной
подсистемой справки. Достаточно упертый или "компьютерно грамотный"
пользователь сможет воспользоваться системой, лишенной всех спра
вочных систем, более того, такой пользователь сможет даже научиться
пользоваться такой системой. Но без знания предметной области он
никогда не сможет пользоваться системой правильно и эффективно.
Процедурная справка
Лучшим местом для процедурной справки является выделенная справочная
система. В неё, собственно говоря, она чаще всего и помещается. Вызывает,
однако, сожаление тот факт, что разработчики чаще всего не привязывают
темы справки к интерфейсу: когда пользователям непонятно, как выпол
нить нужное им действие, им приходится искать в справочной системе нуж
ную тему. Это неправильно, тем более что технических проблем в этом нет.
Контекстная справка
Для контекстной справки заслуженно используют всплывающие подсказки
(ToolTip) и, в последнее время, пузыри. Это очень правильное решение,
с кот
...Поділитися у соцмережах
