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?

Dan Rubin is one half of Webgraph and part of the Sidebar Creative team. He’s a great designer and a fantastic teacher. In his virtual seminar, CSS3 for Everyone, Dan shows examples of web sites currently employing CSS3 well, enhancing the user experience. He also demonstrates how using CSS3 pseudo-elements gives you more flexibility with how you can style elements.

Dan and Adam ran out of time to answer all of the great questions from our audience. So they caught up to address the remaining ones for this podcast.

Here’s an excerpt from the podcast.

“…I recommend checking out dolectures.com built by the folks at Paravel. It’s a beautiful design. But if you view it in a desktop browser, and re-size your browser up and down, make the browser window really small. You’ll see that this is a properly responsive design. [It] uses media queries as well as fluid grids and web fonts and, behind the scenes where needed, they’re using structural CSS to achieve things without having to incorporate JavaScript.

It’s a great example of a site that you could look at and not [realize] it was doing a lot of special stuff. And that’s really the point here. The point isn’t to use CSS3 to throw these bells and whistles around everywhere in plain sight. For it to be useful to us, it has to save us time. It has to improve our work flow and improve our output.

And that’s why it’s exciting to me and to everyone else who’s actively using it now. It saves time, it makes testing easier, and it makes things like responsive web design possible in the first place. It allows us more flexibility, especially if you’re a designer, to kind of have this one-to-one or closer to one-to-one relationship between what you’re doing in a visual design app like Photoshop or Fireworks where you can use opacity.

One of my favorite tricks is to use lots of layers of either black or white and to layer on top of either images or other colors that I’ve set in the design. [I then] use opacity to vary the level of detail and the level of mixture of that color. You can do that in Photoshop and you can transfer that directly to RGBA colors and do the exact same thing without having to do any weird conversions or use your color picker.

Once you start actually doing that and experiencing how that changes your work flow, you realize that it’s not about making things flashy and adding all sorts of animations and transitions and hovers and drop shadows and making everything have a rounded corner. That’s not what it’s about. It’s about how it changes the way and improves the way that you build and design…”

Tune in to the podcast to hear Dan addresses these questions:

• Can images, HTML, and other characters be inserted through the before and after pseudo-elements that you discussed?
• Can you use CSS3 when designing for mobile, specifically iOS and Android?
• Do you have a list of live websites that currently leverage CSS3 well?
• What tools do you use when designing with CSS3?

What are your experiences with CSS3? Share your thoughts with us in our comments section.

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

One such podcast interview was with Dan Rubin in a follow up to his webinar on visual design tips for non-designers. Dan is an amazing designer and part of the talented Sidebar Creative collective (they do the Web Design Masterclass). We found Dan’s information so valuable we thought it was article worthy. So we took part of the transcript of his podcast with Adam Churchill and turned it into this week’s UIEtips article. After reading this article you’ll definitely want to hear the whole podcast.

Read the article, Visual Design Essentials for Non-Designers

In addition to being a great designer, Dan is a great teacher. You can learn from him and the other members of Sidebar Creative in a personal, hands-on environment at the Web Design Masterclass in Los Angeles on August 16. For all the details on this intensive one-day workshop, visit http://sidebarworkshops.com.

If you can’t make it out to LA, you can also catch Dan’s next Virtual Seminar on June 30, CSS3 for Everyone.

Last week we featured an excerpt from Noah Iliinsky’s book Beautiful Visualization. The article explained how we achieve beauty in information design, and the distinction between visuals designed to show what the designer already knows, versus visuals intended to explain a new concept or idea.

In today’s UIEtips, we feature the rest of Noah’s excerpt. Noah explores the importance of making visualizations more efficient, and tips to reduce visual noise and the quantity of text.

Read the article, Beautiful Visualization: How To Make it Efficient.

This Thursday, February 24, Noah continues to explore using information visualization to explain data in a virtual seminar. He’ll discuss the types of visualizations in common use, why and when they are useful, what types to use in different situations, how to think about different types, and who’s doing good work. Learn more about this virtual seminar.

And you’ll also have an opportunity to see Noah in person at one of the Web App Master Tour stops. The first stop kicks off on March 21 in Philadelphia. Read about the Web App Masters Tour.

How do you make your visualizations more efficient? Do you have specific methods for cutting out the quantity of text? Share your thoughts with us below.

