Auto Meets Mobile: Building In-Vehicle Apps

Monday, March – 12 3:30PM – 4:30PM
Michelle Avary Natl Mgr Toyota Motor CorporationZach Brand Sr Dir Tech NPR

Telematics: When the vehicle is aware of its location and can engage in 2-way conversation.

Telematic Features/Services

  • Safety & Security (onstar)
  • Navigation Assistance
  • Diagnostics
  • Convenience/Info Service (fuel prices/traffic)
  • Entertainment

Experience in Cars will Change

  • Control + Choice + Ubiquity
  • 70% of people say apps are critical to next smartphone purchase

Challenges

  • Fragmentation – 15 car manufacturers in the USA with their own systems. 4320 fragmentation to deal with.
  • HMI (human machine interface) – steering wheel controls, voice, mouse-type controls
  • All vehicle components must be built to withstand conditions similar to those experienced in a jet plane (these systems are expensive).

Customer Conundrum

  • Vehicle decisions are made by the heart, and smartphone decisions are made by the brain.

Criteria for App Selection

  • Facilitates safe driving behaviors
  • Enhances driving and ownership experience
  • Allows for enjoyable personalized experience
  • Demonstrates strong brand harmony

Own the Media. Or the Media Will Own You

Monday, March 12 – 11:00AM -12:00PM
Cristina Monteiro Mktg Mgr PepsiCo
Lucas Mello CEO Live AD
Mauro Silva Creative Director Live AD
Ricardo Guerra Head of Consumer Channels Banco Itau

The Rise of Own Media
New digital technologies
Impact of startup culture on brands
Facebook fanpages, a new friendly environment for brands.

Nike Brazil Project:

They connected runners in a massive relay race to proximity sensors for social networks. Sensors on shoes registered checkins. Confessional video booths were set up for runners for them to record testimonials across the race. They were watched by all the runners’ friends. The user-created "Own Media" really made this campaign work.

  • @NikeCorre has 169k followers
  • Facebook Page: 297k fans
  • Influencers group with 3k runners

This project was possible because people are no longer only consumers. They transformed the culture and made the campaign work.

Doritos Brazil

Doritos are not as big in Brazil as they are in the US. Doritos owns 99% of the chip market in Brazil.

Doritos uncut contest
Start a story, friends continue story, the story with the most likes gets turned into a story board. The most popular story gets turned into an animated video and the winner gets a trip to Hollywood.

  • 58k fans in 5 weeks.

Summer Promotion
Upload the "worst summer photo" ever. The winner gets a big box of Doritos.
They picked up 142k fans with the contest.

Take-Away’s:

  • You must know your brand well. Make sure you are relevant to your customers.
  • Create a Digital Culture internally.
  • Marry your agency. The more the agency knows about your business and brand strengths and weaknesses the more it will help.

A Brief History of the Complete Redesign of Google

Sunday, March 11 – 5:00PM – 6:00PM
Evelyn Kim Visual Designer Google IncJon Wiley Lead Designer for Google Search Google IncMichael Leggett Design Lead, Google Apps Google IncNicholas Jitkoff User Experience Designer Google Inc

In the summer of 2011, Google completely redesigned nearly all of its applications to be more focused, elastic, and effortless. For the first time in Google’s history, hundreds of millions of users could use a suite of products – from Search and Maps to Gmail, Docs, and Calendar – with a unified, modern look and feel. Join the designers who led the effort for war stories and lessons learned in bringing beauty to Google’s flagship products.

This isn’t going to be just the story of a redesign, but the story or priority of design at Google.

It is difficult to design holistically across the brand when everyone is in silo with their own products. The latest redesign is one of the first collaborations between all those different groups.

Google stood out originally because of everything they didn’t put on their home page. It’s very simple and clean.

There was a big redesign in 2011, but there was a “secret redesign” in 2007.

2007 – Kanna:

A small group of 6 designers started to explore and express the Google brand (Kanna – Icelandic “to explore”) across the org. They explored the connection between design and engineering. Four different designs created:

  • Modesty and Minimalism
  • Fun with color and personality
  • Organization (more like desktop apps)
  • Daring – differentiate products by color

How it was presented:
Kanna did not launch. When it was presented, it was shown on a projector.

