I asked (on the Twitters, of course) what was the first application to use the pull-to-refresh gesture. My world of followers suggested it was the original Tweetie app, which was then acquired by the Twitter overlords. Since Tweetie, it’s shown up in a bunch of apps on my iPhone. I’m told it’s also on apps all over those Android phones that everyone talks about.

What’s interesting about the pull-to-refresh gesture is how natural it feels. Need more stuff, pull down on the list. Very simple. Very intuitive.

Well, it’s only intuitive if you know about it. You see, the problem is the gesture has no affordance (a hint or clue that the function exists). There’s no way to know where pull-to-refresh is implemented. Anyone who has learned the gesture has probably experienced the pull-to-do-nothing function in all the apps where it’s not implemented. Suddenly, something that’s novel has become a basic expectation, just like Kano taught us it would.

If you didn’t know about pull-to-refresh, how would you learn it’s in your app? For the most point, it requires you learn it from someone else.

Someone who leans over and says, “Hey, did you know you can update your list by just pulling down on your thumb?”

“No Way!” is the usual response, followed by the now-common thumb maneuver. “Cool!” is what comes next.

And it happens. Just like that. We’ve just transmitted the functionality, socially.

Pull-to-refresh isn’t the only socially-transmitted functionality. In years past, it’s how I’ve seen people learn about drag-and-drop in applications. It’s how they learn about special keys, like F5 for refresh or F1 for help. A lot of functionality has been transmitted from one person to the next, socially.

There’s nothing wrong with socially-transmitted functionality, as long as it’s not something the user needs (they can use the design just fine without it) and you have users that talk with each other. The problem comes from when you, as a designer, know about an functionality that only transmits socially, it’s hard to realize that people around you haven’t caught on yet. Just because it’s in your pattern library doesn’t mean your users will know about it.

[A note about accessibility: socially-transmitted functionality is rarely accessible in itself, as it usually has no way for a screen reader to work. For accessibility reasons, you probably want alternative access.]

In a recent site visit, I watched users struggle with navigating around a web app because the return-to-main-menu function was a not-obvious icon that looked like decoration to the untrained eye. All the developers observing the visit knew about it, but this collection of users hadn’t been infected with the knowledge of the functionality, and therefore didn’t use it. Their alternative: sign out of the app and back in again, which returned them to the top-level menu. (Boy, did that ever elicit a sigh of wonderment from the observation party!)

Do you have socially-transmitted functionality in your design? Are they things that users can live without and will be delighted when they hear about it from a friend?

In the next UIE Virtual Seminar, Rich Rutter gets you started with JQuery—assuming no prior knowledge—and shows you lots of examples, hints, and tricks. Just 5 minutes into this seminar, you’ll see JQuery in action and have something you can use in your own wireframes.

Employ Simple Show and Hide Techniques

The essence of JQuery is to find something and do something to it. This technique easily shows different page states so your team and test participants can “do things” to your design.

• See, step-by-step, how to put this simple, yet useful example of JQuery in action
• Use modules and plug-ins to make your design to do simple things, without worrying about the performance of production code

Toggle Wireframe Annotations

Add notes to your interactive design.

• Turn your comments on or off depending on who’s viewing your design
• Add lists, comments, or direction for developers and others who need to work with your design

Fake Simple Ajax Interactions

Without creating production level code, get your design to quickly and easily do its thing—click something and change occurs—for your developer or client.

• Replicate what happens when you click something like a “favorite button”
• Fill in all the steps of an Ajax interaction such as a slight delay or adding different page states on a single page

Get Started with JQuery UI Widgets

Rich will introduce a library with options and widgets that you can easily put in place. In many cases you’ll see how to simulate what the full interaction could be.

• Explore modal dialogues, an intrusive piece of interaction and a good example of something you want to test: Do I really need a modal, or is a link better?
• Get more examples: Prototyping calendars, lightboxes, and more.

Rich will show you the power of combining discreet interactions together with a complex interaction.

Regardless of your JavaScript experience, this seminar will be a great way to start using JQuery and take your interactive skills to the next level. JQuery gives us a clean, interactive feel, and can be the difference between a slick design and something annoying or disruptive. It brings rich interactivity to your HTML and CSS3.

Rich will incorporate complex interaction examples along with providing excellent sources of documentation and tutorials for your toolbox. The seminar will keep theory to the bare minimum and focus on getting you started with practical takeaways you can use straight away.

The real power in what you’ll learn is getting very close to a final look and feel of your intended design with just a bit of effort and without having to build the whole application. Get over the initial hurdle of the JQuery learning curve and gain momentum in your design process. Join us for JQuery for UX Designers.

Story mapping is a way of organizing Agile user stories that communicate user experience. It allows us to build the collection of stories that become the backlog. Agile expert Jeff Patton will show you how story mapping gives you a tool: a tool to both quickly think through and simply describe the user experience. This strong technique helps you put the big picture of UX and the little pictures of Agile in one place, engaging the developers and stakeholders you’re working with.

Users will always have an experience with your product. Story mapping will pull your UX focus into your organization’s process and ensure that experience is a great one.

You’ll learn:

How to build a story map—something you already use—from scratch

You’ll learn to keep the focus on what people are doing, while decomposing into the things your organization designs, and how development happens.

• Bring user experience to the project early and often, while still letting the Agile folks move forward in their process of breaking everything down into little pieces
• Explore ways of describing user experience with Agile stories, and get involved with the “what to build” part

How to overcome the Agile dogma that often starts projects off on the wrong foot

You’ve heard stories and are suspicious, or maybe even had an experience of your own.

• Make sense and avoid trouble in your projects when talking about the user experience, something seemingly antithetical to the agile process
• Story mapping gives you an intermediate structure to represent both the big business “whys” and the specific development “whats” of what the user is trying to do

Why the story mapping vocabulary can alleviate the lack of common understanding that comes with tying Agile & UX together

Between project management, developers, and the UX contingent, you can get everyone on the same page with the terms you introduce and define.

• Use language that still helps you plan and track progress, but doesn’t lose the user experience
• Succeed in working with others on your team who may not be UX-literate, using story mapping as a conversation piece and a collaborative element

You can put this process in place for projects you’re working on right now

Regardless of how far along your team is on a project, it’s never too late to put this technique in play.

• Take control of current projects. Use story mapping to ensure the user experience is an integral part of the product you deliver.
• Reap the rewards of story mapping when you’re stuck, or unsure of next steps, even several iterations into a project

A team deep in the Agile process need things at a certain time, in a certain way. That’s foreign to the traditional UX effort. Story mapping is a way to merge these two worlds. Jeff will dig into why the two approaches are different, and what user experience professionals will do in this Agile environment.

Start story mapping in your agile environment and you’ll be tightly integrated as active team members in the whole development process, and not added as an afterthought. Others will see you as a critical contributor to the process of what to build, and in framing and delivering your product. Join us on September 1.

Get Jeff’s Agile Primer:

Register before August 25 and get complimentary access to Jeff’s 2009 virtual seminar: An Agile UX Primer. Agile refers to a class of processes, and Jeff’s the guy we turn to for this aspect of the design and development world. It’s not a prerequisite, but it’ll add to your takeaways from Jeff’s seminar on Sept. 1.

What happens over time with applications is a design entropy sets in. As new features are added, they are glued on top of old ones, often with slightly different interfaces. Slowly, the application starts to develop a Frankenstein look-and-feel, which hurts the users and the business.

Teams can avoid all this. Using established, well thought out, and proven user interface design patterns, teams can hedge these problems off before they become unmanageable. Even the worst applications can benefit from the careful hand of applying the best design practices.

There’s no one who knows how to deal with hedging off design entropy than Hagan Rivers. I first met Hagan back in 1995, when she was working for Netscape as one of the world’s first web application designers. Since then, she’s become a world expert in interface design, helping hundreds of teams get their application UIs under control.

I’ve had several opportunities to work with Hagan on various projects. Each time, I walk away learning new design techniquesn and feel smarter about how to tackle even the most complex hairball of an app.

Hagan probably has the biggest collection of application design examples I’ve ever seen. Everytime she delivers her workshops and presentations, she brings out these stunningly amazing sets of both good and bad examples. You can instantly see how changing a design in just a few simple steps can immediately make for a better user experience.

This year, I’ve been working with Hagan on her full-day workshop for the User Interface 16 Conference. She’s putting together a intense program, where you’ll walk through practically every type of interface element, from tables and lists, to working with trees, forms, and wizards. She’ll tackle the gnarly topics of simplifying a complex navigation scheme and creating an effective dashboard display.

Anyone who is fighting design entropy, trying to get their application’s UI under control will be riveted by this in-depth workshop. I’m so happy Hagan’s on our UI16 program and I know you’ll love her session.