Information visualization is the graphic presentation of data. Done right, it’s like you’re looking through the eyes of an expert. In today’s UIEtips, we’re sharing an excerpt by Noah Iliinsky, from the book Beautiful Visualization. Noah explains how we achieve beauty in information design, and the distinction between visuals designed to show what the designer already knows, versus visuals intended to explain a new concept or idea.

Read Noah’s article, Beautiful Visualization: How Do We Achieve Beauty?

Next Thursday, February 24, Noah continues to explore using information visualization to explain data in a virtual seminar. He’ll discuss the types of visualizations in common use, why and when they are useful, what types to use in different situations, how to think about different types, and who’s doing good work. Learn more about his virtual seminar.

And you’ll also have an opportunity to see Noah in person at one of the Web App Master Tour stops where he’ll dive deeper on how to create beautiful visualizations. Explore the Web App Masters Tour at UIE.com.

How do you make decisions for displaying data? How do you know when you’ve done it right? Or more succinctly, what does a beautiful visualization mean to you? Share your thoughts with us below.

Subscribe to our podcast via

Visual design is often considered an artistic realm. Many times people shy away from design or limit their involvement despite being completely capable of creating a great design. Learning the basics of design can help dispel the notion that it is only for the artistic. According to Dan Rubin, “there’s a big separation between being artistic and being creative.”

Dan is a highly accomplished user interface designer and usability consultant. He conducted a UIE Virtual Seminar called Visual Design Essentials for Non-Designers. So many questions were generated that we couldn’t address them all during the session. Today we’re bringing you the follow up podcast in which Dan tackles those remaining questions.

Here’s an excerpt from the podcast.

“…Design is not just the visuals and the aesthetic aspect of making something look pretty or attractive, while there are some established rules and just psychological principles of what makes something attractive, to most people it is a very subjective thing. You might like a different color palette than I do in a design. Or to one person a lot of visual flourishes might be appealing while to someone else it’s distracting.

But those aren’t the things we’re really talking about. Those are more of the artistic layer of visual design. Picture it in a couple of different layers. Design in its core is about the visual aspects that support the functionality in a given thing. If we’re talking about physical products in the real world or virtual products such as web apps and services the design is what communicates the functionality to the user.

When we talk about interaction design, that’s a more detailed side beyond just the communication, the actual interaction, the give and take. What people will click on and how that behaves.

When we’re working at a lower level, below the behavior, what we actually need to do is provide a foundation for that functionality or for the content. A framework of sorts that allows the user to easily interact with and understand whatever is being communicated. So at its core level, the principles that we were talking about in the virtual seminar are more about how to make something easily communicate its intention.

When we’re talking primarily about good typographical rules and creating a balanced visual hierarchy, those things are not subjective. Those just are. You can guarantee that people will react a certain way to these things. And we’re not actually looking for an emotional connection where we might be with color and the more artistic layer if you will.

That’s the nice thing about design. At its core level it’s not really subjective. It’s just a matter of good balanced decision making and not cluttering things, not overcrowding. A lot of the time people mistake good, basic core design principles for just common sense. Because once you see them applied properly they just do make sense. You can’t imagine them being done any other way…”

To hear more, tune in to the podcast as Dan also answers these questions:

• Do you have any strong opinions on fixed width content areas?
• What tools can non-designers employ to add visual depth?
• When your design is dominated by one specific color, how do you suggest incorporating new color relationships?
• When do you decide to use serif fonts versus sans-serif fonts?
• What are your thoughts on discussing some of the elements of the design with your clients, for example color?

As always, we welcome your opinions. Please share your questions and comments in our comments section.

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.

It’s a tough question because the answer often is Yes and No. Yes, good design practice is good design practice and it applies no matter what you’re designing. You need to know who your users are, what they are trying to do, and how they expect to do it. You need to watch the users work with the designs you create, so you can learn where the designs are working for them and where they are failing.

But No. Designing for web apps is a different type of animal. It lives in a browser, it has complicated activities and edge conditions, and little things can have big implications, especially when they go awry. You need to know different things when designing for web apps than when designing for any other type of interaction.

Then again, that’s what makes design interesting. Understanding the problems and fitting them into the constraints is the fun part of design.

In today’s UIEtips, we look back at an article from November 2006 that still rings true today. I talk about five usability challenges that web-app designers face. While these are not unique to web apps, designers will find themselves dealing with problems and constraints they’ll rarely see other places.

Read the article: Five Usability Challenges of Web-Based Applications

Part of the challenge in web applications is the visual design of a web application. David Rivers tackles this challenge in our next UIE Virtual Seminar: Visual Design for Web Applications, tomorrow, November 18. David shares real-world examples and insights that you won’t want to miss. Learn more about the virtual seminar.

