В последнее время все больше возрастает спрос на новое направление проектирования - юзабилити. Под этим словом принято подразумевать умение разработать интерфейс на таком уровне, чтобы пользователь остановился на программном продукте именно вашей фирмы. На Западе эта должность существует де-факто в любом компьютерном проекте, кстати, дядя Билл в свое время сделал ставку именно на людей этой профессии (вспомните Win 95) и получил в итоге миллионы... У нас же спрос на разработчиков интерфейса невелик, но не за горами тот день, когда опытный юзабил будет цениться не меньше, чем программист. И в пользу этого говорит хотя бы тот факт, что наконец-то появились первые объявления о приеме на работу опытных проектировщиков интерфейса.
И вот основываясь на собственном опыте, мы решились вам предложить рассмотреть некоторые азы по этой теме. Итак, приступим, всего существует 7 основных принципов разработки ориентированного на пользователя приложения: 1. Командует пользователь. Данный принцип основан на психологическом факторе, присущем как пользователю, так и человеку вообще. Индивиду не нравится, когда им командуют. Пользователю, решающему в приложении какую-либо задачу, необходимо создать полную иллюзию управления программой. Интерфейс позволит человеку не только следить за процессом выполнения некоего действия, но и прервать его. Непременно необходимо учитывать индивидуальные особенности пользователя, т. е. при разработке небольшой локализованной программы (сосед попросил написать :-)) программист должен контактировать с потребителем его продукта. Когда решается некая длительная задача и окончательный результат еще не получен, неплохо, если приложение станет информировать юзера о том, что происходит в данную минуту. 2. Наглядность интерфейса. Пользователь должен иметь возможность манипулировать объектами в среде приложения. Неплохо, если они (графические элементы) будут ему понятны и станут нести в себе информацию о том, что это такое и что произойдет, если выбрать или произвести действие над каким-то объектом. Иллюстрация этой идеи - панель быстрого доступа Word'а. Что еще, кроме как сохранение файла, можно ожидать от кнопки с изображением дискеты? Надо, чтобы пользователь имел наглядное средство отображения информации на различных этапах решения задач, он должен видеть, как его действия влияют на объекты, расположенные на экране. 3. Единообразие. Это один из важнейших применяющихся при разработке интерфейса принципов, который базируется на следующем: выполняя реальную работу, пользователь понимает, как работает определенный элемент интерфейса, и в дальнейшем в подобных ситуациях будет действовать по аналогии. Чтобы облегчить освоение работы в приложении, необходимо применять одинаковые графические элементы, в большинстве случаях они похожи на Microsoft'овские. Естественно, предполагается, что для проектных решений используются общие инструментальные средства. 4. Терпимость к пользователю. Приложение должно проектироваться таким образом, чтобы пользователь его не боялся и в любой момент мог получить помощь, контекстную справку или подсказку (как же утомили все эти всплывающие по F1 окна с фамилиями авторов). Безусловно, юзеру нужно дать возможность экспериментировать в приложении (нажатие любых кнопок, изменение настроек и т. д.), избавить его от тупиковых ситуаций, все последствия экспериментов должны быть исправимы, а в лучшем случае еще и обратимы. Одна из основных функций подсказок - предупреждение о том, что может воспоследовать после того или иного действия. Если манипуляции юзера могут привести к уничтожению важной информации, сделайте все возможное, чтобы предотвратить ситуацию, когда это может быть сделано по ошибке или невнимательности. Целесообразно иметь настройки для отключения подсказок - для пользователей, уже освоившихся с приложением. 5. Обратная связь. Пользователь всегда должен знать, работает приложение или зависло, то есть обязательно предоставлять информацию о том, что происходит в данный момент на компьютере. Нельзя допускать, чтобы юзер более нескольких секунд ожидал реакции приложения на некоторое свое действие. Если же какая-то операция занимает много времени, предоставьте информацию о том, как протекает в данный момент процесс, для чего созданы различные графические элементы, например Progress Bar или Animate. 6. Эстетика. С приложением должно быть приятно работать. Цветовая гамма, компоновка элементов, пиктограммы (изображения в левых верхних углах окна), звуки - все должно помогать пользователю выполнить задачу. Не допустимо, чтобы нечто активно раздражало юзера. Не сбрасывайте со счетов, что цвета по-разному влияют на психологическое состояние человека. Покажите мне бухгалтера, который добровольно согласится выполнять работу в программе, использующей черные или темные тона. 7. Простота. Чтобы в последующем суметь модифицировать или устранять ошибки, приложение должно быть простым и наглядным. Легкий в освоении интерфейс, отсутствие труднозапоминающихся графических элементов, большого количества окон или диалогов, нагроможденных друг на друга - именно то, что нужно.
Теперь давайте определимся, какой будет структура интерфейса нашего приложения. Тут существуют два подхода.
- SDI (Single Document Interface) основан на использовании главного окна интерфейса как единого, появляющегося каждый раз при загрузке приложения и закрывающегося только при выходе из программы. Самый популярный продукт такого рода - архиватор WinZip, он имеет одно главное окно, в котором пользователь и производит все свои действия.
- MDI (Multi Document Interface) - многооконный интерфейс предполагает возможность работы с несколькими документами, в том числе с их дубликатами или копиями. Основной представитель - программы из Microsoft Office.
Вот мы и определились с тем, что же мы хотим получить на выходе, теперь приступаем непосредственно к разработке интерфейса. Что необходимо создать в первую очередь? Нет, не справку о том, какой замечательный Вася Пупкин написал эту программу, а основное окно приложения. Кстати, каждое окно в правом нижнем углу должно иметь элемент растяжки. Если данные не помещаются в рабочей области полностью - используют вертикальный или горизонтальный скроллинг, однако это не желательно, ибо затрудняется ориентация пользователя. В полосу заголовка программы нужно включить пиктограмму, которая должна отражать специфику выполняемого в данный момент действия. Любое окно, вызываемое из главного, является вторичным и содержит оригинальный заголовок через символ "-". Дочерние окна второго и последующих уровней также могут включать заголовки с аббревиатурами, определяющими вложенность окон. В случае MDI на втором уровне используются пиктограммы документов, с которыми юзер в настоящее время работает в приложении.
Следующим шагом при проектировании интерфейса является моделирование меню, которое отвечает за выбор задач приложения и переход от одной части программы к другой. Не стоит изобретать велосипед заново, ведь, например, в Windows уже давно некоторые пункты меню стали стандартом де-факто ("Файл" - "Открыть" etc.).
Количество пунктов главного меню должно соответствовать числу основных решаемых задач, а для выпадающего - подзадач. Желательно, чтобы название опций состояло из одного-двух слов. Порядок следования опций как главного, так и выпадающего меню определяется частотой ее выбора. Чем чаще она востребована, тем левее размещено ее название, тем выше она находится в списке выпадающего меню. Будь вы хоть сто раз великолепный программист, но все равно не стоит ставить About первым пунктом. Все опции выпадающего меню расположены по частоте использования, однородные подзадачи целесообразно объединять в группы, таким образом логично сформировать ряды групп опций, разделителем отделенных от соседней. При использовании каскадного меню происходит уточнение подзадачи, ведущее за собой дополнительный диалог, введение новых параметров, выбор варианта из предлагаемого списка. Число уровней такого типа меню не должно превышать пяти, а для конкретных предметных областей - трех. Второй и третий уровни появляются справа и раскрываются вниз относительно выбранной опции.
Теперь обратим внимание на клавиши быстрого доступа, тут для всего приложения должны использоваться одинаковые принципы. Мой вам совет - излишне не экспериментируйте, воспользуйтесь всем привычными "Ctrl" и "Alt".
Конечно, программка, отображающая на экране бегущий индикатор и надпись "format c: complete", вам очень понравится, но в серьезном проекте нужно, чтобы пользователь взаимодействовал с вашей программой. А для этого пригодятся различные компоненты, обобщенно называющиеся "органами управления приложением". Рассмотрим их подробнее.
- Командные кнопки (Button). Так официально называются самые обычные кнопки в окошках. И действительно, как только вы на них нажали, на экране нечто отразится - кнопка как бы нажимается, после чего отображается другая картинка или происходят изменения в активной области. Не пренебрегайте и графическими изображениями, семантически связанными с действием, происходящим после нажатия, которые невозможно истолковать двояко. Пример неудачного использования графического изображения есть даже в MS Office: ну, не могу я понять, какое отношение имеет карандаш к построению таблицы, лично у меня он вызывает ассоциацию с черчением или, в крайнем случае, с рисованием.
- Кнопки развертки окна. Обратите внимание на кнопки в правом верхнем углу экрана. Многие программисты забывают о том, что не у всех пользователей есть 14" мониторы. Поэтому при попытке развернуть программу на большем разрешении она теряет свою привлекательность из-за несимметричности. Случается, что приложение пишется на 21" мониторе, в этом случае напрочь забывают про бедных пользователей, которым не по карману купить такую дорогую игрушку.
- Радиокнопки (Radio Button). С помощью этих элементов окна пользователь сможет выбрать из нескольких связанных между собой вариантов значений одно.
- Компоненты отображения дерева (TreeView/ListView). Вам нравится Windows Explorer Shell? Думаю, если принять во внимание наглядность отображаемой информации, то да. Где еще можно увидеть упорядоченные списочные структуры пиктограмм любого удобного вам размера или оформленные в виде таблицы? Разве не удобно бродить по диску с помощью дерева каталогов? Так почему вы готовите такой печальный удел своему пользователю - пытаться что-то набирать по памяти в ваших полях для ввода пути? Перечислим только некоторые преимущества дерева:
- возможность раскрытия иерархии последующих слоев;
- сворачивание всех иерархических компонентов в верхний слой;
- визуальные линии, отображающие ветви и ствол дерева;
- пиктограммы подзадач, в данном случае - пиктограммы файлов и папок на диске.
- Страничный компонент с закладками (TabControl/PageControl). С его помощью можно организовать меню, при этом основные операции будут выполняться в той форме, которая откроется пользователю при выборе закладки. В отличие от главного либо выпадающего меню, число операций производимых юзером ограничено размерами компонента.
