Mobile UI. Cross-Platform Application Development 1 0 / 3 / P E N S A C O L A B E A C H - I T E N W I R E D

Transcription

1 Mobile UI Cross-Platform Application Development L ANDON ZABCIK L ANDONZ@GMAIL.COM LINKEDIN.COM/IN/L ANDONZ L ANDONZ.COM 1 0 / 3 / P E N S A C O L A B E A C H - I T E N W I R E D

2 Mobile Computing Mobile devices account for ~ 30% of web traffic Mobile traffic up 80%+ YoY Mobile traffic in 2013 was 18x total traffic in 2000 Smartphones still the biggest growth driver for Internet traffic Apple App Store revenue $10+ billion in 2013, Google ~ $4 billion Mobile app dev in 2013 estimated at $200-$500 billion 10/8/2014 2

3 2013 IT Spending Estimates Software is the largest component of IT spending 10/8/2014 3

4 Mobile Application Development National average of $100k - $144k in 2014 Compensation growth rate of 8% annually Fastest growing segment of Technology employment 10/8/2014 4

5 How is Mobile Different? Mobile Device characteristics changes the way and we constraints think Few Tactile devices / touch have input done / input this devices before (the clock, books, the Internet) Scanning, Screen sizelinking Unlimited Download and speed un-fettered access to information Environment and expected usage Mobile changes the way we live Mobile!= Desktop (and vice versa) Convenience Immediate Mobile constraints feedback and and differences results require different UI design Online interaction with others These changes dictate Mobile Usability 10/8/2014 5

6 Early Mobile Problems Mobile 2004 = Desktop 1996 Initial success rates < 40% Painful load times Impossible-to-touch targets Restricted content (flash, image maps) Scrolling, bloated pages 10/8/2014 6

7 Mobile UI Design Skeuomorphism UI takes design cues from a similar object that exists in the real world Can make the UI more relatable, provides several affordances Taken to the next level by Apple Provides an opportunity for beautiful design detail Great idea for a completely new device and UI Gloss, shine, depth and light 10/8/2014 8

8 Skeuomorphism Problems Distracting Chrome may be more detailed (beautiful) than the content Navigation difficulties More difficult to tell what is clickable Not always a clear relationship between the UI and the real object Next article Typography 10/8/2014 9

9 Mobile UI Design Metro Content over Chrome Introduced by Microsoft Flatter UI, bolder colors Square is okay Typography emphasis Attempt at clarity Lateral scroll 10/8/

10 Metro Problems Fewer affordances Loss of information scent Applied to desktop 10/8/

11 Mobile UI Design ios 7 Based off of metro usability principles Attempt to clarify content, aid scanning Bolder, meaningful colors (contrast) Larger typography Attempt to add in information scent 10/8/

12 ios7 Problems Loss of some affordances Loss of some information scent Inconsistent use of color (developers) Inconsistent fonts 10/8/

13 Mobile UI Design Material Design Google s update 2014 Follows ios 7 & Metro Adds depth to elements: Flat 3d Animation adds information scent Paper surface returns some affordances 10/8/

14 UI Design HPHMI High Performance Human Machine Interface Primarily used in control systems Everything should have meaning Information conveyed at a single glance 10/8/

15 Mobile UI Design Best Practices Follow your target OS guidelines where possible Colors have meaning, can aid in navigation, information scent Avoid un-necessary elements (text, images, chrome, etc.) Design for device usability Layered navigation with information scent Feedback Design for quick, efficient use, your app is not the most important! 10/8/

16 Mobile UI Design Example: PNJ Android App 10/8/

17 Material Design Example: Instagram Concept 10/8/

18 Mobile UI Design Don ts Excessive elements or text (prevents scanning) No navigation or non-layered navigation Inconsistencies Up-front registration or instructions Reduced functionality Incorrect command overload Never use sound Don t ask for too much 10/8/

19 Mobile UI Future Increased animations Animation bubble? Touch gestures reduction Gestures Voice interaction TV / Media NFC / hover 10/8/