UXD - User eXperience Design

Design Pattern 7: Required fields

It is one of the first problems of HTML markup that had no standard way to communicate to the user what they should do, I'm talkin' about the required form field. Personally, I have used some sort of asterisk in the past, coloration can work as well, but anything eye catching can distract from an error state (hey, you didn't notice we required that field, try again). So it caught my eye that the good people at reqall have an interesting pattern. In this case, make required fields have a bottom that is different from the non-required fields. This is fairly subtle, it took me a moment to figure out what it meant, but I give them kudos for trying something new. This is a long neglected design pattern of how to handle this in a consistent way, and this is a good a place to start. Its also a way to give a shout out to this service which mashes up text-to-speech, reminder lists, task distribution and has a nifty iphone interface as well, check it out!.

How to do it

Here's a capture from their stylesheet, an interesting element here is I didn't know that you could restyle the drawn box of an input, so there is room for much variation. I also like the way they specified 'solid' to get rid of the horrid default 'picture frame' style of merging borders when they don't match, which always makes me flashback to 1998 web design.

input.essential {
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 3px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #016098;
	border-right-color: #016098;
	border-bottom-color: #990000;
	border-left-color: #016098;
}

Design Pattern 4 - Inline help

I just had quite an enjoyable spring break trip with the family to Washington DC. For a town with lots of visitors, it was important to help people manage the different ways to get around, or more importantly get out of the way of the residents. Among many places, within the beautifully designed metro stations, there was often voice over assistance on different helpful topics. While I was surprised at the lack of multi-language support amongst these alerts, there was a particular custom that made me think of a similar pattern in software design, the help system.

Often designed separately, help in software systems is almost always out of sight of the actual user experience, and thus out of mind. On my projects I make it the habit to make room for, and design with inline help in mind. Inline meaning the help topic is written out on the page next to the area where it will be consumed. I find it keeps people from having to take fingers off the keyboard and mouseover a "?" icon to see if it anything helpful is there hiding. During planning, if the final text is missing, placeholder text is substituted. It helps show the developers that labels alone cannot help users determine how to proceed with completing the task. It also reminds us of what kind of help will be needed eventually in each interaction. I'm surprised at how much reaction it spurns in design meetings and helps clarify confusing procedures amongst other benefits. In short, the pattern is to provide some help where we are looking, rather than make users hunt, or worse, ask for it.

Back to DC, in the Smithsonian, as well as the metro, there are many escalators, and if you pay attention to the voice over, the helpful message is to "stand on the left and walk on the right". Having been plowed into more than a dozen times by people trying to get past me, it finally dawned on me that this is lacking inline help. I took this (blurry) picture in the Smithsonian, which it had two footprints on each side of the tread. The 'help' actually contradicted the rule. With some bad photoshop I erased the footsteps to the version shown here. While reminiscent of some ancient dance chart, I thought if this was the way it was stenciled, that people pick up on the intended behavior because it is where their focus is, not on the announcement, but on their feet.

Design Pattern 3 - not page flips

In interaction design it is considered a noble pursuit to find metaphors that take real life interactions and mimic them onto the computer screen. There are some notable successes such as the desktop metaphor, as well as some notable failures, such as the desktop metaphor. It reminds me of a friend who was experiencing trouble with their hard drive (this was a macintosh) so they dragged all their files 'out' of the hard drive onto the desktop and then reformatted the drive. After doing this he understood that the metaphor didn't hold up to this kind of use. As computer users become more savvy, metaphors that exist only in the computer realm are becoming more common and accepted.

I was perusing an online catalog, IKEA, and noticed they had dismissed the odd, yet well used idea of a page 'flipping' or 'dog-earing' when you clicked on the corner to advance. As seen in the movie, the advance takes place, shifts the page, then switches it with the next page. Not only does this transition take less time, it effectively communicates in shorthand the idea of 'flipping' without using a direct paper metaphor. Nicely done.

When to use

Pagination seems most useful when transitioning print to screen. Since many magazines and newspapers have abandoned the fidelity to print, and removed the need to screen capture print ready art, this is becoming rarer and rarer. I do think paginating between photos in an album is an experience not well handled in many photo sites web interfaces (I mean you flickr!).

How does it work?

Since this is flash, you can get away with the movement out of the constraining box, which is tougher in HTML, since absolute sizing is not as common, moving and swapping is probably available within a DHTML library, but movement across frames seems to be very flash specific behavior.

Design Pattern 1 - faded breadcrumbs

Design Pattern 1 - faded breadcrumbs
Originally uploaded by uuh...clem

Preface: in my travels around the interwebs I often encounter a neat interaction design that I use my handy Skitch tool to capture. As of now, they sit there until I encounter a project to use them in. To make them more accessible I'm going to post them here, please add comments, since many times I'm not sure how to actually implement these!

Apple's faded breadcrumbs

In (Leopard OS?) search windows, when a list is presented and an item is selected, the path to that item is shown as breadcrumbs in the footer. Because these items can be anywhere, the structure can be very deep, when horizontal room is at a premium, and folder names are long the display truncates the display to a fixed width and fades out the name to white. On mouseover, the title stretches open to show the entire label.

What can it be used for?>

Windows offers the ability to "ellipses" a label that gets too big for it's container. On mouseover, a 'tooltip" window pops up showing the entire label. The fade approach is more elegant, and the animation is actually useful since you don't obscure the other information like popup tooltips do. Websites hopefully have flatter navigation structures nowadays, but horizontal space is always an issue, as it is always finite. Techniques to maximize horizontal space are welcome.

How to do it?

Apple.com is showing this behavior on their footers, go to any page and look at the footer breadcrumbs, click on one and you get the animation effect. However, the fade is not possible in HTML. Also, apple seems to use some 'safari' behavior in their page I don't see in IE 6. Any ideas or libraries? Post below.

Agnostic lightboxing

The memo may not have gone out yet, but for a year or so now the scourge of popup windows has been erased from the user experience. I know that it has been blocked by browsers for quite a while but UXD designers once and a while need this modal stalwart, the dialog box to get their business done without distractions. Thanks to great coders out there, we have a replacement we call "lightbox" which you experience probably daily as the darkening out of the screen and the overlay of that modal box. Its very quick to implement, easy to code, and with some variations, can hold music, slideshows and other nifty content types. I use it constantly, but it has one drawback, the reliance on either prototype or jquery as a backbone to do it's magic.

While I put myself kind of in the prototype + scriptaculous crowd, the battle between these libraries makes it hard since you can only include one of them. Thus someone writes some "perfect for your audience" lightbox effect, but you need to change to jquery to use it. This happened on my own site where some lightboxes needed to play mp3's and others needed to show image slideshows, I had to make compromises and change from page to page, which was extra work, and kind of weird.

No more, thanks to Mr. Jackson, we have a new lightbox (that uses the correct attribute 'rel') that can take advantage or either library, or even mootools or YUI, neato! Look forward to delving into it, check out the download at http://mjijackson.com/shadowbox/ and cheers for choice!

The Curse of Knowledge

You can never know too much about something, right?  Wrong, at least according to a December 30th article in the New York Times.  As we become experts in a particular domain, our ability to innovate diminishes.
"Andrew S. Grove, the co-founder of Intel, put it well in 2005 when he told an interviewer from Fortune, “When everybody knows that something is so, it means that nobody knows nothin’.” In other words, it becomes nearly impossible to look beyond what you know and think outside the box you’ve built around yourself."

Reading the article, I couldn't help but think back to my own experiences with this same sort of issue.  I blogged recently about two related ideas: how interface designers are sometimes guilty of thinking as designers--when they should be thinking as users, and about the mixed bag that is competitive research, which can limit the designers creative thinking by boxing them into predefined solutions.   

Now I see that it's part of a larger problem of expertise and creativity.  The more expertise one exhibits in a particular field, the harder it is to think creatively--to so called think 'outside the box', and the harder it is to imagine not knowing what you do.  The problem affects whole companies, as a certain way of thinking becomes entrenched, and it gets harder for it to adapt to a changing landscape.  The article cites the example of Eveready, the flashlight maker, who's powers-that-be couldn't imagine that their product could be effectively marketed to anyone other than men shopping at hardware stores.

According to Cynthia Barton Rabe, author of “Innovation Killer: How What We Know Limits What We Can Imagine — and What Smart Companies Are Doing About It,” the solution for Eveready, as for any organization bogged down in its own expertise, is an infusion of outside thinking.  Bringing the so called novices--the non expert users--into the discussion at the early stages of design, weather it be product or strategy design, opens the door for new ways of thinking that experts have long been insulated from.


    
     

Powered by ScribeFire.

Design can be Used for Good and Bad

Every so often I'm rudely reminded that much of the information I get comes from a source who's goal is to sell rather than inform.  It is those times that I'm also reminded of the critical role that design plays in supporting the goals of the organization (wether they be to inform or to sell) by shaping user behavior.

Case in point.  I use Yahoo Finance to track my stock portfolio and stay financially abreast of the day.   I choose Yahoo over the many others out there because I'm used to it.  It has a simple interface and I know where everything is located.  It also has great tools, and it aggregates information from many many other sources in one place, which I find invaluable.  However I just recently noticed that Yahoo Finance is serving some text ads on the site now.  I wouldn't otherwise be too bothered by them, but they've been designed for the express purpose of looking like real (un-sponsored) content.  They're right up there on the right hand side of the page, occupying the top of one column in a three column layout.  The ad titles are just about the same color as the headlines and links on the rest of the site.  And while the other section titles are all orange and bold--designed to give structure to the page and let you know what section your in-- the only way you can tell that your reading ads is from the truly inconspicuous (light-grey on light blue, thin, all caps) 'Advertisement' header.  

This really infuriates me, especially because it's a finance site, and I can't help but notice the content of the ads.  For instance, right now I'm looking at the front page, from left to right I see a snapshot of the Dow's performance today, a headline saying 'Stocks mixed ahead of jobs report' and a couple of blurbs on 'Hottest China Stock' and '16 Hot Dividend Stocks'.  Now I'm sure you can guess which ones are ads.  And yet I can't help but see the ads and incorporate them into my understanding of the days financial news.  They were designed to be scanned, and that's exactly the kind of information I need to be able to filter out when I'm scanning a page like this.

The fact that these ads persist is a clear indication that Yahoo is concerned less about an informed public and more about using its real estate to extract as much equity as possible.

Powered by ScribeFire.

DUX2007 - Data Visualization

Data visualization was touched upon a number of times throughout the DUX07 conference.

In David Pescovitz’ keynote address on Monday, he mentioned that since the 1980s we’ve seen three waves of technology: PC Computing, communicating, and sensing. We’re now in the fourth wave which is sense making -- how do we make sense of all the data that’s out there. How do we deal with search queries that return hundreds of thousand of lines of results. How do we start to make connections between the data.

One way we deal with sense making is through data visualization -- a concept which is starting to filter out beyond the research labs into the commercial space. Through data visualization, we can take huge sets of information and present them in such a way that it:

• allows us to immediately see how items are related to one another;
• gives us a more immediate way to see patterns;
• becomes a default to try and understand huge amounts of information.

In addition to visualization, Pescovitz touched a bit on how we're using collective filtering to try and make sense of all this data. We turn to social networks we may trust, such as Digg, to take advantage of the filtering layer created by that network’s society. Anything to help us get a head start on parsing the data.

Later on in the conference, Nick Cawthon talked about aesthetics and efficiency in visualization of data. His talk referenced research he had done using different types of data visualization in order to determine what participants thought of the graphic (pretty or ugly) and whether or not it worked (they could complete a task such as finding a file). An interesting outcome was that the higher the user-rated aesthetic, the more reluctant the user was to abandon that particular data visualization. At a basic level, if the interactive graphic was perceived as “pretty”, the user was willing to spend a bit more time trying to learn how to use it.

Fascinating ideas and I know we're just scratching the surface of its potential.

Technorati Tags: Design, Information Architecture, Usability, DUX07

Chaos and Order

The process of designing (guis/websites/apps what have you) can be very exciting, and ultimately, when a design goes well and achieves its purpose, it can be highly rewarding.  But it's also a challenge.  Every designer has their own set of struggles that they go through during the design process.

One of the things I struggle with most as a designer is the urge I have to make things consistent, or symmetrical.  I prefer order over chaos, I'll admit.  I constantly have to catch myself from spending too much physical and mental energy on removing what I see as chaos, and replacing it with structure, consistency, balance and symmetry.  It's not that these aren't worthy goals, but my experience is that sometimes those characteristics aren't the key, or even an important element on a particular interface screen or widget.  In fact, in many instances I have found that what I consider order is quite an undesirable solution, or at least, not what the doctor ordered.  
By instinct I look at my work through a designer’s lens.  It is a macro view.  I see the overall structure of the interface.  I slave over task flows and wireframes, structuring them and fine tuning them so they please my aesthetic and philosophical sensibilities.  I judge them by their adherence to my design rules-symmetry, balance, structure, consistency.  
But for the judges that matter, the users, the interface is simply a tool that they will use to accomplish a task (or set of tasks).  They will judge its success not by any theoretical characteristics, but by how well it allows them to accomplish those tasks.  They won’t look at the blue prints.  They’ll never get a look at the task flows generated in the design process, nor would they have any desire to.  
Internalizing this distinction--the difference between my view, and the user’s view--and embedding it into my design process is one of the challenges I face, and one of the determinants of a successful design.

Powered by ScribeFire.

Color for Developers, part 2

Color in context Many moons have swung by since our last talk, grasshopper, and by now you have had those tattoos revised and replaced more times than Angelina Jolie. I can only hope you have been as politically corrupt and personally shocking, really, she is a role model to so many.

Today we will talk about color and perception, then later we will do the sacrifice part... Right, let's start with Kasimir Malevich, who had strong opinions about color or the lack thereof and put his money, [or the people's money] where his brush was. Painted such fashion nuggets as "White on white" and "Black square". If you imagine what they look like in your mind, you will be darn close.

