Web Directions Unplugged

May 1213 2011, Seattle
Building awesome native & web apps
with open web technologies

Design Track

Relly Annett-Baker has a content strategy for your app; Juliette Melton goes mobile with user research; Stephanie (Sullivan) Rewis is moving it with CSS3 transitions and animations; Daniels Lee™ is designing for the 10 foot UI; Aaron Weyenberg knows the perils of realistic UI design; Rachel Hinman looks at mobile prototyping essentials; Dan Saffer tackles the top ten issues for touchscreen design; and Divya Manian is very creative with CSS3.

Move it! CSS3 Transitions and Animations

It’s all about the movement, baby!
Photo of Stephanie (Sullivan) Rewis

Presenter: Stephanie (Sullivan) Rewis

Since the early days of the web, the only reliable way to get movement on your site was through Flash, or more recently, Javascript. But now, with WebKit and Mozilla leading the way, transformations and transitions can be done with pure CSS, even on mobile devices. And for those in need of even more movement, CSS3 provides for keyframe-based animations. In this session, we’ll take a look at all of the possibilities and explore what works and where — from the simplest effects, to creative usability enhancements including the combination of CSS with mobile Javascript frameworks.

See the slides and hear the podcast.

Realistic UI Design – the good, the bad and the ugly

Do’s and Don’ts
Photo of Aaron Weyenberg

Presenter: Aaron Weyenberg

A new generation of touch devices have proven to be exciting playgrounds for app designers. And with every new product we create, we have the opportunity to offer the most clear and efficient experience for our users. Recent UI trends often lean to realistic, faithful representations of analog controls and features. These designs can offer advantages, but also come with their own set of hazards.

In this session Aaron will lead you on a tour of current trends and practices, examining the strengths and drawbacks that realism brings. We’ll talk about things like mental models, innovation and usability as they relate to lifelike UI. Finally, Aaron will share some pragmatic guidelines to keep in mind as you build the next wave of mobile and touch apps.

See the slides and hear the podcast.

Top Ten Things To Tackle Touchscreens

Designing for Fingers and Hands
Photo of Dan Saffer

Presenter: Dan Saffer

The average size of an adult human’s finger pad is 10-14mm. The average size of a cursor or stylus tip is 1-2mm. That fact alone means that designing native touchscreen apps is an entirely different thing than designing web, desktop, or even traditional mobile apps. This talk outlines the most important concepts, guidelines, and practices to keep in mind when designing with fingers and hands in mind. We’ll cover interaction zones (where it’s easiest for fingers to reach), touch targets (size and distance apart), kinesiology (how fingers can bend, move, and stretch), and signaling (how users can become aware of gestures).

See the slides and hear the podcast.

Designing for the 10 foot UI

The Web Platform for the TV in your living room
Photo of Daniels Lee™

Presenter: Daniels Lee™

The web platform has already taken a center role in our desktop and mobile computing lives. The next space for the web platform to take over is the biggest screen in your house — the TV in your living room. However, designing for television has its own set of demands, different than designing for desktop and mobile implementations. This talk outlines the most important best practices to keep in mind when designing web applications for TV. We’ll cover issues like directional pad navigation, user interface design for TV, color issues, and zooming, as well as discussing some unique opportunities for TV applications.

See the slides and hear the podcast.

Bring your apps to life with CSS3 magic

Make your web apps really sing
Photo of Divya Manian

Presenter: Divya Manian

Being a front-end designer used to mean pixel hacking and endless rounds of pain while trying to make sites and applications “look the same in each browser”. Thankfully, we now live in more interesting times. But as we strive to make our web apps a pleasure to use, the vast array of tools and techniques available to us present their own set of challenges. In this session you will learn to ask the right questions to guide your choice of tools and the design.

Find out how to creatively use new features of CSS3 (gradients, multiple backgrounds, generated content, and many more) to give life to your design ideas, make them adaptable and maintainable, and provide the best experience possible on an array of platforms.

Finally, you’ll hear how to create a library of simple and ready-to-use design patterns, that you can incorporate into your workflow to bring your designs to life much faster.

See the slides and hear the podcast.

You had me at “signup”- Content Strategy for Apps

Creating fulfilling mobile apps with a few well-chosen words
Photo of Relly Annett-Baker

Presenter: Relly Annett-Baker

Dear app makers,

I love the stuff you have been putting out recently. Supercool maps, guides, syncing and such make my day. There’s just one little thing. As a content strategist and writer, I’ve noticed that some of your instructions aren’t as clear as they could be. The experience is not as fulfilling as it might be. I know this might not be your favourite part of the process. In fact, they are probably the bits chucked in to get it out the door. And so I have created a session to help ease the pain.

I have a framework for you to build on to make sure that your next app is as pithy as it is pretty and elegant to use as it is coded. I’ll even bring a whole virtual suitcase of apps with fantastic snippets of microcopy to inspire you. It’s a pretty simple concept and it’s a bunch of fun to work on, running alongside your app development.

In one sentence: it’s about creating a fulfilling experience, one that puts you ahead of your competition, simply through the power of the written word.

See the slides and hear the podcast.

Mobile User Experience Research

What’s New? What’s Next?
Photo of Juliette Melton

Presenter: Juliette Melton

Most user experience research takes place sitting behind a computer. And yet these days, most networked experiences are happening on mobile devices. Some common user experience research methods work well in a mobile environment — others don’t. In this talk, Juliette Melton will guide you through how to use some great existing research methods in a mobile context, how to incorporate some new (and fun!) methods into your arsenal, and propose next generation tools and services to make mobile user experience research even better.

See the slides and hear the podcast.

Mobile Prototyping Essentials

Tools, methods and techniques for Prolific Prototyping
Photo of Rachel Hinman

Presenter: Rachel Hinman

We’ve heard it all before… prototype, prototype, prototype. It’s a standard step in almost any design process — but often the first step skipped in time and budget constrained projects. While prototyping is considered a standard step in any UX design process, it is an *essential* part of the mobile UX process. This talk will outline why prototyping is essential to part of the mobile UX process and how prolific prototyping is a necessary step for designers keen to grow the ruthless editing skills necessary to craft successful mobile experiences. This talk will also cover common and uncommon mobile prototyping tools, methods and techniques that you can apply to your project work.

See the slides and hear the podcast.