Улетный интерфейс

Рассказывают, что однажды к Андрею Туполеву подошел молодой конструктор и показал свои чертежи нового самолета. Туполев едва взглянул на них и сказал: "Эта машина летать не будет". "Почему? - удивился тот. - Я все просчитал - сопротивление, аэродинамику..." "Потому что она некрасивая", - ответил Туполев.

На рынке shareware-программ сегодня настолько тесно, что яблоку некуда упасть. Какой бы продукт вы ни взялись продавать, у вас непременно найдутся конкуренты. Чтобы привлечь внимание покупателей к программе, одной только хорошей идеи мало (почти все полезные и бесполезные идеи уже кем-то реализованы) - необходимо ее воплощение на профессиональном уровне.

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

Дизайном как самолетов, так и программ обычно занимаются специально обученные этому люди. На Западе профессия специалиста по пользовательскому интерфейсу - это именно профессия, ей обучают в университетах. Однако шареварщик обычно работает в одиночку и вынужден всему учиться сам. Я хотел бы поделиться с коллегами собственным опытом проектирования интерфейсов для shareware-программ и прежде всего подсказать полезные источники информации по этому вопросу.

Лучше всего, разумеется, читать хорошие книги. На русском языке практически ничего не издается, зато книги на английском с появлением Интернета стали доступнее, чем несколько лет назад, - в частности, все можно купить на www.amazon.com. Например, классику этого жанра - "The Design of Everyday Things" by Donald A. Norman. Книга посвящена в основном дизайну дверных ручек, но, тем не менее, замечательно прививает культуру дизайнерского мышления - а это куда ценнее просто полезных советов. Стоит она всего 12,76 доллара.

Из специальных руководств самым полезным и, главное, доступным является shareware-книга (единственная в своем роде) "Task-Centered User Interface Design" by Clayton Lewis and John Rieman. Ее можно скачать через Интернет бесплатно и, если понравится, отправить авторам 5 долларов. Постарайтесь сделать и то, и (по возможности) другое, вы не будете разочарованы. Эта книга содержит массу полезных идей, которые надо просто вбить в подкорку любого программиста, как отче наш. Оригинал доступен по адресу www.acm.org/~perlman/uidesign.html. На сайте автора (http://gera.irk.ru/freeware.htm) можно взять вариант, сверстанный в Microsoft Word, - он лучше приспособлен для печати.

Тем, кто предпочитает исчерпывающие справочники обычной литературе, можно посоветовать капитальный труд "Human Factors Design Guide". Из тысячи его страниц одна глава - 150 листов - содержит перечень правил, которые необходимо соблюдать при проектировании пользовательских интерфейсов. Работа написана по заказу Федеральной авиационной администрации США, так что нетрудно догадаться, насколько подробно могут быть изложены правила в подобных документах. Именно поэтому я его и рекомендую. Файл в формате Adobe Acrobat (6 Мбайт) можно найти по адресу www.tc.faa.gov/hfbranch/hfdg/.

Второй источник информации - это собственно Интернет. К сожалению, я не знаю ни одного сайта на русском языке, посвященного данной проблеме. В России вообще крайне мало специалистов по проектированию интерфейсов, и боюсь, что в ближайшее время их не станет больше, поэтому делать подобные сайты просто некому и не для кого. Зато в "ихнем" Интернете можно найти много интересного. Например, образцы хорошего и плохого интерфейса "в картинках" на сайте www.iarchitect.com. Угадайте, продукты какой компании преобладают в разделе плохих примеров? правильно, Microsoft... впрочем, много хороших примеров - от нее же. Microsoft имеет одну из самых больших в отрасли команд по человеко-машинному взаимодействию, она фактически задает тон в интерфейсе программ для Windows, хотя не все ее новации пришлись по душе ребятам с www.iarchitect.com.

Самые цитируемые правила в учебниках по интерфейсам - безусловно, эвристики Якоба Нильсена. Он пользуется большим авторитетом и имеет свой сайт www.useit.com, на котором представлена масса интересных материалов как по Web-дизайну, так и по созданию интерфейсов (в том числе и его эвристики), а также подборки литературы и ссылки на сайты по обеим темам.

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

Будьте последовательны

Представьте себе, что каждый компьютер производители будут снабжать клавиатурой с оригинальной раскладкой клавиш. За ними невозможно будет работать - пользователи привыкли к QWERTY и ЙЦУКЕН. То же касается и программ. Для похожих функций нужно использовать и похожие формы. Иначе программа будет для пользователя одним большим сюрпризом...

Заимствуйте

Что именно? Да все! Если пользователь привык к чему-либо, он быстрее научится работать и будет получать больше удовольствия от работы с вашей программой, так как сможет использовать приобретенные навыки. Базовое заимствование - это использование стандартных элементов, общих для всех программ Windows - меню, списки, кнопки и т. п. Более тонкое - заимствование популярной метафоры. Только делать это надо осторожно. Взгляните на интерфейсы коммуникационной программы Trio Communication и записной книжки Lotus Organizer. Trio выглядит как настоящий телефон, а Organizer - как настоящая записная книжка. Только почему-то первой пользоваться можно с большим трудом, а вторая программа легка и понятна. Почему? Авторы Trio переделали все элементы управления на свой лад. Программа разукрашена до такой степени, что на обучение работе с ее оригинальным интерфейсом уходит масса усилий. Organizer же для стандартных функций использует стандартные средства.

Не возбраняется заимствовать внешний вид, команды, удачные интерфейсные решения и т. п. Хотите встроить в свою программу табличный редактор? Лучше всего, если он будет похож на Excel. Вы убьете этим сразу двух зайцев:
а) пользователю не надо будет тратить время на обучение работе с редактором; б) человек вообще чувствует себя комфортнее рядом с чем-то знакомым. Заметьте - на всех концертах зрители всегда ждут от исполнителя старых, хорошо знакомых и таких любимых песен.