The Verge has a gallery of photos showing this 2007 design that never was.

2011 – Strawman:

The team was chosen because of their lack of connection and history with any of the smaller groups or history of Google.

Redesign called “Strawman”
Larry Page IM’d the team “if you were to redesign Google, what would it look like?” They were unclear on if it was even a real thing. If it was real, it needed to be done quickly. They did a “design sprint.” They could just jump ahead without any sort of internal fighting based on history.

10-12 screens were chosen representative of Google products and before/after shots were created.

How it was presented:
When Strawman was presented, it was done on 11×17 80lb paper. It just included the before and after shots. The thought was the presentation would be new to the group and stand out. This redesign actually had an opinion.

Timeline:
Started in January, Larry became CEO in April, and told them to launch it in Summer (very very very quickly). The team didn’t even think it was possible. The project name became “Kennedy.” Google Plus had already been in the works, and had to pick up the new design very quickly.

Process:
A prototype was created to test the design across the organization. They would swap out CSS on top of simple HTML mock-ups for all products. The prototype allowed them to demo things to the team and play with different variations and show the grid etc. “It felt like a roller coaster only the latches didn’t go down.”

A lot of attention was paid to the buttons and their hover state. The buttons fade out (218 milliseconds, which is one of the designer’s birthday).

What were they after?
Don’t just bring together for consistency, but also boost the feeling that it’s all one thing that works together. It was not intentional that the Google products were spread out, this design brings them all together.

How was it rolled out?
The prototype was so successful that engineers started grabbing the CSS from it (scary) as it was changing. They ended up creating a really large style guide that they could take it. It helped the engineers engage more. It helped to get buy-in when they could actually go out and see it and use it. Many properties just built based on what they saw, which make it a very smooth roll-out. Voice just went out and did the new design on their own and handled it with very few changes. They held “design office hours.” Everyone was really into it and wanted to help.

Manage Risk and Measuring Success
(Google likes data)
Qualitative research: 80 participants were shown a variety of screens which included both the old and new design for 10 seconds each… just to get an impression. The participants were asked to rank the design on a randomized set of 15 out of 30 attributes (simple, sparse, modern, clean, etc.). The emotions they got out of it were the goals they had, and goals that Google was known for. The research told them they were heading in the right direction

Quantitative research: because there are billions of queries each day, there are many experiments going on. Google can make statistically significant fine-grained measurement for many things. The new design was tested on many users.

Eating our own dog food: Rolled out to Google internally.

“The company has made additional refinements… that reflect a newfound respect for the intangible.” -Khoi Vinh

Simplify CSS Development with Sass & Compass

Sunday, March 11 – 3:30PM – 4:30PM
Alex Lemanski Founder/Web Craftsman Bitfyre

Slides, Links, Examples: http://bit.ly/teamSass

  • Saas allows for variables so you only have to replace elements in a single place in your style sheet.
  • Nesting selectors so you don’t have to repeat multiple tags or divs
  • Nesting Statements as well

Tools:

  • Web Workbench (Visual Studio Plugin)
  • Compass.app (Mac/Windows/Linux)
  • CodeKit (Mac)
  • Scount

Commandline Tools:

  • Saas itself
  • sass convert
  • Middleman
  • Compass

Debugging Tools:

  • Generated Line Comments
  • FireSass for Firebug

Common Good Practices in CSS (same for Sass):

  • don’t nest more than 4 selectors deep
  • break things down as much as possible
  • work from the main area of content out

Number conversions can be created to convert px to em or back.

For the actual compiled CSS output, you can display it whatever way you’d like:
nested, expanded, compact

Nice mixins for the various browser-specific syntax – Sass can just bring them all in.

Creating Responsive HTML5 Touch Interfaces

Sunday, March 11 – 12:30PM – 1:30PM
Stephen Woods Sr Software Engineer Flickr

When working on the desktop, we’re worrying about browsers. You have to cover every case with various browser-specific CSS. On mobile, we worry about devices and not browsers.

Most mobile platforms run webkit, but there are a few other (less used) browsers out there.

Screen Size: Media Queries, Break points, liquid layouts.

We need to concentrate on interfaces that feel good
Modern mobile devices are crappy computers with decent video cards.

