Experience Planner

We were in need of some UI Inspiration. I went out and found some fantastic galleries that provide up to date patterns and trends that we are seeing around the web. Below are the best libraries I found.

Pattern Tap

• Constantly updated

• Categorized collections for locating specific types of UI inspiration

• Faceted search through tags for filtering needs

• A Community of highly involved users

• Clean and intuitive design and navigation of its own

Quince

• Collection of old and new patterns

• Categorized collections for locating specific types of UI inspiration

• Alphabetical, tag, and user task related faceted filtering

• Search feature available

• Clean and intuitive design and navigation of its own

• Visualization of UI relationships

• Beautiful liquid layout

• Built with Silverlight

Welie

• Large pattern list

• Screenshot examples

• Filter by need of the user

• Visio tips and tricks, Macros!

• Hasn’t been updated since June 2008

Yahoo!

• Yahoo! provided content

• Categorized collections for locating specific types of UI inspiration

• Faceted navigation style

• Why, why, when, and how certain patterns should be implemented

• Limited examples, Yahoo! specifics provided

• Links to YUI (Yahoo! User Interface Library) for JavaScript code for building mentioned interactions

jQuery

• Smaller collection

• jQuery specific widgets and actions

• Useable live demos

UI Pattern Factory

• Specific to best in practice examples

• Video examples of interactions

• Vote for new patterns to be added to the collection

• Voting involved community, new posts are rare

UI Patterns

• Similar to PatternTap

• Nice screenshot collections for a quick sneak peek

• Footer provides quick breakdown of available design patterns

O’Reilly

• Excerpts from the book

• Touchpoints with What, When, Why, and How

• It’s O’Reilly, good stuff, period

flickr Web Site Group

• Large collection of images

• Images are tagged fairly consistently

• Search for the inspiration you are looking for and get results

• Very little explanation to screenshots provided

flickr Janne L

• Large collection of images from an individual

• Not organized for specific UI feature surfing

• Very little explanation to screenshots provided

CSS Mania

• Large gallery of CSS Designs

• Beautiful interface designs and inspiration on navigation and layout

• Little to no organization, only a monthly gallery filter

• Updated regularly and offers a great RSS feed

• Many similar galleries
  http://www.CSSLeak.com

Visual Complexity

• Large gallery of Data Visualizations

• Fantastic organizational structure

• Faceted search for filtering

• Beautiful examples with great explanation and information on the data shown

• Updated regularly and offers a great RSS feed

via smashingmagazine.com

Wireframing is a very powerful tool in building the foundation for a website. Wireframes allow your team to visually recognize the interactions between pages and content. There are many different ways of integrating wireframes in to your process and it might be different from project to project.

Some wireframes may be very low fidelity, where the focus is strictly the layout of content and where form and button features might appear. Other wireframes can be of great detail, at times referenced as prototypes, truly representing the interactions involved allowing team members and clients to actually see movement and interaction with form and button elements. Wireframe prototypes can also provide a hint at the design of the final website, but should not distract from understanding changes may and often times will need to be made based on issues with the interaction and/or experiences after testing. Wireframes are great for agile development and are meant to be rapidly produced and polished as you tweak with the interactions.

Integrating wireframes into your design process will provide a more stable direction into the final creative and technical end of the process, with confidence all interactions are accounted for and provide that consistency for a better user experience.

For further reading, Smashing Magazine has compiled a list of 35 Excellent Wireframing Resources to inspire you to adopt this very concept.

Last night, I read an article from Admap titled “Planning: the challenge of complexity” from R/GA’s executive vice president of strategic services Anne Benvenuto. Anne’s purpose of writing this article in May 2007 was to inspire other planners to look for a deeper meaning in their clients’ brands. Instead of earning a relationship with the customer, bring the brand alive and have it interact with the customer, create a new and meaningful experience. Anne recognizes that an experience is longer-lasting, that it requires more than just saying and listening but that it also has to interact with the customer. The experience makes things happen and the exciting part of this interaction is that the customer creates these experiences where ever and when ever they want.

Planning: the challenge of complexity - Anne Benvenuto

Well it is now closing in on Q4 of 2009 and it is surprising to still think of this as a “new” idea. Anne suggests “if there’s one thing we all know about the times we are living in, it is that they are changing far faster than ever before”. That is still true today and if this is the case then why aren’t more agencies chasing these opportunities. As planners we need to be ahead of the client, ahead of the customer, and ahead of the trends. We need to set the landscape and determine where our customers are moving next.

