I work at a Web development company and we’ve experimented with proposal writing a lot over the years. We’ve seen the good and the bad, and we have found something better. In this article I will share the pains that we have experienced in the proposal writing process, the solution we adopted, and our process for carrying out that solution. I’ll also give you guidelines to help you know when this solution is and isn’t appropriate.

Proposal Writing Causes Pain

After several years of writing proposals, we began to notice that something wasn’t right. As we considered the problem we noticed varying levels of pain associated with the proposal writing process. We categorized those pains as follows:

The Rush
Getting a proposal done was usually about speed. We were racing against the clock and working hard to deliver the proposal as efficiently and as effectively as possible. However, sometimes corners would get cut. We’d reuse bits and pieces from older proposals, checking and double-checking for any references to the previous project. While the adrenaline helped, the rush gets old because you know that, deep down, it’s not your best work. Besides, you don’t even know if you’re going to close the deal, which leads to the next pain.

The Risk
Our proposal close ratio with clients that came directly to us was high. We’d work hard on the proposals and more often than not, we’d close the deal. The risk was still there, however, and I can think of several proposals that we had spent a lot of time and effort on for a deal that we didn’t get. Not getting the deal isn’t the problem — the problem is going in and investing time and energy in a thorough proposal without knowing if there is even the likelihood that you’re going to close the deal.

The Details
The difference between a project’s success and its failure is in the details. In proposal writing, the details are in the scope. What work is included, what is not, and how tight is the scope? Now, this is where the "rush" and the "risk" play their part. The rush typically causes us to spend less time on details and the "risk" says: "Why spell it all out and do the diligence when you might not even get the project?" A self-fulfilling prophecy, perhaps, but a legitimate concern nonetheless. Selling a project without making the details clear is asking for scope creep, and turns what started out as a great project into a learning experience that can last for years.

Now, writing is an important part of the project and I’m not about to say you shouldn’t write. Having a written document ensures that all parties involved are on the same page and completely clear on exactly what will be delivered and how it will be delivered. What I’m saying, though, is that you should stop writing proposals.

Write Evaluations, Not Proposals — And Charge For Them

A few years back, we decided to try something new. A potential client approached us and rather than preparing another project proposal, we offered the client what we now call a "Project Evaluation." We charged them a fixed price for which we promised to evaluate the project, in all of our areas of expertise, and give them our recommendations.

They agreed, paid the price, and we set out to deliver. We put a lot of effort into that evaluation. We were in new territory and we wanted to make sure that we delivered it well. So we finished the report and sent it to them. The client liked it, agreed with our recommendations, and started a contract with us to do the work.

That project became a game changer for us, starting an on-going relationship that opened doors into a new market. It was the process of the evaluation itself that brought the new market potential to our attention, and gave us the opportunity to develop this business model. It was a definite win, and one that a project proposal couldn’t have delivered.

What Is A Project Evaluation?

A "Project Evaluation", as we’ve defined it, is a detailed plan for the work that is to be done on a project, and explains how we do it. We eliminate the guess work, and detail the project out at such a level that the document becomes a living part of the development process, being referred back to and acting as the guide towards the project’s successful completion.

The Benefits Of (Paid) Project Evaluations

As we put our proposal writing past behind us and embraced the evaluation process, we noticed a strong number of benefits. The most prominent of those benefits are the following.

Qualification

If a client is unwilling or unable to pay for a project evaluation, it can be an indicator that the project isn’t a match. Now, we may not always charge for evaluations (more on that later). We also recognize a deep responsibility on our part to make sure that we have intelligently and carefully explained the process and value of the evaluation. After all that is done, though, you may run into potential clients who just don’t want to pay what you’re charging, and it’s better to find this out right away then after writing a long proposal.

Attention to Details

Having the time available to do the research and carefully prepare the recommendations means that we are able to eliminate surprises. While the end result may be a rather large document, the details are well organized and thorough. Those details are valuable to both the client (in making sure they know exactly what they’re getting) and to the development team (in making sure that they know exactly what they’re delivering).

No Pricing Surprises

Figuring out all the details and ironing out a complete scope means that we’re able to give a fixed price, without surprises. This gives the client the assurance up front that the price we gave them is the price they’ll pay. In more than a few cases, the time we’ve spent working out the details has eliminated areas of concern and kept our margins focused on profit, not on covering us "just in case."

Testing the Waters

When a potential client says "Yes" to an evaluation, they are making a relatively small commitment — a first step, if you will. Rather than a proposal that prompts them for the down payment to get started on the complete project, the evaluation process gives us time and opportunity to establish a working relationship. In most cases, the process involves a lot of communication which helps the client learn more about how we work, as we learn more about how they work. All this is able to take place without the pressure of a high-budget development project. And by the end of the evaluation, a relationship is formed that plays a major factor in the decision process to move forward.

Freedom to Dream

Occasionally, we spend more time on an evaluation than we had initially expected. But knowing how our time is valued has given us the freedom to explore options and make recommendations that we might not have made otherwise. In our experience, the extra time and energy that the context of a paid evaluation provides for a project has consistently brought added value to the project, and contributed to its ultimate success.

The Evaluation Writing Process

Over the years we have refined (and continue to refine) a process that works well for us. As you consider the process, look for the principles behind each step, and if you decide to bring this into your business, look for ways to adapt this process and make it your own.

#1 — Do the Research

The heart of the evaluation process is the research. If it’s a website redesign project, we read through each and every page on the website. We take notes and thoroughly absorb as much content as possible. Our objective is to get to the heart of the project and gain as much of the organization’s perspective as possible.

If it’s a custom programming project, we try to get inside the project’s concept, challenge it, look for flaws in the logic, research relevant technologies, and work to make recommendations that keep the goals of the project in mind.

We spend time with the client by phone, over Skype, via email, and sometimes even in person. As our research uncovers problems or finds solutions, we run them by the client and gather their feedback.

The research process allows us to go deep, and in our experience it has always paid off, giving us a thorough grasp of the project and providing a foundation to make intelligent, expertise-driven recommendations.

#2 — Offer Recommendations

Each project evaluation is different. Depending on the nature of the project we may make recommendations regarding technology, content organization, marketing strategies, or even business processes. The types of recommendations we make have varied greatly from project to project, and are always driven by the context and goals of the project.

When it comes to areas of uncertainty for the client, we work hard to achieve a balance between an absolute recommendation and other options. If the answer is clear to us, we’ll say so and make a single, authoritative recommendation. However, when an answer is less clear, we give the client options to consider (along with our thoughts) on why or why not an option might be a match.

We share our recommendations with the client throughout the evaluation process, and when the final report is given, there are rarely any surprises.

#3 — Prepare the Scope

After we’ve worked through our recommendations, we put together a technical scope. This is typically the longest part of the document. In the case of a Web design project, we go through each page of the website, explaining details for the corresponding elements of that page. The level of detail will vary based on the importance of a particular page.

The scope document is detailed in such a way that the client could take it in-house, or even to another developer, and be able to implement our recommendations.

As the project commences, the scope document will often be referred to, and can function as a checklist for how the project is progressing.

#4 — Prepare the Timeline & Estimate

With the scope complete, calculating the cost and preparing an estimate becomes a relatively straightforward process. While how one calculates the price may vary, all the information is now available to see the project through from start to finish, identifying the challenges, and determining the amount of resources required to meet the project’s objectives.

Note: Prior to the start of the evaluation process, we nearly always give the potential client a "ball park" estimate. So far, that estimate typically ends up being about ten times the cost of the evaluation.

We take the estimating process very seriously, both in the ball park stage and especially here within the context of an evaluation. Once we set a price down we don’t leave room for "oops!" and "gotchas!", and that means we are extra careful to calculate as accurately as possible, both for our sake and for the sake of the client.

Now, because of the nature of the evaluation, we are often able to research and explore options above and beyond what the client originally brought to our attention. In the case of a Web application, this might be an added feature or a further enhancement added onto a requested feature. Within the scope of the evaluation we carefully research these extras, and when appropriate, present them as optional "add-ons" within the timeline and estimate.

They are truly optional, and while always recommended by us, we leave the decision up to the client (there’s no use wasting research energy on an add-on you wouldn’t fully recommend). In cases where the budget allows for them, they are nearly always accepted. In cases where a tighter budget is involved, the add-ons are typically set aside for future consideration.

When Evaluations Are Appropriate

A project evaluation functions like the blueprints for a new office building. Imagine that I own a successful construction company, and I have a number of world-class office construction projects to my credit. A new client comes to me after seeing some of my work and tells me "I want a building just like that!". Assuming, of course, that I own the rights to the building, I can say "Sure!" and tell them how much it will cost. Why? The blueprints have already been drawn.

Now, there will be variable factors, such as where they choose to have the building built, and any customizations they may request matter. But in most cases no new blueprints will be needed, and I can proceed with construction without charging them for the plans.

Suppose another client comes to me after seeing one of my buildings and asks me to build an entirely new design for them. A new design calls for new blueprints all of their own, and these must be developed before the project begins. Can you imagine a large-scale construction project without any blueprints?

Web development is the same way. In our experience, evaluations are appropriate when a client comes to us and asks us to take on a project outside of our existing set of "blueprints". Examples where we’ve found a project evaluation necessary include:

• A redesign of an existing website.
• Developing a new Web application.
• Bringing new technology into an existing project.

Without an evaluation you’re either left to go ahead and do the research on your own (with the weight of the rush, and the risk on your shoulders) or you’re stuck making as educated a guess as possible for the scope of the project. This dangerous guessing in a situation where an evaluation is appropriate can leave you with an estimate that is too high (which can mean losing the project) or even worse, an estimate that is too low.

When Evaluations Are Not Appropriate

When a project is familiar, and doesn’t require an evaluation (or fits within the scope of an existing type of evaluation), we give an informal, direct estimate along with a scope of the work. Small to mid-sized Web design projects typically fall into this category. While the content and design are new, the process isn’t. The key here is the experience and confidence in your abilities (and the abilities of your team) that the work will get done within budget to the expected delight of all parties involved.

Conclusion

Project evaluations up until now haven’t been given much attention. I would suggest it is a simple concept that has been overlooked and passed by amidst the rush of a booming Web development industry. I invite you to implement the process, experience the benefits, and stop the pain of proposal writing.

You might like the following posts

• How to deliver exceptional client service? (0)
• Creating a working Website with a team can be a challenge (0)
• Strategy or creativity: what do people really want? (0)

Here are seven things we learned in building a responsive site in a short amount of time.

1. Really, how many sites can you build?

The good thing about being a developer is there’s always another device, browser or operating system to adapt to – no shortage of work. But building one version or app after another isn’t a sustainable strategy at a small company. Developing, testing and deploying a single code base streamlines almost every step in the process. When it’s crunch time and your eyes are tired, you can focus on one critical path – without distraction.

2. The business comes first

The holiday shopping season is the busiest for ecommerce – and it’s completely mental for sites specialising in food and wine, as Lot18 does. With thousands of shoppers planning parties and buying gifts, we couldn’t assume every purchaser would be sitting at a desk or, alternatively, would take the time to search for an app, download it and use it.

It was an equally unsafe assumption that any particular user would employ the same type of device for each and every visit to the site, or that any of a user’s friends invited to join Lot18 would have similar devices. Taking a responsive approach prioritises the business and reorients our thinking as a development team. We’re closer to customer experience and not solely focused on our own schedules and timetables.

3. Stop chasing platforms and build features

