Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Use Cases and Course Review - Lecture 8 - Human-Computer Interaction (1023841ANR)

Use Cases and Course Review - Lecture 8 - Human-Computer Interaction (1023841ANR)

This lecture forms part of the course Human-Computer Interaction given at the Vrije Universiteit Brussel.

Beat Signer
PRO

December 16, 2022
Tweet

More Decks by Beat Signer

Other Decks in Education

Transcript

  1. 2 December 2005
    Human-Computer Interaction
    Use Cases and Course Review
    Prof. Beat Signer
    Department of Computer Science
    Vrije Universiteit Brussel
    beatsigner.com

    View Slide

  2. Beat Signer - Department of Computer Science - [email protected] 2
    December 15, 2022
    HCI Research Contributions Revisited
    ▪ Empirical contributions
    ▪ Artefact contributions (systems research)
    ▪ Methodological contributions
    ▪ Theoretical contributions
    ▪ Dataset contributions
    ▪ Literature survey contributions
    ▪ Opinion contributions

    View Slide

  3. Beat Signer - Department of Computer Science - [email protected] 3
    December 15, 2022
    Prof. Dr. Beat Signer
    Cross-MediaTechnology, Interac-
    tive Paper, Data Physicalisation
    Dr. Audrey Sanctorum
    User-defined XDI and IoT Inter-
    action, Human-AI Interaction
    WEB & INFORMATION
    SYSTEMS ENGINEERING
    CROSS-MEDIA INFORMATION SPACES
    AND ARCHITECTURES (CISA)
    Maxim Van de Wynckel
    Hybrid Positioning, Implicit
    Human-Computer Interaction
    Xuyao Zhang
    Extensible Platform for Dynamic
    Data Physicalisation
    CISA
    Human-Machine &
    Human-Information
    Interaction
    Information
    Systems &
    Management
    Information
    Visualisation
    & Navigation

    View Slide

  4. Beat Signer - Department of Computer Science - [email protected] 4
    December 15, 2022
    WEB & INFORMATION
    SYSTEMS ENGINEERING
    CROSS-MEDIA INFORMATION SPACES
    AND ARCHITECTURES (CISA)
    Ekene Attoh
    IoT Middleware, Context-aware
    Computing, Implicit HCI
    Isaac Valadez
    Knowledge Physicalisation and
    Augmentation, Tangible UIs
    Yoshi Malaise
    Technology-enhanced Learning,
    Content-driven Presentations
    Migdeily Cantera
    End-User Development, Mixed
    Reality IoT UIs, Intelligibility
    CISA
    Human-Machine &
    Human-Information
    Interaction
    Information
    Systems &
    Management
    Information
    Visualisation
    & Navigation

    View Slide

  5. Beat Signer - Department of Computer Science - [email protected] 5
    December 15, 2022
    WEB & INFORMATION
    SYSTEMS ENGINEERING
    CISA
    Human-Machine &
    Human-Information
    Interaction
    Information
    Systems &
    Management
    Information
    Visualisation
    & Navigation
    CROSS-MEDIA INFORMATION SPACES
    AND ARCHITECTURES (CISA)
    Arun Sojan
    Framework for Dynamic Data
    Physicalisation
    Piet Van Der Paelt
    Julia-based Framework for
    Simulation and Optimisation
    Evan Cole
    Technology-enhanced Learning,
    Study Lenses

    View Slide

  6. Beat Signer - Department of Computer Science - [email protected] 6
    December 15, 2022

    View Slide

  7. Beat Signer - Department of Computer Science - [email protected] 7
    December 15, 2022
    Tangible Holograms (TangHo)
    Timothy J. Curtin

    View Slide

  8. Beat Signer - Department of Computer Science - [email protected] 8
    December 15, 2022
    Collaborative TangHo Interaction

    View Slide

  9. Beat Signer - Department of Computer Science - [email protected] 9
    December 15, 2022
    TangHo Prototype
    ▪ Lego Mindstorms-based
    6DOF arm prototype
    ▪ motors can be locked or set to
    float mode
    - useful for bidirectional I/O
    ▪ replaceable end effectors for different
    types of non-visual feedback
    ▪ Challenges
    ▪ inverse kinematics (final system
    is body mounted)
    - use robotics toolbox (MATLAB)
    ▪ limited HoloLens hand tracking
    ▪ 3D printing of final arm
    Timothy J. Curtin

    View Slide

  10. Beat Signer - Department of Computer Science - [email protected] 10
    December 15, 2022
    TangHo Interactions

    View Slide

  11. Beat Signer - Department of Computer Science - [email protected] 11
    December 15, 2022
    Real-Time Cross-Media Data Exploration

    View Slide

  12. Beat Signer - Department of Computer Science - [email protected] 12
    December 15, 2022
    Dynamic Data Physicalisation
    ▪ Understanding the design space
    ▪ how do users map data to physicalisations
    ▪ Data physicalisation design guidelines
    ▪ what are the just-perceptual differences that
    a physical variable can convey?
    ▪ Dynamic data physicalisation framework
    ▪ data physicalisation grammar
    ▪ data processing with device-independent output
    ▪ software drivers for different physicalisations (e.g. TangHo)
    ▪ New application domains
    Jacques Bertin, 1967

    View Slide

  13. Beat Signer - Department of Computer Science - [email protected] 13
    December 15, 2022
    Dynamic Data Physicalisation Framework
    ...

    View Slide

  14. Beat Signer - Department of Computer Science - [email protected] 14
    December 15, 2022
    SpeeG2: Multimodal Text Input
    User
    Speech recognition
    (Microsoft SAPI 5.4)
    Skeletal tracking
    (Microsoft Kinect)
    5
    4
    2
    3
    SpeeG2 GUI
    6
    1
    Sven De Kock

    View Slide

  15. Beat Signer - Department of Computer Science - [email protected] 15
    December 15, 2022
    Video: SpeeG2 Performance (21 WPM)

    View Slide

  16. Beat Signer - Department of Computer Science - [email protected] 16
    December 15, 2022
    What is Wrong with Slideware?
    ▪ Simulation of physical slides
    ▪ limited space due to the slide concept
    ▪ linear navigation from slide to slide
    ▪ difficult to reuse content and embed rich media types
    ▪ MindXpres addresses these issues
    ▪ unlimited canvas with zoomable user interface
    ▪ non-linear navigation and associative linking
    ▪ content-based approach with automatic visualisation

    View Slide

  17. Beat Signer - Department of Computer Science - [email protected] 17
    December 15, 2022
    Presentation Solutions
    ▪ PaperPoint
    ▪ interactive PowerPoint paper
    handouts
    ▪ non-linear navigation and
    annotations
    ▪ in use since 2005
    ▪ MindXpres
    ▪ extensible presentation
    platform
    ▪ non-linear navigation via
    zoomable user interface
    ▪ rich media plug-ins
    ▪ developed since 2011

    View Slide

  18. Beat Signer - Department of Computer Science - [email protected] 18
    December 15, 2022
    MindXpres Presentation Platform
    ▪ Flexible representation
    of presentations
    ▪ use of structural RSL links
    ▪ separation of content and
    structure
    ▪ Extensible platform
    ▪ content-based approach
    ▪ cross-media content reuse
    ▪ non-linear navigation and
    zoomable user interface
    ▪ associative linking
    ▪ rich media types
    Reinout Roels

    View Slide

  19. Beat Signer - Department of Computer Science - [email protected] 19
    December 15, 2022
    Interactive Source Code Plug-in
    Paul Mestereaga

    View Slide

  20. Beat Signer - Department of Computer Science - [email protected] 20
    December 15, 2022
    MindXpres Video

    View Slide

  21. Beat Signer - Department of Computer Science - [email protected] 21
    December 15, 2022
    Personalised Learning Environments
    ▪ Diagnostic assessments
    to detect knowledge gaps
    ▪ Suggestion of learning
    content
    ▪ knowledge graphs
    ▪ user knowledge graph
    ▪ learning paths
    ▪ Automatic content adap-
    tation
    ▪ based on user preferences
    and constraints
    Enhanced Curriculum
    Assessments
    Tagged Learning Content
    Knowledge Graphs
    Adaptive Learning
    Content
    Learning Paths
    Knowledge Representation Framework
    Assessment Module
    Assessment Analyser Knowledge Gap Analyser
    Adaptive Learning Environment
    Suggestion Module
    User Knowledge
    Graph
    Personalised
    Presentation Module
    Learner Constraints
    Groups Module

    View Slide

  22. Beat Signer - Department of Computer Science - [email protected] 22
    December 15, 2022
    Interactive Paper
    Global Information Systems Group
    ETH Zurich

    View Slide

  23. Beat Signer - Department of Computer Science - [email protected] 23
    December 15, 2022
    Visual and Interaction Design
    ▪ Visualisation of interactive
    areas and functionality
    ▪ design patterns
    ▪ Interaction design
    ▪ online versus offline input
    processing
    ▪ lack of modal dialogues
    ▪ multimodal interaction
    ▪ Findings might be appli-
    cable to traditional GUIs
    ▪ e.g. cross-application widget
    interaction
    Global Information Systems Group, ETH Zurich

    View Slide

  24. Beat Signer - Department of Computer Science - [email protected] 24
    December 15, 2022
    iGesture Framework
    ▪ iGesture Workbench
    ▪ create/test gesture sets and
    algorithms
    ▪ Different modalities
    ▪ digital pen, tablet PC,
    mouse, Wii remote, …
    ▪ multimodal gestures
    ▪ Open Source
    ▪ http://www.igesture.org

    View Slide

  25. Beat Signer - Department of Computer Science - [email protected] 25
    December 15, 2022
    Personal Information Management (PIM)
    ▪ Keeping, organising and
    re-finding information
    ▪ digital and physical
    ▪ Study of human-
    information interaction
    ▪ files, piles, mixtures, …
    ▪ OC2 PIM model
    ▪ based on RSL hypermedia
    metamodel
    ▪ Cross-Media PIM system
    ▪ explicit as well as implicit
    associations between entities

    View Slide

  26. Beat Signer - Department of Computer Science - [email protected] 26
    December 15, 2022
    Object-Concept-Context (OC2) Framework
    object layer
    structural link
    concept layer
    context layer
    navigational link
    associative link
    weighted link
    Object 1 Object n
    Object 2
    Context 1 Context n
    Concept 1
    Concept 2 Concept n
    extent link
    entity
    link
    Links
    selector resource
    (1,*)
    (1,*)
    (1,1) (0,*)
    (0,*) (0,*)
    RefersTo
    HasTarget
    HasSource
    partition
    Entities
    (0,*)
    link
    Navigational
    Links
    link
    Extent
    Links
    partition
    Resources
    Selectors
    context
    Contexts
    link
    Structural
    Links
    link
    Associative
    Links
    resource
    Physical
    Objects
    resource
    Digital
    Objects
    resource
    Concepts
    resource
    Objects
    HasAssoc
    Target
    (0,*)
    (1,*)
    HasExt
    Target
    HasExt
    Source
    HasAssoc
    Source
    (1,1)
    (1,*)
    (0,*)
    (0,*)
    (0,*)
    (1,1)
    disjoint
    partition
    translation
    OC2 conceptual model RSL-based metamodel

    View Slide

  27. Beat Signer - Department of Computer Science - [email protected] 27
    December 15, 2022
    PimVis Document View
    Audrey Sanctorum

    View Slide

  28. Beat Signer - Department of Computer Science - [email protected] 28
    December 15, 2022
    PimVis Setup

    View Slide

  29. Beat Signer - Department of Computer Science - [email protected] 29
    December 15, 2022
    Course Summary
    1. Introduction
    ▪ HCI and Interaction Design
    ▪ history of human-computer interaction
    - analogue computers, NLS and desktop computers
    ▪ “evolution” of interfaces
    ▪ interface types
    - command-based, WIMP, pen, touch, speech, gesture, VR, AR, multimodal, …
    2. HCI and Interaction Design
    ▪ what to design
    - who (user), how (task) and where (context)
    ▪ usability goals
    - effectiveness, efficiency, safety, utility, learnability, memorability
    ▪ user experience and UX goals

    View Slide

  30. Beat Signer - Department of Computer Science - [email protected] 30
    December 15, 2022
    Course Summary …
    HCI and Interaction Design …
    ▪ Double Diamond Design Process
    ▪ users-centred design principles
    ▪ Interaction Design Lifecycle Model
    - establishing requirements, designing alternatives, prototyping and evaluating
    3. Requirements Analysis and Prototyping
    ▪ types of requirements
    - functional, data, environmental, user characteristics, usability, user experience
    ▪ requirements gathering techniques
    - interviews, focus groups, surveys, direct and indirect observation, …
    ▪ task description
    - scenarios and use cases
    ▪ prototyping
    - horizontal vs. vertical, throwaway vs. evolutionary

    View Slide

  31. Beat Signer - Department of Computer Science - [email protected] 31
    December 15, 2022
    Course Summary …
    4. Human Perception and Cognition
    ▪ human senses and modalities
    ▪ model of visual perception processing
    ▪ anatomy of the human eye
    - lens, pupil, retina (rods and cones), …
    ▪ brightness perception and illusions
    ▪ visual field and peripheral vision
    ▪ perception
    - biased by past, present and future
    - designing for biased perception
    ▪ Gestalt principles
    - law of proximity, law of similarity, law of continuity, law of closure, …
    ▪ long term memory and immediate memory

    View Slide

  32. Beat Signer - Department of Computer Science - [email protected] 32
    December 15, 2022
    Course Summary …
    5. Design Guidelines and Models
    ▪ Shneiderman’s eight golden rules of interfaces design
    ▪ Nielsen’s ten usability heuristics for UI design
    ▪ visibility, simplicity and mapping
    ▪ guidelines for using colours
    ▪ inattentional/change blindness
    ▪ affordances
    ▪ Fitts’s law

    View Slide

  33. Beat Signer - Department of Computer Science - [email protected] 33
    December 15, 2022
    Course Summary …
    6. Evaluation Methods
    ▪ why, what, where and when?
    ▪ DECIDE evaluation framework
    - goals, questions, methods, practical issues, ethical issues, evaluate/present
    ▪ usability testing
    ▪ experimental design
    - between subjects, within-subjects and pair-wise design
    ▪ UEQ+ user experience questionnaire
    ▪ inspection
    - heuristic evaluation
    ▪ analytics
    - Google analytics, A/B testing, …
    ▪ predictive models
    - GOMS model, keystroke level model and Fitts’s law

    View Slide

  34. Beat Signer - Department of Computer Science - [email protected] 34
    December 15, 2022
    Course Summary …
    7. HCI Research Methods
    ▪ seven types of HCI research contributions
    - empirical contributions, artefact contributions (systems research),
    methodological contributions, theoretical contributions, dataset contributions,
    literature survey contributions, opinion contributions
    ▪ descriptive, relational and experimental research
    - statistical significance (e.g. t tests)
    - correlation does not imply a causal relationship
    ▪ surveys, diaries and interviews
    ▪ grounded theory (inductive research)
    ▪ ethnography
    ▪ automatic data collection
    - measuring the human and online data
    ▪ human computation

    View Slide

  35. Beat Signer - Department of Computer Science - [email protected] 35
    December 15, 2022
    Course Summary …
    8. Use Cases and Course Review
    ▪ use cases for different HCI research contributions

    View Slide

  36. Beat Signer - Department of Computer Science - [email protected] 36
    December 15, 2022
    Exam
    ▪ Written closed book exam
    ▪ covers content of lectures and exercises
    ▪ Date
    ▪ January 11, 09:00–12:00
    ▪ Overall grade = written exam (50%) + assignment (50%)
    ▪ for the assignment students have some flexibility in distributing
    the grades (±2 points)
    - send us an email by January 4, 2023 with all group members in CC if
    you want to distribute some points
    ▪ note that the grade for the written exam as well as for the assign-
    ment have to be 8/20 or higher in order to pass the exam!
    ▪ Submission of the assignment via Canvas
    ▪ deadline: December 23, 24:00 (Brussels timezone)

    View Slide

  37. Beat Signer - Department of Computer Science - [email protected] 37
    December 15, 2022
    Exam …
    ▪ The exam will cover all the content presented in the
    lectures as well as any additional information from
    the exercise sessions
    ▪ includes the videos shown in some of the lectures
    ▪ Make sure that you understand the basic concepts first
    ▪ however, we might ask questions at any level of detail to evaluate
    your knowledge
    ▪ Applying the theoretical knowledge to concrete use
    cases
    ▪ e.g. given a description of a specific problem in a given domain
    - decide about requirements gathering techniques
    - define different types of requirements

    View Slide

  38. Beat Signer - Department of Computer Science - [email protected] 38
    December 15, 2022
    Exam …
    ▪ Applying the theoretical knowledge to concrete
    use cases …
    ▪ e.g. given a description/pictures of a specific UI
    - identify potential issues based on heuristics, Gestalt principles, Fitts’s law and
    other guidelines
    ▪ Describing (and potentially applying) certain concepts
    ▪ Interaction Design Lifecyle Model
    ▪ steps of the DECIDE evaluation framework
    ▪ usability goals
    ▪ …

    View Slide

  39. Beat Signer - Department of Computer Science - [email protected] 39
    December 15, 2022
    Other Related Courses
    ▪ Specialisation: Data Management and Analytics (DAMA)
    ▪ Information Visualisation (MA)
    ▪ representation of data (encoding of value/relation)
    ▪ presentation of data (visualisation techniques)
    ▪ interaction
    ▪ dashboards and case studies
    ▪ Next Generation User Interfaces (MA)
    ▪ multimodal interaction
    - theoretical concepts, fusion and fission, ...
    ▪ interactive tabletops and surfaces
    ▪ pen-based interaction
    ▪ gesture-based interaction
    ▪ tangible interaction and mixed reality

    View Slide

  40. Beat Signer - Department of Computer Science - [email protected] 40
    December 15, 2022
    Other Related Courses ...
    ▪ Advanced Topics in Big Data (MA)
    ▪ seminar about recent developments in Big Data
    ▪ scalable data management and big data analytics
    ▪ graph processing and distributed query processing
    ▪ human-data interaction and human-in-the loop data processing
    ▪ information visualisation and data physicalisation

    View Slide

  41. Beat Signer - Department of Computer Science - [email protected] 41
    December 15, 2022
    References
    ▪ B. Signer, Fundamental Concepts for
    Interactive Paper and Cross-Media Information
    Spaces, Second Edition, ISBN 978-3-8370-2713-6,
    August 2017
    ▪ Dynamic Data Physicalisation and Tangible Holograms
    ▪ https://wise.vub.ac.be/topic/dynamic-data-physicalisation
    ▪ https://wise.vub.ac.be/topic/tangible-holograms-tangho
    ▪ MindXpres Project
    ▪ https://mindxpres.com
    ▪ iGesture
    ▪ http://igesture.org

    View Slide

  42. Beat Signer - Department of Computer Science - [email protected] 42
    December 15, 2022
    References ...
    ▪ B. Signer and T.J. Curtin, Tangible Holograms:
    Towards Mobile Physical Augmentation of Virtual
    Objects, Technical Report WISE Lab, WISE-2017-01,
    March 2017
    ▪ https://beatsigner.com/publications/signer_arXiv2017.pdf
    ▪ B. Signer, P. Ebrahimi, T.J. Curtin and Ahmed K.A.
    Abdullah, Towards a Framework for Dynamic Data
    Physicalisation, International Workshop Toward a Design
    Language for Data Physicalisation, Berlin, Germany,
    October 2018
    ▪ https://beatsigner.com/publications/signer_DataPhys2018.pdf

    View Slide

  43. Beat Signer - Department of Computer Science - [email protected] 43
    December 15, 2022
    References ...
    ▪ L. Hoste and B. Signer, SpeeG2: A Speech- and
    Gesture-based Interface for Efficient Controller-free Text
    Entry, Proceedings of ICMI 2013, 15th International
    Conference on Multimodal Interaction, Sydney, Australia,
    December 20132017
    ▪ https://beatsigner.com/publications/hoste_ICMI2013.pdf
    ▪ E.I. Reuss, B. Signer and M.C. Norrie, PowerPoint
    Multimedia Presentations in Computer Science
    Education: What do Users Need?, Proceedings of USAB
    2008, 4th Symposium on Usability & HCI for Education
    and Work, Graz, Austria, November 2008
    ▪ https://beatsigner.com/publications/reuss_USAB2008.pdf

    View Slide

  44. Beat Signer - Department of Computer Science - [email protected] 44
    December 15, 2022
    References ...
    ▪ R. Roels and B. Signer, MindXpres: An Extensible
    Content-driven Cross-Media Presentation Platform,
    Proceedings of WISE 2014, 15th International
    Conference on Web Information System Engineering,
    Thessaloniki, Greece, October, 2014
    ▪ https://beatsigner.com/publications/roels_WISE2014.pdf
    ▪ R. Roels, P. Mestereaga and B. Signer, An Interactive
    Source Code Visualisation Plug-in for the MindXpres
    Presentation Platform, Communications in Computer
    and Information Science (CCIS), 583, 2016
    ▪ https://beatsigner.com/publications/roels_CCIS2016.pdf

    View Slide

  45. Beat Signer - Department of Computer Science - [email protected] 45
    December 15, 2022
    References ...
    ▪ Y. Malaise and B. Signer, Personalised Learning
    Environments Based on Knowledge Graphs and the
    Zone of Proximal Development, Proceedings of
    CSEDU 2022, 14th International Conference on
    Computer Supported Education, April 2022
    ▪ https://beatsigner.com/publications/malaise_CSEDU2022.pdf
    ▪ M.C. Norrie, B. Signer, M. Grossniklaus, R. Belotti,
    C. Decurtins and N. Weibel, Context-aware Platform for
    Mobile Data Management, Wireless Networks (WINET),
    13(6), Springer, December 2007
    ▪ https://beatsigner.com/publications/norrie_WINET2007.pdf

    View Slide

  46. Beat Signer - Department of Computer Science - [email protected] 46
    December 15, 2022
    References ...
    ▪ B. Signer, U. Kurmann and M.C. Norrie, iGesture:
    A General Gesture Recognition Framework, Proceedings
    of ICDAR 2007, 9th International Conference on
    Document Analysis and Recognition, Curitiba, Brazil,
    September 2007
    ▪ https://beatsigner.com/publications/signer_ICDAR2007.pdf
    ▪ S. Trullemans, A. Sanctorum and B. Signer, PimVis: Exploring
    and Re-finding Documents in Cross-Media Information
    Spaces, Proceedings of AVI 2016, International Working
    Conference on Advanced Visual Interfaces, Bari, Italy, June
    2016
    ▪ https://beatsigner.com/publications/trullemans_AVI2016.pdf

    View Slide

  47. 2 December 2005
    The End
    Good Luck with the Exam!

    View Slide