How do you make a devices (low powered) feel like it’s high powered – perceived performance. Tivo plays the sound the second you hit the button. On the web we throw up spinners. Touch interfaces are tactile – they need to have immediate feedback. When you touch something, you feel how it works, you have a much better sense of when it doesn’t work.

When interface stops moving during a gesture, it feels like it died.

TouchEvent
One on Android
11 on iOS

Making Gestures Work
Prioritize user feedback
Use hardware acceleration
Manage your memory
Don’t do loading during gestures.

Use native if possible when scrolling
-webkit-overflow-scrolling: touch;
Scrolling is very very important.

Don’t use native pinch to zoom – you can’t control it.
Use Matrix Transforms instead.

Dealing With Browsers
Feature Detect
Add transitions, don’t depend on them.
Gesture interaction is an enhancement, clicks should still work.
Be able to disable features per user-agent, if necessary.

Tools
Adobe Shadow
Charles Proxy
Just change the UA in Webkit
Pile of Devices (just test on the real thing)
Weinere
(Device Simulators & Emulators are useless for web development)

http://slideshare.net/ysaw/creating-responsive-html5-touch-interfaces

Can a Social Web of Things Keep TV Cords Connected

Sunday, March 11 11:00AM -12:00PM
Alison Moore Sr VP, Digital Platforms HBOGilles BianRosa CEO FanhattanJack Flanagan VP Sales Bluefin Labs IncRhonda Lowry VP Emerging Social Web Technologies Turner Broadcasting

What is Social TV?

  • It’s currently in an evolutionary state (HBO Go). You can plug in conversationally no matter where you watch (GO, TV, Xbox etc.). How does it evolve without being disruptive to consumers. It’s all about water cooler stuff – keeping people engaged but also keeping the conversation going.
  • 1. Looking for something to watch, people use social to determine where to go with it.
    2. While I’m watching – depends on the content you’re watching.
    3. Talk about it afterwards with you friends.

Why should we care about this? People have been talking about TV forever.

  • It pinpoints the buzz and helps us to focus new activities. It is all about engagement – the tools that people expect to have when they watch content.

Impressions vs. Expressions

  • Impressions are the ratings – how many people are watching etc.
  • Expressions are what consumers are talking about – how many time something is shared etc. What is the level of engagement of consumers of a show? We can now understand what is being said. Evaluate based on the conversations about a certain show.

Studios create brands and then try to link together everything about a certain show (itunes episodes, soundtrack, hulu videos, website, etc.). A consumer should be within one click to get anything they want about the show from episodes to t-shirts.

Don’t push the conversation, but enable the conversation. Don’t just advertise your content.

Get the Look: Use @Font-Face + CSS3 Like the Stars

Saturday, March 10 5:00PM – 6:00PM
Sean McBride Web Dev Adobe Typekit

Taking iconic sign styles and transforming them into the web using web technologies.

Ideas vs. Forms
Idea -> Design System -> Form

Many times we try to go from an original form to a new form without any sort of consideration of where it came from and how exactly to get it into that new form.

@font-face
Call @font-face and point to the URL of the web font.

CSS Transform will let you rotate the font on the page.

@text-shadow
you can add offset and color as well as multiple shadows to text. (this is not supported in IE9)

mask
you can use an image to hide and show certain elements using transparency in PNG images. (unofficial property, so it won’t work in many browsers – currently only webkit browsers)

Slides and visuals from this presentation located at: http://seanmcb.com/sxsw2012/

Designing for Content Management Systems

Saturday, March 10 12:30PM – 1:30PM
Jared Ponchot Creative Dir Lullabot

Design is the conscious effort to impose a meaningful order. (Victor Papanek)

CMS create ways to impose a meaningful order.

How a CMS Thinks

  • Contexts

    • A context provides conditions and reactions based upon a defined criteria. Conditions might be things like sections, content types or user types. Reactions might be things like display a list of these chunks from this type of content in the sidebar.
  • User Types

    • Who is using the site?
    • What are they using it for?
    • Anonymous or Authenticated
    • What can they access or not access, create or not create, edit or not edit?
    • Authors, Editors, Administrators, Moderators
    • Baby Got Backend
    • Put yourself in the shoes of the content creators early and often and you will better understand the correct structure of the content, produce better designs, and increase your likelihood for a successful project and a happy client!
  • Content Types

    • What are the types of content?
    • How can we break down these types of content into discreet chunks?
    • Finding out what these types are helps you to model this content first and then style at the end.
    • A List Apart: Future-Ready Content
    • Content types provide a sensible target for creating goals for your website. Set goals for each type of content in your design process.