See the other UI16 Spotlights:

You can catch the sneak preview of UI16 at uiconf.com. (And there’s still a few of the sneak preview $1,349 registrations left. Snag one while they are still available.)

Yes, you read that right. A blind person driving a car. Not an autonomous car that drives a blind person around, but a car where the blind driver is getting feedback and making real driving decisions in real time.

They’ve created an amazing set of devices to make this work. One that impressed me the most was the AirPix, a tablet-like device that uses small holes blowing air to substitute for visual picture. By waiving your hand over the air bursts, the user can get a strong sense of the terrain. It’s Google Maps through air. Brilliant.

Virginia Tech's AirPix Kinestetic Display

Watch the video. You’ll be blown away.

Pam Rodriguez and Luke Wroblewski did a nice job of posting their notes. Thanks guys!

• Steve Portigal on Design Fieldwork: Uncovering Innovation from the Outside In – Pam’s notes, Luke’s notes.
• Kate Brigham on PatientsLikeMe: Adventures with Data Visualizations – Pam’s Notes, Luke’s Notes.
• Luke Wroblewski on Designing Mobile Web Experiences – Pam’s Notes.
• Mike Lee on AARP: Designing a Strategy for Organizational Transformations – Pam’s Notes, Luke’s Notes.
• My presentation on The Essential Principles behind Great Design Principles – Pam’s Notes.

As you can see from the #UIEWAMT Twitter stream, everybody had a great time and we all learned a ton.

There’s one more stop on the 2011 tour – Minneapolis on June 27-28. Use the promo code BLOG and get $100 off the registration price.

See you there!

UIE Web App Masters Tour:
Get $100 off the Minneapolis Masters Tour with the promotion code BLOG.
Minneapolis

Blogger Pam Rodriguez has done a tremendous job summarizing the first day’s sessions. You can read them here:

• My talk: Mobilism & UX: Inside the Eye of the Perfect Storm
• Bill Scott’s talk: Designing for Mice and Men
• Josh Clark’s talk: Mobile Apps: Native or Web-Based?
• Noah Iliinsky’s talk: The Steps to Beautiful Visualizations
• Julie Zhuo’s talk: Facebook: Data-Informed vs. Data-Driven Design Decisions

Our own Web App Master, Luke Wroblewski, also has some great summaries:

• My talk: Mobilism & UX: Inside the Eye of the Perfect Storm
• Bill Scott’s talk: Designing for Mice and Men
• Josh Clark’s talk: Mobile Apps: Native or Web-Based?
• Noah Iliinsky’s talk: The Steps to Beautiful Visualizations
• Julie Zhuo’s talk: Facebook: Data-Informed vs. Data-Driven Design Decisions

Thanks to Pam and Luke for taking such great notes.

You can follow along with the second day by following the #UIEWAMT hashtag or the UIE Web App Tour attendee and speaker Twitter list.

UIE Web App Masters Tour:
Get $100 off the Minneapolis Masters Tour with the promotion code BLOG.
Seattle · Minneapolis

In this week’s UIEtips, we reach back into the articles archives and look at some of the challenges we’ve seen users encounter in our usability tests. These are challenges to look out for when users interact with your applications. I hope you enjoy it.

Read the article, 3 Important Usability Challenges for Designing Web Apps.

At UIE, a big part of our research agenda focuses on how to create web applications that delight users. We feel it’s so important that we created a conference focusing on web applications. It’s the Web App Masters Tour.

During the 2 day conference, you’ll hear from 9 Masters on mobile design strategy, data visualization and design best practices. Get all the details on the Seattle and Minneapolis stops at http://www.UIETour.com.

Josh Clark is a designer and author of the book Tapworthy. In his Virtual Seminar, Mobile Design: Designing Tapworthy Mobile Apps, Josh suggests that designing for mobile is becoming more a question of ergonomics and industrial design. Our audience had so many questions that Josh couldn’t answer them all during the session. So, he met with Adam Churchill to discuss those remaining questions for this podcast.

Here’s an excerpt from the podcast.

“…you really are doing kind of an exercise in industrial design. All these touch-screen devices, they really are blank before you turn them on, before you fire up an app.

So what that means is that it’s really waiting for you to impose an interface on it. And because it’s a physical device, something that’s meant to be worked with hands and fingers, your interface becomes physical, too. So you have to think about where do your fingers and thumbs fall naturally?

And it also means kind of following industrial design precepts. It actually turns a lot of our preconceptions about what design should be for the web or for software in general, literally upside down. We’re used to having primary controls and navigation at the top of the screen where it’s sort of most visually prominent.

It turns out in mobile that the best place to put it ergonomically is at the bottom. If you’re holding the phone in one hand, as we typically are, that means that you’re basically using just your thumb to tap through this. And sort of the comfortable area for the thumb is on the opposite side of the screen and at the bottom. So if you’re holding it in your right hand that means that the most comfortable area to tap is the left side and left corner of the screen, which means [the bottom] is a great place to put primary controls.

And this, like I said, follows sort of a basic principle of industrial design, that you always want to put controls at the bottom and display at the top, for the simple reason that you don’t want your fingers covering the content.

It really means that the primary area for controls and sort of the main buttons are at the bottom of the screen instead of at the top. And that’s, I think, one of the big takeaways. While it’s common sense, it doesn’t necessarily hit people while they’re working on their designs, usually in a desktop setting…”

Tune in to the podcast to hear Josh cover these additional points:

• Should mobile websites actually feature different content from their big screen counterparts?
• What’s your opinion on native iPhone applications versus web applications?
• What do you think of using web technologies like HTML and JavaScript, as examples, for cross platform native apps?
• How does the difference in the sizes of Android devices affect the optimal function?
• What do I need to consider for left handed users?
• What differences are there when it comes to designing for tablets?
• What impact does loading performance have on an app user experience?

Recorded: April, 2011
[ Subscribe to our podcast via ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]
[ Transcript Available ]

More types of devices are accessing your web content everyday. Have you figured out how to accommodate them? Ethan Marcotte is leading the charge in this area, with his work on Responsive Design, which can help your content scale and adapt to new devices.

Ethan’s methods use media queries, fluid grids and other CSS3 elements to create beautiful and adaptable designs across a variety of platforms. Recently, he discussed his techniques during a UIE Virtual Seminar, The How and Why of Responsive Design. Ethan and Adam Churchill address some questions from that seminar in this podcast.

Here’s an excerpt from the podcast.

“… Design really flourishes under constraints. The more known quantities that we have to deal with, the more creative solutions we can often apply. Because, really, design is all about creating order out of chaos.

Now, that can kind of run counter to a little bit of the web’s innate flexibility. As designers, the moment we publish something online we surrender so much control to the people that are actually digesting our content, that are reading our sites, to their browser preferences, to their window sizes, to the actual characteristics to the device they’re viewing our sites on.

There’s a little bit of attention there because I think our instinct as designers is to basically introduce constraints to sort of set those ideal parameters. So we’ll create fixed-width websites to suggest the ideal parameters and to which this content should be read. Or maybe we’ll create separate mobile websites or separate device-specific websites.

The problem is, I think, that desire to sort of impose constraints at some point feels a little not scalable to me. At some point we can’t keep up with the pace of technology. Because as mobile browsing has exploded over the past couple of years and that number is just going to keep going up, the emergence of tablets and other kinds of Internet-ready devices, our job has never been more challenging than it is right now, just this ever-widening landscape of browsers and devices.

So as we move beyond the desktop, I think there’s a lot we can learn from this other design discipline called responsive architecture, where architects have been sort of re-imagining what a space can do and how it can sort of adapt and respond to the needs of the people that occupy it, changing the shape of walls and changing the shape of a space to accommodate different sizes of crowds.

So I think that rather than trying to impose constraints on the web, we can see its flexibility as an asset and better design for it…”

Take a listen to the podcast and hear Ethan cover these additional points:

• How do you convince your clients to go about this “one web” approach?
• Does responsive web design adapt to connection speeds?
• When planning to build a site, do you allow a lot more time to coding and testing various resolutions?
• Does it make sense in today’s environment to design to fixed width?
• When working with flexible layouts, how do you ensure readability at different screen or window widths?

Do you have experiences with responsive web design? Please share your thoughts in our comments section.

