Chapter 10 Interactive Systems And Usability Organizational Requirements Engineering

Similar documents
HCI and Design SPRING 2016

Assignment 5 is posted! Heuristic evaluation and AB testing. Heuristic Evaluation. Thursday: AB Testing

Computer Systems & Application

User Interface Design

CSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation

Heuristic Evaluation. Ananda Gunawardena. Carnegie Mellon University Computer Science Department Fall 2008

Jakob Nielsen s Heuristics (

Heuristic Evaluation. Jon Kolko Professor, Austin Center for Design

Interaction design. The process of interaction design. Requirements. Data gathering. Interpretation and data analysis. Conceptual design.

User Interface Evaluation

CSE 440: Introduction to HCI User Interface Design, Prototyping, and Evaluation

Usability. Daniela Rosner. Web Architecture, October 9, School of Information UC Berkeley

CO328- Human Computer Interaction Michael Kölling Caroline Li. Heuristic Evaluation

1. Select/view stores based on product type/category- 2. Select/view stores based on store name-

Craigslist Heuristic Evaluation

User Experience Report: Heuristic Evaluation

Design Heuristics and Evaluation

Software Quality. Martin Glinz. Thomas Fritz. Lecture 7 UI Design, Usability & Testing. Many thanks to Meghan Allen and Daniel Greenblatt.

USER INTERFACE DESIGN + PROTOTYPING + EVALUATION. Heuristic Evaluation. Prof. James A. Landay University of Washington CSE 440

Heuristic Evaluation. Hall of Fame or Shame? Hall of Fame or Shame? Hall of Fame! Heuristic Evaluation

Lose It! Weight Loss App Heuristic Evaluation Report

Heuristic Evaluation of NUIG Participate Module 1

Usability in Multimedia. By Pınar Koçer Aydın and Özgür Bayram

Heuristic Evaluation

CogSysIII Lecture 9: User Modeling with GOMS

iscreen Usability INTRODUCTION

Hyper Mesh Code analyzer

Heuristic Evaluation! Hall of Fame or Shame?! Hall of Fame or Shame?! Hall of Fame or Shame?! Hall of Fame!!

CS 160: Evaluation. Outline. Outline. Iterative Design. Preparing for a User Test. User Test

CS 160: Evaluation. Professor John Canny Spring /15/2006 1

1. The Best Practices Section < >

cs465 principles of user interface design, implementation and evaluation

Crab Shack Kitchen Web Application

Page 1. Ideas to windows. Lecture 7: Prototyping & Evaluation. Levels of prototyping. Progressive refinement

Senior Director of Design at Infragistics. Adjunct Professor at Rutgers State University of New Jersey Studied the stuff (Master s & Ph.D.

HUMAN COMPUTER INTERACTION

Due on: May 12, Team Members: Arpan Bhattacharya. Collin Breslin. Thkeya Smith. INFO (Spring 2013): Human-Computer Interaction

Heuristic Evaluation of Enable Ireland

UX DESIGN BY JULIA MITELMAN

Usability Inspection Methods. Overview. Usability Measures. SMD157 Human-Computer Interaction Fall 2003

Introduction to Internet Applications

Interaction Design. Heuristic Evaluation & Cognitive Walkthrough

Heuristic evaluation is a usability inspection technique developed by Jakob Nielsen. The original set of heuristics was derived empirically from an

Assistant Professor Computer Science. Introduction to Human-Computer Interaction

Interface Design Issues Lecture 8

Usability & User Centered Design. SWE 432, Fall 2018 Design and Implementation of Software for the Web

Usability. HCI - Human Computer Interaction

Design Principles. Overview. User-Center Design. SMD157 Human-Computer Interaction Fall User-center design Guidelines

Design Principles. Overview. User-Center Design. SMD157 Human-Computer Interaction Fall User-center design Guidelines

Group #: Evaluation Proposal For Digital Libraries, LIS 5472, Fall 2010, Professor Sanghee Oh

Interaction Design. Task Analysis & Modelling

User-Centered Design. SWE 432, Fall 2017 Design and Implementation of Software for the Web

Usability analysis and inspection

Why? Usability analysis and inspection. Evaluation. Evaluation. Measuring usability. Evaluating usability

Lecture 10 Usability

Ten Usability Heuristics J. Nielsen

Heuristic Evaluation of igetyou

Human-Computer Interaction IS4300

Design Rules. increasing generality. increasing authority. Guide lines. Standards. increasing authority. increasing generality

Human-Computer Interaction

Introduction to Usability and its evaluation

15/16 CSY2041 Quality and User-Centred Systems

Introduction to Human-Computer Interaction

Human-Computer Interaction: An Overview. CS2190 Spring 2010

User Experience Design

Heuristic Evaluation of Covalence

Applying Usability to elearning

Overview of Today s Lecture. Analytical Evaluation / Usability Testing. ex: find a book at Amazon.ca via search

Heuristic Evaluation of Math Out of the Box

Heuristic Evaluation of [Slaptitude]

Design Reviews. Scott Klemmer. stanford hci group / cs147. tas: Marcello Bastea-Forte, Joel Brandt, Neil Patel, Leslie Wu, Mike Cammarano

evaluation techniques goals of evaluation evaluation by experts cisc3650 human-computer interaction spring 2012 lecture # II.1

Evaluation of Interactive Systems. Inspection methods

Mensch-Maschine-Interaktion 1. Chapter 2 (May 12th, 2011, 9am-12pm): Basic HCI principles 1

Analytical evaluation

Analytical Evaluation

6 Designing Interactive Systems

Single Menus No other menus will follow necessitating additional user choices

Interaction Design Guidelines and Rules

Chapter 15: Analytical evaluation

M150 -B / Unit 12. By Wawi. A good user interface design enables the user to effectively interact with the system and perform his tasks.

Nektarios Kostaras, Mixalis Xenos. Hellenic Open University, School of Sciences & Technology, Patras, Greece

6 Designing Interactive Systems

Learnability of software

COMP 388/441 HCI: 07 - Menu Selection, Forms, and Dialog Boxes Menu Selection, Forms, and Dialog Boxes

Evaluation Plan for Fearless Fitness Center Website

3 Basic HCI Principles and Models

2 Basic HCI Principles

Topics. GUI design multidisciplinary. Chapter 7 User Interface Design. (c) Addison Wesley Chapter 7 3

Why User Interface Design? What

Heuristic Evaluation of MPowered Entrepreneurship s Slack Workspace. Presented By Dylan Rabin. SI 110 Section 003

Heuristic Evaluation of [ Quest ]

Wikitude Usability testing and heuristic evaluation

What is interaction design? What is Interaction Design? Example of bad and good design. Goals of interaction design

SFU CMPT week 11

MIT GSL week 4 Wednesday. User Interfaces II

USER RESEARCH Website portfolio prototype

The Interaction. Dr. Karim Bouzoubaa

Property of Shree Dhavale. Not for public distribution. Practicum Report. Shree Dhavale

Heuristic Evaluation. Heuristic evaluation evaluates the interface to identify usability problems against recognized usability design heuristics.

Transcription:

Chapter 10 Interactive Systems And Usability Organizational Requirements Engineering Prof. Dr. Armin B. Cremers Sascha Alda

Overview Introduction: What is usability? Why is usability an important non-functional requirement? Ways to usability GUI Design for Interactive Systems General Design Guidelines Forms Navigation within an application Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 2

Interactive Systems An interactive system allows for a dialog between the computer and the user Examples: Web browser Automated Teller Machines (ATM) Office tools Booking terminals Information desks Most typical software system that can be modeled by use cases ( functional requirements) Non-functional requirements are also important Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 3

Usability......as a non-functional requirement Typical non-functional requirements reliability maintainability deployability Configurability Usability is of major importance When the interface is well designed, it is comprehensible, predictable, and controllable; users feel competent, satisfied, and responsible for their actions (Shneidermann, 1996) Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 4

Usability Guidelines Many guidelines can be found ISO 9241: Ergonomic requirements for office work with visual display terminals (1996-99) International standard for the interaction between humans and computer provides requirements and recommendations relating to the attributes of the hardware, software and environment that contribute to usability, and the ergonomic principles underlying them authoritative source of reference designers without usability experience have great difficulty applying these types of guidelines ISO/IEC FCD 18021: Information Technology - User Interface for mobile tools (2001) contains user interface specifications for PDA's with a data interchange capability with corresponding servers. Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 5

Usability ISO 9241 Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 6

Usability in ISO 9241 Part 10: Dialogue principles (1996) deals with general ergonomic principles which apply to the design of dialogues between humans and information systems: Criteria: suitability for the task, suitability for learning, suitability for individualization, conformity with user expectations, self descriptiveness, controllability, and error tolerance. Part 12: Presentation of information (1998) contains recommendations for presenting and representing information on visual displays. Part 13: User guidance (1998) Part 14: Menu dialogues (1997) Part 15: Command dialogues (1997) Part 16: Direct manipulation dialogues (1999) Part 17: Form filling dialogues (1998) Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 7

Measuring Usability according to ISO 9241-11 Usability according to ISO 9241-11: Usability can be measured by the extent to which users reach their goals dependent on values like effectiveness, efficiency, and satisfaction. Usability is more than nice looking windows Satisfaction Effectiveness Efficiency (Effort to reach the goal) (Positive attitude to the use of the product) The comfort and acceptability of use (Reaching a Goal) resources expended in relation to the accuracy and completeness with which accuracy and completeness users achieve goals. with which users achieve specified goals. http://www.klubok.net/pageid299.html Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 8

Usability......is context-dependent Usable products may be designed by incorporating product features and attributes known to benefit usability. Not sufficient to ensure that the product will be effective, efficient and satisfying in use Necessary to measure the performance and satisfaction of users working with a product. Measurement of usability is particularly important in view of the complexity of the interactions between the user task characteristics context of use Different levels of usability for the same product when used in different contexts Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 9

Usability......is context-dependent Context of use: The users, goals, tasks, equipment (hardware, software and materials), and the physical and social environments in which a product is used. Environment Large interfaces vs. smaller ones Mobility concerns User (person who interacts with the product) Skills Former Systems (similar systems) Expectations, Goals (an intended objective) Tasks Times of use: Examples, Online Help, Shortcuts Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 10

Usability framework for measuring usability User Task Equipment Environment Context of Use Product Intended objectives Outcome of Interaction Goals Effectiveness Efficiency Satisfaction Usability Measures defines Actual Value relation Target Value Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 11

Usability framework When specifying or measuring usability, the following information is needed: A description of the components of the context of use including users, equipment, goals Usability measures consisting of target and actual value of effectiveness, efficiency, and satisfaction for the intended context Usability measures Provide at least one measure for each of effectiveness, efficiency, and satisfaction No objective measures of these values are possible Usage of subjective methods instead Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 12

Usability framework Measure values (example) Effectiveness Measures relate the goals or sub-goals of the user to the accuracy and completeness with which these goals can be achieved Example: Goal: Reproduce 2-page document in a specified format Accuracy = Number of spelling mistakes Completeness = Number of words in transcribed document Number of words in source document Additional measures may be required for particular desired properties of the product which contribute to usability. Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 13

Usability framework Measure values Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 14

Usability principles according to Nielsen Visibility of system status Match between system and the real world User control and freedom Consistency and standards Recognition rather than recall Aesthetic and minimalist design Help users recognize, diagnose, and recover from errors Help and documentation Called Nielsen s heuristics of usability, 1994 http://www.useit.com/ Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 15

Usability principles according to Nielsen 1-9 Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time For example, pay attention to response time 0.1 sec: no special indicators needed 1.0 sec: user tends to lose track of data 10 sec: max duration if user to stay focused on action for longer delays, use percent-done progress bars searching database for matches Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 16

Usability principles according to Nielsen 2-9 Match between system & real world The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order Bad example (old) Mac and Amiga desktop Dragging disk to trash logically should delete it, not eject it Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 17

Usability principles according to Nielsen 3-9 User control & freedom Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo Wizards Surf between states For infrequent tasks (e.g., modem configuration.) Not for common tasks Good for beginners have 2 versions (WinZip), no fixed paths Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 18

Usability principles according to Nielsen 4-9 Consistency and Standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions Use the same elements always at the same place User Dialogs: Example: OK always should mean a confirmation statement Usage of standard frameworks (MFC, Java, Qt)) Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 19

Usability principles according to Nielsen 5-9 Recognition rather than recall Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate Menus, Icon etc. vs. Command line When using icons in a site's navigation, use icons that are easily recognizable Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 20

Usability principles according to Nielsen 6-9 Flexibility and efficiency of use Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions (e.g., macros) Keyboard accelerators Customizable toolbars and palettes Context-sensitive Menues Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 21

Usability principles according to Nielsen 7-9 Aesthetic and minimalist design Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. Aesthetics of display considered Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 22

Usability principles according to Nielsen 8-9 Help users recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution Bad Good Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 23

Usability principles according to Nielsen 9-9 Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large MS Paper clip Eclipse help board Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 24

Usability how to get it? (Gould & Lewis, 1985) 1-2 The design principles for usability (Gould & Lewis, 1985) Early focus on the users direct contact between design team and the users get the user involved Empirical measurement Usage of prototypes and simulations to carry out real work Performance and reactions should be observed, recorded, and analyzed learnability usability testing of appropriate tasks or concepts time to learn the function keys (novices are different form experts!) collect the users thoughts collect the users mistakes collect the users attitudes Source: http://www.research.ibm.com/compsci/spotlight/hci/p300-gould.pdf Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 25

Usability how to get it? (Gould & Lewis, 1985) 2-2 Iterative design incorporate the results from the tests into the next prototype set goals for the system evaluation criteria easy to use user friendly easy to operate simple responsive flexible Integrative design (help, training, documentation, etc in parallel). build help, training, documentation, process modules at the same time Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 26

Eight Golden Rules of Interface Design (Shneiderman, Designing the User Interface) 1 Strive for consistency. Consistent sequences of actions should be required in similar situations; identical terminology should be used in prompts, menus, and help screens; and consistent commands should be employed throughout. 2 Enable frequent users to use shortcuts As the frequency of use increases, so do the user's desires to reduce the number of interactions and to increase the pace of interaction. Abbreviations, function keys, hidden commands, and macro facilities are very helpful to an expert user. 3 Offer informative feedback. For every operator action, there should be some system feedback. For frequent and minor actions, the response can be modest, while for infrequent and major actions, the response should be more substantial. 4 Design dialog to yield closure. Sequences of actions should be organized into groups with a beginning, middle, and end. The informative feedback at the completion of a group of actions gives the operators the satisfaction of accomplishment, a sense of relief, the signal to drop contingency plans and options from their minds, and an indication that the way is clear to prepare for the next group of actions. Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 27

Eight Golden Rules of Interface Design (Shneiderman, Designing the User Interface) 5 Offer simple error handling. As much as possible, design the system so the user cannot make a serious error. If an error is made, the system should be able to detect the error and offer simple, comprehensible mechanisms for handling the error. 6 Permit easy reversal of actions. This feature relieves anxiety, since the user knows that errors can be undone; it thus encourages exploration of unfamiliar options. The units of reversibility may be a single action, a data entry, or a complete group of actions. 7 Support internal focus of control. Experienced operators strongly desire the sense that they are in charge of the system and that the system responds to their actions. Design the system to make users the initiators of actions rather than the responders. 8 Reduce short-term memory load. The limitation of human information processing in short-term memory requires that displays be kept simple, multiple page displays be consolidated, window-motion frequency be reduced, and sufficient training time be allotted for codes, mnemonics, and sequences of actions. Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 28

Interaction with the system: Designing a form In most cases only interaction via graphical user interface has to be designed very carefully Remember the usability heuristics (Nielsen), especially Consistency Visibility of system status Match between system and the real world Consistency and standards Aesthetic and minimalist design Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 29

Basic GUI Elements Labels Think of clear description (Action) Buttons Actions on which data is the action performed? Input fields Selection or free text Inputfield, Textarea Selections by Radio Buttons Check Buttons Tables Can hold many similar, information Trees Structuring data Menus Fast access to different functions Help functions Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 30

Basic GUI Elements The Java Perspective http://java.sun.com/docs/books/tutorial/uiswing/components/components.html Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 31

Designing a form HCI Perspective Organize items according to common topics Leave space Short and meaningful descriptions Be clear Follow design guidelines (manufacturers) Keep in mind usability heuristics!!! A D B C Software Architecture Perspective E F Model-based development Look n Feel Use Layout Manager MVC Pattern (Paradigm) eases development Multiple Views are possible GridBackLayout Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 32

Model View Controller a = 50% b = 30% c = 20% Controller * View 1 Model * 1 1 - X - X - X a = 50% b = 30% c = 20% Multiple views can exist at the same time New views can be added without any changes to the model Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 33

Different Layouts LayoutManager controls position and look n feel within a visual container Strategy What is my optimal size? How can I place my children? can be ordered hierarchically Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 34

Different Layouts: FlowLayout and BoxLayout FlowLayout Flow means text flow Components as words Properties: preferredsize, minimumsize Children preserve their natural size A B C D A C B D line break BoxLayout components are aligned on an axis horizontal: space is partitioned in an intelligent way : maximumsize and minimumsize are respected heights are adjusted A B C D A B C D Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 35

Different Layouts: BorderLayout and GridLayout BorderLayout Changing Size: NORTH & SOUTH are horizontally resized EAST & WEST are vertically resized CENTER in all directions minimumsize is respected GridLayout table with equally sized cells each cell contains one component respecting minimumsize A B NORTH C D WEST CENTER EAST E SOUTH Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 36

Interaction with the system: Structuring the application 1-2 Application consists of more than one form How are forms linked? How are tasks performed? Workflow Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 37

Interaction with the system: Structuring the application 2-2 Think of Nielsen s heuristics, especially Match between system and the real world User control and freedom Help users recognize, diagnose, and recover from errors Structured Free Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 38

Structuring an application: Some remarks Workflow Structure Easy to handle, good for non-experienced users Supports one special use case (sequential) Must be known Cannot be changed easily Always show system status (user should be aware of work status) Goal of work process is predefined (c.f. use case output) Structured Higher degree of freedom during interaction, structure is helpful Goal of work process is predefined (c.f. use case output) Free Goal is not known (Every) possible change to data can be done at any time Highest degree of freedom, user experience is needed Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 39

Conclusions Usability Why it is an important non-functional requirement Guidelines for usability Designing a form: standards, techniques Navigating within an application: Structures Armin B. Cremers, Sascha Alda Organizational Requirements Engineering 40