Toolkit for Implementing Sites & Apps

Transcription

1 Toolkit for Implementing Sites & Apps Choosing the right product, design and development paths Stephen Griffiths, Mobile Transformation Expert, Google

2 Choosing the right paths for your business... PRODUCT Path 1: Web - Web Site - Web App - Notifications Path 2: App Store - Hybrid App - Native App - Widgets + Notifications DESIGN UX - Dedicated - Responsive - Adaptive UI - Material Design Mobile First DEVELOPMENT Path 1: Web Technology - Web Site - Web App - Hybrid App Path 2: Native Code - Native App Executive Summary PRODUCT PATHS DESIGN PATHS DEVELOPMENT PATHS Re-think your proposition to exploit each product s unique capabilities, and role in customer lifecycle Achieve your goal of maximum sales (via Web reach) or repeat sales / engagement (via App features) Consider Web Apps to leverage the optimum blend of reach plus features (and drive more conversions) Use responsive design to resolve device and behaviour fragmentation in a flexible, sustainable way Consider Material Design as a solution to unify UI experiences across devices, web and apps Be Mobile First to create a - content, UI and code - baseline Smartphone experience, then scale-up Continue to use the huge Web developer population and tools to optimise site performance Build Native Apps that leverage rich sensors, services and UI, and a mature developer / tool ecosystem Consider building a Progressive Web App or using Polymer s crossbrowser modular elements

3 DESIGN CHOOSING THE RIGHT DESIGN PATH... UX Dedicated Responsive Adaptive UI Material Design Mobile First

4 Design Paths The problem is increasing device and user behaviour fragmentation and complexity Users multi-device / screen and expect a consistent and seamless experience Increasing complexity is the painful new reality that site and app design needs to embrace The UX solution is responsive or adaptive design for flexibility and sustainability Responsive detects / adapts to each device, and provides relatively futureproofed UX system Adaptive extends responsive, to serve different content per device / use case for optimum UX The UI solution is Material Design to unify UI experiences across devices, web, app A single underlying design system that defines how UIs should feel, move, adapt Be Mobile First, to ensure Smartphones provide baseline experience, then scale-up Prioritise the primary UX and content, and code for the smallest device first Take difficult business decisions before you scale-up to larger platforms

5 CONTEXT We face an increasing level of fragmentation and complexity in designing websites today! PLATFORMS DEVICES + OS SCREENS + RESOLUTIONS INPUTS POSTURES Which requires a systematic cross-platform, device, screen design approach Fragmentation of platforms From Computers to Tablets Smartphones Wear TV Auto New platforms keep emerging that necessitate new design considerations

6 Fragmentation of devices and OSs Android OS Versions ios OS Versions Android 5,600 Devices Apple 24 Devices Source: ScientiaMobile, MOVR 2015 Q1

7 Fragmentation of screens Smartphone Dimension and Orientation Popularity Tablet Dimension and Orientation Popularity Source: ScientiaMobile, MOVR 2015 Q1 Vast screen combinations across dimensions and orientations

8 We view / touch screens at various distances and postures iphone 6 Plus is very different Requires different type of grip due to its size Using little finger as a stabiliser 49% People 36% People 15% People Consider the natural thumb zone for repetitive / engaging user actions Source: scotthurff.com Fragmentation of user actions (and touch actions) Long Press Long Press Drag Double-touch Drag Given all contexts of use and fragmentation, you need to support as many as you can Pinch open Pinch closed Two-finger touch

9 UX PATH Designing cross-screen experiences is the painfully new reality... necessitating a systematically flexible and sustainable approach... and there are 3 paths to consider! Two main UX design paths to consider 1. DEDICATED 2. RESPONSIVE Multiple dedicated sites, e.g. main site for desktop and msite for Smartphones Single site served to all devices, e.g. device detects / adapts layout per device SITE 1 SITE 2 SITE 3 1 SITE Device-specific site Few dependencies Initial design cost / effort per site Browser detect device and adapts layout Flexibility of fluid grids and fluid images One codebase, deployment and URL Cross-device UX across sites / devices Device detect / direct (multiple URLs) Cost / effort to maintain multiple sites Image bloat (NB: use responsive images!) Testing complexity across devices Need greater design capabilities / maturity Ideal but unsustainable Sustainable ebay Apple Google Photos BBC News

10 De-risk responsive by starting with a responsive msite 1. DEDICATED 2. RESPONSIVE Multiple dedicated sites, e.g. main site for desktop and msite for Smartphones Single site served to all devices, e.g. device detects / adapts layout per device SITE 1 SITE 2 SITE 3 1 SITE What: responsively design your dedicated msite Why: flexibly adapt to different Smartphone device / screen types Benefit: adopt responsive design in stages and de-risk CvR impact on launch STEP 1 Responsive msite for Smartphones STEP 2...scale-up to Tablet STEP 3...scale-up to Desktop Examples / Case Studies: Google + (now scaled to all devices) m.huffpost.com (and Case Study) And, responsively scale-up to tablet and computer once the msite conversion rate stabilises Google+ evolution from responsive msite to all devices Challenge: maintaining two sites meant duplicate code, implementations, optimisations. Homepage weighed ~5MB and produced ~250 HTTP requests. It wasn t performing well Solution: one responsive design to work across mobile, tablet, desktop, and beyond. Established 6^5 rule so initial page load didn t download more than 60K HTML, 60K JavaScript, 60K CSS, animations were 60fps, average latency of 0.6s Desktop site Mobile site Responsive site Responsive site Result: built a complex web app with rich UI, faster and leaner than before, with superior performance