Why should we think this way?

  • We need to know our tool.
  • It simplifies the complexity.
  • We can’t design for each PIECE of content on a dynamic site! (this is also helpful for responsive design)

Hierarchy!

  • Create 3 groups with everything, and begin to put things into groups. Prioritize them with the chunks of each content type.

Gestalt & Other Fundamentals

  • Position

    • eye moves top to bottom, left to right
  • Proportion

    • we notice big things, it can override position
  • Proximity

    • creates visual relationships – too much similarity visually make it hard to tell what something relates to
  • Symmetry

    • we perceive objects and tend to perceive them as symmetrical shapes that form around their center – our brain wants to make patterns
  • Similarity

    • thins that are similar are perceived to be more related than things that are dissimilar
  • Alignment

    • this creates relationships and beauty (grid systems)
  • Contrast

    • create visual importance
  • Color

    • warm colors stand out, cool colors recede
  • Isomorphism

    • similarity that can be behavioral – the brain wants to make things right and create story out of pattern
  • Unity

    • things look like they belong together
  • Pause

    • awkward silence in our design – a way to really draw something out

Tips & Tricks

  • When you blur your eyes you begin to see where the visual weight lies between two similar objects.
  • Create a style guide page that shows every single style in the CMS and how they work together. (be sure to include system messages and pagers and form elements etc.) Drupal Style Guide Module
  • Style Tiles help to create a visual language.

Ask yourself regularly how can I have fun?

Best Practices: Native + Web Hybrid Mobile Apps

Saturday, March 10 – 11:00AM -12:00PM
Charles Ying Developer Flipboard

Flipboard takes feeds and streams from all over the web and turns it into a beautiful magazine layout (for iphone and ipad).

Flipboard is a hybrid application – it is a mix between a web app and a native app.

Web App
Put a simple "app" wrapper around a website

Native App
Has a native UI with hooks into the device

The idea of a hybrid app is to take the best of both worlds and combine them into something that takes advantage of both worlds. Use the best parts of web and the best parts of native and combine them together.

Do NOT try to emulate native UI – they don’t feel right, and many times have too much overhead.

Bridging Web and Native
Use a UIWebView with javascript calling the native code when necessary.

Save power – do fewer simpler things.

Working with Web Code:
Debugging was difficult, so a simulated HTML environment was created for testing
Move hotspot areas into native code
Pay attention to what your JS libraries are doing, strip out the things you don’t need
Consider what the browser has to draw and composite on screen.

Mobile Graphics
Aim for high frame rates (60fps)
Use the GPU acceleration for animation and UI
Use CSS3 Animation + Transitions
Watch your graphics memory use
Shadows and gradients are typically slower on mobile devices
Consider compositing and overdraw – transparent elements have more overhead

Existing Frameworks

  • PhoneGap, trigger.io for UIWebView bridge
  • Appcelerator for Custom JavaScriptCore
  • Spaceport, ImpactJS, CocoonJS for Gaming

The State of Browser Developer Tools

Saturday, March 10 – 9:30AM -10:30AM
Brandon Satrom Developer Evangelist TelerikGarann Means JavaScript EngineerJoe Stagner Sr Program Manager Developer Technologies Mozilla CorporationMike Taylor Web Opener Opera Software
Paul Irish Chrome Developer Advocate Google Inc

Firebug was released in 2006 just viewing the DOM was a big thing at that time.

The Last Year of Developer Tools

Chrome

  • Hit the little cog for development tools.
  • You can view your JS files individually
  • Customize the layout of the tools
  • Spoof user agent
  • Color picker available when adding/changing colors
  • Revision history is created for all changes

Firefox

  • You can see a 3D view of a site with web developer.

Opera

  • Dragonfly (dev tools)
  • Remote debugging allows you to debug your site on other devices. You can send your site to another device via ip address, or it will detect your device on the network.
  • Color picker gives you a lot of detail when selecting colors from an image or screen. It will also give you related colors or workable palettes.
  • CSS Profiling: It shows how the CSS loads on the page visually and allows you to go in and see where things get held up.