Freed up from targeting platforms, we could dedicate more time to building features for the new site. For example, as we overhauled our checkout system, we could focus on one UI/UX strategy without worrying about device-specific builds. Moving forward, the development team will be more feature-focused and efficient.

4. Everyone is QA

At a small company, everyone is busy and may not have time to walk through the new version of the site to help find bugs or unintended complications. But we encountered a nice consequence with our new responsive design: everyone could test the site on their own time.

If someone wanted to test or just check out the site in progress, they could use their phones during their commutes, or their tablets – or their TVs at home. Even better, this type of testing is likely closer to how our members use the site.

5. Be consistent across native apps and the mobile web

Lot18 will release a native iPhone app soon. Like most native apps, it is designed for iPhone and feels natural.

However, even the most dedicated app users will run into the mobile site via email, Twitter, Facebook, etc. The responsive site provides a consistency across the native and mobile web experiences, and reinforces the overall brand experience.

6. Explore new interactions

Leading up to the launch, we observed a new behaviour in people previewing the site. Once they figured out that the site responded to them, they started playing with it. Responsiveness adds dimension to the experience and provides a fresh look as users move from one device to another – or one device mode to another.

What I saw was an emotional reaction that translated as, “This is fun.” This is always a good thing.

7. You’ll get reliable analytics

Finally, when comparing stats, it’s nice to know that users are hitting the same code and interacting with the same content. We’ve also gained new perspectives on how users behave, and have already seen positive changes reflected in our metrics.

The best thing about our recent launch is that, for us, there’s no longer a ‘real’ Lot18.com. Instead there’s a Lot18 experience, with any visitor – regardless of the device used – capturing a particular facet. As a result, our development group is closer to the business and can act almost like an extension of the customer-service department, providing a better online-shopping experience – which can’t be bad in the highly competitive ecommerce space.

You might like the following posts

• How changing a button increased a site’s annual revenues by $300 million (0)
• Lessons from mobile web design (0)
• What Bach has to do with modern Web challenges (0)

This post explains four strategies for improving fluidity of content and design, and we’ll gauge the effectiveness with which several websites use these strategies, taking special note of what we can learn from Sendak’s Where the Wild Things Are.

With Graphics As Your Witness

When editing critical papers during my undergrad, I was constantly mindful of backing up every claim I made in writing. Describing a protagonist as “yearning for a return to childhood” wasn’t enough to convince a professor unless I could refer to a passage where this was suggested.

Though published way back in 1997, Jakob Nielsen’s analysis in “How Users Read the Web” still offers a storehouse of relevant advice about how users gauge legitimacy online. He suggests that when businesses use promotional language online, they create “cognitive burdens” on their users, slowing down their experience with the website, triggering a filter by which they weigh fact against fiction.

Instead, use design to complement or convey self-promotion, easing user skepticism from the get-go.

Makr Carry Goods effectively “backs up” its content with graphics to convince users of the “news”-worthiness of its work. In the example below, the visual promotion of the products complements the text: without having to scroll over the images, we see the products themselves as being the news.

Scrolling over the images on top reveals the textual “news”:

From there, users can carry on their visual journey through the Mark Carry catalogue, enticed to read on by the persistent connection between the product and the news section, a connection that compels users to explore further.

Key to this graphic-textual connection is the visual quality of the products themselves. Without the clean white presentation and professional style, the visuals here might fail to suggest a connection with the news. But the products have been presented to impress.

Without engaging visual confirmation, content will often fail to persuade.

Take Mark Hobbs’ professional website:

He claims that he’s “not normal.” He’s “extraordinary… adaptable, loyal, ambitious and an Eagle Scout,” and he’s “like a sponge” (among other things). If he were getting points for descriptiveness, Hobbs would take first place. But he’s got no visual evidence of any of these claims. No hint at this lack of normalcy.

Besides, as Nielsen’s studies suggest, users generally dislike “marketese”: writing that is boastful, self-promotional and full of subjective claims. Then again, should claiming not to be normal be considered a boast?

Mark’s claims could have been justified by an impressive and immediate visual display of his past work. Engaging users with the strict facts of his expertise could have reinforced his textual claims.

Consider the home page of Rally Interactive:

It is “here to help you build digital things.” We know this because of the two immediate examples of its work, presented in triangles that recall other projects that required exceptional skill: the pyramids.

Rally’s folio effectively demonstrates a strategy of fluid content and design. The firm backs up its claim and provides users with an immediately useful and positive association. The visual and verbal prompts coalesce to convince users of Rally’s expertise.

Going back to Where the Wild Things Are, if Sendak hadn’t included visuals of Max’s misdoings, what sympathy could we gain for him as his mother sends him up to bed? We can interpret his “mischief” any way we choose, but Sendak’s visual direction helps us gauge what kind of protagonist (or antagonist) Max will be for the remainder of the story. Verbal prompts simply wouldn’t cut it.

Fluid content and design reduce the user’s search time and, in this case, justify the claims made textually. Users don’t have the time or willingness to hunker down and read, particularly when looking for a service. Fluid content and design convince users of the truth of a claim before they even begin to question it.

Tighten Up

Once you’ve eliminated any refutable claims, you might find your content looking a bit sparse. In fact, you want it naked: easy to scan and to the point.

Christine Anameier’s article “Improving Your Content’s Signal-to-Noise Ratio” points us in the right direction for creating tight content that isn’t afraid to depend on suggestive design to share the workload.  There will always be information that the user cannot process visually. So, what should you put in text?

Anameier suggests segmentation, prioritization and clear labeling to make the most of your content.

Segmentation

Segmentation entails sectioning content on the page according to audience or task.

The home page for Jessica Hische’s design portfolio does this effectively:

The home page targets the specific needs of users. Hische has divided the links to her services according to what particular users will be looking for, sparing us long descriptions of each service.

Hische also spares us a textual description of the quality of her service, instead pairing tight layout of text with sprawling, confident design. We can gather from the background a sense that she has clean organization. The orange ribbon font “welcomes” us and puts us at ease so that the text doesn’t have to.

Prioritization

Prioritization, as Anameier says, requires that you “understand your audiences and their tasks, and decide what your website is trying to do.” Structure your website to reflect these tasks, removing any content that strays from the path. Hische’s home page demonstrates a comprehension of her users’ purpose for visiting the website, and it wastes no words.

Content and design fluidity entails deciding what should be explained textually and what should be demonstrated graphically. Hische does not verbally boast about her quality of service. The design does that for her, conveying an array of positive attributes, from classic taste to proficient organization.

Hische recognizes that the first priority of users is not whether she’s any good, but whether she offers what they need. Once that is clarified, users will look into the quality. Keyword: look.

Creating those fluid user experiences in which content and design cohere requires, as Mark Boulton states in “A Richer Canvas,” “text that feels connected to the physical form in a binding manner that should make it invisible.” Anameier herself says that incorporating “specific and accurate link text, page titles and headings” gives users the luxury of perusing graphic elements on the page without being disrupted by navigation obstacles.

Labeling

Labeling that is structured with the user’s goals in mind will be trim and to the point, “invisible,” as Boulton suggests, so that the visual showcase enjoys some attention, too.

Tight content that follows Anameier’s guidelines will visually suggest your service’s qualities and attributes strongly. The description of the service itself will rely heavily on text, but what sets your service apart from others can be conveyed visually. Creating cohesive visual and textual discovery paths for users replicates that same sense of control that users get from the storybook.

Doodle Pad superbly utilizes segmentation, prioritization and clear labeling on its “About” page:

Carrying over the sketch-book theme to its visuals, Doodle Pad sets down user goals with clarity, displaying information directed at clients and creative professionals.

The labelling is clear and styled with familiar doodling motifs that show the user where to look for what they need. Key questions are answered, and the word count is not too shabby for a software concept.

Impressively, Doodle Pad connects the imagery and layout to the overall concept without over-informing or weighing down users with elaborate language. It gives us notebook-style notes for a notebook concept: tight and user-friendly.

Check The Narrative Voice

Curt Cloninger’s article “A Case for Web Storytelling” argues for narrative voice as being an essential consideration for Web designers who want to create engaging user experiences.

Designers are at a great advantage when it comes to synthesizing text with graphics. We can create a rich narrative tone that convinces and directs users. We are able to explore and experiment with the Web’s possibilities, going beyond Where the Wild Things Are and celebrating non-linear narratives, incorporating several kinds of interactive media.

With Web design, narrative voice need not stay put in the text. It’s more flexible that in storybooks, and Cloninger encourages us to play with that.

For instance, look at the layout for MailChimp 5.2. Toying with slogans that would look out of date on another Web page, the designers evoke nostalgia with their use of background images, color and typography, elements ripe with narrative potential:

Viewers interpret the slogans the right way because of the text’s ironic connection to the design. The “real people behind all those email addresses,” is a wink from the designers, because the viewers recognize that the “real people” in the background don’t look very “real” at all.

Users will commit to a fluid narrative online if the design fully commits to the content. And as Cloninger says, using narrative voice through Web design presents countless possibilities for exploration.

MailChimp explores one such possibility with its demo video, complete with more “wholesome” design and content:

Users can expect to be led on this retro journey through the other formats for narrative voice, as the video suggests with its old-school film-reel introduction.

The narrative voice is so woven into the content and design that MailChimp 5.2 could offer all kinds of 1950s-terrific claims and users would be moved to follow along.

MailChimp 5.2 experiments with tailoring content and design to a narrative voice, but it is effective because of its consistency. If it hadn’t committed to a particular narrative style, then the escapist spell of this user experience would have been broken.

Green Tea Design has chosen a watery, traditional Japanese-inspired design for its website. A geisha shades herself with an umbrella, looking down meekly, making for a quiet non-confrontational effect. But look at the aggressive text: “We don’t design wimpy websites that get sand kicked in their face by the competition.” The text goes on the offence, but the design doesn’t align with or enhance the narrative voice.

Try this: choose one adjective with which you’d like users to describe your website. Affix a sticky note of this adjective to the top of your monitor, and measure every sentence on your website against this adjective. Ask yourself whether the content aligns with the adjective. Now pour over your design and assess it by the same measure. We’re looking for matching sensibilities. Does your content and design align with how you want users to feel about the website?

In Where the Wild Things Are, the narrative tone is the anchor in Max’s hectic journey. Consistent, calm and matter of fact, even when Max is off dancing with the wild things, the voice elicits the reader’s trust as it sees the protagonist back to safety.

Readers settle into this consistency the way Max settles into his boat for “in and out of weeks / and almost over a year / to where the wild things are,” and again “back over a year / and in and out of weeks / and through a day.” It steadies the commotion in Max’s imagination.

Here, readers recognize the tension between the consistent content and the disruptive visuals as the mark of a superbly imaginative journey, where anything can happen, but where eventually everyone must return home.

The narrative commits to this tension until the end, when Max gets back to his room, where dinner is waiting for him, “and it was still hot.”

As a children’s storybook, Where the Wild Things Are doesn’t employ multiple forms of narrative expression. But it is an effective example of the co-dependence of playful and experimental text and visuals, in which the narrative voice incites chaos and calms the senses at the same time.

One last example of a committed narrative voice:

Recalling Gold Rush-era drama and Victorian carnival sights with its effective design elements, Forefathers maintains an adventurous tone, employing text that is consistent, descriptively appropriate and authentic.

Be Mindful Of The User Experience

As Elizabeth McGuane and Randall Snare state in “Making Up Stories: Perception, Language and the Web,” as Web users scan pages, they are “filling in the gaps-making inferences, whether they’re based on past experience… or elaborate associations drawn from our imaginations.”

