SXSW 2012: Teaching Touch: Tapworthy Touchscreen Design

Josh Clark
Principal, Global Moxie

#sxtapworthy

Presentation Description

Discover the rules of thumb for finger-friendly design. Touch gestures are sweeping away buttons, menus and windows from mobile devices—and even from the next version of Windows. Find out why those familiar desktop widgets are weak replacements for manipulating content directly, and learn to craft touchscreen interfaces that effortlessly teach users new gesture vocabularies.

The challenge: gestures are invisible, without the visual cues offered by buttons and menus. As your touchscreen app sheds buttons, how do people figure out how to use the damn thing? Learn to lead your audience by the hand (and fingers) with practical techniques that make invisible gestures obvious. Designer Josh Clark (author of O’Reilly books “Tapworthy” and “Best iPhone Apps”) mines a variety of surprising sources for interface inspiration and design patterns. Along the way, discover the subtle power of animation, why you should be playing lots more video games, and why a toddler is your best beta tester.

Presentation Notes

The ability to interact directly with an object lowers the need for complexity. Designing for touchscreen is not only a complex for developers and designers, but also for consumers.

Fitts Law

The presenter, Josh, says he hates the iPad’s back button “with the heat of a million suns.” Fitts Law is a rule to test how long it takes a user to move an object to a target. The rule of thumb is the closer something is, the easier it is, but the further away the target it then the harder it is to hit. Although the buttons on an iPad are the same size as the buttons on an iPhone, it’s actually physically harder to hit.

The motto as a designer should be “Let people be lazy.” Why can’t people just hit a massive easy to hit button? When Apple released iOS5 they made it so you can easily swipe out the little drawer in your email instead of using the back button.

Gestures are the keyboard shortcuts of touch

Big screens invite big gestures. You don’t have to keep hitting that little button all of the time.

Buttons are an “inspired” hack

Even in the real world we have physical buttons and switches, such as light switch. A light switch when you enter a room turns on a light from a far distance away, and this type of intuition needs to be learned by the user. These types of “controls” add a layer of abstraction. We can think about interface design in the same way we do with real-life buttons and switches. With touch we now have an opportunity to close this gap. Designers need to start looking at new interface models of touch, facial recognition, etc, and ask themselves if we still need the “classic” way of doing things? Can these “classic” ways be replaced by these new interface models?

Whither the Web?

There are two things we need to make gestural interaction on the web plausible:

Real support for gestures fails because Javascript can do touchstart, touchend, etc, but it’s lacking built in pinching, rotating, etc.

Gesture conventions are not even defined well on apps, so how can we move it to the web yet? On the web the only gestures you really have to work with are “tap” and “swipe.” It’s also hard to come up with sophisticated gesture conventions on the web because from browser-to-browser what the interaction does may be overridden by it.

Both JQuery Mobile and Sencha Touch are adding functionality for additional features such as doubletap, drag, pinch, and rotate.

See also: Touchy.js

Good Examples: bit.ly//ios-clear, Touch Up (changes brush size by zooming in/out because your finger doesn’t change size).

Finding What You Can’t See

So great, we’re making gesture stuff. How do users know these advanced (or even basic) gestures exist? Well, people should be able to figure out simple gestures they’re using to. For instance with Google Maps people figure out the double-click to zoom in because you can do that on the desktop app. But no one is ever going to figure out a two finger tap will zoom you out.

A lot of apps will make you look at a screen involving all of the various gestures you can use. It’s like a massive complex user’s manual, and you haven’t even seen the app yet. It makes the app sound like it is much harder than it actually is. Upfront instruction manuals make your apps seem harder.

Nature Doesn’t Have Instructions

The best interfaces don’t need instructions. However, even nature took time to learn when we’re first born. Even Apple makes mistakes. Their Address book looks like a book you should be able to swipe. However, when you swipe you actually delete content and you don’t switch to the next page. The fact Apple hasn’t even gotten it 100% right yet just goes to show that it’s very difficult to get it right, and no one quite has yet.

Love the one you’re with

If it looks like a physical object, people are going to try to make it work like one. The interface should be the instructions to use it. Although digital newspapers are nice, and they’re just basically a PDF, don’t neglect to add what the digital advantage can give us: table of contents.

The iPad is the awesome love child of many parents

Watch how toddlers use an iPad. It’s amazing how quickly toddlers get it. The wont get your multi-level menu system, but neither will your adult users. People who have very limited computing experiences (elders and children) seem to figure out these types of devices pretty quickly.

Play more video games