So what was on his mind? Why bother? There are a couple of reasons:

1] Cultural He was a Supremacist in Russia in the early part of the last century and thought that painting couches and side-tables was hopelessly bourgeois.

2] Psychological He wanted to defeat his own preconceptions and create something new; a kind of meta painting that was both free of objects and depicting pure emotion.

Well can color or it's absence do that? What strange and magical powers does it have? Vassily Kandinsky, one of Kasimirs drinking buddies, associated some very specific things with color - he claimed that certain colors elicited thoughts/memories/feelings of particular sounds and feelings and made them into a handy grid.

Most people make some basic and reliable associations with colors; black associates with night, death and designers clothing. Red means fire engines and radio flyer wagons. These are cultural associations, that effect how we perceive and interpret our world. A blue light on your dashboard is understood as a fairly passive status light. A yellow light, blinking rapidly, means the engine is probably about to seize.

When we use these colors in an interface, all of those associations are carried along with it. A complicating factor is the cultural context it is being read in. Many cultures have very different tolerances and preferences for color that western europeans; any short description of these differences will be reductive, but think of these references: Jamaican villages houses, Bollywood movies, Japanese packaging... Would those local tastes effect the design of an interface for those groups? I look forward to your comments. Leave a donation for the gods by the planter.

Que Multimedia, Part 3, Beyond Typography

