Vodafone video
Vodafone video
Embedded Files
#1 Visibility of system status
#1 Visibility of system status
Questions:
Questions:
Do I know what the system is doing?
Do I know why I have to wait?
Is the process running in the background or foreground?
Do I know how much longer I will have to wait for a result?
Do I know how far along the process is?
Can I see how many steps are left in a process I am working on?
Do I know what is coming next?
Do I know if the system registered my input?
Progress indicators reassure the user that a longer wait is normal, and that the system is still working. EG; loading symbol / progress bar.
Visible progress of steps the user has completed & how many steps to go.
Indicate system has registered user choices. IE; button changes colour when user clicks it.
Communicate state changes that may impact users. EG; an indicator showing battery is charging or that the user is logged in.
"this heuristic refers to how well the state of the system is conveyed to the user"
"this heuristic refers to how well the state of the system is conveyed to the user"
"systems should always keep users informed about what is going on with appropriate feedback within a reasonable time"
"systems should always keep users informed about what is going on with appropriate feedback within a reasonable time"
"this system status could be persistent or always visible like a battery life or a WiFi indicator OR
"this system status could be persistent or always visible like a battery life or a WiFi indicator OR
it could be feedback that is only shown after a user has done something"
it could be feedback that is only shown after a user has done something"
When users know the current system status, they learn the outcome of their prior interactions and determine next steps. Predictable interactions create trust in the product as well as the brand.
Neilson's website on this heuristic
Further examples at:
Further examples at:
- the green dot shows the user they are logged in
Some websites may not have many examples of this heuristic.
Some websites may not have many examples of this heuristic.
If they don't have anything to process you won't see a loading bar etc
If they don't have anything to process you won't see a loading bar etc
#2 Match between the system and the real world
#2 Match between the system and the real world
Questions:
Questions:
Does the UI use terms based on users’ language for the task?
Are meaningful icons and/or abbreviations used?
Does information appear in a natural order?
Does the order that information is accessed match user expectations?
"speak the user's language with words, concepts and phrases familiar to the user"
"speak the user's language with words, concepts and phrases familiar to the user"
"follow real-world conventions, making sure information appears in a logical order"
"follow real-world conventions, making sure information appears in a logical order"
Skeuomorphism describes interface objects that mimic their real-world counterparts in how they appear and/or how the user can interact with them. EG: the recycle bin icon used for discarding files.
When a design’s controls follow real-world conventions and correspond to desired outcomes (called natural mapping), it’s easier for users to learn and remember how the interface works. This helps to build an experience that feels intuitive.
Neilson's website on this heuristic
Further examples at:
Further examples at:
#3 User control and freedom
#3 User control and freedom
Questions:
Questions:
Are users offered easy ways out of as many situations as possible?
Are there clearly marked ‘emergency exits’ for users to leave unwanted situations without having to go through several stages?
Support for undo and redo, e.g. Ctrl-Z & Ctrl-Y
Cancel button (for dialogue boxes waiting for user input)
Universal undo (can go back to the previous state)
Interrupt (especially for lengthy operations), e.g. Home button, “ESC” key
Quit (for leaving the program at any time)
Defaults (for restoring a previous state)
"users sometimes often choose a function by mistake and need a clearly marked exit... Basically support undo and redo"
"users sometimes often choose a function by mistake and need a clearly marked exit... Basically support undo and redo"
When it's easy for people to back out of a process or undo an action, it fosters a sense of freedom and confidence. Exits allow users to remain in control of the system and avoid getting stuck and feeling frustrated.
Neilson's website on this heuristic
Further examples at:
Further examples at:
#4 Consistency and standards
#4 Consistency and standards
Questions:
Questions:
When thinking about, designing for or analysing for consistency, ask yourself, is the product consistent:
Within itself?
With earlier versions of the product?
In its use of metaphors?
With people's expectations?
List the standards you can identify in the UI.
What makes them consistent?
Try to describe why?
"ensures that the interface is predicable and learnable"
"ensures that the interface is predicable and learnable"
There are two categories:
There are two categories:
- Internal consistency: maintaining consistency with in a product or family of products
- External consistency: maintaining consistency across an industry or in general
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.
Failing to maintain consistency may increase the users' cognitive load by forcing them to learn something new.
Neilson's website on this heuristic
Further examples at:
Further examples at:
- External consistency - consistent internet wide:
- arrow to send
- tick to indicate ok
- speech box to message
- triangle to expand
- anti-clockwise arrow for rewind
- "desktop" calendar icon for calendar
- < & > to move onto new month
- well known logos
- etc
Internal consistency - consistent within itself:
Internal consistency - consistent within itself:
- navigation
- page layout
- colour scheme
- fonts.
#5 Error prevention
#5 Error prevention
Questions:
Questions:
Do dialogue boxes pop up to ask for confirmation of interactions which have an impact, like deleting?
Does it prevent the user from choosing interactions that are wrong in a certain situation, e.g. by greying out?
Does the UI prevent choices that could be wrong for the user task (e.g. dates in the past, double booking or purchasing...)
"stop errors before they happen"
"stop errors before they happen"
"prevent simple annoyances"
"prevent simple annoyances"
" have an undo button to prevent errors becoming permanent"
" have an undo button to prevent errors becoming permanent"
Our attention is as limited as our tolerance for stuff that doesn’t work. Most people who run into errors on our apps just move on to something else.
Error prevention can help enable lower rates of user errors, and ultimately improve usability.
Neilson's website on this heuristic
Further examples at:
Further examples at:
- show password before submit
- if user is unsure of the capture string they can request another
#6 Recognition rather than recall
#6 Recognition rather than recall
Questions:
Questions:
Does the website's menu help you find the destination for your task easily?
Does the website provide clear hints to choose appropriate functions?
Does the UI help you remember the steps of your tasks, and your progress within the task?
Does the UI use standard elements that make it easy to find your way?
"minimising user work is essential for a good user experience"
"minimising user work is essential for a good user experience"
"a menu is the most classic example of recognition based user interface"
"a menu is the most classic example of recognition based user interface"
Humans have limited short-term memories. Interfaces that promote recognition reduce the amount of cognitive effort required from users.
Neilson's website on this heuristic
Further examples at:
Further examples at:
- user knows the steps taken
- display recent messages so user doesn't need to remember them
- menu/nav bar to find your destination
- green tick to remind you of your progress/login status
- icons; standard elements makes it easier to find your way
- clear hints for selecting the correct cinema
- leave search bar text so user doesn't have to remember it
- user recognises the address
#7 Flexibility and efficiency of use
#7 Flexibility and efficiency of use
Questions:
Questions:
Can a user speed up tasks with shortcut functions?
Can an advanced user skip elements to speed up a task?
Does the user interface use predictive text or search?
Does the user interface show recently used functionality or files for quick access?
"flexible processes can be carried out in different ways, so a user can pick which ever method suits them"
"flexible processes can be carried out in different ways, so a user can pick which ever method suits them"
"that flexibility helps a user be more efficient"
"that flexibility helps a user be more efficient"
"an accelerator is any option which helps speed up an interaction or process" - like Ctrl-c for copy
"an accelerator is any option which helps speed up an interaction or process" - like Ctrl-c for copy
Use accelerators to make the interface "efficient for experts and friendly for newbies"
Use accelerators to make the interface "efficient for experts and friendly for newbies"
A user will be more efficient and therefore have a better experience if a system is flexible enough to cater for their experience level. Novice users require guidance whilst experienced users require short cuts and accelerators.
A user will be more efficient and therefore have a better experience if a system is flexible enough to cater for their experience level. Novice users require guidance whilst experienced users require short cuts and accelerators.
Neilson's website on this heuristic
Further examples at:
Further examples at:
Some websites may not have many examples of this heuristic
Some websites may not have many examples of this heuristic
#8 Aesthetic and minimalist design
#8 Aesthetic and minimalist design
Questions:
Questions:
Does the website use brief, clear language?
Is the layout uncluttered and does it use white space?
Does it use icons where possible?
Do all elements have a purpose on the page or in the dialogue?
Does the website use a simple colour scheme?
"keeping your content focused on the essentials"
"keeping your content focused on the essentials"
"aim for a high signal to noise ratio" - where signal is relevant information and noise is not
"aim for a high signal to noise ratio" - where signal is relevant information and noise is not
"important to prioritise your content and features"
"important to prioritise your content and features"
"communicate don't decorate"
"communicate don't decorate"
Our brain can only process limited information at a time. Sometimes, the interface is too cluttered which makes it very difficult for us to focus or function properly.
Our brain can only process limited information at a time. Sometimes, the interface is too cluttered which makes it very difficult for us to focus or function properly.
Neilson's website on this heuristic
Further examples at:
Further examples at:
Website:
Website:
- uses brief & clear language
- is mostly uncluttered & uses white space
- uses many icons
- most elements all have a purpose
- has a simple colour scheme
#9 Helps users recognise, diagnose and recovery from errors
#9 Helps users recognise, diagnose and recovery from errors
Questions:
Questions:
Are error messages constructive?
Are error messages consistent in grammar, form, terminology, and abbreviations?
Do error messages blame the system, or the user?
Do error messages inform on the severity of the error?
Do error messages indicate actions users need to take to correct the error?
Does the system guide users to the place where the error occurred?
"three recommendations:"
"three recommendations:"
- clearly inform users when an error has occurred
- tell users what went wrong
- offer users a solution
Increase user satisfaction by designing the error messages with human readable language and by guiding & providing the solution on how to solve or to recover from it.
Increase user satisfaction by designing the error messages with human readable language and by guiding & providing the solution on how to solve or to recover from it.
Neilson's website on this heuristic
Further examples at:
Further examples at:
Websites that request little in the way of user input may not have many examples of this heuristic
Websites that request little in the way of user input may not have many examples of this heuristic
#10 Help and documentation
#10 Help and documentation
Questions:
Questions:
Can the user consult more extensive documentation?
Is a help function always available, on each screen?
Do functions and fields have specific help content?
Is the help function easily searchable?
Is the help content aligned to the user tasks, e.g. by using verbs?
recommendations for help documentation:
recommendations for help documentation:
- is easy to search for help?
- is the documentation focused on the user's task?
- lists concrete steps to be carried out?
Help & documentation is a must if you’re looking for better user experience. You don’t want them to exit your interface and choose your competitor.
Help & documentation is a must if you’re looking for better user experience. You don’t want them to exit your interface and choose your competitor.
Neilson's website on this heuristic
Further examples at:
Further examples at:
Page updated
Report abuse