Transcript Lecture-11 CSC392 Dr. Muzafar Khan.pptx

User Interface Design
SEII-Lecture 11
Dr. Muzafar Khan
Assistant Professor
Department of Computer Science
CIIT, Islamabad.
Recap
• Design, goal of design, design process in SE
context,
• Process of design
– Quality guidelines and attributes
• Evolution of software design process
– Procedural, object-oriented, aspect-oriented
• Design concepts
– Abstraction, architecture, pattern, information hiding,
separation of concerns, refactoring, design classes
2
Importance
• Almost all products require human interaction
– Either digital music player or weapon control system
•
•
•
•
Successful product must have good usability
Well designed interfaces to do work effortlessly
If poor usability, frustration, and users give up
Usability was not dominant for first three
decades
• Technology that conforms to people rather than
people are required to conform to technology
3
Product Should be
• Useful
– Accomplish what is required
– Play music, cook dinner, format a document
• Usable
– Do it easily and naturally
– Without danger of error
• Used
– People want to use it
– Be attractive, engaging, fun
4
The Golden Rules
•
•
•
•
Proposed by T. Mandel in 1997
Place the user in control
Reduce the user’s memory load
Make the interface consistent
5
Place the User in Control [1/3]
• Define interaction modes in a way that does not
force a user into unnecessary or undesired actions
– Interface mode is the current state of the interface
– Example: Spell-check in a word-processor menu
– User should be able to enter or exit the mode with no or
little effort
• Provide for flexible interaction
– Users preferences are different
– Example: keyboard, mouse etc.
– Every action is not supported by every interaction
mechanism
6
Place the User in Control [2/3]
• Allow user interaction to be interruptible and
undoable
– User should be able to interrupt
– Even in a sequence of actions, without losing the
work done
– User should have “undo” option
• Streamline interaction as skill levels advance and
allow the interaction to be customized
– Same sequence of interactions repeatedly
– Advanced users may customize the interface
7
Place the User in Control [3/3]
• Hide technical internals from the casual user
– User should not be aware of technical details
– User should not work at “inside” level
– Example: OS commands from within other software
• Design for direct interaction with objects that
appear on the screen
– Users prefer direct manipulation
– Virtual objects should behave like physical objects
– Example: Stretching the object
8
Reduce the User’s Memory Load
[1/3]
• Reduce demand on short-term memory
– Complex task may lead to memory load
– Interface should reduce the requirement to
remember past actions, inputs, and results
• Establish meaningful defaults
– Initial defaults should make sense for average user
– User preferences
– “Reset” option
9
Reduce the User’s Memory Load
[2/3]
• Define shortcuts that are intuitive
– Shortcut keys
– Easy to remember
– Example: Ctrl + C
• The visual layout of the interface should be
based on a real-world metaphor
– Similar terms as of real world
– User rely on well-understood visual cues
– Example: Printer icon
10
Reduce the User’s Memory Load
[3/3]
• Disclose information in a progressive fashion
– Interaction should be organized
– Level of abstractions
– Example: Printer preferences
11
Make the Interface Consistent
[1/2]
• Allow the user to put the current task into a
meaningful context
–
–
–
–
Complex layers of interaction with multiple screen images
Indicators should be provided
User should know the context
Alternatives should be known
• Maintain consistency across a family of applications
– A family should implement same design rules
– Example: Microsoft office
12
Make the Interface Consistent
[2/2]
• If past interactive models have created user
expectations, do not make changes unless there
is a compelling reason to do so
– De facto standards
– Change will cause confusion
– Example: Ctrl + C
13
User Interface Analysis and
Design
• Interface analysis and design models
– Four different design models
– User model
– Design model
– User’s mental model / system perception
– Implementation model
– These models may differ significantly
– Need to derive consistent representation of the
interface
14
Types of User
• Novice
– New user
– No syntactic knowledge of the system
– Little semantic knowledge of the application / computer
usage
• Knowledgeable, intermittent
– Reasonable semantic knowledge
– Relatively low recall of syntactic knowledge
• Knowledgeable, frequent
– Good syntactic and semantic knowledge
– Power user
15
User’s Mental Model and
Implementation Model
• User’s mental model
– Image of the system that end users carry in their heads
– System perception / how it will perform certain tasks
– Accuracy of description depends on user’s profile
• Implementation model
– Look and feel of the interface
– All supporting information e.g. help files
– User’s mental model and implementation model should
be synchronized
• Know the user, know the tasks
16
Analysis and Design Process
•
•
•
•
•
Iterative process
Interface analysis and modeling
Interface design
Interface construction
Interface validation
17
Analysis and Design Process
18
Figure source: Software Engineering: A Practitioner’s Approach, R. S. Pressman, 7th ed., p. 319
Analysis and Design Process
• Interface analysis
– Focus on user profiles
– Skill level, business understanding, and general
receptiveness to the new system
– Requirements elicitation for each user profile
– Task analysis
– Physical work environment concerns
• Physical location
• User position while interacting with the system
• Other constraints e.g. noise
– Analysis model is developed
19
Analysis and Design Process
• Interface design
– Set of interface objects and actions and their screen
presentations
– User should perform all the intended functions
– Easy to use system / good usability
• Interface construction
– Creation of a prototype
– Reflection of usage scenarios
– User interface toolkit
20
Analysis and Design Process
• Interface validation
– Implementation of every user task
– Accommodation all task variations
– Ease to use, easy to learn
– User’s acceptance
21
Summary
• Importance of user interface design
– Useful, useable, used
• Three golden rules
– Place the user in control
– Reduce the user’s memory load
– Make the interface consistent
• Analysis and design process
–
–
–
–
Interface analysis and modeling
Interface design
Interface construction
Interface validation
22