We’ve seen innovative ways in which designers and developers have used CSS to innovate upon its shortcomings. Here, you’ll find some of the best ways to use CSS for your website navigation. You’ll find a variety of techniques that truly showcase the capabilities of CSS.

In this article, you will find a collection of excellent navigation techniques that use the CSS to provide users with an impressive interface.

1. The Menu menu

This another great CSS menu Stu Nicholls that’s unique – hovering over a menu item reveals a submenu. If you want get started with this menu just simple view the source code. Demo in page.

2. Pure CSS hover menu

View Demo

In this CSS technique, you’ll learn to create a vertically-oriented CSS hover menu that reveals a submenu when a menu item is hovered on.

‘

3. Matte CSS Menu

View Demo

Matte is a simple CSS menu with rounded corners using two small images only from 13styles. It is maintained by David Appleyard who has lots of simple and advanced CSS-based menus.

4. CSS Blur Menu

View Demo

This CSS technique shows you a method from creating a menu that blurs sibling menu items when you hover over an item.

5. CSS Navigation with Glowing Icons

View Demo

This beautiful CSS menu technique can be created by following along this extensive step-by-step tutorial.

6. CSS Sliding Door using only 1 image

View Demo

This slick CSS menu is based on the Sliding Doors technique but only uses one image.

7. Navigation Matrix Reloaded

View Demo

This stylish navigation menu technique uses a CSS sprite.

‘

8. CSS Horizontal Menu

View Demo

Ian Main provides a great set of free CSS menus that are stylish and easy to use.

9. Woody CSS Menu

Woody is a pre-made CSS menu that’s ready to use and has been tested in IE6, IE 7, Firefox, Opera, Safari, Chrome. Demo in the page.

10. Advanced CSS Menu

Advanced CSS Menu was created by Nick La and uses an advanced (extraordinary) list menu utilizing the CSS position property. Demo in the page.

11. Simple Yellow Tabbed

This menu is from CSS Menu Generator which has more free high quality menus. Demo in the page.

12. Vimeo-Like Top Navigation

View Demo

This CSS-based navigation menu is based on the Vimeo primary menu.

13. Apple Like Colorful CSS Menu

Learn a technique for mimicking Apple’s image rollover CSS menu by following along this menu tutorial. Demo in page.

14. CSS Hoverbox

Inspired by the Hoverbox Image Gallery technique developed by Nathan Smith, CSS Hoverbox leans on the background-position CSS property to superimpose rollover images on top of neighboring menu items. Demo in page.

15. Big CSS Box

This is an experimental CSS menu that allows you to create a scaling menu that adjusts depending on the browser’s width. Demo in page.

16. Simple CSS-based drop-down menu

View Demo

This is a very basic CSS-based drop-down menu that’s excellent for trying to grok the technique involved in creating drop-down menu that doesn’t require client-side scripting.

17. Two Level Horizontal Navigation in CSS

View Demo

Veerle Pieters provides a CSS menu and tutorial created using text-indent CSS property.

18. Uberlink CSS List Menus

View Demo

This CSS navigation bar looks and behaves like an image-swapping menu.

19. CSS-Only Accordion Effect

View Demo

In this technique, you’ll witness a method for creating a CSS-based accordion menu.

20. Tabbed Navigation Using CSS

Here is another excellent method for creating a module tab interface based purely on CSS. Use the tabs in the page to learn about the instructions on how to implement this technique.

21. CSS Mini Tabs (the UN-tab, tab)

View Demo

This CSS menu on the popular web design agency SimpleBits shows a way for creating mini tabs. View the source code on the demo page to learn how it works (the code is inline and formatted well for readability for your convenience).

22. Drop-Down Menus, Horizontal Style

View Demo

This A List Apart CSS menu technique is for a fly-out submenu that appears on the right of the top-level menu, leveraging the position: absolute CSS property to move the submenu to the appropriate level.

23. List Into a Navigation Bar

View Demo

Roger Johansson of 456 Berea Street shows us the basic principles of turning an unordered list into a navigation bar – it’s a great starting point for beginners to learn about building a semantic HTML structure and then styling it with CSS.

24. CSS Tabs with Submenus

This CSS menu technique will allow you to create CSS tabs that have submenus for a two-level hierarchy. Demo in page.

25. CSS Block Navigation Menu