As you might expect, I have a suggestion or two. Firstly, I would confirm my standing as a heretic by questioning the hegemony of typography. Put five designers in front of lattes and the one thing they will all agree on with mumbled nods is the importance of Typography. Of course I would too, but this reflexive assent masks a larger problem in how design is practiced and taught. The design profession has been so deeply fractured in the last 15 years typography has remained one of the few common links between this new multiplicity of practitioners. Well, for better or worse, the aesthetics of desktop and browser based applications use type in extremely limited ways that are an intersection between common system installed fonts and informative hierarchies. And common system fonts, consider Arial, Impact and Papyrus for a moment, leave much to be desired. However this is the palette of many desktop and browser based applications. Often the more complex issues in these engagements are how to assemble, change and order vast amounts of information. Designers bring a vastly different focus to these activities than most developers. The developer concentrates on a micro level of specific code interactions to construct a working system while a user experience designer connects the user to a much more general picture. Factors that might be involved include business problems, a users cognitive interest/abilities and the the capabilities of the developers systems. There are user research activity models, interface and task modeling considerations that have little to do with what anyone would describe as sophisticated print typography. Yet notions of hierarchy and the effect of symbols and composition are elemental to forming easily navigated tasks. So mere type skills will not be adequate; understanding interaction from a standpoint of task and capability is the core activity. This means that the designer must have a comprehension of the basics of digital design history as well as what is current, and this is equally as trend driven as any part of print culture, in development terms. I see this as the formation of the question, not an answer. What we do know is that the answer is a moving target, obfuscated by the claims of those who market digital culture. But the challenge to answer it is as real as any aspirations we have as providers of both sensible and innovative solutions.

