Introduction
Item 1
contentItem 2
Conversational: The tone of C2P is authoritative yet conversational, so write as if you are giving a brief, informal talk to a friendly group of professional peers Clear and direct: Avoid overly technical jargon in the app. Not every customer is a lawyer Approachable: We should be friendly and approachable, a friendly guide leading the way through the thicket of regulations Authoritative: Establish expertise and trust without coming across as condescending and talking in legaleseWho we are
Voice
Language and tone of voice will play a part in communicating our personality. Our customers need to feel that they are dealing with experts, but also something approachable.We are…
Conversational: The tone of C2P is authoritative yet conversational, so write as if you are giving a brief, informal talk to a friendly group of professional peers Clear and direct: Avoid overly technical jargon in the app. Not every customer is a lawyer Approachable: We should be friendly and approachable, a friendly guide leading the way through the thicket of regulations Authoritative: Establish expertise and trust without coming across as condescending and talking in legaleseOur design process
These are the steps we try to take to an ideal design solution.The pitch
What is the reason for doing it and how do we measure the success of it?Problem Statement
Create a Problem Statement as the starting point using- Who is having the problem?
- What is the problem?
- When does this happen?
- Where does it happen?
- Why are we doing it?
Example
‘Our monitor cannot find regulations by alternative names when they are searching the library. We should consider having other names visible and searchable, so that monitors can find regulation based on any type of title so it makes it easier if they cannot remember the proper title.’Job Stories
This can be broken down into Job Stories that focus on more specific issues: When (Situation)… I want to (Motivation)… So I can (Outcome)…Example
‘When I’m ready to have estimators bid on my game, I want to create a game in a format estimators can understand, so that the estimators can find my game and know what they are about to bid on.’Define objectives
When we have completed these job stories we can ask ourselves how we are going to solve the problem. We use the 5Ws again but in our own context.- Who is it for?
- Why are we doing it?
- What are we doing?
- When are we doing?
- Where is it going?
The journey
What is the user’s journey and their needs? Map out a persona, trigger, steps and obstacles. These also go onto create the acceptance criteria for handover to Dev.Visual
How can we make our design consistent with other elements on the pages? Use of colour and icons as an exampleResponsiveness
How do we make our design work on multiple screen dimensions and situations so that we keep content hierarchy intact and not affect usability?Microcopy
What language and microcopy do we use to enhance the experience?Animation
How can animation be used to enhance user interactions?Motivational
How can nudges, behaviour principles and interaction techniques be used to help the user complete their goal? Examples are peer feedback, social, progressive disclosureReferences
Visual principles to live by
Balance
Creates the perception that there is equal distribution. This does not always imply that there is symmetry.Contrast
Focuses on making items stand out by emphasising differences in size, colour, direction, and other characteristics.Emphasis
Emphasis is an area that first attracts attention in a composition. This area is more important when compared to the other objects or elements in a composition. This can be by contrast of values, more colours, and placement in the format.Gestalt
Helps users perceive the overall design as opposed to individual elements. If the design elements are arranged properly, the Gestalt of the overall design will be very clear.Hierarchy
Shape
An element can also appear more hierarchical if it is different than other elements in a design. We naturally look first at the irregular shape in a design. If there are five of the same windows and one door on the front of a building, our attention will focus on the door first.Placement
Last but not least, we can place elements in more hierarchical positions. Within a circle, the centre is the most hierarchical. The end of an axis is naturally more hierarchical than points along the line.Whitespace
Incorporating space into a design helps reduce noise, increase readability, and/or create an illusion. White space is an important part of your layout strategy.Using motion to tell a story
Motion is not simply the cherry on top of the UI. Motion is essential in directing the user’s attention to an important event and showing them what has happened.Motion
- is a visual cue that an event has occurred
- reduces cognitive load as it makes it easier to understand what is happening
- makes the interface feel faster
- makes it easier to recall and learn for next time
Motion principles
Quick
Animations should be fast and nimble, never keeping the user waiting longer than is necessary. The aim is to prioritize user-perceived performance over technical benchmarks.Supportive
Motion should help ease the user through the experience. It should aid the flow of actions, giving clear guidance for user orientation: spatial or temporal.Efficient
Enterprise level applications require highly effective user interactions. So is their animation design – with a transition time as minimal as possible.Personable
Animations should be natural and pleasing, and give a sense of our character when appropriate. Implementation details can be found herePrevent change blindness
Significant changes in a web page can remain unnoticed when they lack strong cues, due to the limitations of human attention. [Nielsen]- Make one change at a time
- Group all elements that will change simultaneously in the same region of the screen
- Use animation to signal change, but avoid having too many competing animations on the screen to prevent a dilution of attention
Anatomy of a page
All pages can be divided into these abstract elements.- Content
- Search
- Actions
- Output
Example of summary page
Content
- Summary
- Tags
- Dates
- Scope
- Activity
Actions
- Relevance
- Tasks
- Linking
- Sharing
- Tagging
Output
- Notes
- Activity
Behavioral principles to keep in mind
Reference: Designing for behaviour changeAnchoring
The anchoring effect is a cognitive bias that influences you to rely too heavily on the first piece of information you receive.Confirmation bias
People analyze and search for information in ways that support their current ideas.Conditional warnings
Give users warnings based on detecting the error they’ve made, or might be about to make. Give them spell check functionality.Default bias
Use smart defaults. People pick the easiest option to avoid complex decisions. Defaults provide a cognitive shortcut and signal what people are supposed to do.Decision paralysis
When given many options, people make the easiest choice, which is often no choice at all.Entry points
Maximise the effectiveness of the entry point by reducing barriers, establishing clear points of prospect, and using progressive lures.Feedback
Let users know how what they’re doing is affecting the system?Friction costs
People can be deterred from taking action by seemingly small barriers.Implementation intentions
People are more likely to do something when they specify how, when, and where they will do it.Loss aversion
People react to losses more strongly than gains and they try to prevent losses more than they try to make gains.Optimism bias
We overestimate the probability of “things going right for us” and underestimate the probability of “things going wrong for us”.Nudge
Set default states that correspond to the most generally desired option, not conservative. Provide clear and immediate feedback to reinforce desired actions.Align incentives with desired behaviors. Simplify structure choices. Make goals and performance clearly visible.Motivation
Using the B.J. Fogg method. Fogg is a behavioural scientist. Behaviour is motivation, action and trigger. All three must be in sync for this to work effectively. Make it easy for a new behaviour to become habitual, by building it into an existing routine.Payment for effort
People place a greater value on services and products if they can see the amount of effort put into them.Peer feedback
Give users feedback on their behaviour from other users of the system, equal in status to themselves.Progressive disclosure
Involves separating info into multiple layers and presenting layers that are necessary or relevant. It prevents info overload. Show most frequently required controls by default and make additional controls available on request.Progress
Endowed Progress effect Users are more likely to complete a task if they are provided with an artificial progress towards the task.Zeigarnik effect
The Zeigarnik effect is a tendency to experience automatic, intrusive thoughts about a goal that one has pursued but the pursuit of which has been interrupted. That is, if you start working toward a goal and fail to get there, thoughts about the goal will keep popping into your mind while you are doing other things, as if to remind you to get back on track to finish reaching that goal. (Social Psychology and Human Nature)Goal gradient effect
Our efforts increase as we move closer to a goalGoal Visualization effect
As people approach a goal, external representations, which increase the ease of visualizing the goal, enhance goal pursuit.Reward substitution
Immediate rewards, which appeal to people’s impulsive nature, can be used to motivate behaviours that are beneficial in the long run.Self-signaling
People behave in ways that reinforce the type of person they believe themselves to be, even if no one else is around to witness it.Sequencing
It is easier to take action when complex activities are broken down into smaller and more manageable tasks.Suggestions
Detect and suggest a better option to users when it looks like they’re making an error.Heuristic evaluation checklist
We sometimes do an heuristic evaluation if we think that certain pages are not working for users.Usability rating
(1) Showstopper (2) Major issue (3) Minor issue (4) Good (Blank) NA
Appearance/Aesthetics – First impressions are important – determines stay/leave (no return)
- Primary goal/purpose is clear
- Clean simple design
- Pleasing color scheme
- Appropriate use of white space
- Consistent design
- Text and colors are consistent
- Icons are universally understood
Content – Users are here for content/work – Make it easy to find what they are looking for and use user site
- Major titles are easy to understand
- Easy to scan
- Minimal text information presented
- Clear terminology
- Links are clear and follow conventions
- Help is easily available
- Call to action is clear and easy to follow
- Search box is easy to identify and easy to use
Navigation – Makes getting around you site easy and takes the guesswork out of user’s visit
- Consistent navigation
- Easy to identify my location on the site (breadcrumbs, headers, colors)
- Consistent way to return home
- Limited number of buttons & Links
- Organization of information makes sense
Efficiency/Functionality – Following basic rules will keep user frustration to a minimum
- Site loads quickly
- Custom 404 error
- Error messages are meaningful
- Login is easy to find
- Logout is in upper right corner of page
- User knows if they are logged in or out
- Proper etiquette for links off site (?)
- No broken links
- Contact information is easy to find
- User knows the status of searches
- System support undo and redo (?)
- Fail safes for important changes
- System has an emergency exit (?)
- Forms Autofill and calculate when practical
User Interaction
- Are the Interactive elements visible
- Is it easy to detect that interactive elements are interactive
- Does the user get immediate feedback on actions
- Can this feedback be easily associated with the action
- Are clear constraints applied to the interactive elements (is it clear what can be done)
- Do the interactive elements have strong affordance
- (is it clear from looking at them what to do with them)
- Do the interactive elements follow a consistent pattern
- Is there good mapping between the control and the effect it has on the world