This CSS menu technique allows you to create a navigation menu that has item with descriptions. Demo in page.

26. XHTML & CSS Sprite Navigation

View Demo

This stylish CSS sprite menu technique has three states: idle, hover, and clicked.

27. XHTML CSS Tabbed Menu

View Demo

Learn how to create module tabs without the use of client-side scripting.

28. Cool, Simple, Horizontal CSS Menu

View Demo

Learn to create a straightforward technique for creating a CSS based menu.

29. CSS Menu with Descriptions

View Demo

This technique showcases a method for creating a menu that expands when hovered upon.

30. CSS Hover Button

View Demo

Create CSS button-style navigation menu by checking out this excellent tutorial.

Related content

• Innovative (and Experimental) CSS Examples and Techniques
• CSS Tip #1: Resetting Your Styles with CSS Reset
• Structural Naming Convention in CSS
• Six Questions: Eric Meyer on CSS3
• Related category: CSS, Web Design

About the Author

Kawsar Ali is a web designer, graphic designer, and wannabe photograper based in NY, U.S. He’s also the founder of Desizntech,a site to find tips about web design, Mac, PC and more. If you’d like to connect with him, you can follow him on Twitter or at his Personal Website.

“

(Via Six Revisions.)

The utilization of paper as a design element in a web design is one of the most popular design trends. By using scraps of paper, cardboard textures, notebooks and notepads, a designer is able to compose an interesting and elaborate design. You’ll see paper used in various kinds of design components – in backgrounds, navigation menus, content areas, and all sorts of other web page parts.

In this showcase, you’ll see some of the best web designs that involve the use of paper elements and textures – for your inspiration.

Peace River Excursion

Team Green

Diego Latorre

DK Publishing

The Chernobyl Nuclear Disaster

Church on the Rock

Dawghouse Design Studio

BlackWave Creative Branding and Design Services

L’Antidote

Gardening With Children

Revolution Driving Tuition

Pain is Good

kayintveen.com

Sprocket House

vSplash

Eric’s Empire

Callum Rimmer

NotYourAverageJoe

Summer Day Camps MD

A Round Dorset Walk

HRNYC

Emarts

adf.lt

Narfstuff

Repair Jeans

PLEJ

Luc Espace

iPhone Development

Hillwood Residential

Simply Fired

Related content

• Using Paper Clips in a Web Design: Examples for Inspiration
• High-Resolution Grungy Paper Textures
• Cardboard Textures and Objects: High Resolution Pack
• 30 Creative Examples of Illustrations in Web Design
• Related category/categories: Design Showcase / Inspiration, Web Design

“

(Via Six Revisions.)

There are many services out on the web for online collaboration, but there’s no doubt that Google Docs is rapidly becoming one of the more popular brands. Google Docs is free, web based (i.e. cross platform), and quite simple to use. But that doesn’t mean it lacks features.

Whether you’re a regular user or have just been thinking about trying it out, here are the top 6 tips and tricks to help you get the most out of Google Docs.

1. Chatting in Google Docs

To get the most out of Google Docs, you’ve got to be able to communicate in real time and with more efficiency than simply writing notes to each other on the shared page. Google Docs takes care of this issue with a built in chat client that hides easily in the top right corner.

When sharing a presentation, the chat client has the ability to share inline photos from Picasa or Flickr and videos from Google video and YouTube.

2. Organize your documents easily.

Google Docs uses a pretty clean interface, but any time you’re sharing with multiple people it pays to be as organized as possible. With Google Docs the best way to stay organized is by making use of colors and comments.

In a spreadsheet colors can be set to follow certain rules (such as turning the text of every cell with your name in it purple), and you can insert comments by right clicking on any cell to get your message across without taking up space.

In the overall Docs interface, folders can be color coded too in a manner similar to gmail labels.

3. Share with others

Google Docs is all about sharing, but you knew that. The key, however, is to know exactly how you can share. At the discretion of the owner, collaborators can be invited to edit or simply to view a shared document.

By default anyone who can edit the document has the ability to share the document with others, and if you really want to open the floodgates you can open the document for universal viewing or editing. Be warned though, there is a limit of 10 people for simultaneous editing of documents and presentations (for spreadsheets, the limit is a much safer 50).

4. Scale back (revision)

