Menu

Subscribe

#IO2015: Note dump

on conf, google-io

Select session notes from Google I/O 2015.

Keynote (Watch)

Android M
  • App Permissions – You can choose which permissions you can agree to. Defers asking until the point in the UX process when the permission is needed.
  • Chrome Custom Tabs – Resolves existing UX issues surrounding in-app browsers/webviews/native browsers. With Custom Tabs, the web view will open over the top of the app and inherit all of Chrome's features – security, passwords, etc.
  • App Linking – Adds a namespace to the android manifest for verified links – so links are incorporated directly into the platform so they always open in the right application.
  • Mobile Payments – Android Pay promises better UX, more security than Google Wallet.
  • Fingerprint Support – Use fingerprint to authorize Android Pay transactions. Device unlock. Open authentication APIs so devs can incorporate fingerprint support to their own apps.
  • Power & Charging – Doze. Uses motion detection to put device into deeper sleep state. 2X performance improvements. The device can now act as charger for other devices with reverse USB.
  • UX Enhancements – Better word selection and context menus. Direct share, simplified volume controls.
Android Wear
  • 1,500 watch faces for Android Wear
  • Glanceable, actionable, effortless – all interactions should be this way, just like checking the time
  • Always on screens
  • Wrist gestures
  • Emoji recognizer – hand-draw emojis on the screen, and the watch will recognize the shape of drawing and translate it into emoji
  • New launcher
  • More than 4,000 apps have been developed for Android Wear so far
Project Brillo (More Info)
  • Brillo extends Android to connected devices for easy integration with your smartphone
  • Weave is the standard IoT protocol that connects the phone to the device to the cloud
Google Now
  • Goals:
    • Understand context (100m places, Natural language processing)
    • Provide answers
    • Take action
  • Now on Tap
    • Provides in-context assistance without leaving the app you’re currently using
Google Photos
  • Pinch view to change time criteria
  • Private auto organization
  • Groups photos of the same person over time
  • Unlimited storage
Global Efforts
  • There's a ton of low end phones in emerging markets, perhaps more than high end devices in established areas.
  • Google Translate – In emerging markets, the phone may be a person's first computer. Projected 1.2 billion smartphones by 2016.
  • Goal – Remove barriers of smartphone adoption with AndroidOne. Create better devices for emerging markets.
  • Issues – Connectivity. Data. Speed. Size.
  • Optimized search results – 4x faster, 80% smaller data transfer
  • Offline support for search results
  • Offline maps
Developer Tools
  • Develop
    • Android Studio 1.3 – faster build speeds, full C++ support
    • Polymer 1.0 – material design web components
    • Cocoapods – import google analytics, maps, etc into xcode for iOS development
    • Cloud Test Labs for mobile app testing
    • Firebase – build an app worrying about the back end, provides asset management, authentication
  • Engage
    • App indexing – index app content in Google search results
    • Cloud messaging – adding iOS support, topic subscriptions
    • Mobile web – push notifications, add to home screen
    • Universal app campaigns
    • Google play – conversion funnel snapshot, listing experiments (like optimizely, including app icon tests)
Virtual Reality
  • New Google Cardboard
  • Expeditions – program for virtual reality field trips

Session: Accessible Design Guidelines (Read more)

Why isn't everything accessible?

Because it seems really hard.

Use heuristic evaluation to improve designs for accessibility
  • Focus on usability within accessibility
    • Fonts can be enlarged
    • Critical audio elements/sounds include text alternative
    • Touch targets should be large enough for a low mobility user
Improving the design process
  1. Diversify your personas
    • include persons for low vision, low mobility, etc.
    • define the user journey
    • what are the steps to complete the task?
  2. Evaluate and prioritize
    • choose your participant
    • have a person with a disability help you or simulate your user's perspective
  3. Organize the equipment
    • Acquire and learn the technology
  4. Conduct the evaluation
  5. Capture your process
    • Record the steps the user takes to complete the task
  6. Share and inspire

Session: Accessible Web Components (Repo)

  • Web components are exciting but create some challenges for accessibility.
  • 1 in 7 will experience a disability in their life.
  • http://github.com/webcomponents/gold-standard/wiki
  • Have a checklist for development.
  • Start with the keyboard.
    • Focusable. Put elements into the tab order. Add tabindex="0" attribute to give elements keyboard focus.
    • Visible focus state.
    • Keyboard support.
  • Test semantics with a screen reader.
    • Declared semantics. Look into accessibility nodes. Semantics: role, value, state.
    • Labels.
    • ARIA (accessible rich internet applications). The attribute "aria-label" can be added to elements that don't need a visual label.
  • Redundant color. Don't use color alone to distinguish between different elements.
  • Sufficient contrast. 4.5 minimum contrast ratio.
  • Developers need to build their own accessibility nodes into polymer web components.

