Upload
ben-george
View
225
Download
0
Embed Size (px)
Citation preview
7/28/2019 Lecture05 Ui
1/25
1
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)
http://www.cs.cmu.edu/afs/cs/project/vit/ftp/pdf/intro_softarch.pdf7/28/2019 Lecture05 Ui
2/25
2
User Interface Design Principles ideas for this and followingslides from Pressmans Software Engineering, 6/e 2005
Put the user in control Keep the users memory load controlled
Consider issues of consistency
7/28/2019 Lecture05 Ui
3/25
3
User Quote (user in control)
What I really would like is a system thatreads my mind.
It knows what I want to do before I needto do it and makes it very easy for me to
get it done.
Thats all, just that.
7/28/2019 Lecture05 Ui
4/25
4
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
7/28/2019 Lecture05 Ui
5/25
5
User maintains control when:
Youve provided for flexible interaction Youve allowed for interaction to be interrupted andundoable
Youve allowed for interface to be customized tousers skill level
Youve hidden technical internals (no OS commandsneeded)
You dont force user into unnecessary actions Youve designed for direct interaction with objects on
the screen
7/28/2019 Lecture05 Ui
6/25
6
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
7/28/2019 Lecture05 Ui
7/25
7
Consistency
Use the same design standard throughout allscreens
Use the same input techniques throughout allscreens
7/28/2019 Lecture05 Ui
8/25
8
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 andresulting design
7/28/2019 Lecture05 Ui
9/25
9
User analysis
Interview the users or representatives of theusers
Interview sales, marketing, or support staffabout user characteristics
7/28/2019 Lecture05 Ui
10/25
10
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?
7/28/2019 Lecture05 Ui
11/25
11
Environment analysis
What will be the physical location of the sw? Will user be sitting, standing, walking?
Will user be dedicated to this task/multi-
users required for this task? Will there be noise, light, or spaceimpairments?
7/28/2019 Lecture05 Ui
12/25
12
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?
7/28/2019 Lecture05 Ui
13/25
13
Using use cases - identify tasks and subtasksExample - 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 givenroom dimensions
Locate windows and doors
Scaled drawings of furn.
Move furniture aroundfloor plan
Provide 3-D view of floorplan with furniture foruser
7/28/2019 Lecture05 Ui
14/25
14
Objects derived from use cases
Select physical objects from use casenarratives
Categorize into classes
Define details of the attributes of each class
Determine operations on each of theseobjects
7/28/2019 Lecture05 Ui
15/25
15
Task workflow analysis
When different user groups and user roles are to usesoftware 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
7/28/2019 Lecture05 Ui
16/25
16
Analysis for presentation of content
Content may be from Other parts of the application Database accessible from application External to application
Format of content
Consistent location for same types? Customizable location? Identification of content? Handling of large datasets? Summary available? Color?
Error handling?
7/28/2019 Lecture05 Ui
17/25
17
Steps for UI design
Parse use cases - objects (nouns) andoperations (verbs)
Sketch set of screens
Test UI
Iterate last 2 steps
7/28/2019 Lecture05 Ui
18/25
18
Common design issues
Response time Help
Error handling
Command and menu labeling
Consider accessibility for special needs - wwwconsortium Web Content Accessibility Guidelines
Internationalization guidelines are available -
www-306.ibm.com/able/access_ibm/disability.html
7/28/2019 Lecture05 Ui
19/25
19
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
7/28/2019 Lecture05 Ui
20/25
20
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
7/28/2019 Lecture05 Ui
21/25
21
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 menuitems?
7/28/2019 Lecture05 Ui
22/25
22
Test the UI
Review material from M. Rettigs paperPrototyping For Tiny Fingers
7/28/2019 Lecture05 Ui
23/25
23
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
7/28/2019 Lecture05 Ui
24/25
24
Bjarne Stronstrup (designer and implementor of C++)
I have always wished that my computerwould be as easy to use as my telephone.
My wish has come true.
I no longer know how to use mytelephone.
7/28/2019 Lecture05 Ui
25/25
25
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