Paper presented at WebDU 2009 in Sydney Australia by Simon Reid. Discusses User Experience design and the early phases of visual design for software.

1. PIXEL ENVY
The digital art of pencil & paper
simon reid - user experience consultant
simonreid.com.au

2. WHAT A DIFFERENCE A YEAR
MAKES
OK, so what a difference a year makes!!!
12 months ago at this conference I had the role of Senior UX Consultant working with Adobe.
The main objective was to bestow on the market the value of Flash & Flex & RIA more broadly in delivering a positive and engaging end user experience.

3. LAST YEAR
@ WebDU I was presenting & discussing with delegates the incredible emergence of UX as a discipline over the previous 6 months. But I was also still faced with
educating the market on what UX is - the difference between the discipline of creating a user experience and what that experience delivers at the end of the
initiative.

4. 12 MONTHS ON
Well, we're 12 months on.
I'm now head of my own consulting business that is still involved in educating and coaching organisations through the UX process, but this year @ webDU I didnt
want to talk to you about the discipline - but more the mechanics of what I go through to create the objects required to build an end user experience.

5. MORE SPEED, LESS CLICKS
Throughout last year I attended numerous conferences and events both formal and informal where I would be coached on how to push more pixel per hour than
the next designer.
Make your pixel impact bigger - make your pixels last longer...
Tips and tricks to make your pixels more attractive and to make your design shine - because you shed less clicks with less apps, with more speed than ever
before...And everyone was like YEAH!! Cool!
The whole shebang was about where should the logo go, and does my button look big in this - colour!!!

6. THIS YEAR - LET’S BE
PRACTICAL
So this year at webDU I wanted to give some practical tips for trying to not only improve your end user experiences but to expose to you a great danger within the
RIA community - quot;Pixel Envyquot;
Show a pretty UI
So if 2008 was a line in the sand presentation for me @ webDU that said quot;This is what we consider UXquot; - this year in 2009 its a walkin in the park where I will take
you through my personal UX process.

7. A BIT ABOUT ME
• History
• Past Projects
• Current and Future

8. JUST SET THE CONTEXT
• Tangible and intangible values
• Defines re-engagement &/or recommendations
• Benchmark for future experience
Just to set the context - What is UX....(for those who had a few too many at the code wars event last night and have stumbled into the wrong session and whose
legs still dont work!!) - Its a users experience.
Its a set of tangible and intangible values a user derives from engaging in a task or activity
It defines wether someone will re-engage or recommend
It provides a benchmark against which all future experiences are judges
Any many many more things.

9. THE WORLD FROM A HUMAN
CENTRIC PERSPECTIVE
Emotional
Business
Design Led People
Innovation
Process
Technology
Functional
A User Experience designer essentially views the world from a human-centric perspective
Show intersecting circles diagram
So when we talk about defining and designing a users experience in relation to applications design it takes in a lot more that the simple Aesthetics of the user
views.

10. 4 PILLARS OF UX
From my perspective in designing a user experience, I use a simple set of four key pillars:
An experience has a layout.
A Layout has a set of Interaction Patterns
Interaction Patterns have components.
And components have aesthetics....which have layout, which have patterns, which have components etc etc.
For all these key pillars there are influences. Some stronger than others for each of the pillars.
New Diagram - Layout, Patterns, Components, Aesthetic - bordered by Branding, Psychology, Demographics, Positioning, Timing/Seasonality, channels, etc.

11. LAYOUT
“Proximity and similarity
connote relationship”

12. PATTERNS
“we are all creatures of
habit”
Repeating aesthetics
Repeating behaviours
Repeating interactions
Repeating Choreographed areas

13. COMPONENTS
“affordance refers to a physical
property of something that
influences how it can be used”

14. AESTHETICS
“Aesthetics is commonly perceived as the study of sensory or
sensori-emotional values, sometimes called judgments of
sentiment and taste”

15. LAYOUT, PATTERNS, COMPONENTS, AESTHETIC
New Diagram - Show screen, show list pattern, show in-context menu - show aesthetic - show layout etc etc.

16. LEARN TO WALK EVERY PROJECT
One of the fundamental mistakes that a designer makes is to assume that they know the users preferences on any of those four key pillars. I always recommend
learning to walk on every project.
Sure, experience plays an enormous part in designing compelling and engaging experiences, but demographics wants and needs change over time. What a mid-
teen considered cool 5 years ago is definitely not what would be considered cool by the same age demographic now.

17. THE 7 STEP PROGRAM

18. ESTABLISH YOUR BENCHMARK
1. Establish Your Benchmark
A client has usually been encourages to improve the experience...and very often they really dont know what that means - beyond a different colour and bigger
icons.
- Find out what they feel will be achieved by engaging & defining and designing from users perspective.
quot;Who or what inspired this initiative?quot;
BEWARE PIXEL ENVY!!!!
If the expectation is simply aesthetic then a client is usually disengaged from the process until you get to pixel pushing and the engagement can become nigh on
impossible to achieve a positive result.