You already know Google Docs is autosaving everything you do, but you may not know that you can manipulate past revisions in order to see exactly what’s changed.

All Google Docs will keep a revisions history so you can track your changes and, if you want, revert to them at any time. In the document revision history, you even have the ability to look at two versions side by side to view color coded changes.

5. Draw

Just recently Google added a collaborative drawing feature to Google Docs. This opens up a whole new array of sharing options, as diagrams and charts can now be constructed and shared with ease. The options are obviously not comprehensive, but you have your choice of a variety of shapes, lines, arrows, or text boxes, and you can color and rotate and even layer the objects to a certain extent. The picture for this one is Google’s.

6. The rest

There are a number of other features located within Google Docs that you may or may not find useful.

Google gives you the ability to edit the html or even the css of your documents. In a spreadsheet, you can reference one sheet from the other, allowing users to stay on their own sheet while simultaneously updating others. There is also Google’s live lookup which can be used to have cells contain data gathered live from the internet, and much more. And yes, that html will put a marquee on your google doc.

Google Docs is currently in Beta and frequently changes. Google provides their own tutorial here and blogs about many of the changes they make here.

What’s your favorite Google Doc tip?

This article was written by Daniel Shain, one of the best editors working for LaptopLogic.com. Are you planning on buying a new Dell laptop? Check the latest laptop computer reviews before you make your final choice!

Related content

• 15 Free Tools for Web-based Collaboration
• 20 Useful Tools to Make Web Development More Efficient
• 20 Invoicing Tools for Web Designers
• Related categories: Tools, Project Management

About the Author

Daniel Shain is freelance writer for the Laptop Logic Team – providing news and reviews on mobile technology. He’s also an avid Boston sports fan. Daniel graduated from Union College in ‘07 with a BA in English and a minor in Computer Science.

“

(Via Six Revisions.)

Since starting at Viget in February 2007, I’ve received a few requests from friends and clients who want to know what project management tools we use for tasking our teams. Also during that time frame, I’ve auditioned three different platforms, including Fog Creek Software’s FogBugz,’ Thoughtworks’ Mingle, and now Unfuddle, whose features and flexibility seem most promising for our particular needs.

I should note that, before my time, we tried and abandoned XPlanner; same with Mantis.’ Later, we even built our own tasking tool, Viget Labs Project Management (VLPM).’ Ultimately, though, we learned that maintaining and building upon internal applications is unrealistic when paying clients have deadlines and expectations; so the search began for an external product that could support us (and, ideally, be customized as we grew and our needs changed).

Of course, each product we’ve tried has its pros and cons, which I describe here in my personal reviews (that’s a disclaimer!).

First, note that for nearly every engagement since I began, we’ve used 37signals’ Basecamp for our basic project management needs.’ It gives clients visibility into the project by allowing them the ability to post assets like logos and photos, see the milestones (and how they shift when deliverables evolve), participate in discussions centrally, and comment on anything from meeting notes to copywriting (writeboards, FTW!) to profile/audience documents. It allows everyone involved to get the latest scoop on a project without having conversations locked in individual emails. It also allows us to generate lists and messages that are private to our company, which is a great feature.’ Also, we can generate to-do lists that clients can see; those lists can be assigned to people and closed after resolution.’ But, interacting with each to-do item is fairly restrictive — particularly when it comes to tasking on major custom development projects — which has for us made it an unrealistic solution to address all our needs.’ That’s the main reason we explored other tools for tasking our teams.

So, in heavy development-style engagements, we look to something more robust that allows flexibility in creating and modifying individual feature requirements.’ Last year, FogBugz worked well to accomplish that goal. I used it with Qvisory, which had a technical lead who needed visibility into the feature and bug tracking we were tackling through intense iterative cycles. The system allowed us to rather simply add cards, assign them priorities, iterations, and people responsible, and close each card after resolving. It also has the capability for estimating time and tracking against actual time — and, later, running reports to determine efficiency — but we use a different system to handle this aspect so I never investigated this feature. The downside was that it isn’t the cheapest solution on the market, so it doesn’t fit every client; especially those clients who don’t have technical teams in place.’ So, we needed something more affordable to all clients.

