FIT3175 Usability

Types of evaluations

- user evaluations: usability testing, field studies and thinking aloud - expert reviews: cognitive walkthrough, heuristic evaluations

Scenarios

- user scenario: build on personas and their goals, captures the context - usage scenario: captures functional aspect of existing systems, very task focused, step by step description of events and interactions with the system

Feedback definition and example

Communicates the results of an action such as if a goal has been achieved or if something went wrong eg. a progress bar to show a file being uploaded

Visibility

What parts operate and how. Not just about what you can see but it is also about whether what you see tells you about how to interact with it

Material design

- design language and system - provides unified guidelines that support user interface design

MMI guidelines

- design for the broadest range of users and contexts of use - address privacy and security issues - modalities should be compatible with users' preferences, context and system functionality - adapt to users' diversity and context of use - be consistent - provide error prevention and error handling

Why evaluate systems

- key to successful design - understand how real users use the product and if it meets their needs - allows us to find errors and inconsistencies - reduce costs as issues are found before implementation - ensure user satisfaction

Design process

- understand: empathise and define - explore: ideate, prototype - materialise: test, implement

Usability

The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use

Affordance definition and example

The physical appearance of objects defining what actions can be performed on an object eg. a slider affords sliding, we can see the knob and guidelines, thus we can afford that we can slide the knob left or right to change the sound

Visual design principles

- balance: balance distribution of colour, texture and space on the screen - contrast - dominance - hierarchy - alignment: alignment of related elements - repetition: of elements eg. colour, fonts can provide consistency - unity: visual elements should appear to belong together

Story board

Visual communication tool to illustrate scenarios, personas and provide context

Aspects of human computer interaction

- design, prototype, evaluate - design: gather data and define requirements, user and task analysis - prototype: low and high fidelity prototypes, native prototyping - evaluate: expert review ie. heuristic evaluations and cognitive walkthroughs, usability testing ie. measuring errors, and field studies

Effectiveness, efficiency and satisfaction

- effectiveness: accuracy, objective measure eg. number or rate of errors - efficiency: effectiveness with which users achieve goals, objective measure eg. time spent on the interface - satisfaction: positive attitudes towards the use of product, subjective eg. on a scale of 1-10 how much do you like using this service

Heuristic evaluation definition and types

- experts use a predefined set of rules to assess the usability of a product interface - types: Nielsen's 10 heuristics and Schneiderman's 8 golden rules

Cognitive walkthrough

- focuses on first time use - preparation phase - evaluation phase: 1. will user try and achieve right outcome 2. will users see the correct action they need to perform to produce the outcome (visibility) 3. will users recognize that this is the action they need to take to achieve the correct outcome? (Or will they select a different action instead?) 4. will users understand the feedback? i.e. if users performed the correct action, can they tell? - interpretation phase: identify necessary changes

User requirements

- include functional, non functional and user experience requirements - functional eg. the system needs to support sending messages - non functional eg. the user should be able to access the system any time - user experience eg. the system should always have a visible nav menu

Schneiderman's types of user interaction

- instructing: users issue instructions to a system eg. Linux terminal, Windows cmd.exe - conversing: users have a dialogue with the system eg. help systems, Office Assistant, iOS Siri, Android Google - manipulating: users interact with objects (eg. computer mouse) in a virtual or physical space eg. desktop, photoshop, video editors - exploring: users move through a virtual environment or a physical space eg. Google Street View

Importance of prototyping

- it enables designers to test their ideas and test possible alternatives - clarify requirements eg. if the designer has misunderstood the user requirements - solicit feedback eg. navigation, look and feel, task flow - identify problems and thus improve the final product - cheap and easy to create and change, reduces the cost and time by identifying problems and addressing them earlier on - after a system is fully implemented it is very expensive, difficult and time consuming to make changes to it

Voice user interface guidelines

- make conversations human - make them personal - make them efficient - make them relational - give users a sense of control

Gestalt laws

