Workflows
Sequence of activities that take place to complete a specific task or job
Presented in UX as a process of screens / screen states
Registration
How to improve registration:
- Don’t force registration unnecessarily
- Don’t force registration with a social media account
- Explain why you are asking for personal details when registering
- Use inline validation when getting users to register (good first impression)
Onboarding
Onboarding is to:
- What the app does
- How to use it
If product is simple and adheres to a recognised mental model - no onboarding is necessary
No onboarding should be the default
When to consider using onboarding
- Product requires users to develop a new mental model
- Product is complicated
- If the product requires users to enter data immediately
- If the product has recently been redesigned and there have been a lot of change
Onboarding objectives
- Get users to engage with the app as quickly as possible
- Make the initial engagement as smooth and as friction free as possible
- Answer critical questions upfront: 1.What does it do? How does it work?
- Answer deal-breakers (how much does it cost? how do I pay)
Onboarding styles: Static Walk Through
- Keep them short and concise
- Use images and minimal text
- Give users the option to skip them
Interactive walkthrough
Getting the user to interact with the product as you explain / demonstrate functionality is far better than a static walkthrough
- Get the users to use the services while demonstrating the benefits
- Address any dealbreakers as they register
Tutor overlays
Explain how a product works and how to access certain features
Contextual hints
only providing help when needed
Onboarding Summary
- Be sure that onboarding is necessary before implementing it
- Define the key messages
- Define the key features to get people started
- Interactive walkthroughs are more beneficial for outlining benefits
- Tutor overlays are better for explaining features
Sign in
How to get sign in right:
- Keep users logged in (so they don’t have to sign in repeatedly)
- Show don’t hide passwords as they sign in
- Use finger print or face id to make the sign in process as quick and simple as possible
Benefits of biometric id
- Quick and convenient
- User can’t forget a fingerprint or face
- No more fiddling about with keyboards
- No more password recovery or resets
Complex forms
Best way to build complex forms:
- Structure as a conversation
- Minimise inputs
- Use smart defaults
Making complex forms conversational
Follow this structure when making long complicated forms:
- Tell the user something
THEN - Ask the user something
Repeat
Structuring complex forms
- Top align labels: to aid scanability and reduce user work
- Use single columns: aid scanability (easier to scan top to bottom) (including check boxes)
- Use field length as an affordance: if user is only required to fill in a small amount of information shorten the field
- Avoid aestrix / optional fields: only essential fields should appear on a form
- Use descriptive labels on buttons: instead of ‘Submit’ use ‘Start your plan today’
- Use steppers / progress bars: Show how much progress has been made in a form / how many steps are left
Payment: Follow a conventional payment flow
- Remind the customer what they are buying and how much it costs - make payment amount very clear
- Provide them with a payment form where they can enter their details
- Next provide them with a confirmation that there payment is being made
- Confirm that the transaction is complete and payment has been successful
Minimise questions
Don’t ask unnecessary questions: only ask the bare minimum of what is required to minimise taps
Basic Payment Screen
- Name on card
- Card number
- Expiry date
- Security code (CVC)
Use auto-formating
Chunk phone numbers
e.g 0862021093
086 202 1093
Easier for users to fix errors then
Increased security perception
- Display credit card options - there is a halo effect of your brand being associated with well know credit card companies
- Confirm payment amount (make it very obvious)
Repeat it again for the payment button “Pay $20” to reduce ambiguity - Use padlock icons on card number fields - gives the impression to user that thing are more secure
- List payment processor : gives halo effect
Microtasks (or modes)
Micro-tasks: Add content or data to your app / edit pre-existing content
E.g adding a new city to your weather app
- Performing a specific function
- Interface changes entirely (focuses only on micro-task)
- Navigation/content are typically removed
Micro-tasks (Summary)
- Micro-tasks are often the only tasks for single use case applications
- Only way to manipulate content for many apps
