SlideShare uma empresa Scribd logo
1 de 55
ESE
Einführung in Software Engineering
8. User Interface Design
Prof. O. Nierstrasz
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.2
Roadmap
> Interface design models
> Design principles
> GUI characteristics
> User Guidance
> Usability Testing
> Examples
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.3
Literature
Sources
> Software Engineering, I. Sommerville, 7th Edn., 2004.
> Software Engineering — A Practitioner’s Approach, R. Pressman,
Mc-Graw Hill, 5th Edn., 2001.
Recommended reading
> Mary Beth Rosson, John M. Carroll, Usability Engineering, 2002
> Jakob Nielsen, Usability Engineering, Morgan Kaufmann, 1999.
> Alan Cooper, About Face — The Essentials of User Interface
Design, Hungry Minds, 1995.
> Alan Cooper, The Inmates are running the Asylum, SAMS, 1999.
> Jef Raskin, The Humane Interface, Addison Wesley, 2000.
> Jeff Johnson, GUI Bloopers, Morgan Kaufmann, 2000.
> The Interface Hall of Shame,
http://homepage.mac.com/bradster/iarchitect/shame.htm
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.4
Roadmap
> Interface design models
> Design principles
> GUI characteristics
> User Guidance
> Usability Testing
> Examples
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.5
The UI design process
> UI design is an iterative process involving close liaisons
between users and designers.
> The 3 core activities in this process are:
— User analysis. Understand what the users will do with the
system;
— System prototyping. Develop a series of prototypes for
experiment;
— Interface evaluation. Experiment with these prototypes with
users.
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.6
The design process
© Ian Sommerville 2004
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.7
Interface Design Models
Four different models occur in HCI design:
1. The design model expresses the software design.
2. The user model describes the profile of the end users. (i.e.,
novices vs. experts, cultural background, etc.)
3. The user’s model is the end users’ perception of the system.
4. The system image is the external manifestation of the system (look
and feel + documentation etc.)
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.8
…
UI Models
Implementation
Model
Mental
Model
Manifest Models BetterWorse
Alan Cooper, About Face, 1995
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.9
Roadmap
> Interface design models
> Design principles
> GUI characteristics
> User Guidance
> Usability Testing
> Examples
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.10
User Interface Design Principles
Principle Description
User familiarity
Use terms and concepts familiar to the user.
Consistency
Comparable operations should be activated in the
same way. Commands and menus should have the
same format, etc.
Minimal surprise
If a command operates in a known way, the user
should be able to predict the operation of comparable
commands.
Feedback
Provide the user with visual and auditory feedback,
maintaining two-way communication.
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.11
Principle Description
Memory load
Reduce the amount of information that must be
remembered between actions. Minimize the memory
load.
Efficiency
Seek efficiency in dialogue, motion and thought.
Minimize keystrokes and mouse movements.
Recoverability
Allow users to recover from their errors. Include undo
facilities, confirmation of destructive actions, 'soft'
deletes, etc.
User guidance
Incorporate some form of context-sensitive user
guidance and assistance.
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.12
Roadmap
> Interface design models
> Design principles
> GUI characteristics
> User Guidance
> Usability Testing
> Examples
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.13
GUI Characteristics
Characteristic Description
Windows
Multiple windows allow different information to be
displayed simultaneously on the user’s screen.
Icons
Usually icons represent files (including folders and
applications), but they may also stand for processes
(e.g., printer drivers).
Menus
Menus bundle and organize commands (eliminating the
need for a command language).
Pointing
A pointing device such as a mouse is used for
command choices from a menu or indicating items of
interest in a window.
Graphics
Graphical elements can be commands on the same
display.
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.14
GUIs
Advantages
> They are easy to learn and use.
— Users without experience can learn to use the system quickly.
> The user may switch attention between tasks and applications.
> Fast, full-screen interaction is possible with immediate access to the
entire screen
Problems
> A GUI is not automatically a good interface
— Many software systems are never used due to poor UI design
— A poorly designed UI can cause a user to make catastrophic errors
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.15
Direct Manipulation
Advantages
> Users feel in control and are less likely to be intimidated by the
system
> User learning time is relatively short
> Users get immediate feedback on their actions
> mistakes can be quickly detected and corrected
Problems
> Finding the right user metaphor may be difficult
> It can be hard to navigate efficiently in a large information space.
> It can be complex to program and demanding to execute
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.16
Menu Systems
Advantages
> Users don’t need to remember
command names
> Typing effort is minimal
> User errors are trapped by the
interface
> Context-dependent help can be
provided (based on the current
menu selection)
Problems
> Actions involving logical conjunction (and) or disjunction (or) are awkward
to represent
> If there are many choices, some menu structuring facility must be used
> Experienced users find menus slower than command language
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.17
Menu Structuring
Scrolling menus
> The menu can be scrolled to reveal additional choices
> Not practical if there is a very large number of choices
Hierarchical menus
> Selecting a menu item causes the menu to be replaced by a sub-
menu
Walking menus
> A menu selection causes another menu to be revealed
Associated control panels
> When a menu item is selected, a control panel pops-up with further
options
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.18
Command Interfaces
With a command language, the user types commands to give
instructions to the system
> May be implemented using cheap terminals
> Easy to process using compiler techniques
> Commands of arbitrary complexity can be created by command
combination
> Concise interfaces requiring minimal typing can be created
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.19
Command Interfaces
Advantages
> Allow experienced users to interact quickly with the system
> Commands can be scripted (!)
Problems
> Users have to learn and remember a command language
> Not suitable for occasional or inexperienced users
> An error detection and recovery system is required
> Typing ability is required (!)
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.20
Analogue vs. Digital Presentation
Digital presentation
> Compact — takes up little screen space
> Precise values can be communicated
Analogue presentation
> Easier to get an 'at a glance' impression of a value
> Possible to show relative values
> Easier to see exceptional data values
01002003004000255075100Pressure Temperature
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.21
Colour Use Guidelines
Colour can help the user understand complex information
structures.
> Don’t use (only) colour to communicate meaning!
— Open to misinterpretation (colour-blindness, cultural differences ...)
— Design for monochrome then add colour
> Use colour coding to support user tasks
— highlight exceptional events
— allow users to control colour coding
> Use colour change to show status change
> Don't use too many colours
— Avoid colour pairings which clash
> Use colour coding consistently
which clash
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.22
Roadmap
> Interface design models
> Design principles
> GUI characteristics
> User Guidance
> Usability Testing
> Examples
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.23
User Guidance
The user guidance system is integrated with the user
interface to help users when they need information about
the system or when they make some kind of error.
Includes
> System messages, including error messages
> Documentation provided for users
> On-line help
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.24
Help system use
> Multiple entry points should be provided
— the user should be able to get help from different places
> The help system should indicate where the user is
positioned
> Navigation and traversal facilities must be provided
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.25
Error Message Guidelines
> Speak the user’s language
> Give constructive advice for recovering from the error
> Indicate negative consequences of the error (e.g., possibly
corrupted files)
> Give an audible or visual cue
> Don’t make the user feel guilty!
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.26
Roadmap
> Interface design models
> Design principles
> GUI characteristics
> User Guidance
> Usability Testing
> Examples
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.27
Usability Testing
> Observe a group of test subjects performing a pre-
defined scenario
— Which test subjects?
— How many test subjects?
— Which scenarios?
— What to observe?
Jakob Nielsen, Usability Engineering
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.28
User interface evaluation
> Some evaluation of a user interface design
should be carried out to assess its usability.
> Full scale evaluation is very expensive and
impractical for most systems.
> Ideally, an interface should be evaluated against a
usability specification. However, it is rare for such
specifications to be produced.
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.29
Simple evaluation techniques
> Questionnaires for user feedback.
> Video recording of system use and subsequent tape
evaluation.
> Instrumentation of code to collect information about
facility use and user errors.
> The provision of code in the software to collect on-line
user feedback.
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.30
Hints
> Establish concrete goals — what do you want to
achieve?
— What criteria will you use to establish “success”?
— What data will you collect?
— Choose representative test tasks.
> Carry out a pilot test first.
> Test users should truly represent the intended users.
> Use experienced experimenters. (Get trained!)
— Make the test subjects feel comfortable.
— Don’t bias the results.
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.31
Usability Attributes
Attribute Description
Learnability
How long does it take a new user to
become productive with the system?
Speed of
operation
How well does the system response
match the user’s work practice?
Robustness
How tolerant is the system of user
error?
Recoverability
How good is the system at recovering
from user errors?
Adaptability
How closely is the system tied to a
single model of work?
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.32
Why you only need to test with 5
users
QuickTime™ and a
decompressor
are needed to see this picture.
http://www.useit.com/alertbox/20000319.html
Nielsen, Jakob, and Landauer, Thomas K.: "A mathematical model of the
finding of usability problems," Proceedings of ACM INTERCHI'93
Conference (Amsterdam, The Netherlands, 24-29 April 1993), pp. 206-213.
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.33
Usability laboratories (!)
Jakob Nielsen, Usability Engineering
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.34
Roadmap
> Interface design models
> Design principles
> GUI characteristics
> User Guidance
> Usability Testing
> Examples
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.35
Is there progress?
All examples from the Interface Hall of Shame
http://homepage.mac.com/bradster/iarchitect/shame.htm
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.36
Now, that’s progress!
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.37
I want them all!
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.38
Yes, I want that print thing too
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.39
In Excel, “cut” doesn’t mean cut
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.40
Fun with scrolling!
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.41
More tabs please!
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.42
Without tabs
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.43
Helpful tips
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.44
Stop, please
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.45
I can’t make up my mind
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.46
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.47
Green good — red bad
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.48
Was that an error?
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.49
Uh … ok
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.50
Yes — I mean, no
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.51
No, I don’t want to trash my disk!
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.52
Key points
> The user interface design process involves user analysis, system
prototyping and prototype evaluation.
> User interface design principles should help guide the design of
user interfaces.
> Interaction styles include direct manipulation, menu systems form
fill-in, command languages and natural language.
> Graphical displays should be used to present trends and
approximate values. Digital displays when precision is required.
> Colour should be used sparingly and consistently.
> The goals of UI evaluation are to obtain feedback on how to
improve the interface design and to assess if the interface meets its
usability requirements.
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.53
What you should know!
> What models are important to keep in mind in UI
design?
> What is the principle of minimal surprise?
> What problems arise in designing a good direct
manipulation interface?
> What are the trade-offs between menu systems and
command languages?
> How can you use colour to improve a UI?
> In what way can a help system be context sensitive?
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.54
Can you answer the following
questions?
> Why is it important to offer “keyboard short-cuts” for
equivalent mouse actions?
> How would you present the current load on the system?
Over time?
> What is the worst UI you every used? Which design
principles did it violate?
> What’s the worst web site you’ve used recently? How
would you fix it?
> What’s good or bad about the MS-Word help system?
© Oscar Nierstrasz
ESE — User Interface Design
ESE 8.55
Attribution-ShareAlike 3.0 Unported
You are free:
to Share — to copy, distribute and transmit the work
to Remix — to adapt the work
Under the following conditions:
Attribution. You must attribute the work in the manner specified by the author or
licensor (but not in any way that suggests that they endorse you or your use of the
work).
Share Alike. If you alter, transform, or build upon this work, you may distribute the
resulting work only under the same, similar or a compatible license.
For any reuse or distribution, you must make clear to others the license terms of this work.
The best way to do this is with a link to this web page.
Any of the above conditions can be waived if you get permission from the copyright holder.
Nothing in this license impairs or restricts the author's moral rights.
License
> http://creativecommons.org/licenses/by-sa/3.0/

