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




0 download

Embed Size (px)


  • (Replace with full screen background image)



    Our last mobile UX/UI trends report reached over 100,000 readers

    and we hope that this year, you will find it even more interesting and

    exciting. Its our ambition to help guide business developers, project

    managers, developers and of course designers to understand and

    implement better UX/UI design for mobile.

    Last year we spoke about Mobile First, this year we dare to talk about

    Mobile Only. What we mean by that is to reach your users, a strong

    mobile presence is more important than ever and for many of our

    customers its the only interface towards users. Examples of this include

    consumer services such as ber and HotelTonight as well as enterprise

    applications such as the 3M WaterDealer and Warburtons Red Insight.

    At the same time Google is elevating the importance of mobile in search

    by giving priority to websites that are properly optimized for mobile

    from April 2015. It is indisputable that this type of action from one of the

    biggest players in the industry sends out the unmistakable message

    that the threshold to mobile only has been crossed.


  • (Replace with full screen background image)

    1. OMNICHANNELThere are so many ways and possibilities to engage with users today,

    mobile being the primary interface. The expectation from customers

    is a seamless experience across web, mobile and in-store. Some

    examples are in-store experiences using tablets, beacons, NFC,

    personalised touch screens and of course the customers smartphone

    through an app or mobile web.

  • WHY DO IT?

    An app or mobile web is a great start, but what is there beyond that?

    With research and customer experience mapping we can understand

    both business and user needs. Our job as UX/UI designers and

    Business Strategists is to then make sure that the needs are met.

    With all these possibilities to ensure a seamless experience, bear in

    mind its not only about your customers or your competitors customers,

    its about all users.

  • (Replace with full screen background image)

    2. PHABLETS - ADAPTIVE DESIGNMost mobile apps or webs have the same layouts applied for both

    Phablets and Smartphones. However, the layout for a Phablet and

    Smartphone should ideally take full advantage of different screen

    sizes. Phablets frequently replace tablets and therefore the design is

    expected to be as rich as tablets. For Landscape mode we should also

    consider displaying a different layout if it adds value to the service.

  • WHY DO IT?

    The introduction of phablets has opened another door for adaptive

    design. Whereas before we could have considered the smartphone

    as more of an on-the-go device, and tablets perhaps more for leisure

    or home use, the widespread adoption of the phablet has blurred this

    line. This puts more challenges on UX/UI Designers, Developers and

    budgets as we now need to consider the multiple use cases for the new

    larger screen size, and ensure the best user experience can be created.

    In reality, its about making the most of the new opportunities presented

    by this in-between device, so always keep in mind how a phablet is

    actually used.

  • (Replace with full screen background image)

    3. DESIGN FOR A 3D SPACE & MATERIAL DESIGNLast year we discussed layered interfaces and the importance of well-

    made animations and transitions. With Material Design, Android have

    taken many of these design principles on board and created a great

    concept of their own. Meaning with motion and layered interfaces are

    a big part of Material Design and are excellent ways to guide users

    through the experience. We still need to highlight that Meaning with

    motion, if not well-executed, can end up being Annoying with motion.

  • WHY DO IT?

    Designing for a 3D space and using layers in the z-axis gives the user

    a very clear idea of the apps hierarchy and is a great way to guide the

    user throughout the experience. An example of guiding the user is the

    highlighted Floating Action Button which clearly indicates where the

    user needs to tap for the next step.

    When applying Meaning with motion we guide and clarify navigation

    to the user, which actions the user has performed and which actions are

    expected next. When implemented as part of the flow, the user learns

    while using the app rather than from a tutorial meaning that app use

    becomes intuitive.

  • (Replace with full screen background image)

    4. GEOMETRIC ELEMENTS & DYNAMIC LAYOUTUsing geometric elements such as a diagonal lines as dividers to

    separate between sections, images or texts creates a dynamic layout

    and also nicely lead the user forward from one section to the next.

    We will see more geometric elements such as hexagons or triangles

    as background patterns or to highlight information in addition to more

    traditional circles and boxes used. This trend is simply the next step in

    the UX evolution, and with content being so dynamic it is only natural

    that this is reflected in the User Interface.

  • WHY DO IT?

    It is natural for designers to try and break the mold and experiment

    with new visual solutions. These trends appear frequently and while

    many are adopted as they strike an aesthetic chord, not all have been

    devised with improved functionality in mind. However, dynamic layouts

    are something that have emerged recently to break standard layout

    patterns and as a way to guide the user through the experience. This

    approach needs to fit well with the brand and may not be suitable for all

    solutions, nevertheless it is an interesting approach to consider.

  • (Replace with full screen background image)

    5. FONTS WITH A PURPOSEWe love fonts and to use the right font or style for the right purpose is

    a big part of the UX/UI Design. Headlines should stand out and longer

    paragraphs should be easy to read. Sans Serif typefaces (Helvetica,

    Open Sans, Roboto, Avenir) are in general more legible than Serif

    typefaces (Playfair, Garamond, Times New Roman) on a digital screen.

    Kerning, leading, styles and sizes are all important factors to take into

    account when creating and implementing your designs.

  • WHY DO IT?

    The right use of fonts is as important as the right use of images,

    colours, and icons to create hierarchy and contrast between headlines

    and paragraphs, to organize the content and most importantly, for

    readability and call to action.

    Serif fonts for paragraphs are more readable for print and are used

    almost by default for newspapers, magazines and books. However,

    in digital the legibility when using Serif fonts decreases depending

    on the screen resolutions. Even though many of the latest devices

    have high screen resolutions, Sans Serif fonts are still often used and

    recommended for digital formats.

  • (Replace with full screen background image)

    6. BIOMETRICSThere is a world out there for biometric mobile integrations. Fingerprint,

    heartbeat and voice authentication, retina and face scan, brain activity

    measurements, physiological values indicating health read by skin-

    like patches and many more. Even though many are still in Beta phase,

    we expect to see a huge rise in the number of biometric mobile

    integrations this year. There has been a great deal of focus in Research

    and Development within this sphere, and exciting use cases in both

    mHealth as well as Security are being investigated.

  • WHY DO IT?

    Biometric mobile integrations make us more efficient. Even though

    fingerprint authentication is no longer 100% safe (Apples Touch ID was

    hacked by photographing a users fingerprint from a glass surface and

    using the captured image to verify the login credentials), it is still a very

    efficient authentication method for mobile. Heartbeat authentication is

    in Beta phase and seems to be 100% safe and just as efficient. This has

    the ability to change the UX for any action which needs authentication,

    such as payments, mobile banking or even as simple as a private log in.

    Biometrics used for controlling your health is another step in the right

    direction and is indicative of how technology is now becoming such an

    integral part of our daily lives, that it becomes invisible. The constant

    monitoring of health and fitness values will not impact on our daily

    activities, but the the results and findings will allow us to address them

    by changing our habits or take other measures. In the long-run, we are

    looking at a future where the wide-ranging benefits will mean healthier


  • (Replace with full screen background image)

    7. CARDSCards are an intuitive, efficient and attractive way to group information in

    an outlined box. It makes it clear what information is related to the card

    and what actions you can take. Most frequent card types are Records

    (Apple Passbook), Teasers (Pinterest) and Alerts (Tinder). Most common

    layouts are Boards (Pinterest), Feeds (Social networks) or Stacks (Apple


  • WHY DO IT?

    Cards are used to group together inf