- proximity: groups are formed by elements that are closed to each other - similarity: groups are formed by elements that have similar features - closure: objects that are incomplete can have the appearance of a group when viewed together - continuity: lines can be used to make the eye follow a specific path - figure and ground: differentiate an object (figure) from its background (ground)

Inclusive design principles (one size fits one)

- recognise exclusions - learn from diversity: understand different perspectives - solve for one, extend to many: a solution that benefits one types of user may benefit other types of users too

Types of web navigation

- structural: nav between pages according to a hierarchy, primary nav between top level pages and secondary nav between lower levels of the hierarchy - associative: connects pages with similar topics and content without considering hierarchy eg. embedded link, related links and adaptive links that change based on what the site visitor does - utility: nav between pages and features that helps with using the interface eg. search

Data gathering methods

- study existing documentation - research similar products/systems - collection methods involving users eg. observations, interview, focus groups or workshops and questionnaires

Skeuomorphic design

- style that mimics real-world objects (look, feel and behaviour) in the design of digital interface elements; e.g. a calculator, trash can, etc - early adoption was very popular because it made interfaces intuitive and easy to learn for people that were not familiar with computers or mobile technologies - lost popularity because people are now familiar with the use of computers and mobile - this style made interfaces look busy, added unnecessary visual clutter, could also lead to false affordances and degraded performance eg. pages that cannot be turned

Nielsen's 10 heuristics

1. Visibility of system status 2. Match between system and the real world 3. User control and freedom 4. Consistency and standards 5. Error prevention 6. Recognition rather than recall 7. Flexibility and efficiency of use 8. Aesthetic and minimalist design 9. Help users recognize, diagnose, and recover from errors 10. Help and documentation

Norman's 7 stages of action

1. form the goal 2. plan the action 3. specify the action sequence 4. perform the action sequence 5. perceive the state of the device/user interface 6. interpret the results through perceived feedback 7. evaluate the results, compare outcome with goal

User centred design

A design process that pays particular attention to the needs of potential users of a product by involving them in all stages of the design process. - iterative process 1. understand context of use 2. specify user requirements 3. design solutions 4. evaluate against requirements

Multimodal MMI pros/cons

Advantages - deliver natural and efficient interaction - flexibility in input/output modes - may increase task efficiency - users may process info faster more engaging and robust - may provide more functionalities Challenge: - security and privacy issues - real time processing and feedback - mapping vocabulary eg. accents, gestures - learnability - compatibility of input and output modalities

Advantages and disadvantages of UCD

Advantages of UCD: - can meet user needs - provides a tool to manage user expectations - get greater acceptance of end product/service - reduce product risk at the end Disadvantages: - involving the user takes time which can lead to increased costs - users are not great at precisely saying what they want - finding available users can be difficult - when building on existing systems, users have little sense of constraints - can be hard to manage expectations

Approaches to UCD

Agile: breaking down your project into smaller parts (chunks) which are treated as mini-projects. Use user stories as the guide to select the features of your project and use these features to select the chunks. Lean UX: focusing on problems and fast turn arounds. Making assumptions and testing them with users as soon as possible is key here, as well as the concept of Minimal Viable Product (MVP), i.e. do the least you can and get it out there.

MMI inputs and outputs

Inputs: - speech - motion controller - touch, pointing - body movements - digital pens Outputs - visual: text - auditory: speech - haptics: force feedback - scent - taste

Participatory design

PICTIVE: - low fidelity prototyping - uses office material eg. pen and paper to understand users' workflow of tasts - sessions are video recorded CARD: - low fidelity prototyping - tests categorisation of screen designs - uses printed cards

Direct manipulation pros/cons

Pros - intuitive, easy to learn and remember - reduces errors as minimal syntax required - allows rapid actions and reversals - enjoyable and encourages exploration by immediate feedback and evaluation - users experience less anxiety, sense of confidence and control Cons - more difficult to program high resource rate - requirement for lots of screen space - may be cumbersome - pointing may be slower than typing

VUI pros/cons

Pros: - allow for hands free and eyes free interaction - quick and easy mode of interaction - efficient and engaging input modality Cons - failure to recognise voice commands results in undesirable actions - not offering a continuous listening mode - discoverability: users find it difficult to discover the interfaces capabilities and limitations - personification: may increase engagement but also contributes to unrealistic expectations - occasional need for touch interactions

