5. Проектування адаптивних (responsive) інтерфейсів для пристроїв різних розмірів.

1. Мета роботи

Навчитися створювати прототипи (у вигляді wireframe) інтерфейсів web-додатків для пристроїв різних розмірів (для смартфону, планшету та ноутбуку )

2. Методичні вказівки з організації самостійної роботи студентів

Останнім часом поле діяльності дизайнерів інтерфейсів розширюється за рахунок збільшення кількості пристроїв, де дані можуть бути відображені. Ці пристрої характеризуються різними:

- розмірами екранів;

- можливостями введення даних користувачем;

- сценаріями використання тощо.

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

Ще зовсім недавно дизайнери розробляли свої веб-інтерфейси для стандартного екрану нотбука 1024 на 768. Але тепер існує багато інших розмірів. Так само важливо не призначати елементам фіксовані розміри, неважливо для якого пристрою вони проектуються.

РІШЕННЯМ ДЛЯ ВСІХ ЦИХ ПРОБЛЕМ Є СТВОРЕННЯ РОДИНИ ЕКРАННИХ ФОРМ, ЯКІ В ПРИНЦИПІ СХОЖИ ОДНА НА ІНШУ, АЛЕ «ПРИСТОСОВАНІ» ДО КОЖНОГО ПРИСТРОЮ.

Головна ідея, яка повинна бути реалізована полягає в тому, щоб:

- зробити різним то, що має виглядати по-різному на різних пристроях.

АЛЕ всі варіанти дизайнів все ж повинні бути схожими один на одного, для того, щоб:

1) міг бути «відсканованим» брендинг - щоб люди розуміли, що це все таки один і той же сайт;

2) НАЙБІЛЬШ ВАЖЛИВА ПРИЧИНА – User Experience - щоб люди змогли переносити свій колишній досвід і припущення від одного пристрою до іншого.

3. Порядок виконання лабораторної роботи

Оберіть web-сайт, який Ви використовуєте для вирішення повсякдення завдань у повсякденному житті. В звіті наведіть посилання на цей сайт та скриншот головної сторінки.

Оберіть одну з основних задач, яку можна вирішити за допомогою цього сайту. Траєкторія вирішення цієї дії має складатися із 2-3 екранних форм. Опишіть цю дію у 1-2 реченнях.

Створіть прототип дизайну альтернативного варіанту рішення обранної дії у вигляді wireframe-у наведеного нижче розміру для двох (на Ваш вибір) з трьох пристроїв:

- смартфон: 480 px  (w) × 720 px  (h);

- планшет: 768 px  (w) × 1024 px  (h);

- ноутбук: 1200 px  (w) × 800 px (h).

Для вирішення рекомендується використовувати відомі Вам засоби для створення прототипів, наприклад, Mockups, Balsamiq тощо.

4. Контрольні запитання та завдання

1. Навіщо необхідно створювати різні версії сайтів для різних пристроїв?

2. Чи мають різні версії сайту надавати однаковий перелік функцій?

3. Які основні функціональні блоки , зазвичай, присутні на сторінці сайту?

4. У чому складається різниця між прототипом, що розроблений для телефону, та прототипом, що розроблений для ноутбуку?

5. Зміст звіту

Звіт має містити:

• адресу сайту та скриншот головної сторінки;

• опис завдання, яке можна виконати за допомогою цього сайту

• скриншоти 2 wireframe-ів, кожен з котрих містить альтернативний варіант дизайну рішення поставленого завдання;

• кожен з wireframe-ів є адаптивним варіантом прототипу дизайну для різних пристроїв (для телефону, планшету або ноутбуку). Кожен з wireframe-ів складається не менш ніж з двох екранних форм.

РЕКОМЕНДОВАНА ЛІТЕРАТУРА

1. Человеко-машинное взаимодействие: теория и практика. Учебное пособие / О.С. Логунова, И. М. Ячиков, Е.А. Ильина. -Ростов н/Д: Феникс, 2006.-285 с.

2. Раскин Д. Интерфейс: новые направления при проектировании компьютерных систем, Пер. с англ., -СПб: Символ-Плюс, 2006, -272 с.

3. Головач В. В. Дизайн пользовательского интерфейса , 2005. -141 с.

4. Мандел Т.: Разработка пользовательского интерфейса Пер. с англ. –М. : ДМК Пресс, 2001, - 416 с.

