Інтерфейс

користувача
Кожного дня ми користуємось програмами і застосунками і
вже можемо вважати себе експертами в темі “хорошого” і
“поганого” дизайну цих програм.

● Наскільки важливою в процесі розробки програмного

забезпечення є взаємодія між користувачем і програмою?
● Як з'ясувати чи створений інтерфейс є зручним для
користувача чи не дуже?
● Хто відповідає за дизайн?
Що таке інтерфейс
користувача?
 Час для коду
Наведіть приклади програм де ви
зустрічали такі типи інтерфейсів
інтерфейсів

Консольний / Графічний Керований Сенсорний Голосовий

термінальний через меню

Qemu; телефон чи сайт; телефон і планшет або

MidnightComm планшет; Visual Studio; планшет; колонка;
tkinter; Google
ander -
Assistant;
файловый
менеджер;
 Час для коду

Звичайно, оцінка інтерфейсу самим користувачем більше

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

Порекомендуйте програму з найбільш зручним інтерфейсом за

наступним планом:
1. Instagram
2. соціальна мережа для спілкування
3. проста в використанні ,безкоштовна та красивий дизайн
○ Telegram,Discord,Facebook.
● зелений колір на правильний
дію+
● червоний за прострочену дату
підписки чи щось таке +(такі
асоціації у всіх)
● оранжевий та блакитний теж
гарно вписуються і дизайн
вийшов легкий для сприйняття +
● не дуже розумію перевернутий
знак оклику але для того аби
відрізняти повідомлення не
пагана ідея
 Час для коду
В середовищі ideone.com
1. протестуйте роботу програм на 3 мовах

2. Допишіть введення і виведення прізвища

Python JavaScript C++

name = input() name=readline(); #include <iostream>
print ("Привіт,", name) using namespace std;
print ("Привіт,", name); int main ()
{
string name;
cin>>name;
cout<<"Привіт,"<<name;
return 0;
}
 Графічний інтерфейс

GUI (графічний інтерфейс

користувача) — це система
інтерактивних візуальних компонентів
для комп’ютерного програмного
забезпечення .
GUI відображає об’єкти, які передають
інформацію та представляють дії, які
може виконати користувач. Об’єкти
змінюють колір, розмір або видимість,
коли користувач взаємодіє з ними.
 Час для коду
І знову одна з рекомендацій від дизайнера щодо використання кольорів в
елементах дизайну:
● Який варіант ви виберете для дизайну розміщених таких двох кнопок?
● Поясніть свій вибір
Я би вибрав перший варіант,кнопка “Delete” на першому варіанті більш
видна
 Діалог з користувачем в консольних програмах

Python JavaScript C++

name = input() name=readline(); #include <iostream>
print ("Привіт,", name) using namespace std;
print ("Привіт,", name); int main ()
{
string name;
cin>>name
cout<<"Привіт,"<<name;
return 0;
}
 Час для коду
1. Додайте в кожну програму введення прізвища
2. Побудуйте код так, щоб користувачеві були зрозумілі процеси введення-
виведення даних
 Тестування програм

Тестування програмн
● передбачає оцінку однієї або кількох цікавих
властивостей коду.
● відповідає вимогам, якими керувались його
розробники
● перевіряє реакцію на всі типи вхідних даних і час
виконання програми
● визначає чи програма може бути встановлена та
запущена в призначених середовищах.
 Час для коду
Вхідні Вихідні Обробка
Результати тестування збережіть в новому Google Документі з дані дані помилок
назвою Дизайн програми 11 10

-1 -1 10
Готуємо тестовий пакет даних для перевірки роботи програми
1000000 10
Код: 1000000
10 ZeroDivisionError
a, b = input().split() : integer
a = int(a) division or
b= int(b) modulo by zero
c = a // b
d = a % b 01 00
print(c, d)
a=1 b=2 0 1
 Підсумуємо

Спробуємо уявити собі програму, яку ви можете створити,

побувавши у трьох ролях:
● дизайнера
● розробника
● тестувальника

Дайте відповідь на такі питання:

1. Яка проблему вирішує ваша програма
2. На якій мові вона написана
3. Які вхідні дані отримує і що потрібно видати на вихід
4. який дизайн матиме програма. Зробіть ескіз головного
екрану
5. на яких даних ви вважаєте потрібно її тестувати і який саме
функціонад перевіряти

Яка з трьох IT спеціалізацій вам ближча?