Que Multimedia: Part 2, A Dilemma:

I share the responsibilities of hiring decisions for a small consultancy and being a design educator. Hiring new staff gives me one perspective on the state of education, and designing and delivering classes another. Our consultancy delivers user experience design for applications; the participation of any kind of designer in these tasks is a relatively new thing, and is too often seen with some suspicion by both developers and financial officers in the organizations we consult with. The ability to convey the passion that is required for the work is an asset, and one beyond any discussion of teaching methodologies. That said, I see it as vitally important work that is rooted in a strong understanding of typographic hierarchies, information design and the mechanisms of interactivity. Experience in the former role tells me that hiring a design graduate with less than 3 to 5 years experience is usually a mistake. Surprisingly, I have had better luck with geeky film or architecture grads. They tend to have stronger conceptual abilities. We can deduce that design programs are non-functional in developing graduates capable of exploring and understanding these tasks. This is a simple and troubling assumption, particularly as I am complicit in the activity of educating them. The organizers of the Schools of Thought conference have recognized a broader problem, inclusive of this issue, and have organized their spring conference around it. http://superstove.blogs.com/schoolsofthoughts3/portal/index.html My question is this. Is it presumptuous to expect Design Schools to graduate students with even a roadmap of the skills of information design, interactivity and typography? The problem lies less with graduate programs - where students should have some breadth of experience - but is pronounced in undergraduate education. I hear no end of lip service; these are core values all lay claim too; yet the results are a vision of the emperors new clothes.

