Introduction to user-centric design process
•
2 likes•737 views
Agu Suur @ European Innovationacademy Summer Session 2013
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Introduction to user-centric design process
Similar to Introduction to user-centric design process (20)
More from European Innovation Academy
More from European Innovation Academy (20)
Recently uploaded
Recently uploaded (20)
Introduction to user-centric design process
- 1. Introduction to user-centric design process AguSuur
- 2. ABOUTME User Interface Developer at Axinom Planning, designing and implementing UI on various platforms and screen sizes. AguSuur
- 3. The Agenda User centric Design Principles of usability
- 4. What Does a designer do? A designer creates attractive designs
- 5. TheProblem Designer Visually striking Latest tech Client Attractive Cool & Awesome User Wants to get things done
- 6. TheProblem Most designers focus on visual appeal. Good designers focus on the needs of the user. First impressions are deceiving.
- 7. TheProblem Visual Designers UX Designers
- 9. STEPONE Identify the users of your system. Create user profiles. There is no average user. IDENTIFY The USers
- 10. STEPONE Find out common tasks. Remove obstacles in the UI. Prioritize the tasks by importance. IDENTIFY The TASKS
- 11. STEPONE Make time. It helps with agile. Ends up saving time. But I Dont have the time!
- 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. UCD: Step TWO TEST and measure
- 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
- 16. STEPTWO Fix the problems and test again. Repair and repeat
- 17. STEPTWO They only ask for opinion. Why dont companies do this?
- 18. STEPTWO Why not try expert review? Prototyping to the rescue! I DONT HAVE TIME FOR THIS!
- 20. STEPThree Let the users complete tasks on paper interface. Test out different designs quickly. START WITH paper
- 21. DEMO: PAPER PROTOTYPING ON VIMEO
- 22. STEPThree Pick the best from paper and add detail. Test. This happens before any code. MOVE ON TO digital
- 23. DEMO: DIGITAL PROTOTYPING Using pencil
- 24. STEPThree Creating different designs is common. Why dont companies do this?
- 25. What IS USER CENTERED DESIGN? FOCUS ON PEOPLE, not visuals and latest tech.
- 26. Principles of usability Creating a good experience
- 27. STEPThree A lot of visual processing happens subconsciously. By understanding how we can cater to it. HUMAN VISUAL SYSTEM
- 30. usability Certain objects have a universal theme. For example, buttons in the real world are round. Design principle: Archetypes
- 33. usability Several principles related to perception Formulated by German cognitive scientists The gestalt principle One example: proximity
- 40. 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.
- 41. usability Make the layout work with the number of buttons. Alternatives
- 44. usability Archetypes. Consistency, symmetry, alignment. Gestalt principle of proximity. In summary Spend more time making things easy for the user.
- 46. Resources
Editor's Notes
- 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.