A fantastic conference with speakers and attendees from around the World. I have documented the talks I attended below (in note form).
Ensuring colour communicates effectively. Regardless of context and ability.
- - Graceful degradation – your design may break down if someone is colourblind but will still work
– Redundant coding – patterns, symbols, hatching can help
- Simulation testing under different conditions is a good idea, and with colourblind users.
- Check designs in grayscale to check their design.
- - Check a grayscale version
- - Simulate the colourblind experience (websites available)
- - View on different devices (use to check)
- - Test on colour kind users
We use colour to communicate urgency and priority.
Call to action buttons
Red vs green. AB tests show red buttons are much more successful than green. But context makes the different. It may just stand out more.
A users personal context may make an experience different.
Colours in different countries also have different meanings. People have different Colour’s relationships with colours too. It can be personal.
Experiment – Berkley vs Stanford. Students loved their school colours way more than for each other’s schools.
Colour preference can affect how much they Colour’s based on brands.
Experiment – colours in arrangements, colour triplets. Members saw colour combinations on a website without noticing, then the next day they chose those colours without knowing they were exposed to it.
- No just about stereotypical associations.
- It’s often linked to a persons exposure to a colour.
- Product itself and their experience.
- Colours and brands can evoke people emotions.
- Emotional reaction to colour may be influenced by a personal context, and past experience.
- Attention can be grabbed by a colour if context supports it.
- Try out strategies
- Redundant coding and graceful degradation.
- Anticipate any strong colour preferences in your user population.
- Be skeptical of pop psychology facts about colour. Where possible check out search.
Don’t die halfway through – 6 factors for a successful ux project
Michael Bechinie @beemcog
Compare complexity of project domain and project organisation.
6 success factors were created:
1: Define a well tailored project set up.
Defining who does what in the project. Define and differentiate roles within the project separate competences from responsibilities. Consolidate results from previous usability and UX studies. Define a UX activity catalogue and criteria for design rationalities.
2: Use the power of social intelligence.
Take the role of an anthropologist (Anthropology is the study of humans, past and present, that draws and builds upon knowledge from the social sciences and biological sciences, as well as the humanities and the natural sciences). Make use of cooperative games for win/win situations – beware you will have to deal with non cooperative players and cheaters! Take the mediator/integrator role. Network with all stakeholders of the project – from the very beginning.
3: Have good arguments for UX activities
Collect wake up calls. Encourage agile methods, the butterfly way. If you imagine how a butterfly collects his stuff, from flower to flower, it is tangible, but very effective and delicate. Eg More testing with fewer people is more effective then 1 test with 20 participants. Use design patterns – time saving. Do everything good enough. It raises the overall perspective rather than doing a few things really well, raise overall level of experience.
What is good enough? And how to support it? Don’t use all resources on one thing, do everything well overall.
4: Capitalise on UX results
Show vale if work. A collect systematic feedback from customers, clients etc. Focus on short and long term success. Make UX results visible and tangible. Prepare best cases of things already done, write blog posts and stick them on walls, do workshops, show it off!
5: Use promoters to overcome resistance
Domain expertise, power, process, relationship, technology fate keeper. Overcome “I don’t want”, “I don’t like” etc.
6: Get insight through project retrospectives.
Watch and review site. Modify existing project and behaviours, then you can improve for the next project.
Project environment, project management, methods used and deliverables done, communication, activities not carried out.
What was done well, badly, could be improved etc. simple plus and minus ratings to get results to decide which activities to keep/remove/amend for your next project.
The ‘softer’ and ‘emotional’ factors were rated as most important from the survey on the ‘6 most important factors’. At UXPA ratings were all about the same, rather than any stand out feelings about most important factors.
- Make visible good UX results done so far
- ARGUE results to keep them going
- Do RETROSPECTIVES for a better PROJECT SETUP next time
- Seek for PRO,OTORS if you aren’t in UX TROUBLE
Music lessons for designers, improvisation and innovation
Abstract the problem/question and reframe it.
“Who does it well?” An example for rugby is, if they want to improve strength they go away from rugby and train with weight lifters.
Time, people, budget
Giving people constraints can encourage creativity. For example, French book, English version ‘a void’ the whole book was written without the letter ‘e!’ Crazy! Then a jazz guitarist who only had use of 2 of his fingers created a new style of playing and is one of the greatest guitarists of all time.
- Sometimes at Tobias and Tobias they tell the team to do a 5 day job in 2 to get different results.
- Radiohead – “you do it to yourself you do, and that’s what really hurts.”
- “Talent borrows, genius steals” – The Smiths quoted on their vinyl first album/single.
- You need to know the rules before you break them. Gofer quote “the more I practise, the luckier I get”
- The higher up the pyramid you climb, the most respect you get, strategy and leadership need to happen on the field, not just in the boardroom (rugby orientated).
The band: Marco, Hayden, Aloecha
Communicating status through great UX, graphics and accessibility
- - Sign posting
- - Status
- - Timely info
Usability / human factors + Graphic design + Accessibility = great UX
Contract, repetition alignment, proximity, balance, white space, shape, colour, line, texture.
- - Add text equivalents for everything. For all that isn’t text. Don’t rely on images or styles alone. Ensure logo has an lat description.
- - Use headings – Jaws will pick out headings so blind users can navigate to that section.
Structure is key, text equivalents and keyboard.
- Support all input methods
- Keyboard, touch,
Patterns for communicating status
Notification and alerts
- How much interruption should be supplied to the user?
- Show number of alerts.
- How urgent should it be?
- Make it easy to drill down to additional info and relevant actions.
- Get back to alerts even if red before.
- Dismiss alerts when done.
- Colour is used to draw attention to information.
- Simple shapes and icons draw low attention.
How does a user get to alters?
- They’re already at top of page.
- Placing a (hidden) heading just before
- ARIA landmarks – ??
- Can C+F and search alt text (alt=“Alerts”)
- - Need text equivalents
- Usually, the number is actually text. So nothing else needed (as long as an alt is used for the item).
Ensure adequate contrast via ‘colour contrast analyser’ – webaim.org. Colour picker and tells you if you have passed with A or AA.
Work related Items
- Users need to differentiate between items. Users can customise?
- Shape, colour and repetition can make an impact – for example, a higher alert could have a higher number of elements instead or one symbol.
Color blindness check in Photoshop. Convert using 2 settings. View > Proof Setup > Colour Blindness (Protonopia and Deutranopia)
- Scales, wizards steps, numbers.
- Use highlights, bolder fonts, larger etc…
Filters and hiding elements are important on mobile.
A good example is a shopping site, you can select things you want and do not want. Using colour to show what’s been selected and can be removed.
- Error messages
- Field level errors
- System errors
- Page errors
Use plain language – what went wrong and how to fix it.
Real time feedback can be helpful if completing a form field – showing what you’ve done and what can be improved.
Colour and icon are important here.
Yahoo form is a good example, it shows you what form fields have been missed or completing incorrectly and places the cursor in to the first field that needs amending.
- Layout, size and placement are very important.
- Simplify the display overview t=with drill down.
- Let users configure.
- Communicate trend, volume and severity.
- Example on Fitbit dashboard: Semantic structure, Text equivalents, Tactile feedback (Fitbit flashes so you can see you have reached your target without going online)
- Maps are complex – using icons, colour blocks, lines etc
- Simplify in appearance
- Granularity of info, colour, multiple layers, fitting pins – can be difficult (showing layers if may in a small area)
- Using a number in a block so users can drill down. Combining text with graphics.
Goodbye focus groups, hello friendship groups
- Think design. Think people.
- Disrupt old thinking
- Lets keep creating new.
Asking ‘what if’ questions
Embrace change: Try > Learn > Revise (repeat)
May have an outside observer – someone not that invested in the project. Having the observation lens pointed on ourselves. Ask for feedback off clients and participants too. Repeat the cycle.
- Social graph
- Immersion journey
- Friendship groups
- Quick hitss
Participants don’t have time to sit for any our long interview?
Eg: truck drivers regarding HR, they don’t have time to come in to a lab. Used:
10 minute interviews at different times of week and day through a week. Typically phone interviews.
Priorities and routines differed at different times of day/week.
A look of what exists outside of the usual interview space (in real world).
Contradictions on ‘habits/routines’.
How to use it?
Cross check the impact of modes and emotions. Conversations help gain perspective on divergent answers and contradictions.
- Schedule interview with clear expectations,
- Uncover various emotions through time-lapse surveys.
What if… focus groups included friends and family
Intimate gathering of 3-4 people who have already have a familiar relationship with one another.
Ask participants to bring friends/family.
Benefits: No recruitment for you.
- Natural conversation. Social connections support and inform our decisions.
- Friends feel comfortable agreeing AND disagreeing.
- Friends know when the other is lying.
How to use it…
- Rethink recruiting, hand-select specific creatives, thinkers and innovators.
- Push the envelope: create and run a series of specific mind-challenging experiences.
- Have fun! Encourage creativity!
What if… your clients want to be researchers as well. (People think they know more than you do)
Give client a ’tool kit’ and call them a ‘researcher’ and send them on a quest in to the field.
Why Immersion Journey?
- Clients can own the process and truly empathise with users.
- Look at other industries for inspiration and learn from their errors.
- A bad experience can be a rejuvenating experience (they can learn from findings)
How to use it…
Get rid of 2-way mirror. They use nice co-working spaces, maybe unusual places, like an aquarium, museum etc.
This is a teaching moment.
- Consider your clients as part of the research team.
- Be prepared for clients to feel uncomfortable; this is okay.
We could see how users define all their roles in the world?
A verbal or written way for users to define what they are and what they’re thinking and then get them to talk about it.
Define themselves using circles (themselves, their closest, network etc)
- Helps people reflect on who they are.
- Identify people and contexts of influence
- Reframe the conversation beyond needs and wants.
How to use it
- As an intro to your participants during home interviews. Use as a conversation starter.
- Don’t take the findings literal.
- Find an example.
What if…we brought attention to worlds that are taken for granted?
De/Re-construct. Over-used words that become meaningless. Capturing honest opinions.
- Overused words have lost their ‘wow.
- Allow us to see how people define the complex (e.g: personal anecdotes, perpendicular thoughts)
- Different approaches that are not industry-specific to get the word.
How to use it…
Play games! Take a cue from Ellen and play ‘Heads up’. – The name game. A good ice breaker. This can also be a fun competition element.
- Throw in some random words, keeping them on their toes.
- Encourage creativity! Any way to describe a word is fair.
We looked at other verticals for inspiration?
Metaphor brands – Using brands as a metaphor?
“What is Uber was a grocery store?”
- Ability to see traditional experiences with a new fresh perspective – inspiration!
- Identify important elements of a brand or an experience.
- Think outside of the limitations imposed by a business.
Finding out what works and what doesn’t in business. A grocery store: go looking for things, queuing to purchase etc…)
How to use it..
- Frame how you want participants to sleet bradn (what is your fav brand?) what if that was a grocery store? (the most, disruptive, favourite, controversial)
- Sketch their brand experience and new experience, making them make connections at each touchpoint. Allows them to use a different part of the bran and be creative,
- Allows the possibility to dive deeper in to a specific topic.
What we love…
- Participants are having FUN!
- Observers are more ENGAGED!
- Everyone is ACTIVE!
Always ask ‘what it’s….”
Paper didn’t exist?
We all owned a 3D printer?
We all lived in smart homes?…
Finally found the love of a lifetime: customer journey maps
Character > Conflict > Resolution
- Stories are more memorable than data itself.
- “Stories have always been part of UXD”
- Persona > UX Opportunities > Rx
- User advocates a tool to tell people stories = journey maps
A few definitions:
- overcome internal focus
- vivid but structured visualisation
- A catalyst, not conclusion
- Process maps, flow diagrams,
- Augment our understanding. Overlay a single variable for users point of view. Eg: when a user is happy/frustrated etc.. a different colour/highlight can be used.
- Journey maps allow us to synthesis.
- Capture data in a single visual.
- Guiding principles, doing, feeling, metrics. (and feed opportunities) opportunities.
- Journey maps are diagnostic: diagnose where things re breaking down for the user. Should be read horizontally and vertically. And show emotions and opportunities.
- Journey maps are also didactic – on a basic level show what a task was like. A baseline view. Showing a simple journey/task.process.
- The idea is to get people on the same page, and understand the tasks.
- There is not one right way to visualise a journey map. – sadly!!
- Using personas, emotions over time and space.
- Using quotes and feelings to certain points of the journey, Google Analytics could be incorporated, e.g.: “at this point, 56% of users leave the buying process”…
Creating a journey map
Start with primary user research > surveys, interviews etc…
- Next, create personas
- Next, create user scenarios/tasks with colour coded emotions
- Next, used post its to lay out everything.
Scenarios: before, during, after a meeting. Incorporated quotations, include metrics etc…
Think about what could go right/wrong in the journey.
- Communication channels
- Phases, emotions, channels, tasks and opportunities – if possible
UXPA – Motivation through user empathy
Make our products useful, usable, and delightful through connecting
Empathy – Being aware, sensitive to other feelings.
- Connecting tens with outside users.
- Empathy = direct observation + emotional response
- “Researcher” roles in empathy building
- Researcher > data > project team mates > best possible decision
- Researcher > date + empathy > project team mates > best possible decision
- Researcher as broker / researcher as diplomat
- Be open and friendly – “you break it, you buy it” – strict barriers can cause barriers with users. “Stay behind glass!” etc.
Researcher as facilitator
Limitations of scale
- Focus on the immediate project team
- Limited researcher resources/budget
- Remote observation/replay lacks emotional intensity
Motivating at scale
Yahoo had an internal testing on large scale. One unrelated user uses the developers product for 1 hour each quarter. Everyone met in a cafe, got in to pairs and talked for an hour about the product. Engineer and end user. It took place in the evening so people were available.
End users talked about products they like/disliked.
5/6 engineers would share out insights from their end users, so each groups had 5/6 sample users, each group would summarise top insights and share with all other engineers.
This only took 2 hours! Light weight and fitted in to schedules.
30 ‘Yuser nights’ worldwide. 30% engineer participation. 80% consumer product engineer participation.
Rating: Engineers rated positive feedback of 4/5 on average:
- - Incaresed emothay with mousers
- - Helped identify opportunities to improve my product
- - Was a good use of my time
Extended and expanded in to 2014.
- “This is easily one of the bet 2 hours spent in my job”
- “Best way of gathering and interacting with real users and gathering unbiased feedback”
- “Gave unique feedback”
- “Seeing users struggle and get frustrated, we actually prioritise and act. It’s invaluable”
Made Engineers proactive!
- Dedicated team
- Executive sponsorship
- User recruiting quality
- Cross-functional participation – IT (laptops and mobile etc) and Marketing etc
Actioning insights – engineers get to understand what UX do and it’s benefits
Measuring emotional engagement
Eye tracking can tell us:
- Time and locations
- Where they looked
- When they lookedEngagement level:
- How long they looked
- How frequently they lookedPros
- Helps your understand what the user is paying attention to
Easy data collection
Can tell us:
- Broad spectrum of emotions
- Ability to collect valence
- Fast and easy set up
- Raw data can be noisy
- Time consuming to analyse data
- Data can be misinterpretedSkin conductivity
- The sensor measures small changes in users skin conductance (GSR). These sweat gland changes are directly related to the sympathetic nervous system activation, also known as the fight or flight response. – if stressed it can be picked up upon etc…When a user gets frustrated, excited, anxious, stressed etc their skin conductance will spike. Easy to interpret. Produces a line graph. Sustained engagement can be tracked.
- Easy to setup
- Minimally intrusive
- Data analysis less complex
- Focus on arousal and stress
- Delayed reaction
- Limited range of emotions
- Cannot measure valiance
Pupils entry is used to measure the real time diameter of the changes in pupil size. His can be used to message emotions
- Mental workloads
- Eye tracker already collects it
- Straightforward analysis
- Focus on arousal/stress
- Highly subject to lighting variability
- Cannot detect valiance.
Uses a simple webcam and software to identify facial expressions people display.
Can detect emotions:
- Not consistent,
People’s expressions vary
Software that can be used to pull together metrics etc:
- iMotions attention tool
- Noldus Research Suite
Good especially if pulling together a few of the tools.
There is also a heart rate monitor measurement.
- 1: Major opportunities to use bio/neurone tricks to understand users emotions in the. Intent of ux.
- 2: Tools are rapidly improving in terms of ease of data collection and analysis.
- 3: Be aware of current limitations and challenges of using this technology.
Try not to make tests last longer than an hour and maybe make them earlier.
Problems with the technology
- Time consuming
- Finding participants
- Costs – hardware/training
- Data analysis
- Clients – misinterpretation, setting expectation, communication/education
- Data integrity/storage
- Validation (qualitative)
- Invasive (on participant)
Tutor opinion of most effective technologies:
- GSR (skin conductance) most accurate
- Heart rate
- Facial analysis (least accurate)
How can we apply the motivations of art, self expression and playfulness to UX and vice versa.
Often in a public spaces, walk up and use system. Playful experience, so the output is artistic and expressive.’Dexier tower’ in Belgium, has a touch screen so users can ‘play the building’. An artistic and playful output for thousand of people.
‘Warholiser’ – upload pic of yourself and it becomes Andy Warholesque image. It was then available on website at a set time for 15 minutes so you can share etc. great way to promote the event.
‘The drum machine’ at Glastonbury.
Users in control
Decided specifically for one person usually. Example: Imogen Heap musician, wearing a dress linked to her Twitter.Gerrerd is working with a ‘bunch of clowns’ contact in a few months for more info.Magic 8 bike. Getting users involved and adding your input,
5 transferable principles
1: create a spectacle (tower is an example). The wilderness ‘downtown?’
On web: Google doodles.
2: Develop intrigue
‘Sounds of the squares’ example. Users go in and use unknown navigation items to find way around.
On web: consistency. Predictability. (Navigation).
3: Engender warmth
On web: fun 404 messages that show emotion.
4: Produce t-shaped interface
Breadth and depth on surplus level and the more time you spend with it the more depth you find.
Example Bjorks album, Biophilia, album and app released with all songs, navigation system, each had their own UI but internal consistencies, you can recreate tracks yourself. The user can learn and be creative.
Another example, the Johnny Cash Project. The user can walk in and have a fab experience, watching vids in various style, then the user can contribute to the interface with their own graphics. Showing it has depth too. Love this!!
5: Allow for frivolity
Light trumpet. Projecting video in clubs. Funny!!
If you can think of someone fun and a reason for it – put it in!
6: Know your audience
7: Preventing errors before they happen.
Block errors rather than designing for recovery.
8: User research.
What is more engaging about reality TV than telling a story.
Things to consider:
- Version control
- Sign off
- Spares and backups
Responsive and adaptive web design
Responsive – client side.
Screen readers (Jaws) are very important and fines are now being put in place in many countries (big teeth!! = big fines). Screen readers are another device that needs to be catered for.
Context of use is important for devices. For example, if using a mobile version then it’s important to think about location, for example, it could be outside in the sun so the interface must be visible etc…
At beginning of project – what’s keep performance indicators – sales, etc. what business needs to achieve then look at what’s working and what’s not working. Opportunity profile – bus and client opinion. Look at what devices are being used currently – which are completing things and which are bouncing out. So can target specific areas/features.
Designing for disabilities
Colorblindness, sight impairment.
Experience inspired innovation: the fourth wave of user centered design
- - Innovation advance is shorter and shorter
- - Resistance to change in he marketplace
- - The art of managing this tensionThe art of managing innovation diagram
Eg: could blockbuster have anticipated Netflix?
- - Listen differently
- - See differently
- - Think differently
- Keep an idea book. Observe life and nature. Things that upset you and cheer you up.
- Eg: watching someone come home with hands full of groceries and opening door with food = creation of boot that can be opened with your foot.
- Look for inspiration outside of your world.
Intersection if UX and innovation
Distribution of resources. We must move some if our resources to UX R&D independent of current product development.
Deep understanding of human behaviour.
- - Ideation and design thinking
- - UX in product management
- - Understanding enabling technologies
- - Lean start movement
- - Field research and ethnology
- - Redefining problem space
Informed design. Working from research and human data.
Shannon Halgren – designing healthcare technologies, motivating users by decreasing cognitive load
- - Sleep deprivation
- - Complicated tech
- - Need for accuracy
- - High risk tasks etcIssues for docs and nurses:
- - Need for speed
- - Frequent interruptions
- - Lots of different people
- - Lots of hand overs
- - Etc
Solve these problems:
Cognitive psychology – Cognitive load – amount of brainpower required to complete a task
- Intrinsic load – how complex a task is
- Extrinsic load – environmental distractions, other thoughts when doing task etc.
- Germane load – using memory from past so when repeated it can be done, and better.
1: Be simple
2: Be helpful
Prevent errors. Be obvious, make obvious and make it ‘dummy proof’
3: Be smart (extrinsic load)
Be a natural extension of the task. Providing right tools, recognise errors or alerts conditions, easy to ignore if needed, difficult to ignore if danger.
4: Be calm (extrinsic load)
Be attractive, use a neutral colour pallet. Brighter colours game more effort to look at over long periods of time. When an alert is required, a brighter colour will stand out a lot more. Save vivid ‘pop out’ colours. Be mindful
Be careful of animation, audio. Avoid causing ‘alarm fatigue’. Only use alarms if really required or they can be ignored.Animation can be grab attention – this can be a bad thing, if numbers need to be read etc.
5: Be consistent (germane load)
- - design,
- - across product line,
- - similar medical devices
- - with user experiences
Use templates and style guides. Document ways your product is going to be consistent.Interview and observer users.
6: Be a team player (germane load)
Recognise we are part of a technology team, our product is used with other companies products.
The user is surrounded by technology and stuff they are required to work with, and unique demands in their work role.
Takea systems engineering perspective.
Avoid local success, global failure.
Consider the other technology used in conjunction with yours, non related technology (smart phone, monitors etc..)
Each technology might have their own design guide:
- Visual alerts
Study competitors, related products and users, only be different if improving global UX in a significant way.
- Design review – minimalism, abbreviations and icon use, consistency
- Cognitive walk through – guided walk throughs,
SIMULATED usability testing – (in realistic context)
- Easy to use, easy interpretation of status,
- Obvious next steps, audio and animation use. Content and walk through is accurate.
- Usable in conjunction with other technology, easy to learn.
- Simulation lab, distraction, real world environment.
- Ambient noise, interruptions, multi tasking (finger or foot tapping while performers task), reading time from wall clock.get them to check on a patient etc…
- With appropriate pre-use training.
Field research, pre-design.