Select session notes from Google I/O 2015.
- 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.
- 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
- 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
- Pinch view to change time criteria
- Private auto organization
- Groups photos of the same person over time
- Unlimited storage
- 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
- 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
- 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)
- 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
- Diversify your personas
- include persons for low vision, low mobility, etc.
- define the user journey
- what are the steps to complete the task?
- Evaluate and prioritize
- choose your participant
- have a person with a disability help you or simulate your user's perspective
- Organize the equipment
- Acquire and learn the technology
- Conduct the evaluation
- Capture your process
- Record the steps the user takes to complete the task
- 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.
- 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.
- 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.
- 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 of content – rediscovering the superpower of the web
- 1B+ Chrome users
- 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
- 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
- VR viewers anyone can make (Cardboard viewers)
- Visual immersion:
- Depth perception
- 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:
- 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)
- 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
- Android and iOS app indexing: g.co/appfirstindexing
- URL Shortener: g.co/urlshortener
- Search Console: g.co/searchconsole
- App Indexing: g.co/appindexing
Session: Material Icons
- What are material icons?
- Consistent design
- Suitable for all platforms
- Suitable for all purposes
- 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
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:
- Push messaging
- 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:
- Only use it for really high priority things
- Track click through rate for notifications
- Track when people revoke permissions
- Users should demonstrate intent before sites ask for a permission
- Airline example - after purchasing a ticket, show button asking if user is interested in receiving notifications, after user engage - then ask permission
- Allow users to opt out
- 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