Етап V. Підготовка специфікації

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

Фінальний етап. Приймання

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

У залежності від стадії проектування і цілей прототипу, Вам потрібно дотримуватися трьох основних критеріїв:

Візуальна точність (начерк - дизайн)

Можливість побачити і відчути - найважливіша характеристика прототипу, якщо спроектувати його невірно - вся робота може виявитися марною. З візуальної точки зору прототипи не повинні бути дуже красивими, але повинні бути пропорційними. Наприклад, якщо ліва навігаційна область повинна зайняти одну п'яту екрану на 1024 пікселя, вона не повинна бути точно 204 пікселя в ширину, поки вона пропорційно зображена в прототипі. Безпосередньо в процесі проектування дизайну, збільште візуальну точність у міру необхідності, вводячи елементи стилю, кольору, айдентики і графіки.

Функціональна точність (статичний - інтерактивний)

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

Точність контенту (lorem ipsum - реальний контент)

Інша важлива складова, яка часто відволікає користувачів - контент, відображений у прототипі. Абстрактні рядки і фіктивний текст (наприклад «lorem ipsum») корисні, щоб уникнути деяких складнощів на ранніх етапах проектування. Але оскільки прототип постійно вдосконалюється, виникає необхідність замінити фіктивний текст реальним контентом, щоб отримати уявлення про те, як це буде позначатися на розробці дизайну.

Спектр проектування

Низька точність. Найшвидший спосіб почати проектувати є також і самим простим: почніть з паперу та ручки. Малювання ескізів на папері - підхід з низькою точністю, який може зробити практично будь-яка людина. Ніякі спеціальні інструментальні засоби або досвід не потрібні. Найчастіше використовується під час ранніх стадій циклу дизайну, малювання ескізів - швидкий спосіб створити грубі макети зразків дизайну і приблизну концепцію продукту, а також отримати зворотній зв'язок від клієнтів

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

Це робить проектувальників більш відкритими для змін, заснованих на зауваженнях клієнтів.

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

Середня точність. На цьому етапі ми починаємо використовувати ПЗ, таке як Visio і Omnigraffle, щоб моделювати і збільшувати точність макетів. Каркаси, завдання і сценарії, створені за допомогою них, займають більше часу і сил, але в результаті ми отримуємо акуратний і більш досконалий прототип. На цьому етапі візуальні елементи, такі як айдентіка, кольори вже можуть використовуватися, але проектувальники часто уникають їх, зосереджуючись натомість на демонстрації поведінки програми в цілому. Інтерактивність може бути показана шляхом, створення посилань, але функціональну точність тут краще залишити середньої. Такі прототипи найкраще підходять для того, щоб зрозуміти, чи задоволені клієнтські потреби і оптимально розбудувати макету з точки зору юзабіліті.

Є дві причини, чому можна було б навмисно змусити прототип середньої точності не бути схожим на прототип середньої точності:

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

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

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

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

Ці прототипи необхідні, коли потрібна висока візуальна і функціональна точність. Наприклад, при введенні нової технології (наприклад, коли ви адаптуєте своє настільний додаток до роботи у вигляді web-app). Більшість цих прототипів не може бути перетворено в придатний для використання код, але вони служать чудовою довідковою інформацією для розробників, а також для проведення перевірки зручності використання або навчання користувачів.

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

2.3 Засоби швидкого конструювання

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

Створення ефективних прототипів

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

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

Ефективні прототипи є одноразовими. Як і будь-який інший дизайн, призначений для реалізації, ми створюємо артефакт, призначений для того, щоб донести ідею до когось ще (зацікавленої особи, розробника, користувача і т.д.). Після того як дизайнерська ідея була донесена, прототип реалізації може бути відкинутий. Ми не повинні переживати важке почуття, що створюємо шедевр, який обов'язково буде реалізований, і безумовно не повинні створювати прототип, працюючи на рівні коду.

Ефективні прототипи є сфокусованими. Ми хочемо вибирати інтерактивні елементи нашого дизайну, які дійсно повинні бути прототіпіровани. Шукайте частини вашого дизайну, які складні. Шукайте патерни взаємодії, ктором давно відомі в теорії user experience. Шукайте елементи взаємодії, які принесуть користь вашого продукту. Прототип, який продемонструє ці елементи, буде кращим використанням вашого часу та енергії.

2.4 Axure як інструмент візуального проектування

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

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

Коштів для візуального проектування стає все більше. Але все більше шанувальників з'являється у досить важкій і функціональної програми Axure RP Pro.

Axure є спеціальним інструментом для прототипування веб-сайтів та веб-додатків. Axure увібрала в себе все краще, що вміє Visio в області розробки концепції та схем, а також все найчарівніше з дизайнерських програм, що дозволило їй стати новим інструментом, який стоїть на стику проектування і дизайну - цих двох таких близьких, але зовсім різних світів.