Mais conteúdo relacionado

Mais procurados

HCI 3e - Ch 5: Interaction design basics
HCI 3e - Ch 5:  Interaction design basicsHCI 3e - Ch 5:  Interaction design basics
HCI 3e - Ch 5: Interaction design basicsAlan Dix
 
Ch09-User Interface Design
Ch09-User Interface DesignCh09-User Interface Design
Ch09-User Interface DesignFajar Baskoro
 
User Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and AccessibilityUser Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and AccessibilityMarc Miquel
 
HCI 3e - Ch 8: Implementation support
HCI 3e - Ch 8:  Implementation supportHCI 3e - Ch 8:  Implementation support
HCI 3e - Ch 8: Implementation supportAlan Dix
 
hci in software development process
hci in software development processhci in software development process
hci in software development processKainat Ilyas
 
HCI - Chapter 6
HCI - Chapter 6HCI - Chapter 6
HCI - Chapter 6Alan Dix
 
User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15koolkampus
 
User Interface Design
User Interface DesignUser Interface Design
User Interface DesignJReifman
 
Hci in software process
Hci in software processHci in software process
Hci in software processrida mariam
 
Human computer interaction
Human computer interactionHuman computer interaction
Human computer interactionemaan waseem
 
User Interface Analysis and Design
User Interface Analysis and DesignUser Interface Analysis and Design
User Interface Analysis and Design Saqib Raza
 
