Playing with Patters – Designing for Android

Playing with Patterns
Marco Paglia – Android Interaction Designer

The Android style guide is an important resource to help users perform similar tasks across applications. It’s also important to have something special and unique.

Unique and Beautiful but is consistent and usable.

Square
Eric Burke
– 1st app was released same day as iOS
– skewmorphic design (leather wallet) but the interaction was a problem
– update was streamlined, light colors and uses Android design guides
– significant reduction in taps
– auto-tab opens tabs while you walk around
– cards is a new feature to share in the UI
– images are in all sizes and shapes with compositing. the server does this on the fly
– launcher shortcuts to favorite merchants to add icon to homescreen
– notifications, can leave a tip later
– sharing is important for the service
– consistent look on any Android ActionBarSherlock

Gigbeat
Michael Novak
Guenther Beyer

Application lets you follow an artist to notify you when artists are in town.
– Branding
– limiting color implications so they aren’t fighting over each other.
-Typography: early was all over and not consistent; now using Roboto completely
– Dashboard: phones was button/icon and the tablet also has some additional content
– ViewPager to help with displaying content
– Location took quite awhile to figure out; ended up using the GPS to pull content nearby and added favorites
– Empty screens: handled issues with better display so it isn’t just empty, actions on screen when relevant
– Notifications: when the app is updated the notifications populates to show new stuff
– Be polite: use vibrate notice when listening to music
– Event details: was boring and text heavy, now bigger pictures
– Artist details: needed to get more excitement around upcoming events

Advertisements

Advancing Accessibility for the Web

Advancing Accessibility for the Web
Charles Chen, Dominic Mazzoni, Rachel Shearer

New tools, techniques and APIs to improve webapps

Testing Tools
– Many web apps are not fundamentally inaccessible in design
– Simple errors can cause big problems for users
– Existing tools didn’t meet needs
– Accessibility developer tools for chrome (extension) the tool shows most simple errors
– ChromeVox (extension) as a screenreader would like JAWS
Demo

Advanced Screen Reader Accessibility
– Custom user interfaces and ARIA
– demo of rating widget using keyboard controls (behaves like a slider)
– custom list boxes and controls that could go beyond what it may have been intended for
– Text Editors, Google Docs is custom, can you make it work with accessible tools?
– yes, make it focusable, give it a role=textbox, use native cursor/selection
– ChromeVox made some changes to allow “textbox” to work the same as contenteditable
– terminal emulator
– Shell app to allow for the terminal

ChromeVox Extensions
– How can you make the experience easier for frequent users
– ChomeVox APIs are chrome extensions
– rearrange content with additional rules to help the user
– Example: PlusVox for Google Plus

APIs for low vision and speech
– General purpose APIs that can be used for accessibility
– CSS3 Filter Effects W3C standard, apply color to everything
demo: inverting text on the page, can also remove images so photos stay
extension: High Contrast
– Chrome speech recognition extension API
– adds speech input to forms
– Chrome Text-Speech(TTS) API
–  Chrome TTS Engine API
– request to server and stream, pur JS using HTML5, preferred though is native client

Android WebView

Android WebView
Nicolas Roard

Architecture WebKit
WebCore layout and JS core

JS benchmark in Jellybean on a Nexus is much faster

Reder loop
event > paint > draw
– for pictures you can represent the whole page without going back to webkit when scrolling or zooming
– software rendering issues though: dependent on the time spent traversing and rasterizing, no 3D CSS, limited support for plugins and video

Honeycomb and beyond
– tile content
– hardware rendering is scroll > draw uses a separate thread for paint to get a new tile

CSS Animations
– CSS property to animate HTML elements
– supported on webkit browsers
– On android hardware accelerated and faster than JS

Remainder of presentation is full of code examples and would be better to review the slides. I’ll post a link when it becomes available.

Designing for the other half: Sexy isn’t always pink

Designing for the other half: Sexy isn’t always pink
Tracy Chou (pinterest), Leah Busque (taskrabbit), Margaret Wallace (CEO of playmatics), Jess Lee (CEO of polyvor), Sepi Nasiri (Women 2.0)
Moderator: Mary Himinkool