Anne recognizes the complexity of this type of responsibility, but she also has not suggested that we work alone. She wants us to work better with our team, with our technologists and our creative team. Learn to collaborate, pull together ideas and be ahead of the curve, and as a team, succeed.

Faceted search results differ from traditional searches by way of the facet categories which are displayed on the search results. These facets are sometimes called search options or content categories — depending on who you ask — and reflect the similarities shared between the search results. This allows you to not only search for glasses, but view all of the results that are new, or inexpensive, or blue.

Google has recently added a number of facets to their search results. You can view these by clicking Options on the search results page (directly below the Google search bar). These options (aka Facets) allow you to view the Video results of your search, or to view the results in a time line or a wonder wheel that is really fun to play with — if you’re into the whole data visualizing thing:

My favorite faceted searches stack the facets directly above the results. So to begin with, the user sees their search term and the number of results that it has produced. When they click on a facet to view all the new things, that facet appears above the search results, directly below the search term. To remove a particular facet from the top of the page, users simply need to click an X at the end of each line:

As for the facet controls themselves, remember to think outside of the standard form. You could use a map widget instead of an address form to locate an area on a map. For short numerical ranges, a slider can feel more natural when it comes to increasing or decreasing values. If you’re feeling particularly adventuresome, charts and graphs can also be used to illustrate certain facets of the results.

One final point I feel compelled to make is the fallacy of the three point click in relation to faceted searches. Facets enable users to explore the data instead of desperately searching for that one result which contains all of their answers. Just imagine a Wiki adventure where one answer brings up new questions and allows you to explore the alternatives.

For more information about faceted searches, I recommend UIE’s virtual seminar on Faceted Search: Designing Your Content, Navigation, and User Interface. They also include some handy information on design patterns that I am sure to be sharing before long! For those of you without a few hours to spare on the seminar, you can download a PDF handout of their presentation.

Too often UIs take the non-engaged user to the next action: they scan the page, don’t see what they want, so they can click on another navigation item or a banner ad callout. A good UI makes this easy to do. But what about the engaged user? The one who read every word of your advice article (or even scanned it), or filled out a contact form and is just given a short “thank you”. What is the next call to action for him?

This takes a little thought. You need to get in the user’s head, and examine each page carefully. If the user wanted to actually read (or scan) this article, what can she do when she scrolls down to the bottom? Are there clear, related calls to action for the natural next step? Or does she have to scroll all the way to the top to see where to go next?

I’ve seen in usability testing time and again where an engaged user will read or scan through the page, and then get to the bottom, and expect to be told what the next relevant step is. He doesn’t want to go back up to the top to find it. He wants it where he already is, which makes perfect sense.

Here’s a web page where we did exactly this.

You’ll see clear, flexible calls to action at the bottom of the page. They’re based on user goals, and what various user paths would be. And we also thought about what relevant items the business would want to promote to the user. Then the calls to action served both.

In usability testing and site metrics, I’ve seen users notice links at the bottom of a page more than they did the identical ones that appeared at the top of the page and above the fold, because the timing was in their favor — they were now ready to take that next step. And they were appreciative of the site guiding them to it.

But don’t just think about content based pages. Think about other instances, such as when a user fills out a contact form. The thank you page often says “Thanks for your feedback. We’ll get back to you in one business day.” But what do you really want the user to do next? If it’s an existing customer, do you want them to fill out a rating & review? Or do you want to tell them about a great new site feature they may not know about? Take them to the next step.

One final note of emphasis: That next step should be based on user needs and goals, and balanced with the business objectives. If you know the user, why she’s coming to the site, and what value she’d extract from the current page, what would be in her mind as a next step? What does the business want to promote that would be of direct relevance to her on this particular page? That’s one way to reach successful engagement.

And don’t make it overwhelming. The recommended next step could be one clear link, or as many as three to provide flexibility. And if technology can make them more personalized and relevant, all the better.

Once you’ve recommended this next step, test it with users. Refine. Work with your team to ensure the calls to action are being fully measured. Once the results are in, refine again.

And always think about what’s next.

Whitney Hess gives a nice summary in a post called 10 Most Common Misconceptions About User Experience Design.

Of particular interest is a mention of the “U” in User Experience which aligns with how we think about Experience Planning here at Bridge.

Russ Unger, experience design strategist, likes to say that the biggest misconception of UX design is the “U.” “There are a set of business objectives that are needing to be met—and we’re designing to that, as well,” he explains. “We just can’t always do what is best for the users. We have to try to make sure that we are presenting an overall experience that can meet as many goals and needs as possible for the business and the users.”