We did feature tracking for Viget.com earlier this year in Mingle, which promised FogBugz-style features at a lesser cost. The appeal of this program also was its liberal level of customization and drag-and-drop functionality that’s available, but I’d argue the consequence of this characteristic manifests itself in a lack of intuition. When’a colleague asked me one day, ‘How do I close a task?’, I realized I wasn’t alone in trying to find even simple options like changing statuses or adding new cards to the mix. I’m confident that if a process was defined up-front, and all of the Mingle projects added followed the same templates with the same features, then Mingle would have far less of a learning curve and increase efficiency. Out-of-the-box, however, I think it’s slow-to-start and cumbersome under its own expansive features.

Clinton used Unfuddle with Spoonflower, and he loved it.’ So, we started using it with Saint Germain Catering‘s re-launch over the past few months, and it’s (again, my opinion), the best tool I’ve used so far when it came to tasking and interacting with my team.’ I would describe it as ‘the child of FogBugz and Basecamp,’ although Unfuddle isn’t related whatsoever to either. But its interface is intuitive, feature list impressive, process easy-to-follow (even for an admittedly non-technical wonderwoman like me), and cost realistic.’ Whenever I asked a question, the answer seemed to be right where I’d naturally look for it.’ Plus, with its RESTful API, the opportunities are seemingly limitless for us.’ It has per-ticket fields for estimate hours and actual hours, and although we use a separate time tracking tool, taking advantage of these features is almost priceless to give us insight for refining our estimates during the sales process.’ The major downside so far is that, unlike Basecamp, there’s no way to privatize anything, so at this point we’re using Unfuddle for all our internal tasking (even on smaller, non-custom projects) and Basecamp for our interaction with the clients.’ BUT, thanks to Unfuddle’s API, we think there’s great potential in being able to customize this one tool to give our teams and clients the visibility both need throughout a project.

We’re always working to leverage tools that will be most efficient for our diverse clients’ needs and internal processes, so stay tuned — and if you have any other ideas or reviews, please share!

“

(Via Viget Advance : The Strategy Lab.)

We all know that a great online experience is rather pointless if the product or service can’t live up to the bells and whistles of its site. But, even though I’m biased toward having the raddest site possible, I do believe a less-than-stellar online experience can be overlooked (to a degree) if the offline offering exceeds expectations.

For example, when I attended webcontent2008 last week in the Windy City, I stayed at one of my favorite hotels—Hotel Allegro—in the theatre district. I discovered the Kimpton brand about six years ago when I first moved to Washington, DC, and was staying with a friend in a suburb about an hour outside the city. I decided to avoid traffic and parking by packing up my (one) interview suit and head into the District for a few days, where I stayed at Topaz. I did it solely because it was affordable.

So I was completely surprised to learn upon check-in—during which I was treated like a celebrity—that the hotel was anything but cheap. Not only did they have complimentary wine tasting each evening in the lobby as a way to encourage guest interaction, but the entire staff talked to me; actually seemingly went out of their ways to be friendly and conversational. When I had pounded the pavement for hours only to score a single interview, it was absolutely glorious to come back to my intricately-designed, luxurious room, where I recharged before another round of knocking on doors.

When several of my girlfriends and I decided to spend New Year’s 2003 in Chicago, I excitedly booked another Kimpton—our standard room at Allegro surprised me with two bathrooms, which was perfect for our party of four girls. It was a second exceptional hotel experience that made me a fan for life of this environmentally-friendly company that has commitments to programs like Dress for Success.

But, whenever I’d recommend the brand to anyone, I’d always hear the same thing: ‘Their website is awful.”

Ok, so it’s not the BEST website I’ve ever seen, by any means, but what I can honestly say is that I’m much more forgiving thanks to its incredible offline experience. The booking process is convoluted, and their imagery is slow to load and (in my opinion) doesn’t properly showcase their personal design aesthetics and themes they’ve so deliberately chosen for their properties. But their product has been unquestioningly solid and enjoyable to-date.

So I think, just imagine how people would respond if their corporate site did a better job online of relaying that unique and engaging experience I’ve come to expect offline—I mean, credibility and authority are at stake here. Undoubtedly, the result would be more conversions.’

When I submitted my post-stay survey they emailed to me, I mentioned a few things: First, that I loved the chocolate almonds and sparkling water they gave me upon check-in. Second, that I couldn’t find outlets easily. Finally, that I wished their website was easier to use (and prettier, too). Within a couple days, I had a personal email from their assistant front office manager detailing responses to each of my items.’

