程序代写代做代考 flex graph html Usability and design principles

Usability and design principles
1

Learning objectives
1) To understand the Nielsen principles
2) To understand several design principles and how they are driven by (1)
3) Interface design
–Interface design (organising content)
RMIT University©2020 CS&IT
2

Why?
• We’ve introduced the topic of usability –Week 1
• If we’re commissioned to build a system, we’ve discussed the importance of and ways to gather information and feedback from users
–Week 2-5
• What are some principles of interface design?
–This week onwards
RMIT University©2020 CS&IT
3

User Centered Design: Don Norman
• https://www.youtube.com/watch?v=90y W0vQpKVs
RMIT University©2020 CS&IT
4

Principles of interface design
–Nielsen’s principles (broad)
–Often used for testing
–Might as well know how you are being tested from the start
–Design principles (more specific)
RMIT University©2020 CS&IT
5

Part 1: Nielsen’s Principles
6

Who is Nielsen?
• Developed the most used heuristics for interface design in 1990 with Rolf Molich.
• Explains 10 main heuristics released in 1994. • Has a consulting group for usability:
http://www.nngroup.com/articles/ten-usability-heuristics/
RMIT University©2020 CS&IT
7

Why ‘heuristics’?
• These are not specific rules
• More like rule of thumb
• They are also not exclusive to one another
• Do not make it a habit of pigeon holing usability issues into heuristics
RMIT University©2020 CS&IT
8

Nielsen’s 10 principles
1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose and recover from errors
10. Helpanddocumentation
RMIT University©2020 CS&IT
9

1 Visibility of system status
• User should always be informed of what is happening behind the scenes, when appropriate.
• For example, when uploading a file there should be a progress bar.
• In general always tell the user what is happening if they have no control.
• Keyword here is when appropriate and necessary. No need to bombard your users with your servers’ CPU cycles.
RMIT University©2020 CS&IT
10

1 Visibility of system status
RMIT University©2020 CS&IT 11

2 Match between real world and system
• The system should speak users’ language and conventions.
• Example: Envelope icons to denote e-mail.
• If a niche product make sure to use words that your market
acknowledges and uses.
• Use logical and instinctive phrases and graphics.
RMIT University©2020 CS&IT
12

2 Match between real world and system
RMIT University©2020 CS&IT 13

2 Match between real world and system
• Not!
RMIT University©2020 CS&IT 14

3 User control and freedom
• Escape hatches for users are important.
• Allow users to exit state without extended dialogue.
• However they should be easily notified the ramifications of an exit. Example – forms and shopping cart.
• Supporting redo and undo functions.
RMIT University©2020 CS&IT
15

4 Consistency and standards
• Practice using the same words that mean the same thing.
• Sounds like common sense but rarely applied.
• Example: ‘Exit’ and ‘Log out’ or even ‘Leave’
• Having a common navigation model helps. Navigation bars suddenly disappearing out of context is quite jarring.
• Follow platform conventions. RMIT University©2020 CS&IT
16

4 Consistency and standards
RMIT University©2020 CS&IT 17

4 Consistency and standards
RMIT University©2020 CS&IT 18

4 Consistency and standards
RMIT University©2020 CS&IT 19

5 Error prevention
• Anticipate common mistakes from users and prevent them using schema or procedures.
• Example: Enforcing number characters for credit card numbers.
• Delicate use of confirmation dialogues could be useful before a user commits to an action that may be irreversible.
RMIT University©2020 CS&IT
20

5 Error prevention
From Seminara, Gonzales, & Parsons, 1977. Photograph courtesy of Joseph L. Seminara.
RMIT University©2020 CS&IT 21

5 Error prevention
RMIT University©2020 CS&IT 22

5 Error prevention
RMIT University©2020 CS&IT 23

5 Error prevention
Picture: Frankfarm (Creative Commons)
RMIT University©2020 CS&IT 24

6 Recognition rather than recall
• Instructions to use your system should be easily visible and followed.
• Do not expect your user to memorize specific functions. They probably would after the 10th time executing the same task but do not take it for granted.
• Else there won’t be a 10th time.
• Use layout, graphics and design to ensure that functions
are easily identified.
RMIT University©2020 CS&IT
25

6 Recognition rather than recall
RMIT University©2020 CS&IT 26

6 Recognition rather than recall
RMIT University©2020 CS&IT 27

6 Recognition rather than recall
RMIT University©2020 CS&IT 28

6 Recognition rather than recall
• What do you type?
RMIT University©2020 CS&IT 29

6 Recognition rather than recall
• “What do you say?”
RMIT University©2020 CS&IT 30

7 Flexibility and efficiency of use
• Allow expert users to use shortcuts.
• Scaling functionality depending on the users’ skills and
experience.
• Novice users may encounter wizards while expert users will be handed accelerators.
• This makes use of user accounts and settings. RMIT University©2020 CS&IT
31

7 Flexibility and efficiency of use
RMIT University©2020 CS&IT 32

8 Aesthetics and minimalist design
• Do not clutter!
• Every bit of information in dialogues should be vital. Every
word, in fact.
• There are only so many bits of information a user can take in at anyone time, you do not want to overwhelm that threshold.
• Funnel your users, don’t blanket them with functions. RMIT University©2020 CS&IT
33

8 Aesthetic and minimalist design
Circa 2015
RMIT University©2020 CS&IT 34

8 Aesthetic and minimalist design
In 2020
RMIT University©2020 CS&IT 35