As user experience designers we have to find the sweet spot between the user’s needs and the business goals, and furthermore ensure that the design is on brand.

My inbox was all a buzz today about the new Cuil search engine that launched, masterminded by ex-Google engineers, that, according to reports, boasts a search index that’s three times higher than Google’s. So I spent a little time checking it out.

You can tell right away Cuil looks much prettier than Google. But when you look past the pretty dressing, what do you get?

I was underwhelmed as I looked more closely at my search results. While I see the potential, the design does not lead your eye around the page to understand the hierarchy of the search results. And I missed Google’s “Did you mean … ” feature when I misspelled common search terms on Cuil. And there isn’t an “Advanced Search” feature to be found.

And while Cuil is promoting the quanity of pages they index, they are falling below Google on quality. The search results for some of the brand names I searched on appeared to be relevant, but as I went on to search lesser known terms, I got irrelevant results.

I do really like Cuil’s Explore by Category section to suggest related searches, and the tabs at the top do help narrow your search. These are great features that are easy to use.

As Google said themselves, it’s great to see more competition come into the search space. And I do like that Cuil is more concerned about user privacy. I’m looking forward to the competition pushing the industry to keep getting better.

In a recent post, James Kalbach says that people notice more on your website when browsing than searching.  In fact, a study showed that people visited 10 times as many non-targeted content pages when browsing.  62% of users who used category links continued looking after they found targeted content as opposed to 20% who continued looking after using search. 

Another study found that test subjects who were asked to explore a site as they wished performed better on recognition and recall tests than subjects who were asked to search for specific information. 

James says:

“People prefer information that involves sequence. They like to browse. Navigation provides a narrative for the people to follow on the Web. It tells a story–the story of your site. In this respect, there is something both familiar and comforting about web navigation. The widespread, seemingly natural use of navigation to access content on the Web reflects its strength as a narrative device.”

As the canvas shrinks the design challenge grows. IMO designing for small screens is among the most difficult of experience design challenges. Nokia recently published a short report detailing 10 examples of good design for mobile screens. Download the PDF here. They do a nice job of highlight experiences that find the critical balance between visual design, ease-of-use, and interactivity.

So, I’ve been thinking a lot about leveraging of user data recently.
Actually, to be more specific, I’ve been thinking about how to add value and one possible method is to leverage user data (data you already have).

When I say user data I’m thinking about three things:

1. User Generated Data
2. User Imported Data
3. Captured Data (i.e. user account data, analytics, tracking, etc.)

There are probably better categories out there but this entire idea needs to be fleshed out more anyway…

Anywho,

Let’s start trying to use our data to provide some added value. Finding new ways to use data you already have can breathe life into an older digital ecosystem or it might allow one to build a whole new system (stand alone or complementary).

Maybe you already have what you need to make a good site into a GREAT one. Maybe, you just have to look and start planning for it. I’m thinking that talking to your measurement/research team is the logical first step.

I’m thinking that the backend has to do all of the heavy lifting, if the user needs to do most of the work then the new feature, the new site, etc. will not be sustainable in the long run.

Maybe I shouldn’t say leveraging user data, maybe it’s leveraging user input
Or
Maybe it’s more about add value and the different ways to do that

Still, i’m just thinking “out loud” at the moment

One caveat:
Emergent Properties

Examples:

Take Last.FM for example, for the SXSW conference they created a system that took their user’s music preferences and allowed them to filter through the SXSW music lineup. Last.FM also rolled out an “event calendar” of sorts that looks for music in your area that meets your musical tastes (as well as it can). Those are great value adds for an already strong site.

Group Recipes – food/cooking/recipe community
Different browse options (e.g. beauty, intereresting, stumbler, local; eateries), Roger the recipe robot, friend “recommender” – all based on the community’s input

Ravelry – knit and crochet community
Popular patterns, project finder (based on type of yarn and other attributes), flickr integration, public project tracking (what are people working on), project and resource tracking (e.g. needles, hooks, and yarn), pattern browser – all based on user behaviour and input

Facebook
Facebook introduced the ability to import friends from a myriad of different web applications and address books – is it a good thing? That’s another post but it did leverage User Data (albeit the fact that the data came from another site/application) – user initiated import

Etsy
Search by colour – based on user tagging

There was a review site a few months ago that had a really interesting navigation system. You could browse by a taxonomy and then refine results based on a folksonomy. Seemed like a great idea. I need to find that site again!