The personal touch goes to further illustrate my point that a tremendous offline experience made me assign credibility that I might not otherwise gather from their web presence. And, when it comes to branding, providing a fantastic, quality service or product always is step one. Step two follows: bring that brand experience truly online.

“

(Via Viget Advance : The Strategy Lab.)

Nearly everyone was surprised (not shocked, but surprised) over the weekend to find out that Google had been building its own browser for months now, named Chrome, slated for release today. The goal was ostensibly to rethink the typical web browser and build a new one from scratch designed to cater to the current and future generation of the web. No, that doesn’t mean Web 3.0, and two demerits for even thinking that term. To communicate these changes, they even released a comic book to explain the thought process behind the features and system design.

When I heard about it, I immediately was biased against the success of any product called Chrome. Chrome is the part of the web browser that doesn’t change — the address bar, the back button, etc. In doing UI and UX work, I’d adopted the term ‘chrome’ to refer to the seldom-changing part of the site that users are trained to gloss past, such as the header, the nav, etc. So immediately, in addition to trying to steal someone else’s market, they’re stealing valuable terms from my lexicon. Nevertheless, it’s high time someone else with some weight got into the browser game, and I was excited to see what Google and its all-star cast could do.

When Google moves into an established space with a completely new product offering, you know they’re not messing around, and Chrome definitely deserves to be taken seriously. Even its announcement has already started to change the way we think about the web. Here’s how:

Performance

It’s easy to see that one of Google’s main motivations behind the Chrome project was performance. Google’s web apps are some of the most demanding on the web, loading up on all sorts of DOM scripting to make their apps familiar and easy to use. As they push their apps, they are also pushing the limits of the web browsers most of us use, which tend to have relatively poorly-performing javascript engines.

UXers should know by now that performance is critical to the user experience. Users would rather use a site that is responsive than one that isn’t, even if the former case requires more clicks or even more time. Google wanted to make sure that dragging 500 messages from folder to folder in Gmail would be as smooth as doing it in Thunderbird (I would have said Outlook, but…). So, rather than borrow from other projects, they went ahead and wrote an entire JS parser from scratch.

Not only does the new engine interpret JS, but it compiles it into binary just like a typical language like C would be compiled. Compiled code is far faster than interpreted code the second time around, so for apps like Gmail or Google Maps, which use many of the same functions over and over again, this should be like lightning in a tarball.

Additionally, Chrome has a panel that allows you to see which tabs are consuming memory and CPU cycles excessively. This is the first significant time that individual sites have been held accountable for the performance of the browser. Since we all complain about how browsers slow down after use, and we typically blame the browser, now we’ll start blaming inefficiently-written apps for hogging up our memory and our processors.

Until recently (until this weekend for many), web designers and developers haven’t been paying too much attention to the performance of their sites’ front-end. Sure, they didn’t want it to beachball, but it was taken as a matter of fact that drag and drop actions would tend to be a bit sluggish. Now that they’re accountable, I expect this to change sooner rather than later.

And if you were one of those who worried about performance, the potential success of Chrome could give you back a number of UI tools that you’d tossed aside for lack of acceptable performance and responsiveness.

Here at Viget, we’ve been paying attention to this for a while now, and have been focusing on performance both at the javascript and CSS levels, writing script and code that takes advantage of the way browsers read the page, seeking to provide a more responsive UI for the user. We’re not yet quite where we one day hope to be, but we’re getting closer.

Sites Become Apps

Not only does Chrome display a panel that handles tabs like your process manager handles application processes, but it actually does handle tabs as separate processes. In the short term, this means that each tab takes up a fairly significant amount of resources, as each has its own rendering engine instance, javascript engine, etc. As the browser is used, though, the separation of processes means a few things:

• A crash in one tab shouldn’t take down the whole browser.
• A memory leak in one tab is cleaned up when you close it.
• Tabs operate in their own sandboxes, keeping out of the affairs of other tabs.

Chrome has a number of other niceties, such as a solid API and proper garbage collection, that makes the browser more like an application platform. It treats a web site like your operating system treats an application, and even the UI gets out of the way, eschewing common UI elements like the status bar.

With all these changes, your web apps are going to start feeling a lot less like web sites and a lot more like normal applications. Now you need to make sure they actually act like applications.