What challenges have you faced when developing web-based applications? How have you overcome these? We’d love to know. Leave your thoughts in the discussion below.

Visual design problems affect an application’s success in a variety of ways. In the mildest form, they slow users down and distract them from their task. In the worst cases, they confuse users to the point of giving up or needing assistance. If the application is in the organization’s revenue stream or helps reduce costs, we’ve seen visual design issues can dramatically affect the bottom line.

For some time now, we’ve been fortunate to work with the design consulting firm, Two Rivers Consulting. UIE virtual seminars from Hagan Rivers have taught you to design better navigation and her Web App Masters talk shows you techniques for navigation in web applications. Now, we are honored to share with you the other half of this talented team, David Rivers.

On November 18, David will present a virtual seminar—Visual Design for Web Applications. He will help you improve your application’s visual appearance, while taking into account those real-world considerations we all face. David will show you how to create or update your application’s visual design to make it successful and delightful.

Join us on November 18 for David’s seminar. It’s chock full of real-world examples and insight that you won’t want to miss!

What is your toughest challenge in designing visual appearance of web applications? Got some tips to share? Let’s hear ‘em. Share your stories below.

What we don’t often discuss are the connections between visual design and creative writing. The tools and tricks of the creative writer are just as applicable to visual design as that of the graphic artist.

In this UIEtips, we explore some of the relationships between visual design and a particular type of creative writing: the joke. Jokes have a basic set of patterns and the best comedy writers know how to take advantage of them, just the way good designers take advantage of visual design patterns. We’ll look at how writers construct a joke and what we can learn from their process.

Read the article: Rabbis, Tropes, and Visually Consistent Designs.

Good color, grid, and typographic systems are powerful tools for creating great visual designs. In his full-day UI15 workshop, Visual Design Essentials for Non-Designers, Dan Rubin will share his tricks for creating and using these systems. If you’re charged with the visual design of your site, you don’t want to miss this workshop. Watch his preview to see what he’s covering in the workshop.

Where have you taken your visual design influences from? We’d love to hear your thoughts. Share them below.

From our research in what makes up the most successful teams, it turns out they are both right. And they are both wrong.

A team with three people, each of whom has basic skills in visual design, information architecture, and content design, will produce about the same results as a three-person team where there’s a specialist for each area. But the teams that do the best have three individuals, each of whom have advanced skills in all three areas.

The implications of this are clear: if you want to create a best-of-breed team, you need to constantly be raising the skills and capabilities of every team member in the critical design areas. Specializing in three areas is much more valuable than specializing in one.

In this issue of UIEtips, we revisit an article from 2009. In the article, I discuss the interplay that happens in-between visual design, information architecture, and content design. I talk about how the areas interact and how to ensure you’re creating the best designs. I hope you’ll enjoy it.

Read the article, Information Interplay: Visual Design, Information Architecture, and Content.

By the way, if you’re looking to advance your skill set, you should attend this November’s User Interface Conference. Some of the full-day workshops include visual design, designing with scenarios, and content strategy. Review the all the workshops at UICONF.com.

What are you doing to boost your skills in these three areas? We’d love to hear from you. Share your experiences below.

Explore the 8 workshops offered at this year’s conference . Register for UI15 by October 8 with promotion code BLOGPOST and get $400 off.

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.

Recently, a new kind of manifestation has emerged: redesigning. Professional designers, frustrated by the experiences they are having with the airlines’ deliverables, are voluntarily redesigning web sites and boarding passes. They are publishing their pleas for a better experience online and getting a great response.

Most recently, it was Zach Klein’s redesign of Delta’s club portal that caught my attention. Before that, it was Tyler Thompson’s redesign of the Delta boarding pass. And it all started with Dustin Curtis’s redesign of American Airline’s home page.

In each case, these talented designers took time away from their work and life to help the airlines develop a better experience. While the world of professional graphic artists insists that “spec work” is an evil that refuses to compensate designers for the value of their efforts, these designers are donating their time to persuade multi-billion dollar companies on the benefits of good design. And, the worst of it is, those companies aren’t listening.

Original Delta Sky Club Portal Page

Look at the Zach’s redesign of the Delta Sky Club’s portal site. The original page design had nothing to do with the club members current context and experience. Here you have someone sitting in a club in Salt Lake City, on their way to New York City, yet the weather is for Atlanta. There’s a link to a story about saving $600 on a Bermuda vacation and another that presumably lists all the club locations in airports around the world. And there’s an ad for a $74,000 Porche.

