SlideShare ist ein Scribd-Unternehmen logo
1 von 19
Downloaden Sie, um offline zu lesen
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
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
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
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
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
Introduction
Interactions during a Video
Josef Wachtler, Gerald Geier and Martin Ebner , IT Services - Unit Social Learning - TU Graz
uDay 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 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
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
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
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
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
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
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
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
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
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
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
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
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

Weitere ähnliche Inhalte

Andere mochten auch

Heuristic Evaluation for Dota 2-The application of usability principles for g...
Heuristic Evaluation for Dota 2-The application of usability principles for g...Heuristic Evaluation for Dota 2-The application of usability principles for g...
Heuristic Evaluation for Dota 2-The application of usability principles for g...Shengzhe Wang
 
Lecture 5: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 5: Human-Computer Interaction Course (2015) @VU University AmsterdamLecture 5: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 5: Human-Computer Interaction Course (2015) @VU University AmsterdamLora Aroyo
 
User Interface Design @iRajLal
User Interface Design @iRajLalUser Interface Design @iRajLal
User Interface Design @iRajLalRaj Lal
 
Mobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best PracticesMobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best PracticesOXD
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principlesDavid Little
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTvicci4041
 
01 intro to programming in .net
01   intro to programming in .net01   intro to programming in .net
01 intro to programming in .netFelisha Hosein
 

Andere mochten auch (8)

Heuristic Evaluation for Dota 2-The application of usability principles for g...
Heuristic Evaluation for Dota 2-The application of usability principles for g...Heuristic Evaluation for Dota 2-The application of usability principles for g...
Heuristic Evaluation for Dota 2-The application of usability principles for g...
 
Lecture 5: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 5: Human-Computer Interaction Course (2015) @VU University AmsterdamLecture 5: Human-Computer Interaction Course (2015) @VU University Amsterdam
Lecture 5: Human-Computer Interaction Course (2015) @VU University Amsterdam
 
User Interface Design @iRajLal
User Interface Design @iRajLalUser Interface Design @iRajLal
User Interface Design @iRajLal
 
Mobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best PracticesMobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best Practices
 
How to Teach UX Design
How to Teach UX DesignHow to Teach UX Design
How to Teach UX Design
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principles
 
USER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPTUSER INTERFACE DESIGN PPT
USER INTERFACE DESIGN PPT
 
01 intro to programming in .net
01   intro to programming in .net01   intro to programming in .net
01 intro to programming in .net
 

Ähnlich wie Design and Evaluation of a Video Platform UI

Impacts of Interactions in Learning-Videos: A Subjective and Objective Analysis
Impacts of Interactions in Learning-Videos: A Subjective and Objective AnalysisImpacts of Interactions in Learning-Videos: A Subjective and Objective Analysis
Impacts of Interactions in Learning-Videos: A Subjective and Objective AnalysisMartin Ebner
 
Mobile Learning Content Development
Mobile Learning Content DevelopmentMobile Learning Content Development
Mobile Learning Content DevelopmentDimas Prasetyo
 
Development of reporting damaged road condition application using user center...
Development of reporting damaged road condition application using user center...Development of reporting damaged road condition application using user center...
Development of reporting damaged road condition application using user center...Soleman Universitas Borobudur
 
City i-Tick: The android based mobile application for students’ attendance at...
City i-Tick: The android based mobile application for students’ attendance at...City i-Tick: The android based mobile application for students’ attendance at...
City i-Tick: The android based mobile application for students’ attendance at...journalBEEI
 
TCC TAM applied to online education
TCC TAM applied to online educationTCC TAM applied to online education
TCC TAM applied to online educationNational University
 
Unified user experience for toshiba products
Unified user experience for toshiba productsUnified user experience for toshiba products
Unified user experience for toshiba productsFlavio Fabiani
 
Android Based E-Learning Application Class-E
Android Based E-Learning Application Class-EAndroid Based E-Learning Application Class-E
Android Based E-Learning Application Class-EIRJET Journal
 
Minor Project Synopsis on Data Structure Visualizer
Minor Project Synopsis on Data Structure VisualizerMinor Project Synopsis on Data Structure Visualizer
Minor Project Synopsis on Data Structure VisualizerRonitShrivastava057
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyCHI UX Indonesia
 
