Пользовательский интерфейс (часть 1)


«Встречают по одежке…» — именно так звучит народная поговорка. Сложно спорить с народной мудростью. Да и зачем? Все мы знаем, какие у нас ощущения вызывают неопрятные и неаккуратные люди, с которыми иногда приходится пересекаться или по работе, или в быту. А вспомните «вонючек» в общественном транспорте… Неопрятный кандидат на должность менеджера по продажам вряд ли будет успешен при поиске работы. В конце концов, как правило, красивые люди по жизни имеют больше поклонников и поклонниц. На красивых людей приятно смотреть. Внешний вид — это первое впечатление. И только потом ты будешь разбираться, а кто красавец или красавица по сути. Но первое впечатление зачастую предопределяет отношение к человеку в будущем или даже вообще определяет решение, будешь ли ты иметь дело с человеком или нет.

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

Как разработать аккуратный и удобный интерфейс? Существует множество литературы по проектированию пользовательского интерфейса, по его эргономике, интуитивности и юзабилити. Свои концепции предлагают все кому не лень. Но думаю, начинать нужно с того, что предлагают «законодатели мод» в индустрии программного обеспечения. Я имею в виду Apple и Microsoft. Эти авторы наиболее популярных ОС (Mac OS и Windows) и программ предлагают разработчикам все, что нужно для разработки программного обеспечения — начиная от технических возможностей (API, Фреймворки, среды разработки…) и заканчивая технической документацией, правилами и руководствами. Пользовательский интерфейс не является исключением — обе компании предлагают разработчикам фундаментальные документы с рекомендациями и правилами по разработке пользовательского интерфейса, а именно: «Apple Human Interface Guidelines» и «Windows User Experience Guidelines».

Почему важно следовать этим правилам и рекомендациям:

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

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

— Программа будет выглядеть так же современно и элегантно, как и другие программы от Apple или Microsoft.

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

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

Характеристики хорошей программы

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

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

— Привлекательная внешность. Пользовательский интерфейс программы должен выглядеть профессионально. Используйте высококачественные графические элементы, такие как иконки для панелей инструментов, иконки программы и документов. Используйте расположения элементов дизайна (диалоговые окна, панели инструментов, сообщения, вид документа и т.д.) в соответствии с «Apple Human Interface Guidelines» и «Windows User Experience Guidelines». Используйте стандартные элементы дизайна, которые предлагает ОС, такие как, меню, элементы интерфейса, диалоговые окна. Например, если система предлагает стандартный диалог для печати, то не нужно разрабатывать свое собственное диалоговое окно для печати.

— Надежность. Надежная программа представляет пользователю информацию в ожидаемом и желаемом виде. Надежная программа не допускает потерю данных и не крешится. Убедитесь, что при печати документа пользователь получает то, что он/она видит на экране. Если ваша программа работает с файлами других программ, убедитесь, что вы поддерживаете полную совместимость с форматом файлов. В противном случае, дайте пользователю знать о том, что какая-то информация будет утеряна. Убедитесь, что ваша программа способна работать в экстремальных условиях (продолжительная работа программы или функции программы, открытие, импорт больших массивов данных, работа на «минимальных» конфигурациях и требованиях). Убедитесь, что программа может воспринимать, то, что пользователь вводит.

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

— Взаимодействие. Под «взаимодействием» имеется в виду способность программы обмениваться данными (то ли своими внутренними, то ли пользовательскими) через разные среды и окружения. Речь идет о поддержке буфера обмена данными между программами, чтения и записи разных форматов файлов на разных платформах, перетаскивания объектов программы (drag-and-drop), OLE, системных скриптовых языках и инструментах (AppleScript, MSI). Избегайте уникальных форматов файлов. Если этого избежать не возможно, используйте экспорт и импорт в стандартные форматы, чтобы пользователь мог обмениваться данными с разными программами. Используйте стандартные протоколы для передачи и обмена данными.

Так, например, можно использовать возможности ОС (например, OLE на Windows и AppleScript на Mac OS) для отправки данных из вашей программы прямо в слайд программы для подготовки презентации (MS PowerPoint или Apple Keynote). Т.е. пользователь нажимает кнопку в вашей программе, в результате запускается программы для подготовки презентаций, а в ней автоматически создается слайд с вашими данными. Для пользователя это горазда удобней, чем копировать данные, запускать программу, создавать слайд, вставлять данные. Или разработайте формат файлов документа вашей программы на базе унифицированных и стандартных технологий (HTML, XML), в результате ваши файлы можно будет открывать другими программами (скажем Internet Explorer или Safari).