Trust the user to connect the graphics and text, and expect them to want to. Cloninger says that “the more power a user has to control the narrative himself, the more a visitor will ‘own’ that narrative.”

Keep the descriptions visual. The acts of “mischief” in Where the Wild Things Are are graphic. The connection is made when both elements are harmonized into one idea. The user will be willing to read the text and view the corresponding image if both elements are compelling.

Looking at Jonathan Patterson’s effective online portfolio, we can see he has maintained a fluidity of content and design by basing the user’s experience on the motif of “fresh meat”:

Patterson’s “About” page looks like a steakhouse menu. The text on the first page hints at a description of a meal, while suggesting the page’s function. The website can be flipped through like a menu, giving the user choice and control. The text is simple and linear, mirroring the sequence of appetizer, main course and dessert in a restaurant menu. Fluid text and design help Patterson to create a particular experience with his portfolio.

Maurice Sendak employs similar tactics in Where the Wild Things Are, encouraging readers to expand their gaze to match Max’s ever-growing visual landscape. As Max moves out of his room and onto the sea, the content on the right-hand pages (otherwise bordered in thick white space) creeps over gradually, thrusting more colors onto the facing page. At one point, a sea monster appears on the left-hand page, which was otherwise reserved for text and white space.

Here is the user experience at its most polished. The change comes quietly, invisibly, but the reader is aware that something is different. The protagonist’s growth has been connected with the reader’s experience of the narrative through the placement and cohesion of text and image.

Another polished example of fluidity in content and design can be found in an actual restaurant’s website layout:

Yes, Denny’s. Look familiar? Replicating the experience of perusing a Denny’s menu, this layout shows how, in Patrick Lynch’s words, “visual design and user research can work together to create better user experiences on the Web: experiences that balance the practicalities of navigation with aesthetic interfaces that delight the eye and the brain.”

The user controls the narrative here, with fluid navigation options that maintain the menu-like aspect of the layout, and a pleasing visual presentation that, as Lynch says, “enhances usability.” Filling in the gaps between glancing over a Denny’s menu and browsing the website, users feel encouraged to control their experience.

Conclusion

Fluidity of content and design requires that you trust users to make connections. By making the tone consistent, backing up your claims, tightening the text and being sensitive to the user’s experience, you can be assured that users will draw the conclusions you want them to draw. Designers of promotional Web projects can learn these lessons in part from storybooks such as Where the Wild Things Are, which demonstrates the essential elements of user control and delight. Trust your inner child; it won’t steer you wrong.

You might like the following posts

• 7 points how to build responsive website (0)
• Why wait for the opportunity? create your own! (0)
• How job seekers can use today’s digital market (0)

Given the limited history of Web design, we have to look beyond our immediate domain for answers to the more challenging questions. We do this all the time when we draw on the rich history of graphic design and visual arts. But we’re not limited to sibling disciplines. If we can identify the abstractions and patterns that constitute our challenges, we can look to any source for guidance. We can look to a seemingly unrelated field, such as psychology or music. We can even look to an episode from the early 18th century about Johann Sebastian Bach.

In this article we’ll look at what Bach has to do with modern Web challenges — Particularly the challenge of designing for devices with diverse attributes and capabilities.

Bach And “The Well-Tempered Clavier”

In 1722, Bach put together a book of solo keyboard works intended as a collection of educational pieces for young musicians. The book contained 48 pieces — a prelude and fugue in every major and minor key. Now a staple of the Western canon, it’s regarded as one of the most important works in the history of Western music. He named the book The Well-Tempered Clavier.

To appreciate the historical significance of the work, you have to understand that in Bach’s day the notion that one might play keyboard music in all keys was unorthodox. It was a matter not of philosophy, but of physics: a fixed-pitch keyboard instrument could be in tune only with a selection of keys at a time. In the tuning systems of the era, playing in tune in all 12 major keys was simply not possible.

While the laws of physics can be tough to bend, human perception moves fairly easily. The solution was to redefine what it meant to be “in tune.” By adjusting certain intervals so that they deviated just slightly from perfect intonation, a tuning system was produced that allowed one to play reasonably in tune in all keys. This practice of compromising granular qualities for the greater good of the system is called temperament.

Opening measures of the first Prelude of Bach’s Well-Tempered Clavier. (Image credit: Wikipedia)

The name of the alternative tuning system made famous by Bach and The Well-Tempered Clavier is, unsurprisingly, “well temperament.” Today, most intonation in Western music is based on “equal temperament.” The methods are different, but the goal is the same: to make each of the keys slightly imperfect so that all of the keys can be used. It’s like utilitarianism for acoustics.

What This Has To Do With UI Design

Probably the most exciting development in Web design in the last few years has been the shift to designing for multiple devices. It’s no longer just about how a website functions in two different browsers, but about how it functions on various devices with completely different characteristics: different screen sizes, different capabilities, different use contexts, different interfaces.

Although responsive design and device-specific websites enable us to tailor designs for diverse experiences, there will still be times when we have to make universal decisions — and when we do, the metaphor of well temperament can be helpful.

The application of this concept to UI design is straightforward: in order to deliver a good experience for a range of devices, we have to allow for occasional imperfections in individual interfaces. We have to make little compromises here and there to make sure that our design travels well to other environments.

Touch-First Design

A common example of well temperament in action is the effect that touch interfaces have had on recent desktop website designs.

As a pointing device, a finger, being much larger than a mouse, requires a larger touch target than what’s required by a mouse cursor. So, to ensure usability, interactive elements need to be bigger. As interactive elements increase in size, other things need to increase in size to maintain balance. This leads to an aesthetic characterized by generous margins and padding.

The new Gmail design has a lot of white space and extra padding on buttons and is very touch-friendly, even though it’s a desktop design.

The rise in popularity of the iPad, which bridged the gap between touch interfaces and desktop screen sizes, is what accelerated the influence of touchscreens on desktop interface design. If you look at recent redesigns of major products such as Gmail and Twitter or browse CSS galleries, you’ll see that design on the Web is starting to look a little different. Things look more… plumpish. There’s more white space, buttons have more padding, things in general feel bigger. Of course, other factors are at play, such as the steady increase in desktop screen sizes.

What we end up with is a design that might afford too much space for a mouse but an appropriate amount of space for a finger. We allow for a slight deviation from the norm in one experience in order to better support all possible experiences.

It’s important to note that making a UI touch-friendly in this way also results in a UI that might be more useable for mouse-and-desktop users. A button that’s easier to touch is often easier to click. By erring in the direction of usability, we get the bonus of improved performance of the design in its original desktop context.

Microsoft’s Metro design language is inspired by a touch-first approach to interaction design.

Universal Design via Responsive Design

Although much of the discussion on responsive design tends to focus on techniques of responsiveness, responsiveness itself is never the goal. It’s a means to an end. The design responds in order to do something else. That something else might be to supply different content, to serve low-bandwidth images, or to adapt the layout for better presentation on smaller screens. That something else might also be a goal of providing a universal experience to a large number of different devices.

Riding the responsive design train to arrive at universal experience design, we’re likely to pass through some form of well temperament. A great example of this — and an excellent example of responsive design in general — is the Boston Globe’s website.

The Boston Globe is a shining example of responsive design on a large-scale website.

This responsive strategy enabled a single design to adapt to any device that a reader might use to read The Boston Globe (even the Apple Newton!). But this wasn’t just a feat of front-end engineering. Accompanying the media queries and JavaScript wizardry was a simple malleable design that lent itself to adaptation.

This is a tempered design. While the minimalism might be purely stylistic, I suspect that if it had been a desktop-only design, we’d have seen more gloss and embellishment. There would have been a longer runway on which to perfect the experience for a single-use context. But instead, the designers made little trade-offs to produce something that could be transposed to all possible environments — something that could play in all 12 keys.

Mobile-First Design

The preceding examples were concerned more with graphic design, but the concept of temperament can be applied to product design, user experience, information architecture — almost any other area of design. Let’s look at product design and the idea of designing for mobile first.

If you’re designing for mobile first, then you’re already working with tempered design. By starting the design process with mobile and building a product around the demanding constraints of the mobile environment, you’re obligated to focus on the most essential elements of the product. As Luke Wroblewski writes:

So, when a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish, without the extraneous detours and general interface debris that litter today’s desktop-accessed websites. That’s good [for the] user experience and good for business.

When these design decisions extend beyond the mobile experience to define the overall product, then the design takes on a form of temperament. The latest redesign of Twitter (i.e. “New Twitter” or “New new Twitter”) demonstrates some of these principles.

New Twitter has a simplified design and a consistent experience across devices.

One of the objectives of the Twitter redesign was to give users a consistent experience across computers and mobile phones. Achieving a consistent look and feel is a UI challenge, but achieving a consistent overall product experience is a deeper challenge. In both cases, designing for mobile first puts us on the right path.

Something I found interesting about the Twitter redesign was the influence that the mobile experience had on the product’s overall design. For example, aside from the tweet button, all of the actions have been organized under four tabs: “Home,” “Connect,” “Discover” and “Me.” It’s a simplification that plays wonderfully on a small screen. Four items fit perfectly in the tab bar.

On the desktop website, other features have been added, but the simplicity established in the mobile version carries over. Although the desktop version has plenty of room — both pixel-wise and figuratively — for more complexity, the design is restrained, tempered, to ensure a universal multi-device experience.

Beware Of Wolves

In the natural tuning systems that predated the standardization of well and equal temperament, notes of the out-of-tune intervals that were played simultaneously produced a harsh and howling sound. Musicians had a great name for this: they called it a “wolf.”

Applying this idea to interface design, we can think of a wolf as a visual or interactive element designed for one experience that breaks down to some degree when transposed to another. Think of the times you’ve struggled to finger-tap a small link that was made for a mouse cursor, or had to read tiny text on a mobile screen, or, on a touch device, used an interface that relied on hover states. Wolves in the UI.

These article present links that are designed for interaction with a mouse. When viewing on a touchscreen mobile device, their usability is greatly impaired.

New York Magazine provides useful and well-designed drop-down navigation menus — but only if you’re using a mouse.

Closing Thoughts And Practical Tips

Again, it’s true that responsive design and device-specific experiences can offer us a way around many of these problems. If we can tune the size of a button to a particular environment, then we don’t have to accept blunt, across-the-board treatment. But the number of devices we have to support will only increase, and customizing for every possible scenario could quickly become unreasonable.

Even if we are able to provide perfectly tailored design at the execution level, there is still value in thinking about tempered, universally accessible design at the conceptual level.

Additionally, just because we can tailor design to particular experiences doesn’t mean that users will not carry expectations over from one experience to another. The boundaries might blur whether we like it or not.

Tips and Things to Keep in Mind

• Think responsively.
  Even if you’re not implementing a full responsive design, simply thinking in responsive terms goes a long way to achieving usable universal design.
• Think touch-first.
  A button sized for a fingertip will always work for a mouse cursor. But a button sized for a mouse cursor will often be too small for a fingertip. Designing for touch first ensures that your website or application translates well to other contexts.
• Think universally.
  “Test early, test often” the saying goes. In your design process, think early and often about how your design will function on various devices.
• Think mobile-first.
  Starting your design with mobile focuses you on what really matters to your users. By maintaining focus on the essential features, achieving a consistent experience across devices will be much easier.
• Be careful with interaction behavior that is not supported universally across interfaces. Hover states don’t function the same on touch devices. Touch gestures can’t be performed with a mouse. It doesn’t mean we can’t use these things, but we have to be aware of their limitations.