Embedding usability in your organisation
Embedding usability in your organisationEmbedding usability in your organisation
Embedding usability in your organisationMichele Ide-Smith
 
Increasing Learning Efficiency and Quality of Students Homework by Attendance...
Increasing Learning Efficiency and Quality of Students Homework by Attendance...Increasing Learning Efficiency and Quality of Students Homework by Attendance...
Increasing Learning Efficiency and Quality of Students Homework by Attendance...Martin Ebner
 
Usability: Part of User Experience (UX)
Usability: Part of User Experience (UX)Usability: Part of User Experience (UX)
Usability: Part of User Experience (UX)Edneil Jocusol
 
The journey to build a more usable toolbar for Drupal 8
The journey to build a more usable toolbar for Drupal 8 The journey to build a more usable toolbar for Drupal 8
The journey to build a more usable toolbar for Drupal 8 dcmistry
 
Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI Michelle Reyes
 

Ähnlich wie Design and Evaluation of a Video Platform UI (20)

Perceived Usability, Attractiveness and Intuitiveness of Responsive Mobile To...
Perceived Usability, Attractiveness and Intuitiveness of Responsive Mobile To...Perceived Usability, Attractiveness and Intuitiveness of Responsive Mobile To...
Perceived Usability, Attractiveness and Intuitiveness of Responsive Mobile To...
 
Short intro: Chung-Ching Huang
Short intro: Chung-Ching HuangShort intro: Chung-Ching Huang
Short intro: Chung-Ching Huang
 
Impacts of Interactions in Learning-Videos: A Subjective and Objective Analysis
Impacts of Interactions in Learning-Videos: A Subjective and Objective AnalysisImpacts of Interactions in Learning-Videos: A Subjective and Objective Analysis
Impacts of Interactions in Learning-Videos: A Subjective and Objective Analysis
 
Mobile Learning Content Development
Mobile Learning Content DevelopmentMobile Learning Content Development
Mobile Learning Content Development
 
Newleaks
NewleaksNewleaks
Newleaks
 
final ppt.pptx
final ppt.pptxfinal ppt.pptx
final ppt.pptx
 
Critical usability-evaluation of mobile device applications for m-learning pu...
Critical usability-evaluation of mobile device applications for m-learning pu...Critical usability-evaluation of mobile device applications for m-learning pu...
Critical usability-evaluation of mobile device applications for m-learning pu...
 
Development of reporting damaged road condition application using user center...
Development of reporting damaged road condition application using user center...Development of reporting damaged road condition application using user center...
Development of reporting damaged road condition application using user center...
 
City i-Tick: The android based mobile application for students’ attendance at...
City i-Tick: The android based mobile application for students’ attendance at...City i-Tick: The android based mobile application for students’ attendance at...
City i-Tick: The android based mobile application for students’ attendance at...
 
TCC TAM applied to online education
TCC TAM applied to online educationTCC TAM applied to online education
TCC TAM applied to online education
 
Sikuli script
Sikuli scriptSikuli script
Sikuli script
 
Unified user experience for toshiba products
Unified user experience for toshiba productsUnified user experience for toshiba products
Unified user experience for toshiba products
 
Android Based E-Learning Application Class-E
Android Based E-Learning Application Class-EAndroid Based E-Learning Application Class-E
Android Based E-Learning Application Class-E
 
Minor Project Synopsis on Data Structure Visualizer
Minor Project Synopsis on Data Structure VisualizerMinor Project Synopsis on Data Structure Visualizer
Minor Project Synopsis on Data Structure Visualizer
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
 
Embedding usability in your organisation
Embedding usability in your organisationEmbedding usability in your organisation
Embedding usability in your organisation
 
Increasing Learning Efficiency and Quality of Students Homework by Attendance...
Increasing Learning Efficiency and Quality of Students Homework by Attendance...Increasing Learning Efficiency and Quality of Students Homework by Attendance...
Increasing Learning Efficiency and Quality of Students Homework by Attendance...
 
Usability: Part of User Experience (UX)
Usability: Part of User Experience (UX)Usability: Part of User Experience (UX)
Usability: Part of User Experience (UX)
 