11 A third path is Adaptive, which extends responsive design 2. RESPONSIVE 3. ADAPTIVE Single site served to all devices, e.g. device detects / adapts layout per device Different sites served to each device where a different use case exists 1 SITE Browser detect device and adapts layout Flexibility of fluid grids and fluid images One codebase, deployment and URL Server detects device, screen, resolution to adapt site for optimum user experience Provide content for each use case / intent Best load-time and performance Image bloat (NB: use responsive images!) Testing complexity across devices Higher design capabilities / maturity needed Most cost / effort (initial and ongoing) Most testing complexity across devices Most design capabilities / maturity needed Sustainable and ideal AVIS.CO.UK

12 DEDICATED DESIGN Key benefit of a dedicated site design path is the ability to design an ideal single device experience, e.g. msite for Smartphones DEDICATED DESIGN EXAMPLE - ebay Device-specific site Few dependencies Initial design cost / effort per site Multiple dedicated sites, e.g. main site for desktop and msite for Smartphones Cross-device UX across sites / devices Device detect / direct (multiple URLs) Cost / effort to maintain multiple sites SITE 1 SITE 2 SITE 3 Conclusion: Ideal but unsustainable DESKTOP SITE SMARTPHONE SITE Dedicated Examples: ebay Macy's

13 RESPONSIVE DESIGN Key benefit of Responsive design is the ability to apply a flexible and sustainable UX system to deal with increasing complexity RESPONSIVE DESIGN EXAMPLE - Google+ Browser detects device and adapts layout Flexibility of fluid grids and fluid images One codebase, deployment and URL Single site served to all devices, e.g. device detects / adapts layout per device 1 SITE Image bloat (NB: use responsive images!) Testing complexity across devices Higher design capabilities / maturity needed Conclusion: Sustainable DESKTOP VIEW SMARTPHONE VIEW Responsive Examples: Google + Apple BBC NEWS PC WORLD Bathstore Tesco Bank Currys National Lottery Case Studies: Google + Plusnet Baines & Ernst Alpharooms

14 74% of mobile-friendly sites use responsive design 74% responsive design... 74% 26% Of the Responsive Sites, 49% Combine RWD with Server-Side Detection to provide an optimised experience Not Responsive Responsive 49% combine design... Adaptive 18% 49% of top sites combine approaches - driven by practical, real-world solutions mdot 31% Pure RWD 51%

15 ADAPTIVE DESIGN Key benefit of Adaptive design is that it extends responsive to show different content for each device where a different use case exists for optimum user experiences! ADAPTIVE DESIGN EXAMPLE - AVIS.CO.UK Server detects device, screen, resolution to adapt site for optimum user experience Provide content for each use case / intent Best load-time and performance Different sites served to each device where a different use case exists Most cost / effort (initial and ongoing) Most testing complexity across devices Most design capabilities / maturity needed Conclusion: Sustainable and ideal DESKTOP VIEW SMARTPHONE VIEW Adaptive Examples: AVIS.CO.UK

16 Grids + breakpoints can adapt to devices, screens, resolutions Adaptive UI Grid / Breakpoints (VIDEO) And, hide / show different content for each device where a different use case exists Google can help you identify which devices to support Material device metrics is a resource for sizing, resolution, etc. across devices

17 UX PATH What considerations are there in deciding on a design path? First consideration: cross device UX and scalability / flexibility 1.DEDICATED 2.RESPONSIVE 3.ADAPTIVE CROSS DEVICE UX: No (standalone site) Medium > High Optimum per platform SCALE TO NEW SCREENS: Partially with Responsive Always scales up / down Only scales per platform SCALE TO NEW PLATFORMS: Locked to single site design Always scales up / down Only scales per platform NB: you can also responsively design a dedicated msite in order to flexibly manage the ongoing fragmentation / complexity, then scale-up to larger devices when the conversion rate stabilises. Responsive is the most scalable / flexible path, and combined with Adaptive the optimum UX Second consideration: performance derived from that design 1.DEDICATED 2.RESPONSIVE 3.ADAPTIVE CROSS DEVICE UX: No (standalone site) Medium > High Optimum per platform SCALE TO NEW SCREENS: Partially with Responsive Always scales up / down Only scales per platform SCALE TO NEW PLATFORMS: Locked to single site design Always scales up / down Only scales per platform PERFORMANCE: May get re-direct latency Slow load from image bloat (use responsive images) Optimum per platform If you only serve content based on specific devices and use cases Adaptive can perform best

