UX and VIMM @ LTUX (jul18)
•Télécharger en tant que PPTX, PDF•
2 j'aime•1,051 vues
The VIMM model provides a framework to optimize user experience across visual, intellectual, memory, and motor loads. It suggests minimizing each type of load, such as using visual hierarchy and emphasis to guide the eye and simplify decision-making. Following the model can improve usability by matching screen flows to tasks, using intuitive grouping and labeling, consistent controls, recognition over recall, and reducing unnecessary interactions.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à UX and VIMM @ LTUX (jul18)
Similaire à UX and VIMM @ LTUX (jul18) (20)
Dernier
Dernier (20)
UX and VIMM @ LTUX (jul18)
- 1. Unleash the Power of VIMM LadiesthatUX– Fort Worth July2018
- 2. V I M M Visual Intellect Motor Mental
- 3. Agenda 1 User Experience 2 VIMM Model 3 Visual 5 Motor 4 Intellect 6 Mental
- 5. User Experience PLACE WEB APP OR SITE SCREENSHOT HERE
- 6. User Experience PLACE TABLET SCREENSHOT HERE PLACE WEB APP OR SITE SCREENSHOT HERE
- 7. USER EXPERIENCE (UX) A holistic, multifaceted outcome resulting from an end-user’s interaction with the company, its services and its products
- 8. Noproductisanisland.Aproductismorethan theproduct.Itisacohesive,integratedsetof experiences. Don Norman Co-founder Nielsen Norman Group IDEO Fellow, IDEO First User Experience Architect, Apple
- 9. V I M M Visual Intellect Motor Mental
- 10. Visual Load VIMM Model Motor LoadMemory LoadIntellectual Load VIMM is an easy mnemonic to remember the potential ways interfaces can make users think too much or work too hard. https://www.hansoninc.com/how-the-vimm-model-can-improve-usability-of-your-site-or-application/
- 11. Visual V I M M
- 12. Visual Load Optimize visual comprehension • Use visual hierarchy to guide the user’s eye • Emphasize what is important; eliminate or diminish everything else • Make content grouping and labels intuitive • Deliver thoughtful and purposeful use of color • Be meticulous with alignment and text formatting
- 14. What did you notice?
- 17. Similarity Continuity Gestalt Laws of Perception ClosureProximity Items closer together are perceived as related Items that are similar are perceived as related We have a natural tendency to make sense of the world around us by finding patterns or grouping. Items that are perceived as a whole if they are co-linear or follow a direction. Unfinished or partially obscured items can be perceived as whole or complete
- 19. Optimize visual comprehension: • Use visual hierarchy to guide the user’s eye • Emphasize what is important; eliminate or diminish everything else • Make content grouping and labels intuitive • Deliver thoughtful and purposeful use of color • Be meticulous with alignment and text formatting Visual Load
- 20. Intellect V I M M
- 21. Simplify decision making • Don’t make users think • Provide previews and easy escape • Speak the users’ language, eliminate jargon • Ensure controls function consistently • Provide good system feedback Intellect Load
- 22. Simplify decision making Source: https://www.interaction-design.org/literature/article/bad-design-vs-good-design-5-examples-we-can-learn-frombad-design-vs-good-design-5-examples-we-can-learn-from-130706 Don’t make users think
- 23. Don’t make users think Simplify decision making
- 24. Memory V I M M
- 25. Memory Load Limit use of memory resources • Design for recognition versus recall • Provide clear navigational feedback • Increase response time • Make options visible • Provide sensible defaults Reference: https://www.nngroup.com/articles/recognition-and-recall/
- 26. 3 8 4 8 5 9 0 1 7 3 Memorize these numbers Short-Term Memory
- 27. Short-term memory has 3 key aspects: Short-Term Memory • Limited capacity • Only about 7 items can be stored at a time • Limited duration • Storage is fragile and information can be lost with distraction or passage of time • Encoding • Paying attention and processing information
- 28. 3 8 4 8 5 9 0 1 7 3 How well did you remember? Short-Term Memory
- 29. Recognition Over Recall What’s on the head of a penny?
- 30. Recognition Over Recall • Lincoln’s right profile • In God We Trust • Liberty • Year
- 31. Which one is the penny? Recognition Over Recall
- 32. 1. Did Toni Morrison write Beloved? 2. Who wrote Beloved? Recognition Over Recall
- 33. Motor V I M M
- 34. Minimize movement & interactions • Avoid switching input devices • Use short distances and large targets (Fitt’s Law) • Optimize for the input devise • Reduce scrolling, multiple screens and steps Motor Load
- 35. Check Deposit
- 36. Motor Load Steps for depositing checks: 1. Enter bank card 2. Enter PIN 3. Select account type 4. Select action 5. Enter check 6. Transaction Ends 7. Repeat for each check!!!
- 37. ©2018 SABRE GLBL INC. ALL RIGHTS RESERVED. Check Deposit
- 39. Visual Optimize visual comprehension by… • Matching screen flow to task flow • Good grouping and labeling • Careful use of color Intellect Simplify decision making by… • Providing pre-views and easy escapes • Using controls consistently • Providing good system feedback Memory Conserve memory resources by… • Making options visible • Designing for recognition vs. recall • Providing defaults Motor Minimize movement time & interactions by… • Using short distances and large targets • Optimizing for the input device • Using natural response mappings • Reducing scrolling, windows and steps
- 40. UnleashthePowerof VIMMto improve userexperience by Kris Courtney @kmcourrtney01 Q&A
Notes de l'éditeur
- Welcome everyone
- VIMM is a mnemonic to help us remember the human effort we’re placing on users. It stands for Visual, Intellect, Motor and Mental. (I need to briefly introduce HERE VIMM because I want them shouting it )
- We’ll start with a discussion of UX and the VIMM Model. Then I’ll explain the different components that make up the model. When you leave, you’ll have a new tool for improving the user experience of your products.
- Often when people talk of UX they speak of it in terms of an interface – website or application. But UX encompasses more than that. (NEXT multi device)
- User Experience can happen on desktops, smartphones or tablets – or all 3. When you have a multi-channel product, you want to design for the devices, the context of use and a consistent experience across all of the devices or channels. Still, user experience encompasses more than that. The definition of user experience (NEXT UX def)
- (READ SLIDE) User experience is more than the look and feel of the interface – although the UI is an important part of it. UX considers the entire experience the user has. Let’s take LTUX as an example. I want your experience for the next hour to be perfect……. I want to inspire you. I want you to leave this room shouting VIMM, VIMM, VIMM!!! BUT Ladies that UX for you…the end user is more than the hour we have together. It’s the totality of the experience from …. Signing up, driving to the location, making your way to the meeting place, people that you’ve meet, the conversations you have. (NEXT – Don Norman quote)
- Don Norman is the 1st official user experience professional. He was the first hold the job title UX Architect and that was in 1995 at Apple Don has said (Read slide) So, how does VIMM help you with this/UX/UX of your product
- This simple mnemonic works from planning to evaluating the full user experience. VIMM helps you understand the underlining mechanisms of how people process information and how they perceive our products When I learned about VIMM there were cell phones (I have to call them that because I don’t think they were very smart yet) cell phones weren’t as ubiquitous as they are today. Technology has changed a lot since then, Augmented reality, VR, voice interfaces, chatbots, wearables, but VIMM still applies.
- That’s what makes the VIMM model so powerful. It’s is an easy mnemonic to remember the potential ways interfaces – of any kind - can make users think too much or work too hard. Reducing the visual, intellectual, memory and motor ENERGY your users EXPEND are VITAL COMPONENTS OF DELIVERING A SUCCESSFUL USER EXPERIENCE (NEXT – Visual)
- Let’s talk about ways you can optimize visual comprehension
- Your users *first* discover what content and functions can be performed by visually inspecting your product. User experience and learnability are improved when the user can easily and intuitively see what’s available to them. (Read) There’s a test in usability called the “5-second test”. It works exactly as it sounds. (Next 5-second) Look for Visibility http://architectingusability.com/2012/06/28/donald-normans-design-principles-for-usability/ .
- Where were your eyes drawn?
- (NEXT) INTRO TO LING - Too much and poorly planned visuals negatively impacts the users visual understanding of the product and what is offered. It can make your users indecisive, confused or frustrated. Even if they are interested in using your product, they may be unsure of what to do or act on next
- Here’s an extreme example of visual overload. Use visual hierarchy to guide the user’s eye Emphasize what is important; eliminate or diminish everything else Make content grouping and labels intuitive Deliver thoughtful and purposeful use of color Be meticulous with alignment and text formatting Based on the homepage, the most important action Ling wants you to take is to, “Play Now!”. I think it might be to win a mug. Anyway, the big play now is not clickable. Neither is the vibrant “click here” text. The main menu – which should act as a visual cue for the organization of the site - is difficult to find. In fact, it has the lowest visual prominence on the page. It’s a tame tan with black lettering. The labels are right aligned which negatively impacts ease of scanning – not that left aligning the labels will eliminate visual the evils of this site. NEXT – What are some principles that can help bring visual order to Ling’s site?
- There are a number of laws/principles of PERCEPTION we can take from Gestalt psychology that can be helpful to INCREASE VISUAL COMPREHENSION. (READ subtitle) These (proximity, similarity, continuity and closure) are particularly helpful to understanding ways to minimize visual load. (READ examples on slide) (Note to self – many more principles.) (next) My next example applies these principles to increase understanding
- LUMA Workplace uses Gestalt principles to enhance visual order and understanding. Items that are visually related are also LOGICALLY related. Proximity helps us see the different columns for – Looking, Understanding and Making. IN Addition the use of proximity groups the different types of methods in each category. Similarity of color further strengthens the relationship. They use color and the icons throughout the sight for users to better understand the methods they are accessing. Text formatting is applied with purpose. Methods are in black, title case. Sub-categories are in all uppercase with the font color corresponding to the method category. similarity, continuity, closure (NEXT – Recap Visual)
- CONSIDER THIS AS AN ALTERNATIVE WAY TO RECAP EACH SECTION!!!!!!!!!!!!!!!!!!! Again, these are ways to optimize visual comprehension in your products. Are there any questions before we talk about Intellect?
- Intellect is about simplify decision making for your users as away to improve user experience.
- Don’t make me think is a great, practical book that examines lifting the intellectual burden interfaces can place on users.
- This is much clearer. You barely need to read to understand if it’s safe to park. I would suggest a step further to reduce Intellectual Load and mark the actual date and time and message, “Park here free until 7 am”
- With memory, you want to inspect your product for anywhere you are asking users to unnecessarily access their memory.
- Read slide 2 – Your users should always know where they are, where they can go and how to get back 3 – working memory is easily distracted. Avoid having your users forget what they are doing because of slow load time 4 – let them know what their choices are Human memory has limits and it’s fallible. It’s important to understand and design for how people store information in their minds so that they can make decisions quickly and accurately. You want to help your users make the right decisions that help them achieve their goals. (NEXT - #s) to demonstrate short term memory I’m going to show some #’s that I’d like you to memorize.
- Give audience 15 seconds to memorize
- NEXT – Penny question – recognition over recall We’ve all seen pennies before. Do you remember what the front looks like?
- It’s a little tough. This is recall. Compare this exercise to recognition (NEXT penny out of coins)
- Big difference, right! This is an example of recognition. It’s much easier than recall. The big difference between the two is the amount of cues that help memory retrieval. Recall involves fewer cues. Consider the difference between these 2 questions:
- The 1st question involves recognition. You simply have to recognize if the information is correct. Conversely, if I asked (read #2) you would use the process of recall to retrieve the right answer from your memory. The cues in recognition spread activation related to information in the memory. The more cues your interface has for the user, the more likely the user will make the proper choice. It’s the same reason multiple choice questions are easier than open questions.
- Minimize movement & interactions
- And that’s the VIMM Model. 4 letters, easy to remember. Try this****** Remembering VIMM helps you make good choices about the human effort or work needed for a user to complete a goal/task What’s great about VIMM is once you know it and internalize it, it gives you a new strategic knowledge of how to approach the user experience. This isn’t the type of mastery that Malcolm Gladwell suggests in his book Outliers that takes 10,000 hours of “deliberate practice”. Designers, developers, product managers who take into account people’s visual, intellectual, memory and motor capabilities (and limitations) are better at planning and designing products that match human cognition…and ultimately a great user experience. OLD STUFF FROM DELTED SLIDE Designers/dev/product who take into account people’s abilities are better at planning and designing products that match human cognition….and ultimately a great user experience. Internalize the guidelines. If you memorize them, internalize them and apply them AND VIMM GIVES YOU A LEG UP Skills/crafts are hard – takes years, Malcolm Gladwell sites 10K hours of deliberative practice to master skill Memorize a bunch of facts also hard, there are new things you need to know, that’s a lot of work and how do you apply them Heuristics is a 3rd category of knowledge called Meta cognitive. What’s great about VIMM is once you know it and internalize it, it gives you a new knowledge/strategic knowledge of how you approach problem solving If adopt it, you’ve gained https://www.youtube.com/watch?v=rdH8Kuku9tA