The journey to build a more usable toolbar for Drupal 8
The journey to build a more usable toolbar for Drupal 8 The journey to build a more usable toolbar for Drupal 8
The journey to build a more usable toolbar for Drupal 8
 
Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI Intelligent Design - Transitioning UX into UI
Intelligent Design - Transitioning UX into UI
 

Mehr von Martin Ebner

Digitalisierung der Lehre – warum, wozu, wie?
Digitalisierung der Lehre –  warum, wozu, wie?Digitalisierung der Lehre –  warum, wozu, wie?
Digitalisierung der Lehre – warum, wozu, wie?Martin Ebner
 
Evaluation Design for Learning with Mixed Reality in Mining Education based o...
Evaluation Design for Learning with Mixed Reality in Mining Education based o...Evaluation Design for Learning with Mixed Reality in Mining Education based o...
Evaluation Design for Learning with Mixed Reality in Mining Education based o...Martin Ebner
 
Effects of Remote Learning on Practitioner Integration
Effects of Remote Learning on Practitioner IntegrationEffects of Remote Learning on Practitioner Integration
Effects of Remote Learning on Practitioner IntegrationMartin Ebner
 
Making of an Open Makerspace in a Secondary Vocational School in Austria: Dev...
Making of an Open Makerspace in a Secondary Vocational School in Austria: Dev...Making of an Open Makerspace in a Secondary Vocational School in Austria: Dev...
Making of an Open Makerspace in a Secondary Vocational School in Austria: Dev...Martin Ebner
 
The relation of prior IT usage, IT skills and field of study: A multiple corr...
The relation of prior IT usage, IT skills and field of study: A multiple corr...The relation of prior IT usage, IT skills and field of study: A multiple corr...
The relation of prior IT usage, IT skills and field of study: A multiple corr...Martin Ebner
 
Change of IT equipment and communication applications used by first-semester ...
Change of IT equipment and communication applications used by first-semester ...Change of IT equipment and communication applications used by first-semester ...
Change of IT equipment and communication applications used by first-semester ...Martin Ebner
 
School Start Screening Tool
School Start Screening ToolSchool Start Screening Tool
School Start Screening ToolMartin Ebner
 
Speech-based Learning with Amazon Alexa
Speech-based Learning with Amazon AlexaSpeech-based Learning with Amazon Alexa
Speech-based Learning with Amazon AlexaMartin Ebner
 
www – was wirkt weiter? Hochschule virtuell
www – was wirkt weiter? Hochschule virtuellwww – was wirkt weiter? Hochschule virtuell
www – was wirkt weiter? Hochschule virtuellMartin Ebner
 
TU Graz Lessons Learnt COVID-19 & Digitalisierungsprojekte in der Lehre
TU Graz Lessons Learnt COVID-19 & Digitalisierungsprojekte in der LehreTU Graz Lessons Learnt COVID-19 & Digitalisierungsprojekte in der Lehre
TU Graz Lessons Learnt COVID-19 & Digitalisierungsprojekte in der LehreMartin Ebner
 
Digitale Kompetenzen – vom europäischen Rahmenwerk zum Online-Kurs
Digitale Kompetenzen – vom europäischen Rahmenwerk zum Online-KursDigitale Kompetenzen – vom europäischen Rahmenwerk zum Online-Kurs
Digitale Kompetenzen – vom europäischen Rahmenwerk zum Online-KursMartin Ebner
 
MOOC map (Version 3)
MOOC map (Version 3)MOOC map (Version 3)
MOOC map (Version 3)Martin Ebner
 
ReDesign your lecture Canvas [eng]
ReDesign your lecture Canvas [eng]ReDesign your lecture Canvas [eng]
ReDesign your lecture Canvas [eng]Martin Ebner
 
ReDesign your lecture Canvas [de]
ReDesign your lecture Canvas [de]ReDesign your lecture Canvas [de]
ReDesign your lecture Canvas [de]Martin Ebner
 
MOOC-Maker Canvas [eng]
MOOC-Maker Canvas [eng]MOOC-Maker Canvas [eng]
MOOC-Maker Canvas [eng]Martin Ebner
 
