Определение основных требований к проектированию интерфейса приложения на курсах по программированию для школьников

№110-1,

педагогические науки

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

Похожие материалы

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

Интерфейс очень важен для совершенно любой программной среды и является неотъемлемой ее составляющей, ориентированной, прежде всего, на конечного пользователя. Именно через интерфейс пользователь будет судить о прикладной программе в целом; более того, часто решение об использовании приложения пользователь принимает по тому, насколько ему удобен и понятен пользовательский интерфейс. Вместе с тем, трудоемкость проектирования и разработки интерфейса достаточно велика. По оценкам специалистов в среднем она составляет более половины времени реализации проекта [2].

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

Для решения поставленной задачи, в рамках курса программирования выделяет раздел «Проектирование интерфейса», учащиеся изучают основные правила верстки интерфейса и шаблоны пользовательского поведения. Каждое из правил должно сопровождаться конкретной практической реализацией, в виде поставленной преподавателем задачи по проектированию [4, 7].

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

Рассматриваются следующие правила верстки [5, 6]:

  1. Ранжирование функциональности. Необходимо определить, какие элементы играют более важную роль для пользователя на данной форме, а также в каком порядке пользователь будет с ними взаимодействовать. Второстепенные элементы управления должны быть менее заметны на форме, либо даже скрыты в дополнительной раскрываемой панели. Школьники определяют порядок, в котором будут заполняться элементы управления и располагают их на форме. Необходимо придерживаться правила: человеку удобнее читать и заполнять элементы слева направо сверху вниз.
  2. Определение размеров элементов. Каждый элемент предназначен либо для ввода, либо для вывода данных. В зависимости от этих данный определяется длина и ширина элемента формы. Учащиеся подстраивают длины элементов в зависимости от количества знаков данных вводимых или выводимых элементом окна.
  3. Группировка. Объекты с общим назначением должны быть вместе. Это облегчает навигацию для пользователя, позволяет делать работу с формой более удобной. Располагайте группы элементов таким образом, чтобы были видны их связи. Когда объекты логически организованы, снижается когнитивная нагрузка на пользователя: ему не нужно думать, как элементы связаны между собой, ведь вы все продумали за него. Расположение элементов должно советовать правилу «сильной визуальной иерархии». Сильная визуальная иерархия — это когда пользователю совершенно понятно, в каком порядке следует рассматривать визуальные элементы на экране, и он может работать с ними почти на «автоматизме». Визуальная иерархия определяет последовательность работы и плавно двигает взгляд пользователя с одного элемента интерфейса на другой. При слабой визуальной иерархии интерфейс становится сильно перегруженным и совершенно непонятным — взгляд пользователя все время прыгает по экрану и постоянно находится в сильном напряжении, пользователь потратит много времени на работу с интерфейсом, и в итоге приложение вызовет у него «отторжение».
  4. Выравнивание и отступы. Ничто так не испортит общее впечатление от приложения, как разбросанные элементы управления и элементы ввода/вывода данных. Очень сложно работать с приложением, если чувствуется дискомфорт. Для школьников определяют ряд упражнений по выравниванию элементов по предложенной схеме (применимо выравнивание по левому или правому краю, выравнивание элементов по центру чаще всего не воспринимается пользователем). Должны быть строго определены величины отступов у полей или между объектами формы. В дальнейшем, необходимо придерживаться данных правил для всех форм приложения. Должно быть некая унификация оформления.
  5. Отрицательное пространство. Понятие отрицательного пространства пришло к нам из типографии. Под ним понимается, что не стоит пытаться как можно более компактно располагать элементы на форме. Между элементами обязательно должно быть так называемое «отрицательное пространство» — свободная область, визуально разделяющая элементы. Отступы между элементами являются одним из примеров отрицательного пространства, однако иногда необходимо оставлять пустыми крупные области формы, чтобы пользователю было комфортнее работать. Школьникам предлагается следующая задача: необходимо предложенный вариант формы с компактно расположенными объектами изменить, дополнив отрицательным пространством.
  6. Помогите пользователю. В хорошем интерфейсе пользователю не требуется помощь — все и так должно быть ему понятно. Если же среда не предлагает помощь автоматически, пользователю придется самостоятельно искать ответ на свой. Добавьте помощь там, где она может потребоваться, при этом необходимо убедится, что ваши подсказки не помешают опытным пользователям.
  7. Визуальный комфорт. Необходимо задание атрибутов, которые информацию не передают, но создают комфорт и удобство; их можно объединить общим термином дизайн интерфейса: расположение сообщений на экране, их размер, цвет и т.п.
  8. Контроль ошибок пользователя. Одной из задач интерфейса является преобразование введенных данных в значения переменных приложения, а также значений переменных приложения, которые являются результатами ее работы в сообщения пользователя. Для преобразования информации в различные сообщения в составе интерфейса необходим блок интеллектуальной поддержки пользователя, который контролирует возможные ошибки, формирует объяснения, управляет системой помощи.

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

