10 Design Trends 2015 - UX & UI Trends for Mobile Solutions

Download 10 Design Trends 2015 - UX & UI Trends for Mobile Solutions

Post on 18-Jul-2015

7.372 views

Category:

Design

0 download

Embed Size (px)

TRANSCRIPT

<ul><li><p>(Replace with full screen background image)</p><p>10 DESIGN TRENDS 2015UX &amp; UI TRENDS FOR MOBILE SOLUTIONS</p></li><li><p>DID WE SAY MOBILE FIRST?WE MEANT MOBILE ONLY!</p><p>Our last mobile UX/UI trends report reached over 100,000 readers </p><p>and we hope that this year, you will find it even more interesting and </p><p>exciting. Its our ambition to help guide business developers, project </p><p>managers, developers and of course designers to understand and </p><p>implement better UX/UI design for mobile.</p><p>Last year we spoke about Mobile First, this year we dare to talk about </p><p>Mobile Only. What we mean by that is to reach your users, a strong </p><p>mobile presence is more important than ever and for many of our </p><p>customers its the only interface towards users. Examples of this include </p><p>consumer services such as ber and HotelTonight as well as enterprise </p><p>applications such as the 3M WaterDealer and Warburtons Red Insight. </p><p>At the same time Google is elevating the importance of mobile in search </p><p>by giving priority to websites that are properly optimized for mobile </p><p>from April 2015. It is indisputable that this type of action from one of the </p><p>biggest players in the industry sends out the unmistakable message </p><p>that the threshold to mobile only has been crossed.</p><p>Enjoy!</p></li><li><p>(Replace with full screen background image)</p><p>1. OMNICHANNELThere are so many ways and possibilities to engage with users today, </p><p>mobile being the primary interface. The expectation from customers </p><p>is a seamless experience across web, mobile and in-store. Some </p><p>examples are in-store experiences using tablets, beacons, NFC, </p><p>personalised touch screens and of course the customers smartphone </p><p>through an app or mobile web.</p></li><li><p>WHY DO IT?</p><p>An app or mobile web is a great start, but what is there beyond that? </p><p>With research and customer experience mapping we can understand </p><p>both business and user needs. Our job as UX/UI designers and </p><p>Business Strategists is to then make sure that the needs are met.</p><p>With all these possibilities to ensure a seamless experience, bear in </p><p>mind its not only about your customers or your competitors customers, </p><p>its about all users. </p></li><li><p>(Replace with full screen background image)</p><p>2. PHABLETS - ADAPTIVE DESIGNMost mobile apps or webs have the same layouts applied for both </p><p>Phablets and Smartphones. However, the layout for a Phablet and </p><p>Smartphone should ideally take full advantage of different screen </p><p>sizes. Phablets frequently replace tablets and therefore the design is </p><p>expected to be as rich as tablets. For Landscape mode we should also </p><p>consider displaying a different layout if it adds value to the service.</p></li><li><p>WHY DO IT?</p><p>The introduction of phablets has opened another door for adaptive </p><p>design. Whereas before we could have considered the smartphone </p><p>as more of an on-the-go device, and tablets perhaps more for leisure </p><p>or home use, the widespread adoption of the phablet has blurred this </p><p>line. This puts more challenges on UX/UI Designers, Developers and </p><p>budgets as we now need to consider the multiple use cases for the new </p><p>larger screen size, and ensure the best user experience can be created. </p><p>In reality, its about making the most of the new opportunities presented </p><p>by this in-between device, so always keep in mind how a phablet is </p><p>actually used.</p></li><li><p>(Replace with full screen background image)</p><p>3. DESIGN FOR A 3D SPACE &amp; MATERIAL DESIGNLast year we discussed layered interfaces and the importance of well- </p><p>made animations and transitions. With Material Design, Android have </p><p>taken many of these design principles on board and created a great </p><p>concept of their own. Meaning with motion and layered interfaces are </p><p>a big part of Material Design and are excellent ways to guide users </p><p>through the experience. We still need to highlight that Meaning with </p><p>motion, if not well-executed, can end up being Annoying with motion.</p></li><li><p>WHY DO IT?</p><p>Designing for a 3D space and using layers in the z-axis gives the user </p><p>a very clear idea of the apps hierarchy and is a great way to guide the </p><p>user throughout the experience. An example of guiding the user is the </p><p>highlighted Floating Action Button which clearly indicates where the </p><p>user needs to tap for the next step.</p><p>When applying Meaning with motion we guide and clarify navigation </p><p>to the user, which actions the user has performed and which actions are </p><p>expected next. When implemented as part of the flow, the user learns </p><p>while using the app rather than from a tutorial meaning that app use </p><p>becomes intuitive.</p></li><li><p>(Replace with full screen background image)</p><p>4. GEOMETRIC ELEMENTS &amp; DYNAMIC LAYOUTUsing geometric elements such as a diagonal lines as dividers to </p><p>separate between sections, images or texts creates a dynamic layout </p><p>and also nicely lead the user forward from one section to the next. </p><p>We will see more geometric elements such as hexagons or triangles </p><p>as background patterns or to highlight information in addition to more </p><p>traditional circles and boxes used. This trend is simply the next step in </p><p>the UX evolution, and with content being so dynamic it is only natural </p><p>that this is reflected in the User Interface.</p></li><li><p>WHY DO IT?</p><p>It is natural for designers to try and break the mold and experiment </p><p>with new visual solutions. These trends appear frequently and while </p><p>many are adopted as they strike an aesthetic chord, not all have been </p><p>devised with improved functionality in mind. However, dynamic layouts </p><p>are something that have emerged recently to break standard layout </p><p>patterns and as a way to guide the user through the experience. This </p><p>approach needs to fit well with the brand and may not be suitable for all </p><p>solutions, nevertheless it is an interesting approach to consider. </p></li><li><p>(Replace with full screen background image)</p><p>5. FONTS WITH A PURPOSEWe love fonts and to use the right font or style for the right purpose is </p><p>a big part of the UX/UI Design. Headlines should stand out and longer </p><p>paragraphs should be easy to read. Sans Serif typefaces (Helvetica, </p><p>Open Sans, Roboto, Avenir) are in general more legible than Serif </p><p>typefaces (Playfair, Garamond, Times New Roman) on a digital screen. </p><p>Kerning, leading, styles and sizes are all important factors to take into </p><p>account when creating and implementing your designs.</p></li><li><p>WHY DO IT?</p><p>The right use of fonts is as important as the right use of images, </p><p>colours, and icons to create hierarchy and contrast between headlines </p><p>and paragraphs, to organize the content and most importantly, for </p><p>readability and call to action. </p><p>Serif fonts for paragraphs are more readable for print and are used </p><p>almost by default for newspapers, magazines and books. However, </p><p>in digital the legibility when using Serif fonts decreases depending </p><p>on the screen resolutions. Even though many of the latest devices </p><p>have high screen resolutions, Sans Serif fonts are still often used and </p><p>recommended for digital formats. </p></li><li><p>(Replace with full screen background image)</p><p>6. BIOMETRICSThere is a world out there for biometric mobile integrations. Fingerprint, </p><p>heartbeat and voice authentication, retina and face scan, brain activity </p><p>measurements, physiological values indicating health read by skin-</p><p>like patches and many more. Even though many are still in Beta phase, </p><p>we expect to see a huge rise in the number of biometric mobile </p><p>integrations this year. There has been a great deal of focus in Research </p><p>and Development within this sphere, and exciting use cases in both </p><p>mHealth as well as Security are being investigated.</p></li><li><p>WHY DO IT?</p><p>Biometric mobile integrations make us more efficient. Even though </p><p>fingerprint authentication is no longer 100% safe (Apples Touch ID was </p><p>hacked by photographing a users fingerprint from a glass surface and </p><p>using the captured image to verify the login credentials), it is still a very </p><p>efficient authentication method for mobile. Heartbeat authentication is </p><p>in Beta phase and seems to be 100% safe and just as efficient. This has </p><p>the ability to change the UX for any action which needs authentication, </p><p>such as payments, mobile banking or even as simple as a private log in.</p><p>Biometrics used for controlling your health is another step in the right </p><p>direction and is indicative of how technology is now becoming such an </p><p>integral part of our daily lives, that it becomes invisible. The constant </p><p>monitoring of health and fitness values will not impact on our daily </p><p>activities, but the the results and findings will allow us to address them </p><p>by changing our habits or take other measures. In the long-run, we are </p><p>looking at a future where the wide-ranging benefits will mean healthier </p><p>lives.</p></li><li><p>(Replace with full screen background image)</p><p>7. CARDSCards are an intuitive, efficient and attractive way to group information in </p><p>an outlined box. It makes it clear what information is related to the card </p><p>and what actions you can take. Most frequent card types are Records </p><p>(Apple Passbook), Teasers (Pinterest) and Alerts (Tinder). Most common </p><p>layouts are Boards (Pinterest), Feeds (Social networks) or Stacks (Apple </p><p>Passbook) </p></li><li><p>WHY DO IT?</p><p>Cards are used to group together information in a very intuitive way and </p><p>permits for a very fast UX, meaning users can easily scan through a lot </p><p>of content and pinpoint information that is relevant to them.</p><p>Cards should be used where it makes sense and once a card has </p><p>been selected by the user, the information should be highlighted </p><p>and become a point of focus. Pinterest is an example of a great Card </p><p>solution due to the simplicity of it and how intuitive it is to use. Having </p><p>removed the navbar, the app utilizes the full screen for displaying </p><p>content/cards. Navigation is thumb-focused: swipe and scroll to </p><p>browse through content, bottom tab bar to select categories, and also </p><p>the hidden but genious long press for action accessible throughout the </p><p>whole app. Simply a very well-made Teaser Card App.</p></li><li><p>(Replace with full screen background image)</p><p>8. WITH LESS PATIENCE, SIMPLICITY IS MORE EFFICIENT. As mobile app users we are getting less and less patient and if the </p><p>concept or functionalities are not clear and straight-forward we will </p><p>most probably not use the app and uninstall it from the device. It is </p><p>important to always focus on the essence of UX/UI elements included </p><p>in an app or web. Rather remove functionalities and features than add </p><p>something that does not bring any real value for your business and your </p><p>users. Less...</p></li><li><p>WHY DO IT?</p><p>...is more. Solutions should be simple to use. Communicate with an </p><p>image, a short headline or video instead of long, often-ignored copy, </p><p>Use motions and hints to guide the user and always focus on few but </p><p>meaningful features that bring value to your business and to your users.</p><p>There is a lot of psychology involved in why it is important to keep it </p><p>simple. Here is an example. If you are given the option to choose 1 of </p><p>10 things you will probably have a harder time deciding which to select </p><p>than if you were only presented with three choices. You would also </p><p>probably not feel as comfortable after having made the choice as you </p><p>would have preferred choosing from fewer options. When choosing </p><p>from only three things you would probably feel more convinced you </p><p>had made the right choice as well as generally feeling better with </p><p>yourself about the decision.</p></li><li><p>(Replace with full screen background image)</p><p>9. THUMB-FOCUSED NAVIGATION. TREND OR STANDARD?Thumb-focused navigation for standard-sized smartphones includes </p><p>so many great UX principles so we like to call it a standard rather than a </p><p>trend. A solution that lets you navigate through the app using only one </p><p>hand a often a well-made thumb-focused navigation solution. Even </p><p>though Phablet users do not mind using two hands, thumb-focused </p><p>navigation is simply a great UX approach to keep in mind when creating </p><p>any mobile solution.</p></li><li><p>WHY DO IT?</p><p>Since we all have different sized hands, with this approach we can </p><p>create a similar experience for all users. This great UX approach </p><p>includes user interaction principles such as: </p><p>1. Swipe to left and right to navigate through the app. </p><p>2. Scroll up and down to navigate, to close articles or to reload a page. </p><p>3. Different length swiping to access multiple options such as delete, save, share or mark as read.</p><p>4. Bottom tab bar to switch between categories. </p><p>5. Long press to activate options such as share, like or access menu and with a continued movement of the finger pressed, select the option.</p></li><li><p>(Replace with full screen background image)</p><p>10. PRIVACYHow do you feel when an app wants to access your private content </p><p>such as photos, location or contacts? We are in general very protective </p><p>of our private information and its crucial to build trust in this step </p><p>of the process. We believe in transparency. When asking for private </p><p>information explain to the user the reasons why it is needed and what </p><p>value this brings. Rather than slowing down the experience we believe </p><p>this can create trust and make the user feel comfortable about sharing </p><p>private information.</p></li><li><p>WHY DO IT?</p><p>We believe that honesty and transparency are key in showing users </p><p>they can trust a solution. App users that feel comfortable sharing private </p><p>information and understand what they gain by sharing this information </p><p>will feel better about their experience and most likely stick with the app </p><p>and keep using it. When requesting a credit card number for an in-app </p><p>payment feature, explain the reasons why this data is required and what </p><p>the user gains by allowing access to their personal information.</p></li><li><p>BONUS SECTIONWHATS COMING!</p><p>To this years trends deck we have added a quick preview of what we </p><p>hope and believe we will see in the market this decade. </p><p>Exciting times! </p></li><li><p>(Replace with full screen background image)</p><p>FLEXIBLE BRACELETWe are very much looking forward to seeing this wearable device and </p><p>believe it will be a revolutionary product. The idea is to manipulate the </p><p>shape of the bracelet to either wear on the wrist or use as a regular </p><p>phone. With the sim card integrated in the bracelet there are no </p><p>dependencies on other mobile devices. Usability, size and comfort are </p><p>all critical factors that need to be solved to ensure the success of this </p><p>product. </p></li><li><p>(Replace with full screen background image)</p><p>INVISIBLESInvisibles are wearables that in a near future will be discretely </p><p>integrated onto, or into, our bodies such as MITs contraceptive chip or </p><p>Googles contact lenses. Invisibles can be used for health and fitness </p><p>but we also see big possibilities for other areas as well such as security </p><p>and payments. Invisibles will be a key element in making the User </p><p>Experience as seamless and unobtrusive as possible. Technology will </p><p>simply be an integral part of ourselves and our daily lives.</p></li><li><p>(Replace with full screen background image)</p><p>PROJECTIONS &amp; HOLOGRAMSCicret is now developing a prototype that reflects the device display on </p><p>your arm. We think the approach is very interesting however visibility, </p><p>contrast as well as interaction are variables that still need a lot of work </p><p>if this device is to become commercially viable and successful. </p><p>It would also be interesting to see a...</p></li></ul>