9 Recognize, diagnose and recover
• Error messages should be: –phrased in clear & natural
language
–precise
–constructive: offer alternatives
–polite; do not intimidate or blame the user
RMIT University©2020 CS&IT 36

9 Recognize, diagnose and recover
• Good error messages help the user to –resolve their problem
–learn more about the system
RMIT University©2020 CS&IT 37

9 Recognize, diagnose and recover
Don’t we hate error messages?
WinSCP error message
RMIT University©2020 CS&IT
38

9 Recognize, diagnose and recover
Don’t we hate error messages?
Remmina Remote Desktop, Ubuntu
RMIT University©2020 CS&IT
39

10 Help and documentation
• Any help function implemented should be easily identifiable, accessed and searched.
• Nothing is worse than a hidden help function that makes things even more confusing.
• Use contextual interface to inform your users of your help sections.
• Help sections should be brief, to the point and not too large.
RMIT University©2020 CS&IT
40

10 Help and documentation
RMIT University©2020 CS&IT 41

10 Help and documentation
RMIT University©2020 CS&IT 42

10 Help and documentation
RMIT University©2020
CS&IT 43
Circa 2016

10 Help and documentation
2020
RMIT University©2020 CS&IT 44

10 Help and documentation
In 2017
In 2020
RMIT University©2020 CS&IT 45

Heuristic Evaluation
46

Heuristic Evaluation
“Heuristic evaluation (Nielsen and Molich, 1990; Nielsen 1994) is a usability engineering method for finding the usability problems in a user interface design so that they can be attended to as part of an iterative design process. Heuristic evaluation involves having a small set of evaluators examine the interface and judge its compliance with recognized usability principles (the ‘heuristics’).”
https://www.nngroup.com/articles/how-to-conduct-a-heuristic-evaluation/
RMIT University©2020 CS&IT
47

Heuristic Evaluation
• No single set of Heuristics. Nielsen famous, but there are also others:
–Bastien and Scapin created a set of 18 Ergonomic criteria
–Gerhardt-Powals’ 10 Cognitive Engineering Principles
–Connell & Hammond’s 30 Usability Principles
–Smith & Mosier’s 944 guidelines for the design of user-interfaces (from 1986)
(http://www.measuringu.com/blog/he.php )
RMIT University©2020 CS&IT
48

Applying Heuristics
• Usability violation a heuristic(s)? Assign a severity. • 0 = no problem to
• 4 = usability catastrophe
• Table of issues and severity.
• The project manager assign resources to fix the issues.
RMIT University©2020 CS&IT
49

Caveats
• The heuristics are based on expert reviews, that is usually one or two usability experts making judgement calls.
• Therefore may be cheap and quick, but may not be accurate and comprehensive.
• User tests and software performance testing are usually done to corroborate, budget allowing.
RMIT University©2020 CS&IT
50

Heuristic Evaluation
• Quick and inexpensive
• Early feedback
• Require usability experts, multiple of them, aggregate the results
• Usability testing to find further major issues
http://www.usability.gov/how-to-and-tools/methods/heuristic- evaluation.html
RMIT University©2020 CS&IT
51

Looking back – Microsoft Bob
• https://www.youtube.com/watch?v=5teG6ou8mWU RMIT University©2020 CS&IT
53

Part 2: Design Principles
54

Design Principles? Heuristics?
• Heuristics
• More abstract • Few of them
• Design Principles
–More specific (derived from heuristics) –More of them (these are the important ones)
RMIT University©2020 CS&IT
55

Design principles
• Important to identify the right one depending on context, that is your target users and what type of system.
• Again, these are guidelines not rules.
RMIT University©2020 CS&IT
56

Principle of proximity
• Also known as the grouping principle.
• Users assume buttons that are near each other do specific
but related things.
• Example: a button right next to one labelled “Yes” would be highly expected to be “No”, not “Rick’s special key”.
• This goes for navigation and any contextual interactions. RMIT University©2020 CS&IT
57

a) Prominence
• Prominence is also another tool you can use to bring items that are important to the fore.
You’ll read this
Before this
RMIT University©2020 CS&IT
60

d) Colours/contrast
• Higher contrast or brighter colours will draw more attention.
You’ll read this
Before this
RMIT University©2020 CS&IT
65

Status
• Always indicate that the system is processing or awaiting • input.
• The trick is to do this without overwhelming the rest of your system’s interface.
RMIT University©2020 CS&IT
67

Consistency
• Easily overlooked.
• Be consistent • Placement, • Colours,
• Font,
• Type of interface.
• Do not keep switching your navigation bar from left to right
for example.
RMIT University©2020 CS&IT
68

Hick’s law
–A mathematical formula describing how long it will take users to choose the item from a set of items.
–More items to choose from -> longer time. –Time increases logarithmically.
RMIT University©2020 CS&IT
69

Fitts’ law
–A mathematical formula that models how accurate users will be when moving the cursor between objects (e.g. buttons) on screen.
–Further apart -> less accurate.
–It’s faster to hit larger targets closer to you than smaller targets
further from you.
–Found to work with touch interfaces
RMIT University©2020 CS&IT
72

Fitts’ law

Interface Hall of Fame or Shame?
Submit these to the Canvas Discussion Board “Interface Hall of Fame or Shame” and I’ll pick a couple to be discussed in the lecture

Learning objectives
1) To understand the Nielsen principles
2) To understand several design principles and how they are driven by (1)
3)Interface design
–Interface design (organising content)
RMIT University©2020 CS&IT
79

Related Posts