Основні переваги Axure

1. Drag and drop widgets. Можливість "взяти" мишкою будь потрібний елемент інтерфейсу з колекції Axure і помістити його в прототип в будь-яке потрібне вам місце без написання коду

2. Генерація функціональних (чи інтерактивних) прототипів. Одним рухом руки рисунок перетворюється в файл html, який можна відкрити в браузері.

3. Економія часу на внесення змін і виправлень. У Axure можна внести зміни в усі сторінки прототипів одночасно, просто підправивши шаблон

4. Симулювати RIA (складні інтерактивні елементи). Як імітувати AJAX без AJAX? За допомогою нескладної гри з шарами в Axure.

5. Ta-dam. Axure може сама автоматично згенерувати специфікацію інтерфейсів.

2.5 Інтегроване середовище розробки Silverlight Expression Blend

Поява мови опису користувацьких інтерфейсів XAML і нового середовища розробки Expression Blend дозволяє помітно прискорити і полегшити проектування і побудова користувальницьких інтерфейсів як для веб-, так і для настільних додатків. [53]

Дана мова дозволяє описувати зовнішній вигляд і поведінка інтерфейсних елементів, встановлювати взаємодію цих елементів з різними даними і подіями. Допускає пряме підключення до Common Language Runtime (CLR), що забезпечує більшу гнучкість при проектуванні ПЗ.

Функціональність, взаємодія XAML і процедурного коду

XAML - це скриптова мова, що базується на XML, він має набір правил, які встановлюють взаємодія між об'єктами та класами, атрибутами і властивостями або подіями і просторами імен XML і CLR. Для опису елементів, панелей, властивостей тексту, векторної графіки і т.п. використовуються теги. (лістинг 2.5.1)

Лістинг 2.5.1

<Button VerticalAlignment = "Top" Width = "Auto" Height = "Auto" Content = "Button" />

Кожен тег в XAML має відповідний клас в WPF, який має набір інструкцій, як виконати цей тег.XAML включає в себе: панелі, елементи управління, елементи управління документами та елементи векторної графіки.

При створенні проекту в Expression Blend кожен файл на XAML має файл-соратник (code-behind) на C # або VB.

XAML взаємодіє з кодом на C # або VB допомогою обробника подій, який прописується всередині тега об'єкта.

Розглянемо код на XAML (лістинг 2.5.2):

Лістинг 2.5.2

<Button Content = "Button" Click = "Button_Click" />

Розглянемо приклад обробника події Button_Click на C# (лістинг 2.5.3):

Лістинг 2.5.3

private void Button_Click (object sender, System.Windows.RoutedEventArgs e)

{

MessageWindow MessageWindow = new MessageWindow ();

MessageWindow.ShowDialog (); }

Microsoft Expression Blend

Є декілька візуальних редакторів дозволяють створювати і редагувати XAML: Microsoft XamlPad, Microsoft Visual Studio 2005, 2008, Microsoft Expression Blend, Mobiform Avrora, XamlHack.

Докладно хочу зупинитися на основному додатку для роботи з XAML - Microsoft Expression Blend, далі просто Blend.

Blend представляє собою сучасний засіб візуального проектування інтерфейсів, оснащене вбудованим редактором XAML, що дозволяє, з одного боку проектувати інтерфейси не звертаючи уваги на вихідний код, а з іншого боку, дозволяє більш «тонко» налаштовувати створюваний інтерфейс.

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

Інтерфейс Blend

Blend має сучасний інтерфейс (рис. 2.1), звичний як дизайнерам графіками, так і веб-дизайнерам. Робочий простір розділено на три основні частини. Робочий простір Microsoft Expression Blend: панель інструментів (підфарбована червоним), панелі Interaction і Objects and Timeline (пурпурним) ліворуч, основний робочий простір з панеллю інструментів і вкладками перемикання виду Design, XAML або Split посередині і панель Results в центрі знизу (підфарбовані зеленим) і панелі Project, Properties, Resourses і Data праворуч (сині).

Рис. 2.1 Робочий простір Microsoft Expression Blend

Всі панелі дозволяють перемикатися в «плаваючий» режим або зникати з екрану за допомогою «гарячих» клавіш. У меню Tools - Options - Workspace є можливість налаштування розмірів панелей.Blend використовує велику кількість «гарячих» клавіш, спасибі розробникам про турботу, більшість сполучень добре відомі всім дизайнерам, що працюють з графічними програмами від Adobe.

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

За умовчанням в Blend включені дві бібліотеки інтерфейсних елементів System Controls - стандартні елементи і Simple Styles - бібліотека-приклад побудови користувацьких інтерфейсних елементів, що розкриває можливості XAML.

Інструменти малювання