Many times when you start up a video game, you don’t even know what your goals are. Games teach you while you go and they bring you along from novice to expert to master. So how do we do this?

  1. Coaching: simple demonstrations such as prompts. Pointing things out as you go. You learn while you’re doing it. You don’t learn how to play a piano through a manual, you learn it through practice. Gmail does this with little popups explaining new features and information for more. But don’t be like Microsoft’s clippy and pop up at inconvenient times. A suitcase without a handle is useless. A gesture without a visual aid is the same way. You have to provide visual queues.
  2. Leveling up: Once a user engages one of your features, you offer to teach them more. Users are often most engages when they first try something. OSX Lion does this in that you have to scroll the window down to get to the Continue button, essentially learning the new way it scrolls.
  3. Power ups: Give a shortcut or advantage. Perhaps show the user how to get to the spot they’re trying to get to faster after doing it for the 10th time.

This is a time to be generous, so share the knowledge of how this new platform of touch should interact. Throw out ideas, reasons why things work, and why things don’t. It’s exciting!

SXSW 2012: Designing for Context

Andrew Crow
VP, Experience Design, GE

Ben Fullerton
Director, User Experience, Method

Leah Buley
Design Strategist, Intuit

Nate Bolt
Pres, Bolt|Peters

Ryan Freitas
Co-founder, AOL/About.me

Presentation Description

As designers take on new problems of convergence and ubiquity, we find ourselves facing new challenges. The products we create are accessed through multiple devices, different channels and a wide audience. How do we accommodate the context of use?

Whether you design mobile apps, services or web experiences, you know that people have different needs and desires. Those issues are complicated further by a landscape of technology.

This discussion will highlight these new challenges and offer solutions based on years of design experience. Topics include:

  • What should you be aware of when designing a product or service for use in various locations and environments?
  • How does motion and distraction affect interaction and content design decisions?
  • Do you provide for casual use vs. urgent need?
  • How does the form factor or input method of your device steer your design efforts?
  • What happens in an ecosystem of products?
  • How does social and cultural context play into the strategy of your design?

Twitter Hash Tag: #DforC

Presentation Notes

In 1995 the Decision Theory and Adaptive Systems Group was created at Microsoft (Dr. Eric Horvitz) who thought they found out exactly when a user would become frustrated, hence the paperclip, which had very poor acceptance and was hated.

Context is the situation people are in when using products. These can be based on context, time, or the circumstances when the user is using the product.

What should we be aware of when designing for Context?

Time

  • Designing interactions for different lengths or instances of time.
  • People are doing other things while using your products. Not only are people doing other things while using your product, they’re also turning your product off (or not using it) and then doing other things in the “real world” and then later come back to it (in-progress tasks).
  • Right “now” is an important time in which it is the best time to survey someone in how they are using your product, and what they’re doing while using it.
  • The context of time can change. For instance, what are the things that have to happen when you pull out your phone in a grocery line real quick compared to the things you have to do when you have hours to do something? What things are possible? What things are not possible?

Platform

  • Prioritizing one platform (such as developing a beautiful app on the iPad) and then making the other devices and website carry through the beautiful aspects of it.

Location

  • How do we accommodate and embrace various locations?
  • If you’re designing an app that is used when you’re outside, make sure it isn’t dark as it’s hard to see with sunlight.

Form & Technology

  • What about screen size, input methods, technical constraints?
  • Intuit has their app SnapTax which allows you to take a photo of your W2 and it automatically populates the fields of your W2. However, and ironically, doing this via a photo takes actually longer than it does to just key-in your values. This aspect actually drives people to the app.

Brand and Relationships

  • How you feel about a brand is going to affect how you feel about their products and services.

What have we learned?

If you’re going to extend your existing product, make sure you break out the pieces of the product you really want and what are most important (1:1 mapping). You have to do the research, design well, and understand your audience.

Adopt a service design mentality to understand where people are intersecting on common needs.

Exposing the matrix. What do we know when we add and look at all the aspects? Well, just matrix those ideas out to find what works best.

Use research that doesn’t take a lot of time or money.

Elder Dictionary: Elderly Terms, Meanings and Definitions

In an effort for humor and eduction I have created a fun website called “Elder Dictionary.” On Elder Dictionary user submitted words and definitions and pooled together to document sayings old people used to say, and some may still. Words include “little bugger,” “smitten kitten,” “davenport,” and a growing list of more! The glossary as of date consists of over 100 words, and is exploding from its soft launch last Sunday (May 8th, 2011).

Elder Dictionary Screenshot

Enjoy!,
Daniel Slaughter

SXSW 2011: Be a Lead Generation Superstar with HTML5 Forms

Chris Coyier
Lead Hucklebucker
Wufoo (@wufoo)

