Downloaded 20 times
More Related Content
Similar to Intro to ux and how to design a thoughtful ui
![Copy of Presentation - [Your Organization Name]_20250924_181258_0000.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/copyofpresentation-yourorganizationname202509241812580000-251117131601-9744dd2d-thumbnail.jpg?width=640&height=640&fit=bounds)
Intro to ux and how to design a thoughtful ui
- 1. Intro to UX ANDHOW TO DESIGN A THOUGHTFUL UI
- 2. Today’s agenda • Introto UX • Norman doors • What is UX • Importance of UX • UX design • What it is • Process of UX design • Usability testing • Usability evaluation tools • Heuristics evaluation • The 10 Usability Heuristics
- 3. “You’ve got tostart with the customer experience and work backwards to the technology.” - Steve Jobs -
- 4. User Experience ≠User Interface
- 5. what people useto interact with the product UI UX how they feel while they do it
- 8. What is UX? “…aperson’s perceptions and responses resulting from the use and or anticipated use of a product, system or service.” (ISO 9241-210 ) “UX includes all the users’ emotions, beliefs, preferences, perceptions, physical and psychological responses, behaviors and accomplishments that occur before, during and after use.”
- 9. Why UX isimportant? • More frequent visits to your website/application • Increased return to your website/application (customer loyalty) • Increased sales • Decreased user errors • Decreases customer support costs • Stimulates word-of-mouth • Cuts down development cost
- 10. Why UX isimportant? Every dollar invested in UX bring between 2 and 100 dollars in return. SOURCE: Pressman, R.S. (1992). Soſtware Engineering: A Practitioner’s Approach. McGraw-Hill: New York, NY Gilb, T. (1988). Principles of Soſtware Engineering Management. Addison Wesley: Reading, Ma.
- 11. For statistics lovers;-) • 67% of consumers own and use mobile devices in US (87% UK). (Source) • Out of 100 websites analyzed only a measly 11.8% of those on average use mobile- responsive design • Almost 60% of users say they will not recommend a business that has a badly designed mobile site. (Source) • 67% of shoppers are more inclined to do business with a website that is mobile ready. (Source) • Almost 40% of users will stop engaging if they find the content or layout of a website shabby and tatty. (Source) • 94% of of visitors stopped trusting websites with degraded web design. (Source) • You lose nearly 75% of your users within the first week, and by the end of the month, you’re down to 6% of your registered users. By the end of 3 months, only 4 out of 100 users are left.
- 12. What does aUX Designer/ Researcher/ Architect/ UI/UX/ Strategist…? • Field research • Face to face interviews • Creation and administering of tests • Gathering, organizing and presenting statistics • Documentation of personas and findings • Product design • Feature writing • Requirement writing • Graphic arts • Interaction design • Information architecture • Usability • Prototyping • Interface layout • Visual design • Copy writing • Terminology creation • Presentation and speaking • Working tightly with programmers • Brainstorm coordination • Company culture evangelist • Communication to stakeholders
- 13. What is UX Design? UXdesign is the process of creating products that provide meaningful and relevant experiences to users. It’s a huge strategic process that aims to create a product that users are drawn to, find easy to use, and quickly understand.
- 14. What is Usability? “…theextend to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specific context of use” (ISO 9241-11 ) How “well” users can use the system
- 15. Key Usability components •Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design? • Efficiency: Once users have learned the design, how quickly can they perform tasks? • Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency? • Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors? • Satisfaction: How pleasant is it to use the design?
- 16. “If you can’tmeasure it, you can’t improve it.” - Lord Kelvin-
- 17. Why Usability isimportant? • If a website is difficult to use, people leave. • If the homepage fails to clearly state what a company offers and what users can do on the site, people leave. • If users get lost on a website, they leave. • If a website's information is hard to read or doesn't answer users' key questions, they leave.
- 18. Usability testing There aremany methods for studying usability, but the most basic and useful is user testing, which has 3 components: • Get hold of some representative users, such as customers for an e-commerce site or employees for an intranet. • Ask the users to perform representative tasks with the design. • Observe what the users do, where they succeed, and where they have difficulties with the user interface. • Shut up and let the users do the talking.
- 19. Usability Evaluation Tools •Heuristics • Lostness • Keystroke Level Model (KLM) • System Usability Scale
- 20. Lostness Shows the effortrequired to identify a webpage, compared to the optimal path (the one with minimal transitions) • Ν: Number of distinct webpages that the user visited • S: Number of non-distinct webpages that the user visited • R: Number of fastest way to reach the desired website • L < 0.4 no navigation issues • L > 0.5 users are expected to face navigation issues
- 22. Keystroke Level Model Anempirical model that predicts the time that the average user will need to complete a use case • Keystroking • Mouse button press • Pointing (typically with mouse) • Hand movement between keyboard and mouse • Drawing straight line segments • “Mental preparation” • System Response time
- 24.
- 25. Heuristic Evaluation • Anexpert-based inspection method • A “discount” method for quick, cheap, and easy evaluation of the user interface • Not a substitute for usability testing • Originally proposed by Nielsen and Molich back in 1990 • The goal: to identify any usability issues so that they can be addressed as part of an iterative design process. • The process: it requires that a small set of reviewers (or “evaluators”) examine the interface and judge its compliance with recognized usability principles (the “heuristics”). • 3 – 5 experts is ideal (60-75% of the usability problems)
- 26. Heuristic Evaluation (theprocess) • Identify the scope and objectives of the system/app/product under evaluation • Define the tasks or user journeys • Carefully study and review the heuristics • The evaluators then independently work through the task selected for inspection, taking the point of view of a supposed user (persona) • When evaluators uncover a problem that they believe users will have, they record it on the form • Finally, the evaluators get together and go over their problem sheets and proposed solutions
- 27. The 10 UsabilityHeuristics
- 28. #1 Visibility ofsystem status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
- 29. #2 Match betweensystem and the real world The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Instead of “Sing up” button designer has chosen to say ambitiously “Yes, I want Neil to teach me how to grow my Business!”
- 30. #2 Match betweensystem and the real world DON’T confuse users with system oriented language and design.
- 31. #3 User controland freedom • Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. • Supports undo and redo and a clear way to navigate.
- 32. #4 Consistency andstandards Users should not have to wonder whether different words, situations, or actions mean the same thing.
- 33. #5 Error prevention Evenbetter than good error messages is a careful design, which prevents a problem from occurring in the first place.
- 34. #6 Recognition ratherthan recall • Minimize the user’s memory load. Make objects, actions, and options visible. • The user should not have to remember information from one part of the dialogue to another.
- 36. #7 Flexibility andefficiency of use • Accelerators (unseen by the novice user) may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. • Allow users to tailor frequent actions
- 37. #8 Aesthetic andminimalist design • Dialogues should not contain information, which is irrelevant or rarely needed. • We should not overload an interface with features…
- 38. #9 Help usersrecognize, diagnose, and recover from errors Error messages should be expressed in plain language (no codes), precisely indicate the problem and constructively suggest a solution.
- 39. #9 Help usersrecognize, diagnose, and recover from errors
- 40. #9 Help usersrecognize, diagnose, and recover from errors
- 41. #10 Help anddocumentation Help information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.
- 42. #10 Help anddocumentation
- 43. These guidelines aregeneral rules of thumb and will mostly be applicable to any web & mobile application with some exceptions. Always use your judgment to implement these principles or any other UX practices by keeping yourself in end user’s shoes.
- 44. Learn to designwith your user’s needs and expectations in mind by applying the 10 Heuristic rules. These heuristics have been reflected in many of the products designed by some of the most successful companies in the world such as Apple, Google, and Adobe. Learn How Adobe Integrates Nielsen and Molich's Ten User Interface Design Guidelines
- 45. “It’s not enoughthat we build products that function, that are understandable and usable, we also need to build products that bring joy and excitement, pleasure and fun, and yes, beauty to people’s lives.” - Don Norman -
Editor's Notes
- #12 According to TechCrunch, by the year 2020, there will be a staggering 6.1 billion Smartphone users. So, from a marketing standpoint, if you already have a website, and for what ever reason it isn’t mobile-friendly, maybe it’s time you took this seriously. OK, so you have a mobile-friendly website, great. But, if it looks bad, or worst yet, if its creating a bad user-experience for your visitors, then you’re in no better position than a company that has a website that’s not mobile-friendly. I cannot stand dated looking and unattractive websites. And, when I do come across one, it gives me the impression that the business simply doesn’t care.
- #14 https://www.slideshare.net/quasimojo/the-state-of-ux-in-the-uk?ref=http://whatusersdo.com/blog/ux-ui-debate/
- #26 Nielsen is a guru on the field of web usability. Nielsen founded the "discount usability engineering" movement for fast and cheap improvements of user interfaces and has invented several usability methods, including heuristic evaluation. He holds 79 United States patents, mainly on ways of making the Web easier to use. Nielsen has been quoted in the computing and the mainstream press for his criticism of Windows 8's user interface.[7][8][9] Tom Hobbs, creative director of the design firm Teague, criticized what he perceived to be some of Nielsen's points on the matter, and Nielsen responded with some clarifications.[10] The subsequent short and troubled history of Windows 8, released on October 26,2012, seems to have confirmed Nielsen's criticism: the sales of Windows-based systems plummeted after the introduction of Windows 8[11];
- #28 User Experience is a qualitative metric subject to many factors. It’s an evolving discipline and it’s evident when the forerunner of great user experiences, Apple, humbly tags their iOS Human Interface Guidelines as Beta. Google termed their material design guidelines as a living document which will be updated regularly. One of the pioneers who tried to objectively evaluate the user experience on digital platforms is Jakob Nielsen with his heuristic evaluation. Though they date back to the 90’s, these general rules of thumb are still valid and are used today.
- #29 When the user uploads an image for cropping, he/she needs to wait until the image appears on screen with the square box. Depending on internet speed, this load time varies for many users. There is no way for the user to know if he needs to wait or continue to the next page. One example is twitter making a swoosh sound when a tweet is being posted. Another example is Google Drive showing the status of a document upload. This principle states that the user should know what’s going on inside the system. We need to give a feedback of his/her action within a reasonable time. This feedback is normally associated with points of action and can be provided using a color change, loader, time-left graphics, etc.
- #32 This principle talks about giving the user the freedom to navigate and perform actions. The freedom to undo any accidental actions. This principle can be best illustrated by the Gmail’s flash message with undo action when we accidentally delete an email There is no way to undo a text edit on Android! Avoid pissing the user off by giving him no choice to revert to an earlier state. Love the “shake to undo” feature on iOS
- #33 Consistency is the key. Google Plus ambitiously launched “+1” to counter Facebook’s “Like” without much success. Facebook’s “Like” already became a standard and sites like LinkedIn adopted it without contesting.
- #34 Either eliminate error-prone conditions or check for them and present users a confirmation option before they commit to the action Below is an example of Google Search trying to correct my spelling: If you have set some rules for the format of user password, try to validate it as the user types rather than waiting for him to click submit. How many times did your outlook remind you that there is no attachment in the email while you mentioned that something is attached? Outlook intuitively scans the email for such keywords and alerts the user before sending. This is Error Prevention.
- #35 So let’s say you visit a site after a long period. If the UI was correctly design you don’t have to try and how to do an action. It should be OBVIOUS by the design how to do it
- #37 Below is an example of setting up Exchange on Android which hides the complex features under Advanced. Give shortcut options for expert users
- #38 Prioritization comes to play when this aspect is being considered. For the designer or the developer, all the information that’s being presented on the page is relevant. The product manager needs to ask the end user if it is so. Is every information displayed on interface necessary and useful? Google has been resisting the temptation to show more information on their search page for years. This is could be shown as the example of the best possible minimalist design. Interfaces need to be cleared of unnecessary elements and content that do not support the page goals and tasks. Apple provides only the basic information of feature hiding additional information under “Learn More”. Check the same product on a retail website to understand the importance of clutter-free experience.
- #39 Errors are inadvertent in the user journey. A check needs to be made if those errors are being explained to the user in understandable language.
- #41 Don’t tell users that something is broken but can’t be fixed
- #42 Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Especially on more complex systems with more complex functionalities . Also, users will always make mistakes at some point or won’t be able to find something…