Session: Adaptive Design with Material

  • How we talk about taking about UI:
    • To identify an element, we describe its structure, behavior, position, and permanence.
  • Breakpoints:
    • Show a single level of content hierarchy under 600px.
    • 1600px is the max width with Material.
  • Grids create limitations for a layout, and within those limitations come opportunities.
  • Use the new Chrome Developer Tools devices tab for testing layouts.

Session: Next Generation Mobile Web (Watch)

Reach
  • Reach of content – rediscovering the superpower of the web
  • 1B+ Chrome users
Performance
  • When is a site performant enough? When the user can't perceive it.
  • Use the RAIL conceptual framework.
    • R – Reaction Time <100ms
    • A – Animation Time <16.67ms
    • I – Idle Time <50ms
    • L – Load Time <1s
Engagement
  • The missing piece
  • Push notifications
  • Add to homescreen
  • Offline support

Session: Developing Apps with Firebase (Watch)

  • Firebase is a cloud-based service that can “power your app's backend, including data storage, user authentication, static hosting, and more.”
  • Sky news UK election map was built on Firebase
  • New at I/O – mobile offline support

Session: Make Believe: Designing for VR

  • Virtual reality is coming
  • Flow: Visual immersion --> tracking --> input --> VR
  • Accessibility:
    • VR viewers anyone can make (Cardboard viewers)
  • Visual immersion:
    • Focus
    • Depth perception
    • Latency
  • Different lenses for each eye:
    • Pincushion distortion in one, barrel distortion in the other
  • Input without controllers:
    • Capacitive triggers
  • Lessons learned:
    • VR is great for exploring spaces
    • Great for empathy
  • Core pillars in VR game design:
    • Agency
    • Comfort (high fps, g force only down, positional reference, blink movement, forward only game, no screen freeze, only player movement, snap turning, static skybox, large cockpit)
    • Reward
    • Progression
    • Tactile
    • Empowerment
  • Designing the environment
    • Get scale right
    • Bug-free geometry
    • Reward exploring
    • Coherent world
    • Safe spaces
    • Player warning

Session: Get your app into the Google index

Resources:

Session: Material Icons

  • What are material icons?
    • Consistent design
    • Suitable for all platforms
    • Suitable for all purposes
  • Resources:
  • Icon font features:
    • Ligatures! So cool. You can just type the name of the icon and the font will ligature itself into the desired image.
    • Standard link tag with Google Web Fonts
      <span class="material-icons">menu</span>

Session: Material Design Lite (Read more)

  • What? A CSS and JS framework to achieve the Material Design aesthetic for web apps without Polymer. Made up of three parts:
    • Styles: colors, typography
    • Components: buttons, switches, form elements, tabs, menus
    • Templates: product pages, dashboards, cards, blogs
  • Why? To bridge the gap between the material design spec and web apps. It allows developers to build web apps with standard front-end languages so they can support older browsers (and for whatever other reason).
  • How? Code will be open sourced in github. It will be available as bundled JS and CSS, essentially like a jQuery UI replacement.
  • Support? IE9 plus for components. IE10+ for templates.
  • When? To be released at the end of June.
  • Preview? getmdl.io

Session: Reach and Re-engage

  • Push Notifications for Android and all desktop platforms (not iOS)
  • Only works on HTTPS
  • Three APIs:
    • Service worker (JavaScript when tab isn't open)
    • Push messaging
    • Notifications
  • Workflow: App JS (request notification permission) --> Chrome --> Google cloud messaging --> app server
  • Debug with chrome://serviceworker-internals
    • Not in regular Chrome Dev Tools yet
  • UX Principles:
    1. Only use it for really high priority things
    2. Track click through rate for notifications
    3. Track when people revoke permissions
    4. Users should demonstrate intent before sites ask for a permission
    5. Airline example - after purchasing a ticket, show button asking if user is interested in receiving notifications, after user engage - then ask permission
    6. Allow users to opt out
    7. For example, if the user wants updates on a story, they should be able to see an option to turn off notifications when they view the story again.

Recorded I/O 2015 Sessions: https://events.google.com/io2015/videos