| UIE Brain Sparks |
Last week, I spoke at the Boston IxDA night of Short Talks, where I gave a 10-minute (!) presentation called Case Study: A Discount Approach to Comparing Multiple Design Alternatives.
Here’s what the session was described as:
What’s the Best Way to Compare Multiple Design Alternatives?
Good design practice suggests you create multiple sketches, which eventually evolve into [...]
read full article | hide summary
|
We’ve got another great UIE Virtual Seminar coming up:
The Scent of a Web Page: The Five Types of Navigation Pages
Date: July 17th, 2008 — 1pm ET / Noon CT / 11am MT / 10am PT
You work hard providing top-notch content on your site. Will your users find it? If they don’t find it, all [...]
read full article | hide summary
|
Brian Christiansen and I recorded a special episode comprised entirely of questions from our customers. Last week, we held the UIE Virtual Seminar: The Scent of Information: Getting Users to Their Content. During the seminar, we received far more questions than time would allow answering. As is tradition, we put together this follow-up podcast to answer even more of your excellent questions.
read full article | hide summary
|
This week, our good friend Peter Merholz joins us for the show. Peter is president of the noted experience strategy and design consultancy Adaptive Path.
In our discussion, I asked Peter about mapping out a product's evolution. Launching a product is no simple task. Every new product falls on the spectrum somewhere between feature-complete, perfect execution and actually shipping with a pile of features on the cutting room floor. Realistically, most sway towards the latter. But that doesn't mean your products needs to feel unfinished.
read full article | hide summary
|
User research is now a critical tool in the toolbox of design teams. However, it only works well if you involve the right participants in the study.
Having the participants that match the design’s audience will give the team feedback on what works well and where the design needs rethinking. By learning from the participants, the [...]
read full article | hide summary
|
Today at 1pm EST, we’re holding our next UIE Virtual Seminar, The Scent of Information: Getting Users to Their Content.
In this 90-minute online presentation, I’ll share the results of years of research examining how the best sites navigate users to their content. I’ll introduce you to the concept of the Scent of Information, the biggest [...]
read full article | hide summary
|
This week, I had the great honor of speaking with Dana Chisnell, noted usability expert and principal at Usability Works, a consultancy based in San Fransisco. Dana is also the co-author of the recently-released second edition of the Handbook of Usability Testing, a book so fine, I agreed to write the foreword.
read full article | hide summary
|
I’ve recently had the opportunity to observe a master chef teach a class of good cooks how to create some great dishes. While the cooks all knew how to make the dishes, the chef’s version was notably better.
It wasn’t that the chef used a different recipe or better ingredients. What made the difference was that [...]
read full article | hide summary
|
|
| Bokardo - Social Design by Joshua Porter |
I heard a term the other day that I really liked: co-evolve. It was said in the context of humans and technology…humans and technology co-evolve together.
In other words, we change technology by creating it, and then it changes us as we use it. And we both change in response to each other. Many times [...]
read full article | hide summary
|
This is just too juicy to not share with everyone.
Here’s a 2003 email from Bill Gates in which he vents his frustration with the Windows interface…in quite excruciating detail.
Epic Bill Gates email rant
Throughout the email Gates continually voices his frustration in trying to perform what he thinks should be straightforward tasks.
My favorite [...]
read full article | hide summary
|
In part I of my interview with Yahoo’s Bryce Glass, Bryce explains the basics of Reputation Systems. In the following part II, Bryce digs deeper into the strategic decisions around patterns, like how to determine which pattern to use and who is using reputation patterns best.
6) So let’s say I’m building a site with social [...]
read full article | hide summary
|
Of all the social software built on the web in the last two decades, none are as important yet as little talked about as reputation systems. Reputation systems have driven the entire business at eBay.com, much of the business at Amazon.com, drives activity at Digg.com, powers the moderation system at Slashdot, etc…and yet for all [...]
read full article | hide summary
|
As more and more companies “go social” (as the NYTimes just did), we’ll see a growing need for well-designed reputation systems. Reputation systems can be defined as systems that help people judge the reputation of others in order to make better decisions about what to buy, who to listen to, or generally what to do. [...]
read full article | hide summary
|
While it’s easy to imagine negative reviews leading to lost sales, they more often lead to increased sales of good products and increased customer happiness resulting from helping people make smart decisions
Yesterday I presented a short, introductory talk called “7 Core Principles of Social Design” at the Voices that Matter Conference in Nashville, Tennessee. One [...]
read full article | hide summary
|
The mere threat of social interaction changes our behavior…if you know your work is going to be put on public display, you’ll be much more motivated to make it good.
There is a moment in every blogger’s life when they realize that yes, other people are going to read what they have to say. Perhaps they [...]
read full article | hide summary
|
Well, if you’ve never run across one of the wonderful lists of Smashing Magazine, here’s your chance to not only check them out but also win a book in the process.
Smashing Magazine is holding a books giveaway that includes the following titles:
Transcending CSS by Andy Clarke
Designing the Obvious: A Common Sense Approach to Web [...]
read full article | hide summary
|
|
| Functioning Form: Interface Design |
On August 18th I’ll be speaking at An Event Apart in Boston, MA about Web Application Hierarchy.
I'll walk through how people parse Web pages and the implications of this behavior for designers. Specifically, using the principles of visual hierarchy to communicate key information about the purpose and use of Web applications.
If you are interested in going, feel free to use the discount code: AEALUKE for savings on the event cost. Official Description
When a potential customer makes it to one of your pages, what will they do? Do you want them to sign up, share knowledge, buy something, or dive deeper into your content? Don’t leave these decisions to chance. Learn how people scan web pages and how to guide users through key content and actions using visual hierarchy to construct meaningful, prioritized page layouts. Includes multiple before and after examples.
Hope to see some of you there! Tags: visual communication, visual design, Web applications
read full article | hide summary
|
In the July/August 2008 issue of Interactions magazine, Philip Haine (founder of Obvious Design) wrote a detailed review of my new book Web Form Design. Here's a preview:
"A well-designed form is barely noticeable. But that doesn’t mean the design process is. Like most design problems, achieving a concise design that seems, in retrospect, obvious, requires much work. There are myriad factors to consider, each with multiple alternatives, each with its pros and cons. Should we have one long form or a sequence of short forms? Should help be provided in-line with the form controls, on the side, or on top? At what point should we validate fields and deal with errors? You could fill a book with the subtleties of form design.
Fortunately, Wroblewski has written that book. Drawing on years of experience designing for eBay and Yahoo, he has cataloged the major considerations involved in creating forms. He walks the difficult line between writing for novice and veteran designers. Web Form Design: Filling in the Blanks is an excellent guide for new or de facto designers and a handy reference for veterans. Wroblewski has done the dirty work for us in researching what works best. By following his advice, we—and our users—can quickly and competently get through the forms and onto the fun stuff."
Check out the full review in the printed version of Interactions magazine or access the PDF of the review if you are an ACM member.
You can get Web Form Design from Rosenfeld Media. You can also get it at Amazon.com, but for the same price, Rosenfeld Media includes a nicely formatted digital version. Tags: forms, Web applications, interaction design, visual design, interface
read full article | hide summary
|
In the July/August 2008 issue of Interactions magazine, I wrote an article on Web-Conscious Content Experiences about how content pages can be better optimized for the Web ecosystem. Here's a preview:
"In today’s search-driven, social, and distributed Web, people are finding their way to content through an increasing number of distinct experiences. Content-aggregator sites like digg and del.icio.us, display surfaces like Facebook and MySpace, content creation sites like blogs and wikis, search engines like Google and Yahoo!, and communication tools like email and instant messaging are all responsible for an increasing amount of traffic to Web content pages.
But when people arrive, the Web page they get isn’t optimized for these circumstances. Instead, the vast majority of content pages online remain more concerned about their place within a website rather than their place on the Web. These pages are designed as if they were primarily accessed from a website’s home page or a carefully thought-out selection from the site’s information architecture.
While these are all worthwhile considerations, they go only so far. In fact, studies conducted on content pages have shown that too much of an insular approach can actually prevent sites from achieving their goal of increased engagement and returning customers. So instead of presenting content only as part of a specific website, consider presenting it as part of the entire Web as well."
Check out the full article in the printed version of Interactions magazine or access the PDF of the article if you are an ACM member. Tags: context, guidelines, interaction design, Web OS, user experience, patterns
read full article | hide summary
|
As part of our Influencing Strategy by Design course, Tom Chi and I walk through some global trends that provide designers with an opportunity for leadership roles. Specifically Tom illustrates the transition from the 1800s craft economy to the 2000s creative economy.
In the craft economy of the 1800s, regional markets were filled with individual or family-based craftspeople like blacksmiths or potters. These professions required creativity, were small size (no scale), and did not need a lot of collaboration to get products made.
In the industrial economy of the 1900s, small craftsmen gave way to large factories and the need for tight command and control grew as scale increased. Lots of coordination was required to develop consistent products within the assembly lines popping up across developed nations. As a result, the need for creativity was limited to fewer people. Most workers had a defined role in the system and needed to be reliable above all else.
In the economy of the 2000s, creativity is once again a key driver of value as command and control structures can no longer manage the full set of information and decisions required to operate at a global scale. This creates a need for “smart nodes” across the enterprise that can collaboratively lead aspects of the business. These leadership positions are enabled through access to large amounts of data and technology. Creativity is required to make use of this information and set of tools to advance the goals of the organization.
Harvard Business Review recently echoed this sentiment in an article by Rosabeth Moss Kanter titled Transforming Giants: “Employees once acted mainly according to rules and decisions handed down to them, but they now draw heavily on their shared understanding of mission and on a set of tools available everywhere at once. This shift … is now happening with dramatic effects.”
The importance of creative thinking and “smart nodes” within large organizations plays to the strengths of designers who are adept at recognizing patterns, synthesizing information, and communicating it through visual means. In other words, it creates an opportunity for designers to lead. Tags: strategy, collaboration, design organizations, creative class, convergence, theoverlap
read full article | hide summary
|
Smart defaults —as described by Barry Schwartz in The Paradox of Choice- are selections put in place that serve the interests of most people. Because smart defaults are designed to help people make good choices, we can utilize them in Web forms to expedite form completion. The trick is to ensure that the defaults in our forms align with our customers’ goals.
As an example, let’s look at the rather standard “Book a Flight” form on JetBlue’s site. Among the expected questions of where are you going and when is a set of questions about number of adults and/or kids traveling on this flight.
Now last I checked, the majority of people booking flights online are adults and they generally intend to travel on the flight they book. So defaulting this value to zero might not serve the interests of most people filling in this form. In fact, on more than on instance I’ve found myself with an error when I inadvertently left the default of zero travelers in place.
Perhaps Jetblue has a high quantity of kids traveling alone or with families and wants to make sure each person booking a flight explicitly considers how many travelers are going. But it seems to me other travel sites like Expedia (pictured above) got it right with a smart default of one adult traveler.
For more on Form Design...
Check out Luke's book about Web form usability, visual design, and interaction design considerations: Web Form Design: Filling in the Blanks. Tags: forms, guidelines, decision making
read full article | hide summary
|
In my Web Application Hierarchy presentation at An Event Apart Boston 2008, I walked through the importance of visual hierarchy, visual principles for developing effective hierarchies, and utilizing applications of visual hierarchy to communicate central messages, guide actions, and present information.
Download the slides from my presentation: Web Application Hierarchy (2.9 MB PDF)
Notes from my presentation:Official Description
When a potential customer makes it to one of your pages, what will they do? Do you want them to sign up, share knowledge, buy something, or dive deeper into your content? Don’t leave these decisions to chance. Learn how people scan web pages and how to guide users through key content and actions using visual hierarchy to construct meaningful, prioritized page layouts. Multiple before and after examples will be shown. Tags: Web applications, visual communication, visual design
read full article | hide summary
|
Jason Santa Maria’s Good Design Ain’t Easy talk at An Event Apart 2008 argued for deeper graphic resonance in the presentation of content online. - We are trained to look for stories within images. These images have a huge impact on how we interpret content.
- Graphic resonance can be used to control how the story unfolds. It helps set the mood.
- Information visualizations can tell dramatic stories as well –Tufte march to Moscow diagram
- Wired magazine sets the tone for stories in its printed version through layout and typography. When these stories are moved online, we loose the impression that design was able to create on us.
- We have distilled stories into content online. They lack the impact of printed materials.
- “Design can’t not communicate.” –David Carson
- Why are there no landmark Web designs? The Nature of the Medium may be to blame.
- Constraints of a page exist in print: width & length. Pages can extend infinitely on Web. But are only seen through size of browser window.
- Large size of Web page gives you license to talk –add lots of stuff. Entire structure of book: cover, contents, copyright often ends up needing to be included on single page.
- The design of printed pages can’t change. Web pages can be re-structured by fonts, colors, etc.
- Collections of Pages: by looking at book, we can get a sense of scale. We are missing that online.
- Layout: missing ability to exploit ratios like golden ratio because of layout capabilities. We can’t rely on fixed dimensions online. Perhaps width but even then not certain.
- It’s not possible to look at designs online through the lens of print. We can’t compare the two in the same way.
Tags: visual design, personality, persuasive design, aesthetics
read full article | hide summary
|
At An Event Apart Boston 2008, Eric Meyer walked through common characteristics of several Cascading Style Sheet (CSS) frameworks and outlined lessons that can be learned from their structure. CSS frameworks abstract away a lot of the layout work that is required when coding CSS.- Popular frameworks include: 960, blueprint, content with style, elements, that standards guy, Tripoli, WYMStyle, YAML, YUI
- None of these CSS frameworks are right for you. You need to create solutions that are appropriate for the work you do. However, they can provide valuable lessons.
- All frameworks have set of reset styles, default color sets, and fonts defaults. Most frameworks leave forms alone as styling forms is difficult. Few have print styling options. Many frameworks support multiple layout options.
- Most font resetting is done at 12 or 13 pixels. Line height should always use a scaling factor. If set in ems, it will propagate through the document tree.
- No frameworks make headings smaller than paragraph text. HTML4 allows some headings to be smaller.
- Header size averages (based on all CSS frameworks analyzed): h1 2.33/2, h2 1.8/1.67 h3 1.45/1.38, h4 1.25, h5 1.11, h6 1.05
- Naming Conventions: pick whatever layout and add appropriate class name (grid1, column2, column3) or use universal element naming (header, main, footer, nav)
- Layout can be managed by invoking an appropriate style when all styles are included in a single CSS file. Though you are loading every possible layout when only need 1-2, this can improve performance for sites with lots of traffic. In these cases, the fewer hits on the server the better as the number of hits quickly becomes the gating factor for performance not the size of a document.
- An alternative method for managing styles is simply linking to an appropriate style sheet with the layout you want. Caching allows linked files to be available for some returning users.
- Hacks in CSS frameworks tell us what CSS is missing and what browser issues exist. Common hacks in CSS frameworks include: fixing problems with clearing for ways to wrap content around floating elements, pseudo-padding for defining what width means for an element, and Internet Explorer 6 support.
- Frameworks can include styling for external, internal, mailto, links using attribute selectors but we can’t relay on these as IE6 does not understand them.
- Some frameworks include compressed files with no comments or extra white space, which are designed for machines.
- Several frameworks include debugging styles: show grids, layouts
- Best practices from CSS frameworks include:
- Use a directory structure for different CSS file types
- Link to style sheets
- Utilize separate files for layout, not classes
- Use a reset file, and default text sizes
- Default colors can be set per body
- Build debug styles
Tags: technology
read full article | hide summary
|
|