In The End…

Bach believed that people should be able to write and play in any key they wish. He argued for it by writing beautiful music that compelled the world to agree. He designed for the system he wanted.

We want our users to have great experiences with our websites and applications on any device they choose. We want our work to be as usable and accessible as possible.

You might like the following posts

• 7 points how to build responsive website (0)
• How to design User Interfaces for Business Web Applications (0)
• 10 UI design patterns you should be paying attention to (0)

Consider this scenario. You are hired to design and develop a new website for a retail client. The client loves the design, and the pages you develop use the latest in HTML5, CSS3 and responsive design, resulting in a website that works wonderfully across browsers and devices. The e-commerce features of the new website help the client significantly increase their online sales, and the entire project is delivered on time and on budget. Now, is this “exceptional” client service? I don’t think it is.

When the client hired you, they expected that you would design and develop a great website. They also expected it would be done according to the timeline and budget set during the planning stages of the project. As successful as this project may have been for both you and the client, in the end, you did exactly what you were hired to do. You did your job.

Just Doing Your Job Vs. Delivering Exceptional Service

Nothing is wrong with “just doing your job.” In many cases, that alone is a tall order. So, while doing what you were hired to do is nothing to be ashamed of, it is also not exceptional — nor will it set you apart. There will always be other agencies or designers that will be able to do the work as well as you can — and there will certainly be someone willing to do it cheaper! The service you provide is how you can truly differentiate yourself.

Exceptional client service is about going beyond what is realistically expected of you. It is about surprising, and often delighting, customers, turning them into enthusiastic referral sources and lifelong clients who stick with you not only because you do great work at a fair price, but because the value you bring to them goes far beyond just your products.

In this article, I’ll detail a few of the ways that I have tried to take my own client service to the next level and deliver a better experience, starting with the most important aspect: the relationships that you establish with the clients who hire you.

There is a difference between doing what you were hired to do and delivering a superheroic level of service. (Image: JD Hancock)

Creating Real Relationships

Here’s a quick exercise. Write down your five most important clients (how you define “important” is up to you). Then, write down as many things you know about those clients that have nothing to do with their business or the work you have done for them. What are their hobbies or passions? How many kids do they have? How old are those kids, and what are their names? Where do they like to vacation? Things like that.

So, how long is your list? If you’re like most people I speak with, probably not very long at all. We learn everything we can about a client’s business, but we often fail to discover anything substantial about our clients as people. If we do not engage with our clients in a real, personal way, then we are just another vendor — and vendors are easily replaceable with better cheaper options. However, clients are much less likely to consider replacing people with whom they have real relationships.

So, how do you start learning more about your clients? Simple: ask them questions about themselves and their lives, not just about their business.

Asking Real Questions

When I give this advice to others, it is often met with some apprehension. Asking someone about their business goals is easy. Asking them about their life outside of the office is harder. We often avoid getting personal for fear of offending the person or saying the wrong thing; but by being overly cautious, we miss the chance to create a real relationship.

Whenever I get nervous about getting too personal with a client, I remind myself of a story. A few years ago, I had the privilege to work on the website for the Tori Lynn Andreozzi Foundation. This non-profit foundation was named after a young girl who, walking home from school one afternoon, was struck by a drunk driver. Tori survived but was forever changed. Today, she is in a minimally conscious state, unable to walk, speak or eat.

In one of my first meetings with this client, I sat down with the head of the foundation, Tori’s mother, Cathy. I began the conversation simply by asking her, “How is Tori doing today?”

Cathy smiled and answered that Tori was doing well. We had our meeting and discussed the website and the project. As we were wrapping up, Cathy thanked me for asking her about Tori. She explained that so many people avoid asking about her daughter, fearing the news would be bad or that Cathy would be upset by the question. The truth is that, even though Tori has bad days, Cathy always enjoys talking about her daughter and was very happy to be asked about her. By asking Cathy how her daughter was doing, I showed her that I cared about more than just the project.

The website for the Tori Lynn Andreozzi Foundation

Today, Cathy is one of my favorite people to speak with, and we begin every conversation by asking how each other’s children are doing. We have much more than a great client-vendor relationship, all because I asked a real question, honestly cared about the answer, and created a real, human connection in the process. Had I been too afraid to ask that question, I might never have been able to build the relationship that I have now.

Don’t be afraid to ask your clients real questions. If they don’t want to answer you, they won’t. But for those who do (and you will find that most, if not all, of your clients will be happy to have a real conversation that has nothing to do with business), you will be well on your way to building real relationships.

Participate In More Than Just Projects

Another way to build a relationship with a client that goes beyond the project is to participate in their events. If the client runs a non-profit organization, they might have fundraisers or similar events that offer you an opportunity to support their cause and nurture the relationship. Go to these events and participate. As a bonus, you will also be helping a worthwhile cause.

Not all of your clients will have fundraising events, but they might invite you to holiday parties and other gatherings. Take advantage of these opportunities to interact with your clients outside of a normal business setting. It will go a long way to reinforcing those real relationships that you are trying to create and show that you are more than just another vendor.

Similarly, consider inviting clients to some of your events to show that you view them as more than just a source of business. When they arrive, greet them warmly and enjoy their company, leaving business talk for another day.

Help Them With Services That You Do Not Provide

Clients may hire you to design and develop a Web presence for them, but in the course of the project you will often discover that they need other services that you do not provide. By listening to their needs, you might learn that they have issues with their payroll company or their accountants or some other aspect of their business.

Look to your own business and the vendors you use. There may be a service or company that you have had success with that you could recommend. Also look to your other clients to see whether they offer services that fit. If appropriate, set up a lunch meeting between you, the client with the need and the client that might be able to fill that need. Not only will you be taking two clients out for lunch, you will hopefully be helping them both by making a valuable connection between the two companies.

When a client can say, “I hired this company to design our website and they ended up helping us revamp our entire payroll system!” you position yourself as much more than just their “Web team” — you show that you are a valued business resource and a trusted advisor.

Pick Up The Phone

Good communication is key to any relationship. Still, judging from the number of clients I speak with who are unhappy with their current Web team — not because they do a poor job, but because they are unresponsive — quality communication is not always a given.

Regularly updating your clients by email is important, but also pick up the phone every now and then, so that you become more than just that distant person behind those electronic updates. By hearing your voice, clients will feel more connected to you and the project. It also shows them that you value them enough to take the time to make a personal call, and it gives you a chance to talk about something other than business.

Regular phone calls allow you to have real conversations with clients, communicating at a personal level that email and other electronic updates do not allow for. (Image: opensourceway)

Face The Bad Times Head On

Have you ever had to share bad news with a client, but rather than pick up the phone to discuss the issue, you waited and sent an email at 5:15 pm on a Friday? By doing this, you may have bought yourself a few more days before having to face the client’s worried questions, but you also damage the relationship by hiding behind an email. It also means that the client will read the bad news first thing on Monday morning; definitely not a good start to their week, and definitely not the way to treat a valued relationship.

Here’s a secret: clients do not expect you to be perfect. They do, however, expect you to be honest. When something goes wrong, let them know quickly so that they are not blindsided by the issue later on. And never deliver bad news by email. Picking up the phone to discuss the news lets you reassure the client and answer any questions they may have. An after-hours email certainly won’t do that for them.

If the matter is handled correctly, the client will not remember that something went wrong. They will remember that you were honest and kept them apprised of the state of the project, even when it did not go according to plan.

Be Thankful And Show Appreciation

When was the last time you thanked a client for working with you? How did you do it? Did you send a basket of cookies or chocolate with a generic “thank you” message, or did you do something more personal?

Too often, we fail to even thank our clients for their business. We are so keen to finish a project and move on to the next one that we forget to properly show our appreciation.

While a basket of sweets and a generic message is better than nothing, consider sending a personal, handwritten thank-you note.

Handwritten letters have become all but extinct these days. With the rise of electronic communication such as email, social networks and text messaging, so few people take the time and effort to actually write a letter. The gesture of a personal letter will delight and surprise your client, not only because you have thanked them, but because the way you did so was personal, memorable and the perfect cap to a successful project.

A thankful, personal handwritten card is a great way to cap off a successful project. (Image: irrezolut)

You might like the following posts

• Good communication is the engine of success (0)
• Why writing Project Proposals is a bad idea? (0)
• How to promote your website content (0)

Allow me to elaborate. For most creatives, the most genuine and innovative ideas can often come without provocation. Which is unfortunate, because that tends to relegate these ideas to one of two categories. The personal project category that we get to whenever we find the time to break away from our work plates to snack on something different. Or to the professional project pool where we wait on that client who will allow us the freedom to incorporate this idea into their project. At other times, the ideas we have tend to be in response to the client, their business or something they have laid down — some sort of foundation — for us to build upon. These ideas are somewhat prompted.

Don’t just wait for the aces! Image by fitzsean

Now this is not to say that the prompted ideas are any less potent or powerful than the ones that we arrived at alone, only that the ones we get to by ourselves tend to be more imaginative and exciting in our eyes as those are the ones we feel unencumbered by the clients rules or specs. Which also means that they are the ones that we get to work less on due to the fact that we have to pay the bills, and in most cases, that means some kind of compromise on the part of the creative mind. We can say that we think outside the box on every project, but we have to admit that when a client comes to us, they have one or two ideas in the bucket ready and those specs can be considered somewhat of a box that we must work in.

That Is Just How Business Works

Now I know that there are some who are scratching their heads, knowing that this is just the way how business works, and they are confused at to what exactly we are asking them to consider. And yes, we understand that this is the standard way by which this game is played. Businesses have needs — they turn to other experts or specialists to have these needs met. They explain exactly what it is they are looking for, and the experts comply, delivering the experience that hopefully surpasses the client’s expectations. But what if we could change the standard rules of gameplay here on a much wider scale, affording this much freer approach to any designer or developer who wished to truly work unhindered.

Think outside the box! Image by west.m

Just a quick note: this article is not trying to say that working with all clients is a dull, innovation adjacent venture, or even trying to say that you will never have to work under these more standard rules of gameplay. But we usually have ideas of our own — ideas that we would love to see through without having to compromise or consult with a client or anyone else for that matter to approve what we are doing.

Think of it like the difference in a movie director working independently on a film rather than working for a major studio. They have much more freedom to make the film as they see fit, without any interference from above. For a while this was an approach that not many designers or developers have thought to not be feasible, but that is all changing.

Thanks, by and large, to the avenues being created by and granted access to by the Web.

The Game Changer

Before now, and in some ways still, we have always had to take our ideas to someone else in order to help us make them happen. We had to reach beyond ourselves to find those with the means and know-hows to reach further than we had access in order to get our idea out to the masses and have it connect with the audience. Essentially, we had to sell our idea to someone else in order to get distribution and manufacturing. However, the Web is granting creatives the chances to write their own opportunities, and make things happen for themselves, without having to depend on someone else.

Understanding that the term “sellout” tends to carry negative connotations, but what I mean is that we have to pitch the idea and someone has to buy in order for it to happen. When they buy, that tends to put them in the controlling seat. They hold the final say over the outcome of the project, or even where the project ends up. For some creatives, that compromise alone can take a lot of the fun and excitement out of the equation. But without those buyers, the project would tend to remain an unrealized effort. So there has been an underlying coercion for creatives to play the game and compromise their ideas when necessary in order to connect with the masses.

Plan your game – several moves ahead. Image by DoubleM2

