CC BY
288
Разработка графического пользовательского интерфейса
Лукьянов Д. В.
МИЭМ, каф. ИТАС
Идея первого графического пользовательского интерфейса находит свое практическое воплощение в исследовательском центре (Palo-Alto Research Center) в 1973 году. Одним из плодов сотрудников PARC становится концепция WIMP -Windows, Icons, Menus, Point-n-Click. И сегодня, более чем тридцать лет спустя, мы следуем этой концепции, практически ни на йоту не отходя от ее "генеральной линии".
Свежеизобретенный графический интерфейс нашел применение в компьютере Alto. Он имел черно-белый CRT-монитор, установленный в "портретной" ориентации, трехкнопочную мышь, аппаратные и программные средства для работы с Ethernet и, конечно, графический интерфейс, отвечающий парадигме WIMP.
Следующую графическую рабочую станцию под названием PERQ представляет компания Three Rivers Computer Company в 1979 году. В связи с тем, что одним из основателей компании являлся Брайн Роузен, входивший в состав создателей Xerox Alto, PERQ был его концептуальным потомком. Основным нововведением стало использование «альбомной» ориентации дисплея, ставшего сегодня стандартом. (В 1986 году компания Three Rivers Computer Company покинула компьютерный рынок, не выдержав конкуренции).
В 1981 году компания Xerox совершает еще один прорыв в плане графического интерфейса в комерческом приемнике Alto - Star. Монохромный CRT-дисплей имеет расширение 1024х768 пикселей, применяется технология «двойного клика» к иконком, окна могут перекрывать друг друга, используются диалоговые окна. На данный момент основные черты интерфейса Star применяются в любой графической среде пользователя.
В 1983 году компания Apple выпускает свой первый компьютер Lisa с графическим пользовательским интерфейсом. Так же в этом году появляется
графическая оболочка под названием Visi On разработанная компанией Visi Corp для IBM PC.
1984 год знаменуется анонсом графической подсистемы X Window system (Project Athena), родившейся в недрах MTI, Массачусетского технологического института, и с тех пор ставшей основной графической системой для ОС семейства Unix. Помимо основной задачи - отображения графических примитивов - X Window позволяет удаленную работу посредством сети. Пользователь за локальным терминалом работает лишь с вводом и выводом для X Window, сама же система выполняется на другом компьютере.
Так же в этом году Apple выпускает свой по настоящему успешный продукт Macintosh. В нем воплощена идея Apple - так называемая Desktop Metaphor, согласно которой отдельные файлы представляются как листы бумаги, а каталоги файловой системы - как папки для этих листов. Следуя Desktop Metaphor, монитор отображает пользователю "рабочий стол", на котором можно разместить, например, файлы и папки. Их содержимое может быть открыто в окне и иметь вид обычного бумажного документа.
В 1985 году появляется первая версия Windows от компании Microsoft. К особенностям можно отнести невозможность расположения окон внахлест, а только изолированно друг от друга и выделения внизу экрана особой области для иконифицированных окон программ, недоступной для размещения прочих элементов интерфейса.
Так же 1985 год ознаменован запуском торговой марки Amiga компании Commodore.
В период с 1986 по 1994 г. появляются такие системы, как RISC OS, OS/2, NeXTSTEP, Photon microGUI и т.д., так же параллельно развиваются и исчезают уже описанные системы.
1995 год ознаменован выходом Windows 95. Можно сказать, что Windows 95 предложила самую удачную модель интерфейса, что и неудивительно - над его созданием, помимо программистов, работали психологи, биологи, физиологи и представители других профессий, на первый взгляд совершенно не связанных с информационными технологиями. Для огромного количества людей Windows 95
и с» и ТТ U 1 U
оказывается первой операционной системой. И не случайно интерфейсы всех последующих версий Windows схожи между собой - так большинству из нас легче ориентироваться при работе.
Так же в этом году выходит в свет BeOS.
1996-1999 гг. Время застоя в истории оригинальных интерфейсов. Новинки со значительным ростом вычислительных мощностей аппаратуры представляют собой по большому счету лишь последующие версии хорошо известных решений.
В эти же годы происходят значительные подвижки в деле придания операционным средам семейства Unix "человеческого лица" - об этом свидетельствуют новорожденные интегрированные среды KDE и Gnome версий 1.0. Поистине эпохальный шаг, ведь прежде вся работа в Unix-системах и их клонах сводилась к оперированию большим числом по сути разрозненных программ, каждую из которых подчас приходилось настраивать отдельно. Еще не существует таких привычных сегодня вещей, как, например, общий буфер обмена данными (clipboard). А KDE и Gnome развиваются параллельно, являя пример здорового соперничества: подход к разработке подразумевает совершенно безболезненное использование интересных наработок из лагеря конкурентов. На сегодня, пожалуй, эти графические
среды предоставляют наибольшие возможности настройки "под себя" - как конструктор, из которого пользователь волен собрать интерфейс по душе.
В наше время довольно сложно освежить графический пользовательский интерфейс. "Декорации" достигли немыслимого уровня - оттенение и полупрозрачность окон на рабочем столе, полноценное задействование для отрисовки элементов интерфейса мощнейших возможностей 3Б-акселераторов, различные мигания и затухания, 3-х мерное размещение объектов на экране и т.д.
Из рассмотренных выше операционных систем и оболочек на сегодня можно выделить лишь 3, это Windows, Mac OS X и KDE/Gnome.
Возникает вопрос, почему?
Конечно же, многое зависит от маркетинговой деятельности компании, предустановленной операционной системы на новые компьютеры и ноутбуки, количество сторонних программ написанных под эту операционную систему и т.д.
Но так же немаловажной частью является простота и удобство в использовании. Наличие интуитивно понятного пользовательского интерфейса.
Что же такое интерфейс?
Интерфейс - это совокупность средств, методов и правил взаимодействия (управления, контроля и т. д.) между элементами системы.
Пользовательский интерфейс - это разновидность интерфейсов, в котором одна сторона представлена человеком/пользователем, другая — машиной/устройством. Представляет собой совокупность средств и методов, при помощи которых пользователь взаимодействует с различными, чаще всего, сложными машинами, устройствами и аппаратурой.
Графический пользовательский интерфейс - это разновидность пользовательского интерфейса, в котором элементы интерфейса (меню, кнопки, значки, списки и т. п.), представленные пользователю на дисплее, исполнены в виде графических изображений.
В отличие от командной строки, в графическом интерфейсе пользователь имеет произвольный доступ (с помощью устройств ввода — клавиатуры, мыши, джойстика и т. п.) ко всем видимым экранным объектам (элементам интерфейса) и осуществляет непосредственное манипулирование ими. Чаще всего элементы в графическом пользовательском интерфейсе реализованы на основе метафор и отображают их назначение и свойства, что облегчает понимание и освоение программ неподготовленными пользователями.
На данном этапе развития технологий можно выделить 3 основных вида устройств и технологий, использующих дружественный пользовательский интерфейс.
• WEB (интернет сайты)
• Настольные компьютеры и ноутбуки
• Мобильные устройства
Эти 3 группы разделяются не только по типу устройств, но и по основным функциям и задачам, которые они решают.
Для начала рассмотрим WEB, так как это единственная технология в этом списке.
Всемирная паутина или интернет (World Wide Web) - это распределенная система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету. Всемирную
паутину образуют миллионы web-серверов. Большинство ресурсов всемирной паутины представляет собой гипертекст.
Гипертекстовые документы, размещаемые во всемирной паутине, называются web-страницами.
Несколько web-страниц, объединенных общей темой, дизайном, а также связанных между собой ссылками и обычно находящихся на одном и том же web-сервере, называются web-сайтом. Для загрузки и просмотра web-страниц используются специальные программы — браузеры.
В интернете можно найти практически все. От развлекательных сайтов до научных конференций, множество форумов, досок объявлений, социальные сети, интернет-магазины, сайты знакомств и т.д.
Что же нужно сделать web-разработчику для того, что бы заинтересовать посетителей. В первую очередь - это информативное наполнение сайта, хороший дизайн, реклама.
В рамках данной статьи рассмотрим ключевые правила разработки web-сайта:
• Не раздражать пользователя (Избегать выскакивающих окон, звука и тп.)
• Хорошая навигация по сайту (Пользователь должен иметь возможность найти интересующую его информацию в пределах 3 кликов)
• Правильный выбор цветов (Подбирать цвета с учетом того, что бы пользователю было удобно и приятно читать текст)
• Контакты на передний план (Пользователь чувствует себя более комфортно, если знает, что у сайта есть обратная сторона, с которой можно связаться)
• Сохранения стиля на всем сайте (Избегать ситуаций, когда пользователь курсируя по вашему сайту попадает на страницы, с разными шрифтами, стилями, цветами фона и текста)
• Следить за содержанием (Что бы пользователь вернулся, следует держать информацию на сайте актуальной, часто обновляемой и востребованной)
• Очевидность (Пользователь должен сразу понимать, что это за сайт и чему он посвящен)
• Маленькое время загрузки (Не перегружать страницы сайта графикой)
• Тестирование
Все эти правила основаны на главной задаче веб-сайта, а именно представление информации пользователю.
Рассматривая разработку приложений под мобильные платформы, часть правил сохраняется, но приоритет смещается из-за особенностей устройств. Во-первых, ввод данных (рассматриваются устройства с сенсорным дисплеем). Во вторых, задачи, которые решают приложения.
Основные правила создания интерфейса для мобильных устройств:
• Хорошая навигация (Удобная, простая и красивая навигация по приложению)
• Не раздражать пользователя (Избегать выскакивающих окон, звука и тп., или хотя бы обеспечить пользователя возможностью отключить их)
• Простота использования (Пользователь должен интуитивно понимать, как пользоваться вашим приложением)
• Следить за производительностью (Задержка выполнения даже на 1 секунду, может повернуть ваших пользователей в сторону конкурента, если задержки неизбежны, пытайтесь замаскировать их ненавязчивой анимацией (максимальное время задержки зависит от типа приложений))
• Учитывать расположение экрана (Пользователь может держать свой девайс в руках, как вертикально, так и горизонтально, обеспечьте его всеми возможными вариантами)
• Учитывать сенсорный дисплей (При проектировании элементов управления, нужно учитывать, что разработка ведется под мобильные устройства и нажимать на нее придется не мышкой, а пальцем, поэтому размер кнопок и ссылок должен быть соответствующий)
• Учитывать размер экрана (Размер экрана мобильных устройств ограничен, используйте его разумно)
• Учитывать разные платформы (Наиболее популярны на данный момент операционные системы для мобильных устройств, это Android и iOS, язык программирования, элементы управления и восприятие приложения пользователем отличается)
Прежде, чем перейти к основным правилам проектирования интерфейса для ПК, определим разницу между ПК и мобильными устройствами, влияющую на интерфейс и приоритетные функции:
1. Размер экрана.
Сложно представить телефон или планшет с дисплеем существенно больше, чем 10 дюймов, в то время как мониторы компьютера начинают варьироваться от 10-13 до 100+ дюймов, то есть, пользователь может подобрать себе монитор в зависимости от поставленных задач, таких как: обработка текста или обработка изображений и видео.
2. Технические характеристики.
Размер жесткого диска, оперативная память, тактовая частота процессора, сеть и д.р. Несмотря на то, что разработчики мобильных устройств очень преуспели в этой области, все же сложно сравнивать настольный компьютер и телефон по этим характеристикам.
3. Приложения.
За счет разницы в технических характеристиках, персональные компьютеры могут работать с довольно ресурсоемкими приложениями, в отличии от телефонов, такими как: обработка аудио и видео, издательские системы, крупные корпоративные приложения.
4. Ввод данных
Для ввода данных персональный компьютер оснащен клавиатурой и мышкой, мобильные устройства сенсором (рассматриваются сенсорные устройства), хотя у некоторых моделей существует возможность подключения дополнительной клавиатуры, но в рамках данной статьи мы не берем это в расчет, так как это не общая тенденция. Скорость ввода на клавиатуре составляет в среднем 150-200 символов в минуту, а может и превышать 600 символов. Такая скорость достигается за счет «слепого» метода печати, когда человек не смотрит на клавиатуру. (для удобства 2 кнопки, русская «А» и русская «О» снабжены специальными выступами, для правильной постановки рук, так же пользователь «чувствует» куда он нажимает) На сенсорном экране не предусмотрено специальных средств, для упрощения ввода текста.
5. Тип интерфейса
За счет размера экрана мобильных устройств и ПК, отличается и тип построения интерфейса. Интерфейс мобильных устройств использует весь дисплей для отображения одной экранной формы в отличии от компьютера, который запускает
приложения в отдельных окнах, что позволяет одновременно работать с несколькими приложениями.
Сформулируем основные правила проектирования успешного приложения для персонального компьютера.
1. Облегчение ввода данных.
При разработке ПО не стоит пренебрегать, так называемой, «защитой от дурака». Для большинства программ, использующих базу данных, критично важен ввод корректных данных, а это почти 100% коммерческих программ. Поэтому, при возможности, следует пытаться обеспечить пользователя полями для ввода данных с выпадающим списком значений. Во-первых, это обеспечит ввод правильных данных, во вторых, облегчит работу пользователя. В среднем человек может вспомнить от 2 до 3 тысяч слов, а узнать из списка больше чем 50 тыс.
2. Использовать стандартные названия и графические элементы. Не стоит увлекаться вводом новых терминов и графических иконок элементов управления. Пользователь, начиная осваивать новое приложение, основывается на предыдущем опыте работы с другими успешными приложениями. Так что, использование зарезервированных слов и графических элементов значительно упростит и ускорит освоение пользователем вашей программы.
3. Обратная связь Программа должна поддерживать обратную связь с пользователем. При выполнении операции более 5-10 сек. желательно выводить информацию для пользователя о примерном времени выполнения операции или отображать процесс выполнения графическими средствами. С другой стороны, навязчивая обратная связь, может усложнить пользователю работу с программой. Следует очень осторожно использовать всплывающие окна и звуковые сигналы, так как в первое время это может показаться забавным и интересным, но при прошествии времени, это будет только нервировать. Для примера, в окне регистрации, при заполнении формы вам будет выскакивать всплывающие окно с сообщением о результате (ошибка или успешное выполнение) или приятный голос будет сообщать, что пользователь успешно добавился. Это может показаться нормальным, при разовом использовании, но представьте сотрудника, в обязанности которого входит регистрация заказов. За рабочий день их может быть больше 100. Через неделю использования этой программы, всплывающие окна или звуки будут казаться уже более раздражающими, чем информативными.
4. Понятный текст. Не стоит пытаться написать роман, так как информацию с экрана монитора пользователь воспринимает совершенно иначе, чем с листа книги. Так же не надо пытаться сократить сообщения до минимума, так как оно может быть понятно только вам, а не конечному пользователю. Текстовые сообщения должны быть сжаты и понятны.
5. Распределенное представление данных. Современные приложения предоставляют пользователю множество возможностей. Для проектировщика ПО одной из главных задач является выявление уровня важности и используемости функций. Наиболее значимые модули следует выводить на первый план, в то время как малоиспользуемые «прятать». Из известных мне программ больше всего подойдет ERP система SAP Business One. Так как пользователями этой программы являются все
сотрудники организации, то на первый план вынесены только модули системы в виде меню, такие как «Администрирование», «Продажа», «Склад» и т.д. При открытии данного модуля, раскрывается меню второго уровня, детализирующее намерения пользователя «Предложение», «Заказа», «Продажа» и т.д.
6. Объединение ячеек ввода. При проектировании форм ввода данных следует стараться выделять схожие типы данных и располагать элементы управления последовательно. Так же может быть полезно выделение цветом групп данных связанных по смыслу.
7. Прослеживание пути. В объемных корпоративных приложениях пользователю предоставляется
__гр о « Л
многоуровневая структура. 1 о есть, для выполнения действия, нужно пройти 23 или более модулей, для получения нужного функционала. Что бы пользователь ни запутался в программе и не забыл, как он попал на это окно, следует прослеживать и выводить путь пользователя на экран. Например, выводить путь в заголовке окна, например «Администрирование-> Пользователи-> Добавить пользователя». Так же следует стараться избежать многоуровневой вложенности. Оптимальное число вложений 2-3 уровня.
8. Поддержка клавиатуры При вводе данных в несколько полей пользователем требуется время, что бы перенести руку от клавиатуры к мышке для переключения на следующее поле, поэтому следует обеспечить выполнение этих действий средствами клавиатуры. Современные среды разработки автоматически выполняют данные функции, но разработчику все равно нужно проследить за логичностью и правильностью этих действий.
9. Разумное использование модальных и немодальных диалогов. Модальные дилогии следует использовать, когда поставлена конечная задача, необходимая для дальнейшего функционирования приложения. Например, «Открытие/сохранение/закрытие файла». Немодальные диалоги используются для заданий с нефиксированной продолжительностью. Старайтесь, что бы пользователь работал не более чем с 3 немодальными окнами одновременно. Если выйти за эти рамки, то пользователю придется тратить массу времени на управление открытыми окнами.
10. Ограничение пользователя. Программой должен управлять пользователь, а не программа пользователем. Не стоит чрезмерно ограничивать действия пользователя сереющими и чернеющими элементами управления.
11. Определение фонового цвета и цвета элементов управления Выбор цветовой гаммы для приложения может повлиять на работоспособность пользователя. Поэтому при выборе фоновых цветов следует учитывать воздействие, каждого конкретного цвета на психику и работоспособность пользователя.
12. Интуитивная простота. Используя вышеуказанные правила, следует стараться сделать приложение интуитивно понятным. То есть, при первом запуске пользователем приложения, он должен сам понять, основываясь на свой предыдущий опыт, что и как делает приложение.
13. Учитывать особенности операционной системы. Следует учитывать ту операционную систему, под которую проектируется программное обеспечение. Каждая операционная система имеет свои особенности, которые следует учитывать.
14. Тестирование.
Одним из основных этапов проектирования приложения является тестирование, на котором определяются ошибки и недочеты.
В завершении статьи стоит рассказать о соотношении затрат на тестирования юзабилити и качестве этого тестирования.
Тестирование
Тестирование программного обеспечения - процесс исследования программного обеспечения с целью получения информации о качестве продукта.
В настоящее время существует множество способов и средств, для автоматизации тестирования, которые проверяют большую часть функционала приложения. Но ни одна программа не сможет оценить внешний вид и удобство использования приложения.
Для проведения тестирования юзабилити используются выборки. Выборка - это совокупность людей или объектов выбранных из общей численности интересующихся и принимающих участие в исследовании. Самым простым методом выборки является «рандомный» метод, когда все потенциальные пользователи имеют одинаковые шансы быть отобранными для участия в тестировании.
Размер выборки определяется в балансе стоимости и желаемого уровня точности. Исследования компании Classic System Solutions показали, что первые 5 участников тестирования находят около 85% ошибок, на остальные 15% требуется еще порядка 10 участников тестирования.
Следовательно, проведение тестирования, с использованием маленькой выборки, оказывается гораздо более экономически выгодным. На сэкономленные деньги можно провести дополнительные исследования на разных этапах разработки.
