design and evaluation of an user interface for an interaction supported video platform
TRANSCRIPT
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 Evaluationof an User Interfacefor an Interaction SupportedVideo PlatformJosef Wachtler, Gerald Geier and Martin EbnerIT Services - Unit Social Learning - TU Graz
uDay 2015
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 GrazuDay 2015
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 GrazuDay 2015
4
Introduction
Motivation
due to MOOCs learning videos are more and more inuse
interaction and communication in different forms anddirections are important
UI needs to be easily accessible to provide aremarkable user experience
“users don’t visit Web sites to experience the joy ofnavigation”
Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU GrazuDay 2015
5
Introduction
Web-Application named LIVE
on-demand video or live-broadcasting
attention analysis
different methods of interaction:
automatically asked questions and captchasasking questions to the lecturerasking text-based questions to the attendeesmultiple-choice questions at pre-defined positions
Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU GrazuDay 2015
6
Introduction
Interactions during a Video
Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU GrazuDay 2015
7
UI Implementation & Usability Study
Usability Study
heuristic evaluation at each revision of the UI
a few experts who are testing the UI according topredefined heuristics
with three to five evaluators it is possible to identify75% of the usability problems
Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU GrazuDay 2015
8
UI Implementation & Usability Study
Basics
web framework “Bootstrap”
“red” as the main color of the design
typography is based on “Helvetica Neue” with afallback to similar sans-serif fonts
fully responsive design ranging from small mobilephones to large desktop screens
Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU GrazuDay 2015
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 GrazuDay 2015
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 GrazuDay 2015
11
UI Implementation & Usability Study
Interaction Method Boxes
listing of the interaction methods and linking to furtherinformation
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 everybox and a click shows a tooltip with the links to theadditional information
Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU GrazuDay 2015
12
UI Implementation & Usability Study
History Timeline
the history displays when and how long an userwatched a videoa progress bar acts as a timeline where the durationof the activity is markeda tooltip contains shows some statistical information
Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU GrazuDay 2015
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 twocolumns
final version: one column for correct/wrong
Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU GrazuDay 2015
14
UI Implementation & Usability Study
URL Design
URLs are also part of the UIdirectory structure corresponds to the navigation barhierarchical design allows moving upwards byremoving the end of the URLmeaningful parts of the URL help to guess itURLs are easy to type (e.g. no special characters, ...)
Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU GrazuDay 2015
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 providefeedback
Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU GrazuDay 2015
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 andnot offensive
Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU GrazuDay 2015
17
Field Study
Negative Remarks
the history timeline does not show a marked area ifthe joined timespan to mark is very short and thewidth of the screen is small
adding a multiple choice question is tricky because itis difficult to find the position in the video where thequestion should be inserted
chronologically ordered videos are slowing down theusage because the latest (and typically requested)video is the last
Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU GrazuDay 2015
18
Conclusion and Outlook
Conclusion and Outlook
development and evaluation of the user interface of avideo platform
the usability study and the field study point out thatthe approach is basically working
some suggestions for improvement which should beadapted in a future version
Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU GrazuDay 2015
19 Thank you ...
... for your attention!Questions?
Josef Wachtler, [email protected] Geier, [email protected] Ebner, [email protected]
Graz University of TechnologyIT Services – Unit Social LearningMunzgrabenstraße 35A, A-8010 Grazhttp://elearningblog.tugraz.at
Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU GrazuDay 2015