2024_s2_duse_l02_InteractionStyles.pdf

Interaction Styles ISYS1049 Designing the User System Experience Dr Vince Bruno 1 2 3 Generations of User Interfaces 3 4 GoUI: Line-Oriented Interfaces One dimensional interfaces Originally implemented on tele-...

Interaction Styles ISYS1049 Designing the User System Experience Dr Vince Bruno 1 2 3 Generations of User Interfaces 3 4 GoUI: Line-Oriented Interfaces One dimensional interfaces Originally implemented on tele-typewriters Structure of interface is function orientated, using a set of commands Question and answer dialog Built on a command language (names?) Various shortcuts available to speed up use. 4 5 GoUI: Full-Screen interfaces Two dimensional A classical use of full screen is form-filling Structure of interface is function-oriented Form fill-in is still popular and in use today Often depend heavily on nested menus, where the basic trade-off is between depth and breadth. 5 6 GoUI: Graphical user interface Referred to as WIMP (windows, icon, menu and a pointing device) 2.5 dimensions (possibility for overlap) primary interaction style is direct manipulation structure of interfaces is object-oriented GUI interfaces show better usability characteristics than character-based interfaces, especially with respect to learnability for novice users. 6 7 Interaction Styles Interaction styles includes the look (appearance) and feel (behavior) of interaction objects and associated interaction techniques, from a behavioural (user’s) view. 7 8 Interaction Styles Before graphical toolkits, each interaction style was coded a line at a time! Toolkits facilitate implementation by encapsulating each interaction style as a widget that can be reused/modified/adapted. Toolkits offer support for consistent look and feel. Toolkits support direct manipulation. 8 9 IS: main interaction styles Batch Question-Answer Command Language Function Keys Form Fill-in Menu-driven Direct Manipulation – GUI (mouse & keyboard & touchscreen) Non-Command Natural Language Gesture recognition…….. Others? Usability Engineering, J. Nielsen, pg 69 9 10 IS: Batch Batch processing (no interactive usually) Email servers (other business services) Does not require user intervention, works even when user and computer are in different time or place. Errors usually logged for later checking. Any interactive answers specified in a file. Only necessary interaction is submission of batch job. 10 11 IS: Question-Answer Line-oriented Computer controls the user, so suited for casual use. Involves a structured question and answer sequence, the computer/program poses a question which the user responds too. problems occur if contradiction occurs with earlier question; or not knowing what the next question is (eg. suburb/state/postcode). 11 12 IS: Command Language 12 13 IS: Command Language Advantages – Is flexible and appeals to “power” users – allows convenient creation of user-defined macros/scripts – Simple structure with minimal memory usage – Expert CLI users can issue commands and perform tasks much faster disadvantages – has poor error handling and minimal error message information – requires substantial training, memorization and/or referencing manual – Difficult to learn command language which is complex for novice users 13 14 IS: Function Keys 14 15 IS: Function Keys Need to have consistent action related to a particular key, to avoid wrong selection. Allow definition of function keys to be brought up if needed. Example: ESC, Enter, F3, PrtScrn, F1, F10, F4 15 IS: Function Keys Here is a typical dialog from an application, like Gimp, to export a data file. Hit “ESC” on this dialog, what is the expected action? Hit “ENTER” on this dialog what is the expected action? 16 17 IS: Form Fill-in Is a table of labels and empty (or default value) input boxes. Allows navigation between input boxes (TAB or mouse click). Each field allows data to be entered with various constraints. Usually required a special function key or button to activated to submit data entered in form. 17 18 IS: Form Fill-in Advantages: – Simplifies data entry, – required modest training, – gives convenient assistance (i.e. patterns and default values) Disadvantages: – Consumes screen space – Sequence issues (order data entry is presented) – Data validation issues 18 19 IS: Menus 19 20 IS: Menus 20 21 IS: Menus Advantages: – It is not necessary to remember a long list of manual commands – Simple interface for novices – Self-explanatory menu options Disadvantages: – Slower for experienced users – Limited menu options; confusing hierarchy or inappropriate naming – Often requires you to access multiple menu screens to perform simple functions – Consumes screen space 21 22 IS: Direct Manipulation 22 23 Direct Manipulation Interface Users perform intended actions on objects no indirect need to describe actions tasks are visually presented to the users effect of user input is immediately and directly visible users are more readily engaged by interface Visual representation of familiar things (object-oriented philosophy natural leads into it) 23 24 Direct Manipulation Interface advantages – Good for novice, self-explanatory, easy to learn and remember – Easy to use and less error prone – Memorisation of command lists not necessary – Similar format among application provide familiarity of interaction – Allows multiple applications to run simultaneously disadvantages – need more screen space and uses large amount of memory – graphic may not be clear and expert typists are slowed down by mouse 24 25 IS: Non-Command Future systems, Virtual Reality, Brain interface The user is freed to concentrate on the domain and need not control the computer. Computer monitors users and interprets their actions, so suited for cases where misinterpretations are unlikely or without serious consequences. 25 26 IS: Natural Language Ideally, allows unconstrained input to handle frequently changing problems. May adopt some older command language techniques. This could be spoken or typed natural language. HCI is close to Human-Human Interaction. Adv: Relieves burden of learning syntax. DisAdv: may not show context, is unpredictable, may require clarification. 26 Natural Language Advantages: – It is natural to interact natural – Requires less training Disadvantages: – Speech recognition is good, but not really good. 27 Speech Synthesis Audible sounds and words from the computer. Advantages: – Visually and physically disabled users – It is natural to listen Disadvantages: – Synthetic voices can be annoying for some users 28 IS: Gesture recognition 29 Gesture recognition Advantages – Speed and sufficient reliable for recognition system. – recognized static and dynamic gestures. Could be applied on a mobile robot control. – Simple, fast, and easy to implement. Can be applied on real system and play games. – No Training is required. Disadvantages – Irrelevant object might overlap with the hand. – Performance recognition algorithm decreases when distance from camera increases. – Ambient light affects the colour detection threshold 30 Facial recognition Security – access laptops Provide mood of user – other sensory inputs 31 Emotion Recognition Emotional recognition via facial detection Also known as Facial Expression Recognition (FER) 32 Haptic Interfaces A haptics interface is a system that allows a human to interact with a computer through bodily sensations and movements. Haptics refers to a type of human-computer interaction technology that encompasses tactile feedback or other bodily sensations to perform actions or processes on a computing device. Haptic Sandwich: navigational aid – https://www.researchgate.net/publication/280319145_First_Validation_of_the_Haptic_Sandwi ch_A_Shape_Changing_Handheld_Haptic_Navigation_Aid 33 Video & 360 Video Captures the real world in the form of digital video. Disadvantages: – Formats: mpeg, avi, Quicktime, etc. – Size Advantages: – Good for some training environments – Gives the real perspective on the world – Entertaining 34 Animation Cartoon like representations of characters and their world. Common uses: – Training simulation. – Entertainment – Education 35 Virtual Reality Allows people to immerse into interface. Advantages: – Great for training. – Good simulation environment Disadvantages: – Expensive, at the moment – Dangerous to your health if it is too real 36 Augmented Reality 37 Touchscreens Your finger is the pointer/mouse. Advantages: – More people have fingers than those with a mouse. – Durable in harsh environments and public areas. Disadvantages: – Arm fatigue can be an issue when typing is needed. – Screen space is not always appropriate 38  Brain-to-speech https://ia.acs.org.au/article/2021/scientists-achieve-first-brain-to-speech-translation.html 39 Eye Tracking Used as a mouse Used to explore eye tracking for usability evaluation 40 Eye tracking: heat maps 41 Metaphors GUIs use visual relationships to real-world objects (metaphors) Metaphors can help people relate to complex concepts and procedures by drawing on real-world knowledge Real-world affordances can be reflected What metaphors are used by contemporary GUIs? A metaphor’s function must be consistent with real-world expectations Potential problems with metaphors – Run out of metaphors - some virtual processes and objects have no real-world counter parts – Mixed metaphors – Carry connotations and association 42 3D environments Web-based 3D – Use vector-based graphics to decrease file size – Virtual Reality Modeling Language (VRML) Uses polygons with parameters – Transparency – Texture maps – shininess – X3-D is XML based - Web3D.org Offers greater flexibility and control Desktop 3D – Current GUIs are predominantly 2D – 3D environments presented on 2D screens are difficult to navigate 43 Interaction Style Selection User Centered Design – Do the users like cartoons, video? – Visually and/or physically disabled? – What interaction style are the users use to using? Environment – Public access – Internet access – Classroom access – Infrastructure 44 Interaction Style examples Client: University students Goal: Provide students with up-to-date information on classes Client: Olympic games spectator Goal: Provide live updates. Client: public transport user Goal: get from point A to point B 45 46 Conclusion Users should NOT have to adapt to the user interface - interfaces should be intuitive and natural for the user to learn and use. 46 47 Usability 47 48 Usability 48 Windows background: 2 Screens Can background images of each monitor differ? 49 50 Usability 50