IGR203: Human-Computer Interaction

To design a gestural interfaces Creating a gesture set and defining a gesture-command mapping Laban feature Laban Movement Analysis (LMA) The LMA system provides models for the interpretation of movement, its function and its expression through 4 components: − Body (what) − Effort (how) − Space (where) − Shape (relation with the environment) Effort has 4 Factors thought as a continuum with 2 opposite ends: − Weight : strong, light − Time : quick, substained

Perception / Action Estimate interaction time : Fitt’s law : Pointing time relies on D/W ( Distance to target / Width of target) Solutions: Reduce D : Popup menus / Attract applications or target Increase W : The Mac bar (border is infinite) / Marking menus (rely on angle) Mouse gain : mouse moving speed Semantic pointing : Common actions easy to reach while dangerous hard Avoid Pointing : Hotkeys / Gesture Hick law :

2 Ways to solve The specification of the interaction of a complex interface Statecharts/state machine Specification languages StateMachine & StateCharts Statecharts is hierarchical state machines

User Center Design (UCD) 3 Constraints to Design : Task - Human - Technology Usability Criteria Ease of learning: learning cost / use of advanced functionalities Recall: Remember how from one session to the next Productivity: speed of execution Fatigue (cf. repetitive actions) Risk of errors: should be minimized, good feebcak needed otherwise User satisfaction Accessibility, functionality, time, effort, learnability, satisfaction, … Ideation Brainstorm, Sketches…. Prototype Methods: • Storyboards — good for user flow • Paper prototypes — good for layout, flow • Video prototypes — good for overall experience • Powerpoint/Photoshop — Look ’n’ feel • Software — functionality

Qt Lab#3 : Statecharts Source code: https://github.com/winsa24/-QT-Microwave Introduction I implement the presentation and interaction control panel of a microwave oven on Qt. 1. Design the Statechart 2. Graphical interface In this part, I created a graphical interface by dragging and dropping based on Qt Designor. I used QLineEdit and QDial as display panel and slider. 3. Implement In this part, I first implement the QtStateMachine according to the Statechart shown in the first section. I created 9 states and use state->addTransition() to link different states with different buttons.