Models of Interaction
Models of InteractionModels of Interaction
Models of InteractionjbellWCT
 
HCI 3e - Ch 3: The interaction
HCI 3e - Ch 3:  The interactionHCI 3e - Ch 3:  The interaction
HCI 3e - Ch 3: The interactionAlan Dix
 
Chapter 01 software engineering pressman
Chapter 01  software engineering pressmanChapter 01  software engineering pressman
Chapter 01 software engineering pressmanRohitGoyal183
 

Mais procurados (20)

Chapter 12 user interface design
Chapter 12 user interface designChapter 12 user interface design
Chapter 12 user interface design
 
HCI 3e - Ch 5: Interaction design basics
HCI 3e - Ch 5:  Interaction design basicsHCI 3e - Ch 5:  Interaction design basics
HCI 3e - Ch 5: Interaction design basics
 
Ch09-User Interface Design
Ch09-User Interface DesignCh09-User Interface Design
Ch09-User Interface Design
 
User Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and AccessibilityUser Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and Accessibility
 
HCI 3e - Ch 8: Implementation support
HCI 3e - Ch 8:  Implementation supportHCI 3e - Ch 8:  Implementation support
HCI 3e - Ch 8: Implementation support
 
Unit2 hci
Unit2 hciUnit2 hci
Unit2 hci
 
hci in software development process
hci in software development processhci in software development process
hci in software development process
 
Chapter1(hci)
Chapter1(hci)Chapter1(hci)
Chapter1(hci)
 
HCI - Chapter 6
HCI - Chapter 6HCI - Chapter 6
HCI - Chapter 6
 
User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15User Interface Design in Software Engineering SE15
User Interface Design in Software Engineering SE15
 
User Interface
User InterfaceUser Interface
User Interface
 
HCI
HCIHCI
HCI
 
User Interface Design
User Interface DesignUser Interface Design
User Interface Design
 
Hci in software process
Hci in software processHci in software process
Hci in software process
 
HCI Presentation
HCI PresentationHCI Presentation
HCI Presentation
 
Human computer interaction
Human computer interactionHuman computer interaction
Human computer interaction
 
User Interface Analysis and Design
User Interface Analysis and DesignUser Interface Analysis and Design
User Interface Analysis and Design
 
Models of Interaction
Models of InteractionModels of Interaction
Models of Interaction
 
HCI 3e - Ch 3: The interaction
HCI 3e - Ch 3:  The interactionHCI 3e - Ch 3:  The interaction
HCI 3e - Ch 3: The interaction
 
Chapter 01 software engineering pressman
Chapter 01  software engineering pressmanChapter 01  software engineering pressman
Chapter 01 software engineering pressman
 

Destaque

Mobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best PracticesMobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best PracticesOXD
 
Lecture 7 Software Engineering and Design User Interface Design
Lecture 7 Software Engineering and Design User Interface Design Lecture 7 Software Engineering and Design User Interface Design
Lecture 7 Software Engineering and Design User Interface Design op205
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principlesDavid Little
 
Architecture design in software engineering
Architecture design in software engineeringArchitecture design in software engineering
Architecture design in software engineeringPreeti Mishra
 
Software testing basic concepts
Software testing basic conceptsSoftware testing basic concepts
Software testing basic conceptsHưng Hoàng
 
Software Testing Basics
Software Testing BasicsSoftware Testing Basics
Software Testing BasicsBelal Raslan
 
Software testing methods, levels and types
Software testing methods, levels and typesSoftware testing methods, levels and types
Software testing methods, levels and typesConfiz
 

Destaque (8)

Mobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best PracticesMobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best Practices
 
Lecture 7 Software Engineering and Design User Interface Design
Lecture 7 Software Engineering and Design User Interface Design Lecture 7 Software Engineering and Design User Interface Design
Lecture 7 Software Engineering and Design User Interface Design
 
User interface design: definitions, processes and principles
User interface design: definitions, processes and principlesUser interface design: definitions, processes and principles
User interface design: definitions, processes and principles
 
Architectural Design
Architectural DesignArchitectural Design
Architectural Design
 
Architecture design in software engineering
Architecture design in software engineeringArchitecture design in software engineering
Architecture design in software engineering
 
Software testing basic concepts
Software testing basic conceptsSoftware testing basic concepts
Software testing basic concepts
 
Software Testing Basics
Software Testing BasicsSoftware Testing Basics
Software Testing Basics
 
Software testing methods, levels and types
Software testing methods, levels and typesSoftware testing methods, levels and types
Software testing methods, levels and types
 

Semelhante a USER INTERFACE DESIGN PPT

Software engineering
Software engineeringSoftware engineering
Software engineeringIshucs
 
Five steps involved in user interface design are Use scenario dev.pdf
Five steps involved in user interface design are Use scenario dev.pdfFive steps involved in user interface design are Use scenario dev.pdf
Five steps involved in user interface design are Use scenario dev.pdfnavyugenterprisesdoo
 
User Interface Design,Principles & process
User Interface  Design,Principles & processUser Interface  Design,Principles & process
User Interface Design,Principles & processAbd-Ur Rehman Saqib
 
Hci user interface-design principals lec 7
Hci user interface-design principals lec 7Hci user interface-design principals lec 7
Hci user interface-design principals lec 7Anwal Mirza
 
Hci user interface-design principals
Hci user interface-design principalsHci user interface-design principals
Hci user interface-design principalsAnwal Mirza
 
16 user interfacedesign
16 user interfacedesign16 user interfacedesign
16 user interfacedesignrandhirlpu
 
Slide 4 - User Interface Design.pptx interface rather than its functionality ...
Slide 4 - User Interface Design.pptx interface rather than its functionality ...Slide 4 - User Interface Design.pptx interface rather than its functionality ...
Slide 4 - User Interface Design.pptx interface rather than its functionality ...DennisAnaafi1
 
Software engineering 18 user interface design
Software engineering 18 user interface designSoftware engineering 18 user interface design
Software engineering 18 user interface designVaibhav Khanna
 
Operating System.pptxjkkjhkjknknknknknknknk
Operating System.pptxjkkjhkjknknknknknknknkOperating System.pptxjkkjhkjknknknknknknknk
Operating System.pptxjkkjhkjknknknknknknknkKwadjoOwusuAnsahQuar
 