Recorded: February, 2011
[ Subscribe to our podcast via ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]
[ Transcript Available ] ]]> http://www.uie.com/brainsparks/2011/03/11/ethan-marcotte-the-how-and-why-of-responsive-web-design/feed/ 0 More types of devices are accessing your web content everyday. Have you figured out how to accommodate them? Ethan Marcotte is leading the charge in this area, with his work on Responsive Design, which can help your content scale and adapt to new devices. More types of devices are accessing your web content everyday. Have you figured out how to accommodate them? Ethan Marcotte is leading the charge in this area, with his work on Responsive Design, which can help your content scale and adapt to new devices. Jared M. Spool and User Interface Engineering (UIE) no 26:46 http://www.uie.com/brainsparks/2011/03/04/stephen-anderson-the-quest-for-emotional-engagement/ http://www.uie.com/brainsparks/2011/03/04/stephen-anderson-the-quest-for-emotional-engagement/#comments Fri, 04 Mar 2011 17:40:30 +0000 Sean Carmichael http://www.uie.com/brainsparks/?p=3571 Duration: 33m | 17 MB

What makes the Digital Age great is ready access to information. But many times there is too much information, too much data, or too many options to make sense of. Users can easily become frustrated or disengage if they can’t find a connection with what is presented to them.

Stephen Anderson, designer and creator of the Mental Notes card deck, believes your users must be emotionally engaged if you want them to exhibit a certain behavior. Stephen uses simple visual representations to help people make choices and understand complex information. In this podcast, Stephen and Jared Spool discuss creating designs that engage your users’ emotions.

Here’s an excerpt from the podcast.

“…I use an example with providing a personal feedback loop on your performance. This is in the meeting tool that I’m working with a start-up on. We had talked about things like providing a score or coming back with a grade, A, B, C, or D, but we felt like there was no emotional connection there.

So instead what we came up with was this idea of a hot air balloon. And when you get back this report, you see a hot air balloon. If it’s fully inflated, you’re doing great. You’re staying in the sky. Everything is fantastic. But if you see that balloon is sort of deflated or losing air, there’s an emotional connection with that. That’s not good, right? The hot air balloon’s going to sink and crash.

So we’ve turned that score, that metric, into something that people can connect with in an emotional way. It’s something that people will look at and they don’t have to say, “Well, is this good or bad?” They know right away this is probably not good. I need to work on this. I need to get my hot air balloon full again, to use that metaphor…”

Listen to the podcast to hear Stephen address these additional points:

• How do you construct designs to elicit the desired behavior?
• Do we run the risk of “dumbing things down” by simplifying information?
• What types of representations work best for different types of data?
• When designing a visual representation, how do you connect the message so it’s not just “dressed up data”?

Recorded: February, 2011
[ Subscribe to our podcast via ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]
[ Transcript Available ] ]]> http://www.uie.com/brainsparks/2011/03/04/stephen-anderson-the-quest-for-emotional-engagement/feed/ 0 Stephen Anderson, designer and creator of the Mental Notes card deck, believes your users must be emotionally engaged if you want them to exhibit a certain behavior. Stephen uses simple visual representations to help people make choices and understand ... Stephen Anderson, designer and creator of the Mental Notes card deck, believes your users must be emotionally engaged if you want them to exhibit a certain behavior. Stephen uses simple visual representations to help people make choices and understand complex information. In this podcast, Stephen and Jared Spool discuss creating designs that engage your users’ emotions. Jared M. Spool and User Interface Engineering (UIE) no 33:16 http://www.uie.com/brainsparks/2011/03/03/how-a-theme-emerges-mobile-design-at-the-web-app-masters-tour/ http://www.uie.com/brainsparks/2011/03/03/how-a-theme-emerges-mobile-design-at-the-web-app-masters-tour/#comments Thu, 03 Mar 2011 16:29:42 +0000 Jared Spool http://www.uie.com/brainsparks/?p=3557 As we were finalizing the program for this year’s UIE Web App Masters Tour, a theme quickly emerged that we hadn’t originally planned on: designing mobile applications.

Up until now, mobile has been elusive for us. You see, we don’t talk about a subject just because it’s the latest fad. There are plenty of sources for hype-ridden design topics.

Instead, we wait until real expertise starts to take form. We keep looking for people who have a broad range of experience — the kind of folks who can answer all the difficult questions our audiences will throw at them.

When a topic is in its infancy, at best, the most advanced folks have experience doing one, maybe two designs. They don’t have the breadth of experience to deal with all sorts of difficult situations, only those situations they happened to encounter in their short-lived experience.

Our approach is to wait, to see what comes from it. If it’s just hype, then it goes away quickly, to be replaced by something new. But if it’s real, well, we can identify some experienced talent.

Mobile Emerging

Last year, a new book was all the rage: Josh Clark’s Tapworthy. We loved the book. At last fall’s IDEA conference, I was excited to share the stage with Josh. Turns out, Josh blew the audience away with a presentation on putting together a mobile design strategy. It was clever and information rich — which is perfect for a UIE program. I knew we had to have Josh on our program.

Luke Wroblewski was a top speaker from last year’s inaugural Web App Masters Tour. We had to have him back. Because of his shift from being Yahoo!’s Chief Design Architect to founding his own startup, he’s been thinking a lot about designing for mobile. He’s putting together a great presentation on what’s he’s learning about designing for a mobile experience first. We’ve been working through his outline, and the presentation is quite exciting.

I also reached out directly to Bill Scott, another of last year’s tour top speakers. He’s back at Netflix, now working on their sign-up experience. As we started discussing ideas for his topics, he shared what he’s been working on: making Netflix easy to sign up and manage on a multitude of devices — everything from iPads to Playstations. He’s been deep in making the subtle interactions work, like how you deal with hover and scrolling, with a range of input devices. (Does your app work with an internet-enabled TV remote control?) Turns out there are many general principles that every designer needs to know.

Our tour always includes people in the thick of designing their web-based applications, so we can hear their experiences. AARP has done an amazing job of keeping a 50-year-old organization completely state of the art. Mike Lee and I started hashing out what he could share, and guess what? AARP’s new efforts of shifting their publications and services to a mobile platform was the big story. He’ll share the trials and tribulations of turning the cruise ship to meet the new challenges of the mobile world.

While all of this was going on, I was thinking about what’s happening with experience design overall. It’s clear that there’s an energy around UX design that is far more vibrant than ever before. I wanted to know where that was coming from. As I dug into our research, I realized there are multiple forces making all this happen. And right in the middle of these forces is the world of designing for mobile. These forces are really strong, which means they’ll affect all of us. Want to know what they are? I’ll tell you at the tour.

When I set out for this year’s program, I didn’t expect half of the sessions to have mobile at their core. But here we are and I’m really excited about it. It’ll be a much deeper treatment than any we’ve seen before, which is perfect for the mission of the Web App Masters Tour — to prepare every web-based application designer for the intense challenges ahead.

[By the way, we're just a few weeks away from our Philadelphia stop on the tour. We're also stopping in Seattle and Minneapolis later this spring. Register for any stop by March 11 with the promotion code WAMT and you'll get $300 off the final registration price.]

Register with the promotion code WAMT by March 11, 2011 for any of the Tour cities and pay just $795.

Certain tips and tricks you can only learn from watching the best in the field do what they do. Peeking over the shoulder of an expert can teach you valuable techniques and insights that you won’t find in any book. That is exactly how the designers at Sidebar Creative learn from others.

The Sidebar Creative collective, made up of Dan Rubin, Bryan Veloso, Jonathan Snook, and Steve Smith, build and design some of the best websites and applications out there. They have over 50 years of combined experience they want to share with you. This year, the guys at Sidebar Creative are conducting intensive one day, hands on workshops to fine tune your skills as a web designer.

In this podcast, Bryan Veloso and Dan Rubin join Jared Spool to discuss some of their best tips and techniques they learned from each other.

Here’s an excerpt from the podcast.

“…The basic principles of form, white space, flow, typography, color, shape, and hierarchy, have changed in tiny little ways. But, the great thing is, that they haven’t really had to change in massive ways.

We have different movements and preferences with each decade. But those are all stylistic and we should embrace them.

Our tipping point is a different thing. When we’re looking at the tools, we have to be focused on not what they can do. Not feature lists, but how they can work best to serve us in our workflow and our needs.

If it’s the wrong tool for the job, find a different tool. If there isn’t a different tool, figure out how many different ways you can bend, twist, and break that existing tool. Basically, hack something like Photoshop and the features it provides to do the job you need it to do.

That’s where I think the excitement is on the tool side for people like us. We look at a tool like Photoshop, which has always been built for photographers. We look for all the different ways where we can subvert its features to do what we want to do.

We’re always on the lookout for a tool that can help us do our job better. It’s not about whether you prefer Photoshop or Fireworks, it’s about why you prefer Photoshop or Fireworks.

If the “why” doesn’t tie directly into how easily it allows you to achieve your creative vision and do your job, then it’s not a good enough reason. You’re probably not looking hard enough…”

Tune into the podcast to hear Bryan and Dan cover many points, including:

• Is using a CSS pre-processor, like SAS, a difficult thing to learn?
• How do you determine where a certain tool, like a pre-processor, will be valuable to use?
• How does using CSS3 help eliminate repair time and exhaustive testing?
• What are some of the latest tricks in web design?

Bryan, Dan, and the rest of Sidebar Creative are teaching an all day intensive hands-on workshop of their tips and techniques at the Web Design Masterclass. The workshops are coming to Austin, Philadelphia, and Los Angeles. For more information including dates, prices, and program, visit Web Design Masterclass.

Recorded: February, 2011
[ Subscribe to our podcast via ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]
[ Transcript Available ] ]]> http://www.uie.com/brainsparks/2011/03/01/bryan-veloso-and-dan-rubin-peeking-over-the-shoulder-of-design-experts/feed/ 1 Certain tips and tricks you can only learn from watching the best in the field do what they do. Peeking over the shoulder of an expert can teach you valuable techniques and insights that you won’t find in any book. Certain tips and tricks you can only learn from watching the best in the field do what they do. Peeking over the shoulder of an expert can teach you valuable techniques and insights that you won’t find in any book. That is exactly how the designers at Sidebar Creative learn from each other. Jared M. Spool and User Interface Engineering (UIE) no 33:15 http://www.uie.com/brainsparks/2011/02/23/spoolcast-mobile-apps-web-based-or-native-qa-with-josh-clark/ http://www.uie.com/brainsparks/2011/02/23/spoolcast-mobile-apps-web-based-or-native-qa-with-josh-clark/#comments Wed, 23 Feb 2011 22:32:23 +0000 Sean Carmichael http://www.uie.com/brainsparks/?p=3328 Duration: 31m | 16 MB
Recorded: January, 2011
[ Subscribe to our podcast via ←This link will launch the iTunes application.]
[ Subscribe with other podcast applications.]
[ Transcript Available ]