TC: Pinterest started in 2009, but really took off in late 2011. Was designed as a general platform, not specific to women. Same with Quorra
LB: TaskRabbit were in just a couple of markets and looked at the database for trends. Both key demographics were leaning female. It influenced design, features, etc. for those demographics.
MW: There are “whales” spend $100 or more on game. There are games that are free to download and play, but to progress and move forward the virtual current is purchased. But you might get 1%-2% of people that can convert. Interesting philosophical debate of how to monetize without exploiting.

Monetizing/Community
SN: For monetizing you need to look at what people are looking for so you can monetize. Career questions are a “sticky” topic and work/life balance. Funding for building their company.
JL:  Community has been central to growing the user base. Always go the extra mile. Extended an opportunity to bring top users in and get their feedback and get them involved in the process.
LB: The key is to make it easy to get feedback. 24/7 support, phone, email and in the product flow users can leave feedback. Follow up with users to make it “amazing” if not explore how to make it better. Second, there are weekly users research sessions. Each Thursday they review marketing, site changes, design patterns, etc.
MW: How much should one be lead by the community, especially in gaming. Analytics (swerve) are used to help guide direction.
JL: Questions need to be carefully thought out. Make sure you pay attention to what they say & what they do.  Be responsive after launches too.
TC: 6-7 people on the community team out of 50 people. They are also involved in decision making process in design/engineering sessions. They use ZenDesk to track tickets.

Interviewing/Hiring
LB: Interviews need to involve cross functional teams. Also a believer in meeting each person that comes in for an interview.
SN: Similar process at Women 2.0. “Can you share a pillow with this person?” Chemistry is important. External team need to feel included.
MW: Referrals are important. Co-founder teaches at local university. “Can I go camping with this person?”Cultural fit matters in a small organization, no matter the talent level.

Fundraising
MW: if it’s too easy or too hard something isn’t right. If you hear the same feedback then you need to adjust.
JL:  Have traction. 2009 Series B was difficult with the economy, product, market and team. Series C in 2012 $10M was easier.

Designing with women in mind
LB: Find great people to surround yourself with. Don’t assume you know who you’re building for so you can examine the user base.
TC: Get mentors or potential consumers to come in and share what to do. Get the demographics you want to target as employees.
LB: 75% come in via WOM. The money that is spent is very targeted. Mom’s groups, community school organizations, PTAs, etc.
TC: Pretty strategic about the press engagements.
JL:  Tried to create opportunities with advertisers to get some opportunities with the community.

Jason: Has it been a problem for TaskRabbit for non-standard uses? Reviews, promotions, etc.?
LB: Not really been a problem. Use CC to id people and approve users. Users in the community can flag inappropriate tasks.

Pablo: What was the tipping point for Pinterest?
TC: We don’t really know what it was. Last spring/summer where it picked up. Not a specific event to provide an inflection point.
LB: It can really be about timing. The consumer mindset sometimes needs to get their head around how to use the service.

Tommy: Do you have any insights about Google+ being skewed heavily male?
MW: Opinion needs some UI overhaul.
JL: Get the design out of the way of the user creations. Not necessary to have a feminine design. The seed of community is important where G+ started at Google which is mostly male.

AJ: How do you feel about the representation of women in the tech industry? Are you targeting other minorities in your design?
JL: Had mentor at Google that was important in getting started. Giving back also makes a difference.
SN: Awareness is important as well. So panels like this are able to inspire other women.

Anthony: What is the process for managing features that role out? Product to engineering.
LB: Reviewing A/B test now. Came up with new design that was simple and gorgeous. The simple form isn’t working. Live and die by the data. Have qualitative research.

Dan: Is the seed community always going to determine the lifespan of the community?
TC: It doesn’t have to determine the future. But you have to start somewhere. Branching out is possible.

What’s top of mind? What is the most valuable experience you have had so far?
MW: Accept failure quickly and gracefully. Move on and keep going.
JL: Do a few things well. Think about the core and be exceptional at that core function. Don’t give up!
SN: Don’t marry to just one idea. Be in a position to move and grow.
LB: “I think you should see how far you can take it.” Was the inspiration and continues to push TaskRabbit forward.
TC: Continue improving.

