Embed Size (px)
DESCRIPTION
“User Experience” (UX) is so hot right now. Business magazines talk about it, stakeholders want it, people even have job titles containing it. Designers, usability engineers, information architects, psychologists and even anthropologists are all circling, fighting for a piece of the UX pie. But at the end of the day, coders own the user experience. All the drop-shadows in the world don’t mean a thing if they don’t make it into the code. Join Shane Morris - recovering developer, long-time user interface designer and Microsoft User Experience Evangelist – for a discussion of user experience from the developer’s viewpoint. What simple things can developers do to deliver better user experience? If you could only do one thing to improve your application’s user experience, what would it be? What about designers? What do they do? How can they help? How can you work effectively with them? This talk focuses on practical, realistic ways to ensure your next application delivers a great user experience.
Citation preview
Pimp My App
Shane MorrisUser Experience EvangelistMicrosoft Australia
For slides for this presentation:blogs.msdn.com/shanemo
Why am I here?
Developers own the user experience
The final User Experience is determined by...
• What the developers can build in the time available• What the developers know how to build• What the developers can be bothered building• What the developers understands of the User Interface
specification• What User Interface specification there is
So what I want to talk about is...
• What developers can do about UX
“Pimp my App”?
• Changing the surface appearance and behaviour, without changing the underlying structure
User-Centred Design (Methodology)
Contextual Inquiry
Affinity Diagramming
Usability Testing
Personas
Paper Prototyping
Collaborative Design
Heuristic Evaluation
Wireframing
Cognitive Walkthrough
Activity Scenarios
Focus Groups
Card Sorting
Cultural ProbesAnalytics
User Experience Design Process
User Experience Design Process
You are here (mostly)
User Experience Design Process
4 Steps6 Steps
Interaction Design for Developers
http://jcooney.net/archive/2006/10/30/36235.aspx
Interaction Design for Developers
The Blank Canvas
1. List everything you need to show
• Select the right widgets• Check for standards & consistency
1. List everything you need to show
1. List everything you need to show
1. List everything you need to show
2. Map out the workflow
• In what order are people most likely to work?
2. Map out the workflow
1. Load Settings2. URL3. Hosts4. Accept/Reject file
types5. Retrieval Options /
Special6. Running Options7. Save Settings8. Empty/Add/Start
3. Layout the elements
• Left-right, Top-Bottom
3. Layout the elements
3. Layout the elements
1
23
4
5
Last2nd last
3. Layout the elements
4. Check grouping
• Rearrange items if there are more natural groupings.
4. Check grouping
4. Check grouping
Interaction Design
1. List everything you need to show2. Map out the workflow3. Layout the elements4. Check grouping
Presentation Design for Developers
http://elephant-photos.com/images/elephant-painting-2.jpg
1. Remove every unnecessary element
1. Remove every unnecessary element
2. Minimise Variation
2. Minimise Variation
A little bit about colours and fonts
• Use as few different typefaces and sizes as possible
• How many different colours should I use?
How many different colours should I use?• Rate your visual design skills on a scale of 1 to 5:
1No visual design skills
5“Expert”
visual designer
How many different colours should I use?• Rate your visual design skills on a scale of 1 to 5:
1No visual design skills
Use only 1 colour
5“Expert”
visual designer
Use 5 colours
3. Line Stuff up
3. Line Stuff up
Lining text up
Label Textbox
small Big
Alignment – beware unintended relationships
39
Alignment – beware unintended relationships
3. Line Stuff up
4. Space and Size Things Evenly
shane morris 43echo interaction design
Space and Size Things Evenly
4. Space and Size Things Evenly
4. Space and Size Things Evenly - Before
4. Space and Size Things Evenly
5. Indicate Grouping
• Group Boxes
5. Indicate Grouping
• Group Boxes• Similarity
5. Indicate Grouping
• Group Boxes• Similarity• Proximity
5. Indicate Grouping
• Group Boxes• Similarity• Proximity• Alignment
5. Indicate Grouping
• Group Boxes• Similarity• Proximity• AlignmentAnd...• Empty space
5. Indicate Grouping
5. Indicate grouping - Before
5. Indicate Grouping
6. Adjust Visual Weight
How to add visual weight
How to add visual weight
• Colour– Red/Orange colours especially
How to add visual weight
• Colour– Red/Orange colours especially
• Size
How to add visual weight
• Colour– Red/Orange colours especially
• Size• Contrast
– Eg texture– Empty space
How to add visual weight
• Colour– Red/Orange colours especially
• Size• Contrast
– Eg texture– Empty space
• Irregular Shape
How to add visual weight
• Colour– Red/Orange colours especially
• Size• Contrast
– Eg texture– Empty space
• Irregular Shape• Misalignment
How to add visual weight
• Colour– Red/Orange colours especially
• Size• Contrast
– Eg texture– Empty space
• Irregular Shape• Misalignment• 3D
How to add visual weight
• Colour– Red/Orange colours especially
• Size• Contrast
– Eg texture– Empty space
• Irregular Shape• Misalignment• 3D• Movement
6. Adjust Visual Weight
6. Adjust Visual Weight
Recap
Interaction Design
1. List everything you need to show
2. Map out the workflow
3. Layout the elements
4. Check grouping
Recap
Presentation Design
1. Remove every unnecessary element
2. Minimise variation
3. Line stuff up
4. Space and size things evenly
5. Indicate grouping
6. Adjust visual weight