With mobile quickly emerging as a viable and practical source of web based content, designers need to know how to adapt and keep up. With the sheer number of different devices out there it can be a daunting prospect. When do you need a mobile website? When should you have an app? What tools and techniques should you employ to address the needs of your users?

Josh Clark is a designer, developer and author of the book Tapworthy. He will also be joining us as one of the masters on our 2011 Web App Masters Tour this spring. And not only that, he will be presenting a Virtual Seminar with us in March. Josh joins Jared Spool in this podcast for a discussion about making the decision between mobile web and native apps.

Here’s an excerpt from the podcast.

“…in the same way that the phone demands a very different interface than the desktop, this middle ground area of tablet really does as well.

So one way that I think about it is that you have your mobile phone when you’re on the way to the coffee shop, but it’s your iPad that you use at the coffee shop.

The iPad is a device of calm and contemplation. It’s something that I’ve observed. A lot of people, if they’ve got an iPad on their desk, they’ll literally pick it up and go and sit in a more comfortable chair.

It’s something for a calmer state of mind for longer sessions than the iPhone.

And of course with the form factor too, it means that your hands and fingers rest in different areas. You have to use more of your arm than just a flick of the finger as you would with the phone.

So in fact when you’re designing for touch, this is one of the biggest things that I think is new for designers when they approach a touch screen platform, is that you really have to think about the physicality of the device.

To press a button on the iPad isn’t just a flick of the wrist like it would be to move the mouse on a desktop. You have to haul your arm over.

So there are honest to God issues of ergonomics to consider when you’re designing for touch devices. It’s entirely new to designers who are accustomed to the desktop.

So what you find a lot, I think, is that it’s not just a challenge of graphic design, which we as software designers on the desktop are often largely accustomed to. It’s really a challenge of industrial design because these devices are just blank slates with no interface to speak of until you impose one on it.

And because your interface defines the physicality of this device because it’s going to be worked by hands and fingers, then it means that you have to have all these ergonomic considerations of button placement. Where’s it going to be easiest for your hands to get at quickly?

Is it large enough? Are the things spaced out enough for fingers? It’s really like designing a physical handheld device in a lot of ways…”

Tune in to the podcast as Josh also covers these points:

• Are the basic principles of mobile design going to stay the same for a while or are they changing?
• How does a designer keep up with all of the different sizes and form factors of mobile devices?
• Is it good practice to make a browser version to test limitations and get a better idea of what the native app needs to be?
• What are the benefits of creating native apps for all the different platforms?

We’re really excited about the 2011 Web App Masters Tour. We’ll be coming to Philadelphia, Seattle, and Minnesota. Josh and 8 other Masters will share their insights and knowledge when it comes to designing web applications. We hope you’ll join us too.

Register with the promotion code WAMT by March 4, 2011 for any of the Tour cities and get $100 off.

I’m interested in finding information about “On Object UI”. To me, this term means displaying controls on or near an object after the user has interacted with the object by hovering over or clicking on the object.

For example, in Microsoft Word, after highlighting/selecting some text, a Mini-toolbar appears near the text with choices that the designer thought the user was most likely to want to choose next.

Another example from Word: click on the File Tab from the ribbon (Office 2010) to enter the “backstage” of Office. Then click on the Info Tab. On the right hand side of the screen there is a “Related People” section. If I hover over the author name, or the “Add an author” text, additional controls appear offering functionality related to managing the author information.

This technique seems to work well, but what are the recommended best practices for its use ? What has been learned about this technique that is to be avoided ? Etc. And what is it called ? I know it by “On Object UI”, but a Google search of “On Object UI” finds very little.

If there is another name for it, I would love to know it. If there is not another name for it, then this seems like an area that User Interface Engineering should research and capitalize on by selling that information back to suckers like me.

Well Greg,

I think there’s a lot of thinking that’s gone into what you’re talking about. The broad term is pop-up menus, though people also call them context menus or on-hover menus.

Chapter 4 of Bill Scott & Theresa Neil’s Designing Web Interfaces talks about these as Hover-Reveal Contextual Tools. (Their book is a great resource. It should be within reach of everyone doing web design.)

I expected to find something similar in the Yahoo Design Pattern Library, but a quick glance didn’t yield anything.

That’s a start at least. We’ve looked at creating UIE pattern libraries, but it’s a hard challenge, as interfaces are constantly in flux. Just look at the recent patterns emerging from iPad apps and you’ll see that any library would have to double in size. I think they only way to do this would be wikipedia-style, with an army of folks trying to keep up voluntarily. That doesn’t lend itself to the making-money-off-of-suckers model.

Hope that’s helpful.

Jared

Subscribe to our podcast via

The number of places that you can access the web grows every day. People can see your content on TVs, tablets and mobile phones as well as the more traditional desktop and laptop. But are you designing for it? How do your users see it? And more importantly, how are they interacting with it?

Bill Scott is the Director of UI Engineering at Netflix. He is responsible for making sure that the Netflix service looks as it should and works properly no matter how you access it. In this podcast, Bill joins Jared Spool and discusses the challenges and a few of the surprises that come with designing for multiple platforms.

Here’s an excerpt from the podcast.

“…Luke Wroblewski, as you know, and others have started the “design for mobile first” which is really “design for constraints first”. You take a more-constrained view of what you can do in the application, either through input or screen size, maybe you’re on the go, and it forces you to think of the main things first. What are the most important items, tasks or goals that the user has, and design for those.

With the living room, with the left-right-up-down [of a remote control], something’s always focused. And you’re always moving from one item to the other. But then, when you move to a pointer-based [system], nothing necessarily has focus. You have random access to things on the screen; you can get to something quicker. With left-right-up-down, your keyboard is usually virtual, on the screen, and those still need a lot of work. We’re doing some A/B testing in April on some different on-screen keyboards to see what’s the right layout.

And then when you move to mobile and tablet, your input becomes more of the finger, thumbs and, swiping gestures. And then when you get back to the laptop, of course, you have the mouse and the keyboard. Mouse really is both a blessing and a curse, because it’s an indirect method. You can move it around just on either the trackpad or on your mouse pad. But you’ve got scrollbars, and scrollbars are really an indirect way to scroll. They’re not as direct, as physical as flicking your finger.

All this leads to that end of the screen. If I’m sitting across the living room, say 10-15 feet away from a television, what kind of text can I read on it? You have to think about how you design the text. Then the mobile, the screen’s small but it’s right there in front of you. And then the laptop, which you’ve got real high resolution. So you’ve got this output, the screen changes a lot.

And even the navigation. When I’m sitting in a living room, and I’m especially browsing for media content, I tend to be in a little bit lazier mode. I want things to kind of show up for me. I don’t want to have to work real hard to find something. If I’m on a desktop and I’m doing some research or something, I’m may be willing to click a lot, maybe type a lot. So, then your whole posture changes.

I think of input, screen navigation, and the posture of the person, not just the physical posture but their mental posture, as they start to use the application in those different scenarios…”

Tune in to the podcast as Bill addresses these additional points:

