Design, goal of design, design process in SE context, Process of design – Quality guidelines and attributes Evolution of software design process – Procedural,

User Interface DesignSEII-Lecture 11

Dr. Muzafar KhanAssistant ProfessorDepartment of Computer ScienceCIIT, Islamabad.

2

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

3

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

4

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

5

The Golden Rules

• Proposed by T. Mandel in 1997• Place the user in control• Reduce the user’s memory load• Make the interface consistent

6

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

7

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

8

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

9

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

10

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

11

Reduce the User’s Memory Load [3/3]

• Disclose information in a progressive fashion– Interaction should be organized– Level of abstractions– Example: Printer preferences

12

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

13

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

14

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

15

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

16

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

17

Analysis and Design Process

• Iterative process• Interface analysis and modeling • Interface design• Interface construction • Interface validation

18

Analysis and Design Process

Figure source: Software Engineering: A Practitioner’s Approach, R. S. Pressman, 7 th ed., p. 319

19

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

20

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

21

Analysis and Design Process

• Interface validation– Implementation of every user task– Accommodation all task variations– Ease to use, easy to learn– User’s acceptance

22

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