Chunking
Makes large data sets easier to grasp
Chunk data into relatable input groups to group data e.g your details, delivery address, payment details, order summary
User can understand what’s required quicker
Benefits of chunking
- Helps our short term memory by displaying data into bite size pieces
- Makes large data sets appear smaller
- Aids scanability for the user
- Helps make interface more perceivable - obvious straight away to the user what is required / going on
Alignment
Objects that are aligned appear more orderly and are easier for the user to comprehend (faster to read then)
Less mental overhead - better user experience
Alignment can help lead the user through the software
Path to completion = forms should be aligned from top to bottom to lead the user through the software
Alignment recap
Alignment:
1.Makes interfaces more orderly
2. Aides comprehension
3. Makes interfaces more perceivable
4. Guides users through an interface
5. Helps reduce errors
Label Alignment
Always best to top align labels
- Aids scanability Less work for user (easier to read top to bottom rather than left to right)
- Suit a mobile interface better
Using placeholder as a label
Placeholder label within a filed
Negatives:
Disappears when a user enters something into the field
Makes it difficult to check their work and more difficult to correct errors
Call to Action (CTA)
- tells user this what you need to do
- tells user what will happen next
Use buttons to tell user what will happen next e.g
Sign up to 30-day free trial
Donate now
Call to action (RECAP)
A good call to action will tell the user:
- What they should do
- Why they should do it
- What will happen after
Visual hierarchy
Indicate to user what elements are most important and what should be given attention first
Objects with the most contrast to their surroundings will be picked up first
How to achieve visual hierarchy
- Size
- the biggest text is most important
- Colour
- Objects with the highest colour contrast to their surroundings are perceived first e,g compose button gmail
Visual hierarchy (RECAP)
- Uses colour contrast and size
- Prioritise most important information
- Prioritise most common actions
- Leads user through the interface
Progress indicators
Indicate how much progress a user has made through a process
Creating a progress bar
- Make the steps sequential (e.g step 1….)
- Clearly indicate what steps have been completed vs what is yet to be finished
Progress indicators benefits
- Tells users what they have done
- Tells users what they need to do
- Indicates time and effort required to complete process
- Aides predictability
Digital Affordances
Affordances can help make digital features discoverable
E.g Plus sign to add a new reminder
Digital affordance (Recap)
- Makes interfaces perceivable
- Makes features discoverable
- Make actions obvious
- Must use natural qualities
Help
Put information on screen for user
E.g rules for setting up a pin code below pin code creation
Help (RECAP)
- Available but not intrusive to users
- On the interface rather than in the form of tooltips
- Contextual help works well (e.g only displaying help when a user clicks on the field)
Inline validation
Tell the user how they are doing as they are filling in the form
E.g Password field has a green tick when the password criteria has been met
Only using inline validation after the user has exited the field - then give the confirmation
It can be offputting while the user is filling in the field to be told they haven’t met the criteria even though they aren’t finished filling in the field - VALIDATION SHOULD OINLY OCCUR WHEN THE USER HAS LEFT THE FIELD
Inline validation benefits
- Reduces error
- Increases speed
- Increases satisfaction
Not easy to implement - needs to be tested rigorously
Error Handling
Error messages should tell the user:
- Clearly where the error occurred
- What went wrong
- What they need to do to fix the error