Advanced Standards Compliance

Chrome is based on Apple’s WebKit rendering engine, which is what is used in Safari, on the iPhone, and on Google’s Android mobile platform.

Unlike IE and even Firefox’s Gecko engine, WebKit is at the forefront of standards adherence. Not only does WebKit properly parse CSS2 properties, but it also handles an ever-increasing number of CSS3 properties, such as corner radii, drop shadows, columns, and much more. That means fewer images to fake effects, and yes, therefore more responsive page loads.

Contextual UI

Remember how I mentioned that they got rid of the status bar? They replaced it with a bubble that appears when necessary. They did that with a number of things, offering users the tools they need only when they need them, eliminating clutter from the UI at other times. As webapps feel more like real apps, this is something we can take away: not everything needs to be there all the time. Consider displaying only the parts of the app relevant to the user at any given time, and you might find your app feeling simpler, easier, and more responsive as a result.

Performance is a Big Part of UX

The twitterverse had a lot of folks claiming that Chrome is simply a performance play, and not a UX or UI play. Sure, its UI isn’t dramatically game-changing, but that doesn’t mean users will experience the web the same way. Just like Firefox’s success came from showing that features and bloat don’t seal the deal, Chrome is taking it yet a step further and focusing on providing a great user experience through a very fast and responsive interface.

It’s all kinds of design, from system design, to product design, to UI design, to visual design working for each other to create a package that masks its incredible complexity in simplicity. It’s a big deal, but it plays it off like it’s no big deal, and that’s awesome.

“

(Via Viget Advance : The Strategy Lab.)

Last month while attending the Web 2.0 Expo in New York City, Twitter was in full effect throughout the conference (as to be expected), however the most interesting use for me was that attendees were encouraged to tag their tweets within each track of the conference to help facilitate Q&A at the end of each session.’ Attendees also often ‘seconded’ others’ tweets on a topic they found an important one, which helped the most relevant topics bubble to the top. Speakers could keep an eye on the Twitter backchannel and answer audience members’ questions as the session went on or at the end.’

Similarly, I recently read this great article from academHacK on ways Twitter is being used in Academia to help students stay active and involved in class discussions. Some of the benefits he noted include continuing ‘class chatter’ inside and outside of the classroom, developing a sense of community among classmates, and allowing professors to instantly reach and gather feedback from their students.

Alternatively, many people have found creative ways to use Twitter to capture voices around the world.’ George Mayo, an 8th grade English teacher from Maryland, created a Twitter account last year called Many Voices, in which he invited students worldwide to help him create a story, by adding a sentence or two to the ongoing log of tweets. Within six weeks he had a complete story, via the addition of sentence-by-sentence plot lines from more than 100 students across the globe.’ He then self-published it using LuLu and made it available as a free download.

You may have also noticed recently Twitter’s Election 2008 site, which provides an ongoing log of users’ thoughts across the country.’ It’s pulled together based on specific election-based keywords and updated in real-time. It also shows what election-related topics are hot at the moment. I tuned into this during last week’s vice-presidential elections and found it pretty darn cool (and helpful, since I’m not exactly a political expert) to hear the voices of the peopl who were watching what I was watching, whether next door or hundreds of miles away.

I find it pretty remarkable that the world has adopted Twitter so creatively—as a tool for use in all different sectors of society that captures voices we otherwise might not have access to—particularly in those cases like the election coverage and Many Voices.’

However, I wonder if the consequence of this evolution is that valuable offline communication in the educational and professional world is now being diminished.’ During the Web 2.0 Expo, I debated whether handling Q&A through Twitter was minimizing human interaction (which is one of the main reasons I attend conferences like this). Did fewer attendees walk up to the microphones to ask questions or take the time to discuss their previous sessions with a neighbor? Are we limiting communication by transitioning it online, or are we actually expanding it?

“

(Via Viget Advance : The Strategy Lab.)

Over the last few months, I’ve worked on several projects that started with good, solid user research efforts. We’ve sent out surveys, performed interviews, run usability tests, and worked with customer support teams. It’s exciting to start a design project with good input from users, but the research we’ve been doing made me realize how often we have to work without the benefit of good user insights. This got me looking around at tools that companies can use to get started on gaining insight into their user’s needs. I found two that looked particularly useful, and easy to use: Get Satisfaction and UserVoice.