Enter the Web, and services like Kickstarter, communities like YouTube and Vimeo, and suddenly the middle men that we needed to make our innovative ideas a reality, are not as much of a necessity as they once were. There is a great article by Ryan Carson that highlighted two examples of just how those in creative fields who are no longer waiting for opportunity to knock, instead create those opportunities for themselves. And in these cases, what remains important is that they remain the ones calling the shots.

Now I know there are those who think that this is approach is a complete waste of time. However, already today there are creatives who are just as equally excited about this evolved approach which allows them to completely take the reigns of their creative projects. So below we have taken a look at both the benefits offered and challenges posed by this new gameplay structure to help better see what exactly this approach means and entails.

The Benefits

First, we are going to look at the pros to taking charge of our creations and marching forward with them on our own as the masters of our own destiny. If you are one of those who is on the fence about this whole issue, or even if you are standing firmly against it, perhaps this section will have you rethinking things and getting you to come down on the side for it.

Shot-Caller

This has already been mentioned in the article; however, given its weight, it deserves a deeper examination of just what makes it so important. For most of us in the design and development fields, we have had to work with a client whose lack of understanding of the field can negatively impact the resulting project once their uncompromising input has been implemented. This can hugely effect our resulting takeaway and perspective with which we begin to view our chosen fields. Especially, if we find project after project that comes with compromise after compromise. This can effectively end up sapping our excitement and stifling our creative energy.

You’re your own boss and choose your own target. Image by HikingArtist.com

Another side effect these compromises can have is that we end up having to lose some truly innovative element of the project because of the client’s wishes, and our work can somewhat reflect a staleness on our parts as a result. When users see the final design and interact with it, they only see the compromised end result. They do not see the processes or the decisions and conditions that ultimately led to a creation that could essentially be much less than its potential. And it is this end result that is looked upon as the limits of our abilities. Client’s input is useful and necessary, but sometimes it’s not exactly what is best for our users. And yes, design is not art, but a medium for delivering messages across, but as designers we are often quite restricted by the decisions made for us, not with us.

But when we are the one who is calling all of the shots, our creative energy can flow freely, and our imaginations are subject to no one’s approval or standards. And there are those who would say that using a service like Kickstarter, where you outline a project and potential investors commit to contributions to fund your creative venture, does not put you in the driver’s seat per se, as you are still having to “sell” your idea. However, the big difference is that the sponsors and investors you get via Kickstarter do not expect to be able to provide some kind of creative input. You are the one in control.

This also means that you are the one in control of the timeline for when and if the project sees the light of day. This can be key, as there are times in the design and development fields when those elements are out of our hands and they end up derailing the project far from its potential or intended destinations. There are times when we work so hard on a project and have put so much into it until we have molded it to what we feel is perfection, only to turn it over and have it altered or never see the light of day. Consequently, there are times when we feel (for whatever reason) that a project just will not come together and should be abandoned, but we can’t drop it, so the end result is a sub-par product that nobody is actually happy with. In this field of play, those calls are all ours.

In Short:

• You have to deal with less compromises that sap your enthusiasm and excitement for both the project and your field.
• Your reputation does not suffer from compromises the client forced us to make.
• You do not have to worry about outside interference, our imagination is not subject to approval.
• Your project outcome is completely in your hands, and your hands alone.

Time and Money Saver

It may seem like somewhat of a contradiction that this approach could actually save time and money, but when you look at the first example of designer Frank Chimero and his design book that he now can completely finance via Kickstarter, you can see how this approach can do just that. More often than not, in order to get a book published and distributed within what is commonly seen as the mainstream, you would first have to spend weeks, possibly months, writing and rewriting both the outline for the book and the book proposal (not to mention the numerous e-mails, phone calls and meetings with possible publishers). All of which is done without any guarantee of being published and distributed.

Frank Chimero’s project “The Shape of Design” on Kickstarter.

In the end, all of the time that is taken to write up these proposals and outlines for the books take away from the time we spend on billable work. And in some cases, the entire book or some parts of it must first be written before we are able to get any interest from publishers or distributors. So that time has to be accounted for as well. But by harnessing the Web and social media, we can now find the means to publish and distribute the book on our own — without consuming much time and often the costly process of seeking out and involving the proverbial middle men in the project. For instance, Smashing Magazine produces printed books independently, without the middle man, and so can you.

This is a big step forward, and helps to connect the potential investors directly to the creative individuals, without the compromised hands of the mainstream middle men getting into the project, which simply feels more conducive to innovation. Compromised decisions can end up hurting the project’s potential. This can also mean that we will end up with less forced input which can lead to time consuming revision after time consuming revision which could end up compromising the overall impact of the message. Which might further translate into lost sales. Therefore, we can see huge savings in both time and costs by opting for this new paradigm.

In Short:

• We can save a lot of time, which tends to equal money, in both the initial and final project stages via this route.
• Taps potential investors directly into the source of ideas, without any agendas or middle men getting in the way.

Smoother Sailing in the Client Pool

Now, one possible benefit that we could see spring forth from this approach is the higher chances of landing dream clients. This may seem a bit far fetched, but if there were more designers and developers writing their own opportunities and launching their own projects then that is going to create interest in the client pool, right? Essentially, going the route, you can effectively choose between working on a client’s project or creating your own which you could put in your portfolio or even gain some exposure with and consequently connect with some potential clients.

Besides, since you are engaging your heart and soul into your project, you are more likely to produce a remarkable product — a product that will help you gain new insights, learn new creative fields and leave a mark in the design community. You can also create a well-respected name for yourself. And it’s certainly worth trying.

Profit-Sharing

One of the biggest problems that anyone working in any creative field faces, is the undervaluing of their time and talents. This can come either in the guise of those who simply do not see the value of what we do, or in the form of those who capitalize on our creativity without having contributed to the creative process in any way. Whatever form it may take, it means that someone is profiting off of your creativity.

Now, there are cases when there is a service attached to it that we could not handle ourselves. Back in the day, distribution was one of the main incentives that creative persons had to aligning themselves with this model in which they create the product, and do not get to see the majority of the profits from the project. Designers and developers have been signing on with company that provided them with the space and tools they need to do the work for years because of the sheer cost it saves them. Only to sacrifice shares of the profits from their work, not to mention the ability to do the work that they necessarily want the way they want it. But again, this is not the only paradigm on the market anymore.

You want to organize a design conference and sell tickets for it? There are services for you. You’d like to build up a shop from ground up? Again, there are tools for you. You don’t have to rely on anybody, but instead you can just put together everything you need and leverage the potential of social media to back up your projects.

Natasha Westcoat creates live online paintings. She saves herself the percentages that galleries, art dealers and online intermediaries, might charge if she sold the work through them.

With no middle men to have to share the profits with, this new approach can also allow us to get the bulk of the revenues generated from the projects that we have created. In the example provided in Ryan’s article, Natasha Westcoat’s live online paintings, not only does she save herself the time and effort of seeking a gallery show to find buyers, she saves herself the percentages that galleries, art dealers and online intermediaries, might charge if she sold the work through them. Here, she controls the profits. So it is exciting to see that the old profit share piggyback model is not the only path in which designers and developers find themselves in these days given the reach and access afforded to them by the Web.

In Short:

• With this new model, the person who is generating and creating the idea is the one who will reap the majority of the rewards from their work, as it should be.
• No longer do we have to share the majority of our profits with those who offer us services that help spread the word — not create it.
• With the middle men gone, the revenues can be more evenly and fairly distributed.

The Challenges

Anyone who is seriously considering taking on the “independent” route, needs to understand that there might be some challenges in the road ahead. These are serious considerations that should be made before moving forward.

Weight of the World

Most of the time that we take on a project, there are going to be some elements of that cause us some bit of stress. Be it the timeline, those we are working with or compromises made. But we tend to be somewhat compartmentalized in the project and therefore our stress levels tend to be as well. If there is stress involved in the project, we can bet that we are only experiencing a fraction of that stress through the buffers provided by the numerous rungs in the ladder above us. Also, because we are usually stacked somewhere in a hierarchy, the instigators of the stress are somewhat abstracts to us. For example, if we are working with a big company, we tend to not have to interact with the client or public directly, it is done through a series of intermediaries. So when they are upset, we get hints of that, but not necessarily the brunt of it.

No matter where, the burden is the same. Image by Kristian Bjornard

This is not the case when we are stepping up as the masters of our projects. We have no buffers or barriers which allow us to compartmentalize any of it. We are baring the full weight of this world on our shoulders, and are not shielded from the reactions of the public. It all rests on us. Every cog in the process, from creation to marketing, from production to distribution is our responsibility. Either we have to handle it ourselves, or we have to find the right people to put into those roles to ensure that it all goes smoothly and according to plan. If it doesn’t, the blame will fall on you and your reputation — no one else’s. Also, we need to makke certain decisions that we don’t necessarily know much about: e.g. if you decide to print a book, what about fulfillment and support?

This can admittedly be a terrifying step to take, especially when you have never worked through all aspects of the project process before. If you are not strong in marketing, or have never actually overseen the production step by step, doing these tasks for the first time can seem overwhelming. And it is easy to see why many would rather play it safer instead of working on a more demanding and involved approach. For many of us, no benefit is enough to willingly accept the entire weight of the project on our shoulders.

In Short:

• If you pick the “independent” route, you are responsible for everything, and you alone will own each of the project’s successes and failures.
• No matter where your strengths are lacking, you have to find ways to fill those gaps and pick up that slack to ensure the project succeeds.
• You have no buffers to the reactions and fallouts from the project — you have to deal with it all directly.

Confidence Factor

Another consideration that must be understood is that you are not selling the idea alone, you are also promoting yourself. Which is where confidence comes into play pretty heavily. It is easy to have faith in an idea and be able to get others to sign on and ascribe to that idea through the confidence that you are reflecting in it. However, when you are the head of the pyramid, it is not just faith in the idea that all parties involved need, everybody needs to have faith in the main person behind it.

That faith in oneself is harder to project with enough confidence to necessarily have others clamoring at your heels wanting to throw in on the proverbial backing bandwagon. And given that many of us might not be used to having to promote ourselves and effectively market ourselves in order to make a project happen, this could be a necessary adjustment. It is one thing to effectively market ourselves into a job, where we are pitted against other individuals, but in this case, we are marketing ourselves against an entire, well, market. It is not just about the idea, but about our ability to make it real. Whereas now we are competing with what can be seen as more financially stable companies, not just the ideas they are pitching.

As part of a company, when we go forth with an idea, there is a reputation behind us, more than just our own. When we do it alone — not so much. So once again it is easy to understand how this could act as a deterrent. On the other side, it might as well be an area that not deters you, but vividly alerts you to something that you are going to need to work on before you move ahead.

In Short:

• It is not just the idea under scrutiny, but your ability to make it happen as well.
• You must be able to effectively position and market yourself and your project against the rest of the market.
• You do not have any other reputation backing the project other than your own.

No End in Sight

Finally, you must consider that if you are going to try and create your own opportunities and run with them, you will be running for a long, long time. When you are the one spearheading the entire project, and overseeing all facets of the process, there is no end of the line where you just get to hand it over and then move on to the next project. You have to stick with this project and ride it out for the entire reach and life of the project. No matter where it leads, you have signed on to following, and that could prove to be a very long haul indeed. Somewhere, that road could potentially keep going, always requiring some level of dedication, if not participation, on your part.

Can you picture the end? Image by N3T1O