19. ESTABLISH YOUR AUDIENCE
2. Establish Your Audience
Usually quite a simple one to define, but the devil is in the detail...
- engage the clients marketing or branding team - they wont look at you strangely when you ask:
- quot;What do your target demographic eat for breakfastquot; or quot;What do they drinkquot; and quot;What hobbies do they havequot;
The answers to all these questions provide invaluable insight for a designer as to what triggers certain emotional responses in their target users.
And that is the absolute nirvana for UX - illiciting the appropriate emotional response so that the user has his/her expectations exceeded and either re-uses the
service/product OR recommends to their network.
An Aside - INSIGHTS ARE THE FUEL FOR UX DESIGN

20. TELL ME A STORY...
3. Tell me a story
Stories facilitate inclusive thinking - anyone can challenge a story - give an opinion or offer an alternative path.
Persona Development - or telling a story through an end users eyes - are critical when defining a users experience.
They are memorable
They are succinct - unlike a functional specification that forces you to remember the previous interaction, process or sequence.
Everyone can contribute
And everyone is invited....

21. NEVER LET THE TRUTH GET IN
THE WAY OF A GOOD STORY
4. Never let the truth get in the way of a good yarn!!
Check your persona stories against your knowledge of the target demographic and their behaviours
This can be as comprehensive as your budget allows, but it is critical that you at least attempt to match likely behaviour against your story.
Ask yourself if you really understand your target - even if you think you do, tell them the story and ask them what their take would be, would they use the approach
and behaviour that you have outlined?

22. THOUGHT PROCESS MAP
5. Thought Process Mapping
Plot each activity or thought that your user might engage in or must satisfy in your ideal system as a flow diagram.
Statments such as quot;User must supply a set of login detailsquot; or quot;Must accept terms of tradequot;

23. DRAW ME A PICTURE...
6. Draw me a picture...
You knew I was getting to the pixel stuff right!! But this is not pushing pixels...just yet.
Roughly sketch a wireframe - a quick image snapshot of what the story + process map would resolve like....there doesnt need to be any reverence paid to
prominance, focus or hierarchy.
Wireframe sketches are used to simply have all aspects of the workflow detailed on one or more visuals.

24. MAGIC HAPPENS!!
7. Magic Happens!!!
OK - now you have everything you need to innovate a compelling interaction model or a specific interaction.....
You have a story:
- This provides you with a users motivations, inspiration and behaviours
You have Demographic Research:
- This provides a foundation for assumptions & execution
You have a process map/flow
- provides logical (to the user) staged of the task at hand
Wireframe
- Provides visual cue of how sub process are linked

25. FORCE FIT
Force Fit
Take disparate concepts and see how they fit - this can quite often provide some very unexpected but innovative solutions to interactions & design
One example of this is to just get any magazine (with lots of pictures!!) and on every page force an idea...it could be the layout, it could be a component, it could
be the framing or the way that an area of the page is emphasized.

26. LOOK OUTSIDE THE BOX
Look outside the Box
Broaden your knowledge beyond competitive websites & applications, flex & flash.
Look at industrial design solutions where big physical buttons, sliders, keys, are the interaction objects and where feedback isnt necessarily given on an lcd or
lighting system.

27. ASK QUESTIONS...
Ask Questions
Sounds really silly but you simply must ask questions. Challenge notions and propose other ideas.
The number of times I have asked a question and the response has been:
quot;because thats the way we did it beforequot; is the response is astounding.
Coach your client through challenging their methodology - there is a reason I assume you are rebuilding or redesigning their system!!!

28. GET ON-SITE
Get On-Site
View the environment the system/site will be used in
Couple be an office but it might be a darkened studio...the location will give you some insights for visual execution.
An example I use if designing for industrial plant use. I produced some software front ends for Argyle Diamond mine...the environment was dusty, dirty and dimly
lit. The operators were often using the system with gloves and an industrial strength pointing device which had limited finite range of motion...these insights gave
me excellent fodder for the visual and functional design.

29. WATCH PEOPLE
Watch People
I once asked when building an eCommerce solution if any of the team had any retail sales experience, experience with putting product on shelves or in processing
a purchase through a till.
Very few had so I organised some instore training at a Target supermarket.
This gave great insight into inventory management, motivations for purchase, point of sale display and spawned some wonderful lateral thinking prior to visual
design.

30. SKETCH, SKETCH, SKETCH...

31. THE MAIN REASON...
Sketch, sketch sketch...
At the end of it all, the stuff we build is for a visual medium.
Any idea, concept or thought should be captured in sketching.
The rapid sketching of an interaction or layout will invariably highlight 'show-stoppers' early and avoid the lengthy and often costly changes further into the visual
design process.

32. PIXEL ENVY!!
So, my aim in this session was to provide some practical tips and thinking that I use in my process for innovation, defining a user experience or designing a user
interface.
I also said that I would share why I believe that many online user experiences are sub-optimal...
One Reason - Thinking that a users experience is all about how pretty your pixels are...the focus on the cover and not on the content....The battle to make your
pixels smarter, brighter, faster more 'punchy' than the competition...
A condition known as quot;Pixel Envyquot;