18 Third consideration: design effort and cost (initial and ongoing) 1.DEDICATED 2.RESPONSIVE 3.ADAPTIVE CROSS DEVICE UX: No (standalone site) Medium > High Optimum per platform SCALE TO NEW SCREENS: Partially with Responsive Always scales up / down Only scales per platform SCALE TO NEW PLATFORMS: Locked to single site design Always scales up / down Only scales per platform PERFORMANCE: May get re-direct latency Slow load from image bloat (use responsive images) Optimum per platform INITIAL EFFORT + COST: Few dependencies Has to work across devices Adapted per use case and device ONGOING EFFORT + COST: Update each site separately Update only one design but testing more complex Update each adaptation and testing more complex Dedicated design requires least initial effort / cost (but most ongoing), and Adaptive the most Final consideration: design capabilities and maturity needed 1.DEDICATED 2.RESPONSIVE 3.ADAPTIVE CROSS DEVICE UX: No (standalone site) Medium > High Optimum per platform SCALE TO NEW SCREENS: Partially with Responsive Always scales up / down Only scales per platform SCALE TO NEW PLATFORMS: Locked to single site design Always scales up / down Only scales per platform PERFORMANCE: May get re-direct latency Slow load from image bloat (use responsive images) Optimum per platform INITIAL EFFORT + COST: Few dependencies Has to work across devices Adapted per use case and device ONGOING EFFORT + COST: Update each site separately Update only one design but testing more complex Update each adaptation and testing more complex DESIGN CAPABILITIES / MATURITY REQUIRED: Simplest path to design with least dependencies Medium > High capabilities - more complex UX system Most advanced path - needs mature UX and UI capabilities Dedicated requires least capabilities, and Adaptive the most (both initially and ongoing)

19 UI PATH Google s Material Design unifies cross-device user interfaces A single underlying design system organizes interactions and space. Each device reflects a different view of the same underlying system > MATERIAL DESIGN SPEC For consistent user experiences across devices and Web and Apps

20 It defines characteristics for how UIs should feel, move, adapt Adaptive Design Bold & Beautiful Aesthetic Meaningful Motion Tangible Surfaces Design patterns for implementation Good practices for building touch UIs Think about each screen and what information is most relevant

21 Material Design examples Website Google Trends Android App Nordstrom Android App The Hunt > MATERIAL SHOWCASE Unify all digital touchpoints and experiences

22 MOBILE FIRST It is important to be Mobile First Mobile First approach to design / development is healthy Mobile first design is a cleansing process, since it forces you to... Prioritise the primary user experience and content And, place secondary content off-canvas (or remove altogether) Embrace the inherent constraints of mobile Limited screen real-estate, device and input fragmentation, etc. Identify how you want users to act (Smartphones display ~75% less than desktops) Use mobile first responsive design to drive performance (speed, image size, etc.) Develop for the smallest device first Embrace Smartphone constraints so mobile becomes your baseline experience Use media queries to progressively enhance / adapt as screens get larger Take difficult business decisions before you scale-up to larger platforms Google + Website was a mobile first, responsive design CASE STUDY: GOOGLE +

23 In summary, your design team should aim to support... PLATFORMS DEVICES + OS SCREENS Main platforms (for cross-device use) Consider new and emerging platforms Responsive design (sustainable path) Material Design (to unify Web & App UIs) Adaptive grids and breakpoints Highest resolution screens and images INPUTS Maximum inputs (you never know which will be used!) Optimise for touch POSTURES UX for natural thumbzones Image sizes per viewing distance Design and develop for Mobile First Embrace device and user behaviour complexities in order to design for them

24 In Summary, choosing the right paths for your business... PRODUCT Path 1: Web - Web Site - Web App - Notifications Path 2: App Store - Hybrid App - Native App - Widgets + Notifications DESIGN UX - Dedicated - Responsive - Adaptive UI - Material Design Mobile First DEVELOPMENT Path 1: Web Technology - Web Site - Web App - Hybrid App Path 2: Native Code - Native App Executive Summary PRODUCT PATHS DESIGN PATHS DEVELOPMENT PATHS Re-think your proposition to exploit each product s unique capabilities, and role in customer lifecycle Achieve your goal of maximum sales (via Web reach) or repeat sales / engagement (via App features) Consider Web Apps to leverage the optimum blend of reach plus features (and drive more conversions) Use responsive design to resolve device and behaviour fragmentation in a flexible, sustainable way Consider Material Design as a solution to unify UI experiences across devices, web and apps Be Mobile First to create a - content, UI and code - baseline Smartphone experience, then scale-up Continue to use the huge Web developer population and tools to optimise site performance Build Native Apps that leverage rich sensors, services and UI, and a mature developer / tool ecosystem Consider building a Progressive Web App or using Polymer s crossbrowser modular elements Return to Think with Google