Programming Techniques Lecture 11 User Interface Design Based on: Software Engineering, A Practitioner’s Approach, 6/e, R.S. Pressman Software Engineering Fall 2005

Programming Techniques Overview Interface design begins with careful analysis of the user, the task and the environment. Once the user's tasks are identified, user scenarios are created and validated. Prototyping is a common approach to user interface analysis and design. Early involvement of the user in the design process makes her or him more likely to accept the final product. User interfaces must be field tested and validated prior to general release.

Programming Techniques What? Who? Why? What is it? –The design of the interface between a human and the computer. –It creates an effective communication medium between a human and a computer. Who does it? –A software engineer Why is it important? –Difficult usage of a software »increase mistakes »increase your effort to accomplish your goals »users won’t like it

Programming Techniques What are the steps? Identification of –User –Task –Environmental requirements Define set of interface objects and actions (creation of screen layout) –Graphical design –Placement of icons –Definition of descriptive screen text –Specification and titling for windows –Specification minor and major menu items Tools are used to prototype Evaluation

Programming Techniques Questions Asked/Answered Who is the user? How does the user learn to interact with a new computer-based system? How does the user interpret information produced by the system? What will the user expect of the system?

Programming Techniques Interface Design - lack of consistency - too much memorization - no guidance / help - no context sensitivity - poor response - unfriendly Typical Design Errors

Programming Techniques The Golden Rules Theo Mandel’s three ‘golden rules’: Place the user in control Reduce the user’s memory load Make the interface consistent

Programming Techniques Place the User in Control Define interaction in such a way that the user is not forced into performing unnecessary or undesired actions. E.g., a user should be able to enter and exit the spell checking mode with little or no effort. Provide for flexible interaction ( users have varying preferences: e.g. use keyboard, mouse, or a digitizer pen) Allow user interaction to be interruptible and reversible Streamline interaction as skill level increases and allow customization of interaction. Hide technical internals from the casual user (e.g., a user should never be required to type operating system commands from within application software.) Design for direct interaction with objects that appear on the screen. For example, an application interface that allows a user to ‘stretch’ an object (scale it in size) is an implementation of direct manipulation.

Programming Techniques Reduce the User’s Memory Load Reduce demands on user's short-term memory. Provide visual cues that enable a user to recognize past actions, rather than having to recall them. Establish meaningful defaults Define intuitive short-cuts (e.g., first letter of the task to be invoked). Visual layout of user interface should be based on a familiar real world metaphor. For example, a bill payment system should use a check book and check register metaphor to guide the user through the bill paying process.) Disclose information in a progressive fashion. For example, to pick a underlining function, you first need to go to the text style menu, then to pick underlining, and then all underlining options are presented.

Programming Techniques Make the Interface Consistent Allow user to put the current task into a meaningful context. ( Provide indicators, e.g., window titles, graphical icons, consistent colour coding) that enable the user to know the context of the work at hand.) Maintain consistency across a family of applications. A set of applications (or products) should all implement the same design rules so that consistency is maintained for all interaction. If past interaction models have created user expectations, do not make changes unless there is a good reason to do so (e.g., the use of alt-S to save a file).

Programming Techniques Usability It is not derived from aesthetics, state-of –the-art interaction mechanisms, or built-in interface intelligence. Usability occurs when the architecture of the interface fits the needs of the people who will be using it.

Programming Techniques Usability Assessment Watch users interact with the system and answer the following questions: Is the system usable without help or instruction? Do the rules of interaction help a knowledgeable user to work efficiently? Do interaction mechanisms become more flexible as users become more knowledgeable? Has the system been tuned to the physical and social environment in which it will be used? Is the user aware of the state of the system? Does the user know where she is at all times? Is the interface structured in a logical and consistent manner? Are interaction mechanisms, icons, and procedures consistent across the interface? Does the interaction anticipate errors and help the user correct them? Is the interface tolerant of errors that are made? Is the interaction simple?

Programming Techniques User Interface Design Models Four different models come into play when a user interface is to be designed: –Design model –User model –Mental model or system perception –Implementation model (system image)

Programming Techniques Design Model Design model –The software engineer creates a design model –Incorporates data, architectural, interface, and procedural representations of the software.

Programming Techniques User Model User model –Human engineer (or software engineer) –Depicts the profile of end users of the system

