This presentation comtemplate UX techniques application (User journeys, Wireframes and Mockups)

1. UX Techniques
May 9, 2016
Hello.

2. Agenda:
1. Introdution 2. About the project
3. UX Benefits
4. Process (The 5 Pillars of IxD)
5. Good & bad usability
6. User Journeys
IxD Exercise
May 9, 2016

3. Introductions.
Cristina Rodrigues, User Experience Designer/ IxD

4. About the project.

5. Whattheprojectwillaccomplish
Reading.com (fictitious name):
Sell digital books and magazines online with focus on catalogue.
On the site, users will be able to:
Catalogue differentiation
Search + combined filters
Buy e-books + chapters alone
Buy/Subscribe digital magazines + articles alone
Rating & Write reviews

6. UX Benefits.

7. IxD Exercise
May 9, 2016
UX Benefits to Businesses in web app:
- Easy-of-use resulting in higher conversion
rates
- Ensures that features are not left out
- Reduces costly development of features
that users do not want or do not need
- Reduces support & service costs
- Generates greater customer satisfaction,
loyalty and improved perception of the
brand
- And thus generates increased revenues

8. Process.

9. The5PillarsofInteractiondesign,
still stand strong. Driven by human
connection and emotion, these can be
aided by technology…
IxD Exercise
May 9, 2016

10. The5PillarsofIxD:
1.Goal-driven Design
Focus on personas, user scenarios and experience
maps. Every interaction moves users closer to
completing their goal.
2.Usability
3.Affordances & Signifiers
4.Learnability
5.Feedback & Response Time
IxD Exercise
May 9, 2016

11. The5PillarsofIxD:
1.Goal-driven Design
2.Usability
Function must be intuitive and reliable before it can be
fun for users. Provide only as many features as users
truly need, then hone in on reducing the friction and
cognitive load of each feature.
3.Affordances & Signifiers
4.Learnability
5.Feedback & Response Time
IxD Exercise
May 9, 2016

12. The5PillarsofIxD:
1.Goal-driven Design
2.Usability
3.Affordances & Signifiers
Form must reflect function; since vision is our
dominant sense.
4.Learnability
5.Feedback & Response Time
IxD Exercise
May 9, 2016

13. The5PillarsofIxD:
1.Goal-driven Design
2.Usability
3.Affordances & Signifiers
4.Learnability
Interfaces that are consistent with existing designs and
across all internal assets are more predictable, which
means that they are easier to learn; then, naturally
feel more usable since less friction is involved.
5.Feedback & Response Time
IxD Exercise
May 9, 2016

14. The5PillarsofIxD:
1.Goal-driven Design
2.Usability
3.Affordances & Signifiers
4.Learnability
5.Feedback & Response Time
Interfaces must respond promptly to users in a human
way, so that the experience feels like a real
conversation.You must approach interaction design
as if it were human-to-human conversation, not as a
machine that simply responds to what users do or say.
IxD Exercise
May 9, 2016

15. Good & bad
usability.
Amazon,B&N,Booktopia,Indigo,Kobo,Googleplay

16. Good usability pointers to guide
user experience:
1. Understandable
2. Actionable
3. Engaging
4. Efficient
5. Learnable
6. Affordance/Signifier
7. Feedback/Response Time
IxD Exercise
May 9, 2016

17. Good usability pointers to guide
user experience:
1. Understandable
2. Actionable
3. Engaging
4. Efficient
5. Learnable
6. Affordance/Signifier
7. Feedback/Response Time
IxD Exercise
May 9, 2016

18. Good usability pointers to guide
user experience:
1. Understandable
2. Actionable
3. Engaging
4. Efficient
5. Learnable
6. Affordance/Signifier
7. Feedback/Response Time
IxD Exercise
May 9, 2016

19. Good usability pointers to guide
user experience:
1. Understandable
2. Actionable
3. Engaging
4. Efficient
5. Learnable
6. Affordance/Signifier
7. Feedback/Response Time
IxD Exercise
May 9, 2016

20. Good usability pointers to guide
user experience:
1. Understandable
2. Actionable
3. Engaging
4. Efficient
5. Learnable
6. Affordance/Signifier
7. Feedback/Response Time
IxD Exercise
May 9, 2016