Векторний редактор Blend володіє всіма можливостями сучасного векторного редактора плюс володіє деякими унікальними властивостями.

Інструменти для побудови і редагування векторної графіки типові для багатьох векторних редакторів і включають в себе редактор кривих, представлений інструментами: Перо (Pen), Олівець (Pencil), інструмент виділення (Selection) і інструмент безпосереднього виділення (Direct Selection), а також інструментами для побудови простих геометричних форм: Прямокутник (Rectangle), Овал (Ellipse) і Лінія (Line).

Blend дозволяє:

· створювати складові векторні об'єкти (Compound paths);

· створювати векторні об'єкти за допомогою логічних операцій (віднімання, додавання і т.д.) (Combining paths);

· переводити шрифт у векторний об'єкт (Convert to Path);

· кадрувати як растрове, так і векторне зображення (Clipping paths);

· створювати маски прозорості (Opacity masks).

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

Налаштування зовнішнього вигляду об'єктів

Зовнішній вигляд об'єктів залежить від властивостей, які задаються як за допомогою прямих налаштувань, так і за допомогою кистей (Brushes):

· прозорість (Opacity);

· видимість (Visibility);

· заливка (Fill);

· штрих (Stroke);

· фон (Background);

· передній план (Foreground);

· borderbrush (Кордон);

· маска прозорості (Opacity masks).

Кисті використовуються для завдання зовнішнього вигляду об'єктів і можуть бути наступних типів:

· одноколірна кисть (Solid color brush);

· лінійний градієнт (Linear gradient brush);

· радіальний градієнт (Radial gradient brush);

· кисть растрове зображення (Image brush);

· кисть векторне зображення (Drawing brush);

· кисть візуальних ефектів (Visual brush).

Кисті можна конвертувати в ресурси і багаторазово застосовувати до різних об'єктів.

Blend має стандартний редактор квітів дозволяє оперувати чотирма кольоровими моделями: RGB, HLS, HSB і CMYK, а так само спеціальний інструмент для налаштування шкали (Brush transform tool) і інструменти для перенесення властивостей об'єктів (Eyedropper і Paint Bucket).

Особливо хотілося б відзначити наявність в Blend спеціальних растрових ефектів (Bitmap effects):

· розмиття (Blur);

· зовнішнє світіння (Outer glow);

· тінь (Drop shadow);

· фаска (Bevel);

· рельєф (Emboss).

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

Робота з текстом

Blend є спеціалізованим інструментом для побудови користувацьких інтерфейсів і має декілька типів текстових об'єктів:

· текстове поле (TextBox);

· текстове поле з розширеними можливостями (RichTextBox);

· текстовий блок (TextBlock);

· поле пароля (PasswordBox);

· мітка (Label);

· текстовий блок з розширеним вмістом і смугою прокрутки (FlowDocumentScrollViewer);

Установки тексту залежать від типу об'єкта та його функціональності.

Бібліотека інтерфейсних елементів

Бібліотека інтерфейсних елементів (рис. 2.2) містить всі типи стандартних інтерфейсних елементів, специфічні елементи Blend і елементи, що містяться в стилі SimpleStyles.

Рис.2.2 Бібліотека інтерфейсних елементів

Елементи поділяються на такі категорії:

· Конфіденційність розмітки (Layout Panels), використовуються як контейнери для інших елементів, визначаючи їх місце розташування відносно один одного.

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

Створення інтерфейсів в Expression Blend

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

Стилі і шаблони унікальна можливість XAML, що дозволяє поєднувати в собі потужність стилів CSS і гнучкість шаблонів графічних програм.

Стилі описуються вмістом укладеним в тег <Style> і можуть містити такі елементи:

· кисті всіх типів (Brush);

· геометричні властивості елементів (Висота, ширина, зкруглення кутів, товщина ліній і т.д.);

· спеціальні ефекти (BitmapEffects і Visual brush);

· інтерфейсні елементи;

· векторні графічні об'єкти.

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

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

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

Є два шляхи для створення елементів: можна вивчити синтаксис XAML і «писати» елементи кодом або ж можна скористатися Blend.Другий спосіб простіше, наочніше і швидше.

Щоб створити власний виду інтерфейсного елементу в Blend є можливість як редагування існуючого, так і створення нового елемента. Для того щоб відредагувати елемент достатньо «клацнути» по ньому правою кнопкою миші і вибрати Edit Control Parts (Template). З'явиться «начинка» елемента і ви можете змінити зовнішній вигляд - за допомогою графічного редактора Blend або змінити поведінку елемента, редагуючи перемикачі подій (Event Triggers) або задати анімацію, використовуючи Timeline.

Розмітка документа здійснюється спеціальними панелями (Layout Panels), які можуть включати в себе як самі панелі, так і інтерфейсні елементи.Доступ до панелей здійснюється на панелі інструментів і що саме несподіване, як функція Угруповання (Group), нарешті то угруповання перестала бути абстрактною сутністю!

