Upgrade to Pro — share decks privately, control downloads, hide ads and more …

2016 UX/UI Trends & Patterns

2016 UX/UI Trends & Patterns

In „Patterns & Trends“ we look at current UX/UI dynamics and benchmarks in product design. Made with Iker Ortiz de Arri (@ikertxo).

Alexander Meinhardt

March 01, 2016
Tweet

More Decks by Alexander Meinhardt

Other Decks in Design

Transcript

  1. U X & U I P A T T E

    R N S K R U N C H T I M E I NT E RACT IV E
  2. U X & U I P A T T E

    R N S Mobile keyboard patterns
  3. „ U X & U I P A T T

    E R N S QWERTY SURVIVES DUE TO THE HIGH COSTS OF CHANGING USER BEHAVIOUR Nir Eyal “Hooked: How to build habit-forming products”
  4. U X & U I P A T T E

    R N S What to expect in 2016? Mobile keyboard patterns
  5. U X & U I P A T T E

    R N S Conversational Commerce
  6. U X & U I P A T T E

    R N S Messaging apps are an everyday tool to all smartphone users. By integrating a messenger in customer oriented services, we have the chance to streamline the entire client contact – may it be personal or automatic. Instant messaging can allow companies to talk to their customers directly and build trust with brands. It is a modern, efficient and customer oriented way of communication. It is faster than a telephone call, it will be used more often as customers are used to interact with messenger systems, and allows companies to cut back on call center costs. Conversational Commerce
  7. U X & U I P A T T E

    R N S Conversational Commerce • Conversational apps have a lot more contextual information about users, including location, health, sensor, and social data.
 • Conversational apps will push commerce and purchases into this context aggressively and away from the query-thrashing model.
  8. U X & U I P A T T E

    R N S Conversational Commerce • Agents and/or bots are humanising the conversation, localising correctly, and providing a meaningfully useful and differentiated service.
 • We will see this trend growing, with more companies offering direct messenger features in their Apps, or via WhatsApp channels.
  9. U X & U I P A T T E

    R N S Conversational Commerce
  10. „ U X & U I P A T T

    E R N S 2016 WILL BE THE YEAR OF CONVERSATIONAL COMMERCE Chris Messina (Developer Experience Lead at Uber) medium.com/@chrismessina
  11. „ U X & U I P A T T

    E R N S INSTANT MESSAGING WILL CHANGE THE WAY BRANDS TALK TO CUSTOMERS. Matt Burgess WIRED Magazine
  12. U X & U I P A T T E

    R N S Travel Homie
  13. „ U X & U I P A T T

    E R N S WE WILL TEST TOOLS THAT ALLOW TO USE WHATSAPP TO COMMUNICATE WITH BUSINESSES AND ORGANISATIONS. WhatsApp Blog
  14. U X & U I P A T T E

    R N S Lufthansa Mission Control
  15. U X & U I P A T T E

    R N S Lokin ist die App, die Bahnreisende jeden Tag zusammenbringt. Melde Dich einfach und schnell an und chatte im neuen Zug-Chat mit anderen Usern, die den gleichen Zielort haben oder in der gleichen Region unterwegs sind. In unserer Lokin-Lounge kannst Du Dich bundesweit mit anderen Reisenden über aktuelle Bahnthemen austauschen oder einfach nur nett schreiben. Lokin
  16. U X & U I P A T T E

    R N S Lokin
  17. E P I C O R C H A P

    T E R Service acts as an intermediary between disappointed customers and businesses. For example, instead of a customer having to fill out a generic complaint form for an airline or retailer they contact Service, who have dedicated support staff to contact the company and attempt to resolve their issue. Service
  18. E P I C O R C H A P

    T E R Service • Delayed or canceled flight? • Defective product? • Overcharged? • Late delivery? • Insurance issues? • Banking problems?
  19. U X & U I P A T T E

    R N S Service
  20. U X & U I P A T T E

    R N S Service
  21. U X & U I P A T T E

    R N S Service
  22. U X & U I P A T T E

    R N S Service
  23. U X & U I P A T T E

    R N S Quartz for iPhone is an ongoing conversation about the news, sort of like texting. Quartz
  24. U X & U I P A T T E

    R N S „We’ll send you messages, photos, GIFs, and links, and you can tap to respond when you’re interested in learning more about a topic. Each session lasts just a few minutes, so it’s perfect for the train, elevator, grocery store line, or wherever you have a spare moment to catch up on the news.“ Quartz
  25. U X & U I P A T T E

    R N S „We drew influence from all sorts of places, but were particularly inspired by Jonathan Libov’s “Futures of Text” and apps with conversational UIs like Lark and Lifeline. Other trends, like the rise of bots and messaging, gave us confidence in the direction.“ Quartz
  26. U X & U I P A T T E

    R N S Quartz
  27. U X & U I P A T T E

    R N S MINI Concept
  28. U X & U I P A T T E

    R N S What to expect in 2016? Conversational Commerce
  29. U X & U I P A T T E

    R N S Text commands
  30. „ U X & U I P A T T

    E R N S THE FUTURE OF UI IS TEXT Partyline Software Blog
  31. U X & U I P A T T E

    R N S Discovery of discreet conversational services becomes less of an issue if users are slowly trained to think and type more like programmers. 
 Software developers, sysadmins and power users already use the command-line as a simple and efficient way to get work done. Entering in text commands is faster than using a mouse. Text commands
  32. U X & U I P A T T E

    R N S The net conclusion is that people will learn to type commands into messaging apps in the future. Text commands
  33. U X & U I P A T T E

    R N S Team chat app Slack offers a variety of „slash commands“, which act as shortcuts you can type into the message input box to perform an action. Slack
  34. U X & U I P A T T E

    R N S One of the first commands people learn is /giphy This allows people to query Giphy's database for a random GIF that matches a certain keyword. Slack
  35. U X & U I P A T T E

    R N S When you type /remind me in 10 minutes to drink a glass of water the command will set a reminder for you. Slack
  36. U X & U I P A T T E

    R N S Peach
  37. U X & U I P A T T E

    R N S What to expect in 2016? Text commands
  38. U X & U I P A T T E

    R N S Semantic Animation
  39. U X & U I P A T T E

    R N S Animation is fast becoming an (the) essential part of interface design, and it’s easy to see why. It creates opportunities to make our interfaces better at every level: it can make them easier to understand, more pleasant to use, and nicer to look at. Semantic Animation
  40. U X & U I P A T T E

    R N S Animation can help offload some of the work of processing interface changes from our brains to the screen. It can also be used to explain the meaning and relationships of interface elements, and even teach users how to do things—all without making an interface more complex. Sometimes all of these factors converge: when you minimize a window, would you be able to tell where it goes without the animation? How much longer would it take you to find the minimized window in the dock? Semantic Animation
  41. „ U X & U I P A T T

    E R N S ANIMATION CAN HELP OFFLOAD SOME OF THE WORK OF PROCESSING INTERFACE CHANGES FROM OUR BRAINS TO THE SCREEN. A List Apart
  42. U X & U I P A T T E

    R N S Hard cuts make it difficult to understand state changes, because changing the entire page means you have to rescan the entire thing to see what changed. Semantic Animation
  43. U X & U I P A T T E

    R N S Semantic Animation Semantic Animations, also known as 'Meaningful' transitions and/or 'Reveal' pattern, provide users visual continuity when you show or hide a group of UI elements. Reveal animations often involve complex choreographies with hierarchical timing; where elements are removed, added, or shared between the animation states.
  44. U X & U I P A T T E

    R N S Example of how a post on Dribbble could work as a semantic component. The post always remains one cohesive element; it simply changes its representation over time. Semantic Animation
  45. U X & U I P A T T E

    R N S Semantic Animation
  46. U X & U I P A T T E

    R N S Think of when you add animations, an interface isn’t a series of screens anymore, but a collection of semantic components inside a single, continuous space. Semantic Animation
  47. U X & U I P A T T E

    R N S Instead of designing screens and then adding transitions between them, start by designing individual components and thinking about how they change and move in different contexts. With that in place, layout and animations will come together naturally, following the semantic structure of the content. Semantic Animation
  48. U X & U I P A T T E

    R N S Material Design Example Don’t Why is the image both in the list view and on that other screen?
  49. U X & U I P A T T E

    R N S Material Design Example Do Better because there are no multiple representations. Although the animation fails to account for the interface elements on top, which change with no animation at all.
  50. U X & U I P A T T E

    R N S Facebook Paper Perfect Relationship between thumbnail and detail view is completely obvious. No multiple representations, no semantic loose ends. The transition is so smooth that you barely notice the state change.
  51. U X & U I P A T T E

    R N S Passbook Perfect The transition between list and detail view is so fluid that you don’t really think of it as a transition.
  52. U X & U I P A T T E

    R N S What to expect in 2016? Semantic Animation
  53. U X & U I P A T T E

    R N S The merging of web and app
  54. U X & U I P A T T E

    R N S In the future, there will be no distinction between native and web apps. The two worlds will merge. We already see this happen on both mobile and desk computers. The merging of web and app
  55. U X & U I P A T T E

    R N S Apple loves native apps: they are faster, interact with the system better, work offline and feel real. Google loves web apps: they don’t require installation, work on any OS and get all the browser features for free. Google is heading into the future much faster than Apple. Apple, it seems, doesn’t even see what’s wrong with native apps. Google, on the other hand, does see what’s wrong with the web, and gradually fixes it. Subtopic or example
  56. U X & U I P A T T E

    R N S Making the user go somewhere else - a place far away spatially, or disconnected from the original text, in another window - usually isn't a good idea. The user may not find the editor, for one thing. It also takes time to switch one's attention from one place to another, and the perceived complexity of the the interface is increased. Edit-in-Place
  57. U X & U I P A T T E

    R N S Edit-in-Place means: When the user clicks or, more typically, double-clicks on a text to be edited, simply replace it with an editable text field containing the string. Anything the user types is then entered into the text field. End the edit session when the user clicks somewhere else. Edit-in-Place
  58. U X & U I P A T T E

    R N S A common example is dragging an icon on a virtual desktop to a special trashcan icon to delete a file. Further examples include: • Dragging a data file onto a program icon or window for viewing or processing. For instance, dropping an icon that represents a text file into a Microsoft Word window signifies "Open this document as a new document in Word" • Moving or copying files to a new location/directory/folder, • Adding objects to a list of objects to be processed, • Rearranging widgets in a graphical user interface to customize their layout, • Dragging an attribute onto an object to which the command is to be applied, • e.g. dragging a color onto a graphical object to change its color, • Dragging a tool to a canvas location to apply the tool at that location, • Creating a hyperlink from one location or word to another location or document. • Most word processors allow dragging selected text from one point to another. • Dragging a series of codeblocks such as in Blender for designing shaders and materials. Edit-in-Place
  59. U X & U I P A T T E

    R N S Drag and drop is a pointing device gesture in which the user selects a virtual object by "grabbing" it and dragging it to a different location or onto another virtual object. Drag and Drop
  60. U X & U I P A T T E

    R N S Asynchronous HTTP requests means web applications can send data to and retrieve from a server in the background without interfering with the display and behavior of the existing page. Asynchronous web
  61. U X & U I P A T T E

    R N S Asynchronous web Synchronous • means that you call a web service (or function or whatever) and wait until it returns - all other code execution and user interaction is stopped until the call returns. Asynchronous • means that you do not halt all other operations while waiting for the web service call to return. Other code executes and/or the user can continue to interact with the page (or program UI).
  62. U X & U I P A T T E

    R N S What to expect in 2016? The merging of web and app
  63. U X & U I P A T T E

    R N S Social responsibility
  64. U X & U I P A T T E

    R N S The main goal of technology is to make life easier, and we are going to see some social examples now. Social responsibility
  65. U X & U I P A T T E

    R N S ”Be My Eyes” App surprised everyone in 2015 with just a simple concept that makes the life of blind people much easier. After installing the App, you have to select if you are a blind person (in that case you have the OS Accessibility options in your smartphone to browse in the App) or you are a sighted helper. As a helper you just need to input the languages you speak. With this App, using video features of your smartphone, you can have a videoconference with a blind person, where you will be able to help, describing what you see in the video feed you receive from the blind person. Be my eyes
  66. U X & U I P A T T E

    R N S You could help reading a letter that arrived in the mailbox, describing something you see, etc. At this point this App has 341k sighted helpers and 26k blind people using it, with more than 126k times help offered. The App is so successful that as a helper, if you don’t answer the request notification for help quickly, someone else does and you lose the opportunity to help!. This App is only available for iOS at this moment, as the immense majority of blind people use iOS due to better OS Accessibility options, compared to Android OS. Be my eyes
  67. U X & U I P A T T E

    R N S UNI is a two-way communication tool for the deaf using gesture and speech technology. UNI pro is a tablet that doesn’t require data connection to work. UNI
  68. UNI

  69. U X & U I P A T T E

    R N S There are plenty of other examples: an app that gives a voice to people with speech disorder, app with no words that speaks to autistic children, app that uses voice recognition to convert voice to text (so deaf people can “hear” phone calls by reading), app that amplifies sounds (for people with hearing difficulties who don’t use a hearing aid), etc. More examples
  70. U X & U I P A T T E

    R N S Thanks to the Google Cardboard, a woman, who had been visually challenged for the past eight years, is finally able to see things again. Google Cardboard
  71. U X & U I P A T T E

    R N S What to expect in 2016? Social responsibility
  72. U X & U I P A T T E

    R N S Health-based features
  73. U X & U I P A T T E

    R N S A new feature that will change your screen's color to account for the time of day to make it easier on your eyes. It shifts the colors of your screen to provide warmer hues during later hours of the day. iOS Nightshift
  74. U X & U I P A T T E

    R N S It may provide better sleep for those who tend to use their device in bed. It also prevents your iPhone or iPad from lighting up the whole room, which bedmates will appreciate. iOS Nightshift
  75. U X & U I P A T T E

    R N S Almost all gadgets with a display give off blue light, and while it’s perfectly healthy to absorb as much as you like during the day, it’s not something you want to take in at night. Using phones and tablets close to bedtime can make falling and staying asleep more difficult. That’s because blue light tricks our circadian rhythm, or natural body clock, into thinking that it’s daytime. It also boosts attention and reaction times, and interferes with our bodies’ production of melatonin, the hormone that induces sleep, making it difficult to nod off. iOS Nightshift
  76. U X & U I P A T T E

    R N S It’s not just your sleep that suffers, either; multiple studies have linked exposure to blue light and disrupted circadian rhythms to heart disease, diabetes, obesity and even cancer. Harvard researchers were able to increase blood sugar levels and lower the level of leptin, a hormone that causes people to feel full after a meal, in 10 people simply by changing their circadian rhythms. iOS Nightshift
  77. U X & U I P A T T E

    R N S What to expect in 2016? Health-based features
  78. U X & U I P A T T E

    R N S Smart-linking Apps
  79. U X & U I P A T T E

    R N S During the last years, when the users wanted to access information related to an App, brand or service, they didn’t have other choice but to open the App itself, and search for the content, hopefully, with the use of a search feature in the App itself. Nowadays, the users have plenty of apps installed, and finding the right content at the right time becomes more difficult. The customers are demanding more and more simplicity. Smart-linking Apps
  80. U X & U I P A T T E

    R N S Google and Apple both updated their OS to allow content from the Apps to be accessible from outside of the App itself. Smart-linking Apps
  81. U X & U I P A T T E

    R N S A minor UI update is solving the biggest problem on smartphones right now: By predicting what you want to do next in any app, Now on Tap could become a very big deal. Google Now on Tap
  82. U X & U I P A T T E

    R N S Google presented “Google now on Tap” for Android 6. With Now on Tap, you can get assistance without having to leave what you’re doing. You just need to tap & hold the home button from any screen (App or website), and relevant Apps will be suggested, according to the contextual information that was being consumed by the user in that moment. Google Now on Tap
  83. U X & U I P A T T E

    R N S For the first time ever on iOS, there is a fluid system in place to help you navigate between apps. Apple Spotlight
  84. U X & U I P A T T E

    R N S Apple came with a different feature, the combination of the “Spotlight” search already present in the previous iOS (a feature to perform a general search in the OS), mixed with a way of developing Apps to accept deep linking. This basically means that developers need to update their Apps to let Spotlight search index somehow the content in them. This way Spotlight can display relevant results to the users when they perform a search, offering installed Apps as suggestions, or even Apps from the Apple Store not yet installed. Apple Spotlight
  85. U X & U I P A T T E

    R N S Apple came up with three new APIs: 1 Allows application developers to tell iOS about the app’s content, and a deep link to that
 2 Allows application developers to specify any web content iOS should index via Apple web crawlers
 3 Allows for any activity type to get indexed (e.g. steps inside of the health app) Apple Spotlight
  86. U X & U I P A T T E

    R N S Apple Spotlight Searching for Maui shows a deep linked result, with origin and destination pre-filled in to the Kayak app.
  87. U X & U I P A T T E

    R N S What to expect in 2016? Smart-linking Apps
  88. U X & U I P A T T E

    R N S Face detection
  89. U X & U I P A T T E

    R N S A new option for doing creative enhanced video selfies. ‚Lenses‘ are being created by an in-house team at Snapchat, and one new lens will rotate in every day. Snapchat Lenses
  90. U X & U I P A T T E

    R N S Snapchat Lenses • Press and hold on your face to activate • At the bottom of the screen, you can scroll horizontally among the available lenses • Some lenses don't require any action to work, but most ask you to raise your eyebrows or perform other small movement to function
  91. U X & U I P A T T E

    R N S Snapchat Lenses
  92. U X & U I P A T T E

    R N S Snapchat Lenses
  93. U X & U I P A T T E

    R N S Snapchat Lenses
  94. U X & U I P A T T E

    R N S Snapchat Lenses
  95. U X & U I P A T T E

    R N S Snapchat Lenses
  96. U X & U I P A T T E

    R N S Snapchat Lenses
  97. U X & U I P A T T E

    R N S Snapchat Lenses
  98. U X & U I P A T T E

    R N S Snapchat Lenses
  99. U X & U I P A T T E

    R N S Snapchat Lenses
  100. U X & U I P A T T E

    R N S Record video selfie animations, change the way you look and send it to friends via your favorite messengers and social networks. MSQRD
  101. U X & U I P A T T E

    R N S MSQRD
  102. U X & U I P A T T E

    R N S Lets you switch faces with a friend or a photo in real- time. Record videos or photos of yourself swapping faces with a celebrity, friend or any fun picture from the internet or your phone. Face Swap Live
  103. U X & U I P A T T E

    R N S Face Swap Live
  104. U X & U I P A T T E

    R N S What to expect in 2016? Face detection
  105. U X & U I P A T T E

    R N S Mobile Storytelling
  106. U X & U I P A T T E

    R N S Snapchat lets you talk with friends, share and view Live Stories from around the world, and explore news in Discover. Snapchat
  107. U X & U I P A T T E

    R N S Users can take photos, record videos, add a filter, "Lens", text, or sketch overlay, and send them to a controlled list of recipients. These sent photographs and videos are known as "Snaps". Users set a time limit for how long recipients can view their Snaps, after which Snapchat claims they will be deleted from the company's servers. Snapchat
  108. U X & U I P A T T E

    R N S Snapchat eventually came to develop a larger focus on its "Stories" functionality, which allows users to compile snaps into a "story" that can be viewed by other users in chronological order, with each snap available for 24 hours after its posting. Alongside users' stories, Snapchat also features curated "live stories", with content from various users focusing on a specific theme or event, as well as channels of short-form content from major publishers. Beginning November 2015, certain lenses could be purchased using microtransactions, but seven free lenses are cycled daily. Snapchat
  109. U X & U I P A T T E

    R N S Snapchat Basics
  110. U X & U I P A T T E

    R N S Snapchat Geofilter
  111. U X & U I P A T T E

    R N S Snapchat Geofilter
  112. U X & U I P A T T E

    R N S Snapchat Geofilter
  113. U X & U I P A T T E

    R N S Snapchat Geofilter
  114. U X & U I P A T T E

    R N S Snapchat Geofilter
  115. U X & U I P A T T E

    R N S Snapchat Geofilter
  116. U X & U I P A T T E

    R N S Snapchat Geofilter
  117. U X & U I P A T T E

    R N S Snapchat Geofilter
  118. U X & U I P A T T E

    R N S Snapchat Geofilter
  119. U X & U I P A T T E

    R N S Snapchat Geofilter
  120. U X & U I P A T T E

    R N S Snapchat Stories Combination of „Lenses“, emojis and hand writing features.
  121. U X & U I P A T T E

    R N S Snapchat Stories
  122. U X & U I P A T T E

    R N S Snapchat Live Stories
  123. U X & U I P A T T E

    R N S Snapchat Discover
  124. U X & U I P A T T E

    R N S Snapchat
  125. U X & U I P A T T E

    R N S Facebook Mobile Video Trends
  126. U X & U I P A T T E

    R N S Facebook Live
  127. U X & U I P A T T E

    R N S Facebook 360° Video
  128. U X & U I P A T T E

    R N S Up top, it looks you can now actually input your own URL should you want to check another page without leaving the Facebook app. You might want to fact-check a detail on an article you read, for instance, or define a word you didn’t understand. Meanwhile a new bar on the bottom tells you how popular a post is, includes back and forward buttons, lets you bookmark pages, and has a menu button which likely includes a few more features too (unfortunately we can’t access the new browser ourselves yet). Facebook In-app browser
  129. U X & U I P A T T E

    R N S Facebook in-app browser
  130. U X & U I P A T T E

    R N S Facebook has become the source of news for a lot of people, skipping news websites and Apps. You browse the feed while having breakfast, comment, like, etc. I am sure some people from this audience experimented opening articles that people share on Facebook, and having to wait for the Facebook mini browser to render the website properly, in some cases, even closing and re-opening the link again. Facebook Instant Articles
  131. U X & U I P A T T E

    R N S Facebook knows that opening shared links in their App can be a painful experience, so they created rich media oriented “instant articles”, vitaminated articles for publishers to create compelling reading stories, or like Facebook says: “a faster, more beautiful reading experience”. Facebook Instant Articles
  132. U X & U I P A T T E

    R N S Leveraging the same technology used to display photos and videos quickly in the Facebook app, articles load instantly, as much as 10 times faster than the standard mobile web. On April 12th at Facebook's F8 conference, they will open up the Instant Articles program to all publishers—of any size, anywhere in the world. This is a nice invitation for any company that wants to use Facebook for marketing or editorial reasons. For Facebook it is a good way to offer even more reasons for users not leave the Facebook App. Facebook Instant Articles
  133. U X & U I P A T T E

    R N S What to expect in 2016? Mobile Storytelling
  134. U X & U I P A T T E

    R N S Facebook Advertising
  135. „ U X & U I P A T T

    E R N S RICH MEDIA MARKETING LOADS FAR TOO SLOW ON MOBILE Facebook
  136. U X & U I P A T T E

    R N S Rich media marketing loads far too slow on mobile. Facebook now built the endpoint of ads into its own app so it can pre-load and show them in about one second. Canvas interactive mobile ads are an immersive way to reach people without making them leave the social network. Facebook Canvas
  137. U X & U I P A T T E

    R N S Designed for mobile • Canvas was built to bring your content to life in a fast-loading and seamless experience on Android and iOS. Canvas is supposed to load ~10 times faster than the standard mobile web. Made for storytelling • You may use a combination of videos, still images and call-to- action buttons. In Canvas, people can swipe through a carousel of images, tilt to view panoramic images and zoom in to view images in detail. Facebook Canvas
  138. U X & U I P A T T E

    R N S Flexible for any objective • With Canvas, you have complete creative control to achieve any objective like telling your brand story, promoting a new movie and showcasing your products. Easy build tool • Brands can build Canvas ads with a self-serve tool. There’s no code required. Facebook’s design tool lets them just drag around images, GIFs, videos, and more, then set attributes and start showing their ad. Facebook Canvas
  139. U X & U I P A T T E

    R N S $$$ • There’s no additional cost to build a canvas ad. Businesses just pay for the same News Feed ads as always, but get to build a better destination where they lead. Facebook Canvas
  140. U X & U I P A T T E

    R N S Facebook Canvas
  141. Facebook Canvas U X & U I P A T

    T E R Coca Cola reached nearly 16 million people and had an average view time of 18 seconds.
  142. Facebook Canvas U X & U I P A T

    T E R Lowe’s wanted to connect with aspirational young homeowners about easy and trendy home do-it-yourself projects. On average people spent 28 seconds exploring their Canvas.
  143. U X & U I P A T T E

    R N S What to expect in 2016? Facebook Advertising
  144. Q U E S T I O N S ?

    R X U F O U M
  145. Alexander Meinhardt krunchtime.org KRUN C H T I M E

    I NT E R ACT I V E Iker Ortiz de Arri COAU T H ORS