Get Satisfaction

Get Satisfaction is a hosted service that provides companies with a forum for customers to post complaints, suggest and rate new ideas, help each other, and communicate with employees. It’s simple enough to get up and running, in fact you may find that your customers have already done the job for you. Get Satisfaction is primarily a customer service tool, but if customer service is the new marketing, it’s also a fundamental piece of a good user experience.

Get Satisfaction provides a number of tools companies can use to identify key user needs and pain points:

• Users post and rate problems with your products
• Users suggest new features and vote for their favorites
• Users share their tips and tricks with each other

Get Satisfaction isn’t alone, if these features sound useful, you can also check out:

• Jive Clearspace Community
• Lithium Support Community

UserVoice

Making Good Use of Input

“

(Via Viget Advance : The Strategy Lab.)

For the past several months, I’ve been working with a client who is based in North America but who operates regional offices in various parts of the world where their (tourism industry) product is offered. Over the past year, we’ve collaborated with this client one country at a time, through their North American central office, updating some of their country-specific web properties. It’s been a cool opportunity for the team to experiment with tweaking web designs to work in cultures that we haven’t designed for in the past. One of the best lessons learned (well, more confirmed than learned), is that good web design (as any other form of art) transcends regional boundaries. A good web design in America is also a good web design in Norway, France, or Australia because, at the end of the day, the best web design gets out of the way and lets the content and features pull users in and through the conversion process. So far, we’ve found that user intuition about how to get from Point A to Point B in the purchase process doesn’t vary by location – everybody is looking for the same information.

However, we also found that aesthetic preferences, as you might suspect, vary a great deal between nations. The preference in one country might be for ultra-sleek, clean design with little imagery and a neutral color palette. In other places, users seem to prefer a richer, bolder palette full of evocative imagery and depth. Given those widely varied and utterly subjective preferences, we faced a new challenge with our current design project in this space: How do we define a design that not only works but also looks ‘good’ in Germany, in Australia, in France, in the UK, and many other distinctly different parts of the world?

Our first attempt was to employ our standard process of presenting three mood board options and finding the most preferred of the three. In this case, we had the opportunity to ask our users (during usability testing for the same product) what they thought about the mood boards. For this exercise, we came up with three distinct directions. One that was sort of business-y, one that was fun and lively, and one that was neutral. We asked users how they would describe them and which they preferred. After weeks of interviews, we were able to finally discover that the mood board results were totally inconclusive. Each country had a preference, but with 4 countries responding to 3 mood boards, we couldn’t possibly have come up with a less definitive answer. Germany preferred one, France preferred another, the UK preferred the third, and in Australia there was no clear winner. Obviously, none of these design concepts was the ‘right’ answer.

Beyond that, even within the countries that preferred a particular design direction, the feedback was contradictory. For example, we presented a mood board similar to the one below.

And, in response to this design concept, we heard the following descriptions:

France: punch, dynamic, warm, friendly, current, pretty, leisure, approachable, summer, modern, nice, ugly, usual, lively, airy, joyful, attractive, organized, hard hitting, welcoming, 1970s, cheap, old

Germany: loud, amateur, warm, white, leisure, friendly, sunny, nice, neutral

UK: bright, golden, distracting, holidays, warm, sun, summery, fun, light, breezy, sunny, inviting, touristy, interesting, striking

Australia: nice, bright, simple, stands out, eye-catching, inviting, warm, summery, fresh, eco-friendly, holiday, beach, mid-range

Our next step was to pull the best elements of each concept while attempting to steer clear of the potential negatives. People everywhere thought the yellow design above was friendly and fun, so we tried to keep that element without making it ‘distracting’ or ‘amateur’ or ’1970s.’ For our other two mood boards, we did the same. The end product is still in development (I’ll update with a link here when it goes live), but the key point is that our applied design employs blue, yellow, gray and generous use of white space. We really like it.

Normally, that’s where the story would end. But, in this case, our client is responsible for presenting this design to a multitude of stakeholders in all these countries and to help smooth the approval process, they wanted more than a recommendation from our designers. They needed ‘proof’ that this design was the best possible design for our purposes. More specifically, we needed to be able to prove that the color selection of blue, yellow, and gray was the best choice for every country we’re working with.