• How has the changing landscape affected the way you think about design?
• What are the things that you immediately have to take into account when going from a desktop experience to a mobile experience?
• Is there a way to know what types of content need to be on which devices?
• How have you been using Hack Days and how successful have they been?
• What are the advantages of allowing users to do things like, sign up, directly from their devices?

Bill is also one of the Masters that will be joining us for the 2011 Web App Masters Tour. We’re coming to Philadelphia in March, Seattle in May, and Minneapolis in June. For more details such as dates, pricing, and agenda, visit UIEtour.com.

Register with the promotion code WAMT by February 23, 2011 for any of the Tour cities and get $100 off.

What I love about these pictures is how he’s slowed down time. Once it’s slower, we can see details we couldn’t see before.

Turns out we need to slow down time when we’re designing sophisticated interactions. There’s a ton of things happening when we drag an object on the screen or scroll through text. If we want to ensure these interactions feel natural, we have to first slow down time so we can talk about what’s happening.

In today’s UIEtips, we look back at an article we originally published in July 2010. In the article, I talk about a technique that Bill Scott showed me for slowing down time. It’s called the Interesting Moments Grid and it’s a living deliverable that teams can use to describe what happens in the microseconds of an interaction’s lifetime. If you design interactions, I know you’ll find this fascinating.

Read the article, Capturing the Interesting Moments.

Last year, Bill Scott shared his Interesting Moments Grid at the Web App Masters Tour. His talk received rave reviews, so we asked him back for this year’s Tour. In his new talk, Bill explores how web applications handle rich interaction techniques on multiple devices and platforms. Learn about Bill’s talk and the other masters’ talks at UIETour.com.

How do you slow down time when designing your interactions? We’d love to hear your experiences. Share your ideas with us below.

Register with the promotion code WAMT by February 23, 2011 for any of the Tour cities and get $100 off.

Subscribe to our podcast via

Just around the corner from our UIE offices is the fantastic design consulting firm Two Rivers Consulting, operated by David and Hagan Rivers. In his Virtual Seminar, David discusses a number of considerations for creating or updating your application’s visual design. Much of David’s experience is with large and complex web applications that are trying to accomplish many things for many users for large chunks of their working hours.

Web applications live in a strange world―half application, half website. Making a command look like a command can be tricky. Do you make it a button? Should it be a link? In this podcast, David answers remaining questions from the session.

Here’s an excerpt from the podcast.

“…when you have a lot of things that seem equally important, it’s really tempting to make them all look the same because it’s logical for things to be consistent. You make all of your headers look the same; make all of your sections or portions of a portal or a dashboard look the same so that everything seems like a unified design.

And there is definitely some merit to making things look like they belong together, look like they’re a unified design, but that doesn’t necessarily mean that they need to look identical. So I talk about using subtle differences between them so that there’s additional cues that help people find the things that they need.

Sometimes it’s positional. Sometimes it’s color. Sometimes it’s use of borders or lack thereof or providing similar amounts of space around things. So in the case where things are incredibly configurable―I wouldn’t be surprised if Merrill’s talking about a dashboard here―it seems like it might be an insurmountable problem. But it really isn’t.

Because users can configure it, that’s what makes it work. People can still put things where they want them to go. They can still size them the way they want to often. But if you wanted to provide some extra UI for them, you could allow them to pick from a few different visual styles for each configurable thing. And those styles could work together as a family so that some might have borders, some might not. But they work together as components in an overall design that they can cobble together so that things work together as a whole.

But, like I said, the positional placement of things is what really works for them when you’re making things configurable. So that really handles the issue of having things that are otherwise equally important but different enough so that people know what to do with them and how to use them…”

Tune into the podcast to hear David answer these questions.

• How can you handle attention when competing with banners?
• We have a design where there can be a number of things that are equally important, but it’s so configurable that we don’t know how to group them. Any advice?
• What would you recommend as a minimum font size for a web app?
• What would you recommend to make grids look and feel better or more user friendly?
• In web apps do you prefer fluid design or fixed?

In the podcast, David recommends the book Computers as Theatre by Brenda Laurel.

Share your experiences with web application design or any questions in our comments section.

Their mortgage screen contains this list of menu options, with one of my most favorite menu options ever.

As asked in the comments, this is the default presentation when you first view the menu. (Some commented it would make more sense if the See more choices option were the default, but alas, ’tis not the case.)

What is the user scenario behind this menu option? “Whoa! I need to think about my mortgage for a second. Let me get rid of these extraneous menu options so I’m not confused.”

In case you’re wondering, here’s what the “fewer choice menu” looks like:

Aahh! That’s much better.

Seriously, I can’t imagine why someone thought this was the right design treatment for a too-many-choices scenario. This should’ve been a red flag to the designers.

Of course, there are places where I could see a See fewer choices function coming in quite handy. This one, for instance:

Subscribe to our podcast via

Seductive interactions leverage the latest advancements in social science, psychology, and behavioral economics.

In November’s UIE Virtual Seminar, Stephen Anderson showed us specific examples of sites who’ve designed serendipity, arousal, rewards, and other seductive elements into their applications, especially during the post-sign up period, when it’s so easy to lose people.

He also demonstrated how to engage your users through a process of playful discovery, which is vital whether you make consumer applications or design for the corporate environment.

In the conversation, we tackle some of the questions we didn’t get to address in the seminar, and touch upon some other things that Stephen’s been thinking about: Gamification and Story.

Here’s an excerpt from the podcast.

“…I think that’s what you’re seeing a lot of is people taking their business app and “now with badges” or “now with points.” So, every time you comment on our website, you get points and so many points earn you a badge. Those are not the things that make a game fun.

If you talk to game designers, those things definitely are feedback on how you’re doing, but what makes the game fun is also the challenge, the autonomy, the mastery. These are the things that go inside of a game. Those points and badges are really signifiers or reinforcers of those challenges or things that let you know that you accomplished something.

In my workshop, the question I like to ask is “What makes something a game?” and “What makes something fun?” Those are kind of two paired questions I ask. When I say what makes something a game, we start by brainstorming as many different kinds of games as we can.
So, that includes everything from hopscotch to chess to tic tac toe to World of Warcraft to Tetris.

I take a very broad view of games. In fact, we even include things like investing and education. We say, OK, what are the common patterns or the common themes that make these games.
If you look at it, in all these cases there’s a challenge or a goal. There are often artificial constraints, so limited resources or limited time, things like that. There’s also feedback loops along the way to let you know how you’re doing. Those can come in the form of reports or points and badges or whatever it is that’s really that feedback on the goal.

I think with gamification, you’re seeing a lot of people giving feedback or points for no real goal, no real thing that’s important. So, anyway, we talk about what makes something a game. Then we shift and ask what makes something fun? I have a series of 10 questions I ask, why do we enjoy watching the show “Lost? Why do we enjoy scratching off lotto tickets?

All these questions like that, they’re really trying to get at the feelings that we feel and what makes something fun. Then I turn around and ask, OK, how can we create these same feelings in our applications?

When people think of fun they think of positive stuff and a lot of times what makes something fun is things like anxiety, having a little bit of anxiety about something, suspense. All these things that aren’t necessarily positive or we don’t think of right away as positive things, but they actually make something fun…”

Listen to the podcast to hear Stephen answer these questions as well:

• How much “fun” can academic websites be without losing the professional look?
• Does negative reinforcement have any role?
• What books do you recommend on social psychology, social design and neuroscience cognitive seduction?
• Do you see parallels between seductive design and seducing women, and did the ideas of the “pickup” influence you in your thinking?
• Do you have any seductive sign up form examples?

As always, if you have any thoughts or questions, please feel free to share them in our comments section.

Note: Thanks to a lousy connection, the quality of the recording varies throughout this podcast. If you find points difficult to hear or understand, we do have a full transcript available.

Subscribe to our podcast via

Knowing exactly how to design web forms is a struggle. Forms are often a critical step in a user’s journey. It’s easy to frustrate them if your forms aren’t well thought out or well crafted. Luckily, Luke Wroblewski is one of the world’s foremost experts on web form design.

Luke is also the author of the book, Web Form Design. Following up his UIE Virtual Seminar, Answered! Your Top Questions on Web Form Design, Luke addresses the most common questions about web forms.

Here’s an excerpt from the podcast.

“…For a very long time, every single Web form, when you got to the bottom, there was two check boxes. One was checked, one was unchecked, and there was a button that led you to submit. So the first one that was checked by default was, ‘I want to be subscribed to your newsletter. Please send me marketing materials.’

We call this the, ‘Spam check box,’ and that was always default checked. Then there was the second check box underneath it that was, ‘I agree to the terms of service and privacy policy,
which you actually had to check. So the first thing everybody had to do was uncheck the ones for the marketing purposes, check the one for the terms of service, and then click the button.

