2014 UX/UI trends for mobile solutions

Download 2014 UX/UI trends for mobile solutions

Post on 21-Apr-2017




3 download

Embed Size (px)


<ul><li><p>10 Design Trends2014UX/UI trends for mobile solutions</p></li><li><p>In the past year we have seen less and less skeumorphic design </p><p>but this doesnt mean that were moving towards two dimensional </p><p>interfaces. On the contrary, interfaces will become more layered and </p><p>taking full advantage of the z-axis. This approach gives a sense of </p><p>depth to the interface making the experience more tangible. </p><p>1. Layered Interfaces</p></li><li><p>Why do it?</p><p>Done right, this approach gives a real sense of 3D depth and will </p><p>establish a clear relationship between elements and interactions. This </p><p>is achieved by putting elements not in use at the back while placing </p><p>current interaction at the front.</p></li><li><p>While the ultimate goal is to simplify our interfaces and make them </p><p>more functional and usable, we should think twice when separating </p><p>content by lines and dividers.</p><p>2. Divide by elements &amp; spacing, not lines </p></li><li><p>Why do it?</p><p>UI design is moving towards removing any unnecessary elements to </p><p>focus much more on functionality. Less lines and dividers will always </p><p>give your interface a cleaner, modern and more functional feel. </p><p>Always remember that there are other ways to separate content with </p><p>methods such as using blocks, spacing or different colors.</p></li><li><p>The screen is not only a touch target but also a gesture target. </p><p>Touching and gesture capabilities, as well as more gesture-based </p><p>actions have emerged. Swipe gestures are used to: go back, reach </p><p>the menu or trigger actions such as share, like or delete items.</p><p>3. Swipe, swipe &amp; swipe</p></li><li><p>Why do it?</p><p>Although it may not be entirely self-evident initially, a gesture, once </p><p>discovered and learned, can become a delight to use and can bring </p><p>magic to the user experience, reducing steps in the user flow while </p><p>interacting with the interface. This allows for a quicker, more efficient </p><p>and comfortable experience for hand gestures since a larger area of </p><p>the screen is used for a function.</p></li><li><p>With the use of smartphones and mobile devices clearly increasing, </p><p>we find that people are using them in many different situations </p><p>and locations - while on the the subway, at work, at home, when </p><p>exercising etc. Users dont want complex gestures, like three finger </p><p>tapping or needing both hands to use the phone. Users will use </p><p>the phone with one hand and rely on their thumb more as they find </p><p>themselves in stuations where they dont always have both hands </p><p>free to use the device.</p><p>4. Thumb-focused interactions</p></li><li><p>Why do it?</p><p>When designing, take into consideration that your app will be used </p><p>in several contexts, people will not always be in the situation where </p><p>they can use more than one finger or both hands to interact with </p><p>your interface. Design for the lazy, this can increase the usage </p><p>of your app!</p></li><li><p>We will see a lot more apps with very simple color schemes. The use </p><p>of simpler color schemes is usually associated with the flat design </p><p>approach and the philosophy less is more. Using neutral colors for </p><p>the general scheme and adding just a bit of another stronger color for </p><p>calls to action, helps the user focus on the actions we want them to.</p><p>5. Simple color schemes</p></li><li><p>Why do it?</p><p>Simplifying the interface improves the user experience while having </p><p>too many colors can have a negative impact upon it. A good use of </p><p>colors highlights the action you want your users to carry out.</p></li><li><p>This year we will see an explosion of apps using this design pattern. </p><p>Were pretty sure well not only see this in the mobile space, but on </p><p>the web too.</p><p>6. Icons - Stroke &amp; fill</p></li><li><p>Why do it?</p><p>This gives better contrast between active and inactive sections. </p><p>Recognition of active tabs, controls and toolbars is more straightforward.</p></li><li><p>Designers are moving away from textures and skeumorphic designs </p><p>to a new approach where motion and depth create a 3D effect. </p><p>Movement and animations are vital elements when embracing </p><p>this new paradigm, giving fluidity and more meaning to the user </p><p>experience. The specs and technical capabilities of the new </p><p>mobile devices allow designers and developers to create more </p><p>complex animations.</p><p>7. Animations - Do it well or dont do it</p></li><li><p>Why do it?</p><p>Animated demo tutorials are a great way to capture users attention </p><p>while educating them on how best to use the app for the first time. </p><p>But dont animate just for the sake of it, have a clear motivation </p><p>behind the animation effects, the abuse of motion effects can </p><p>completely ruin the experience. </p></li><li><p>The use of Helvetica (mostly light or thin versions) in iOS 7 is still a </p><p>hot topic between designers and typographers. Were not saying </p><p>iOS 7 is perfect typography-wise, but the principle of simplifying </p><p>and reducing the numbers of fonts and weights is welcomed. </p><p>When designing an app think about how can you make the </p><p>typography powerful by playing with weights and dimensions, not </p><p>different typefaces.</p><p>8. One app, one typeface </p></li><li><p>Why do it?</p><p>This one goes hand in hand with simplifying color schemes and user </p><p>elements, as well as using space as dividers. The ultimate goal is </p><p>simplicity, functionality and usability. </p></li><li><p>Blur effects arise as a logical solution to a minimal user interface, </p><p>allowing a certain amount of play with the layers and hierarchy of </p><p>the interface.</p><p>9. Blur effects</p></li><li><p>Why do it?</p><p>Its a very efficient solution when working with layered UX/UI since </p><p>it gives the user a clear understanding of the mobile solutions </p><p>flow and hierarchy. This also gives designers a perfect opportunity </p><p>to explore different menu and overlay solutions. Even though we </p><p>eventually might grow tired of the effect it is an effective solution at </p><p>the present time.</p></li><li><p>2014 is the year of the Phablets. A Phablet is a merge between a </p><p>smartphone and a tablet and includes the best of both worlds. With </p><p>bigger screensizes come different layouts. Flexible devices are also </p><p>on the rise even though they might take longer than 2014 to </p><p>become a trend.</p><p>10. Phablets</p></li><li><p>Why do it?</p><p>The introduction and rise of Phablets will allow for layout adaptation </p><p>and UX solutions which perhaps were only previously taken into </p><p>consideration for tablets. Android devices are already on the </p><p>market with the Galaxy Note 3, while Apple and Windows will, in all </p><p>likelihood, shortly follow with their own devices.</p></li><li><p>web www.goldengekko.com email info@goldengekko.com </p><p>Fighting for a world full of mobile solutionssince 2005 </p></li></ul>