Выделим некоторые варианты шаблонов поведения [1,3, 5]:

  1. Безопасное исследование. Приложение должно позволить пользователю пробовать еще ему неизвестные функции и после вернуть систему в исходное состояние, для того чтобы он мог снова пробовать что-то новое. Если пользователь будет не уверен, что он сможет вернуть изменения обратно, он будет использовать приложение с некоторой опаской.
  2. Мгновенное вознаграждение. Данный шаблон заключается в том, что человек любит видеть результаты своих действий сразу. И если этот результат положительный, пользователь будет доволен. Интерфейс приложения необходимо проектировать таким образом, чтобы пользователь получал простой, и приятный опыт. Необходимо предугадать первые действия пользователя в вашей программе и сделать их максимально простыми. Если пользователь выполнит их и поймет, что это достаточно просто, он будет чувствовать уверенность и продолжит изучать приложение.
  3. Разумная достаточность. Очень часто при работе пользователь скорее выберет достаточно хорошее или удовлетворяющее его решение, а не наилучшее, если изучение всех альтернативных вариантов требует траты дополнительного времени и сил. В рамках работы программных интерфейсов это означает, что пользователь не будет внимательно изучать каждую кнопку вашего приложения, а просто выберет первую попавшуюся кнопку, которая, на его взгляд, решает данную проблему. Если же эта кнопка впоследствии не сделает ожидаемого действия, пользователь будет разочарован. Вследствие данного шаблона старайтесь не перегружать формы огромным количеством функций, а сами функции обозначайте максимально доступным образом — короткой понятной текстовой меткой или однозначно интерпретируемой иконкой.
  4. Изменения на полпути. Зачастую, пользователь, выполняющий какую-либо задачу, прерывается на середине и переключается на совершенно другую задачу, а значит, ему нужно предоставить возможность — откатиться на несколько шагов назад, перейти к главному окну или какому-либо другому, но при этом, по возможности, не потерять данные, если пользователь захочет вернуться к исходной цели.
  5. Отложенный выбор. Данный шаблон подразумевает, что пользователь с большой долей вероятности пропустит незначительные на его взгляд шаги для достижения более важной цели. Предоставьте пользователю возможность вернуться к отложенным полям позже. Возможность отложить заполнение тех или иных полей должна быть очевидна для пользователя.
  6. Пошаговое построение. Как правило, достаточно сложно выполнить какую-то мало-мальски серьезную работу за один раз. Человек решает любую задачу постепенно. После выполнения одного шага пользователю необходимо оценить, правильно ли он его сделал, возможно, внести поправки и только потом перейти к следующему шагу. Иногда пользователю даже приходится начинать всё сначала. Постарайтесь разделить выполнение сложных задач на элементарные действия, постоянно демонстрируя пользователю результат работы. Учащиеся выполняют задачу: разработайте мастер решения задачи.
  7. Привыкание. Когда пользователь долго работает в одном интерфейсе, зачастую часть действий, особенно простые и элементарные, становятся автоматическими. Что важно, если пользователь начинает использовать другое приложение, он рефлекторно будет пробовать уже привычные действия в новом интерфейсе. Если новый интерфейс отвечает пользователю ожидаемыми им действиями, взаимодействие с программой значительно упрощается. Учащиеся выполняют исследовательскую задачу: выделите однотипный набор элементарных действий, которые выполняет пользователь в программах разного типа.
  8. Пространственная память. При работе с множеством объектов или документов, люди помнят об их расположении. Постарайтесь расположить общепринятые элементы в заранее предсказуемых местах. Исследовательское задание: выясните какие элементы интерфейса, в каких местах ожидает увидеть пользователь.
  9. Только клавиатура. Одним из общеизвестных средств повышения эффективности при работе с приложением является запоминание пользователем «горячих клавиш», что помогает сократить время работы с программой. Постарайтесь продумать удобный способ взаимодействия пользователей с приложением только с помощью клавиатуры, при этом необходимо запомнить, что выбранные комбинации «горячих клавиш» должны с легкостью запоминаться пользователем. Школьникам ставится задача по созданию приложения в Windows Form, в котором все действия могли бы выполняться только с помощью клавиатуры.

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

Список литературы

  1. Joshua Porter, Principles of User Interface Design // URL: http://bokardo.com/principles-of-user-interface-design/ (дата обращения: 11.11.2019).
  2. Myers B.A. and Rosson M.B. “Survey on User Interface Programming,” Proceedings SIGCHI’92: Human Factors in Computing Systems. Monterrey, CA, May 3-7, 1992. P. 195-202.
  3. Баженов Р.И. Информационные системы и технологии в экономике и управлении /Баженов Р.И., Векслер В.А., Голиков П.А., Каспиров А.В., Мизякина О.Б., Петрова Л.Н. // Саратов: Общество с ограниченной ответственностью "Амирит", 2017.
  4. Векслер В.А. Особенности образовательных веб-порталов: цели, типология и функции // В сборнике: Информационные технологии в образовании Саратовский государственный университет. 2015. С. 368-372.
  5. Калентьев А. А Новые технологии в программировании: учебное пособие / А. А. Калентьев, Д. В. Гарайс, А. Е. Горяинов — Томск: Эль Контент, 2014. — 176 с.
  6. Клещев А.С. Методы и средства разработки пользовательского интерфейса: современное состояние / Клещев А.С., Грибова В.В. // URL: http://guimachine.ru/?p=937 (дата обращения: 05.10.2019).
  7. Кузнецова С.В. ИКТ-компетентность в современном обществе / Кузнецова С.В., Векслер В.А. //В сборнике: Инновационные технологии в науке, технике, образовании Материалы Всероссийской научно-практической конференции. 2017. С. 35-38.
  8. Родыгин Евгений Федорович Методические рекомендации обучения программированию в школе // Вестник Марийского государственного университета. 2011. №7. URL: https://cyberleninka.ru/article/n/metodicheskie-rekomendatsii-obucheniya-programmirovaniyu-v-shkole (дата обращения: 20.11.2019).