This could effectively undo any of the time saved benefit that got you looking favorably at this idea in the first place. So you have to look reasonably at the long term time investments and consider how much time the project could require to completely determine if the project will be worthwhile to pursue. Keep in mind that the project will eventually endure beyond their initial projected commitments, althought the exact details depend on the project itself. And it would be better to realize this before beginning and getting others to commit, so that the project does not fall short of its potential because you actually underestimated your own project.

In Short:

• You may have to be willing to commit to it for however long the project survives to maintain its integrity.
• There is no point at which you should be expecting to be able to just cut and run from the project without seeing it through to the absolute end.

In the End

Doing things on your own is risky but worthwhile. There is certainly some merit to creating your own opportunities. The tools are available; the medium for connecting with friends, colleagues and like-minded people is available; and you can freely explore your creativity and skills using both of them. I honestly believe that this new culture we observe today might change the rules of the game and I anxiously wait to see what interesting new developments spring up as a result. Please share your opinion in the comments section below.

You might like the following posts

• Feedback is key to keeping clients happy (0)
• How freelancers design their prices? (0)
• Strategy or creativity: what do people really want? (0)

This is a tough task for developers, who may have plenty of back-end and front-end development experience but limited knowledge of design. This results in unsatisfied customers, frustrated users and failed projects.

So, we will cover the basics of user interface design for business Web applications. While one could apply many approaches, techniques and principles to UI design in general, our focus here will be on business Web applications.

Websites vs. Web Applications

Confusing Web applications and websites is easy, as is confusing user interface design and website design. But they are different both in essence and in so many other ways, which we’ll explore in this article.

A website is a collection of pages consisting mostly of static content, images and video, with limited interactive functionality (i.e. except for the contact form and search functionality). The primary role of a website is to inform. Some websites use content management systems to render dynamic content, but their nature is still informational.

CampaignMonitor is powerful email marketing software, while Jeff Sarimento’s website is intended to inform readers about his life and work.

Web applications, on the other hand, are dynamic, interactive systems that help businesses perform business critical tasks and that increase and measure their productivity. Thus, the primary role of a Web application is to perform a function that serves the user’s tasks and according to defined business rules.

Web applications require a higher level of involvement and knowledge of the system on the part of the user. They don’t just stumble upon the application, do their work and bounce off. They use it as a tool to perform critical business tasks in their daily work. In the end, they cannot easily discontinue using the application and switch to another if they don’t like how it’s working, as is the case with websites.

Different Types of Web Applications

Business applications range in type from invoicing for freelancers to content management systems to document management systems to banking and financial systems.

We can distinguish between open and closed applications. Open systems are online applications that are easily accessible to anyone who opens an account. Users can access such applications via the Web and can open an account for free or by paying a fee. Closed systems (or line-of-business applications) are usually not accessible outside the company that uses it, and they can be considered “offline” applications (though many systems expose their functionality to business partners via either services or specialized interfaces). Such systems usually run on the company’s local network and are available only to employees.

I don’t know who coined it, but one term I like especially is weblication, which describes what a Web application is in general. This doesn’t mean, though that a Web application is a half-website half-application hybrid. It is far more complex that that.

First, Know Your Users

You’ve probably heard this a thousand times, and for good reason. A successful user interface focuses on users and their tasks. This is key, and too many developers have failed to create a good user experience. As Steve Krug said, “Developers like complexity; they enjoy discovering how something works.”

When identifying your users, keep in mind that clients are not users, and you are not a user. Although a client’s management team will usually be interested in the project and try to influence decisions, remember that they won’t be sitting in front of the computer several hours a day (unless the application is specifically for them).

How to Identify Users?

Identifying users can be done using several techniques, such as user interviews, business stakeholder interviews and the “shadowing” method of observation. Interviews can give you answers to questions about the users’ knowledge of the system and computers in general, while shadowing can yield more detailed information about how users perform tasks and what errors they make. The method is called shadowing because the observer is like a shadow, watching and noting the steps a user takes.

If you don’t have access to real users—either because you don’t have permission or are designing for open application—you can use personas, a tool to help identify users. Personas are a representation of real users, including their habits, goals and motivation. Because certain information about users is often identified through business analysis, you can make use of it to create personas. If you are not familiar with the tool, a comic by Brad Colbow will help.

Task analysis helps identify what tasks users perform in their jobs, how they do them, how long they take and what errors they make. Sometimes clients will be using an old version of the application that you are designing to replace. Make use of that old system and watch how users use it. Understanding their tasks and challenges will be easier that way.

Regardless of who your users are, one thing is certain: in most cases, you will have to consider both novices and experts. Novice users should be enabled to learn as fast as possible, while expert users should be enabled to perform their tasks extremely efficiently. This may mean creating separate interfaces. But in many cases you will be able to accommodate both types of users in the same interface through various techniques, such as progressive disclosure.

Such research is usually done by business analysts. But if no one else is responsible for it, you should do it. Once you have the necessary information, you can begin with design.

Design Process

You can follow one of any number of processes in designing the user interface. You might already have one. However, I would suggest that you consider the Agile approach. Why, you ask? Well, because for users (and clients), the user interface is the product. The bottom line is that they don’t care about your sketches or about fantastic back ends or powerful servers. All they want to see is the user interface.

So, how does Agile help? It helps through its key principle: the iterative approach. Each iteration consists of all of the phases defined by your process. This means that at the end of the first iteration, you will have a product that can be tested, a prototype.

Sketching

Sketching is a powerful way to explore ideas. The goal is to arrive at the solution by sketching out different concepts. Most sketches will be thrown out, but that is okay. As Bill Buxton says in his “Sketching User Experience” book, sketches are fast to create and easy to dispose of, which is why they are so powerful.

Are sketches the same as wireframes? Well, the differences can be blurry, but I would say no. Wireframes don’t capture rough ideas but rather develop them. Read a fantastic discussion on IxDA: Sketching Before the Wireframes.

Once you get the “right” sketches, or at least the ones that you think are right, you can create more detailed wireframes or go straight to creating interactive prototypes.

Sketch by Jason Robb.

Interesting reading on sketching and wireframing:

• Tools for Sketching User Experiences
• 20 Steps to Better Wireframing

Prototyping

The next step in the process is to create prototypes that will simulate the real application. A prototype can contain one or more features (or all of them), but it actually does nothing. It merely simulates the behavior of a real application, and users will feel that they are actually doing something. Prototypes may contain some functionality if needed (such as complex calculations).

Because the nature of a prototype done in HTML is temporary—its purpose, after all, is to test ideas—don’t bother with the code; just make it work with minimal bugs. You will throw it away anyway. You can also use specialized prototyping software such as Axure. Some people even prototype in PowerPoint.

An Axure interactive prototype for an e-commerce website, by e-maujean.

Further reading and tools for prototyping:

• 5 Useful Online Tools for Web Design Planning and Prototyping
• A Practitioner’s Guide to Prototyping: A book from Rosenfeld Media
• 16 Design Tools for Prototyping and Wireframing

Testing

Prototypes are useless unless you test them. This is not rocket science. People like Jakob Nielsen and Steve Krug support so-called “discount usability testing,” which is cheap and fast and yields valuable insight into your design decisions. You will use this information as the basis of another iteration of sketching, prototyping and testing. Do this at least until major issues have been fixed. We all know that software projects are tight on time and budget, so to be more efficient, test early and test often.

One of the best resources for discount usability testing is a new book by Steve Krug, “Rocket Surgery Made Easy.” Pick up a copy and read it.

Snapshot of usability testing for Delicious, by (nz)dave.

Further reading:

• Why You Only Need to Test with 5 Users
• Usability Testing Demystified
• The Myth of Usability Testing

Design Principles

There are many design principles, but there doesn’t seem to be a general consensus on definitive ones. So, we’ll go through design principles more informally, leaving out strict definitions.

No One Likes Surprises

Probably the key factors in a good UI are consistency and familiarity. A user interface should be consistent across all parts of the application, from navigation to color to terminology. This is known as internal consistency. But a user interface should also be consistent within its context, such as the operating system or other applications in its group or family. A typical example is the applications in the Microsoft Office family. This is called external consistency.

A good approach to consistency is to define user interface guidelines for each project or for a group of projects. These should guide the decisions you make for all of the details. This will not only maintain consistency but also serve as documentation to help team members better understand your decisions.

Although a simple example, SprinklePenny achieves consistency and familiarity across the application.

Consistent user interfaces have a shorter learning curve, because users will recognize parts of the system and be able to fall back on prior experience. But familiarity is sometimes confused with consistency. Familiar user interfaces draw on concepts from the users’ previous experiences and use appropriate metaphors. Folders, for example, are a well-known metaphor for file organization, and they have replaced “directories,” which were used previously in command-line operating systems. In short, speak the language of your users.

A common belief among business owners is that a great user interface should look like a Microsoft Office product, especially Outlook. I won’t go into explaining how pointless this is. Rather, I will offer alternative advice: defend the user-centric approach, and explain why creating an application for employees, clients and partners (i.e. their users) is so important.

All the same, most businesses are unique, as are their work processes. For example, two businesses from the same branch could have significantly different processes, forcing you to go beyond what is familiar and start to innovate. This part of the design process can be very interesting, although you have to be careful in how far you go with innovation.

Further reading:

• Designing and Selecting Components for UIs
• Why Consistency Is Critical

Users Should Be Able to Be Efficient

Without a doubt, users should be able to be efficient when using business applications. This is what they are paid for, and this is what managers expects from the application. User interfaces should allow users to be efficient and should focus them on completing tasks in the easiest and fastest way. But this is not always the case. There is an opinion, or at least practice, among developers that says the user interface should be as complex as the back end system. No matter how ridiculous this sounds, the problem is real and might give you a headache. This is one reason why good communication and collaboration between developers is a must.

Users are efficient when they focus on a particular task. As mentioned, task analysis can help you identify tasks and determine how users perform them. If tasks are long, accelerate them by breaking them up into smaller units. You can also increase efficiency by providing keyboard support and shortcuts. Think how inefficient it is for a user to have to switch back and forth between mouse and keyboard. In some cases, you will be designing for users who are accustomed to working on command-line operating systems and the applications made for them. They will be keen to have keyboard support. One suggestion: when defining keyboard shortcuts, keep them consistent with those of common applications. For example, Ctrl + S should always be save, and so on.

Google Docs Spreadsheet enables users to be efficient by providing keyboard shortcuts and context menus, as well as by taking advantage of users’ familiarity with common desktop applications.

Efficiency can also be enhanced through personalization. Users who can personalize an environment will learn it faster and, more importantly, will be more confident using it. Personalization can be done in many ways: choosing widgets for the dashboard; defining shortcut options and favorites; changing the order of elements; etc.

Pay attention to accessibility. Although many assume that accessibility doesn’t matter in Web applications, it certainly does. Treat the application as if it were a public website.

A Web application also has to be efficient in the speed with which it processes information. So, consider heavy interactions that result from partial renderings and AJAX requests.

Help!

An interface should provide meaningful feedback that describes the state of the system to users. If an error occurs, users should be notified and informed of ways to recover. If an operation is in progress, users should be notified about the progress.

We can go even further and declare that user interfaces should prevent users from making errors. This principle, called forgiveness, can be followed with confirmation dialogs, undo options, forgiving formats and more. Forgiveness makes it safe to explore the interface, decreases the learning curve and increases overall satisfaction.

Because of the complexity of business Web applications, you would also need to provide a comprehensive help system. This can be done with inline help, a support database, a knowledge base and guided tours (which mix video, images and text).

Further reading:

