Luke Wroblewski is a Web strategist, designer, and author. He is currently Senior Principal of Product Ideation & Design at Yahoo! Inc. and Principal of LukeW Interface Designs, a product strategy and design consultancy he founded in 1996. Luke has authored a book on Web interface design principles entitled Site-Seeing: A Visual Approach to Web Usability, as well as numerous articles on design methodologies, strategies and applications. He is also frequent presenter on topics related to Web strategy and design, and a former member of the board of directors of the Interaction Design Association. Here, the hardest working man in web design shares his insight into the most important topics in the field today…
Q: Many have said that the web designer who does it all is a thing of the past, and that the future will bring increasing specialization—which means, of course, larger teams. What is your experience with this?
Luke: When most people think about “do it all” web masters, they think of folks who can crank out visual designs, code them in HTML, write some good copy, and publish everything out to a server. Nowadays the programming aspect of this role has a lot more possibilities.
That said, I don’t think this spells the end for generalists. In fact, designers that can understand technology opportunities and limitations at a high level, as well as business considerations are increasingly valuable because they can help focus product teams around user experience goals. So rather than designing and building a website, web designers are setting an experience vision and working with teams to make it a reality. That requires a cross-disciplinary approach that specialization alone doesn’t provide.
Q: What are some telltale signs that a web designer needs more design education?
Luke: I’m a firm believer in always growing and expanding your skill set, so any web designer that’s still creating websites, in my mind, is a web designer that needs more education – by that I mean both research knowledge and hands-on knowledge building product experiences.
To that end, I always strive to be a feedback loop: bring knowledge in and disseminate it out. By keeping up with news and trends in digital product design – mostly through blogs and conferences – I have a continual flow of knowledge in. By maintaining a blog (www.lukew.com/ff) and speaking at several conferences a year, I maintain a steady flow of knowledge out.
I also maintain this type of cycle when working with my product teams by spending time taking in research, opinions, ideas, and feedback, and then disseminating information through designs, presentations, visualizations and more.
Carlos Santana might have described this process best when he said, ‘music is water; the audience is a bed of flowers so I have to become the best fire hose I can’.
Q: Do you start your process analytically, with sketches on paper or wireframes, or are your main initial concepts likely to come in a flash of inspiration?
Luke: I begin by taking a deep dive into the context of the problem so I can develop an understanding of all the design considerations involved. That includes existing performance metrics, business opportunities, competitive landscape, market research, product research, technology limitations and opportunities, brand positioning, and more.
This helps me to define the problem that my client or my company is trying to solve. From there, solutions naturally begin to emerge. Communicating these solutions often involves sketches, high-resolution designs, narratives, and discussions. The right format depends on your client and what they can understand most readily.
Q: Tell us about your recent book: Site-Seeing: A Visual Approach to Web Usability and your upcoming release, Web Form Design Best Practices. How is it different? What are the key points? Give us a concise sales pitch!
Luke: Well Site-Seeing came out in 2002, but the concepts within it are still relevant today. At the time I wrote the book, there was a lot of discussion about visual design versus usability, and many people assumed you had to pick a side: either a great looking site or a really usable site. Of course, you don’t have to pick: you can’t have good usability without good visual design simply because the web is a visual medium.
Online people make sense of web pages using their eyes. They scan pages looking for content or actions that meet their goals, they look to see how they can utilize what they’re interested in, and they get visual feedback that tells them if they were successful. The whole process is dependent on being able to make sense of what you are seeing. (The notable exception to this is screen readers, of course.)
Site-Seeing not only explains this concept, it also outlines ways to apply the core principles of perception – how people make sense of what they see – to make websites that are useful, usable, and desirable.
My upcoming book, Web Form Design Best Practices , is rooted in the same approach to design, but focuses exclusively on web forms.
Web Form Design Best Practices, 2007
Q: Why write a book only about form design?
Luke: If you are in online retail, your goal is to sell things. Standing in the way of your products and your customers is a checkout form. If you are developing social software or open peer productions systems, your goal is to grow your community. Standing in between you and community members is a form. If you’ve built a productivity based Web application, forms enable key interactions that let people create and manage content. So in commerce, customer acquisition, and online productivity forms play a pivotal role. As a result, form design matters.
Of course no one likes filling out forms. People simply want to get the product you are selling, socialize, or get their work done. From their perspective, forms just get in the way.
Understanding the principles of form design gives you the ability to minimize pain and maximize business success. Web Form Design Best Practices provides that understanding.
Q: How have your ideas about web design changed over the last couple of years? In this respect, how did you think the web was going to evolve?
Luke: Web design has gone through many cycles, and likely will continue to do so as the medium continues to develop. First, we were able to share data through simple mark-ups. Next, a number of additions (tables, CSS, etc.) gave us ways to build more meaningful designs. Then, dynamic technologies like DHTML and Flash opened the gates to richer interactions. All of these changes were driven by underlying improvements in technology.
But another, perhaps more interesting, way to look at changes on the web is by focusing on interactions instead of the technologies that enable them. As outlined by Terry Winograd at Stanford University, humans have three predominant ways of interacting with the world: locomotion (moving from place to place); conversation (communication with others); and manipulation (using/editing/creating).
The first phase of the web was all about locomotion. Businesses and people scrambled to set up websites and web users traveled between them using directories and hyperlinks. The recent explosion of social software (blogs, social networks) and web applications (content creation, remixing, editing) has enabled conversation and manipulation on the web. Now instead of navigating from place to place, people talk to each other, express themselves, manage productivity, entertain, and more.
The shift to online conversation and manipulation has introduced a different set of web experiences. Tom Chi recently pointed out that most successful sites online are primarily either: content creation sites (blogging platforms, productivity applications); content aggregation sites (social news sites like dig.com, etc.); display surfaces (for showing off content like MySpace); or entertainment destinations (content portals). Each of these experiences has a unique set of design considerations.
As the barriers for designing and developing these new experiences continue to diminish (lower operating costs, freely available software), more sites will be launched. And the more sites there are competing for people’s attention, the more crowded online shelf space will become. As a result, web applications may need to look to traditional packaging design best practices to better communicate what services they provide, how people can utilize them, and why they should care to try.
Search, content distribution, community tools, and rich interactions also give web users more control over their ability to chose how and where they access content, respond to content (rate, vote, flag), remix and share content, and interact with content in new ways (drag & drop, inline editing, etc.)
This surge of new web experiences that give users more control is probably the biggest change impacting web design, and naturally my views have changed with them.
Q: How do you know when a design is successful? How does your definition of success relate to usability, technology, and art?
Luke: A site is successful when it achieves the goals you set for it. I know that’s a simplistic way of looking at things, but there are so many considerations that impact user experience: findability, usability, desirability, accessibility, credibility, technology, etc. Focusing on any one of these as a measure for success may cause you to lose track of the big picture.
As an example, I hear a lot of designers complaining about the design of eBay. They point to a cluttered home page and dated aesthetics. Granted, these could be improved, but looking at these factors alone ignores the broader impact of the eBay service. eBay is the 30th largest economy in the world. 700,000 people make their full time living selling on eBay. Individual sellers can reach a global audience of millions from their home using it. If you compare those metrics against eBay’s goal of creating a level playing field for sellers of all sizes, and thereby truly democratizing commerce, the service is actually a huge success of which the design is no small measure.
Unfortunately, we lack an effective way to evaluate designs of this significance. So instead, critics focus on what they know best: aesthetics. Until we develop a better way of judging interaction designs that manage things like global economies or communities, we’ll continue to define success with visual design awards, which is unfortunate because only a portion of my time is spent making things pretty – most of it is spent making experiences that are useful, usable, and more desirable.
Q: How can non-technical business owners looking to design/redesign their site(s) select web designers who make sensible usability a key part of design?
Luke: For starters, listen to how a potential designer describes their previous designs. Do they have an understanding of the goals their solution enables? Are they continually cognizant of the customer’s perspective of their design or are they simply evaluating success from a design-centric perspective? Designers that always reference their audience’s needs when describing their solutions are likely to be taking usability considerations pretty seriously.
Another way to surface how designers are thinking about website interfaces is to ask how their designs answer three key questions: what is this, how do I use it, and why do I care? “What is this” communicates utility – is this service useful for a potential customer? “How do I use it” is the usability angle – how can customers make use of the utility you promised them? “Why do I care” addresses desirability – how is this product better than comparable alternatives? Designs that address these key considerations are more likely to meet the goals of business owners.
Q: Do you consider visual design and usability to be two separate disciplines? If so, where do they meet, or how do you bridge the gap?
Luke: The visual design of a website bears the responsibility of communicating the possibilities, limitations, and state of interactions. It tells users what they are seeing, how it works, and why they should care. The better at communicating we are, the easier it is for our users to use and appreciate the websites we design.
However, the wrong message may be sent to users when visual elements are applied without an understanding of the underlying interactions they are meant to support. Visual styling that obscures or clouds crucial interaction options, barriers, or status messages can have a significantly negative impact on user experience.
You can think of visual design as the “voice” of interaction design and information architecture, and therefore directly responsible for the usability of a website.
Now I don’t think that means usability & visual design are the same discipline, but there is certainly a symbiotic relationship between the two. Bridging the gap between them requires an understanding of that relationship and its impact on the final design of a product.
Web development has to bridge the divide between people and information
Q: What are the top three things any designer can do right now to make a site more usable?
Tip one: look at your site from the outside in. By that I mean put yourself in your customer’s shoes and walk through what the experience is like when they first encounter and (hopefully) begin to use your site. Most companies and individuals spend the bulk of their time looking at things from the inside out: what do we want our customers to think of us, what will we allow them to do on our site? Unfortunately looking at things from the outside in often results in sites that are applauded internally, but confusing externally.
There are lots of tools that can give you an ‘outside in’ perspective. For example, look at your site’s logs, and see how people are entering your site. Chances are it’s most often through a search engine, and not starting from your home page. You can also gain an outside in perspective by watching a first time visitor encounter your site and seeing what they do or say. This doesn’t have to be a very formal activity: just observe. These kinds of activities grow your empathy for customers and, as a result, your ability to design engaging experiences for them.
Tip two: Embrace the medium. Too often designers try to fight the web instead of embracing it. Granted, the standards that define the web today are often constraining, but they are empowering as well.
A few years ago, using Java applets for web site navigation was all the rage. Designers latched on to the animated transitions and cool effects Java enabled. But these applets came with a heavy price: large download sizes, compatibility issues, complex code, etc. Nowadays, you almost never see Java navigation systems, as people have embraced HTML lists instead. Lists are much lighter in size, semantically meaningful, and universally accessible. A bit of whiz-bang might be lost, but overall navigation lists make the web run better.
Similarly, there’s a tendency these days to load large portions of web pages using Ajax instead of linking to different pages. While in many cases Ajax can provide rich and useful interactions, in some it breaks one of the fundamental models of the web: sharable locations. Through unique URLs, each and every web page is sharable, savable, and navigable. Using dynamic loads instead of pages makes these actions harder.
Tip three: use the language of design to explain how sites can be used. As I mentioned earlier, visual organization is a key component of usability. Relying on visual design to make things look good is only half the story.