Internet Explorer

  • Format Javascript will provide a more visually appealing script (no wall of text) to work with.
  • Browser Mode can do full emulate older versions of the browser inside IE10.

Remote Debugging

Adobe Shadow sends stuff to your mobile device as well as open dev tools.
The new Chrome for Android also provides remote dev tools (connected via USB).

Opera Mobile Emulator will launch a profile for a number of phones to show you what your site/code looks like on that device.

Effective Social Media Presence in Higher Ed

Friday, March 9 – 3:30PM – 4:30PM
Deborah Maue Asst VP DePaul UniversityLiz Gross Dir of University Mktg & Comm University of Wisconsin-Waukesha

This session was a core conversation – a room full of peole in higher education talking about topics related to social media. These are a few of the take-away notes.

  • The tendency in social networking is to try everything when new social networks come up – doing one thing really well is better than many things only partially.
    (my thoughts are to have at least a presence in the areas where your audience is, but to focus and prioritze the areas where most people are.)
  • Engage existing groups to participate in official events and they will help to promote your information and be active in your ofiical things.
  • UW Madison has a social media user group made of social media managers across campus (experts and beginners). They hold monthly meetins to talk about what is being done.
  • Penn State started a national chapter of the PRSSA Social Media Club.
  • Your number one goal with social is enagement.
  • Social media style guide base on the media. This guide may be very very diferent from the official university style guide. Social media is much more conversational.
  • Being geninune is very important

Designing for Context

Friday, March 9 – 2:00PM – 3:00PM
Andrew Crow VP, Experience Design GEBen Fullerton Director, User Experience Method
Leah Buley Design Strategist IntuitNate Bolt Pres Bolt|PetersRyan Freitas Co-founder AOL/About.me

Slides: http://dforc.org/

Design for different locations, environments and relationships and product ecosystems. What problems exist in all of these areas, and design for those problems.

Examples of Crazy Design Context:
Astronauts in space. Design applications that could be used in the shuttle and on a space station. Zero gravity was a challenge for design.

Browser-based is typical, and moving that to mobile. Desktop/browser first is very different than mobile. Push the behaviors you want to represent first. Don’t just map the typical experience into the new context.

Important themes when designing-

Time
Designing interactions for different lengths or instances of time.
How are people using your design? They use it, go away, then come back to it. People live their lives outside of your app or design. Make sure that you design tasks based on the amount of time people have (surveys, etc.).

Ecosystem
What is the bigger picture? How does your product fit into the whole ecosystem? Be sure to take a look at how your product fits in with brand, or social, or other technologies. For many products, the majority of users are entering through mobile interfaces, so a good amount of people don’t even see the rest of the ecosystem. You need to make sure that you’ve created something that can stand on its own in just the mobile environment. You also have to look at the difference between a tablet environment and a mobile phone environment. They’re both mobile, but very different environments.

Location
How do we accommodate and embrace various locations? Provide different tools for your mobile phone that you always have with you. This was used in a Victoria Secret app on the phone that was not in a tablet version because people likely don’t have their tablet with them when they are in the store.
Tax Online Accountant app uses mobility in the workplace so that someone doesn’t have to stop what they are doing and run to a computer and look something up. This app allows someone to pull up information they need regularly quickly on their mobile device (e-file status). It doesn’t need to be out and about.

Form & Technology
What about screen size, input methods, technical constraints?

Brand & Relationships
One conversation… Make sure you are having the correct conversation that your brand represents.

What have we learned?

  • Make sure your users can engage with your products that give them the most value and experience your product in the best way.
  • Be sure that you are aware of your audience and how they are accessing your product and design for that audience and context and the environment they are accessing your stuff.
  • Find quick easy ways to get on your users timeline.
  • Design for the ideal intended experience. Be comfortable with the fact that you might miss something. Just be the best designer you can be for your users.

South by Southwest Interactive 2012