1 Picture == 1,000 Words

For most of us, visual presentation has a greater immediate impact than text or numbers alone. Graphs are effectively used in presentations for that very reason: they quickly convey that Column A is larger than Column B, or that Line 1 has outperformed Line 2. They allow us to easily grasp the overall concept before drilling down into the details. When done well, they allow us to convey complexity with ease (see Tufte, Edward).

When a search engine visually presents the results in a manner that allows me to quickly grasp the depth of the search, quite naturally it catches my eye. Grokker.com is a search application that displays the results both in an outline view and a map view. The user can toggle back and forth between the two views before selecting their preference for viewing the results.

#*&)#*$)# Software.

Nothing is more frustrating than having your software beep at you when you’re trying to do something you *know* it can do, and you’re flummoxed as to why it’s resisting your every effort to continue on with your work. All attempts are met with the same impersonal beep, whereupon you conclude that (a) the software hates you and (b) your only recourse is to begin swearing with enough proficiency and creativity to make a sailor blush. You just might be the victim of a mode error.

Using Design Patterns

Design is a creative process, not a recipe. Good design is an iterative process where refinement is incorporated into each successive rendering. So how in the world does a pattern fit into a creatively, iterative process?

First off, let’s discuss what design patterns are. In essence, design patterns are a record of best practices derived to solve a particular problem. They are an abstract capture of a common structure, without dictating the concrete details. They give you a basis for where to start in order to come up with a solution. It is up to the designer to adapt the pattern to their particular context in order to solve the recurrent problem described by the pattern.

Actually, if you’ve been designing for a while you’ve probably already incorporated design patterns into your toolkit. Let’s say, for example, you’re designing a screen that requires a large amount of data to be presented in a very tiny space. Staring off into space, you remember a previous project and how you solved a similar problem. You adapt that solution to fit the context of the current application and viola! You’ve just used a design pattern.

Or you’re in a design meeting debating the merits of using breadcrumbs vs. a sequence map. Well, you’re actually debating two navigational design patterns – in this case, best practices that help with context. The chosen pattern solves the problem of giving users a sense of where they’re at in the application. How you implement the visual presentation of the pattern is up to you.

The recent books and articles on design patterns are, in effect, a formal codification of best practices that can aid in designing an elegant solution and also provide a common language for team discussions (sequence map is understood; 1-2-3 thingy at the top might not be). The more experience you have, the less likely you may be to consult design patterns. However, if you’re new to the field, encountering a problem for the first time, or wish to establish a common language for the team, they’re a good place to start.

And to help you get started, here’s a list of pattern repositories you might find interesting.

Wheels on a boat

A couple of days ago someone sent me a link to a flash catalog piece...

I have seen these kinds of things before.

And I always wonder why the idea gets repeated. I suspect it is because catalog based retailers see the Book as some kind of golden calf which is due irrational worship. The downfall is in the data-density difference between print and screen is the culprit; print holds so much more that the on screen imitation is irrelevant. The magnifying glass shows a smaller width than a column of type; not being able to read a full line makes multiple lines an instantly rejected experience, fomenting shockingly derisive thoughts on the part of a user.

I have seen this done better, maybe it was a Lands End version... It popped up a new window which was larger and had better controls.

The next question is what would make it work? Is there value to this format that drives otherwise knowledgeable adults to keep trying this metaphor?

