• Save
Pixel Envy
Upcoming SlideShare
Loading in...5
×
 

Pixel Envy

on

  • 2,004 views

Paper presented at WebDU 2009 in Sydney Australia by Simon Reid.

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

Statistics

Views

Total Views
2,004
Views on SlideShare
1,937
Embed Views
67

Actions

Likes
2
Downloads
0
Comments
0

5 Embeds 67

http://www.simonreid.com.au 47
http://www.linkedin.com 14
http://simonreid.com.au 3
http://www.lmodules.com 2
https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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.
  • @ 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.
  • 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.
  • 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!!!
  • 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 - \"Pixel Envy\"So if 2008 was a line in the sand presentation for me @ webDU that said \"This is what we consider UX\" - this year in 2009 its a walkin in the park where I will take you through my personal UX process.
  • Full resume here: http://www.simonreid.com.au/Introducing-SimonReid.pdf
  • 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 activityIt defines wether someone will re-engage or recommendIt provides a benchmark against which all future experiences are judgesAny many many more things.
  • A User Experience designer essentially views the world from a human-centric perspectiveShow intersecting circles diagramSo 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.
  • 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 PatternsInteraction 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.
  • Repeating aestheticsRepeating behavioursRepeating interactionsRepeating Choreographed areas
  • New Diagram - Show screen, show list pattern, show in-context menu - show aesthetic - show layout etc etc.
  • 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.
  • 1. Establish Your BenchmarkA 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.\"Who or what inspired this initiative?\"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.
  • 2. Establish Your AudienceUsually 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:- \"What do your target demographic eat for breakfast\" or \"What do they drink\" and \"What hobbies do they have\"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
  • 3. Tell me a storyStories 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 memorableThey are succinct - unlike a functional specification that forces you to remember the previous interaction, process or sequence.Everyone can contributeAnd everyone is invited....
  • 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 behavioursThis 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?
  • 5. Thought Process MappingPlot each activity or thought that your user might engage in or must satisfy in your ideal system as a flow diagram.Statments such as \"User must supply a set of login details\" or \"Must accept terms of trade\"
  • 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.
  • 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 behavioursYou have Demographic Research:- This provides a foundation for assumptions & executionYou have a process map/flow- provides logical (to the user) staged of the task at handWireframe- Provides visual cue of how sub process are linked
  • Force FitTake disparate concepts and see how they fit - this can quite often provide some very unexpected but innovative solutions to interactions & designOne 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.
  • Look outside the BoxBroaden 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.
  • Ask QuestionsSounds 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:\"because thats the way we did it before\" 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!!!
  • Get On-SiteView the environment the system/site will be used inCouple 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.
  • Watch PeopleI 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.
  • 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.
  • 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 \"Pixel Envy\"

Pixel Envy Pixel Envy Presentation Transcript

  • PIXEL ENVY The digital art of pencil & paper simon reid - user experience consultant simonreid.com.au
  • 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.
  • 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.
  • 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.
  • 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!!!
  • 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.
  • A BIT ABOUT ME • History • Past Projects • Current and Future
  • 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.
  • 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.
  • 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.
  • LAYOUT “Proximity and similarity connote relationship”
  • PATTERNS “we are all creatures of habit” Repeating aesthetics Repeating behaviours Repeating interactions Repeating Choreographed areas
  • COMPONENTS “affordance refers to a physical property of something that influences how it can be used”
  • AESTHETICS “Aesthetics is commonly perceived as the study of sensory or sensori-emotional values, sometimes called judgments of sentiment and taste”
  • LAYOUT, PATTERNS, COMPONENTS, AESTHETIC New Diagram - Show screen, show list pattern, show in-context menu - show aesthetic - show layout etc etc.
  • 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.
  • THE 7 STEP PROGRAM
  • 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.
  • 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
  • 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....
  • 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?
  • 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;
  • 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.
  • 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
  • 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.
  • 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.
  • 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!!!
  • 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.
  • 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.
  • SKETCH, SKETCH, SKETCH...
  • 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.
  • 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;