Еще один плюс: этот способ позволяет легко добиться последовательности в интерфейсе. В общем - то, что доктор прописал.

Бритва Оккама

Этот философский принцип гласит: "Не множить сущности без надобности". Или, как говорят американцы, Keep It Simple, Stupid. На языке интерфейсов это означает, что:

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

Метод drag'n'drop - перетащи-и-оставь - хорошая иллюстрация этого принципа. Это абсолютно естественное действие, выполняемое одним движением мыши, с великолепной оптимизацией движений курсора и глаз просто по определению. Сам его очень люблю и стараюсь использовать везде, где это возможно.

Видимость отражает полезность

Самая важная информация и элементы управления должны быть на виду, легко доступными, а менее важная - прятаться где-нибудь в меню. Интерфейс программы должен быть построен вокруг объектов, с которыми манипулирует пользователь, и отражать состояние текущего объекта. Хороший пример - панели управления в Corel Draw 8.0. Они постоянно меняются в зависимости от того, с каким объектом в данный момент работает пользователь.

Обратная связь

Пользователь должен всегда видеть, чем сейчас занимается программа или к чему привело его действие. Если произошла ошибка, сообщение о ней должно объяснить пользователю, что именно произошло и как это исправить. Например, вот так.

Собор Василия Блаженного

Два решения, заложенных в архитектуре этого знаменитого собора, могут заметно улучшить внешний вид любой программы. Во-первых, это использование ограниченного числа основных цветов в программе - не более трех, исключая, конечно, оттенки. Хороший пример - стильный дизайн кнопок в Netscape Communicator 4.0. Во-вторых, это золотое сечение, 1:1,62 - самая приятная для глаза пропорция, ею насквозь пронизаны чертежи собора. Я сам успешно использовал ее в своей программе Chameleon Clock (http://gera.irk.ru/cham/). Ее дизайн очень понравился бета-тестерам, хотя они, конечно, и не догадывались об этом трюке.

Кошелек Миллера

Кошелек Миллера - это наша с вами кратковременная память. За один раз в нее вмещается семь плюс/минус две сущности. Соответственно группировать сущности в программе (пункты меню, закладки, опции на этих закладках и т. п.) желательно с учетом этого правила - то есть не более семи в группе, в крайнем случае - девяти.

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