Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
S C I E N C E P A S S I O N T E C H N O L O G Y
www.tugraz.at
Design and Evaluation
of an User Interface
for an Interactio...
2
Design and Evaluation of an UI for an Interaction Supported Video Platform
Content
1. Introduction
2. UI Implementation ...
3
Design and Evaluation of an UI for an Interaction Supported Video Platform
Graz University of Technology
IT Services – U...
4
Introduction
Motivation
due to MOOCs learning videos are more and more in
use
interaction and communication in different...
5
Introduction
Web-Application named LIVE
on-demand video or live-broadcasting
attention analysis
different methods of int...
6
Introduction
Interactions during a Video
Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learn...
7
UI Implementation & Usability Study
Usability Study
heuristic evaluation at each revision of the UI
a few experts who ar...
8
UI Implementation & Usability Study
Basics
web framework “Bootstrap”
“red” as the main color of the design
typography is...
9
UI Implementation & Usability Study
Desktop View
(1) header, (2) main menu, (3) content area, (4) footer
Josef Wachtler,...
10
UI Implementation & Usability Study
Mobile View
left: menu is hidden behind the “Hamburger Icon” (1);
right: expanded m...
11
UI Implementation & Usability Study
Interaction Method Boxes
listing of the interaction methods and linking to further
...
12
UI Implementation & Usability Study
History Timeline
the history displays when and how long an user
watched a video
a p...
13
UI Implementation & Usability Study
Multiple Choice Questions
shows the answer to the multiple choice questions
1st ver...
14
UI Implementation & Usability Study
URL Design
URLs are also part of the UI
directory structure corresponds to the navi...
15
Field Study
Setting
used at the lecture “Logic and Computability”
consists of 13 videos
is attended by 25 to 70 users p...
16
Field Study
Positive Remarks
the structure of the main menu is clear and consistent
it is easy to find requested pages
t...
17
Field Study
Negative Remarks
the history timeline does not show a marked area if
the joined timespan to mark is very sh...
18
Conclusion and Outlook
Conclusion and Outlook
development and evaluation of the user interface of a
video platform
the ...
19
Thank you ...
... for your attention!
Questions?
Josef Wachtler, josef.wachtler@tugraz.at
Gerald Geier, gerald.geier@st...
Nächste SlideShare
Wird geladen in …5
×

Design and Evaluation of an User Interface for an Interaction Supported Video Platform

2.242 Aufrufe

Veröffentlicht am

Presentation at uDAy XIII, Dornbirn, Austria, June 2015

Veröffentlicht in: Bildung
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

Design and Evaluation of an User Interface for an Interaction Supported Video Platform

  1. 1. S C I E N C E P A S S I O N T E C H N O L O G Y www.tugraz.at Design and Evaluation of an User Interface for an Interaction Supported Video Platform Josef Wachtler, Gerald Geier and Martin Ebner IT Services - Unit Social Learning - TU Graz uDay 2015
  2. 2. 2 Design and Evaluation of an UI for an Interaction Supported Video Platform Content 1. Introduction 2. UI Implementation & Usability Study 3. Field Study 4. Conclusion and Outlook Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU Graz uDay 2015
  3. 3. 3 Design and Evaluation of an UI for an Interaction Supported Video Platform Graz University of Technology IT Services – Unit Social Learning Europe, Austria, Graz http://www.tugraz.at Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU Graz uDay 2015
  4. 4. 4 Introduction Motivation due to MOOCs learning videos are more and more in use interaction and communication in different forms and directions are important UI needs to be easily accessible to provide a remarkable user experience “users don’t visit Web sites to experience the joy of navigation” Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU Graz uDay 2015
  5. 5. 5 Introduction Web-Application named LIVE on-demand video or live-broadcasting attention analysis different methods of interaction: automatically asked questions and captchas asking questions to the lecturer asking text-based questions to the attendees multiple-choice questions at pre-defined positions Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU Graz uDay 2015
  6. 6. 6 Introduction Interactions during a Video Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU Graz uDay 2015
  7. 7. 7 UI Implementation & Usability Study Usability Study heuristic evaluation at each revision of the UI a few experts who are testing the UI according to predefined heuristics with three to five evaluators it is possible to identify 75% of the usability problems Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU Graz uDay 2015
  8. 8. 8 UI Implementation & Usability Study Basics web framework “Bootstrap” “red” as the main color of the design typography is based on “Helvetica Neue” with a fallback to similar sans-serif fonts fully responsive design ranging from small mobile phones to large desktop screens Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU Graz uDay 2015
  9. 9. 9 UI Implementation & Usability Study Desktop View (1) header, (2) main menu, (3) content area, (4) footer Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU Graz uDay 2015
  10. 10. 10 UI Implementation & Usability Study Mobile View left: menu is hidden behind the “Hamburger Icon” (1); right: expanded menu Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU Graz uDay 2015
  11. 11. 11 UI Implementation & Usability Study Interaction Method Boxes listing of the interaction methods and linking to further information 1st version: the whole boxes were used as a link users did not realize that the boxes act also as links final version: adding an “information” icon to every box and a click shows a tooltip with the links to the additional information Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU Graz uDay 2015
  12. 12. 12 UI Implementation & Usability Study History Timeline the history displays when and how long an user watched a video a progress bar acts as a timeline where the duration of the activity is marked a tooltip contains shows some statistical information Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU Graz uDay 2015
  13. 13. 13 UI Implementation & Usability Study Multiple Choice Questions shows the answer to the multiple choice questions 1st version: two columns for correct/wrong users did not understand the meaning of the two columns final version: one column for correct/wrong Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU Graz uDay 2015
  14. 14. 14 UI Implementation & Usability Study URL Design URLs are also part of the UI directory structure corresponds to the navigation bar hierarchical design allows moving upwards by removing the end of the URL meaningful parts of the URL help to guess it URLs are easy to type (e.g. no special characters, ...) Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU Graz uDay 2015
  15. 15. 15 Field Study Setting used at the lecture “Logic and Computability” consists of 13 videos is attended by 25 to 70 users per video the users and the lecturer were asked to provide feedback Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU Graz uDay 2015
  16. 16. 16 Field Study Positive Remarks the structure of the main menu is clear and consistent it is easy to find requested pages the color schema and the font is well readable and not offensive Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU Graz uDay 2015
  17. 17. 17 Field Study Negative Remarks the history timeline does not show a marked area if the joined timespan to mark is very short and the width of the screen is small adding a multiple choice question is tricky because it is difficult to find the position in the video where the question should be inserted chronologically ordered videos are slowing down the usage because the latest (and typically requested) video is the last Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU Graz uDay 2015
  18. 18. 18 Conclusion and Outlook Conclusion and Outlook development and evaluation of the user interface of a video platform the usability study and the field study point out that the approach is basically working some suggestions for improvement which should be adapted in a future version Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU Graz uDay 2015
  19. 19. 19 Thank you ... ... for your attention! Questions? Josef Wachtler, josef.wachtler@tugraz.at Gerald Geier, gerald.geier@student.tugraz.at Martin Ebner, martin.ebner@tugraz.at Graz University of Technology IT Services – Unit Social Learning M¨unzgrabenstraße 35A, A-8010 Graz http://elearningblog.tugraz.at Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU Graz uDay 2015

×