5. http://hcibib.org/tcuid/chap-4.html , http://hcibib.org/tcuid/chap-5.html

6. Круг С. Веб-дизайн: книга Стива Круга или «не заставляйте меня думать!», 2-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2008. – 224 с.: цв. ил.

7. Дональд Норман "Дизайн обыденных вещей“ (Donald Norman, Design of everyday things).

8. http://www.nngroup.com/articles

9. About Face 3: the essentional og interaction design / Alan Cooper, Robert Reimann, Dave Cronin, Wiley Publishing, 2007

10. The Inmates Are Running the Asylum / Alan Cooper, Sams Publishing, 2004

11. Buxton William Sketching User Experiences, Morgan Kaufmann Publishing, 2007

Додаток А

Можливі варіанти завдань на першу лабораторну роботу:

1.	Бронювання місць у театр.
2.	Запис на прийом до зубного лікаря.
3.	Бронювання залізничних послуг.
4.	Підбор гармонійних кольорових схем, підбір одягу,..
5.	АРМ менеджера «Заказ металопластикових вікон»
7.	Створення фоторобота.
8.	АРМ медсестри у лікарняному відділенні.
9.	Підбір варіантів для студії з дизайну штор.
10.	Навчальна система «Англійська мова для малюків».
11.	Ознайомлення з прогнозом погоди.
12.	Система «Вибір туристичної подорожі».
13.	Запис на прийом у посольстві для отримання візи
14.	Бронювання номера в готелі
15.	Навчальна система з астрономії
16.	Автомат для продажу напоїв або товарів*
17.	Переведення чисел з однієї системи в іншу*
18	Дистанційне керування кухонними приладами*
19	Керування засобом пересування(скутер, літаюча тарілка, ..)*
20	Ваша власна тема…

* - завдання для однієї людини

Додаток Б

Приклад інтерфейсу ПП, моделі якого були розглянуті на лекції

( користувача, програміста та проектувальника)

-1-

-2-

-3-

-4-

-5-

-6-

-7-

-8-

Додаток В

Вимоги до конкретних елементів керування

Кнопки

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

• Між кнопками, що розміщені поруч, має бути порожній простір, клацання по якому не спрацьовується;

• Недоступні команди не зникають із екрана, а стають заблокованими;

• Частотні кнопки супроводжуються не тільки текстом, але й піктограмами; кнопки, що використовуються рідко - тільки текстовими підписами.

Поля уведення

• Полях уведення вже мають найбільш імовірні значення;

• Якщо в полі вводиться чисельне значення, границі діапазону виводяться в спливаючій підказці;

• Якщо в полі вводиться чисельне значення з обмеженого діапазону, поле супроводжується Spіnner-ом;

• Довжина полів не менше, і, по можливості, не більше, довжини даних, що вводяться в них.

• Якщо поле призначене для уведення помітної кількості тексту, воно многорядкове.

Списки

• Списки вже мають найбільш імовірні значення;

• Якщо список містить більше 50 елементів, використовується фільтр або режим пошуку;