Programming Techniques User Model User Categories Novices - have no syntactic knowledge of the system and little knowledge of the application or general computer usage Knowledgeable intermittent users - have reasonable semantic knowledge of the application, but low recall of syntactic information necessary to use the interface Knowledgeable frequent users - good semantic and syntactic knowledge of the application, look for interaction shortcuts

Programming Techniques Mental Model End user develops a mental image The image of the system that an end user carries in his/her hand

Programming Techniques Implementation Model Created by implementers of the system The computer-based system with all supporting information (books, manuals) When the system image and the system perception are coincident, users generally feel comfortable with the software and use it effectively.

Programming Techniques User Interface Design Process (Spiral Model) The analysis and design process for user interfaces is iterative and can be represented using a spiral model. It encompasses four distinct framework activities: –User, task, and environment analysis and modeling –Interface design –Interface construction – in most cases involves prototyping –Interface validation

Programming Techniques User Interface Design Process

Programming Techniques Interface Analysis Goals Interface analysis means understanding: People who interact with system through the interface Tasks end-users must perform to do their work The content presented as part of the interface The nature of the environment in which tasks will be performed

Programming Techniques Analysis of Physical Work Environment Where will the interface be located physically? Will the user be sitting, standing, or performing other tasks unrelated to the interface? Does the interface hardware accommodate space, light, or noise constraints? Are there special human factors considerations driven by environmental factors?

Programming Techniques User Analysis Sources User interviews - designers meet with end-users individually or in groups Sales input - sales people help designers categorize users and better understand their needs Marketing input - marketing analysis can help define market segments and help understand how each segment might use the software Support input - support staff can provide good input what works and does not, what users like, what features generate questions, and what features are easy to use

Programming Techniques User Analysis I Are users trained professionals, technician, clerical, or manufacturing workers? What level of formal education does the average user have? Are the users capable of learning from written materials or have they expressed a desire for classroom training? Are users expert typists or keyboard phobic? What is the age range of the user community? Will the users be represented predominately by one gender? How are users compensated for the work they perform?

Programming Techniques User Analysis II Do users work normal office hours or do they work until the job is done? Is the software to be an integral part of the work users do or will it be used only occasionally? What is the primary spoken language among users? What are the consequences if a user makes a mistake using the system? Are users experts in the subject matter that is addressed by the system? Do users want to know about the technology the sits behind the interface?

Programming Techniques Task Analysis and Modeling The user’s goal is to accomplish one or more tasks via the UI. - Understand the tasks that people will perform - Map the tasks into a similar set of tasks Task analysis answers the following questions: –What work will the user perform in specific circumstances? –What tasks and subtasks will be performed as the user does the work? –What specific problem domain objects will the user manipulate as work is performed? –What is the sequence of work tasks—the workflow? –What is the hierarchy of tasks?

Programming Techniques Task Analysis and Modeling Use-cases - define basic interaction. - What work will the user perform in specific circumstances? Task elaboration - refines interactive tasks. - What tasks and subtasks will be performed as the user does the work? Object elaboration - identifies interface objects (classes) - What specific problem domain objects will the user manipulate as work is performed? Workflow analysis - defines how a work process is completed when several people (and roles) are involved. - What is the sequence of work tasks? Hierarchical representation - As the interface is analyzed, a process of elaboration occurs. Once workflow has been established, a task hierarchy can be defined for each user type. The hierarchy is derived by a stepwise elaboration of each task identified for the user.

Programming Techniques Analysis of Display Content Are different types of data assigned to consistent geographic locations on the screen (e.g., photos always appear in the upper right hand corner)? Can the user customize the screen location for content? Is proper on-screen identification assigned to all content? If a large report is to be presented, how should it be partitioned for ease of understanding? Will mechanisms be available for moving directly to summary information for large collections of data. Will graphical output be scaled to fit within the bounds of the display device that is used? How will color to be used to enhance understanding? How will error messages and warning be presented to the user?

Programming Techniques Interface Design Steps After task analysis, interface design activity begins. The first interface design steps: - Use the information developed during interface analysis to define interface objects and actions (operations) - Define events (user actions) that will cause the state of the user interface to change and model this behaviour - Depict each interface state as it will appear to the end-user - Indicate how the user interprets the state of the system from information provided through the interface

