Розробка уроку

Тема: проектування інтерфейсу користувача, продуктовий дизайн, розроблення прототипу.

Мета: закріплення навичок створення інтерфейсу користувача на прикладі фрагменту інформаційної системи керування, вивчення основних принципів проектування інтерфейсу користувача згідно з міжнародними стандартами.

Обладнання: комп'ютери з встановаленими ОС і середовищем програмування, придатним для створення застосунку з графічним інтерфейсом, (даний) конспект уроку.

Структура уроку
  1. Організаційний момент.
  2. Актуалізація опорних знань.
  3. Вивчення нового матеріалу.
  4. Інструктаж з ТБ.
  5. Закріплення вивченого матеріалу.
  6. Підбиття підсумків уроку.
  7. Домашнє завдання.

Хід уроку

1. Організаційний момент
Вітання з класом. Перевірка присутності і готовності учнів до уроку. Перевірка виконання домашнього завдання.

2. Актуалізація опорних знань

  1. Що таке графічний інтерфейс?
  2. Назвати елементи керування графічного інтерфейсу користувача.
  3. Описати створення елемента керування.
  4. Описати створення обробника подій.

Порівняти з очікуваним. Для цього і для подальшої роботи використати навчальний матеріал за посиланнями 46, 47, 48.

3. Вивчення нового матеріалу

Вступ
Важливим етапом процесу проектування інтерфейсу користувача є аналіз діяльності користувачів, яку повинна забезпечити обчислю­вальна система. Не вивчивши того, що, з погляду користувача, повинна робити система, неможливо сформувати реалістичний погляд на проектування ефективного інтерфейсу. Для аналізу потрібно (як правило, одночасно) застосовувати різні методики, а саме: аналіз завдань, етнографічний підхід, опити користувачів і спостереження за їх роботою.

Принципи проектування інтерфейсів користувача
Розробники інтерфейсів завжди повинні враховувати фізичні і розумові здібності людей, які працюватимуть з програмним забезпеченням. Люди на короткий час можуть запам'ятати вельми обмежений об'єм інформації і робити помилки при введенні великих об'ємів даних або при роботі у стресових умовах. Фізичні можливості людей можуть істотно різнитися. При проектуванні інтерфейсу користувача необхідно постійно пам'ятати про це. Перелічимо й опишимо основні принципи проектування інтерфейсів користувача:

Розробникові інтерфейсу користувача необхідно вирішити дві головні проблеми: яким чином користувач вводитиме дані в систему і як дані буде представлено користувачеві.

Всі сучасні інтерактивні системи, незалежно від їх призначення, використовують кольори. Правильне використання кольорів робить інтерфейс користувача зручнішим для сприйняття. Інакше (при хибному використанні кольорів) буде створено візуально непривабливий інтерфейс, що провокує помилки.

Кінцевим користувачам інколи важко уявити, як вони будуть використовувати нове програмне забезпечення. Один зі способів подолання таких труднощів полягає у використанні еволюційного методу розробки систем. Це означає, що користувачеві надать незавершену систему, яку потім змінюють і доповнюють доти, поки не буде з'ясовано й задоволено всі вимоги користувача. У якості альтернативи можна побудувати експериментальний прототип, який допоможе проаналізувати ці вимоги. І лише після цього створити систему.

Прототипце модель програми, можливо, з неповним функціоналом.

Прототип містить графічний інтерфейс користувача і виглядає як справжня програма. Але не усяка активація елемента інтерфейсу призведе до отримання результату.

За допомогою прототипів можна побачити елементи реальної програмної системи, попрацювати з ними до її створення. Застосування прототипів на ранніх стадіях виконання проекту дозволяє уточнити і виправити помилки у визначенні вимог на основі зворотного зв'язку із зацікавленими особами.

Класифікація прототипів:

  • за призначенням — горизонтальні й вертикальні;
  • за глибиною опрацювання коду — одноразові й еволюційні;
  • залежно від використання ПЗ — розкадровки й електронні прототипи;

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

Вертикальний або структурний прототип включає інтерфейс користувача і реалізацію всіх рівнів його реалізації. Призначення таких прототипів — це аналіз застосовності системи, перевірка її архітектурних концепцій.

Одноразовий або дослідницький прототип створюють при потребі швидко змоделювати деякі аспекти та складові системи. Його розробляють швидко, без опрацювання питань повторного використання коду, його якості тощо.

Еволюційний прототипце перше наближення мультимедійного видання, на основі якого згодом буде створено його остаточну версію. Еволюційне прототипування починають з побудови відносно простої системи, яка реалізує найважливіші вимоги користувача. У міру виявлення нових вимог прототип змінюють і доповнюють. В остаточному підсумку він стає тією системою, яка потрібна. У цьому процесі не використовують детальну системну специфікацію, у багатьох випадках немає навіть формального документа із системними вимогами. Наразі еволюційне прототипування є поширеною технологією розробки програмних систем, яку широко використовуют при розробці Web-вузлів і застосунків електронної комерції.

На противагу еволюційному підходу метод дослідницького прототипування призначено для розробки і уточнення системної специфікації. Прототип створюють, оцінюють і модифікують. Дані оцінювання прототипу використовують для подальшої деталізації специфікації. Коли системні вимоги сформовано, прототип більше не потрібний.

4. Інструктаж з ТБ.
5. Закріплення вивченого матеріалу


Завдання 1. Створити інтерфейс застосунку «Визначеня елементів трикутника», що містить 4 кнопки з написами:

Всі кнопки одного розміру розташувати в один стовпчик.

Вказівки до виконання

  1. Задати властивостів вікна (форми): розмір, позицію, назву.

  2. Розташувати кнопки та встановити їхні властивості.

  3. Для кожної кнопки створити процедуру опрацювання події натискання на кнопку: виклик відповідного вікна (форми) з назвою, що збігається з назвою відповідної кнопки, або припинення виконання програми.

  4. Створити (описати) форми (вікна) для кожного з трьох завдань:
    • ліворуч — стовпчик полів з підписами для введення даних:
      • або a, b, C;
      • або a, B, C;
      • або a, b, c;
    • праворуч — стовпчик написів з підписами для результатів:
      • або A, B, c;
      • або A, b, c;
      • або A, B, C;
    • знизу праворуч — кнопка для запуску опрацювання даних.
  5. Створити обробники події натискання кнопки для запуску опрацювання даних, використавши математичну довідку (читати до розділу «3. Вивчення нового матеріалу») наявної розробки уроку.

6. Підсумок уроку

  1. Назвати основні принципи проектування інтерфейсу.
  2. Назвати види прототипів.

Виставлення оцінок.

7. Домашнє завдання

При потребі доробити проект, розпочатий на уроці. У кодах обробників подій передбачити виведення повідомлень:

після введення некоректних вхідних даних, що суперечать відпо­відному вислов­люванню.


Текст упорядкував Ткаченко Сергій Анатолійович, вчитель cередньої загально­освітньої школи № 67 Солом'янського району міста Києва, під час виконання випускної роботи на курсах підвищення кваліфікації з 10.12.2018 по 14.12.2018 року.