ux, ui and us v1.2
TRANSCRIPT
X I S
“Clear content, simple navigation, and answers to customer questions have the biggest impact on
business value”
Jakob Nielsen
• Samer Desouky
• ISTQB® Certified Test Manager
• ISTQB® Certified Test Analyst
• ISTQB® Certified Agile Tester
• Certified Lean Six Sigma - Green Belt
• Certified ITIL® Foundation
• Business Administration - MIS B.Sc.
• Married , 3 kids
About me ...
Agenda
• UX, UI and usability
• Famous failures
• Testing Types and Techniques
• Best practices for forms testing
User Interactions
The relationship between People and the Systems
they use.
Lookup / Find
Explore / Play
Check-in / Status
Edit / Create
User Interactions
Its good as long as . . . Intuitive
Feels fast
Consistent
Minimal popups
Not busy
Good error handling
Less is more !!!
Defaults
UI Interface between the user of
your and the product itself.
Depending on how well you
understand the users, the
interface may be great or a
complete miss.
UI can be built without any
consideration for UX, UI enables
a user to interact with a
product.
We may have a valid UI
solution since it can be used,
but from an overall UX
perspective it may not give
the needed experiences
UI Interface between the user of
your and the product itself.
Depending on how well you
understand the users, the
interface may be great or a
complete miss.
UI can be built without any
consideration for UX, UI enables
a user to interact with a
product.
We may have a valid UI
solution since it can be used,
but from an overall UX
perspective it may not give
the needed experiences
US
• Different users will have
different usability needs.
• Understanding the needs of
your users will influence the
UI.
• In the perfect world, the UI
should be a perfect match for
the needs of the users.
UX
The catch for all
experience that has not
been covered by your
personal UI definition.
Color, texture, speed,
efficiency,
reliability, words, fonts
etc…
The actual experience that a user is having when using an
interface.
UX, UI and Usability
Unlimited
Expression
Easy to use
The brick
UI US UX
http://www.magnet360.com/
UX Disciplines User Research
Content Strategy
Journey Mapping
Information Architecture
Interaction Design
Visual Design
Usability Evaluation
UxD The process of enhancing customer satisfaction and
loyalty by improving the usability, ease of use, and
pleasure provided in the interaction between the
customer and the product.
UX, UI and Usability
Accomplishing a task in as few steps as possible isn't synonymous with a
good user experience
UX, UI and Usability
There’s a sense of accomplishment &
satisfaction when a person uncovers a
hidden information they weren’t expecting
Let’s fail in 5 steps !! Expectation that designer understands the current needs of the users.
If someone is able to build a UI that does not mean they understand the users.
When it is not working, changing the UI to meet the needs of the current users or new users without research.
No research done with users to get their feedback on UI / UX / US before or after the product is created.
Cost cutting done at the expense of Usability / UX i.e. the focus being on getting the UI released at all costs.
How to create good UX Understand your users in detail.
Work with experts that know how to establish the important interface requirements to meet the user needs.
Track the UX before and after.
Don’t rely on the UI person to do the UX and Usability.
UX, UI and Usability
Successful UX means understanding
• Who really are our users?
• What makes them tick?
• What are they hoping to accomplish?
Testing Types and Techniques.
• A/B Testing
• Cards Sorting
• Usability Test
• Personas
• Other . . .
A/B Testing
What:
A process that allows one to test two (or more) different
versions of a page. The display of the various versions
vary on your website to see what users respond to best.
Why: Provides guidance in knowing
what to adjust on your web
page.
Wording of a single phrase can
have dramatic effects.
A/B testing measures the results
of these changes.
Card Sorting
What:
Input to the structure of a site
or product.
The participant sorts labeled
cards into similar groups.
Why:
Best used to guide navigation
design.
Yields deeper insight into user
expectations for content.
Usability Testing
What:
Where users test drive a prototype or production system.
Typically 6-8 participants per user segment.
Why: Usability testing helps one
understand what users do and why
they do it and what doesn’t.
The process helps focus in finding
specific interface issues, layout,
labeling, and interaction.
Usability Testing
Heuristic Evaluation
Prototype Test
Formative Testing
User Test
SUMI , WAMMI
Summative Testing
Usability Testing
Jakob Nielsen’s study on
the ideal number of test
subjects in usability tests
found that tests with just
five users would reveal
about 85% of all problems
with your website
Personas What:
Real-world users that represent the
needs of larger groups of user, in
terms of their goals and personal
characteristics.
Includes a name, picture, user
quotes and other info with a focus
on goals, motivation, and behavior.
Why: Avoids self-referential design.
Focus on accomplishing specific goals.
Allows the product to satisfy many
people
Best practices for forms testing
Labels:
1. For reduced completion times & familiar data
input: top aligned
2. When vertical screen space is a constraint: right
aligned
3. For unfamiliar, or advanced data entry: left
aligned
Search
User Name :
Password :
User Name :
Password :
Best practices for forms testing
Data Entry Fields:
1. Try to avoid optional fields
2. If most fields are required: indicate optional fields
3. If most fields are optional: indicate required fields
4. Text is best, but * often works for required fields
5. Associate indicators with labels Search *
Best practices for forms testing
Grouping
1. Use relevant content groupings to organize forms
2. Use the minimum amount of visual elements
necessary to communicate useful relationships
tab2 tab3 tab1 tab4 tab2 tab1
tab3 tab4
Best practices for forms testing
Actions
1. Avoid secondary actions if possible
2. Otherwise, ensure a clear visual distinction between
primary & secondary actions
3. Align primary actions with input fields for a clear
path to completion
Save Cancel
Best practices for forms testing
Search Box Wide
1. When possible, use field length as an affordance
2. Otherwise consider a consistent length that provides
enough room for inputs
3. Extending the box to 27 characters would
accommodate 90% of queries
WWWWWWWWWWWWWWWWWWWWWWWWWWW
Search
Best practices for forms testing
Scrolling
1. Jakob Nielsen’s study on how much users scroll (in
Prioritizing Web Usability), He said :
20%
66%
14%
Visitors scroll on their first visit to a
website
Visitors won’t scroll
Scrolling on their second
• The implication of this is
not only that users will
avoid ads but that they’ll
avoid anything that looks
like an ad, even if it’s not
an ad. Some heavily styled
navigation items may look
like banners, so be careful
with these elements.
Best practices for forms testing
Software Testing is our Profession.
www.testproeg.com
Contact Us
+2 0222756841
+2 01021902447
+2 01000190709
30 Ahmad El-Zomor St., Nasr City, Cairo, Egypt
E-Mail: [email protected]