Pro/cons of low fidelity prototypes

Pros: - cheap and fast to create, allowing for more iterations - hands on, manual manipulation, allows users and designers to become more familiar with the content elements - users and designers are more willing to suggest changes with low fidelity prototypes and more comfortable working with paper than real system Cons: - may look different to the final version as there are basic and limited functionalities

Pros/cons of high fidelity prototypes

Pros: - looks more like the final system which results in more useful feedback - designers can show and test real flow and interactions - limitations become apparent that were not identified earlier in the design Cons - not as cheap or fast - cannot be taken anywhere as easily eg. paper prototypes - cannot be refined as easily

Personas

Typical example of a user based on research and data collection eg. Lucy, 80 yrs of age, novice mobile app user, user goal is to avoid COVID hotspots and pain points include technology being too hard to grasp

Typography definition and guidelines for visual design

Typography is about legibility and readability of written language - use familiar fonts eg. Arial or Times New Roman - left aligned or justified - use fewer fonts and sizes

Discoverability

Users are able to interact with the object and recognise the actions that are possible, how the actions should be done or what can be interacted with

Signifier definition and example

Utilised when affordances are not perceivable. Similar to affordances, signifiers provide information to the user as to how to interact with an object such that they signal the object's affordance. These include labels, arrows, icons. eg. labels on doors telling users that one is a push door and one is pull

Menu types

- menu bar - cascading menu - pop up menu - drop down menu - mega menu - ribbon menu

Schneiderman's 8 golden rules

1. strive for consistency 2. universal usability 3. offer informative feedback 4. design dialogues to yield closure 5. prevent errors 6. permit easy reversal of actions 7. keep users in control 8. reduce short term memory load

Navigation

Ability of finding info by interacting with a system. Navigation is about orientation. What are the functionalities that are available in this part of the system and where can I go from here

Mapping definition and example

Defines the relationship between an element that is the control and another being controlled eg. vertical scroll bar moves the page up and down

Prioritisation techniques for user stories

MoSCoW - must, should, could, won't

Constraint definition and example

Restrictions on user interactions in order to prevent errors, reduce memory load eg. menu list provided for user selection instead of typing out their answers

Static menus - mobile

- tiles - galleries - lists - tabs, fixed and scrollable

Characteristics of direct manipulation

- visible and continuous representation of the task objects and their actions - task objects manipulated by physical actions - continuous feedback and reversible, incremental actions - users have focus on the task rather than the tech - extensive use of metaphors and icons - touchscreen interfaces take direct manipulation to another level

User stories

Short statements of the user and their goals so that designers are able to focus the project on the perspective of those who will use it Structure: "as a ___, I want ___ so that ___"

Usability testing

- aims to evaluate whether a product meets user needs an its intended purpose - focuses on measuring effectiveness, efficiency and satisfaction - eg. success rate, number of errors, task length, Likert scale and open ended questions

Universal design principles (one size fits all)

- usable by all people to the greatest extent possible, without need for adaptation or specialised design - flexibility in use: the design accommodates a wide range of individual preferences and abilities equitable use: the design is useful and marketable to people with diverse abilities - simple and intuitive use - perceptible info - tolerance for error - low physical effort - size and space for approach and use

Interaction styles

Interaction styles: different ways a user and computer can communicate and interact with each other - command language - natural language - menu selection - form fill in - direct manipulation - VR/AR/gestures

Cognitive processes

attention perception memory learning reasoning and problem solving

Guidelines for menu design

- avoid long and complex menus to reduce short term memory - meaningful grouping of items - reduce errors through disabling inapplicable menu items - logical sequence of items - strive to be consistent

Colour guidelines for visual design

- minimise number of colours - ensure accessibility eg. colour blindness

Transient menus - mobile

- overlay side drawer - inlay side drawer

Norman's discoverability principles

1. affordance 2. signifier 3. mapping 4. feedback 5. constraint