21. Good usability pointers to guide
user experience:
1. Understandable
2. Actionable
3. Engaging
4. Efficient
5. Learnable
6. Affordance/Signifier
7. Feedback/Response Time
IxD Exercise
May 9, 2016

22. Good usability pointers to guide
user experience:
1. Understandable
2. Actionable
3. Engaging
4. Efficient
5. Learnable
6. Affordance/Signifier
7. Feedback/Response Time
IxD Exercise
May 9, 2016

23. 1-AmazonEbooks–wellorganized
Understandable
Actionable
Engaging
Efficient
Learnable
Affordance/Signifier
Feedback/Resp.Time

24. 1-Amazon–highinfodensity
Understandable
Actionable
Engaging
Efficient
Learnable
Affordance/Signifier
Feedback/Resp.Time

25. 1-Amazon–highlevelaffordance
Understandable
Actionable
Engaging
Efficient
Learnable
Affordance/Signifier
Feedback/Resp.Time

26. 2-B&N–lessinfodensityenhanceitsscanability
Understandable
Actionable
Engaging
Efficient
Learnable
Affordance/Signifier
Feedback/Resp.Time

27. 3-Booktopia–hiddennavmenucanbeusedto
savescreenspace
Understandable
Actionable
Engaging
Efficient
Learnable
Affordance/Signifier
Feedback/Resp.Time

28. 4-Indigo–hiddennavwithanimationtoprevent
ajarringtransition
Understandable
Actionable
Engaging
Efficient
Learnable
Affordance/Signifier
Feedback/Resp.Time

29. 5-Kobo–Materialdesigncreateclean,
modernisticdesignthatfocusonUX
Understandable
Actionable
Engaging
Efficient
Learnable
Affordance/Signifier
Feedback/Resp.Time

30. 6-Googleplay–simplicitylookandfeelof
MaterialDesign
Understandable
Actionable
Engaging
Efficient
Learnable
Affordance/Signifier
Feedback/Resp.Time

31. User Journeys.

32. Analyzing user data
Visual Story & Experience Map.
...
IxD Exercise
May 9, 2016

33. Visual stories from Observations
at Site Visits
(quotes, goals, actions, pain points)

34. Experience Map
Combining multipleobservationsfromobserversbyinsuringthatthe
mapcreatedfocusontheproblem(knowingpainpoints&personas)

35. Goal-driven Design:
In many cases, user goals and
business needs align…
IxD Exercise
May 9, 2016