Programming Techniques Defining Interface Objects and Actions Create a list of objects and actions –Define them –Then categorize by types »Target object (e.g. a report icon) »Source object (e.g. A printer icon) »An application object (objects represents application-specific data) Creation of screen layout –Graphical design –Placement of icons –Definition of descriptive screen text –Specification and titling for windows –Specification minor and major menu items

Programming Techniques Validation Considerations Does the interface implement every user task correctly, accommodate all task variations, and achieve all general user requirements? To what degree is the user interface easy to use and easy to learn? Do users' accept that the user interface as a useful tool in their daily work?

Programming Techniques Interface Design Patterns Top-level navigation - Used for the complete UI. Provides a top-level menu, often coupled with a logo or identifying graphic, that enables direct navigation to any of the system’s major functions. Card stack - Used for page layout. Provides the appearance of a stack of tabbed cards, each selectable with a mouse click and each representing specific subfunction or content categories. Fill-in-the-blanks – Used for forms and input. Allow alphanumeric data to be entered in a ‘text box’. Sortable table - Used for tables. Displays a long list of records that can be sorted by selecting a toggle mechanism for any column label. Bread crumbs - Used for Direct data manipulation. Provides a full navigation path when the user is working with a complex hierarchy of pages or display screens. Edit-in-place - Used for Navigation. Provides simple text editing capability for certain types of content in the location that is displayed. Simple search - Used for searching Shopping cart - Used for e-Commerce. Provides a list of items selected for purchase. Progress indicator – Provides an indication of progress when an operation is under way.

Programming Techniques Interface Design Issues System response time - time between the point at which user initiates some control action and the time when the system responds User help facilities - integrated, context sensitive help versus add-on help Error handling - messages should be non-judgmental, describe problem precisely, and suggest valid solutions Menu and command labeling - based on user vocabulary, simple grammar, and have consistent rules for abbreviation Application accessibility - ensuring that interface design contains mechanisms for accommodating user with special needs (vision, hearing, mobility, speech, learning impairments) Internationalization - interface accommodates needs of different locales and languages

Programming Techniques ‘Good’ Error Messages Characteristics The message should describe the problem in language the user can understand. The message should provide constructive advice for recovering from the error. The message should indicate any negative consequences of the error (e.g., potentially corrupted data files) so that the user can check to ensure that they have not occurred (or correct them if they have). The message should be accompanied by an audible or visual cue. The message should be non-judgemental. That is, the wording should never place blame on the user.

Programming Techniques Implementation Tools Interface design and prototyping tools –User-interface toolkits or –User-interface development systems (UIDS) These tools provide components or objects –Creation of windows, Menus, Device interaction, Error messages, Commands, Other items… Built in mechanisms for –Managing input devices –Validating user input –Handling errors and displaying error messages –Providing help and prompts –…

Programming Techniques User Interface Evaluation Cycle User interface design is created. Then it is evaluated according to the users’ feedbacks. Steps: 1. Preliminary design 2. Build first interface prototype 3. User evaluates interface 4. Evaluation studied by designer 5. Design modifications made 6. Build next prototype 7. If interface is not complete then go to step 3

Programming Techniques Figure: Design Evaluation Cycle

Programming Techniques User Interface Design Evaluation Criteria Length and complexity of written interface specification provide an indication of amount of learning required by system users Number of user tasks and the average number of actions per task provide an indication of interaction time and overall system efficiency Number of tasks, actions, and system states in the design model provide an indication of the memory load required of system users Interface style, help facilities, and error handling protocols provide a general indication of system complexity and the degree of acceptance by the users

Programming Techniques Summary I The user interface is the most important element of a computer-based system poor product. A week interface may cause an otherwise well- designed and solidly implemented application to fail. Three important principles guide the design effective UIs: –Place the user in control –Reduce the user’s memory load –Make the interface consistent

Programming Techniques Summary II UI design begins with the identification of user, task, and environmental requirements. In task analysis, user tasks and actions are defined. Response time Help facilities Error handling Command and action structure Implementation tools are evolved for interface design and prototyping. User interface design is created, then it is evaluated according to the users’ feedbacks.

Programming Techniques 2005F Instructor John D Lin - Lectures Tues & Thurs 10:00-11:30 RM. 100, Lower Block