CSE 5930 Assignment 2 Documentation
CSE 5930 Assignment 2 DocumentationCSE 5930 Assignment 2 Documentation
CSE 5930 Assignment 2 DocumentationSalocin Dot TEN
 
User interface webpage
User interface webpageUser interface webpage
User interface webpagedhaval_tare
 
golden rules of user interface design
golden rules of user interface designgolden rules of user interface design
golden rules of user interface designgadige harshini
 
Lecture (User Interface Design).ppt
Lecture (User Interface Design).pptLecture (User Interface Design).ppt
Lecture (User Interface Design).pptskknowledge
 
Basic topic on os
Basic topic on osBasic topic on os
Basic topic on osAbinaya B
 
User Interface design & methods for easy utilization
User Interface design & methods for easy utilizationUser Interface design & methods for easy utilization
User Interface design & methods for easy utilizationDipali M
 
user-interface-design-131010063550-phpapp01.pdf
user-interface-design-131010063550-phpapp01.pdfuser-interface-design-131010063550-phpapp01.pdf
user-interface-design-131010063550-phpapp01.pdfLPhiHng3
 
User and operating system interface.pptx
User and operating system interface.pptxUser and operating system interface.pptx
User and operating system interface.pptxMSivani
 

Semelhante a USER INTERFACE DESIGN PPT (20)

Software engineering
Software engineeringSoftware engineering
Software engineering
 
Five steps involved in user interface design are Use scenario dev.pdf
Five steps involved in user interface design are Use scenario dev.pdfFive steps involved in user interface design are Use scenario dev.pdf
Five steps involved in user interface design are Use scenario dev.pdf
 
interface
interfaceinterface
interface
 
User Interface Design,Principles & process
User Interface  Design,Principles & processUser Interface  Design,Principles & process
User Interface Design,Principles & process
 
Hci user interface-design principals lec 7
Hci user interface-design principals lec 7Hci user interface-design principals lec 7
Hci user interface-design principals lec 7
 
Hci user interface-design principals
Hci user interface-design principalsHci user interface-design principals
Hci user interface-design principals
 
16 user interfacedesign
16 user interfacedesign16 user interfacedesign
16 user interfacedesign
 
Slide 4 - User Interface Design.pptx interface rather than its functionality ...
Slide 4 - User Interface Design.pptx interface rather than its functionality ...Slide 4 - User Interface Design.pptx interface rather than its functionality ...
Slide 4 - User Interface Design.pptx interface rather than its functionality ...
 
Software engineering 18 user interface design
Software engineering 18 user interface designSoftware engineering 18 user interface design
Software engineering 18 user interface design
 
Ch11
Ch11Ch11
Ch11
 
Operating System.pptxjkkjhkjknknknknknknknk
Operating System.pptxjkkjhkjknknknknknknknkOperating System.pptxjkkjhkjknknknknknknknk
Operating System.pptxjkkjhkjknknknknknknknk
 
CSE 5930 Assignment 2 Documentation
CSE 5930 Assignment 2 DocumentationCSE 5930 Assignment 2 Documentation
CSE 5930 Assignment 2 Documentation
 
User interface webpage
User interface webpageUser interface webpage
User interface webpage
 
golden rules of user interface design
golden rules of user interface designgolden rules of user interface design
golden rules of user interface design
 
Lecture (User Interface Design).ppt
Lecture (User Interface Design).pptLecture (User Interface Design).ppt
Lecture (User Interface Design).ppt
 
Basic topic on os
Basic topic on osBasic topic on os
Basic topic on os
 
User Interface design & methods for easy utilization
User Interface design & methods for easy utilizationUser Interface design & methods for easy utilization
User Interface design & methods for easy utilization
 
SECh1516
SECh1516SECh1516
SECh1516
 
user-interface-design-131010063550-phpapp01.pdf
user-interface-design-131010063550-phpapp01.pdfuser-interface-design-131010063550-phpapp01.pdf
user-interface-design-131010063550-phpapp01.pdf
 
User and operating system interface.pptx
User and operating system interface.pptxUser and operating system interface.pptx
User and operating system interface.pptx
 

Último

Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioRMG Project Studio
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks CharlottePulte
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Associazione Digital Days
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic global solution
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptMaryamAfzal41
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxmarckustrevion
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道yrolcks
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 
Pearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxPearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxDanielTamiru4
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssNadaMohammed714321
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designersPixeldarts
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Rndexperts
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbpreetirao780
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxNitish292041
 

Último (20)

Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project Studio
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 
Map of St. Louis Parks
Map of St. Louis Parks                              Map of St. Louis Parks
Map of St. Louis Parks
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing services
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
cda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis pptcda.pptx critical discourse analysis ppt
cda.pptx critical discourse analysis ppt
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptx
 
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 
Pearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxPearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptx
 
guest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssssguest bathroom white and blue ssssssssss
guest bathroom white and blue ssssssssss
 
10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers10 must-have Chrome extensions for designers
10 must-have Chrome extensions for designers
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbb
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
 