Yes, that’s right. My marching orders from the client were ‘Prove to us that these are the right colors.’

It was a fair question given the circumstances; but, on its face, this seemed impossible to answer. What kind of research could I find to prove something so subjective? Skeptical that such an answer existed, I turned to Google Scholar to start digging. I expected to find some general studies that described the emotional impact of certain colors on the subconscious, or maybe a study of the use of colors for branding in certain industries. But. lo and behold, there on the very first page of results was the holy grail of documents: a legimate study about my exact topic with the exact answer to my question. That *never* happens! It was one of the best work days of my life.

Conducted by Irina Kondratova and Ilia Goldfarb of the National Research Council Canada Institute for Information technology, a paper called ‘Color Your Website: Use of Colors on the Web‘ had carefully, thoughtfully, and thoroughly analyzed the use of color on web sites across the globe and found some very significant patterns. I recommend you read the published paper yourself to learn about methods and other conclusions, but here’s the punchline:

‘Results of our color usage analysis for the fifteen countries showed that some colors are commonly and preferentially used across all countries studied. These colors include white, black, all shades of gray, all shades of blue and a light yellow color.’

Sweet! What are the odds of that? It turns out the blue, gray and yellow palette we had arrived at was, coincidentally, the only single color palette that the (fairly limited, but perfectly valid) research on the subject has proved acceptable. Going one step further, I also discovered an article from the Proceedings of the 7th International Conference on Electronic Commerce which concluded that among the four most trust-inducing features of interface design is the use of ‘moderate pastel color with low brightness and cool tone.’ Even better – our palette was exactly that!

Armed with these facts, I was able to quickly sum up the key points and reiterate with more confidence to the client that not only was our design beautiful, but we could also prove it was the right choice. Of course, the ultimate proof will be in the conversion rates once we launch; but, at this stage of the project, I think the matter has been settled as conclusively as possible.

I didn’t write this post just to tell you my fairy tale story of proving the unproveable – I’m curious what other web design professionals think of this whole exchange. Was there a different direction I could have’pursued to arrive at an equally presentable conclusion about color? Even if the study I referenced was conducted perfectly, is there any *real* merit to an analysis like this? Or, in the end, is there just nothing more certain than good design intuition?

“

(Via Viget Advance : The Strategy Lab.)

Well, of course it has. It’s been pretty well-documented that the web changed the presidential election, and that the current administration plans to take that information revolution a step further by increasing transparency in the federal government.

But, there’s also been a lot said about the President’s ‘overexposure’ in the media these days. That’s where we are finding a third frontier of this new political era — not only have elections and government communications been redefined, our expectations for the President’s availability to the press are also shifting.

President Obama has been on my screen (television, computer, iPhone … pick one) a lot lately. He’s on Jay Leno having a few laughs, he’s filling out March Madness brackets on ESPN, he’s posting those weekly video addresses to his web site in case I want to check in on him, and he’s holding press conferences to talk about economic recovery. And, when he’s not talking, everybody else is talking about him. Television, radio, blogs — everybody’s analyzing the President’s every move.

What’s surprising to me is not that this intense media scrutiny is happening, but that it’s been noteworthy. In a world where my public persona is an amalgamation of Facebook photos, blog posts, and passing mentions on web sites outside my control, it feels to me like we’re all a bit overexposed. As the notion of privacy gives way to the inevitability of omnipresent information, I would expect a figure as high-profile as the President of the U.S. to be subject to the slings and arrows of the internet at least as much as a private citizen. And, I think that’s great.

It’s great because our paparazzi-like attention to the President’s comings and goings means we’re engaged in the political process. In the olden days of traditional media, Americans had to make an effort to know what was going on in the world of politics. No longer. Now, we just can’t help it. Sure, we’re limping through a major recession that has everyone waiting with bated breath for a glimmer of hope in the news, and that means more people are paying attention than ever before. But, for those who aren’t, the information still trickles down because it’s coming at us from every channel.

Whether you agree with the President’s politics or not, it’s pretty hard to argue with the fact that understanding what’s happening in your government is a good thing. So, yes, the web has redefined the Presidency by making governance readily accessible to the public whether we like it or not. So, now the question is: Do we like it? Or not?

“

(Via Four Labs Blog : Viget Labs.)