• Немає коротких списків (менш п'яти елементів); такі списки представлені як групи радіокнопок або чекбоксів;

• Ширина списків не менше ширини вхідних у них елементів;

• Елементи списку відсортовані; або структурно, тобто по загальних ознаках, або за алфавітом, або по частотності (тільки списки менше 7 елементів);

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

Чекбокси й радіокнопки

• Якщо чекбоксів у групі більше 10, вводиться додатковий, що виставляє/знімає всі чекбокси;

• Чекбокси й радіокнопки усередині своїх груп розставлені по вертикалі;

• Якщо у вікні, крім термінаційних кнопок, є тільки набір радіокнопок, подвійне клацання по радіокнопці встановлює її й закриває вікно.

Взаємодія

• Система, завершивши тривалу операцію (більше мінути роботи), пищить через вбудований динамік комп'ютера;

• Якщо в інтерфейсі не використовується безпосереднього маніпулювання, система не має своїх курсорів. Якщо безпосереднє маніпулювання є, свої курсори застосовуються тільки якщо аналогів з ОС не існує.

Системні повідомлення й відпрацьовування помилок

• У формах уведення перевірка коректності значень, що вводяться, виконується прямо під час уведення; якщо вводяться некоректні дані, система відразу сповіщає про це користувачеві, не чекаючи моменту, коли користувач завершить уведення даних у всій формі;

• Повідомлення про некоректність уведених даних показуються поруч із елементом керування, дані в якому некоректні;

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

• Якщо вікно з текстом про некоректність уведених даних спливаюче - воно не повинне заслоняти собою поле уведення із текстом помилки;

• Текст повідомлень про проблеми складається із трьох частин: у першій коротко описується проблема, у другій частині - як її вирішити, у третьої - описується, як не допускати виникнення цієї проблеми надалі;

• Статусні повідомлення ("Синхронізація успішно завершена") виводяться тільки в рядку статусу.

Клавіатура

• Обробка форми запускається не тільки по натисканню на термінаційну кнопку, але й по натисканню клавіші Enter на кожному полі цієї форми;

• Для найбільш частотних елементів керування (включаючи меню) установлені клавіші швидкого виклику;

• Кожному пункту меню призначені ALT-комбінації (виділені підкресленням);

• ALT-комбінації й гарячі клавіші стандартні;

• Якщо гарячих клавіш більше 40, в інтерфейсі є спосіб їх змінити;

• По натисканню клавіші Tab перехід від елемента до елемента усередині форми здійснюється зверху вниз ліворуч праворуч.

Візуалізація

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

Індикація

Індикація кольором не є єдиною; якщо вона використовується, система супроводжується й іншою індикацією (звук, анімація тощо).

Піктограми

• У групах піктограм немає піктограм, за кольором й формою подібних між собою;

• Немає піктограм зі стандартними значеннями, але нестандартними сюжетами.

Вікна

• На вікнах, що розтягуються, є індикатор розтягування;

• Заголовки вікон відповідають назвам елементів, за допомогою яких вікна були викликані. Якщо вікно викликається елементом, що не має явної назви, у заголовку вікна відбивається назва екранної форми;

• Тип вікна (модальна, немодальне, можливість мінімізації/максимізації) обирається свідомо, відповідно до завдань користувачів;

• У діалогових вікнах відсутні меню або інструментальні панелі.

Рядок статусу

• У рядку статусу виводиться інформація тільки про поточний стан системи;

• Індикатори виконання виводяться в рядку статусу. Виключення: «вікна-майcтри», - у них індикатори виконання можна виводити усередині самих вікон.

Меню

• Перша буква в назві пунктів меню – заголовна;

• Всі пункти меню першого рівня активізують меню, що розкриваються;

• Використаються не більше двох підрівнів меню;

• Якщо в меню є піктограми, ними супроводжуються тільки самі частотні елементи;

• Елементи, що відкривають вкладені меню, виглядають інакше, чим термінальні елементи.

Контекстні меню

• На всіх об'єктах, видимих в інтерфейсі, є специфічне для кожного об'єкта контекстне меню;

• У контекстні меню не більше 10 елементів;

• У контекстні меню елементи відсортовані по убуванню частоти їх використання

• Всі елементи контекстних меню присутні й в інших фрагментах інтерфейсу; немає команд, що викликаються тільки з контекстних меню.

Структура форм інтерфейсу

• У групах інтерактивних елементів (поля форм, елементи меню й т.п. ) цих елементів не більше семи;

• Кнопка "Скасування" завжди сама права;

• Багатосторінкові форми мають вказівка на те, що вони багатосторінкові; користувач завжди бачить кількість екранів, що залишилися (приклад: "Екран x з y");

• Якщо у формі є кілька кнопок, одна є кнопкою за замовчуванням. Небезпечні для користувача кнопки не є кнопками за замовчуванням;

• Якщо у вікні є вільне місце, найбільш частотна термінаційна кнопка більше інших;

• Кнопки перебувають у секції, на яку вони роблять безпосередній вплив;

• Термінаційні кнопки (що керують вікном) розташовані або знизу в ряд, або праворуч у стовпчик.

• Кнопки, що впливають на декілька блоків, розташовані за межами цих блоків;

• Якщо вікно або вкладка має автоматично поповнюваний вміст, наприклад, у ньому перераховані повідомлення, що надходять, у назві елемента інтерфейсу, що відкриває вікно або вкладку, виводиться число об'єктів у цьому вікні й окремо число нових об'єктів. Приклад: Документи (3/8);

• Пункти меню й кнопки, що ініціюють інші дії користувача, позначені наприкінці багатокрапкою (...). Приклади: елемент "Зберегти як..." вимагає багатокрапки, тому що користувач має вибрати назву файлу, а елемент "Про програму" багато крапки не вимагає, тому що на вікні, що відкривається, немає самостійних елементів інтерфейсу;

• Підписи до елементів інтерфейсу розміщені одноманітно;

• Недоступні в цей момент елементи інтерфейсу заблоковані, а не сховані;

• В інтерфейсі присутні повідомлення про виконання тієї або іншої дії. Наприклад, повідомлення про те, що дані успішно збережені або щось вилучене й т.п.

Форми введення

• У форми введення є назва;

• У всіх формах, що служать для збору інформації, є пункт "Інше" або подібний;

• Всі поля, обов'язкові для заповнення, позначені, і є відповідне пояснення;

• Багатосторінкові форми уведення мають кнопки "Назад" і "Далі";

• У всіх формах, що служать для збору інформації, є опис цілей збору даних, пояснюється, що із цими даними буде зроблене й що не буде.

Текст

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

• В інтерфейсі відсутні жаргонізми;

• В інтерфейсі відсутні негативні формулювання (наприклад, чекбокс "Не показувати примітки" неприйнятний, замість нього потрібно виводити чекбокс "Показувати примітки");

• Жоден елемент не називається по-різному в різних місцях (глосарій інтерфейсу не просто зроблений у явній формі, але й вивірений);

• У тексті всіх підтверджень дається найменування об'єкта, над яким відбувається підтверджувана дія;

• Для ясності довгі числа розбиваються нерозривним пробілом по три цифри: 1 234 567;

• Будь-якому списку передує, щонайменше, один абзац тексту;

• У таблицях всі стовпці із цифрами вирівнюються по правому краї;

• Підписи до елементів інтерфейсу починаються із прописної букви.

Додаток Г

Варіанти тем, що пропонуються на третю лабораторну роботу:

1. Медична навчально-лабораторна система «Визначення групи крові».

2. Система для служби 1562 (фіксування та моніторинг несправностей ЖКХ).

3. Навчально-лабораторна система з флористики «Складання ікебани».

4. Логістична система: відображення, калькуляція та моніторинг вантажів.

5. Комп’ютерна гра для дітей «Виготовлення та оздоблення тортів».

6. Комп’ютерна гра «Автомобільні гонки»./ Умный дом

7. Навчально-лабораторна система з фізики «Закони тяжіння»; (~гра «Tim»).

8. Навчально-лабораторна система «Ландшафтний дизайн».

9. Комп’ютерна гра для дітей «Лабіринт»./ Служба доставки

10. Програмна система для калькуляції витрат (кілометражу,…) та наочного перегляду маршруту туристичної подорожі/походу.

11. Програмна система для бажаючих схуднути (калькуляція та наглядне відображення калорій, що були отримані та/або витрачені, …).

12. Програмна система для обліку даних про студентів (внесення даних, перегляд, формування звітів та документів за критеріями).

13. Програмна система «Конструктор мапи міста/ місцевості».

14. Програмна система «Моделювання систем за допомогою мереж Петрі».

15. Програмна система «Конструктор верстки книг рецептів».

16. Навчально-лабораторна система для молодших школярів «Основи програмування».

17. Програмна система «Інтерактивний музей (музичний, археологічний, художній)»

18. Програмна система «Велопаркування онлайн» або «Міський прокат велосипедів».

19. Ваша власна тема (після її обговорення з викладачем).

Додаток Д

Рис Д.1 Подання кольору за допомогою його основних складових

Рис Д.2 Яскравість кольору

Рис Д.3 Шкала яскравості кольорів

С уміжно-комплементарна

Триадна

Рис Д.4 Приклади колірних схем

Електронне навчальне видання

Методичні вказівки

до лабораторних робіт

з дисципліни

«ЛЮДИНО-МАШИННА ВЗАЄМОДІЯ»

для студентів усіх форми навчання

напряму 6.050103 – Програмна інженерія

Упорядник МЕЛЬНІКОВА Роксана Валеріївна

Відповідальний випусковий 3. В. Дудар

Авторська редакція

1 Технологія здачі лабораторної роботи №4 передбачає, що лабораторна робота №3 була захищена на попередньому занятті та .exe+інші файли, необхідні для запуску цієї програми надані викладачу до дати захисту л.р. №4. Таким чином, захистити л.р. № 3 та № 4 на одному занятті неможливо.

7