MOOC-Maker Canvas [de]
MOOC-Maker Canvas [de]MOOC-Maker Canvas [de]
MOOC-Maker Canvas [de]Martin Ebner
 
Digitale Lehre in Zeiten von COVID-19 an einer Technischen Universität
Digitale Lehre in Zeiten von COVID-19 an einer Technischen UniversitätDigitale Lehre in Zeiten von COVID-19 an einer Technischen Universität
Digitale Lehre in Zeiten von COVID-19 an einer Technischen UniversitätMartin Ebner
 
MOOCs als Teil des zukünftigen digitalen Lernens
MOOCs als Teil des zukünftigen digitalen Lernens MOOCs als Teil des zukünftigen digitalen Lernens
MOOCs als Teil des zukünftigen digitalen Lernens Martin Ebner
 
Der Ansatz der „Citizen Science“ bei der Erstellung von Lehrmaterialien in ei...
Der Ansatz der „Citizen Science“ bei der Erstellung von Lehrmaterialien in ei...Der Ansatz der „Citizen Science“ bei der Erstellung von Lehrmaterialien in ei...
Der Ansatz der „Citizen Science“ bei der Erstellung von Lehrmaterialien in ei...Martin Ebner
 

Mehr von Martin Ebner (20)

Maker Education
Maker EducationMaker Education
Maker Education
 
Digitalisierung der Lehre – warum, wozu, wie?
Digitalisierung der Lehre –  warum, wozu, wie?Digitalisierung der Lehre –  warum, wozu, wie?
Digitalisierung der Lehre – warum, wozu, wie?
 
Evaluation Design for Learning with Mixed Reality in Mining Education based o...
Evaluation Design for Learning with Mixed Reality in Mining Education based o...Evaluation Design for Learning with Mixed Reality in Mining Education based o...
Evaluation Design for Learning with Mixed Reality in Mining Education based o...
 
Effects of Remote Learning on Practitioner Integration
Effects of Remote Learning on Practitioner IntegrationEffects of Remote Learning on Practitioner Integration
Effects of Remote Learning on Practitioner Integration
 
Making of an Open Makerspace in a Secondary Vocational School in Austria: Dev...
Making of an Open Makerspace in a Secondary Vocational School in Austria: Dev...Making of an Open Makerspace in a Secondary Vocational School in Austria: Dev...
Making of an Open Makerspace in a Secondary Vocational School in Austria: Dev...
 
The relation of prior IT usage, IT skills and field of study: A multiple corr...
The relation of prior IT usage, IT skills and field of study: A multiple corr...The relation of prior IT usage, IT skills and field of study: A multiple corr...
The relation of prior IT usage, IT skills and field of study: A multiple corr...
 
Change of IT equipment and communication applications used by first-semester ...
Change of IT equipment and communication applications used by first-semester ...Change of IT equipment and communication applications used by first-semester ...
Change of IT equipment and communication applications used by first-semester ...
 
School Start Screening Tool
School Start Screening ToolSchool Start Screening Tool
School Start Screening Tool
 
Speech-based Learning with Amazon Alexa
Speech-based Learning with Amazon AlexaSpeech-based Learning with Amazon Alexa
Speech-based Learning with Amazon Alexa
 
www – was wirkt weiter? Hochschule virtuell
www – was wirkt weiter? Hochschule virtuellwww – was wirkt weiter? Hochschule virtuell
www – was wirkt weiter? Hochschule virtuell
 
TU Graz Lessons Learnt COVID-19 & Digitalisierungsprojekte in der Lehre
TU Graz Lessons Learnt COVID-19 & Digitalisierungsprojekte in der LehreTU Graz Lessons Learnt COVID-19 & Digitalisierungsprojekte in der Lehre
TU Graz Lessons Learnt COVID-19 & Digitalisierungsprojekte in der Lehre
 
Digitale Kompetenzen – vom europäischen Rahmenwerk zum Online-Kurs
Digitale Kompetenzen – vom europäischen Rahmenwerk zum Online-KursDigitale Kompetenzen – vom europäischen Rahmenwerk zum Online-Kurs
Digitale Kompetenzen – vom europäischen Rahmenwerk zum Online-Kurs
 