Building Android Applications that Use Web APIs

Building Android Applications that Use Web APIs
Yaniv Inbar
Sriram Saroop

Android and Web APIs
– 30 different APIs Drive, Plus, YouTube, etc

Google Client Libraries for Java
– Open Source (Apache License 2.0)
1. HTTP (goog.gl/onpMx)
2. OAuth (goo.gl/dXFtZ)
3. Google API Libraries

OAuth 2.0
Basic run through of authentication
– scopes calendar (manage) calendar (view only)

“OAuth on Android is complicated”
– it is, but can be done with better education
– old way is not clear what is being requested
– new way is much more clear for end users to know what is happening
– new account picker for multiple accounts on one device

Demo
– ProGuard strips out stuff you’re not using to keep apps small

Google Cloud Endpoints
– easily develop code on the backend for mobile
– Google cloud messaging endpoints
– use cases: centralize business logic across devices
http://endpoints-trusted-tester.appspot.com

Demo

Get more from the Google+ Platform

Get more from the Google+ Platform
Timothy Jordan – Sr. Developer Advocate

Implement
– plugins +1 button, share button, badge
– recommendations on the +1 button (new)

Connections
– Google + page, link from your site, drive from ads
Google + page: “website” is a signal to Google
Badge relates + content to the page and full site
AdWords – allows social annotations 5-10% increase in CTR

Hangouts
– applications can be written on Hangouts
– 10 way video chat, data channels for collaboration, media effects

Google + History API
– part of users history, optional for users to share if they want
– set up applications, authorize the user, write moments
– type, target URL and result(optional)
– Fetch moments (microdata markup via schema.org)

Mobile
– sign in button with Google+ (initiates the OAuth flow)
– widgets
– history

Structured Markup – adds intelligence to your pages
1. schema.org
2. open graph
3. meta – only title & description
4. best guess

Speed
– it should be faster over time
– new optimized layout for scripts and button placement

User Experience
– prominence will allow for more clicks (higher up on the page)
– grouping: put the services together so users can find everything
– can put the border around content being shared (it’s an example to signify the share)
– the ability to provide recommendations at the time of +1/sharing are possible

Measurement
– Google Analytics and Webmaster Tools
– Custom analytics using the “callback” for the +1 button
– can show +1, reshares and comments

Protecting your User Experience while integrating 3rd-party code

Protecting your User Experience while integrating 3rd-party code
Patrick Meenan – Slides
@patmeenan

The social widget
– when widget is unavailable the page load is significantly impacted
– prefer an async script tag

Global implications
– social sites can be blocked internationally 100% of the time
– HTTPS as well
Enterprise
– Corporate policies

To the Front End!
– put same protections in the front end as you do in the backend
– Async snippet (works when there are no dependencies)
– Put scripts at the bottom at the end of the bottom of the page
– protocol-relative URLs: looks strange, but it works across browsers
– Async loaders: Modernizr, LABjs, RequireJS, ControlJS (complex dependency chains)
– Don’t assume your OnLoad will run

How are we doing?
– Async: Google Analytics, Google +1, Twitter tweet, facebook like, Digg
– Blocking: +1 badge, twitter anywhere, facebook channel, pinterest (end of body), reddit, addthis, sharethis
– Code libraries(block in the head): Jquery, YUI, Dojo, Moo tools, Google jsapi(async is avail)
– Ad providers: doubleclick async available, adsense script blocks, but ad is async, Others: ask – iFrame solutions are async

Demo Frontend SPOF
– routing localhost: fails too fast
– you need a black hole – blackhole.webpagetest.org
– webpagetest.org

SPOF-O-Matic
– in the chrome webstore
– if it detects SPOF it will warn
– turn on resource blocking mode to move it to the blackhole

Pages in the Wild
– News and blogs have several share buttons that block
– Political sites addthis
– E-commerce  bazaarvoice, pinterest

Homework
– Widget Owners
1. never, EVER, provide blocking snippets

– Site owners
1. Never load 3rd party resources synchronously
2. Don’t rely on onload for important functionality
3. Make sure monitoring has aggressive timelimits
4. Track page failures by region (real-time monitoring)

User tracking tags need to be async and can be at the top of the page