So it was really an awkward dance. Actually, many, many times, I’ve seen when I’ve looked at analytics on forms that the Terms of Service check box trips people up, and leads to an error
state. People miss it.

It’s usually small. It’s kind of obscure. It’s unclear whether or not you actually have to hit it.

(I’ve) written a book on Web form design, even when I go through some of these forms, I just miss it, and I forget to check it…”

Listen in to the podcast and hear Luke address these questions and more:

• Does field repetition, for confirmation of data, improve performance or not?
• Does having help links such as, “Why are we asking you this?” or “More Info”, within forms increase completion rates?
• What is your opinion on conditionally-required fields?
• Do you have any data on the “Mad Libs” approach to web forms?
• Does the size of the field box affect whether people complete the form or not?

How are you making your web forms more usable? Please share your questions or thoughts in our comments section.

Subscribe to our podcast via

When approaching your information architecture, you’ll realize most sets of content can be organized in more than one way. You need to figure out which works best for your audience, your content, and your project’s goal. There are many approaches to choose from—alphabetic, geographic, format, organizational structure, task, audience, subject/topic—just to name a few. In her UIE Virtual Seminar, Organization Schemes for Web Content, Donna shares the most popular approaches, and offers tips on when and how to use each.

Donna’s a freelance information architect, interaction designer and writer, and happens to be one of our favorites in all of those categories. She is the author of two fabulous books: Card Sorting from Rosenfeld Media, and more recently A Practical Guide to Information Architecture, part of the Five Simple Steps series, which takes her seminar’s topic even further.

Here’s an excerpt from the podcast.

“…Sometimes with the information architecture work coming up with the categories and the concept and like what schemes are you going to use and things is relatively easy. Sometimes the real trick is coming up with the words that you are going to use to describe them so the labels.

And this could be really tricky. When somebody approaches your staff and they got something in their head and they are looking for it on screen we need to make a connection with what they have in their head and what they are saying. So, we really need to make sure we understand the terminology our users use and make sure that is available to them.

Said like that, it sounds not too hard, you do some user research, you understand what your users say, and you make sure you use those labels.

The trick with that and boy this can be hard is that often users use terminology that might be out of date. So in Australia the thing you get at the end of the tax year from your employer that then you use to do tax stuff is called I think it’s called now “pay as you go certificate.”

However, for years, it was called a group certificate. It has not been called for, oh man, at least 15 years I suspect but people still use the word group certificate.

So people will use old terminology, they will use the accurate terminology and if you try to use that in an interface people who prepare the content and who know the most about the content [laughter] will have kittens and validly because language is all about trying to be fairly privies so were communicating well with each other.

So, people call things particular things so that you communicate an idea. We definitely do not want to use terminology that users use if that terminology is inaccurate because people who do know it will go, ‘what?’ and you just never win that war with your content office because it is wrong.

The thing we really need to do is build bridge between those two things. So, if you got something that leads straight forward you can use the user terminology. But, if you got something a bit more complex, sometimes scientific, we’ve got to bridge between them…”

If you thought that was interesting, you’ll also hear Donna address these questions.

• Do you always start an IA by doing a card sort first? How strictly do you adhere to what the users suggest in a card sort?
• How do you test a scheme once you hit the magic point?
• With a very large site which includes a wide variety of topics, how would it be best to test that scheme?
• How do you deal with competing or multiple schemes on the same site?
• What are some of the best practices for naming tasks so that users can recognize them easily?

As always, we welcome your thoughts in our comments section.

Join us in February, as we kick off the 2011 UX Book Club with the talented and funny Robert Hoekman, Jr.

The 2nd edition of Designing the Obvious just showed up in my mailbox and, wow, I’m excited. The first edition was a great book — so great that I kept lending my copy out and not getting back. I think I bought 5 of them.

Robert’s first edition hit on critical topics for creating great designs. In the second edition, Robert’s expanded the principles and examples to help you with today’s design problems.

I’m can’t wait to read this edition and talk with Robert about it. Please join me on February 1 with your thoughts and questions on the second edition of his classic.

How does this work?

Step #1: Reserve your spot at Eventbrite for the UIE Book Club (it’s free!)
Step #2: Get a copy of Robert’s Designing the Obvious. (Get your copy today at Amazon.)
Step #3: Read the book. Write down your questions.
Step #4: Join us on February 1 at 5by5 TV.
Step #5: Ask Robert your questions.

Thanks to the good folks at Aquent for helping us make all this happen.

Sign up for the UIE Book Club.
We’ll keep you posted with the details you’ll need as the event gets closer.

Subscribe to our podcast via

Few people have thought about search, and all that it encompasses, like Mark Burrell. Mark’s the Worldwide Lead for User Experience at Endeca, the company that builds search applications for many of the sites you use every day. These guys know search, and Mark is tasked with making the search experience humane.

With his vast experience with search applications, he oversees the Endeca User Interface Design Pattern Library, which attempts to catalog many of the most successful interface patterns for search. The goal is to make user and designer’s lives easier—and their searches more effective.

Which is exactly why we asked him to join Peter Morville for a UIE Virtual Seminar on Search and Discovery Patterns, back in January of this year. Today we’re revisiting the topic by sharing the follow up podcast Jared Spool recorded with Mark. Jared and Mark discuss a few bonus questions from the seminar. Below are a few highlights from the podcast.

Much of the challenge in search lies in sorting through results in a meaningful way. There are a number of interface components that sites use to accomplish this, and one is the range slider. You may have seen them on sites like Kayak.com. But are these intuitive for the users? Mark says they can be, but the devil is in the details. Designing the search experience is complex and there aren’t simple answers. Used correctly, range sliders can be useful.

“Determine what information is critical for the people you’re designing for and make that salient.”
-Mark Burrell

One size doesn’t fit all. One question asked, should you use different patterns for different audiences? There is not just one right answer to this question, but you need to know your audience and their scenarios, Mark says. Different interfaces or patterns for different types of searchers can be an effective decision.

One example of this is with Intranets. Mark says there’s a surprising amount of overlap between design for Intranets and public-facing sites. But there are advantages to knowing your audience intimately, as with an Intranet. You can tune your search and interface for specific groups within your company. A great example is in searching for human resources information. An average employee searching for “insurance forms” might expect to get a list of the relevant forms for her to fill out.

But if this search comes from an HR employee, her scenario is almost certainly different. She might rather see recently updated forms or policy documents that pertain to the forms, instead of the forms themselves. Leveraging our existing knowledge of who is searching can lead to powerful modifications.

There is much more in the podcast, including a discussion of combining searching and browsing, the complexities of designing components that denote AND vs. OR searches, and the good and the bad with “type ahead” assisted search. Tune in, and then let us hear your questions and thoughts in the comments below.

This year’s topics are an eclectic collection that really says a lot about the current state of online web and software design. The program tells the story of the full development cycle, from coming up with innovative ideas, to making those ideas a reality, to growing the design to fill out its nooks and crannies.

Here’s the UI15 line-up and why we chose these amazing presenters

Leah Buley‘s Good Design Fast session was so popular last year because it really resonated with everyone. We all want to be innovative, to generate new ideas that will blow away our customers and our co-workers. Leah’s session looks at the design process. Whether creating a brand new product or service, or trying to rethink what your existing offerings could be, this workshop delivers the tools to make that happen quickly and effectively.

Dave Gray has opened our eyes on what visual thinking can do. By creating a simple visual vocabulary, filled with simple elements that even a self-proclaimed worst drawer can handle, Dave opens up a world of communication for all of us. We can take complex ideas and lay them out for others, in a simple and understandable way. Seeing our ideas visually gives us a view into the thinking behind them, and lets us see where everything fits together.

For years we’ve tried to get Tamara Adlin on our program. Finally, it’s happening. Tamara is the high priestess of building personas in the design process. Her experience and high energy will keep you captivated as she explains her techniques for effective persona development. The designs that come from teams with a strong understanding of their personas are worlds better than anything else we see.

Nobody knows more about interaction design than Kim Goodwin. She’s a regular high point at our conferences. Kim as the great ability to talk about all phases of the design process, from understanding the users and innovating new ideas, through creating screens and flows, to the final refinements and finishing touches. Every designer deserves a day in their career to hear Kim demonstrate her masterful design techniques.

Luke Wroblewski owns the title of The World’s Most Authoritative Expert on Web Form Design. Luke has spent the last few years studying every possible approach, testing each idea for effectiveness, and is now a walking encyclopedia on the topic. Whether you’re asking your users to create a new account, fill out an application, or file their taxes, when it comes to web-based forms, you need to hear Luke’s wisdom on what works and what doesn’t.