— Мобильность. Хорошая программа учитывает мобильность устройств и оборудования. Особенно это важно, когда все больше и больше устройств становятся мобильными. Программа, учитывающая мобильность, не загружает нерационально процессор и не разряжает зря батарею устройства, без нужды не обращается к периферическим устройствам, не меняет разрешение экрана, не «будит» компьютер из «спящего» режима. «Мобильные» программы отрабатывают присоединение и отсоединение периферических устройства. Не требуйте от пользователя держать диск в приводе для работы программы. Используйте современные сетевые интерфейсы (печать через Bonjour). Адаптируйте пользовательский интерфейс программы под малые разрешения (скажем, 1280х600 на нетбуках).

Принципы пользовательского интерфейса от Apple

Принципы я перечисляю так, как они описаны в документе с рекомендациями и правилами по разработке пользовательского интерфейса от Apple («Apple Human Interface Guidelines»). Однако, я возьму на себя смелость добавить некоторые примеры пользовательского интерфейса для лучшего понимания сути того или иного принципа.

— Метафоры. Используйте пользовательские понимания и представления из жизни (и быта) для передачи концепций и функциональности вашего программного обеспечения. Типичные примеры метафор: папка, файл, мусорник, фотография, камера, альбом.

— Отражайте пользовательские ментальные модели. Наверняка пользователи уже имеют ментальную модель, которая описывает функционал вашей программы. Такая модель возникла из жизненного опыта или в результате опыта пользователя с другим программным обеспечением. Например, как и в реальной жизни, так и на компьютере, вы наверняка отправляли почту. Соответственно, процесс подготовки и отсылки почты предопределен и ожидаем пользователем именно в таком виде. Другой пример: если вы разрабатываете программное обеспечение с элементами электронных таблиц, то наверняка пользователи будут ожидать, что поведение ваших таблиц будет похожим на поведение популярных электронных таблиц от других разработчиков (MS Excel, Numbers). Другой пример ментальной модели — это работа с фотоматериалом. Пользователи будут ожидать, что в процессе работы с фотографиями нужно будет фотографировать изображения, добавлять картинку в альбом, сортировать альбомы и фото. Если программа воспроизводит музыку, то пользователь будет ожидать возможность поставить воспроизведение на паузу и возобновить, перейти к следующему произведению, перемотать вперед или назад, составить список воспроизведения, посмотреть обложку альбома и т.д. При этом пользователи могут ожидать, что процесс будет представлен так, как это организованно в других популярных программах. Необходимо, чтобы ваша программа отвечала пользовательской ментальной модели в таких аспектах:

+ Узнаваемость. Устоявшиеся ментальные модели базируются на прошлом опыте.

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

+ Доступность. Удобный пользовательский интерфейс важен, однако также важно, чтобы пользователь имел легкий доступ к существенному функционалу программного обеспечения.

+ Обучение. Предоставляйте пользователю подсказки о том, как использовать ту или иную функциональность.

— Конкретные и подразумеваемые действия. Конкретные действия четко определяют результат манипуляции с объектом. Пример: меню содержат команды, которые могут применяться к выбранному объекту. Название команды четко указывает, какое будет действие, а текущее состояние объекта (активное или неактивное) указывает, актуально ли то действие в текущем контексте. Подразумеваемые действия доносят до пользователя информацию о результате действия посредством визуальных подсказок и контекста. Пример: перетаскивание (drag-and-drop) иконки файла в мусорную корзину, подразумевает, что файл будет удален с компьютера.

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

+ Изменение размера графического объекта в графическом редакторе.

+ Позиционирование объекта или камеры в трехмерной сцене.

+ Перетаскивание текста в/из документа

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

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

+ Мигающий курсор. Программа готова к вводу данных.

+ Диалоговое окно с индикацией прогресса. Актуально для длительных действий (экспорт, импорт, математические вычисления, трансформации). Имеет смысл указывать, когда процесс закончится, процент выполненного действия или количество итераций, и т.п.