Redesigned Delta Sky Club Portal by Zach Evans

Zach felt these weren’t the most important things for someone who just checked into the club. His redesign had, in big, easy-to-read text, the departure time, gate, seat, and arrival time of the next travel leg. It contains information on nearby food options, whether the flight has wifi and tv, the length of the flight, upgrade status, and which baggage claim area. These are all things important to a traveler in flight.

It’s a clean, well-thought through design, even though Zach claims he only spent an hour (the time in the club) thinking about it and designing it out. It keeps Delta’s brand in place while delivering an effective experience for a seasoned Delta traveler.

Tyler Thompson’s Redesigned Delta Boarding Pass

Tyler’s redesign of the boarding passes followed the same themes as Zach’s. He took the existing cluttered information and, through color, grid, and typography, cleaned up it up, making it easy for a passenger to get to the information that’s most important: Flight, Gate, departure time, seat, and zone. Others joined in, with their own suggested designs. Each design took important requirements into account, such as making the TSA’s job easier for the info they need to find.

It all started with Dustin’s redesign of the AA.com site. In the blog post, he wrote, “The experience was so bad that I vowed never to fly your airline again.” He continued, “If I was running a company with the distinction and history of American Airlines, I would be embarrassed — no ashamed — to have a website with a customer experience as terrible as the one you have now. How does your CEO, Gerard J. Arpey, justify treating customers this way? Why does your board of directors approve of this? Your website is abusive to your customers, it is limiting your revenue possibilities, and it is permanently destroying the brand and image of your company in the mind of every visitor.”

Dustin Curtis’s Redesigned AA.com home page

He took their cluttered, ad-ridden pages and cleaned them up to provide a simple experience for making new reservations, finding great deals, checking flight status, and getting to your account details. He’s even left a place for the CEO to talk about their new image (hee!) and the multiplicity of other options that one finds at a big airline, like access to the route map and a link for getting refunds.

How bad does an industry need to let its customer experience get before it starts to listen? And, here, the listening isn’t hard. These talented customers are telling the folks they would prefer to do business with exactly how to make their experience better.

The world is filled with talented designers. Which is less expensive? Letting your experience degrade to the point of frustration for every customer? Or hiring the designers who can help you provide a great design?

Subscribe to our podcast via

This week, Hugh Griffith from Boise, Idaho calls into the show. He’s curious about the pluses and minuses of replacing standard interface elements. What happens when you swap radio buttons and checkboxes with more stylish graphic replacements?

Jared and Robert discuss two major points you should consider before rolling out such changes on your site:

1. Are stylized, non-standard interface elements appropriate for the tone your site?
2. If you use graphics, do they obviously convey that they are clickable, and can you determine their current state easily?

Tune in to the podcast to hear Robert and Jared walk you through the decision process.

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!

Thankfully, Dan Rubin can show you the simple steps to create solid visual design. Dan is a talented designer in his own right, but has a special knack for teaching visual design for people without an artistic background. That’s why we’ve asked him to present our next UIE Virtual Seminar, Visual Design Essentials for Non-Designers, on May 13, 2010. He’ll teach you how to recognize common design mistakes and effective ways to make your site look good, whether you’re a natural artist or not.

Register with the promotion code BRAINSPARKS and get lifetime access to the recording of this seminar at no extra cost. Anyone in your organization can watch it whenever they want, as often as they want.

How do you create a visual design that matches your great ideas? When you look at a web page, and something isn’t quite right, how do you know what to do about it? We’d love to hear your thoughts on this. What tips or tricks can you share that have helped you improve your visual design?

Here’s the facts:

We’re going to 4 cities between March and July, 2010: San Diego, Minneapolis, Philadelphia, and Seattle. We love these cities for the vibrant tech communities.

We’ve put together a team of leading designers of today’s top web-based applications. We call them the Masters. In each city, we’ll have them unleash two days of inspiring presentations. These folks are the best in the business and we’re thrilled you’ll get the chance to learn first-hand from their experience.

Who are the Masters?

I can tell you about two of them today:

Doug Bowman

What do Google, Wired, Blogger, Capgemini, Mighty Goods, and Adaptive Path all have in common? They’ve all seen the fine work of Doug Bowman, one of the most influential designers on the web. Now, Doug is the Creative Director of Twitter, where he’s helping change the world, one hundred and forty characters at a time. Doug will be sharing his design experiences at the San Diego and Seattle tour locations.

Stephen Anderson

