Interaction Design Trends 2015 & 2016

Recommendations

Info

Invisible <strong>Design</strong> 12 together nicely. This includes content, like the subjects of images and the tone of the copy. • Signifiers – Easily recognizable UI patterns are automatically understood from the user’s previous experience on the web. Signifiers, like a play button over an image to signify video, send a universally understood message without wasting time. • Microinteractions – Small design choices, like an interactive element changing color when hovered over, can fill in the cracks in how your interface works. These subtle cues often communicate without the user even realizing it. Let’s see how these principles are applied in the examples below: 1. Integrated Podiatry Clinic Long scrolling sites must immediately communicate their method of navigation, otherwise users might be confused by a lack of menus. Photo credit: Integrated Podiatry Clinic
Invisible <strong>Design</strong> 13 The Integrated Podiatry Clinic solves this problem using signifiers and users’ own mental modes. The door arrow at the center bottom is enough to suggest scrolling, especially with the minimal design preventing distraction, and some users may even recognize it from other sites. Notice what the visuals say about the site and the company: the gray color has the appropriate professionalism of a clinic, while the fun feet image and clever tagline make it feel deeply human at the same time. The step lego in the bottom right keeps with the podiatry theme. From the clever copy to the soft tones, the interface clearly communicates that the clinic is staffed with experts who care about their patients. 2. Future Water City Future Water City uses microinteractions and signifiers to explain what would be an otherwise confusing interface. Because the circled numbers aren’t a strong enough signifier on their own, they periodically pulse with color to show interactivity. Microinteractions with the cursor also show how the site works: when it hovers the map, it turns to an open hand (signifying clickand-pull navigation), when it hovers over a number it turns to a single finger (signifying clickability).
Page 1 and 2: Interaction Design Trends 2015 & 20
Page 3 and 4: Index Invisible Design 6 Simplifyi
Page 5 and 6: Authors Co-founder and head of prod
Page 7 and 8: Invisible Design 7 Simplifying User
Page 9 and 10: Invisible Design 9 2. Dropbox Dropb
Page 11: Invisible Design 11 Clear Communica
Page 15 and 16: Invisible Design 15 Photo credit: F
Page 17 and 18: Invisible Design 17 • Autosaving
Page 19 and 20: Meaningful Delight In the context o
Page 21 and 22: Meaningful Delight 21 Delight is no
Page 23 and 24: Meaningful Delight 23 Slack’s tru
Page 25 and 26: Meaningful Delight 25 Photo credit:
Page 27 and 28: Meaningful Delight 27 The deeper le
Page 29 and 30: Meaningful Delight 29 Want to updat
Page 31 and 32: Meaningful Delight 31 Photo credit:
Page 33 and 34: Meaningful Delight 33 Additional Re
Page 35 and 36: Why Copy is Essential in Interactio
Page 37 and 38: Visual Conversations 37 It doesn’
Page 39 and 40: Visual Conversations 39 Are your ta
Page 41 and 42: Visual Conversations 41 expertise,
Page 43 and 44: Visual Conversations 43 purpose is
Page 45 and 46: Visual Conversations 45 Error messa
Page 47 and 48: Visual Conversations 47 Conclusion
Page 49 and 50: Reflective Space 49 White space, or
Page 51 and 52: Reflective Space 51 Macro and Micro
Page 53 and 54: Reflective Space 53 Photo credit: T
Page 55 and 56: Reflective Space 55 Let’s look at
Page 57 and 58: Reflective Space 57 corners, the de
Page 59 and 60: Reflective Space 59 Minimalism The
Page 61 and 62: Reflective Space 61 peting visuals
Page 63 and 64:
Reflective Space 63 Conclusion As a
Page 65 and 66:
Persuasive Paths 65 BMW North Ameri
Page 67 and 68:
Persuasive Paths 67 One of the best
Page 69 and 70:
Persuasive Paths 69 Reference If yo
Page 71 and 72:
Persuasive Paths 71 Conclusion Whil
show all

Interaction Design Trends 2015 & 2016

Create successful ePaper yourself

Delete template?

Save as template?