USER INTERFACE DESIGN PPT

  • 1. ESE Einführung in Software Engineering 8. User Interface Design Prof. O. Nierstrasz
  • 2. © Oscar Nierstrasz ESE — User Interface Design ESE 8.2 Roadmap > Interface design models > Design principles > GUI characteristics > User Guidance > Usability Testing > Examples
  • 3. © Oscar Nierstrasz ESE — User Interface Design ESE 8.3 Literature Sources > Software Engineering, I. Sommerville, 7th Edn., 2004. > Software Engineering — A Practitioner’s Approach, R. Pressman, Mc-Graw Hill, 5th Edn., 2001. Recommended reading > Mary Beth Rosson, John M. Carroll, Usability Engineering, 2002 > Jakob Nielsen, Usability Engineering, Morgan Kaufmann, 1999. > Alan Cooper, About Face — The Essentials of User Interface Design, Hungry Minds, 1995. > Alan Cooper, The Inmates are running the Asylum, SAMS, 1999. > Jef Raskin, The Humane Interface, Addison Wesley, 2000. > Jeff Johnson, GUI Bloopers, Morgan Kaufmann, 2000. > The Interface Hall of Shame, http://homepage.mac.com/bradster/iarchitect/shame.htm
  • 4. © Oscar Nierstrasz ESE — User Interface Design ESE 8.4 Roadmap > Interface design models > Design principles > GUI characteristics > User Guidance > Usability Testing > Examples
  • 5. © Oscar Nierstrasz ESE — User Interface Design ESE 8.5 The UI design process > UI design is an iterative process involving close liaisons between users and designers. > The 3 core activities in this process are: — User analysis. Understand what the users will do with the system; — System prototyping. Develop a series of prototypes for experiment; — Interface evaluation. Experiment with these prototypes with users.
  • 6. © Oscar Nierstrasz ESE — User Interface Design ESE 8.6 The design process © Ian Sommerville 2004
  • 7. © Oscar Nierstrasz ESE — User Interface Design ESE 8.7 Interface Design Models Four different models occur in HCI design: 1. The design model expresses the software design. 2. The user model describes the profile of the end users. (i.e., novices vs. experts, cultural background, etc.) 3. The user’s model is the end users’ perception of the system. 4. The system image is the external manifestation of the system (look and feel + documentation etc.)
  • 8. © Oscar Nierstrasz ESE — User Interface Design ESE 8.8 … UI Models Implementation Model Mental Model Manifest Models BetterWorse Alan Cooper, About Face, 1995
  • 9. © Oscar Nierstrasz ESE — User Interface Design ESE 8.9 Roadmap > Interface design models > Design principles > GUI characteristics > User Guidance > Usability Testing > Examples
  • 10. © Oscar Nierstrasz ESE — User Interface Design ESE 8.10 User Interface Design Principles Principle Description User familiarity Use terms and concepts familiar to the user. Consistency Comparable operations should be activated in the same way. Commands and menus should have the same format, etc. Minimal surprise If a command operates in a known way, the user should be able to predict the operation of comparable commands. Feedback Provide the user with visual and auditory feedback, maintaining two-way communication.
  • 11. © Oscar Nierstrasz ESE — User Interface Design ESE 8.11 Principle Description Memory load Reduce the amount of information that must be remembered between actions. Minimize the memory load. Efficiency Seek efficiency in dialogue, motion and thought. Minimize keystrokes and mouse movements. Recoverability Allow users to recover from their errors. Include undo facilities, confirmation of destructive actions, 'soft' deletes, etc. User guidance Incorporate some form of context-sensitive user guidance and assistance.
  • 12. © Oscar Nierstrasz ESE — User Interface Design ESE 8.12 Roadmap > Interface design models > Design principles > GUI characteristics > User Guidance > Usability Testing > Examples
  • 13. © Oscar Nierstrasz ESE — User Interface Design ESE 8.13 GUI Characteristics Characteristic Description Windows Multiple windows allow different information to be displayed simultaneously on the user’s screen. Icons Usually icons represent files (including folders and applications), but they may also stand for processes (e.g., printer drivers). Menus Menus bundle and organize commands (eliminating the need for a command language). Pointing A pointing device such as a mouse is used for command choices from a menu or indicating items of interest in a window. Graphics Graphical elements can be commands on the same display.
  • 14. © Oscar Nierstrasz ESE — User Interface Design ESE 8.14 GUIs Advantages > They are easy to learn and use. — Users without experience can learn to use the system quickly. > The user may switch attention between tasks and applications. > Fast, full-screen interaction is possible with immediate access to the entire screen Problems > A GUI is not automatically a good interface — Many software systems are never used due to poor UI design — A poorly designed UI can cause a user to make catastrophic errors
  • 15. © Oscar Nierstrasz ESE — User Interface Design ESE 8.15 Direct Manipulation Advantages > Users feel in control and are less likely to be intimidated by the system > User learning time is relatively short > Users get immediate feedback on their actions > mistakes can be quickly detected and corrected Problems > Finding the right user metaphor may be difficult > It can be hard to navigate efficiently in a large information space. > It can be complex to program and demanding to execute
  • 16. © Oscar Nierstrasz ESE — User Interface Design ESE 8.16 Menu Systems Advantages > Users don’t need to remember command names > Typing effort is minimal > User errors are trapped by the interface > Context-dependent help can be provided (based on the current menu selection) Problems > Actions involving logical conjunction (and) or disjunction (or) are awkward to represent > If there are many choices, some menu structuring facility must be used > Experienced users find menus slower than command language
  • 17. © Oscar Nierstrasz ESE — User Interface Design ESE 8.17 Menu Structuring Scrolling menus > The menu can be scrolled to reveal additional choices > Not practical if there is a very large number of choices Hierarchical menus > Selecting a menu item causes the menu to be replaced by a sub- menu Walking menus > A menu selection causes another menu to be revealed Associated control panels > When a menu item is selected, a control panel pops-up with further options
  • 18. © Oscar Nierstrasz ESE — User Interface Design ESE 8.18 Command Interfaces With a command language, the user types commands to give instructions to the system > May be implemented using cheap terminals > Easy to process using compiler techniques > Commands of arbitrary complexity can be created by command combination > Concise interfaces requiring minimal typing can be created
  • 19. © Oscar Nierstrasz ESE — User Interface Design ESE 8.19 Command Interfaces Advantages > Allow experienced users to interact quickly with the system > Commands can be scripted (!) Problems > Users have to learn and remember a command language > Not suitable for occasional or inexperienced users > An error detection and recovery system is required > Typing ability is required (!)
  • 20. © Oscar Nierstrasz ESE — User Interface Design ESE 8.20 Analogue vs. Digital Presentation Digital presentation > Compact — takes up little screen space > Precise values can be communicated Analogue presentation > Easier to get an 'at a glance' impression of a value > Possible to show relative values > Easier to see exceptional data values 01002003004000255075100Pressure Temperature
  • 21. © Oscar Nierstrasz ESE — User Interface Design ESE 8.21 Colour Use Guidelines Colour can help the user understand complex information structures. > Don’t use (only) colour to communicate meaning! — Open to misinterpretation (colour-blindness, cultural differences ...) — Design for monochrome then add colour > Use colour coding to support user tasks — highlight exceptional events — allow users to control colour coding > Use colour change to show status change > Don't use too many colours — Avoid colour pairings which clash > Use colour coding consistently which clash
  • 22. © Oscar Nierstrasz ESE — User Interface Design ESE 8.22 Roadmap > Interface design models > Design principles > GUI characteristics > User Guidance > Usability Testing > Examples
  • 23. © Oscar Nierstrasz ESE — User Interface Design ESE 8.23 User Guidance The user guidance system is integrated with the user interface to help users when they need information about the system or when they make some kind of error. Includes > System messages, including error messages > Documentation provided for users > On-line help
  • 24. © Oscar Nierstrasz ESE — User Interface Design ESE 8.24 Help system use > Multiple entry points should be provided — the user should be able to get help from different places > The help system should indicate where the user is positioned > Navigation and traversal facilities must be provided
  • 25. © Oscar Nierstrasz ESE — User Interface Design ESE 8.25 Error Message Guidelines > Speak the user’s language > Give constructive advice for recovering from the error > Indicate negative consequences of the error (e.g., possibly corrupted files) > Give an audible or visual cue > Don’t make the user feel guilty!
  • 26. © Oscar Nierstrasz ESE — User Interface Design ESE 8.26 Roadmap > Interface design models > Design principles > GUI characteristics > User Guidance > Usability Testing > Examples
  • 27. © Oscar Nierstrasz ESE — User Interface Design ESE 8.27 Usability Testing > Observe a group of test subjects performing a pre- defined scenario — Which test subjects? — How many test subjects? — Which scenarios? — What to observe? Jakob Nielsen, Usability Engineering
  • 28. © Oscar Nierstrasz ESE — User Interface Design ESE 8.28 User interface evaluation > Some evaluation of a user interface design should be carried out to assess its usability. > Full scale evaluation is very expensive and impractical for most systems. > Ideally, an interface should be evaluated against a usability specification. However, it is rare for such specifications to be produced.
  • 29. © Oscar Nierstrasz ESE — User Interface Design ESE 8.29 Simple evaluation techniques > Questionnaires for user feedback. > Video recording of system use and subsequent tape evaluation. > Instrumentation of code to collect information about facility use and user errors. > The provision of code in the software to collect on-line user feedback.
  • 30. © Oscar Nierstrasz ESE — User Interface Design ESE 8.30 Hints > Establish concrete goals — what do you want to achieve? — What criteria will you use to establish “success”? — What data will you collect? — Choose representative test tasks. > Carry out a pilot test first. > Test users should truly represent the intended users. > Use experienced experimenters. (Get trained!) — Make the test subjects feel comfortable. — Don’t bias the results.
  • 31. © Oscar Nierstrasz ESE — User Interface Design ESE 8.31 Usability Attributes Attribute Description Learnability How long does it take a new user to become productive with the system? Speed of operation How well does the system response match the user’s work practice? Robustness How tolerant is the system of user error? Recoverability How good is the system at recovering from user errors? Adaptability How closely is the system tied to a single model of work?
  • 32. © Oscar Nierstrasz ESE — User Interface Design ESE 8.32 Why you only need to test with 5 users QuickTime™ and a decompressor are needed to see this picture. http://www.useit.com/alertbox/20000319.html Nielsen, Jakob, and Landauer, Thomas K.: "A mathematical model of the finding of usability problems," Proceedings of ACM INTERCHI'93 Conference (Amsterdam, The Netherlands, 24-29 April 1993), pp. 206-213.
  • 33. © Oscar Nierstrasz ESE — User Interface Design ESE 8.33 Usability laboratories (!) Jakob Nielsen, Usability Engineering
  • 34. © Oscar Nierstrasz ESE — User Interface Design ESE 8.34 Roadmap > Interface design models > Design principles > GUI characteristics > User Guidance > Usability Testing > Examples
  • 35. © Oscar Nierstrasz ESE — User Interface Design ESE 8.35 Is there progress? All examples from the Interface Hall of Shame http://homepage.mac.com/bradster/iarchitect/shame.htm
  • 36. © Oscar Nierstrasz ESE — User Interface Design ESE 8.36 Now, that’s progress!
  • 37. © Oscar Nierstrasz ESE — User Interface Design ESE 8.37 I want them all!
  • 38. © Oscar Nierstrasz ESE — User Interface Design ESE 8.38 Yes, I want that print thing too
  • 39. © Oscar Nierstrasz ESE — User Interface Design ESE 8.39 In Excel, “cut” doesn’t mean cut
  • 40. © Oscar Nierstrasz ESE — User Interface Design ESE 8.40 Fun with scrolling!
  • 41. © Oscar Nierstrasz ESE — User Interface Design ESE 8.41 More tabs please!
  • 42. © Oscar Nierstrasz ESE — User Interface Design ESE 8.42 Without tabs
  • 43. © Oscar Nierstrasz ESE — User Interface Design ESE 8.43 Helpful tips
  • 44. © Oscar Nierstrasz ESE — User Interface Design ESE 8.44 Stop, please
  • 45. © Oscar Nierstrasz ESE — User Interface Design ESE 8.45 I can’t make up my mind
  • 46. © Oscar Nierstrasz ESE — User Interface Design ESE 8.46
  • 47. © Oscar Nierstrasz ESE — User Interface Design ESE 8.47 Green good — red bad
  • 48. © Oscar Nierstrasz ESE — User Interface Design ESE 8.48 Was that an error?
  • 49. © Oscar Nierstrasz ESE — User Interface Design ESE 8.49 Uh … ok
  • 50. © Oscar Nierstrasz ESE — User Interface Design ESE 8.50 Yes — I mean, no
  • 51. © Oscar Nierstrasz ESE — User Interface Design ESE 8.51 No, I don’t want to trash my disk!
  • 52. © Oscar Nierstrasz ESE — User Interface Design ESE 8.52 Key points > The user interface design process involves user analysis, system prototyping and prototype evaluation. > User interface design principles should help guide the design of user interfaces. > Interaction styles include direct manipulation, menu systems form fill-in, command languages and natural language. > Graphical displays should be used to present trends and approximate values. Digital displays when precision is required. > Colour should be used sparingly and consistently. > The goals of UI evaluation are to obtain feedback on how to improve the interface design and to assess if the interface meets its usability requirements.
  • 53. © Oscar Nierstrasz ESE — User Interface Design ESE 8.53 What you should know! > What models are important to keep in mind in UI design? > What is the principle of minimal surprise? > What problems arise in designing a good direct manipulation interface? > What are the trade-offs between menu systems and command languages? > How can you use colour to improve a UI? > In what way can a help system be context sensitive?
  • 54. © Oscar Nierstrasz ESE — User Interface Design ESE 8.54 Can you answer the following questions? > Why is it important to offer “keyboard short-cuts” for equivalent mouse actions? > How would you present the current load on the system? Over time? > What is the worst UI you every used? Which design principles did it violate? > What’s the worst web site you’ve used recently? How would you fix it? > What’s good or bad about the MS-Word help system?
  • 55. © Oscar Nierstrasz ESE — User Interface Design ESE 8.55 Attribution-ShareAlike 3.0 Unported You are free: to Share — to copy, distribute and transmit the work to Remix — to adapt the work Under the following conditions: Attribution. You must attribute the work in the manner specified by the author or licensor (but not in any way that suggests that they endorse you or your use of the work). Share Alike. If you alter, transform, or build upon this work, you may distribute the resulting work only under the same, similar or a compatible license. For any reuse or distribution, you must make clear to others the license terms of this work. The best way to do this is with a link to this web page. Any of the above conditions can be waived if you get permission from the copyright holder. Nothing in this license impairs or restricts the author's moral rights. License > http://creativecommons.org/licenses/by-sa/3.0/

