Presentation at uDAy XIII, Dornbirn, Austria, June 2015

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
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
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
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
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
Introduction
Interactions during a Video
Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU Graz
uDay 2015

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
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
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
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
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
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
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
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
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
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
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
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
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