Dan Rubin has a magical way of taking the elements of good graphic design — typography, layout, color, and imagery — and demonstrating how they improve the usability, effectiveness, and feel of a design. After hearing Dan, we suddenly understood what separated great looking sites from those that were frustrating. If you need to know the secrets of how great visual designers get their great results, attend Dan’s workshop.

In the last year, Kristina Halvorson has actively put the most important element — the content — front and center. She’s at the forefront of the new discipline — Content Strategy. It combines copywriting, information architecture, web governance, and business strategy to help organizations get complete control over the most important ingredient of their sites. Attending this workshop will change the way you think about managing your site’s content.

Nathan Curtis‘ knowledge of building design patterns and component libraries is encyclopedic. After listening to Nathan, you’ll share our excitement about the benefits of having an effective pattern and component library. His techniques for discovering, documenting, and curating the library elements are powerfully easy to implement in any organization. Nathan’s workshop is essential for anyone looking to grow their design efforts to meet enterprise-wide scale.

Avoiding Eeny, meeny, miny, moe

There are a lot of choices to make here. We know, it’s a tough decision on which workshops to sign up for. We’ll make it a little easier for you. All you have to do now is register for UI15. You’ll choose the workshops later. When you register by September 9, we promise you’ll get the workshops of your choice. Plus, there’s an added bonus of saving your company $400.

Learn more about the program and register at www.uiconf.com.

Explore the conference program. Planning on attending? Register by 9/9/10 for the lowest rate of $1295.

What I love about these pictures is how he’s slowed down time. Once it’s slower, we can see details we couldn’t see before.

Turns out we need to slow down time when we’re designing sophisticated interactions. There’s a ton of things happening when we drag an object on the screen or scroll through text. If we want to ensure these interactions feel natural, we have to first slow down time so we can talk about what’s happening.

In today’s UIEtips, I talk about a technique that Bill Scott showed me for slowing down time. It’s called the Interesting Moments Grid and it’s a living deliverable that teams can use to describe what happens in the microseconds of an interaction’s lifetime. If you design interactions, I know you’ll find this fascinating.

Read the article, Capturing the Interesting Moments.

Bill Scott will share his technique and many of his Harold Edgerton-esque observations of on-screen interactions in his Web App Masters Tour presentation in Seattle, July 12-13. Bill’s been a favorite on the tour and you don’t want to miss his talk. Learn about his talk and the other 8 masters.

How do you slow down time when designing your interactions? We’d love to hear your experiences. Share your ideas with us below.

Our last Tour stop is in Seattle, July 12-13. Register by July 8 and get $200 off when you use the promotion code TOURBLOG. www.UIETour.com

Subscribe to our podcast via

It’s becoming common to see behavioral cues in everyday web applications. Designers are looking to encourage certain actions, and are turning to the principles of behavioral psychology to achieve their goals. No longer solely the domain of social and gaming apps, you can leverage many of these in your daily work.

Stephen Anderson is the first person we think of when it comes to these kinds of interactions. Stephen is an independent consultant and creator of the Mental Notes, a set of reference cards with design insights from the world of psychology.

Stephen is one of the most popular speakers at the Web App Masters Tour and we want to share a sample of his talk, Designing Seductive Business Apps. In this portion of his talk, he presents three concepts: Scarcity, Set Completion and the Feedback Loop.