+ Крутящееся колесо или песочные часы. Индикация, что программа выполняет какую-либо команду. Актуально для коротких действий.

+ Мигающая панель задач (Windows) или прыгающая иконка в Доке (Mac OS X). Программа требует внимание пользователя.

+ Анимационный эффект, когда документ сворачивается в панель задач (Windows) или Док (Mac OS X).

+ Сообщения об ошибках.

+ Желтая, появляющаяся подсказка на панели задач.

— Согласованность. Согласованный пользовательский интерфейс позволяет пользователю переносить свой опыт с одной программы в другую. Используйте стандартные элементы дизайна (меню, команды, иконки и кнопки, радиогруппы, чекбоксы, и т.д).

Программа должна быть согласована:

+ с рекомендациями и правилами по разработке пользовательского интерфейса на данной платформе.

+ сама с собой. Используйте единую терминологию, названия команд, иконки, диалоговые окна.

+ с предыдущими версиями программы. Пользователи старых версий программ должны минимально переучиваться при переходе на новую версию программы. Обеспечьте совместимость форматов файлов.

+ с ожиданиями пользователей.

— WYSIWYG («What You See Is What You Get», «Что видишь, то и получаешь»). Убедитесь, что в программе, в которой пользователь может форматировать текст для печати, публиковать в сеть или записывать видео на диски, пользователь не заметит существенных различий в том, что он/она видит на экране и в том, что получится в результате работы программы. На распечатке, в сети или на диске, должны быть одни и те же данные, одна и та же форма и стиль из представления. Пользователь должен мгновенно видеть изменения, которые он/она делает в программе. Пользователь должен иметь доступ ко всем командам программного обеспечения. Все команды программного обеспечения должны быть доступны в главном меню — не добавляйте команды только в контекстное меню или в панель инструментов.

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

— Ощущаемая стабильность. Ощущаемая стабильность обеспечивается предсказуемой средой и тем, что программное обеспечение выглядит знакомо и понятно. Достигается это за счет использования стандартного вида и поведения элементов дизайна.

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

— Модальность. Модальность — это способность программного обеспечения обеспечить пользователя возможностью в любой момент делать в программе то, что пользователь хочет. Избегайте режимов, когда работа пользователя в программном обеспечении блокирована какими-то процессами. Однако есть некоторые исключения:

+ Краткосрочные режимы, когда пользователю нужно делать что-либо для поддержания некоторого режима. Пример: удерживать кнопку мышки для того, чтоб пролистать текст или удерживать кнопку Шифт для выделения текста.

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

+ Программы-установщики, созданные в виде поэтапных шагов, цель которых провести пользователя по важным этапам установки программы.

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

Примеры:

+ установка программного обеспечения, когда пользователю предлагается типичная установка по умолчанию или установка с выбором определенных компонентов программного обеспечения.

+ Опции программы. В опциях пользователь делает наиболее типичные установки для своей работы.

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

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

to be continued

Сложно быть патриотом или нация свиней?


Вчера, 9 августа, когда появилось солнышко после дождливой погоды, решил я рано утром пройтись и посмотреть появились ли уже грибы в лесу. Маршрут мой начинался на подъезде к с. Хотяновка (Киевская область) и тянулся 5-6 км вдоль Обводного канала вдоль дачных участков. Там между дачами и берегом обводного канала ельник шириной 20-50 метров. Лет 10-15 тому назад там были еще полудикие места. Тогда «Аборигенами» там были немногочисленные дачники, которые берегли свои места обитания.

From Open air pigs

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

Прошу прощения за обобщения, однако как вы сами увидите, это не единичные случаи каких-то засранцев. А это тенденция, это то, как «в среднем» отдыхают наши люди… извините, но 10-ки мест на протяжении 3 км — многовато, для случайностей. Это мое личное и твердое убеждение.

From Open air pigs
From Open air pigs
From Open air pigs
From Open air pigs
From Open air pigs
From Open air pigs
From Open air pigs
From Open air pigs
From Open air pigs
From Open air pigs
From Open air pigs
From Open air pigs
From Open air pigs
From Open air pigs
From Open air pigs
From Open air pigs
From Open air pigs
From Open air pigs
From Open air pigs
From Open air pigs