mini-training: mobile ux trends

32
Mobile UX trends October 2014 Gabriel Soares

Upload: betclic-everest-group-tech-team

Post on 02-Dec-2014

171 views

Category:

Internet


0 download

DESCRIPTION

An introduction to recent trends in mobile user exeprience.

TRANSCRIPT

Page 1: Mini-Training: Mobile UX Trends

Mobile UX trends

October 2014 – Gabriel Soares

Page 2: Mini-Training: Mobile UX Trends

Summary

2

- Interface- Spaces & Content- Colors- Pictures & Effects- Gestures- Animations- Features & Animations

Page 3: Mini-Training: Mobile UX Trends

Interface

3

Pure Guidelines

iOS Human Interface Guidelines https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/

Android Design http://developer.android.com/design/index.html

Windows Phone Design Principleshttp://dev.windows.com/en-us/design

Multi OS apps

Common elements and displaySpecifications on some dedicated OS elements

Page 4: Mini-Training: Mobile UX Trends

4FIFA iOS

Page 5: Mini-Training: Mobile UX Trends

5FIFA Android

Page 6: Mini-Training: Mobile UX Trends

6Le Monde iOS

Page 7: Mini-Training: Mobile UX Trends

7Le Monde Android

Page 8: Mini-Training: Mobile UX Trends

Spaces & content

8

Elements: Be more functionnal and simplify interfaces, removing unnecessart elements to focus on buttons/actions

Content layered: Interfaces will become more layered and taking full advantage of the Z-axis. More depth for the user experience. Always need to be linked with gesture and animations.

Circles: new trend on webdesign by using circles on the interface

Infographics: great way to represent information in a small space

Page 9: Mini-Training: Mobile UX Trends

9Airbnb

Page 10: Mini-Training: Mobile UX Trends

10Yahoo News Digest Tinder

Page 11: Mini-Training: Mobile UX Trends

11Check – Bills & Money

Page 12: Mini-Training: Mobile UX Trends

Colors

12

Typography : size ,coulour, bold:

First user impression More readibilityBranding

Monochromatic or minimal use of colours:

- To make tap zones very clear- To focus on content and not only on graphics

Page 13: Mini-Training: Mobile UX Trends

13Vine iOS

Page 14: Mini-Training: Mobile UX Trends

14Tinder iOS Uber iOS

Page 15: Mini-Training: Mobile UX Trends

15

Pictures & Effects

Blurred backgrounds : focus the user’s attention to the content by playing with the layers

Large images: benefit of the UX on phablets and HD resolutions. Attractive imagery remember the fact of having a real picture on the hand

Page 16: Mini-Training: Mobile UX Trends

16Rdio Gogobot Medium

Page 17: Mini-Training: Mobile UX Trends

17Flipboard Android

Page 18: Mini-Training: Mobile UX Trends

Gestures

18

Swipe: standard used now for many actions like Go back, open a side menu, like or delete an item

Microinteractions (double tap, long press, shake..) : try to provide a physical shortcut for an action

Users don’t want complex gestures (3 finger tap..)

Page 19: Mini-Training: Mobile UX Trends

19Mailbox iOS Google Now Instagram

Page 20: Mini-Training: Mobile UX Trends

Animations

20

Animations should captive users attention but should always have a motivation of experience. Never abuse on motion effects

Splashscreen

Loading pages

Pull to refresh

Transitionshttp://dan-silver.github.io/ElementTransitions.js/

Page 21: Mini-Training: Mobile UX Trends

21

Splashscreen

http://capptivate.co/2014/08/26/hyperlapse/

http://capptivate.co/2014/02/17/reporter/

Transitions

http://capptivate.co/category/patterns/transitions/

http://capptivate.co/category/patterns/transitions/page/2/

http://i.imgur.com/PAw22Gn.gif

http://i.imgur.com/wbIWuKD.gif

Pull to refresh

http://capptivate.co/category/patterns/pull-to-refresh-patterns/

Page 22: Mini-Training: Mobile UX Trends

Features & Innovations

22

Wearable : Google glass, Smart watches , wrist bandsNew approach of design: highly contextualised, main features, simple actions

Touch ID:Easy way to login, pay with the fingerprint

Contextual awareness : Coupons : help on loyalty program and on the mobile to storeBluetooth smart : Low energy Bluetooth

Page 23: Mini-Training: Mobile UX Trends

23

Kia Google glass Twitter Google glass

Maps Google glass

Page 24: Mini-Training: Mobile UX Trends

24

Amazon iOS 1Password iOS

Page 25: Mini-Training: Mobile UX Trends

25MLB At the Ballpark iOS

Page 26: Mini-Training: Mobile UX Trends

Extras apps

26

Page 27: Mini-Training: Mobile UX Trends

27Show you iOS

Page 28: Mini-Training: Mobile UX Trends

28Umano iOS

Page 29: Mini-Training: Mobile UX Trends

29Runkeeper

Page 30: Mini-Training: Mobile UX Trends

Find out more

• On https://techblog.betclicgroup.com/

Page 31: Mini-Training: Mobile UX Trends

We want our Sports betting, Poker, Horseracing and Casino & Games brands to be easyto use for every gamer around the world.Code with us to make that happen.

Look at all the challenges we offer HERE

We are hiring !

Check our Employer Page

Follow us on LinkedIn

Page 32: Mini-Training: Mobile UX Trends

About Us• Betclic Everest Group, one of the world leaders in online

gaming, has a unique portfolio comprising variouscomplementary international brands: Betclic, Everest,Bet-at-home.com, Expekt, Monte-Carlo Casino…

• Through our brands, Betclic Everest Group placesexpertise, technological know-how and security at theheart of our strategy to deliver an on-line gaming offerattuned to the passion of our players. We want ourbrands to be easy to use for every gamer around theworld. We’re building our company to make that happen.

• Active in 100 countries with more than 12 millioncustomers worldwide, the Group is committed topromoting secure and responsible gaming and is amember of several international professional associationsincluding the EGBA (European Gaming and BettingAssociation) and the ESSA (European Sports SecurityAssociation).