• Forgiveness in UI design
• Handling User Error with Care: Getting Users Back on Track

Can’t Get No Satisfaction

Satisfaction is a subjective term that refers to how pleasant an interface is to use. Every design principle we have described here affects  satisfaction. And a few more principles are worth mentioning here.

Simplicity is a basic principle of UI design. The simpler a user interface, the easier it is to use. But keeping user interfaces for business applications simple is a challenge because the apps often have a lot of functionality. The key is to balance functionality and simplicity. Restraint is one of the most efficient ways to achieve this balance: i.e. finding the simplest way to solve a problem.

BuildWith.me has a simple and effective user interface, without sacrificing aesthetics.

Aesthetics, though subjective and somewhat arbitrary, play an important role in overall satisfaction. Users respond positively to pleasing user interfaces, sometimes even overlooking missing functionality. But you’re not creating a work of art. One of the best articles that explains aesthetics is In Defense of Eye Candy.

In the end, users will be spending a lot of time in front of a business application, and no matter how usable, consistent or forgiving the interface is, satisfaction will be critical in determining how good the user interface is.

Further reading:

• 7 Interface Design Techniques to Simplify and De-clutter Your Interfaces
• Restraint
• In Defense of Eye Candy

Other resources related to UI design:

• 8 Characteristics of Successful User Interfaces
• Principles of User Interface Design (Wikipedia)
• 10 Principles of the UI Design Masters
• 20 Websites to Help You Master User Interface Design

Essential Components Of Web Applications

Every Web application is unique, but many of them contain common features. Although the implementation of any one of these features will vary, let’s look at the basic concept of the three most common ones.

Web Forms

Forms in general are important to Web applications. But as Luke Wroblewski says in his Web Form Design book, “No one likes filing in forms.” That includes sign-up forms, including business applications with dozens of fields.

Minimize the frustration of filling in forms. Provide inline validation and good feedback. Use defaults when possible. Don’t forget about novice users. Use wizards to help them complete tasks faster, or use progressive disclosure to hide advanced (or infrequently used) features.

Master-Detail Views

This is the technique of showing data in two separate but related views. One view shows a list of items, while the other shows details of the selected item. Master-detail views can be implemented across multiple pages or on individual ones.

Dashboards

Many Web applications have dashboards. A dashboard is a view of the most important information needed to take action and make decisions. It is confined to a single page and is usually the starting point of an application. Dashboards are important because they enable users to access information and take action without having to dig through the application.

Xero shows a user’s most important financial information (e.g. bank accounts and credit cards) in its dashboard, making it easy for users to quickly see the status of their financial data.

Heavy Use of Tables

Because Web applications typically deal with large quantities of data that are easily accessible and sortable, tables are unavoidable. But this is not a bad thing. In fact, tables were made for this purpose. Don’t confuse this with table-less layouts. Effective tables are easily readable. So, in most cases you will need a meaningful header, an optimal number of columns, pagination, alternating row colors, proper column alignment, sorting and filtering capabilities and much more.

Tables can also be interactive, meaning they can generate additional info and even modify the data they contain.

Pulseapp

Reports

Most businesses work with some kind of reports. Printed reports are usually required, so pay attention to the design of reports. Printed (or exported) reports are usually simplified versions of online reports, optimized for monochrome printers.

FreshBooks has printing, PDF exporting and “Send to email” features. It also shows a print preview.

Don’t Forget UI Design Patterns

We’re so used to hearing and talking about UI design patterns that we sometimes forget about them! UI design patterns are helpful for designing user interfaces. The important thing is to consider them early on in the design process, ideally at the sketching stage. Because patterns often solve common problems, the right pattern can facilitate the user’s familiarity with an interface and increase the speed at which they learn it.

This screenshot is from the article 12 Standard Screen Patterns, which goes over the most common screen patterns.

Further reading:

• Designing Web Interfaces: Principles and Patterns for Rich Interactions
  A fantastic book that covers more that 70 Web design patterns.

Case Study: Online Banking Application

To take an example from the real world, I will briefly explain the process of designing the user interface for one small bank’s online banking system. The team I worked with was hired to improve the system. The main reason for the redesign was that, according to management, “users complained and many stopped using it.”

After only a couple of hours spent with actual users, the main problems were uncovered. Information about accounts and credit cards was buried in poor navigation. Understanding how much money users were spending and the state of their accounts and credit cards was also hard. The application, however, was obvious to bank employees; they were familiar with the terminology and could interpreted the numbers in the application perfectly well.

Give the tight deadlines, we followed the process I have described, and we partially succeeded. Despite the short time, the major problems were so obvious that we clearly understood our main task and how to go about it. We created a dashboard that provided clear information on the state of all accounts and credit cards. With this new navigation, finding information became easier. Reports were easier to understand, and several new features were implemented.

Although we made only a few changes, the changes affected critical user tasks and resulted in significant improvements to the overall experience.

Final Thoughts

Designing user interfaces for business Web applications is a challenging job that is full of compromises. You have to make compromises between client and user needs; business requirements and users; novice and expert users; functionality and simplicity. It requires a solid understanding of users and their tasks, as well as of UI design principles and patterns. Despite the difficulties, the job is interesting, and you learn many new things on each project that influence the way you design websites.

While this article reflects some well-known concepts and things I have learned from designing business applications over the years, I look forward to hearing your experiences and stories.

You might like the following posts

• 7 points how to build responsive website (0)
• What Bach has to do with modern Web challenges (0)
• 10 UI design patterns you should be paying attention to (0)

In short, design patterns are solutions to recurring problems. By extension, UI design patterns are solutions to common user interface problems. This article goes over 10 interesting UI design patterns that you can use in your own projects. In fact, you may already be using them now without knowing it.

1. Lazy Registration

To fully appreciate the problem of registration, we should consider an annoyance that has led to the opinion that sign-up forms must die. This certainly doesn’t mean they should be completely omitted but rather that they should be only one part in the process of introducing users to a system, and should come late in the process. Such an approach is called “lazy registration” and relates to the account registration pattern.

When would you actually use lazy registration? Although it may seem like lazy registration could be used all the time, some circumstances are ideal:

• When users are allowed to try out your website product or service before making a decision (which not every website permits, though).
• When it is important to familiarize users with your system before they sign up, which can be a crucial step in their process of deciding whether to register.

Amazon lets you browse and add products to your shopping cart before signing up.

This pattern is meant to allow users to use your system and take action before registering. If satisfied with your service so far, users will regard this quick act of registration as just another small step in the entire process and not an obligation. The shopping cart is a good example of this pattern: users can browse and choose products and only have to register when they proceed to check out.

Picnik is another good example of lazy registration. Users can use all of the service’s functions to edit their photos online. They are asked to register only before saving their work.

Recommended reading

• Sign-up forms must die: here’s how we killed ours!
  An interesting article on how 90percentofeverything implemented lazy registration.

2. Progressive Disclosure

This pattern is used to show only the information or features relevant to the user’s current activity and to delay other information until it is requested. By hiding more complex or infrequently used features, you de-clutter the user interface; by revealing them only as they are needed, you help users perform a complex, multi-step process on a single page.

The goal is to show only essential information in the first step and then invite users to take the next step. When the user completes a step, you reveal the information in the next step, keeping all previous steps visible. By keeping previous steps visible, you allow users to change what they have entered. And the data they input in the current step can affect the behavior of the next step.

Digg uses progressive disclosure in its comments section. Users can read a comment and, by clicking on the “Replies” link, see all of the replies to that comment. The link also tells you how many replies will be shown.

Once the replies are revealed, users can not only read them but also reply to and rate them. Comments below the viewing threshold are collapsed by default and are revealed by clicking “Show.”

Examples of progressive disclosure are everywhere. A simple “Show more” link that reveals more information is one of the simplest forms of progressive disclosure. But it can be used for more complex cases, such as filling out Web forms. Try to open an account on Picnik (which we mentioned in the lazy registration pattern) to see how progressive disclosure can be used at a more complex level.

YouTube uses progressive disclosure when users customize the look of the video player. When a user clicks the icon, customization features open up below.

Recommended reading

• Progressive disclosure
  Excellent insight from Jakob Nielsen.
• Read more… about progressive disclosure
  Good explanation of progressive disclosure, with several examples.

3. Forgiving Format

Search functions can offer users various options and sometimes be complex. When searching weather and street maps, for example, users can use such criteria as city name, street name and zip code. To indicate to users that they can use several criteria, interfaces tend to show multiple options and become overly complex. Instead of adding clutter to the interface, use the forgiving format pattern, which lets users enter data in various formats and leaves it to the system to parse the data.

Yahoo weather search allows users to search by city or zip code.

To convey which formats are supported, give users hints on how to search, whether by listing all available formats, as in the example above, or by providing a link to a help page, as in the example below.

Google Maps allows users to search by city, street, zip code and even latitudinal and longitudinal values.

The forgiving format pattern significantly simplifies user interfaces. However, it may require a lot of work from back-end developers. The more options users have, the more difficult parsing becomes.

4. Clear Primary Actions

Simple Web forms often allow just one action (“Submit,” “Save” or “Send”). The user knows exactly what their final action in filling out the form will be, because they have only one option. However, users may sometimes be faced with several options and have to distinguish between primary and secondary actions.

Clearleft makes a distinction between primary and secondary actions with color.

What are primary and secondary actions? Primary actions lead to the completion of a form; for example, clicking “Save” or “Send.” Secondary actions usually do not lead to a form’s completion; these include clicking “Cancel.” There are exceptions, though. Which are the primary and secondary actions when you see “Save,” “Save and continue” and “Publish” buttons all in a row? When users have several options, highlighting primary actions and de-emphasizing secondary actions are good practice.

This can be done in two ways:

• By giving primary and secondary actions different colors; for example, giving primary actions a vibrant color and secondary actions a shade of gray.
• By styling primary actions as buttons and secondary actions as links.

Flickr highlights the primary action by putting the secondary action in a small label below.

Both ways clearly distinguish between primary and secondary actions, relieving the user from having to think about which option to choose in order to complete their task.

Recommended reading

• Web Form Design: Filling in the Blanks
  Probably one of the best resources for designing Web forms.

5. Breadcrumbs

Breadcrumbs show the path from the front page of the site to the current location of th users in the website’s page hierarchy. They are a form of secondary navigation that helps users understand the hierarchy and structure of the website. Breadcrumbs start with the home page and end with the page currently being viewed. Each label in a breadcrumb trail is linked to its respective page or section in the hierarchy, the exception being the one for the current page, which should just be an unlinked label.

Apple’s breadcrumbs are graphic elements that fit the overall design of the website well.

Breadcrumbs take up minimal space and are usually positioned at the top of the page, below the header and above the content. They would serve no purpose on the home page and so should not appear there. Breadcrumbs can appear simply as text links separated by the “>” sign, or they can be graphic elements, like the breadcrumbs on Apple’s website:

Recommended reading

• Breadcrumb Navigation Increasingly Useful
  Jakob Nielsen explains breadcrumbs in depth.
• Simple scalable CSS-based breadcrumbs
  A very good simple tutorial on how to create breadcrumbs.

6. Account Registration

The definition of this pattern varies from place to place, but we can say that it solves three somewhat related problems:

• Certain content is accessible only to registered users,
• Users need to re-enter their personal data often,
• Users need to be able to access personalized content on a system.