[ Download the complete set of this section's slides and follow along. (6MB PDF) ]

Scarcity

Scarcity is a concept we’re all familiar with. When something desirable is rare—like gold—the more valuable it is. When someone is considering the purchase of something, its availability is an important factor in the decision.

Set Completion

Set Completion is something we see all around us. When was the last time you saw a fast food ad where the restaurant was offering a give away? Collectible glasses and kids meal toys are two common ones. Usually there are several different version of the giveaway, and you’re encouraged to “Collect all five!” The closer we are to having a full set, the stronger the urge to complete the set.

The Feedback Loop

The Feedback Loop is essentially “cause and effect.” When we see our actions have an immediate effect on a situation, we are likely to become engaged. Have you ever walked in front of a TV display at a retail store and noticed you were on the TV? It probably stopped you in your tracks. In web apps, the more immediate the effects of our actions are seen, the more engaging the interaction can be.

In a 4-part series, we’ll feature audio interviews with these Masters. Today’s tips feature Julie Zhuo of Facebook and Bill Scott of Netflix.

Julie Zhuo’s podcast, Design Lessons from Facebook’s 350 Million, shares how Facebook handles design changes and public reaction to these changes. You may be surprised by what she has to say. Listen to Julie’s podcast.

Bill Scott’s podcast looks at design patterns and rich interactions. He talks about exploring each micro-stage of an interaction and designing for the nuances of interesting moments. Listen to Bill’s podcast.

Julie and Scott are two of the 13 Masters involved with the Web App Masters Tour. If you’re involved with web app design, then you’ll want to explore the rest of the Masters and their sessions in the 4 city tour. It’s two days of inspiring presentations with a perfect blend of theory and practice. Learn more about the Tour at www.UIETour.com.

Until April 19, you can register for any of the Tour cities for $795 when you use the promotion code TOURBLOG. Learn more about the tour at www.UIETour.com

Prototyping is an iterative process. You discover what works, what needs improving, and opportunities for new ideas. The earlier you learn about a design change, the easier it is to implement, and the less costly that change will be. Prototyping allows your team to explore ideas before you invest in them.

In this seminar, Todd Zaki Warfel, a recognized leader in the design-research and usability fields, will explore his Eight Guiding Principles for prototyping. These principles are the foundation for more effective prototyping, and will improve your design process whether you’re a seasoned prototyper or just getting your feet wet.

Register before March 24 to get your free personal PDF copy of Todd’s book, Prototyping, A Practitioners Guide, and lifetime access to Fred Beecher’s seminar, The Whys, Whats, and Hows of Prototyping.

Tell us how prototyping fits into your design process. Do you have an example where something in the design was caught early and saved a bunch of money? Or one where something was identified late and cost money? What is your experience with prototyping, and how do you sell it to the rest of the team? Or your stakeholders? Share your thoughts and experiences below. We’d love to hear them!

Interaction with a product is more than how it’s used or how it behaves. It’s about a connection between two sides. One side is the customer, but the other side is much more than a product or service. To many people, the character and essence of a product and its company are identical. So, what is the essence of your product?

When your product behaves like a machine, your company is perceived to be a machine. It’s just another company – rigid, mechanical, and cold. Yet when your product displays a bit of humanity, your company gains a face and becomes another human.

In this webinar, you’ll see examples of how humanity exists in the design of products and services through humor, personality, and emotion. You’ll explore how just a little extra design effort and thought beyond functional needs can enrich the experience, reveal the company behind the product, and forge enduring connections with customers.

This presentation generated quite a buzz at Web App 2009. It’s a talk that’s sure to get you thinking
about your products, and how you foster the connection between your products and your customers.

In advance of the presentation, we’d love to hear from you. How do you gain an edge with your products? How does your organization show its humanity? Share your thoughts, questions, and concerns below.

Subscribe to our podcast via

For our tenth show we bring you a special edition of the Userability Podcast… recorded LIVE from the Voices That Matter 2009 Conference, held in San Francisco in April.

We had two audience questions. The first question asked, are there are any applications or research best practices that Jared and Robert use to aid in persona creation?

The second audience question asked about the the usability of iPhone applications, especially considering that on-the-go, handheld, touchscreen apps are a relatively new concept.

Tune in to hear Jared and Robert duck and dive in front of a live studio audience.

Have a serious UX question? Send it in and Jared Spool and Robert Hoekman, Jr. will answer it with a healthy dose of levity. Please send your deep, vexing questions to us at userability@uie.com. We’d love to feature you on the show!

Do you have any persona tricks and tips? What’s your take on the “new” territory of iPhone apps? Is it new territory? Let us know in the comments!

PS— During the show, Robert referenced Apple’s iPhone/mobile Human Interface Guidelines, which are fully available from Apple.

Subscribe to our podcast via

Robert Hoekman, Jr. recently joined us for a Virtual Seminar on Interaction Design Frameworks, called, Web Anatomy: Interaction Design with Frameworks. The concept is a new one, and Robert and I are exploring and introducing the concept in new book due out shortly. The seminar (which is still available) was well-received, and we asked Robert back to help us answer some audience questions we did not have time to discuss during the seminar.

Here’s the list of the questions we discussed,

• Do you see being able to abstract information architecture into set frameworks?
• Should design patterns really be referred to as production patterns that fit within creative frameworks?
• Are you basing design patterns on generally accepted Web standards or what’s standard within the uses of the business?
• If you’re assembling a site with anatomical framework pieces, how do you avoid building a Frankenstein?
• Is there any relationship between an IxD framework, and a UI framework like jQuery?
• If everything is encapsulated and solved with an Interaction Design framework… will there be less need for Interaction designers in the future and more need for visual designers to differentiate?

Tune in and see how Robert thinks frameworks could make your job noticeably easier and perhaps even more interesting. If you still have questions, let us know in the comments.

Subscribe to our podcast via

This week’s episode features a shadowy UI Designer by the name of Jamis Charles, from a secretive organization located somewhere in Texas. Honestly, that’s all we know about him. Cloak and daggers aside, he brought an intriguing challenge to the show.

Jamis, if that is his real name, asked,

Should link treatments vary for different methods of displaying content to the user? For example, on a single page I have several links. The first one takes me to another page when I click. The second shows a hidden layer with more content if I click. The third shows more content if I hover.

If these links should be styled differently, should the treatments be organized by type of content, or by the user interaction method?

Tune in to see how our hosts answer this challenge while our guest and his project maintain their anonymity. And to hear Robert wax nostalgic for a steak he once ate in Texas.

Have a serious UX question? Send it in and Jared Spool and Robert Hoekman, Jr. will answer it with a healthy dose of levity. Please send your deep, vexing questions to us at userability@uie.com. We’d love to feature you on the show! Till then, if your’re in a situation like Jamis, let us know how you would handle it in the comments!

Robert is thinking about this concept more than anyone we know. So much so, that we’ve asked him to present a UIE Virtual Seminar on Wednesday, May 27 — Web Anatomy: Effective Interaction Design with Frameworks .

We’d love for you to join us at the Virtual Seminar next week, but you don’t need to wait to be exposed to this concept. Earlier this year, Robert wrote a great article on frameworks. If design patterns describe cross-application behaviors, and design components are the place within an application where the behaviors and the implementation meet, then an interaction design framework is a systemic view of a specific portion of the system. An example? Let’s say you’re developing a site where users will need to log in. You know you’ll need a “username/password” login form. But, did you also remember the “Forgot Your Password?” feature? Or what you’ll need to create the user’s account? Or the functionality to change the password? Frameworks are the place where behaviors meet enterprise-wide thinking.

Are you involved in making web-based applications a key development platform? You’ll want to understand how frameworks make large-scale projects much easier. Robert’s article is a good introduction as to why that is.

Web Anatomy: Introducing Interaction Design Frameworks

By Robert Hoekman, Miskeeto
Originally published: Feb 02, 2009

UIE Virtual Seminar
Web Anatomy: Effective Interaction Design with Frameworks
With Robert Hoekman, Jr.
Wednesday, May 27, 2009, 1:30pm ET
90-minute online presentation

In your project, you’ll need to ensure you’ve got all the essential features along with those new, super-cool, hip capabilities that will dazzle your users. By using these interaction design frameworks, you’ll have a ready kit of necessary components so you’ll create the best possible design.

To help us understand how interaction design frameworks help us think through our designs, we’ve invited Robert Hoekman, Jr to tell us how they work. Robert’s been thinking about Interaction Design Frameworks more than anyone we know. He’ll show you how frameworks fill in the gaps left by design standards, best practices, and libraries of individual patterns. You’ll see examples from major web sites, where the frameworks helped predict missing functionality and critical design elements. Avoid these costly mistakes, and you’ll deliver a top-notch experience for your users.

Robert put together a great preview for you, to help you understand what to expect out of this seminar.
Click here to visit the site page with the preview.

If your team needs to quickly come up with designs that are both creative and usable, Robert’s seminar is a must for you. You’ll want to watch this with your entire team, so they come away knowing how interaction design frameworks will dramatically simplify your organization’s design process. Reserve your spot today!

Subscribe to our podcast via

This week Robert Hoekman, Jr. joins us to discuss Design Frameworks. Drawn loosely from the idea of coding frameworks that software developers use to more efficiently build software, design frameworks are an aid to assembling a design.

Frameworks sprung from research into web ROI that Robert conducted after a parade of clients came to him looking to improve their conversion rates. In the case of these clients, he needed to find the essential elements that encourage people to sign up for a web app.

From there, he applied that process to other areas, like search elements. What combination of essential design elements had to be assembled for users to successfully obtain their goals?

You can compare frameworks to design patterns, although patterns tend to be smaller, more specific solutions. Frameworks, when built out, can contain design patterns. Robert wrote a five-piece blog post series for Peachpit on his development of a sign-up a framework, called Five Tips in Five Days. Robert will detail the full story in a new book, co-authored with me, coming soon from New Riders.

Frameworks help create consistency in interface elements to help solidify the UX. Robert uses frameworks on all his current projects. He starts out with a check list of all the main elements what will help a person accomplish a goal. Projects will require frameworks for many different parts of the project and they need to dovetail with one another. Robert shared with us a story of what happens when they do not. It winds up that examining where frameworks clash can act as a diagnostic tool for some usability issues.

Tune into to the podcast for more details and a preview of the full-day workshop the Robert will be conducting at the UIE Web App Summit, entitled Web App Anatomy: Effective Interaction Design with Frameworks. We hope you join us April 19-22, 2009 in sunny Newport Beach to learn more about this useful new design method.

To help you understand what you can expect out of this seminar, Hagan has put together a preview for you:

Don’t miss this presentation! Register with the promotion code STPADDY and get both our lowest rate of $99, and lifetime access to the recording of this talk at no additional cost. Share it with others in your organization to watch whenever they want, as often as they want.

In advance of the presentation, we’d love to hear from you. What challenges do you face with your web application’s navigation system? What advice can you pass along to others? Are you planning to be at the Web App Summit in Newport Beach this April? Share your thoughts below.

Subscribe to our podcast via

We’re back again this week with more savvy and silliness from the world of Userability. But first we’d like to thank you for making our first show such a success, we’ve had a ton of downloads. Have you told your friends about the show yet?

This week the guys spoke with Jon Hartmann of Morgantown, West Virginia. Jon asked Jared and Robert,

I’m a web developer (programming), not a web designer (graphics), but I love analytics and designing user interfaces. How do I make the career jump from coding to interface design and usability?

Tune in to find out if Jared and Robert can help Jon make the jump. As a free bonus, you’ll also learn where to find coffee in West Virginia.

We’re always looking for guests to stump Jared and Robert. Send us an email at userability@uie.com with your burning design-related questions.

What’s your two cents on the advice Robert and Jared gave today? Let us know in the comments!

Dealing with real-life web app production isn’t as glamorous as some aspects of design in the digital realm, but it is full of challenges and can honestly make or break a project. There are ways of truly optimizing certain aspects of the production so that you can create a product with consistent quality at a faster pace. To find out how, I turned to Nathan Curtis.

Nathan Curtis is a principal and co-founder of Eight Shapes in Washington, D.C., where he is spearheading research into design patterns and component libraries. Eight Shapes turns out great work in the UX and IA realms, with some impressive clients.

In our discussion, Nathan and I first defined design pattern libraries and component libraries. A pattern library is a repository for ideas and solutions to design interaction problems. Component libraries are comprised of actual functioning parts with real code. An example would be a log-in process. Your pattern would define the experience of logging into your application, from the interaction, and often visual standpoint. Your component would be the chunk of code that represents the set of fields and controls that can be replicated across your organization’s web properties, so that you can easily create a consistent experience for your users, no matter where they may enter your system.

You can see just from this one example that if you’re designing even a moderately large site, having repositories like these can save you tremendous production time. You can multiply those savings if you have multiple teams working on different portions of the same property. Each team doesn’t need to invent their own wheels and engineer them from scratch.

We go into more detail in the podcast and also compare these to style guides, which were the first step toward this idea—one that is too often broken, over restrictive, and simply ignored. Tune in to hear how pattern and component libraries can help you avoid these traps.

Nathan will teach us much more about how to build out your own library of reusable patterns and components in a full-day seminar at our Web App Summit, coming April 2009 to Newport Beach, California. You won’t want to miss it.

Have you employed a pattern or component library in your projects? What experiences can you share? Please let us know in the comments.

Over at Semantic Foundry, designer extraordinaire, Will Evans, has a wonderful essay explaining how he uses wireframing as both a problem setting and a problem solving approach.

I pick my primary audience and the one activity which allows them to solve one goal quickly, effortlessly, elegantly. In this case, the primary audience wants to easily find the best cruise, at the right time, for the right price. I don’t even look at the requirements document or competitive analysis until after I have sketched a couple of ideas either on paper or using Omnigraffle, which explores the primary goal. I’m not looking for solutions at this point because the first round of wireframes provide a space to engage in a dialogue with other designers, stakeholders, and the wireframes themselves.

It’s a great description of how Will tackles a design and he’s provided his work products for you to download.

Read Will’s essay: Shades of Gray: Wireframes as Thinking Device