Kevin Hale
Infinity Box Inc

Organizations involved with HTML5

http://w3c.com
http://whatwg.org

Timeline

  • 1990-1995 HTML
  • 1997 HTML3.2
  • 1998 HTML4
  • 2000 XHTML 1.0
  • 2003 XForms: client side validation, but requires a plugin
  • 2004 WHATWG Forms: can’t we just fix HTML? YES!

What is WHATWG?

  • Opera approached W3C with new specifications to work  with current means of HTML. However, W3C basically said no. So, Opera got Safari, Opera, and Firefox involved and formed WHATWG. And then once they had all them, W3C changed their minds and adopted this idea too.

WHATWG Core Principles

  • Backwards Compatible
  • Specifications and Implementations Need to Match
  • More Detailed Specifications

Best Practices for Lead Generation

A lead is information you collect from a user that allows you to take your interaction with them to the next level. Typical Shareware games do 0.5% conversion rate. Flickr is estimated at 5-10%. AdultFriendFinder does 10-22% conversion rate. Amazon.com does a 17.2% conversation rate. And TurboTax online does a 70% online conversion rate.

Steps to Increase your Conversion Rate

  • Labels: the closer the label is to the field, the faster they can process the information.
  • Columns: single column fields do better than double.
  • Number of Fields
  • Pagination: Make sure you establish the progress in which they’re through the form. The moment you don’t they’ll stop.

Types of Speed

  • Infrastructure Speed: how long it takes for the form/page to load from the server to the user.
  • Navigation Speed: how many fields are there? How long will it take to physically go through the form.
  • Cognitive Speed: how much text is there for them to read?
  • Input Speed: are answers pre-selected, or are they not?
  • Validation Speed: how long does it take the user to understand the error?

HTML Composition

  • Semantics
  • Offline Storage
  • Device Access
  • Connectivity
  • Multimedia
  • 3D Graphics
  • Performance
  • CSS3
  • …but what about Forms?

HTML Bad News

  • Very inconsistent browser support even among leading browsers
  • It’s buggy
  • the UI for much of it is ugly
  • The UX for much of it is iffy
  • You’re going to need to write JavaScript fallbacks

Good News

  • You can still use HTML5 form features to make your forms better
  • Some features you can use without thinking twice (eg. type=tel)
  • There are JavaScript fallbacks

Demos

See References below; especially HTML5 Forms Readiness Chart.

So What’s It Missing We’d Like?

  • Implement More of the Spec. Please.
  • Ability to Style Errors and Widgets
  • IE9… Where are you?
  • Drawing Field
  • Location Field
  • WYSIWYG Textarea
  • Access to Camera and Microphones
  • JSON and/or XML as Encoding Type

References

  • HTML5 Forms Readiness Chart
  • Modernizr: To be backwards compatible select Input Type, Input Attributes, and both options under Other.
  • Yepnope.js: If the feature isn’t there, you can load backwards compatible scripts. This is AWESOME!
  • TeleJect: Allows you to get an actual address of a LAT/LONG from the geoLocation data through Google Maps API.

SXSW 2011: Hacking RSS: Filtering & Processing Obscene Amounts of Information

Dawn Foster
MeeGo Community Manager
Intel

Information Overload

There is an obseen amount of data in the world we live in today. Right now we have a mass of 600+ Exabytes of data today (1 Exabyte = 1,073,741,824 Gigabytes).

Most of this information is…

  • Complete Crap
  • Out of Date / Obsolete
  • Not Relevant

So, what techniques can you use to find the information you want?

RSS is a start. Sources you care about delivered right to you, but do you care about everything in each feed? What about feeds you do not subscribe to? Can you keep up with what you have?

Prioritizing your reader

  • Put things you care about at the top
  • Categorize
  • Don’t try to read everything

Outsource / Crowdsource New Sources

The Real Magic is Filtering RSS

  • PostRank: Finds the best posts in a feed ranked on engagement (links, sharing, comments). You can then get an output as an RSS feed, and the feed includes the postrank number as a field.
  • Yahoo! Pipes: Allows you to filter based on any field in the RSS file, not just title and description. The downside is it takes a long time to learn and muddle through.
  • Feed Rinse:Easy to use, not as flexible. Import RSS feeds, and filters, then get new RSS feeds out.
  • BackTweets lets you search Twitter based on a URL regardless of it’s short link.
  • …and many more!

Things to use this with

  • Personal Productivity
  • Understanding the Possibilities
  • Creating prototypes for something you want to build

When not to use it

  • Don’t use in critical or production environments
  • Typically all of this can be done in most programming languages with caching and error checking

References

Dawn Foster’s Blog Post