36. UserGoalsxPainPointsIssues.
(#Dots = impact of user pain point)
Info gathered from site visits.
# 10 “Search” show no related items as
results.
# 08 Filter “price” presents “hidden
scrolling” at the refined search option.
And there is no signifier for the scrolling
tool.
# 06 Embarrassing concept about
“confusing items categorizations“ that
reveals no criteria data.
# 04 Too many "poor ads or poor hot links
content”, like forcing the sale.
BusinessNeeds.
(Setting goals based in pain points issues)
Provide search results for users without
underestimating the accuracy of the data
results, ensures that feature are not left
out.
Guarantee clear and easy to find menu
options and labels, reduces costly
development of features that users can not
use or need.
Guarantee the use of consistent designs
means that they are easy to learn. So then
increase the revenues.
Effective use of ads generates greater
customer satisfaction, loyalty and improved
perception of the brand.

37. Personas
Users of your product:
imaginary yet realistic who brings detailed
descriptions (attributes, goals, concerns
and quotes)…
IxD Exercise
May 9, 2016

38. “Byusingthesearchtool.-
Whythesystemshowme
resultssodistantfrommy
expectations?”

39. Deeploveofliterature
Reader since age 9; love classical,
fiction & non fiction books
KeyCharacteristics
Entrepreneur who runs her own clinic rehabilitation.
Reading classics, fiction and non-fiction literature are her
favorite hobby. Experienced with e-commerce sites
(advanced user). She uses specific e-books to upgrade in
her career, often interacting with Mac/PC and tablet
devices and applications.
Goals&Concerns
Her main goal is with the seriousness of the e-commerce
sites, regarding privacy policies of her data on the
network. Concerns with BI technologies that help users
find the e-books according to her singularities. Beside this,
she focus on clean design and clear and accurate
information on the site.
“So much info and the “subject
category” does not includes my
desired item. Items appears so
broader and it is so boring for me.”
Background
28 years old
Clinic of Rehabilitation
100 mil / year
Tech Preferences
Macintosh/PC
Android
Tablet

40. Feature prioritization.
…

41. Feature prioritization
minimal
Search / combined filters
Recommendations (Inspired by your browsing history)
Write Reviews
Ratings
majority
Audiobook
Filter by price
Social media sharing
Who bought this item also bought
nicetohave
Free shipping
Free Editions
Your Recently Viewed Items
Shopping Basket
Multiple Wish lists

42. Design concepts/ideation:
explore lots of different potential
design ideas in a very short space of
time; thinking about solutions to
your users pain points…

43. Ideation/Design charrette( 1-3 e.g.).

44. Ideation/Design charrette( 1-3 e.g.).
Slideshows.
Slideshows are an effective way to showcase multiple images
without overburdening the users. These are great for e-books
sites.

45. Ideation/Design charrette(2-3 e.g.).

46. Ideation/Design charrette(2-3 e.g.).
Card Layouts.
Pioneered by Pinterest, cards are everywhere on the web
because they present information in bite-sized chunks perfect
for scanning.

47. Ideation/Design charrette(3-3a e.g.).
Quick links.
Quicklyshoworhidecontentwithclicksorswipes,savingscreen
space.

48. Ideation/Design charrette(3-3b e.g.).

49. Ideation/Design charrette(3-3b e.g.).
“On Click”:Pop
Window with
Full screen Overlay
Effect.
Hover animations.
Hover effects give a more intuitive feel to a site as users
mouse over content. Users unsure about a feature’s
function tend to hover over them automatically for instant
visual feedback.

50. User Scenarios & Storyboards:
how the interaction is more play
out in a real environment
…

51. Find and buy an e-book by
recommendations.
Carla wonders what she
should read next.
She searches online but
results seem random. She
log-in at Reading.com.
(Hello, Carla) The web site knows
about Carla`s preferences
through the feature inspired by
her history browsing.
Carla selects some e-books
recommendations that she
does not know yet and is
curious about.
Carla selects an e-book
after reading some synopsis
and navigate through some
customer reviews.
Carla uses the web
application at Reading.com
to purchase an e-book.

52. Using a combined search.
After the resulting of the
navigation, Carla can filter
her results by the button
“more”.
The button will provide a
list of filters as bestsellers,
new releases, ratings,
reviews, and so on.
After she decides for the filter,
the webpage appears
automatically refreshed with
the new content inside.
Carla can also add a
combined filter “sort by
price”.
The app will provide a
comboBox with the options
“Low to High” and “High to
Low”.
And the webpage appears
automatically refreshed
with the new sorting result
ordered by price.

53. Rate & Write reviews.
Carla wants to write a
review to help other users
decide for its positive and
negative ratings.
After sign-in she selects the
desired e-book then scrolls
the page until customer
reviews and clicks on the
button “Write a Customer
Review”.
The webpage shows a pop
up window where she can
easily rates from 1 to 5
stars and input data text to
submit the review.

54. Wireframes & Mockups.
...

55. Simple things work; often to our
surprise.
...

57. UI patterns must guide users
through a smooth experience.
The hamburger menu…
IxD Exercise
May 9, 2016

59. Hover effects gives more intuitive
feel to a site.
Features for instant visual
feedback…
IxD Exercise
May 9, 2016

61. Data as foundation of service and
simplified IA.
Pop up Window with
Full screen Overlay Effect…
IxD Exercise
May 9, 2016

64. Personalization and Hover Effects
for Secondary Content (like
combined search) create
memorable contextual
experiences…
IxD Exercise
May 9, 2016

66. Mockups for Magazine
Subscriptions.
Consistency in UI Design
…
IxD Exercise
May 9, 2016

69. Thank You
for listening!
IxD Exercise
May 9, 2016
Questions?
CristinaRodrigues,UserExperienceDesigner
http://cristinrodrigues.wordpress.com
cristinrodrigues@hotmail.com