Notas do Editor

  1. http://homepage.mac.com/bradster/iarchitect/shame.htm http://www.frankmahler.de/mshame/
  2. Ch 15
  3. Pressman p 471
  4. Is there progress? John Winters sent along a series of screen prints illustrating the useless progress meters implemented in Microsoft's Outlook . When dealing with a single message, the application displays a 2-state progress bar: the program is either busy, or it's not. Retrieving a message with a 340KB attachment over a modem connection typically takes 1 minute and 45 seconds. During that time, the progress meter is shown at its maximum value, rather than displaying the relative progress of the retrieval (something progress meters are supposed to do). The likely result of this misimplementation is that the user will conclude the computer has yet again locked-up, and will perform a three-finger salute to get back to work.
  5. Now, that’s progress! This example was taken from the installation of Drawing Board LT , a shareware CAD program. During the course of the installation, several hundred files are copied to your hard drive. Rather than indicate the progress of the entire installation, the authors decided that it was more important to indicate the installation progress of each file. The end result of this design descision is that the user has absolutely no idea as to the state of the installation. Most of the files are small (less than 10KB), causing the filename to be overwritten with such rapidity that it is impossible to read the name of the file. That's not too much of a problem, since ... well, "Who cares about the names of the files as they are installed?! "The more shameful aspect of the installation is that the fluorescent green progress meter becomes a completely useless distraction. It flickers with such rapidity that you are forced to turn your eyes away, or better yet, leave the room before installing the software.
  6. I want them all! In the Font dialog box for Word 97 the user can set text attributes using an array of checkboxes; no problem there. However, there a 4 pairs of mutually exclusive options listed: strikethrough/double strikethrough, subscript/superscript, emboss/engrave, and all caps/small caps. the controls look like checkboxes but behave like option buttons. Obviously, using option buttons would have spoiled the aesthetics of the control group.
  7. Yes, I want that print thing too While checkboxes typically provide the means by which to specify options, Click & Print uses checkboxes as indicators and as command buttons. When the user clicks on a checkbox in Click & Print , a dialog box is opened into which he or she enters information to be printed on a certificate. The checkbox only becomes checked if the user clicks the OK button on the related dialog box. Setting the date is particularly unusual. The program defaults to the current date, but the only way to get the date checkbox checked is to click it, then click the OK button in the Date dialog. The most problematic aspect of the design is evident when the user attempts to check the Print checkbox before he or she has checked all of the checkboxes above it: An error message is displayed, stating "The checklist is not complete. Are you sure you want to print?" Here's a lesson from GUI 101: Checkboxes are used to toggle an option on or off Command buttons are used to initiate actions. Don't let your confusion confuse the user.
  8. In Excel, “cut” doesn’t mean cut Select Cut from the Edit menu of just about any application and what happens? The selected text or object is removed (and a copy is placed in the clipboard for later use). This rule is so ingrained that the phrase "Cut and Paste" could be considered a cultural archetype: almost everyone over the age of four knows what it means. Unfortunately, the designers of Microsoft's Excel weren't familiar with the phrase. To them, "Cut" means "Leave it there", or at least, "Leave it there until I Paste it somewhere else." Upon selecting Cut, a moving border is drawn around the selection, which indicates, intuitively speaking, Nothing! Cut will not remove the selection until the user selects Paste at some later time. In Excel, "Cut" really means "Indicate the selection you might want to Move at some later time". In fact, after performing the Paste operation of the complete Cut and Paste sequence, the Undo command is labeled "Undo Move". By changing the rules, every new or occasional user of Excel is instantly perplexed when performing the Cut operation. The typical user will Cut, and Cut again, and perhaps Cut again in an attempt to understand what he or she has done wrong. They've just got to be chuckling about this one in Redmond. (Thanks to Steve Bliss for reminding us of this Excel feature)
  9. Fun with scrolling! Occasionally you'll come across an application that shows such complete disregard for established design principles and industry standards that you have to wonder if the developers have ever used a graphical user interface. This image illustrates a central design idiom used in PeopleSoft applications. A proper critique of PeopleSoft applications would require megabytes of storage, so for the time being we will simply focus on their novel use of scrollbars. Scrollbars in PeopleSoft applications are used as database navigation controls. In the illustration, clicking on the outer scrollbar would display the next category of awards, and clicking on the inner scroll bar would display the next award in the current category. Keep in mind, the frames do not scroll up and down; the information in each is simply replaced. PeopleSoft often nests scrollbars 3 or 4 deep, such that the user becomes absolutely dumbfounded not only as to how the information is arranged, but also as to how to navigate within a window. Scrollable forms are a sure sign of inexperience in graphical user interface design. These often result from the conversion of legacy applications to the Windows platform, or in the development of applications based on paper forms. Scrolling forms hide important information from the user, hide navigational aids and controls, and require more user inputs to get to the desired information. Unfortunately, visit any programming support forum, and you'll see an ever-increasing number of new programmers asking how to create scrollable forms. The only appropriate answer is, "You don't."
  10. More tabs please! To date, we consider this the definitive example of how not to design a tabbed dialog. The sheer number of tabs, combined with the use of iconic labels and the gratuitous use of graphics on the tabs themselves results in a veritable visual assault. Once your eyes recover from the initial assault, you may be able to spot another problem: the use of nested tabs (note that two separate tabs on the dialog are highlighted). MultiEdit's creator, Todd Johnson, wrote to us to state that the design of the options dialog was dictated by the complexity of the program: We have a complex product with a LOT of configurablity, so we end up with a complex configuration dialog, there really isn't anyway around that.
  11. Without tabs Actually there is. We've put together the following animation to illustrate one alternative design: The alternative offers a number of important advantages over the existing design: Option categories are presented in a consistent order The selection of one category does not alter the order of the others User has keyboard access to switch categories The use of distracting colors has been eliminated The use of distrating images on the tab headings and on the tabs themselves have been eliminated The use of embedded tabs has been eliminated While it is our belief that the proliferation of configuration options in MultiEdit has far exceeded the point of diminishing returns, the alternative design offers one important additional benefit: Additional categories can be added without impacting the design of the form or the user's ability to locate a category The result is a cleaner, more parsimonious dialog in which the user can much more rapidly locate and navigate to the information of interest.
  12. Helpful tips Tooltips were intended to provide descriptive information to help new users learn the functions of graphical toolbar buttons. When they are used for standard command buttons, they invariably elicit the following response from users: Duh! As shown in this image from Mindspring's Pipeline+ internet access application, rather than providing useful information to the user, the tooltips merely convey that the designer is, well...let's just say, intellectually challenged .Here's a rule that developers should keep in mind: People generally don't like to use stupid applications
  13. Stop, please One of our visitors send us a collection of images illustrating the use of a Stoplight Metaphor as it was being used in an application at his company. He wanted to know if we considered it material for the Interface Hall of Fame or the Interface Hall of Shame. Well, here we are. The "stoplights" are displayed in the lower right corner of the window. Their purpose is to indicate the user's progress while entering information in a complicated tabbed dialog box. Stoplight 1 relates to the first tab, Stoplight 2 relates to the second tab, and so on (anyone see a problem here?). The stoplight can be any of three colors: Yellow Some information has been entered on the tab Red Not all required information has been entered Green All required information has been entered While we found a number of problems with the general design of the form, there are some significant problems specifically related to the stoplight metaphor. Too much information . The stoplight metaphor requires the user to learn the meanings of three states, when only one is necessary. The only important indication to the user is that required information on a particular tab is missing. Thus, the interface is unnecessarily cluttered with three distracting colors, when only one is necessary. Conflicting messages . Notice in the image above that the "Post and Send" button is currently enabled, even though the stoplights indicate that required information has not been entered. Our guess is that the stoplight metaphor was developed to provide additional information above that provided by simply disabling the button; specifically, to indicate which tab required completion before the information could be sent. In the current implementation, the user is being simultaneously told that the form can and cannot be submitted. Labeling and Placement of the stoplights . The stoplights are labeled 1 through 6, yet the tabs are not numerically labeled. This will require the user to either physically or mentally determine the tab indicated by the number. Furthermore, the stoplights are located distant from the tabs they represent (the form is much larger than the image shown here), thereby increasing the cognitive burden on the user. We would suggest the following as an alternative, which provides a single "Required Information Needed" indicator, physically proximate to the tab requiring information:
  14. I can’t make up my mind Microsoft's WordPad can be infuriatingly stupid. This message was presented after the user has opened an existing text-only document, made some changes (none of which involved formatting changes), and attempted to save it. The user's first response to the message is one of alarm ('REMOVE ALL FORMATTING'?!), but after seeing it the first several hundred times, the response becomes one of anger: 'If I wanted to save it as a different file type, I would have selected Save As , and specified a different file type!' This occurs each time you save the document even if you haven't closed it between changes.
  15. We've come up with a new rule for program developers: You must at least LOOK at your designs before inflicting them onto your users. This image was taken from a tutorial released to members of a very large organization to instruct them in the use of a new software management system. As is clearly evident in the image, the choice of font, color, and background have made the tutorial almost completely unreadable, and therefore, absolutely useless. Try to read the text in the image, and note the intense effort required. The only excuse for such a pitiful combination of screen characteristics is that the developer never looked at his or her creation; as such, there is no excuse.
  16. Green good — red bad Sometimes the best intentions of the developer go unrealized. This image was borrowed from one particular application that hard-coded the colors of the text in the command buttons such that all affirmative buttons (OK, Yes, Open) have green-colored text and all negative buttons (Cancel, No, Close) have red-colored text. Unfortunately, doing so can cause a number of problems. In the first place, the background color of the button is determined by the Windows color preferences. As shown above, hard-coding the color of the text can make it difficult, and in some cases, impossible to read. Secondly, as shown in this example, Green/Red-Affirmative/Negative distinction may be inconsistent with a particular task. In western society, users may interpret the green label as indicating the "good" or proper response. As shown in this example however, deleting all records is more than likely not a good thing to do. Additionally, enforcing your particular color associations on your users may create some incompatibilities with cultural interpretations of color. In certain eastern societies, for example, red is considered an affirmative, or positive color. Subjecting these users to your color associations is an indication of cultural arrogance. Finally, a significant percentage of the population has some degree of color vision deficiency; the most prevalent of which, is the diminished ability to distinguish between red and green. Your attempts to provide unnecessary additional information will be lost on a significant portion of your users, and may become a source of their resentment. To be on the safe side, avoid using color as a means of interpretation, and be certain to avail yourself of the user's color preferences. These preferences are not merely the means by which the user "personalizes" his or her PC, but in many instances are selected to maximize the readability of the applications under specific lighting and display conditions. When you avail yourself of these settings, you can be certain that you will not risk the resentment of the user.
  17. Was that an error? Joost Vunderink sent along a couple of images illustrating a fundamental design problem with Easy CD Creator , a program used to write CD-ROMS. At the end of creating a CD, there are two possible outcomes: the process was successful, or 'some error occured' (a not infrequent result when writing CD-ROMS). The error message is displayed above. The successful message is displayed below. So what's is the problem? The dialogs are far too similar, and both utilize a red-heavy icon to represent success or failure. As Joost indicates: Each time I've finished a CD I see something red and I panic... but then it's alright after all.
  18. Uh … ok We came across this confidence-inspiring message in several areas of Microsoft's Visual Basic 5.0 . The first time it appeared, we took a chance and hit the OK button, which only had the effect of displaying the same message again. Clicking the Cancel button cleared the message and the program proceeded apparently as it should.
  19. Yes — I mean, no At the risk of offending our many Linux visitors, we have included this example of geekspeak sent to us by visitor Paul Winkler . The message is displayed when the user attempts to exit XFM , the "X-windows File Manager". The hapless user is faced with three rather ambiguous options, leading to such questions as: does "Continue" mean "continue using XFM" or "continue to exit"? Is "Cancel" somehow different from "Abort"? Isn't it about time someone complained about this? Actually, "Continue" means "continue to exit"; if you would rather not exit XFM , then you are expected to select either "Cancel" or "Abort". What's the difference? Apparently nothing.