The document provides an introduction to user experience (UX) design. It defines UX as how users feel when interacting with a product or service, as opposed to the user interface (UI) which refers to what people use to interact. The importance of UX is discussed, noting that good UX can increase sales, loyalty and reduce support costs. UX design is the process of creating meaningful experiences for users. Usability testing involves observing representative users performing tasks to identify difficulties. Evaluation tools discussed include heuristics, which involve experts examining a design against recognized usability principles. The 10 usability heuristics cover visibility of system status, matching system design to the real world, user control and error prevention.
2. Today’s agenda
• Intro to 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 to start with the customer
experience and work backwards to the
technology.”
- Steve Jobs -
5. what people use to interact with the product
UI
UX how they feel while they do it
6.
7.
8. What is UX?
“…a person’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 is important?
• 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 is important?
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 a UX 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?
UX design 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?
“…the extend 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’t measure it,
you can’t improve it.”
- Lord Kelvin-
17. Why Usability is important?
• 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 are many 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.
20. Lostness
Shows the effort required 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
21.
22. Keystroke Level Model
An empirical 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
25. Heuristic Evaluation
• An expert-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 (the process)
• 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
28. #1 Visibility of system status
The system should always keep users informed about what is going on,
through appropriate feedback within reasonable time.
29. #2 Match between system 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 between system and the real world
DON’T confuse users with system oriented language and design.
31. #3 User control and 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 and standards
Users should not have to wonder whether different words, situations, or
actions mean the same thing.
33. #5 Error prevention
Even better than good error messages is a careful design, which prevents a
problem from occurring in the first place.
34. #6 Recognition rather than 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.
35.
36. #7 Flexibility and efficiency 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 and minimalist design
• Dialogues should not contain information, which is irrelevant or rarely
needed.
• We should not overload an interface with features…
38. #9 Help users recognize, 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 users recognize, diagnose, and
recover from errors
40. #9 Help users recognize, diagnose, and
recover from errors
41. #10 Help and documentation
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.
43. These guidelines are general 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 design with 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 enough that 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 -
Notas do Editor
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.
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];
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.
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.
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
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.
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.
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
Below is an example of setting up Exchange on Android which hides the complex features under Advanced.
Give shortcut options for expert users
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.
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.
Don’t tell users that something is broken but can’t be fixed
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…