Конфіденційність розмітки може бути наступних типів:

· Полотно (Canvas panel)

· Стикувальна панель (Dock panel), вміст панелі може пристиковуватися до заданих сторонам панелі

· Таблиця (Grid panel), вміст знаходиться всередині елементів таблиці

· Стопка (Stack panel), вміст групується в послідовному порядку по горизонталі або вертикалі

· Панель з можливістю приховування вмісту (Wrap panel) - якщо вміст не поміщається усередині панелі, наприклад, при зміні розміру панелі, вміст ховається певним чином.

Розташування об'єктів, прив'язки і вирівнювання

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

Рис.2.3 Візуальна прив'язка

Інструмент візуальної прив'язки (Snap) має унікальну властивість (рис. 2.3), а саме зумовлює властивості показувати заданий розмір кордону між елементами (Default margin і Default padding).Ця функція здорово прискорює розташування елементів у формі: достатньо просто викинути елемент на площину і Blend сам покаже потрібні нього відступи.

Візуальна прив'язка дозволяє точно позиціонувати елементи відносно один одного, дотримуючись задані розміри кордонів між елементами, і показує, як ці межі, так і місце розташування елементів відносно один одного і базову лінію тексту (для елементів, що містять текст).

Функція вирівнювання (Align) працює не зовсім звичайно: вирівнювання елементів відбувається не щодо один одного, як це зазвичай практикується в графічних програмах, а щодо Панелі розмітки (Layout Panels), в якій знаходяться елементи, що дуже зручно, але незвично. Якщо елементи знаходяться всередині Таблиці (Grid Panel), то з'являється можливість управляти поведінкою елементів при зміні розмірів вікна програми, є 3 види поведінки:

· Auto - при зміні розмірів таблиці змінюється розмір ув'язнених в неї елементів.

· Pixel - рядок або стовпець таблиці мають фіксоване значення в пікселях.

· Star - змінює розміри елементів аналогічно зміні розмірів у відсотках в HTML.

Дані властивості встановлюються, як на рядки, так і стовпці таблиці і можуть застосовуватися в будь-якій комбінації.

Переваги та недоліки Expression Blend

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

Плюси:

· Зручний мінімалістичний інтерфейс.

· Вбудований редактор векторної графіки з розгалуженим інструментарієм.

· Вбудований редактор XAML з підсвічуванням синтаксису.

· Вбудований компілятор.

· Наявність звичних для дизайнерів «гарячих» клавіш.

· Наявність унікальних інструментів і інтерфейсних рішень.

Мінуси:

· Програма призначена для дизайнерів з хорошими знаннями XAML.

