Little big details in User Experience design - small delights and what is the purpose behind them

1. Nice UX
Leonid Jack

2. Little Big Details
EXTRA or MISSING mile ?

3. in real life…

4. Kleenex

5. Tesla

6. Nice UX
is
Solving problems
Providing feedback
Adding value
Unforgettable

7. Nice UX
solving problems

8. 1) Solving Problems: Chrome
Speaker icon on a tab if a sound played in it

9. 1) Solving Problems: Google
a reminder about upcoming movie release date on google search

10. 1) Solving Problems: Google Camera
a rotate icon while phone is vertical and in video mode, encouraging you to record proper horizontal videos

11. 1) Solving Problems: Google Hangouts
automatically mutes your mic if it hears you typing while others are talking

12. 1) Solving Problems: Paper
the category title fade out as it gets closer to the icons in the upper right corner

13. 1) Solving Problems: Uber
In the subject line for a receipt, the time of day of your ride is in contextual and in plane language

14. 1) Solving Problems: iOS
The camera app dynamically casts a drop shadow for text when displaying
over a bright background

15. 1) Solving Problems: Etsy
the site gently encourages you to the requisite five words and beyond

16. 1) Solving Problems: Amazon
faux 3D animations to guide the user to view the back and internal book details

17. 1) Solving Problems: Foursquare
”When no data for opening hours, they suggest “See when people check in

18. 1) Solving Problems: Slack
send an email to your phone that will automatically sign you in

19. 1) Solving Problems: InVision
mislabelled a PSD as an PNG ? (the file you’re trying to upload is too large)

20. Nice UX
providing feedback

21. 2) Providing Feedback: Pinterest
helping understand the context of my actions

22. 2) Providing Feedback: Paper
closing the messages popup

23. 2) Providing Feedback: Paper
Click on the “more likes” box on a popular post to see people’s names fly out into a long list

24. 2) Providing Feedback: Paper
a feedback upon “Like” received on paper

25. 2) Providing Feedback: Flickr
the placeholder text in the search field changes depending on the search filter

26. 2) Providing Feedback: Google Now
Tapping the information icon on a card flips it around, revealing the back and some additional text

27. 2) Providing Feedback: Skype
First-time user popup

28. 2) Providing Feedback: Hyperlapse
Speed (dropped frames) both on a button and a view itself

29. 2) Providing Feedback: Google Now
Setting a reminder on Google Now

30. 2) Providing Feedback: Path
Back icon is Path’s signature ‘P’ logo. Text stays readable while rotating

31. 2) Providing Feedback: Path
Continuing to scroll adjusts the date and time dynamically based on which post is underneath it on the view

32. Nice UX
adding value

33. 3) Adding value: Instapaper
The “add a folder” button automatically turns into a form field for the name

34. 3) Adding value: Medium
select text in a post, share buttons come up, tweet is pre-filled

35. 3) Adding value: Twitter
Pull down for multiple Twitter accounts menu

36. 3) Adding value: Amsterdam Museum
opening hours for today

37. 3) Adding value: Flickr
live-filters showing the effect on an actual photo

38. 3) Adding value: Google Maps
the path home has a light blue outline

39. 3) Adding value: Fiverr
shows the explanation of your account balance on figures hover

40. 3) Adding value: Waymate
the loading page shows you the weather info for the destination

41. 3) Adding value: Tweetbot 3
when adding a photo to a tweet “Use Last Photo Taken” is an option

42. 3) Adding value: TED
video continues to play at the top left corner

43. 3) Adding value: Path
a tap on the frosted-glass search bar in the main app view, bring up a few filtering options bubbles

44. 3) Adding value: Slideshare
mobile preview on desktop monitor

45. Nice UX
unforgettable

46. 4) Unforgettable: Twitter
Launching the Twitter app builds energy and emotion right from the start

47. 4) Unforgettable: Hyperlapse
Impressive short introduction to a first-time user

48. 4) Unforgettable: Basecamp
on a form field error, the character makes a surprising facial expression and points to the relevant field

49. 4) Unforgettable: Pinterest
focus on benefits, not features

50. 4) Unforgettable: Secret
Tapping view the comments – the card slides to the top of the screen, pushing the status bar out of sight

51. 4) Unforgettable: Flickr
delightful experience that adds a personal touch to the entire app

52. 4) Unforgettable: Facebook
nearby friends feature shows your own picture with your partner’s to illustrate its use

53. 4) Unforgettable: InVision Blog
Title changes to “Don’t forget to read this…” if you on a different tab

54. 4) Unforgettable: TeuxDeux
the copy of plans engages users personal attitude

55. 4) Unforgettable: Vimeo
it makes fart noises when you scroll up and down

56. 4) Unforgettable: Nice Ocean

57. 4) Unforgettable: Nice Ocean

58. 4) Unforgettable: Nice Ocean

59. 4) Unforgettable: Nice Ocean

60. 4) Unforgettable: Nice Ocean

61. Nice UX
is
Solving problems
Providing feedback
Adding value
Unforgettable

62. Thank you !