MOOC map (Version 3)
MOOC map (Version 3)MOOC map (Version 3)
MOOC map (Version 3)
 
ReDesign your lecture Canvas [eng]
ReDesign your lecture Canvas [eng]ReDesign your lecture Canvas [eng]
ReDesign your lecture Canvas [eng]
 
ReDesign your lecture Canvas [de]
ReDesign your lecture Canvas [de]ReDesign your lecture Canvas [de]
ReDesign your lecture Canvas [de]
 
MOOC-Maker Canvas [eng]
MOOC-Maker Canvas [eng]MOOC-Maker Canvas [eng]
MOOC-Maker Canvas [eng]
 
MOOC-Maker Canvas [de]
MOOC-Maker Canvas [de]MOOC-Maker Canvas [de]
MOOC-Maker Canvas [de]
 
Digitale Lehre in Zeiten von COVID-19 an einer Technischen Universität
Digitale Lehre in Zeiten von COVID-19 an einer Technischen UniversitätDigitale Lehre in Zeiten von COVID-19 an einer Technischen Universität
Digitale Lehre in Zeiten von COVID-19 an einer Technischen Universität
 
MOOCs als Teil des zukünftigen digitalen Lernens
MOOCs als Teil des zukünftigen digitalen Lernens MOOCs als Teil des zukünftigen digitalen Lernens
MOOCs als Teil des zukünftigen digitalen Lernens
 
Der Ansatz der „Citizen Science“ bei der Erstellung von Lehrmaterialien in ei...
Der Ansatz der „Citizen Science“ bei der Erstellung von Lehrmaterialien in ei...Der Ansatz der „Citizen Science“ bei der Erstellung von Lehrmaterialien in ei...
Der Ansatz der „Citizen Science“ bei der Erstellung von Lehrmaterialien in ei...
 

Kürzlich hochgeladen

How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17Celine George
 
Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...
Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...
Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...HetalPathak10
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...Nguyen Thanh Tu Collection
 
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptx
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptxMan or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptx
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptxDhatriParmar
 
ICS 2208 Lecture Slide Notes for Topic 6
ICS 2208 Lecture Slide Notes for Topic 6ICS 2208 Lecture Slide Notes for Topic 6
ICS 2208 Lecture Slide Notes for Topic 6Vanessa Camilleri
 
Tree View Decoration Attribute in the Odoo 17
Tree View Decoration Attribute in the Odoo 17Tree View Decoration Attribute in the Odoo 17
Tree View Decoration Attribute in the Odoo 17Celine George
 
The role of Geography in climate education: science and active citizenship
The role of Geography in climate education: science and active citizenshipThe role of Geography in climate education: science and active citizenship
The role of Geography in climate education: science and active citizenshipKarl Donert
 
How to Uninstall a Module in Odoo 17 Using Command Line
How to Uninstall a Module in Odoo 17 Using Command LineHow to Uninstall a Module in Odoo 17 Using Command Line
How to Uninstall a Module in Odoo 17 Using Command LineCeline George
 
CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...
CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...
CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...Nguyen Thanh Tu Collection
 
DiskStorage_BasicFileStructuresandHashing.pdf
DiskStorage_BasicFileStructuresandHashing.pdfDiskStorage_BasicFileStructuresandHashing.pdf
DiskStorage_BasicFileStructuresandHashing.pdfChristalin Nelson
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...Nguyen Thanh Tu Collection
 
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...DhatriParmar
 
Objectives n learning outcoms - MD 20240404.pptx
Objectives n learning outcoms - MD 20240404.pptxObjectives n learning outcoms - MD 20240404.pptx
Objectives n learning outcoms - MD 20240404.pptxMadhavi Dharankar
 
An Overview of the Calendar App in Odoo 17 ERP
An Overview of the Calendar App in Odoo 17 ERPAn Overview of the Calendar App in Odoo 17 ERP
An Overview of the Calendar App in Odoo 17 ERPCeline George
 
Mythology Quiz-4th April 2024, Quiz Club NITW
Mythology Quiz-4th April 2024, Quiz Club NITWMythology Quiz-4th April 2024, Quiz Club NITW
Mythology Quiz-4th April 2024, Quiz Club NITWQuiz Club NITW
 
Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...
Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...
Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...Osopher
 