Stephen gave a mind-blowing presentation at the 2009 IA Summit. He discussed how the basics behind game mechanics can help users become more engaged in other types of applications. The minute I walked out of his talk, I knew we had to have him at one of our events. His writing at PoetPainter.com, his presentations, and his work for clients, such as Nokia, Frito-Lay, Sabre Travel Network, and Chesapeake Energy all demonstrate the new insights he brings to application design. We’re thrilled that he’ll be presenting his thoughts in all four cities.

By the way, I’ll be opening and closing each of the events, so you’ll have a chance to hear from me, in addition to Doug, Stephen, and the other presenters we’re lining up.

We’re putting everything about the event at www.uietour.com. Stay tuned for more news…

Subscribe to our podcast via

What can a non-designer do to harness the power of visual design without calling professional help? Quite a lot, says internationally-regarded visual designer Dan Rubin. We called Dan to talk about what design techniques are accessible to mere mortals. He also gave us a preview of his day-long workshop for non-designers at our User Interface 14 Conference, this November.

Call it low hanging fruit, Dan says, but there are a lot of small, seemingly simple things that combine to have a strong, positive effect upon your site’s impact. If you’ve built with web standards, especially using CSS for style, these small changes can be trivial to execute across your site. Start with the spacing between elements. Consistency with the white space and alignment bring an important sense of order to your pages.

“Humans love patterns and order,” Dan tells us. Patterns and rules are tools pro designers use to organize page elements. Arbitrary placement leave sites looking cluttered and out of sorts. Creating rules — for example, the amount of space between certain elements — is something non-pros can do to bring order to a page. Choose a spacing and alignment scheme and stick to it. The earlier you set these rules and patterns, the easier it is to wrangle your page elements. Once rules are in place, you’re left with fewer arbitrary decisions to make. Arbitrary decisions are often the cause of disorder.

Massive gains can be made by addressing typographical issues. Proper typography establishes the hierarchy of information, guiding your visitors through your site content. Create a visual identity for a kind of content, and then use it consistently. Dan says most pro designers limit the number of typefaces (fonts) in a design to one or two; often one serifed face (Georgia is an example), and one sans-serif (Verdana is an example). From there, Dan advocates restraint, by making the smallest effective change to call attention to differences. Don’t combine large text, bold, italics, and color on one element where bold alone would have sufficed.

Color is a challenging topic. Many feel color choices are subjective, but there are considerations to consider. Using a color palette, like kuler.adobe.com, will help you pick colors that naturally work together… but if you already have brand colors, you should try to stick with them as much as practical. Remember, you can use black, white, and the spectrum of grays to accomplish a lot of your design’s heavy lifting. Be sure, when you do interject colors, to remember that they often have cultural, meanings. Dan used the example of red, in many cultures, representing a warning. Be wary of red in a context where it might lead a user to think they’re being warned when they are not. Try to work with these cultural perceptions instead of against them. Be sure to understand audience; those with color blindness and those from different cultures may literally view your colors differently.

Dan wanted everyone to remember that, in design, “We’re solving problems… but not for ourselves.” He also had another bit of advice, “When you design something right, no one will pat you on the back, because now it works like it’s supposed to.” That might be hard to accept initially, but it means you can make small changes without startling people. An adjustment to the line-height of your text might not be noticed by a regular reader, but they’ll find themselves more comfortably reading the content.

Dan has gathered all this advice and much more into his full-day User Interface 14 workshop, Visual Design Essentials for Non-Designers: Effortless Skills for High-quality Designs. It’s so full of enough valuable content, you’ll keep you tweaking your site for months to come.

Are you responsible for the visual design on your site, without pro-design resources? What effective steps have you found to improve your site? Let us know in the comments.

There’s an on-going debate in the design community: are teams better off with generalists or specialists? Those taking the generalist side argue that a breadth of abilities helps more. On the specialists’ side, they claim it is the depth of specific abilities delivering the benefit.

From our research in what makes up the most successful teams, it turns out they are both right. And they are both wrong.

A team with three people, each of whom has basic skills in visual design, information architecture, and content design, will produce about the same results as a three-person team where there’s a specialist for each area. But the teams that do the best have three individuals, each of whom have advanced skills in all three areas.

The implications of this are clear: if you want to create a best-of-breed team, you need to constantly be raising the skills and capabilities of every team member in the critical design areas. Specializing in three areas is much more valuable than specializing in one.

In this issue of UIEtips, I discuss the interplay that happens between visual design, information architecture, and content design. I talk about how the areas interact and how to ensure you’re creating the best designs. I hope you’ll enjoy the article.

