Introduction to user-centric design
process
AguSuur
ABOUTME
User Interface Developer at Axinom
Planning, designing and implementing UI on various
platforms and screen sizes.
...
The Agenda
User centric Design
Principles of usability
What Does a designer do?
A designer creates attractive designs
TheProblem
Designer
Visually striking
Latest tech
Client
Attractive
Cool & Awesome
User
Wants to get things done
TheProblem
Most designers focus on visual appeal.
Good designers focus on the needs of the user.
First impressions are dec...
TheProblem
Visual Designers UX Designers
UCD: Step One
research
STEPONE
Identify the users of your system.
Create user profiles.
There is no average user.
IDENTIFY The USers
STEPONE
Find out common tasks.
Remove obstacles in the UI.
Prioritize the tasks by importance.
IDENTIFY The TASKS
STEPONE
Make time. It helps with agile.
Ends up saving time.
But I Dont have the time!
STEPONE
They assume they know better.
They research demographics rather than goals.
Why dont companies do this?
They don’t...
UCD: Step TWO
TEST and measure
STEPTWO
Observe your customers using the software.
Let them think out loud.
Ask them to carry out critical tasks.
Set up a...
STEPTWO
Effectiveness
Satisfaction
Efficiency
MEASURE USABILITY
STEPTWO
Fix the problems and test again.
Repair and repeat
STEPTWO
They only ask for opinion.
Why dont companies do this?
STEPTWO
Why not try expert review?
Prototyping to the rescue!
I DONT HAVE TIME FOR THIS!
UCD: Step THREE
PROTOTYPE
STEPThree
Let the users complete tasks on paper interface.
Test out different designs quickly.
START WITH paper
DEMO: PAPER PROTOTYPING
ON VIMEO
STEPThree
Pick the best from paper and add detail. Test.
This happens before any code.
MOVE ON TO digital
DEMO: DIGITAL PROTOTYPING
Using pencil
STEPThree
Creating different designs is common.
Why dont companies do this?
What IS USER CENTERED DESIGN?
FOCUS ON PEOPLE, not visuals and latest tech.
Principles of usability
Creating a good experience
STEPThree
A lot of visual processing happens subconsciously.
By understanding how we can cater to it.
HUMAN VISUAL SYSTEM
usability
Certain objects have a universal theme.
For example, buttons in the real world are round.
Design principle: Arch...
usability
Consistency
Symmetry
Other design principles
Alignment
usability
Several principles related to perception
Formulated by German cognitive scientists
The gestalt principle
One exa...
usability
Fitt’s law: The time to find and use an option is less if the option is bigger.
Pareto principle (the 80/20 rule...
usability
Make the layout work with the number of buttons.
Alternatives
usability
Archetypes. Consistency, symmetry, alignment. Gestalt principle of proximity.
In summary
Spend more time making ...
QUESTIONS
ANDANSWERS
Resources
Introduction to user-centric design process
Introduction to user-centric design process
Introduction to user-centric design process
Introduction to user-centric design process
Introduction to user-centric design process
Introduction to user-centric design process
Introduction to user-centric design process
Introduction to user-centric design process
Introduction to user-centric design process
Introduction to user-centric design process
Introduction to user-centric design process
Upcoming SlideShare
Loading in …5
×

Introduction to user-centric design process

582 views

Published on

Agu Suur @ European Innovationacademy Summer Session 2013

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
582
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • How do you center your design process on the user?What makes a design usable? How can we create usable designs?
  • Ask the audience.
  • There’s demand for attractive design. Most designers feel the need to cater to that demand.Attractive design != good design to people who are actually using it.There needs to be another approach, where the needs of the user are in focus.Does it mean there is no room for visual design? Not at all. Visual design is part of the overall UX.First impressions are important. Most people judge an application based on screenshots.But it visual design should not be emphasized as much. It doesn’t matter as much in the long run.
  • The problem is that there are too many visual designers and very few UX designers. Hopefully by the end of this we have more UX designers.
  • UCD is a three-step process to recovery.Don’t assume, research.
  • Indentify the users of your system and what they want to do with it. Do not assume, do the actual research. Visit them. B2B. What is the environment like.Different groups of people have very different needs. Some of them are power users. There is no such thing as an average user. You are unique.Portraits of each type of customer – make sure the design team understands who they are designing for. Like personas, but based on research, not assumption.
  • Find out the common tasks the user is trying to accomplish with the software.Prioritize more important tasks and make routes to these tasks as easy as possible.Remove obstacles – clutter in the UI, less important tasks. Will that make other tasks harder to complete! Yes, yes it will. It’s about making trade-offs. It’s impossible to make all tasks easy. That’s why research is important to make sure you are focusing on the right goals.
  • It takes time, but quick iteration in Agile development requires you to know what to improve upon. By focusing on users and their tasks, everyone on the team knows where to concetrate their efforts.
  • Companies don’t do research because they assume they know what’s best for customers.When they do research, it’s about demographics rather than understanding people’s goals and motivation.And when they do research, they do not do it early enough or often enough. It needs to be a continuous process.
  • You need to make sure that your designs work the way people expect.Initial opinions are deceiving.If you want to know what the problems are, you need to get people to use it.
  • Ask your customers to use the software and watch them as they work. Notice where they get stuck and experience problems.Ask them to carry out critical tasks.Let them think out loud so you know which parts are confusing them. It’s live commentary on the usability of the product.
  • Effectiveness – how many people can complete the task successfully. If the design is easy to use, more people can achieve the goals.Efficiency – How long do people take to complete the task. If the design is easy to use, people will be able to achieve their goals quickly.Satisfaction – How do people feel about the design. There is no point having a design that people can use effectively and efficiently if they don’t like it.
  • After you run your tests, you find problems with your design. You fix the problems and you need to test the system again.
  • A lot of companies do carry out research on their products, but they only ask opinions. Bias, vista. That’s not enough. It’s not only what people say, it’s what they do. Focus groups won’t help you find problems with the product. This is why you need usability tests, and why you need to measure usability.
  • There are other techniques besides usability testing such as expert review. A usability expert examines the design and compares it against a set of recognized design principles. The reviewer does not ask users to evaluate the system, but instead tries to get into the mind of the user. It’s a valuable technique but it’s never a replacement for user testing.
  • Prototyping is the creation of either digital or physical mockups of software to enable quick iteration and usability testing. Writing code takes time. Prototyping enables quicker iteration and usability in a distinctive design phase before any code is written.
  • Show users a paper interface and let them complete tasks with it. Users press „buttons“ and choose options as if it’s a real system. You run usability tests on paper prototypes.The secret to good design is to sketch out lots of different designs and test them. You then take the best from each one and create a new set of designs.
  • Prototyping is the creation of either digital or physical mockups of software to enable quick iteration and usability testing. Writing code takes time. Prototyping enables quicker iteration and usability in a distinctive design phase before any code is written.
  • Next you move on to electronic prototypes. These look more realistic but are still simulations.Once the prototype is tested, you can share it with the designer and the developer. They can start work in parallel.
  • Prototyping is the creation of either digital or physical mockups of software to enable quick iteration and usability testing. Writing code takes time. Prototyping enables quicker iteration and usability in a distinctive design phase before any code is written.
  • They do, kinda. Creating different designs is already common. But the decision is often to the management and not the users.
  • User centered design focuses on the people who use products and web sites – not visual design or the latest technology.
  • We talked about expert review where the expert compares the software to usability principles. Can we bypass the expert by learning the principles? Yes, yes we can. Well, kinda.Learning the principles does not negate the need for expert review and usability testing, but you can avoid making some easy mistakes.
  • There are multiple levels of processing to the human visual system. Most of that happens subconsiously and quick, without us noticing.This subconscious behavior can be overridden with conscious behavior. E.g. Holding your breath. However that behavior requires effort - thinking about the problem.By learning the visual system we can create user interfaces that can be used without thinking about them.
  • Here’s an example of subconscious behavior.What do you notice in this picture?There is of course the alignment, we’ll get back to that later. There is also no 13th floor.Look at the label for the ground floor. The paint has worn off, which means it’s been pressed repeatedly, probably hundreds of times a day, because it resembles a button. The first reaction upon seeing the label is to press it. Only upon closer examination can the real button be found. So what’s exactly wrong with it?
  • All buttons in real life are round. This does not necessarily apply to software, where we are used with rectangular buttons.
  • Certain objects have a universal theme to how they look and behave. We expect them to comform to these archetypes.
  • We don’t have alignment between the 2 bottom rows. It looks out of place.Look at the ground floor label. It has no consistency with the buttons above and below it. It’s in a line of buttons which leads you to believe that it itself is a button.There are actually many design principles that contribute to the confusion with this elevator panel. Let me show you another one.
  • „Gestalt“ is german for „form“ or „structure“Formulated by German cognitive scientists in the 1920s as they were studying the idea of perception and the human visual system.Proximity: Things grouped spatially are associated together by our visual system.
  • The elevator panel completely ignores the gestalt principle of proximity. Let me show you. Suppose I restrict the picture to this portion. (next)
  • Now, the question is, does the white elevator button in the middle go to the 4th floor or the 5th floor? Looking at it at this restricted context, you can’t tell. There is no grouping to tip you. The button is equal distance from the left and right label.
  • Only if you see the whole row of button can you figure out which button goes with which label. Imagine what happens to a blind person. The labels have braille numbers.
  • But if you read a braille number on this label, how can a blind person tell which button is the correct one – the left or the right? They couldn’t, not without feeling the entire row of buttons.This is an example of bad design. But what about examples of good design?
  • Here is another example of an elevator panel. Notice that the labels are not circular. Instead they have curved indentation to which the button fits. They don’t violate the principle of archetypes.They do satisy the gestalt principle of proximity – objects associated with one another are grouped together. A blind person would have absolutely no trouble in this elevator. A normal person would also very quickly see which button is correct.There’s another principle in use here. Try to notice another element of good design.The floors used most often have larger buttons and display additional informationFitt’s law: The time to find and use an option is less if the option is bigger. People going to the casino or spa can find their destination more quickly.So far we’ve talked about elevator design. But the same principles apply for software. Ready for an example of bad design?
  • It’s a bit of a mess. It has a 3x6 grid of identically sized rectangular buttons with seemingly random icons on them.What’s wrong with it? It’s not the rectangular buttons – software uses them. And we don’t have labels because we can directly put something on the button.But it still looks awful for some reason.
  • Fitt’s law clearly being violated hereIt’s likely that 4 or 5 buttons are used for 80% of the actionsThe time required to locate and use an option increases as the number of options increases. This violaton is very common. (VS demo)This is excusable in the users are highly trained and use the software for hours a day. But it’s not the best option because it’s still a steep learning curve. The effect of Hick’s law is worst when the user is becoming familiar with the software.Why is it violated so much? UI designers don’t consider the impact of long lists and trees of options. When a developer finishes a feature, he just hangs it off a long list or puts it in a block of buttons somewhere.
  • Don’t be happy with just adding a button. You should be actively finding ways to increase productivity for the user. Sometimes this doesn’t always work.
  • Looking at this grid of buttons, how can we rework the layout to be more usable?Pareto principle says that probably 4-5 buttons are used more than the other buttons combined. One way is to make those 4-5 buttons stand out, separating the other buttons into the „advanced“ area. So the options that are used rarely are hidden. The windows team uses this approach in various places. (display settings, open with)
  • The common buttons are always seen. The user pays a small penalty via an extra click to find the lesser used buttons.This will be more than made up for by faster access to commonly used buttons.It’s possible that one button will be used a lot more than the other buttons. It’s importance is higher relative to the other buttons. If so than Fitt’s law suggests that it ought to be bigger and more prominent than the other buttons.I should not that these various laws are actually guidelines. Nothing specifies how many buttons exactly you have to have etc.
  • SummaryWe spend too much time making things easier for ourselves. We should invest more time in the users. Because that’s what it is – an investment.
  • Introduction to user-centric design process

    1. 1. Introduction to user-centric design process AguSuur
    2. 2. ABOUTME User Interface Developer at Axinom Planning, designing and implementing UI on various platforms and screen sizes. AguSuur
    3. 3. The Agenda User centric Design Principles of usability
    4. 4. What Does a designer do? A designer creates attractive designs
    5. 5. TheProblem Designer Visually striking Latest tech Client Attractive Cool & Awesome User Wants to get things done
    6. 6. TheProblem Most designers focus on visual appeal. Good designers focus on the needs of the user. First impressions are deceiving.
    7. 7. TheProblem Visual Designers UX Designers
    8. 8. UCD: Step One research
    9. 9. STEPONE Identify the users of your system. Create user profiles. There is no average user. IDENTIFY The USers
    10. 10. STEPONE Find out common tasks. Remove obstacles in the UI. Prioritize the tasks by importance. IDENTIFY The TASKS
    11. 11. STEPONE Make time. It helps with agile. Ends up saving time. But I Dont have the time!
    12. 12. STEPONE They assume they know better. They research demographics rather than goals. Why dont companies do this? They don’t do it early and often enough.
    13. 13. UCD: Step TWO TEST and measure
    14. 14. STEPTWO Observe your customers using the software. Let them think out loud. Ask them to carry out critical tasks. Set up a usability test
    15. 15. STEPTWO Effectiveness Satisfaction Efficiency MEASURE USABILITY
    16. 16. STEPTWO Fix the problems and test again. Repair and repeat
    17. 17. STEPTWO They only ask for opinion. Why dont companies do this?
    18. 18. STEPTWO Why not try expert review? Prototyping to the rescue! I DONT HAVE TIME FOR THIS!
    19. 19. UCD: Step THREE PROTOTYPE
    20. 20. STEPThree Let the users complete tasks on paper interface. Test out different designs quickly. START WITH paper
    21. 21. DEMO: PAPER PROTOTYPING ON VIMEO
    22. 22. STEPThree Pick the best from paper and add detail. Test. This happens before any code. MOVE ON TO digital
    23. 23. DEMO: DIGITAL PROTOTYPING Using pencil
    24. 24. STEPThree Creating different designs is common. Why dont companies do this?
    25. 25. What IS USER CENTERED DESIGN? FOCUS ON PEOPLE, not visuals and latest tech.
    26. 26. Principles of usability Creating a good experience
    27. 27. STEPThree A lot of visual processing happens subconsciously. By understanding how we can cater to it. HUMAN VISUAL SYSTEM
    28. 28. usability Certain objects have a universal theme. For example, buttons in the real world are round. Design principle: Archetypes
    29. 29. usability Consistency Symmetry Other design principles Alignment
    30. 30. usability Several principles related to perception Formulated by German cognitive scientists The gestalt principle One example: proximity
    31. 31. usability Fitt’s law: The time to find and use an option is less if the option is bigger. Pareto principle (the 80/20 rule) Principles violated Hick’s law: Adding an option decreases the value of all other options.
    32. 32. usability Make the layout work with the number of buttons. Alternatives
    33. 33. usability Archetypes. Consistency, symmetry, alignment. Gestalt principle of proximity. In summary Spend more time making things easy for the user.
    34. 34. QUESTIONS ANDANSWERS
    35. 35. Resources

    ×