CMPS115 Class 6 : User Interface Design

Due today
Scenarios Decomposing paper

Next class

Deliverable: Requirements

look at template and at example at link in deliverable webpage

Introduction to Software Architecture by Garlan and Shaw (read and review only pages 1-16)

User Interface Design Principles

slides from Pressmans Software Engineering, 6/e 2005

ideas for this and following

Put the user in control Keep the users memory load controlled Consider issues of consistency

User Quote (user in control)

What I really would like is a system that reads my mind. It knows what I want to do before I need to do it and makes it very easy for me to get it done. Thats all, just that.
3

Control
Whos in Control?
Does user adapt to computers model of task? Does computer adapt to users model of task?
Consider the novice user Consider the knowledgeable, intermittent user Consider the knowledgeable, frequent user

User maintains control when:

Youve provided for flexible interaction Youve allowed for interaction to be interrupted and undoable Youve allowed for interface to be customized to users skill level Youve hidden technical internals (no OS commands needed) You dont force user into unnecessary actions Youve designed for direct interaction with objects on the screen

Users memory load

Make UI show state with visual cues Use meaningful defaults that can be reset/set Provide meaningful shortcuts Make visual layout reflect real world task

Consistency
Use the same design standard throughout all screens Use the same input techniques throughout all screens

UI analysis and design

Model the user, task, and environment Design the interface Construct the interface Validate the interface

Iterate through these, with each pass elaborate additional requirements and resulting design

User analysis
Interview the users or representatives of the users Interview sales, marketing, or support staff about user characteristics

Ask questions to understand the users

Trained professionals, technicians, clerical, manufacturing users? Level of education Learn from written materials or is class needed? Expert typists or phobic Age range One gender predominates? Compensation for users for their work is how? Use during normal work hours or until job is done? Integral part of job or infrequent use? What is primary language of users? What are consequences of mistakes? Are users subject matter experts? Knowledge about underlying technology needed?
10

Environment analysis
What will be the physical location of the sw? Will user be sitting, standing, walking? Will user be dedicated to this task/multiusers required for this task? Will there be noise, light, or space impairments?

11

Task analysis
What tasks will be done while user is working? What work is performed in special circumstances? What special domains are used during work? What is the sequence of workflow?

12

Using use cases - identify tasks and subtasks Example - computer-aided design for interior design Tasks
Furniture layout Fabric selection Wall/widow coverings sel. Presentation to user Costing Shopping

Subtasks for furn. layout

Floor plan drawing given room dimensions Locate windows and doors Scaled drawings of furn. Move furniture around floor plan Provide 3-D view of floor plan with furniture for user

13

Objects derived from use cases

Select physical objects from use case narratives Categorize into classes Define details of the attributes of each class Determine operations on each of these objects

14

Task workflow analysis

When different user groups and user roles are to use software Use flow diagram called swimlane diagram Column for each role Bubbles for processes, flows for data Flows between columns represent interactions between processes of different roles Look and feel of UI for different roles may be different

15

Analysis for presentation of content

Content may be from
Other parts of the application Database accessible from application External to application Consistent location for same types? Customizable location? Identification of content? Handling of large datasets? Summary available? Color? Error handling?

Format of content

16

Steps for UI design

Parse use cases - objects (nouns) and operations (verbs) Sketch set of screens Test UI Iterate last 2 steps

17

Common design issues

Response time Help Error handling Command and menu labeling Consider accessibility for special needs - www consortium Web Content Accessibility Guidelines Internationalization guidelines are available www-306.ibm.com/able/access_ibm/disability.html

18

responsiveness
Length of response time
1 sec acceptable More than that - use progress bar and busy icon

Variability
1 sec is better than from 0.2 sec to 3.0 sec

19

Design of help features

Provided for all features or just subset? Available at all times? How to request? How presented? Window, print doc, 2-lines How to return to normal operations? How is help info structured? Flat, hierarchical, hypertext

20

Command and menu labels

Easy to remember labels? How to remind? What is form of commands? Control seq or typed word? Will all menu items have commands? Customizable and shortcuts available? Self-explanatory labels Do submenu items fit logically under menu items?

21

Test the UI
Review material from M. Rettigs paper Prototyping For Tiny Fingers

22

Summary
Weak UI may cause failure of acceptance of system Follow 3 principles of UI design
User in control Reduce memory load Consistency

Development involves
Analysis (user, task, environment) Design (use cases drive sketches) Evaluate and iterate

23

Bjarne Stronstrup

(designer and implementor of C++)

I have always wished that my computer would be as easy to use as my telephone. My wish has come true. I no longer know how to use my telephone.

24

Client/Server Responsiveness Design project issues

Local/Remote awareness
Server may balk; client should keep running smoothly Optimistic response (correct if server updates otherwise)

Threading
User thread services UI
collects events, changes control state, posts events not to be used for game action!

Game thread runs engine

calculates local world based on local events and server data

I/O thread handles network

25