By the way, it’s no accident that this November’s User Interface Conference has full-day workshops on visual design, information architecture, and content design. We recognize these are critical skills for every team, so we made sure we found the best experts to show you what it takes to succeed. You’ll want to bring your entire team. And if you register by Friday, August 28, you’ll get the lowest conference rate available.

What are you doing to boost your skills in these three areas? We’d love to hear from you. Share your experiences below.

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!

We recently had our friend Patrick Hofmann a designer with Google Australia in for a Virtual Seminar covering the Essentials of Effective Visual Design. His wealth of knowledge from his years of design and usability research into visual design provided an incredibly interesting and popular seminar.

As usual, we received many more excellent questions that we could deal with during the seminar, so we recorded this podcast.

In this episode, we discussed:

• A short summary of the main points of the seminar
• International issues regarding graphics and colors for different cultures
• The color and styling of hyperlinks
• Above the fold… is this important? How does it relate to the rule of thirds?
• How to deal with images that are too big to fit your page template
• What questions are most effective to ask a user after testing your images?
• How do you handle getting graphics approved across your organizations departments?
• Thoughts on images used for beauty’s sakes vs purely content images

In the podcast, we referenced a T-Shirt site that had an interesting technique to display larger images in line in galleries, the name of the site escaped us, but check out the technique at Zazzle.com.

If you missed our live seminar, a recording of Essentials of Effective Visual Design is available for viewing.

Are you doing anything to improve the impact and usability of your visual design? Share your experiences in the comments!

You have the Visual Design skills to do a good job, but what tools or tricks can you add to your toolbox? Does you team have a complete understanding that Visual design can dramatically improve the experience with your products, and when they’re stuck, how do you help them? How do you deal with line spacing and text size in body text, notes, flowcharts and diagrams that will be good for your users regardless of age? What questions and comments do you have about Visual Design, we’d love to hear your thoughts and experiences.

UIE will put these and other questions to one of the best experts in visualizing information we know, Patrick Hofmann, and we’re excited that he’s agreed to do our next UIE Virtual Seminar – Essentials of Effective Visual Design

In this entertaining 90-minute presentation, Patrick will help you make your products easier to use by applying surprising, memorable design techniques. Patrick, an expert in visual instruction and wordless communication, has worked with usability professionals like you to improve the design of digital, online, and hard copy information.

If you’re interested in attending, you’ll want to register soon, it’s filling up fast. As an added incentive to attend, use the Promotion Code MYARCHIVE to receive free lifetime access to the recorded event. You or anyone in your organization can watch it whenever you want, as often as you want!

Register today at http://www.uie.com/events/virtual_seminars/Visual_PH/

What visual design concepts do you hope to hear explored? What questions are you looking to have answered? What ideas do you have to share? Please tell us your thoughts.

Robert Nyman does just that with the Nokia and SonyEricsson UK sites and finds some surprising results. It’s quite a good write up.

Very much worth a read followed by the obvious next step: checking your own site out the same way.

[Hat tip to NortyPig]

Because titles often don’t communicate what’s in the article, the implementation gives users a chance to see more by providing a summary as a tooltip-style pop-up.

However, it seems someone has been slacking off, because in today’s list, articles come up with the text “(no summary)”.

Three things about this jump out at me:

1. I don’t typically think of the Wall Street Journal as an organization that slacks off, so the missing summaries feel wrong to me. (Maybe this is all part of Murdock’s plan—first, eliminate the summaries, then eliminate the meaningful content? Worked for the Post. Bring on the Page 6 girl!)
2. On the development side, someone wrote a piece of code that says, in essence, “if there is no summary in the content management system, substitute the phrase ‘(no summary)’ in the tooltip.” That took more effort than just leaving it blank.
3. Similarly, on the development side, it looks like nobody put in an error message when the article is published that said, “You haven’t included a summary and that’s going to make us look silly. Want to rethink that?”

Of course, it’s unlikely that the person pressing the publish button ever goes and sees what pops up in that tooltip. (Ironically, if they’d actually published it as a synopsis that appears with the title, instead of putting it in a mouseover action, they’d see the problem right away and fix it.)

This is one of those little things that reduces the overall quality of the experience. And it’s also a great example of what happens when you spread the design contribution across different roles: developer, visual designer, and editor in this case. All three have to execute perfectly to succeed, with no checks & balances to ensure that’s actually happening.

Seems like we need to learn something from this…