If you assumed a 1024 x 768 user base, you would have a larger  beginning state. A very large magnifying glass, or better yet- zoom capabilities, would allow you to move into the page. Which returns us to the question of value.

What is it that retailers are seeking here? I think it is the experience of browsing in a lateral fashion and focussing in on some desirable or intriguing item... A simple but durable pleasure. And the notion of lateral non-hierarchical browsing is certainly a mainstay of the web.

As well, they are looking to leverage the page layout techniques that they find successful in print. This is where things break down; cluttered web pages, whether imitating print or not don’t tend to function very well for impulse surfing. If the page design were less dense with more whitespace you might be able to leverage one medium against the other. However this becomes a series of decisions as to how your product offering combine with the semantic codes connoted by the design choices this would require.

Rethinking the Help System in an Ajax World

In desktop applications and the new genre of Ajax applications it's possible to provide contextual information to the user. This is typically done one of two ways. Either real estate is devoted up front to the display of this information, or a pop-up (or slide-in) of some kind emerges.

The ability to contextualize information physically suggests the necessity to rethink the creation of the help system. Not only must we consider what the information must be, but also when and where it will likely be accessed. The help system truly must be a system, not just an encyclopedia of the features of the tool (that is still a good thing to have, nonetheless).

The down side of a highly contextual help system is cost. Someone has to design it, not just write it (you have to do that too). There may be a good middle ground, though. Consider providing specific help access points contextually in your application for the things users are most likely to get stuck on. Provide opportunities for assistance, advice or suggestions in context where the benefits are significant to the task at hand. Let the user easily get the information, and get rid of it when their needs have been met. This approach can deliver value to your users, while keeping the creation and maintenance costs reasonable.

Technorati : ajax, design, help system, usability

The Zeigarnik Effect in GUI Design

The Zeigarnik effect suggests people remember incomplete or interrupted things better than completed things. It’s human nature to want to complete a task or hear the end of a story, and when we don’t a psychological tension results until the item is completed.

The effect has an interesting implication for digital interfaces. When a user involved in a long task encounters an interruption or an opportunity to complete a quick task, there’s a good chance the interruption or new task will get acted on. This can leave a lineage of uncompleted tasks and non-linear navigation trails. 

One way to combat this that we have used in a variety of applications is to dynamically create a task queue. The queue stacks up incomplete tasks in one place so the user can get back to these tasks when he or she is ready. In a restricted domain, it’s usually possible to apply some intelligence as to how the queue is built so it reads fluidly and clearly.

To Customize or to Reuse

Design patterns, Templates, Stock designs--whatever they're called, they present an opportunity and a challenge for designers.  All interface designers will run across this same question sooner or later.  When to customize and when to reuse a preexisting design. 
The answer to this question depends on what you consider to be the primary goal of the project.  Is it to build something unique and special--something that wows people because no one has seen it before?  Or is it to build an effective and on budget solution to a business problem? 
If it's the former, then as a designer you're primary goal is to create a work of art.  Go ahead and take the time to come up with something mind-boggling.  There's no limit to what can be done, and there's no reason to feel that a healthy dose of experimentation--both on the designer and the user's part--won't be beneficial.
However, if it is the later, you need to be aware that you are working under certain constraints.  Therefore the more you can reuse, the better.  There's plenty (and I mean plenty) of existing intelligence on interface design.  It's your responsibility to use that existing knowledge.  Incorporate it into your project.  Make use of the patterns that have been proven effective.  Make use of the processes that have been shown to be efficient.  In short, don't reinvent the wheel.  Use the collective knowledge that the web is offering you.
And you can start here:
Yahoo Design Patterns
HCI Patterns
User Interface Design Patterns

Leveraging the User’s Experience: Insights on Designing for AJAX

When the first GUIs were created they leveraged perhaps the most ubiquitous items people experienced in an office environment: a desktop with folders and documents.

As we move into the world of AJAX and rich interactions, the principle of leveraging experience can be extended not just to objects but how we interact with those objects. Google maps provide a familiar example. Using rich interactions, we are able to interact with the map almost as if it were a physical object (without having to figure out how to fold it – a benefit to be sure). Another form of interaction being seen more and more is the concept of a sliding drawer. Objects we may need are closely available, but are not consuming precious screen real estate until needed.

As rich interaction and AJAX technologies mature, they present endless possibilities for the designer to create something that is innovative through its familiarity.