It is once again that time of year for my to Austin, TX to attend the South by Southwest Interactive conference. I’ll be collecting notes from the various sessions I attend right here on this blog (category sxsw) as well as on my SXSW sub-blog (http://sxsw.techory.com).

The 19th annual SXSW Interactive festival will take place March 9-13, 2012 in Austin, Texas. An incubator of cutting-edge technologies, the event features five days of compelling presentations from the brightest minds in emerging technology, scores of exciting networking events hosted by industry leaders and an unbeatable line up of special programs showcasing the best new websites, video games and startup ideas the community has to offer. From hands-on training to big-picture analysis of the future, SXSW Interactive has become the place to experience a preview of what is unfolding in the world of technology.

A CableCARD Update for the HTPC

A few months back I acquired an update for our HTPC. In order to watch digital channels (anything that isn’t available as an over-the-air network), I needed either a cable box, which I didn’t want to rent, or a device capable of taking a CableCARD. When I first started looking, there were two on the market. The first one out was the Ceton InfiniTV, which is a PCI card device that wouldn’t likely fit into my smaller HTPC case. So, that lead me to a device sold by the company who made the other HD tuner I’m using. The tuner I purchased is the SiliconDust HDHomeRun Prime. There are two models of the HDHomeRun Prime, one with three tuners and another with six. I opted for the one with just three tuners since I currently only have two tuners and didn’t figured I needed the extra three, or the extra expense of the larger box.

I preordered the tuner, and it arrived a bit later than the company had claimed, but I was happy to finally have it in my hands. My first task was to acquire a CableCARD from my cable company (Medicacom). For those not familiar with CableCARD, it basically provides the decryption for digital cable in your own box without having to use (pay for) one provided by the cable company. The FCC requires cable companies to provide them to their customers. I went down to the Mediacom office and picked up my card. The FCC recently required cable companies to provide a self-install option for CableCARDS instead of requiring a (paid) house call. Once I got the CableCARD home, plugged it into the HDHomeRun and plugged in the coax. I actually have the box in a different room of the house away from the TV. It isn’t necessary, but the way that the HDHomeRun works is it delivers the TV signal via a network connection, and I’ve got an empty network port in the bedroom. That way it also delivers signal through the entire house. If I wanted, I could fire up VLC and watch cable TV on a laptop anywhere. The device powered up and seemed to do what it was supposed to do. Now, on to Mediacom to try and get the CableCARD activated.

Currently, there are very few pieces of software that can legally be used with CableCARDs. The software has to be able to decrypt the digital signal from the cable companies. I use Windows 7 Media Center, and it’s capable of working with a CableCARD tuner via a special plugin provided by Microsoft. I installed the HDHomeRun software and then installed the plugin for Media Center. It quickly recognized the new tuner and gave me a message to with the unique ID for the CableCARD to provide to Mediacom. I called and had them activate my card. It can take as long as 24 hours for the CableCARD to be activated, so I let it sit overnight and got excited to watch more channels in HD the next day.

I’d read horror stories of cable providers not activating CableCARDs correctly. Fortunately that wasn’t the case for me. The next day, the CableCARD reported it was activated by the HDHomeRun control panel (accessed by a web interface), but I was having issues viewing my brand-spankin’ new HD channels. There were some funny things going on. I could get the new channels to play in the HDHomeRun software intermittently, but only in windowed mode (not full screen). I could also get the new channels to play intermittently in Media Center but with the same widows mode issue as well as there not being audio in some cases. I would also see odd messages about PlayReady, which is Microsoft’s DRM to make the CableCARD work. I kept getting messages that PlayReady wasn’t working, or that it needed to be updated. No matter what I did, I could not get PlayReady to reinstall or remove correctly. After banging my head against the HTPC for a few days, I decided to take the nuclear option and reinstall Windows.

Low and behold, the headache of a reinstall worked. The CableCARD activated successfully, and Windows Media Center detected it and configured all of the new channels. The programming guide picked up everything, and everything came in nice and clear. I’ve beem able to watch and record all HD programming without any problems. There have been very few issues, and what issues I did encounter were fixed quickly with a firmware update. So far I am very happy with the HDHomeRun Prime.

http://www.youtube.com/watch?v=leaR8JLynbY

Homemade Snowmaker

So as of right now, it doesn’t look like it’s going to be a white Christmas. If you really had your heart set on some snow, fear not. You can now make a run to the hardware store for some parts to build your very own snowmaker. Appropriately named Instructables member, MakeSnow has a very nice step-by-step on how to build it.

Snowmaker photo by MakeSnow