The solution to allowing users to access protected content is to have them register for an account on the system and store their personal data, to be reused later. The benefits are numerous. For instance, users can be shown personalized offers, as seen on Amazon. Users could also perform tasks more efficiently if the system reused the information submitted during registration. Storing shipping details is just one example. Because filling out forms is not a favorite task of users, requiring only necessary information is important. Another important thing is to clearly highlight all of the benefits users will receive, so that they become more willing to register.

Vimeo has a simple but attractive sign-up form.

Tumblr requires only minimal information of the user to sign up.

Recommended reading

• Web Form Design: Filling in the Blanks
  A must-read book on creating usable Web forms in general.
• User Membership With PHP
  A simple implementation of sign-up and log-in forms.
• Accessible HTML/XHTML Forms: Beginner Level
  How to create an accessible Web form.

7. Required Field Marker

Making the user interface obvious is essential. This applies just as much to Web forms. One of the best ways to make the interface of Web forms obvious is by marking required fields. The purpose of these markers is to alert the user to information they will need to provide. This way, users won’t feel they have to fill out the entire form to avoid seeing an error message.

Ideally, you should remove all optional fields and let the user type only the information that is necessary for the interaction. A rule of thumbs: the simpler and shorter a web form is, the better is the user experience. Another interesting idea is to make it possible for users to remove all optional fields – you can find more about how to implement it in practice (as well as a ready-to-be-used-script) in Andy Clarke’s article Trimming Form Fields.

Haveamint.com puts “Required” markers next to field labels on its contact form.

You can position required field markers in one of two places:

• Next to labels, allowing users to scan the form quickly,
• Next to or inside input fields; if the fields are the same width, users will be able to scan the form quickly.

When deciding on which fields to require, take into account the total number of fields in the form. If the form is complex and most of its fields are required, the user will likely see it as unnecessary clutter.

8. Steps Left

This pattern is widely implemented when users have to fill in data in multiple steps. The purpose of this pattern is to:

• Guide users,
• Explain the scope of the process by clearly stating how many steps are needed to complete it,
• Show the user’s current position in the process by visually highlighting the current step.

StatementStacker clearly shows the number of steps and highlights the current step.

Steps are usually displayed horizontally and connected by arrows, showing the order in which the steps will be performed. Also, each step is usually marked with a large number and very concise description of what users should do in that step. The important thing here is consistency: a progress indicator should always appear in the same position across the pages and show users where they are at.

This pattern is usually combined with the well-known “wizard” pattern to create a multi-step process, such as for registration or a shopping cart.

Delicious has a good-looking progress indicator that clearly defines the purpose of each step. It also highlights the current step by displaying it in a different color.

9. Subscription plans

This pattern is suitable if the website offers one product or service that comes in different plans and requires regular payments, usually monthly payments. Each plan should be descriptive and provide the following information:

• Name of the plan, such as “Basic” or “Professional,”
• Price of the subscription plan and how long it is valid for,
• List of features (the cheapest plan usually has the fewest features),
• Sign-up button.

Wufoo clearly shows its subscription plans, the prices and the differences between them.

Always show your plans in order. Plans are usually ordered from most to least expensive. You can highlight the plan you want users to buy by using a different color or size.

Crazyegg’s subscription table draws attention to the “Basic” plan.

10. Hover Controls

When a user interface has many elements in which the user can perform actions, the page can become cluttered and hard to scan. This is especially common in the administration section of Web applications, where users can change table data. A good way to handle this is to hide each element and reveal it when the user hovers over that area.

An “Edit” link is revealed as the user hovers over each section of their Facebook profile page.

Hiding controls and revealing them on hover significantly de-clutters the user interface without taking away functionality.

Twitter reveals “Reply” and “Favorite” links when the user hovers over each tweet.

You might like the following posts

• 7 points how to build responsive website (0)
• What Bach has to do with modern Web challenges (0)
• How to design User Interfaces for Business Web Applications (0)

Ever write a blog post, hit publish, and feel like all you hear are crickets? If your content isn’t remarkable, it’s not shareable. Search is social. So whether or not your content gets shared makes a huge difference in your blog’s traffic and lead generation.

People share content for a variety of reasons. A recent study from the NY Times’ Consumer Insight Group (CIG) looked into why people share content online. Among the variety of motivations was a desire to define ourselves to others with the content we share as well as a desire to grow and nurture relationships by sharing entertaining or interesting content. Is your content interesting and entertaining enough for people to want to associate their personal brands with it? If not, you better re-think your approach and consider these 7 tips.

7 Reasons No One Shares Your Blog Posts

1. Your Headline Sucks

Your headline is the most important part of your post because it’s your first impression. It’s what people see in big, bold text when your blog post shows up in search engine results.
It’s also what they see when your content is tweeted and shared on Facebook, LinkedIn, and Google+. So without a great headline, few people will get that initial intrigue that makes them want to click through and check out your post. Write great headlines that are descriptive but also spark a sense of urgency. And don’t be afraid to try a funny or snarky one, too. Grab their attention with the headline, and hook them with the great content behind it.

2. Your Timing Is Off

Blog posts published in the morning generate the greatest number of page views, especially when targeting women. Do you know your audience, and do you know when to deliver your content in order to get the best results? Get the insight you need to create more shareable content. Survey your audience and ask when they prefer to read your content, or dig into your audience analytics to get the information you need. And remember: planning ahead is key. Creating and maintaining a blog editorial calendar will prepare you to have content to publish each morning, versus constantly playing catch up and publishing posts in the late afternoon after you wrote them that day.

3. You Don’t Have “Regulars”

You want your blog to be like Cheers — where everyone knows your name. You want your posts to spark a conversation and to ignite an interest that keeps people coming back for more.

A great way to develop a relationship with your audience is by being attentive to blog comments. Spark a conversation on your blog by discussing recent industry events or asking for your readers’ perspectives on new research. It’s all about the writing style and balancing your point of view as the expert opinion and being a participant in the conversation. To get the comments rolling, make the content useful and thought provoking, and “reward” your commenters by responding. If you generate a group of regulars who always come back to read your blog content, chances are good they’re also regularly sharing and evangelizing your content, too.

4. You Write About Yourself

Your company is interesting to you. It’s also interesting to your mom. So she might subscribe to a blog full of company party photos, product feature updates, and long essays written from your point of view. But is your mom your target audience?

When readers are visiting your blog for the first time, they don’t care about you yet. Make them care by addressing the topics they want to learn and talk about. How-to articles and lists of tips and resources are good formats to begin with.

5. Your Posts Are All the Same

Ever listen to a band and every one of their songs sounds the same? Boring! Change up the format of the content with charts, infographics, videos, photos, and other visuals to keep people coming back for more. If you look at Social Media Examiner‘s posts, you’ll see how they break up the text with different visuals, headings, and bold text. Break up your content to make it easier to consume so you get more people to read it and more people to share it.

6. You Ramble

If there isn’t a clear takeaway from your content, people don’t have a key point or reason to share it with their friends and followers. Long paragraphs full of allegory, symbolism, adjectives, and adverbs are best saved for English class. Cut to the chase, and make the lessons from your content loud and clear.

7. You Make it Difficult to Share

It’s surprising to me how many blogs don’t have social sharing buttons. It’s easy to get caught up in selecting the perfect design or theme and then forget about the obvious, functional elements likes social media buttons or “subscribe by email” widgets. Have at least a simple design that looks clean, but first get the basic features on your blog and get a content plan in line. Then go crazy with design.

You might like the following posts

• How to promote your website content (0)
• Lessons and examples of how to create a Viral Launch Page (1)
• Why writing Project Proposals is a bad idea? (0)

You’re an inbound marketing convert. You believe in the importance of creating relevant and interesting content for your prospects to consume. You’ve been reading up on search engine optimization, and have started applying the best practices to your website. You even opened up a company Facebook page and Twitter account, though your venture into Google+ is still tenuous. All of that has been pretty easy to integrate into your day to day marketing responsibilities, but there’s one thing you really want to make more time for: blogging.

There’s just one problem. Writing blog content on a regular basis requires time that you just don’t have. To get the time, you’ll have to lobby your boss for more resources, and that means convincing your boss that blogging is actually worth your time, your effort, and his money. So how do you go about doing that? This blog post (how meta is that?) will give you the facts, research, and know-how to explain the benefits of business blogging to a tentative boss and debunk many of the common myths inbound marketing professionals are frequently faced with during these difficult conversations.

Is blogging really effective? What results will we see?

Nothing like some cold, hard data to prove a point. How does this sound?

• The average company that blogs generates 55% more website visitors, 97% more inbound links, and 434% more indexed pages.
• HubSpot’s 2011 ROI Study shows that 69% of businesses attribute their lead generation success to blogging.
• 57% of businesses have acquired a customer through their company blog.
• The Nielsen Company shows that US internet users spend 3X more time on blogs and social networks than in email.
• Inbound marketing, of which blogging is a crucial part, costs 62% less per lead than outbound marketing.

Bet you got your boss’ attention now, eh?

But won’t blogging open us up for negative comments?

Whenever you put anything out on the internet, you open yourself up to negative comments. You can’t let that stop you from creating a meaningful internet presence. That being said, blog comments are not only far less frequent than they were even just a few years ago, but the importance with which they are regarded has also decreased. If you’re operating your business on the up and up and your content is honest and genuine, you have little to fear in terms of commenter backlash.

And just as with any reputation management issue you’re confronted with in business, if you face it head on and operate as a compassionate human being instead of a faceless corporation, you have the opportunity to turn those naysayers into your biggest fans.

This sounds like a huge time investment. Who is going to write it all?

To determine how much time you’ll need to dedicate to your blog, you have to take a look at the competition. Are your organic competitors blogging twice a week? Multiple times a day? Not at all? To outperform them with your inbound marketing, you need to also outperform them with blogging.

Once you’ve determined the frequency, you’ll know how much support you need. Can you handle this yourself? Or do you need a new hire dedicated exclusively to blogging? Many organizations, including HubSpot, require specific employees to contribute a minimum number of blog posts a month. This solution helps feed your blog with quality content, provides more than one voice for a valuable mix of perspectives, and doesn’t put undue burden on any one member of your organization.

Does anyone here even know how to blog?

Blogging doesn’t come naturally to everyone, but the barrier to entry is very low. Think of it this way. If you’re in sales, you can answer questions about your products and services, right? If you’re in marketing, you can write copy that positions your company correctly, right? If you’re a C-level exec, you sure didn’t get to that position without knowing a thing or two about your industry, right? You have the knowledge you need to blog, you just need to learn the best practices that make up a great blog post. Luckily, those best practices are not only simple, but we’ve already written them all down for you.

The best blogs aren’t long, complex, and full of stuffy language and industry jargon. They’re succinct, specific, and engaging. As long as your topic is helpful, you can write just like you talk — and your prospects will love it.

Will this help with our SEO and social media presence?

Yes, yes, yes. Not only is blogging one of the most important means of achieving SEO greatness, it will be extremely difficult to see consistent and meaningful SEO improvements without blogging. One of the most important ways a search engine knows to return your website in search results is based on the quality of your content and the frequency at which you publish it. Blogging is a simple, low-cost solution to this. Blogging also makes it far more likely that your content will be shared on social media networks and receive inbound links from other websites, two more crucial aspects that boost your SEO street cred.

Speaking of social media, you can (and should) add social media share and follow buttons to every blog post you write. Your blog content will not only help you get more followers on your social media networks, but your social media networks will help you get more blog readers. Blogging and social media are two peas in a pod; as your reach expands on one, so it does on the other.

You might like the following posts

• PAF (0)
• History of blogging (0)
• Feedback is key to keeping clients happy (0)