· Вимагає установки .NET Framework 3 або 3.5 (навіть для перегляду готового проекта .exe) і ще бажано Visual Studio (для редагування C# файлів).

· Повільно працює (бета-версія).

· Вимагає втручання в XAML код, тому що не віс властивості можуть встановлюватися з графічного інтерфейсу Blend.

· Стандартні бібліотечні елементи не завжди коректно зверстані, потрібна переробка деяких з них.

· Довідкова система недостатньо опрацьована.

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

Blend і класичні способи створення прототипів інтерфейсів

За великим рахунком, порівняння класичних технологій прототипування інтерфейсів і нової технології WPF - представником якої є Blend, є не зовсім коректним.

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

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

Що несе нова технологія?

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

· Векторна графіка: тепер інтерфейс складається повністю з векторних об'єктів (інтерфейсні елементи, графіка, піктограми).

· Нові екранні шрифти.

· Нова технологія попіксельно позиціонування зображення на екрані.

· Одна програма може містити декілька інтерфейсів (різні дозволи, веб і настільні додатки і т.д.).

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

Висновки до розділу 2

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

Взаємодія між користувачем і комп'ютером (HCI - Human-Computer Interaction) відбувається в інтерфейсі. Основною метою HCI є покращення взаємодії між користувачем і комп'ютером, роблячи комп'ютери більш кориснішими і сприйнятливими до потреб користувачів.

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

електронний інтерфейс дизайн відеоінтерпритатор

3. Аспекти ефективного проектування інтерфейсу користувача компонентів інтегрованого дослідницького середовища «Відеоінтерпритатор 3.0»

3.1 Структура ІДС «Відеоінтерпритатор 3.0», його онтологія та артефакти інтерфейсу користувача

У Херсонському державному університеті створено інтегроване середовище вивчення курсу «Основи алгоритмізації та програмування» WEBOAP. Основною перевагою середовища є організація самостійної роботи та поточний і підсумковий контроль знань студентів. Середовище, яке надає як викладачу, так і студентам усі можливості з ефективного вивчення курсу основ алгоритмізації та програмування.

У інтегрованому середовищі вивчення курсу «Основи алгоритмізації та програмування» пропонується не просто вивчити лексичні конструкції мови програмування, а більш детально зупинитися на способах алгоритмізації та їх широкому застосуванні при розв'язані поставлених задач. Разом із вивченням теоретичного матеріалу пропонується проводити обчислювальний експеримент для вивчення складності і підвищення ефективності алгоритмів. [35].

Обчислювальний експеримент з вивчення ефективності алгоритмів проводиться за допомогою спеціального модуля «Середовище демонстрації».

Дана робота є логічним продовженням розвитку педагогічно-орієнтованих систем підтримки практичної діяльності, які розробляються науково-дослідним інститутом інформаційних технологій Херсонського державного університету, і базується на програмно-методичному комплексі «Відеоінтерпретатор алгоритмів пошуку та сортування» [33].

На даний момент ведеться розробка нової версії середовища демонстрації «Відеоінтерпретатор 3.0» з використанням передових технологій. Вимоги до програми в цілому:

· кросплатформленність;

· універсальність;

· інтерактивність;

· дружність інтерфейсу;

· повторне використання коду;

· оновлення плагінів середовища.

· стандартизація інтерфейсу взаємодії;

· робота з Мовами Програмування Pascal, C, Java;

· послідовний перехід від формування даних до візуалізації, далі у розділ статистики;

· можливість запуску алгоритмів у декількох сесіях.

Нова версія передбачає такі компоненти, які представлені на діаграмі (рис. 3.1).

Рис. 3.1 Компоненти середовища демонстрації

Взаэмодія між основними модулями представлена на діаграмі компонентів. (рис. 3.2)



Рис.3.2 Взаємодія між основними модулями

Модуль «Парсер». Метою цього компоненту є створення інтерпретатору підмножин мов програмування в рамках проекту:

· визначення набору мовних засобів для розв'язання задач сортування;

· порівняння підмножин мов для розв'язання задач сортування та пошуку;

· опис універсальної структури дерев розбору програм;

· створення парсерів виокремлених підмножин цільових мов;

· створення обхідника універсальних дерев розбору програм;

У модулі реалізовано:

· типи даних Integer, Boolean и Data;

· опис констант та змінних, в тому числі і масивів;

· обчислення виразів;

· присвоєння;

· розгалуження (if-then-else);

· цикл (while, repeat);

· складений оператор.

А також планується:

· індексація масиву;

· цикл for;

· підпрограми;

· типи даних Real та String;

· преривання (break) та продовженя (continue) циклу

· оператор вибору (case).

Модуль «Редактор коду» використовується з метою реалізації певного алгоритму на обраній мові програмування у процесі написання програмного коду або скриптів. Кодування є частиною програмування, поряд з аналізом, проектуванням, компіляцією, тестуванням і налагодженням . Користувач пише мовою Паскаль (C, Java) довільний алгоритм з типом Data або вибирає запропоновані алгоритми із колекції системи. (рис. 3. 3)

Рис.3.3 Ескіз модуля «Редактор коду»

Можливості:

· вибір декількох алгоритмів, їх редагування в одній сесії;

· генерація масивів за різними видами розподілу;

· підсвічування синтаксису;

· підсвічування конструкцій, що виповнюються;

· перевірка правильності розташування дужок;

· інтелектуальне введення даних (IntelliSense);

· написання коментарів до коду;

· створення панелі навігації між алгоритмами у редакторі коду;

· звернення блоків коду;

· класифікація алгоритмів за темами при виборі із колекції;

Модуль «Візуалізатор» - візуальний компонент, який реалізує функціональність відображення, анімації алгоритму та управління програмним об'єктом.

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

Можливості:

· бачення екземплярів змінних та їх значення;

· візуалізація основних типі даних, підпрограми (+ рекурсія), порівняння та присвоювання;

· налаштовування візуалізації (запуск, пауза, вимкнення анімації).

Розглянемо деякі ескізи модуля «Візуалізатор»:

· Масиви з невеликою кількістю елементів (рис.3.4 ):

· Масиви з невеликою кількістю елементів (рис. 3.5):

· Типи даних Integer, Boolean та Data (рис. 3.6):

Рис. 3.4



Рис. 3.5

Рис.3.6. Типи даних Integer(а), Boolean True (б), Boolean False(б) та Data(в)

Для проектування загального виду інтерфейсу буде використовуватися золотий перетин.

Золотий перетин - це таке пропорційне ділення відрізка на нерівні частки, при якому весь відрізок так відноситься до більшої частки, як сама велика частка відноситься до меншої: a : b = b : c або c : b = b : a

У даному випадку використовується пропорція 1:4 (рис. 3.7)

Рис. 3.7 Використання золотого перетину

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

Меню було перенесено у верхню ліву частину, а місце основного контенту вниз, як це використано у операційній системі Windows. Це було зроблено виходячи з міркувань, що більшість користувачів звикли до розташування елементів у своїй операційній системі.

Щодо дружності інтерфейсу, то інтерфейс середовища надає можливість скасувати або виправити виконані дії.

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

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

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

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

Модуль «Статистика» застосовується для відображення графіків з даними, які демонструють роботу алгоритмів, їх ефективність. Розглянемо один із артефактів цього компонента. (рис. 3.8)

Рис. 3.8 Модуль «Статистика», аналіз алгоритмів сортування за кількістю порівнянь

У рамках обчислювального експерименту під статистикою будемо розуміти четвірку чисел {N, C, S, T}.

· N-кількість елементів в джерельній структурі даних

· C - кількість порівнянь вироблене алгоритмом

· S - кількість перестановок, вироблене алгоритмом для досягнення упорядкування (пошуку)

· T - час, витрачений на виконання алгоритму.

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

Введемо поняття класу алгоритму. У рамках обчислювального експерименту, будемо розглядати алгоритми двох класів - сортування та пошуку.

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

Тобто у цьому модулі можливе графічне відображення залежності:

· час виконання від кількості елементів;

· кількість порівнянь від кількості елементів;

· кількість перестановок від кількості елементів.

Передбачається експорт даних (перенесення графіку та таблиці) у такі формати: PDF, Xls, Xlsx Txt, Rtf.

Модуль «Плагін-менеджер» надає можливість управляти додатками середовища, кожен із яких має параметри (назва, версія, автор, дата створення, опис). Розглянемо один із артефактів (рис. 3.9):

Рис.3.9 Модуль «Плагін-менеджер»

Модуль відображає:

· поточний (встановлений) плагін;

· доступні плагіни, що можна використовувати;

· нові плагіни, які потрібно завантажити.

Плагіни поділяються на такі категорії:

Інтерпретація. До цієї категорії можна віднести плагіни, що виконують розбір тексту програми та побудову її дерева програми, а також забезпечують обхід цього дерева. Слід зауважити, що замість тексту програми як вхідного параметра, та дерева - як вихідного можуть бути будь-які інші. Провідною ідеєю створення такої одиниці середовища базується на необхідності розширювати множину підтримуваних мов програмування.

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

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

Результати. Модулі результатів слугують для відображення накопиченої під час виконання інформації. Ця інформація може включати різні дані та по-різному відображати її, таким чином доцільність цієї категорії також цілком виправдана.

Середовище. Сюди включаються усі модулі, що розширюють функціональність середовища. До цієї категорії може належати альтернативний плагін-менеджер.

3.2 Створення технічного завдання для підвищення якості інтерфейсу користувача

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

Розглянемо деякі вимоги до інтегрованого дослідницького середовища «Відеоінтерпритатор 3.0». Ознайомитись детальніше (див. додаток)

Призначення розробки

ІДС «Відеоінтерпритатор 3.0» призначений для вивчення розділу «Основи алгоритмізації і програмування». Разом із вивченням теоретичного матеріалу пропонується проводити обчислювальний експеримент для вивчення складності і підвищення ефективності алгоритмів. У процесі такого роду діяльності учень використовує теоретичні знання, придбані на попередніх стадіях навчання, для рішення практичних задач. За допомогою комп'ютерного експерименту студент має можливість зрозуміти особливості певних алгоритмів та усвідомити залежності, що пояснюють їх складність.

Робочими мовами програмування навчання основам програмування обрані мови: Pascal, C, Java.

Клас задач ІДС «Відеоінтерпретатор 3.0» - різні алгоритми обробки масивів даних, у тому числі сортування, пошук унікальних елементів (максимуми, мінімуми і т.п.).

Для того, щоб користуватися програмних засобом, необхідні спеціальні знання та вміння користувача персонального комп'ютера (апаратне обладнання) та операційної системи Windows 98 або 2000 в обсязі оператора: вміння користуватися основними інтерфесними засобами: меню, вікнами, файловою системою тощо. А також, спеціальні знання відповідних засобів мови програмування Pascal, C, Java, які учні мають опановувати в процесі використання даного програмного засобу під час вивчення розділу „Основи алгоритмізації та програмування” .

Запуск програмного засобу

Програма запускається з головного меню або із застосуванням ярлику.

Для початку роботи необхідно вибрати мову програмування (Pascal, C, Java) із випадаючого списку. Далі потрібно вибрати одну із наступних дій:

1. Відкрити із колекції системи.

2. Відкрити із колекції користувача.

3. Відкрити із файлу.

4. Створити новий. Перехід до редактору коду.

Користувач має можливість самостійно вибрати тип алгоритм за бажанням.

Редактор коду

Підсвічування синтаксису програмного коду відповідно до синтаксису мов програмування (Pascal, C, Java). Нумерація рядків, точка зупину програми - зліва відносно тексту програми. Під час виконання програми поточний рядок визначається стрілкою, що знаходиться зліва, поряд з номером рядка.

Над текстом програми, зверху, розташовані кнопки - меню:

· повернутися на крок назад;

· редагувати;

· побудувати дерево;

· генерувати данні;

· виконати алгоритм.

Натиснувши на кнопку меню Редагувати вниз виїжджає панель з основними кнопками для редагування з можливістю викоику через контекстне меню:

· Відкрити. Комбінація клавіш: Ctrl+O. З'являється панель Вибір файлу

· Зберегти. Комбінація клавіш: Ctrl+S. . З'являється екранна форма Зберегти

· Копіювати. Комбінація клавіш: Ctrl+C. Скопіювати виділений фрагмент коду.

· Вставити. Комбінація клавіш: Ctrl+V. Вставити фрагмент коду, що знаходиться у буфері обміну.

· Вирізати. Комбінація клавіш: Ctrl+X. Вирізати виділений фрагмент коду.

· Вперед. Комбінація клавіш: Ctrl+Y. Перейти на крок уперед.

· Назад. Комбінація клавіш: Ctrl+Z. Повернутися на крок назад.

· Друк. Комбінація клавіш: Ctrl+P. Друк тексту програми.

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

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

· за зростанням;

· за спаданням;

· масив з одною екстремальною точкою;

· масив з двома екстремальними точками;

· масив однакових елементів;

· масив випадкових величин, розподілених за нормальним законом.

Візуалізатор

Зверху розташовуються кнопки управлянням візуалізацією:

· виконати;

· керувати.

Натиснувши на кнопку меню Керувати вниз виїжджає панель з основними кнопками для редагування:

· запуск,

· пауза,

· вимкнення анімації.

Візуалізація типів даних, змінних відображає контейнери (зверху - назва змінної, знизу - значення)

· Масиви з невеликою кількістю елементів: набір напівпрозорих колб з рідиною блакитного кольору у контейнері.

· Масиви з невеликою кількістю елементів: стовпчаста діаграма у контейнері.

· Типи даних Integer: напівпрозора колба з рідиною у контейнері.

· Типи даних Data: напівпрозора колба з рідиною у контейнері.

· Типи даних Boolean: лампочка жовтограючого (true) та сірого(false) кольору у контейнері.

Візуалізація порівнянь: колби перелітають на терези, відповідно до значень показується знаки рівності(нерівності) <,>,=. На нижній частині терезів показується логічне значення виконання операції (true or false).

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

3.3 Зручність застосування програмного забезпечення: атрибути та метрики

Для перевірки гіпотези для початку необхідно визначити, які недоліки мала попередня версія. (рис. 3.10) Необхідною також є оцінка користувачами важливості кожного з показників практичності.

Анкета для отримання відгуків користувачів може містити наступні твердження для оцінки (див. додаток Б). Скористаємося такими атрибутами, як:

1. Часова характеристика (Time behavior).

2. Привабливість (Attractiveness).

3. Приємність (Likeability).

4. Гнучкість (Flexibility).

5. Мінімальна дія (Minimal action).

6. Мінімальне навантаження пам'яті (Minimal memory load).

7. Керування користувачем (User guidance).

8. Узгодженість (Consistency).

9. Інформативність (Self-Descriptiveness).

10. Відгук (Feedback).

11. Правильність (Accuracy).

12.Повнота (Completeness).

13. Контрольованість (Controllability).

14. Навігація (Navigability).

15. Простота (Simplicity).

16. Знайомість (Familiarity).

Рис.3.10 «Відеоінтерпретатор алгоритмів сортування і пошуку»

Анкетування проводилось у 4 групах по 15 чоловік, в яких викладається курс «Основи алгоритмізації та програмування». Таким чином, приймало участь 60 чоловік. Студентам було запропоновано виконати завдання, використовуючи «Відеоінтерпретатор пошуку та сортування».

Користувачі висловили свою думку щодо зручності використання ПЗ,застосовуючи наступну шкалу: 5 = Абсолютно згоден, 4 = Згоден, 3 = Більше згоден, ніж не згоден, 2 = Не згоден, 1 = Категорично не згоден.

На діаграмі 3.11 показані результати анкетування ПЗ «Відеоінтерпретатор алгоритмів сортування і пошуку».

Рис. 3.11 Середні показники оцінювання ПЗ «Відеоінтерпретатор алгоритмів сортування і пошуку»

Можна сказати, що пункти 1, 9, 10,11студенти оцінили на високому рівні. Це свідчить про те, що ПЗ демонструє чітко виражене призначення, ефективно відповідає на дії користувача, а також забезпечує правильне виконання дій та точні результати. Пункти 5, 6, 15 студенти оцінили на достатньому рівні, тобто ефективність роботи з ПЗ можна ще покращити.

Пункти 2, 3, 8, 12, 13, 14 користувачі оцінили на середньому рівні, а саме: привабливість, приємність, узгодженість, повноту, контрольованість та навігацію. Це означає, що задоволеність від роботи знизилась.

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

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

Розглянемо порівняльну таблицю (табл. 3.1) версій «Відеоінтерпритатор алгоритмів пошуку та сортування» та «Відеоінтерпритатор 3.0»

Таблиця 3.1 Порівняльна характеристика

Критерії	«Відеоінтерпритатор алгоритмів пошуку та сортування»	«Відеоінтерпритатор 3.0»
Використання «золотого перетину»	Пропорція 1:4	Пропорція 1:4
Робоча мова програмування	Pascal	Pascal, C, Java
Можливість редагування коду	Ні	Так
Використання віджетів для легкості сприйняття	Ні	Так
Генерація масиву	Генератор випадково; за зростанням; за спаданням; рівномірне розподілення за 2-ма значеннями; рівномірне розподілення за 3-ма значеннями; вверх-вниз; вверх-вниз-верх; вниз-вверх; вниз-вверх-вниз; Клавіатура	Генератор за зростанням; за спаданням; масив з одною екстремальною точкою; масив з двома екстремальними точками; масив однакових елементів; масив випадкових величин, розподілених за нормальним законом.
Підсвічування синтаксису	Так (2 кольори)	Так (стандартне підсвічування, як у Visual Studio)
Підсвічування конструкцій що виповнюються	Так	Так (стандартне підсвічування, як у Visual Studio - стрілка зліва від програмного коду)
Перевірка коду на помилки	Ні	Так Панель «Error»: катастрофічні помилки та попередження
Написання коментарів до коду	Ні	Так
Інтелектуальне введення даних (IntelliSense)	Ні	Так
Відкриття декількох алгоритмів одночасно	Ні	Так (табуляція між вкладками)
Звернення блоків коду	Ні	Так
Класифікація алгоритмів за темами при виборі із колекції	Ні	Так
Панель бачення екземплярів змінних та їх значення	Ні	Так
Налаштовування візуалізації	· Виконати · Пауза · Продовжити · Стоп · Наступний крок · Швидкість	· Виконати · Пауза · Вимкнення анімації · Швидкість
Можливість запуску алгоритмів у декількох сесіях	Ні	Так
Графічне відображення залежності	Ні	Так
Експорт даних з розділу статистики	Ні	Так (PDF, Xls, Xlsx Txt, Rtf)
Оновлення плагінів	Ні	Так

Можна сказати, що нова версія буде більш гнучкою, привабливою, приємною, узгодженою, простою. Але зауважимо, що функціональність «Відеоінтерпритатор алгоритмів пошуку та сортування» створена на достатньому рівні. Але з розвитком технологій виникла необхідність модернізувати програмний продукт для більш зручного використання та наповненням ПЗ більшою функціональністю.

Висновки до розділу 3

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

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

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

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

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

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

Висновки

Інтерфейс користувача - це та частина програмного продукту, що знаходиться перед очима. Деякі програмісти схильні залишати дизайн на потім, вважаючи, що реальні переваги додатків - його програмний код, що вимагає більшої уваги. Проте більшість програмних засобів занадто важко використовувати. Такий висновок витікає із більшості результатів тестування зручності, практичного спостереження та особистого досвіду проектувальників програмних засобів. Фактично, інтерфейс користувача - це канал, по якому здійснюється взаємодія користувача і програми.

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

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

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

Два фактори - інтерфейс користувача і форма подання даних - істотно впливають на продуктивність праці, якість навчання й ефективність використання комп'ютерів.

У процесі роботи було проаналізовано значну кількість науково-методичної літератури з інформатики та програмування, детально розглянуто структуру курсу «Основи алгоритмізації та програмування». На основі дослідження було створено інтерфейс, що побудований на основних принципах проектування інтерфейсу користувача.

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

В результаті роботи створено:

· зручний редактор коду;

· вдосконалений візуалізатор;

· додатковий розділ статистики.

Також було запропоновано варіант анкети для збору відгуків користувачів щодо зручності використання програмного забезпечення. Результати дослідження дають змогу зробити висновок, що попередня версія програмного продукту є не досить зручною у використанні. Це дало підстави модернізувати інтерфейс користувача нової версії інтегрованого дослідницького середовища «Відеоінтерпритатор 3.0».

Усі завдання, що поставлені в дослідженні, було виконано. Результатом роботи є інтегроване дослідницьке середовище «Відеоінтерпритатор 3.0».

...