6 ways Samsung’s Interactive Display powered by Android changes the classroom
6 ways Samsung’s Interactive Display powered by Android changes the classroom6 ways Samsung’s Interactive Display powered by Android changes the classroom
6 ways Samsung’s Interactive Display powered by Android changes the classroomSamsung Business USA
 

Kürzlich hochgeladen (20)

How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17
 
Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...
Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...
Satirical Depths - A Study of Gabriel Okara's Poem - 'You Laughed and Laughed...
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...
BÀI TẬP BỔ TRỢ TIẾNG ANH 11 THEO ĐƠN VỊ BÀI HỌC - CẢ NĂM - CÓ FILE NGHE (GLOB...
 
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptx
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptxMan or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptx
Man or Manufactured_ Redefining Humanity Through Biopunk Narratives.pptx
 
ICS 2208 Lecture Slide Notes for Topic 6
ICS 2208 Lecture Slide Notes for Topic 6ICS 2208 Lecture Slide Notes for Topic 6
ICS 2208 Lecture Slide Notes for Topic 6
 
Tree View Decoration Attribute in the Odoo 17
Tree View Decoration Attribute in the Odoo 17Tree View Decoration Attribute in the Odoo 17
Tree View Decoration Attribute in the Odoo 17
 
The role of Geography in climate education: science and active citizenship
The role of Geography in climate education: science and active citizenshipThe role of Geography in climate education: science and active citizenship
The role of Geography in climate education: science and active citizenship
 
How to Uninstall a Module in Odoo 17 Using Command Line
How to Uninstall a Module in Odoo 17 Using Command LineHow to Uninstall a Module in Odoo 17 Using Command Line
How to Uninstall a Module in Odoo 17 Using Command Line
 
prashanth updated resume 2024 for Teaching Profession
prashanth updated resume 2024 for Teaching Professionprashanth updated resume 2024 for Teaching Profession
prashanth updated resume 2024 for Teaching Profession
 
CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...
CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...
CHUYÊN ĐỀ ÔN THEO CÂU CHO HỌC SINH LỚP 12 ĐỂ ĐẠT ĐIỂM 5+ THI TỐT NGHIỆP THPT ...
 
DiskStorage_BasicFileStructuresandHashing.pdf
DiskStorage_BasicFileStructuresandHashing.pdfDiskStorage_BasicFileStructuresandHashing.pdf
DiskStorage_BasicFileStructuresandHashing.pdf
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - I-LEARN SMART WORLD - CẢ NĂM - CÓ FILE NGHE (BẢN...
 
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
 
Chi-Square Test Non Parametric Test Categorical Variable
Chi-Square Test Non Parametric Test Categorical VariableChi-Square Test Non Parametric Test Categorical Variable
Chi-Square Test Non Parametric Test Categorical Variable
 
Objectives n learning outcoms - MD 20240404.pptx
Objectives n learning outcoms - MD 20240404.pptxObjectives n learning outcoms - MD 20240404.pptx
Objectives n learning outcoms - MD 20240404.pptx
 
An Overview of the Calendar App in Odoo 17 ERP
An Overview of the Calendar App in Odoo 17 ERPAn Overview of the Calendar App in Odoo 17 ERP
An Overview of the Calendar App in Odoo 17 ERP
 
Mythology Quiz-4th April 2024, Quiz Club NITW
Mythology Quiz-4th April 2024, Quiz Club NITWMythology Quiz-4th April 2024, Quiz Club NITW
Mythology Quiz-4th April 2024, Quiz Club NITW
 
Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...
Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...
Healthy Minds, Flourishing Lives: A Philosophical Approach to Mental Health a...
 
6 ways Samsung’s Interactive Display powered by Android changes the classroom
6 ways Samsung’s Interactive Display powered by Android changes the classroom6 ways Samsung’s Interactive Display powered by Android changes the classroom
6 ways Samsung’s Interactive Display powered by Android changes the classroom
 
Spearman's correlation,Formula,Advantages,
Spearman's correlation,Formula,Advantages,Spearman's correlation,Formula,Advantages,
Spearman's correlation,Formula,Advantages,
 

Design and Evaluation of a Video Platform UI

  • 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