Forum One: User Experience & Design Blog

Pandora Update: Feedback & Fitt's Law

nospam@example.com (Brian Verhoeven) — Wed, 17 Jun 2009 13:15:35 -0400

I stepped away from my computer and paused Pandora. When I returned, I noticed that they had updated the interface to include a large pause icon over the current track. This struck me for two reasons

1)It made it immediately apparent that the system was paused. In previous sessions, I had struggled with the play / pause toggle (largely due to delays in pumping sound into my headphones). However, I was also confused by the toggle itself. Was the grey triangle for play representing that it was "pressed" and therefore playing music? Or did the orange color indicate the state? In the new version, I have no questions, I clearly know when the system is paused.

2)The area to get the music playing again is MUCH larger than the small play button. Now I can click anywhere on the album cover to resume my listening session.

What We Learned at RedUX - DC '09

nospam@example.com (Brian Verhoeven) — Thu, 28 May 2009 20:59:38 -0400

On May 9th, IxDA-DC and DCIA held a conference RedUX of the 2009 IA Summit and Interaction conferences at CDIA in Georgetown. The event had 13 world-class speakers, 5 hours of presentations, over 100 attendees, and cost less than $500 to organize. You can watch video of all the presentations at the ux workshop

My big take aways from this event:

Your career is what you make it.
Find a way to explain why you are important in only 1 sentence without hesitation. Believe it. You can take charge of your career by sharing your message / knowledge. You are an expert. Share your knowledge. Grow your network. If you are not blogging, start. Read as much as you can and share your thoughts. Use twitter. Use your REAL name. Stay positive.

Your job is your business school. Learn from your organization: what does it do well? What does it do not so well? Collect samples: documentation, contracts, etc. What makes a bad client? What methodologies didn’t work? Why? What makes a bad boss? What makes a bad employee?

Strategy is very much dependent upon themes.
For a storyteller, theme is used as a compass. Themes can inform strategy. On the web, a theme is an overarching statement or phrase that encapsulates the value and focus of the experience that we intend to deliver. For the tech team, themes can define functional and content requirements. Examine every element in terms of the theme. The theme coordinates the elements of a story / direct message of your site.
In this way, themes help us design for pleasure, emotion and meaning.

Guiding principles for prototyping:
1. Know your audience and their goals
2. Don't plan too much. Prototype a lot.
3. Set expectations.
4. You CAN sketch.
5. It’s not the Mona Lisa.
6. If you can’t make it, fake it. (simulate AJAX with keynote, .ppt, even paper)
7. Prototype only what you need. Don’t do the whole entire system

Managing people is different than managing face-to-face
1.Enrich your communication skills
2.Be sensitive to what going on in other locales: Don’t schedule a meeting with team members in New Orleans on Mardi Gras
3.Email: Avoid sarcasm, terseness, and contractions
4.Telephone: Be clear and direct. Speak up. Sometimes you NEED dialogue. Don't be afraid to use the phone because you are used to email.

The UX Community is passionate.
The UX community is passionate about the work that they do. Thanks again to all who pitched in to make this happen; especially those that traveled great distances.

Thanks to Matt, Sophie, & Courtney for contributing their notes / feedback on this post.

Modeling Concepts with Dan Brown

nospam@example.com (Brian Verhoeven) — Wed, 27 May 2009 09:39:08 -0400

I attended Eightshapes first Monthly Workshop Series. Dan Brown hosted the event and discussed concept models. The big take away from this session is that concept models illustrate relationships by connecting nouns with verbs. The nouns are concepts. The relationships are verbs. During the workshop it occurred to me that focusing on nouns and verbs could be a good listening technique when having conversations with clients.

Dan's full presentation is on Slideshare. I've included my notes from the session below.

What & Why

1) Highlights buried concepts
2) Shifts conversation
3) Draws connections / Conveys relationships
4) Contextualizes concepts
5) Establishes the problem space / Domain: (inputs, requirements)
6) Sets the direction of the design: describes the product in some way
7) Helps prioritize the needs of different groups
8 ) Allows team to engage in conversation about strategy, requirements, etc.
9) Provides a common vocabulary
10) Clarification of ideas, what did I get wrong? Presents ideas / direction for approval

How do concept models compare to other types of documentation?

Sitemaps: show hierarchy of site
Flows: Have clear start and end points. They show transformation
Concept Maps:Do not show hierarchy of the site, but illustrate the underlying strategy.
Mindmaps:is a subset of concept maps.

The Basics

Concepts models make explicit links between concepts (verbs) Note: these links can have directionality.The concepts are nouns. Ideally, a concept model will have few than two dozen concepts.

Variations of Concept Models

Value Proposition: Boil everything down to a central concept

Duo, Triad, or Quad: Focus on relationships. The relationships are more important than the nodes.

When to Use

1) Early in process
2) Think about big picture
3) Have an opportunity to iterate
4) When thinking about operational model

What to consider when planning your model?

Audience
Who is sitting across the table from you?
1) Person who likes to go through the nitty gritty? They are good at providing feedback
2) Person who likes to help?
3) Person who is good at think abstractly?

Beyond considering your audience for this document, consider how you will communicate the following and why you want to communication these to the client. Dan pointed out that sometimes the best audience for a concept model is himself and he doesn't show them to clients.

Core Message
1) You've got too much going on here
2) What concepts (nouns) are talking to each other?
3) This is what I think the site should be
4) There are meaningful relationships here.

Collaboration
1) Sharing for feedback
2) Requires some planning

Purpose
1) Describes the structure
2) Shows the big picture

So What?
Be prepared to speak to why you are having the client review this document. Be as specific as you can when communicating the results with them. It is often better to have the Concept Model in your back pocket and tell a story to the client while drawing the concept model, piece by piece, with them.

The role of concept models in various project stages

Concept Models in Discovery
1) Creating relationships between users and users needs
2) States the domain
3) Identifies what is missing
4) May have simple visual language
5) May have too many relationships included
6) May create a visual distinction between known and unknown

Concept Models in Strategy
1) Context setting: Where does it fit in the big picture?
2) May highlight one aspect of a product
3) Vision setting: Defines the end goal.
4) May skimp on detail
5) May choose relationships to demonstrate improvement area

Concept Models in Design
1) Conveys underlying structure by describing the content
2) Be careful about the number of concepts
3) What do the relationships say? Typically, they are navigation points
4) May make it look like page thumbnails

Reflecting on the 2009 Non-Profit Technology Conference

nospam@example.com (Sophie Campagne) — Thu, 07 May 2009 16:09:04 -0400

In late April, I participated in the Nonprofit Technology Conference in San Francisco. With over 1400 participants, the event sold out and saw an increase in attendance by 30% in comparison to last year. Impressive given the state of the economy.

I was invited to speak on a panel to share methods and tips for designing beautiful, usable sites. From moodboards, to audience segmentation, user research tactics, and A|B testing, three consultancies and Google shared their experiences on how to strike the right balance between organizational-centric and user-centric sites. While it can be costly and time consuming, multivariate testing created a lot of buzz, particularly as Google described testing 30 shades of blue on its site, which resulted in a $10M revenue stream. The challenge with most non-profits is that they do not see the type of traffic that major retailers see in a matter of hours, and thus must be prepared to test over a longer period of time. The suggested approach was 20% traffic with a 90% confidence interval. Meaning that 20% of your site visitors interacted with the same visual element every time except 10%.

I also reconnected with Kira Marchenese from the Environmental Defense Fund (EDF) who had spoken at Forum One’s Web Executive Seminar last year on usability testing. This time, the topic was branding, and how to brand your organization’s sub-campaigns. The screenshots you see below are of EDF’s current home page (large screenshot) and two different campaigns. You can immediately identify one campaign as belonging to EDF, because of the way it ties back to the parent organization’s brand elements. The challenge with the other campaign, while beautifully designed, was that people thought it was a separate organization, and did not associate it with EDF.

Our conference keynote, Clay Shirky, spoke of the social networks and media tools that have emerged, allowing masses to organize themselves outside of the traditional organizational boundaries. Should you choose to insert yourself into that community, Network for Good provided tips on communication and content strategy for social media, for organizations aiming to connect and build trust with their community.

Think before you write. The tools you use won’t improve the message.
Your audience is not an audience. Two way communications are the norm and are most effective at engaging.
Be humble, acknowledge others
Cater to emotions. Humans use emotions to make decisions, and then use logic to justify their choices.
Humor can be effective.
Simplicity is more digestable, keep the information overload to a minimum, otherwise you run the risk of losing your following.

For more nuggets from other presentations, see the following:

Andrew Cohen covers social marketing tips for getting traffic, attention, and subscribers online
Michaela Hackner provides highlights of her sessions, including great tips for better storytelling online
Jo Ryden on cloud computing

Newsletter Sign Up: Design Guidelines

nospam@example.com (Brian Verhoeven) — Fri, 01 May 2009 12:12:00 -0400

Many of our clients include e-newsletters as part of their content strategy. As such, the website typically requires some sort of newsletter registration form. Knowing that disseminating information through multiple channels is core to many of our clients content delivery strategies, I wanted to do a little research and determine what are some of the best ways to design for e-newsletter registration. Here are some guidelines for newsletter registration.

Demonstrate the Value
Most users that I’ve interviewed are wary of what information is delivered to their inboxes (note: we guard our mobile phones even more closely). People are busy and they want to make sure that if they sign up for a newsletter, it will provide them value; not just clutter their inbox.

The first step in demonstrating the value of your newsletter is to inform your users of exactly what they will receive by registering and how often they will receive those updates. By signing up for your newsletter, will they receive periodic updates with interesting topical news, how-to tips, links to resources? Or will they receive promotional emails that alert them of special offers and new products? Or are they receiving short messages that alert them of upcoming events, recent community activity, or organizational news.

Congressional Quarterly provides a link to view a sample newsletter adjacent to the Sign Up button. When the user clicks on the sample newsletter link they are able to view the full sample newsletter in another browser window.

Congressional Quarterly does a good job of letting users preview newsletters prior to registering to receive them.

Another way to demonstrate the value is by allowing users to visit the newsletter archives prior to registering. This allows users to view all of the newsletters online prior to registration. We take this approach with our newsletter registration

Inform Users of Publication Frequency
Another factor that users consider when registering for your e-newsletter is frequency of publication. They want to know if they can expect communication from you on a monthly, weekly, or daily basis. Jakob Nielsen Alertbox Email Newsletter is a good example of how to do this.

Jakob Nielsen's Alertbox sign up form informs users that the newsletter is published bi-weekly.

Make It Easy to Sign Up
Technically, the basic requirement for e-newsletter registration is that the user provides you an email address; however, organizations often see this as an opportunity to gather information about their target audiences and ask more questions than those that fulfill the user’s primary goal. As with every web form it is important for you to consider what information you actually require from your users.

The context of registration is an important aspect when considering what information you should collect from users during registration. Users typically sign up for users in one of two contexts: 1) when registering for access to your website, or 2) by using a newsletter registration form. During site registration, your organization can provide the user an opportunity to sign up for your e-newsletter along with registering for the site. When the user signs up through the newsletter registration form, the primary intent is to receive the newsletter and may not want to provide your organization any more information that email address. If you do decide to request additional information during newsletter registration, be sure to inform the user what you intend to do with that information. Your organization should also consider what you are going to do with the information once you collect it. If you do not have a clear need / plan for the information request, it doesn’t belong in the registration form.

Other Resources
http://julianpowers.net/2009/03/newsletter-previews/
http://www.90percentofeverything.com/2007/10/26/newsletter-subscription-on-iwantsandycom/
http://www.ids.ac.uk/go/ks/how-we-guide

Notes from Mobile Tech 4 Social Change Washington

nospam@example.com (Brian Verhoeven) — Thu, 30 Apr 2009 10:32:06 -0400

Yesterday, I attended my first Barcamp, called Mobile Tech 4 Social Change. The event was organized by Katrin Verclas of MobileActive.org , co-hosted by Google and sponsored by Forum One and Mobile Commons.

Mobile for List Building

One of the sessions that I attended was about how the Obama Campaign used mobile technology to grow their membership lists. The speaker, Jeff Lee, Distributive Networks, shared some of the best practices that he learned from working on that mobile campaign. I've also tried to weave in some of the themes and advice from other presentations below as appropriate.

Place Call to Action Button Everywhere
Jeff, and others throughout the day, said that the best thing that you can do with your mobile campaign is to have a clear call to action. Something like “Text: [xXxX] for Hope.” Once you have the clear call to action, piggy-back it on all of your other communication channels: website, radio, television, direct mail, twitter, yard signs, posters, email, etc.

Once a user responds to your call of action, there is standard language that has to be included in the response that allows the user to opt-in, opt-out, etc. When the user confirms that they are opting in, use this as an opportunity to gather additional information about your user. For example, the Obama campaign asked users to text their zip code to [xXxX]. More on Mobile Marketing Association Guidelines

One of the interesting statistics that was shared is that once a user answered the Obama campaign’s call to action, there was only about a 3% opt-out rate. There was some discussion around the Obama Campaign and later about the Humane Society campaign that suggested that the opt-out rates were so low because users guard their mobile numbers and is only likely to give them out to organizations that they strongly support. In other words, your mobile campaign may only be reaching your hard-core activists.

Provide Incentive
Another theme for list building was to get users to opt-in to your mobile campaign you need to provide them with incentive to do so. In the case of the Obama Campaign, they offered the chance to get VIP seating, a chance to meet the candidate, a free bumper sticker. They consistently offered incentive to grow their list and to gather more information from existing list members.

Use Palor Tricks
During the Obama campaign, the number one reason that users opt-in to the list was to find out who the vice presidential candidate was going to before the news media. Basically, the Obama Campaign said, if you text Hope to [XxXx] we will send you a text message that will tell you who the vice presidential candidate will be, before we tell anyone else. This is a great example of incentive.

Another classic example of this was used during the 2008 Democratic National Convention. A speaker (I think it was the Gov. of Colorado) pulled out a mobile phone and he addresses the crowd that they had set up a competition between the states to see which state has more support for Presidential Candidate Obama. His call to action is Text your zip code to [XxXx] to show your support. Then the jumbo-trons in the stadium show a US map with stars exploding to demonstrate when someone from that state sends in a text message. The response is overwhelming. Turning texting into this type of competition was extremely helpful to the Obama campaign because it provided them the user’s phone number and zip code which allowed them to target their messaging to those users.

Consider the medium:
When sending text messages to your users, remember that they may be paying to receive those messages. That means that you should be judicious with the amount of messages that you send. You can also gauge your frequency of messaging based on what you know about the group. For example, the # of messages in Obama campaign went up significantly as they approached election day.

Empower Along the Way
Think about how you can empower you activists to support your cause. During the Obama campaign Paul Notzold visited 10 cities in 10 days and projected text messages he received about why people were voting for Obama on public buildings. This was a bit of a missed opportunity for the Obama campaign because the text messages went to the artists phone and not directly to the campaign. Perhaps, the campaign could have coordinated with the artist to expand the distribution list.

The work that Paul Notzold is doing with mobile technology is really interesting and it is definitely worth a trip to his site.

Share Your Success and Disasters
Another theme throughout the day was to share your successes and disasters. People want to learn from your mistakes. They want to embrace your successes and follow your lead. Present at barcamps and conferences and share knowledge on your blog.

Other Tid-bits:

Gathering Honest Feeback
When chatting between sessions about how to get honest feedback from surveys / interviews we came up with the following tactics to get honest feedback from participants:

Ask indirectly, “what would your ‘friend’ / ‘co-worker’ say about [topic x]
Follow up with: “Other participants provided these responses to the same question, rate how true you believe them to be.

Fundraising
The Humane society ran and A/B test of mobile subscribers. Half of the list received an email that asked them to donate. The other half received an email and text message asking them to donate. Subscribers that received the text message were 77% more likely to donate than those who did not receive the text message.

Random Stats
70% of people are still not on smartphones. Yes techies, not everyone owns a iPhone

Final Thoughts

While this was my first exposure to mobile technologies, it seems that the strategies and tactics of a good communication plan apply here as well: know your audience, design for engagement, target your message, provide them clear calls to action. While attending the sessions, I also consider how similar the advice that was provided here was to advice provided for designing for social media engagement.

Great event and I hope to learn more about mobile technology soon. Who knows maybe I will even get a smart phone soon.

Where are the Drawing Tools in Visio

nospam@example.com (Brian Verhoeven) — Wed, 15 Apr 2009 08:50:49 -0400

I was recently working on a site map and I wanted to show a secondary relationship between two pages. Up to this point, I had been creating fairly strict hierarchal representations and the connector tool worked well for my needs. In other tools that I am more familiar with, I'd reach for the pen tool and draw a dotted line connecting the two boxes.

Visio's connector tool

I assumed that Visio would have basic drawing functionality because it is a pretty good diagramming tool; however, I didn't notice it in the tool bars that I had opened. I was looking for either a fountain pen icon or pencil because that is how this functionality is represented in other applications. When I could not locate those icons, I turned to search. I tried "Draw" and "Pen" and "Drawing" but I didn't notice anything that seemed appropriate in the first 10-15 results. Hmmmm. Clearly, I am not thinking about this functionality the same way as the application wants me to.

A few days later, by accident, I clicked on the icon that looks like green circle overlayed on a blue square. Aha! The drawing toolbar popped up in my canvas and it contained the pencil tool and a freeform line tool! I am still getting used to the way that I have to draw in Visio; however, at least now I know where to find the tools.

Visio's Drawing Tools are represented by the Circle and Square

Visio's Drawing Toolbar

A few key take-aways that can be applied when designing web applications.

Icon development is definitely challenging; however, you can achieve better success if you consider how your users think about the functionality that you are attempting to represent. For example, when users think about the activity of drawing; are they more likely to think about shapes or the tools (pen, pencil, eraser) that allow them to draw? Activities that you may want to perform when considering how to represent functionality/idea with an icon include: brainstorming, word association, exploring other icons that represent the same thing, and, of course, testing with users.

If your application's help documentation is a searchable database, make sure that most relevant content to a user appears in the first 10 results. When I search for "Drawing" in Visio Help, the drawing toolbar did not appear in the first 25 results. Also keep in mind that if the user has turned to the help documentation, he is not necessarily using the vocabulary used in your system.

Disclaimer: if I search "Drawing Tools," the toolbar is the first result.
A second disclaimer: When preparing this post, I noticed that the 5 result when I search drawing is "Draw a line
Help > Creating diagrams". When I clicked on this it did have the information I needed; however, when I required the information to complete my task, I did not notice this result. Perhaps, the fact that the breadcrumbs indicated that it was about creating diagrams made me ignore this result. Nevertheless, the result was there but I did not notice it.

Interface Development Tools

nospam@example.com (Corey Lafferty) — Mon, 23 Mar 2009 12:19:00 -0400

At DrupalCon this year, the first presenter I saw asked that the entire audience please blog about their favorite tools, tips and tricks used during development. This post is my attempt to do just that, not just in an effort to avoid feelings of shame if I ever ran into that presenter again, but also to share a nifty trick or two with other interface engineers (aka front-end developers, aka "the design cutter-upper guy/gal"). The following is a list of those tools and sites that I use almost every day when implementing designs and tracking down browser compatibility bugs.

Drupal Zen Theme
drupal.org/project/zen
Zen is THE theme to start from when developing for Drupal. In addition to being clean, easy to modify and well-documented, it features lots of nifty things like roll-over admin menus on blocks and easily configured subthemes.

IEPngFix
www.twinhelix.com/css/iepngfix/
The awesomeness of alpha transparency in PNGs is eclipsed only by the stupidity of IE6 not supporting them. Well, fix that with IEPngFix. While not making IE6 100% support all possible uses of transparency IEPngFix will allow you to accomplish the common ones.

How to completely enclose a floated element
www.cs.hmc.edu/~mbrubeck/clear-after/
I'm slowly becoming a convert to the non-markup way of fully enclosing floated containers, instead of using the trusty clear div tag. However, I don't know the necessary properties by heart to specify for the :after style and which to apply to IE only... so I have this page bookmarked to easily copy them from the bottom of the explanation.

Favicon generator
tools.dynamicdrive.com/favicon/
I've tried a lot of favicon generators, but this one has worked the best for me. The transparency on the files it outputs is always clean and it seems to do a good job of shrinking larger images down to that tiny 16x16 size.

Firebug
getfirebug.com
Firebug is so essential, I doubt anyone reading this doesn't already use it.. Without Firebug I think I would still be working on projects today that I finished 2 years ago. It allows you to change HTML and CSS on the fly and immediately see the effects and, most importantly, tells you exactly what styles are effecting a particular element, what styles have been overwritten for that element, and which stylesheets the styles can be found in. It does a lot of other nifty things I don't fully understand, but that's part of its charm.

Web Developer
chrispederick.com/work/web-developer/
After a graphics program (likely from Adobe), your html editor (likely also from Adobe), and Firebug, The Web Developer's Toolbar for Firefox is likely the next most important tool. It can manipulate and give you information on just about every aspect of your page (e.g., turning on/off CSS & images, outlining elements, validating your code, display line guides, etc. etc.).

Tab Preview
https://addons.mozilla.org/en-US/firefox/addon/6132
While calling it 'essential' would be overstating it quite a bit, Tab Preview is remarkably useful. It shows a thumbnail view of the contents of your tabs on hover. Once you use it, you'll wonder how you surfed the internet tubes without it.

IETester
www.my-debugbar.com/wiki/IETester/HomePage
This is a new find -- IETester. Until this week I was using MultipleIE to work around the limitations of only having one version of Internet Explorer installed on a single machine. IETester bypasses the need for all that complex tinkering and gives you a single browser window with multiple tabs for IE 5.5, 6, 7 and 8 (see screenshot). The program is still in alpha, but I've used it for testing without any problems thus far.

Browsercam
www.browsercam.com
If IETester won't satisfy your testing needs and you don't feel like having 10 systems setup at your desk, you can go with Browsercam. While rather expensive, a membership at this site grants you remote access to multiple machines covering just about every combination of OS and browser configuration you could need. Particularly useful for Mac-phobic people like me when testing Safari.

EightShapes to launch Unify documentation system

nospam@example.com (Brian Verhoeven) — Tue, 17 Mar 2009 10:18:18 -0400

Twitter is buzzing this morning about the upcoming release of EightShapes' Unify. EightShapes describes Unify as a "suite of templates and libraries for creating better, more consistent design deliverables, faster." Be sure to check out the What You Get and Benefits & Challenges sections

I saw a demonstration of this system last summer and started experimenting with the principles behind the system but without the templates. Once I was able to get some libraries created, I was able to move from sketch to documentation MUCH more quickly. I am really excited about this upcoming release and I hope to have some time to experiment with it further.

UX Reading Lists

nospam@example.com (Brian Verhoeven) — Tue, 10 Mar 2009 22:23:58 -0400

Recently, I've come across a number of User Experience reading lists like the one created by School of Visual Arts in NYC, and this one created by Jackson Fox. I find lists like these to be very useful because I find books that I have not read like Tog on Interface and Designing for People. In the spirit of sharing, I thought that I would recommend a few books that I have found to be incredibly useful:

Reading Images: Grammar of Visual Design
by Gunther Kress (Author), Theo Van Leeuwen
Honestly, I have not seen this book discussed in UX circles; however, it provides a framework for reading images and visual compositions. The authors argue, that visual compositions, like verbal and oral forms of language can be deconstructed in to a visual grammar. As designers, if we understand the culturally based grammar of reading images, we can leverage the principles when design. It's a great read for anyone interested in visual communication.

Communicating Design: Developing Web Site Documentation for Design and Planning
by Dan Brown
I often find myself referencing this book as a create a piece of UX documentation that I haven't created in a while, or as I prepare for a client meeting. Dan provides excellent examples and ideas to consider prior to presenting your materials to clients. If you don't have it yet, it's a great resource.

Information Architecture: Blueprints for the Web
by by Christina Wodtke (Author), Austin Govella (Author)
I haven't read the 2nd addition; however, my copy of the 1st addition is well used. This is a very practical book about information architecture and it uses language that people who are not IAs can understand. This is the book I find myself lending to people who want to find out more about IA.

What are you reading that I should check out?

Weekly Reads (Week of March 6, 2009)

nospam@example.com (UxD Team) — Mon, 09 Mar 2009 09:21:22 -0400

Should design shape behavior?

Interaction Design is about 3 things: Conversations, Engagements, and Embodiments

Dan Willis' awesome IxD09 notebook sketches / doodles

Designing in the Open

A very solid interactive design reading list

Illustration tutorials for vector icons.

ROI of Error messages

Design by Community vs. Design by Committee

Common Typography Mistakes

10 Common Usability Mistakes

Defender of the Favicon: a favicon that you can play.

How I Might Deal with IE6

Blimpie logo redesign lacks... pretty much everything.

Wanted: Website Layout System

Great Sketching Stencils for OmniGraffle

Thoughts on RFPs and Proposals

A list of Interface Design Resources

Writing for the Web: A Few Tips

nospam@example.com (Matt Humphrey) — Mon, 23 Feb 2009 17:33:52 -0500

In most cases, a visitor is on your web site because of the content you have to offer, not because they heard that the navigation structure and page layout is amazing. Why, then, is there considerably less time spent (if any) thinking about content during web site design projects?

In the last virtual seminar hosted by User Interface Engineering (UIE), web usability and content expert Ginny Redish provided some useful tips on how to effectively write and structure your web content. In this post, I want to highlight and expand on some of the important points from the seminar.

Don't hog the conversation.
Respect people's time, especially if yours is a heavily task-based site. People are coming to your site in order to answer a question, or complete a task. Long overblown flash introductions and long paragraphs of rambling text are two examples of things web users generally don't care about. Leave them off your site unless there's a compelling reason to have them.

Hold the fluff until your visitors are ready for it.
Get directly to answering the question that is probably in the user's mind. There's a time and a place for marketing fluff and specific jargon - when you know you're speaking to a very specific audience. If you're not, the fluff and jargon can become confusing and distracting. According to Redish, "you market best after you have satisfied your site visitor's needs."

Write to your site visitors.
Think about you site's potential visitors, some possible scenarios, and how they want to see and read content on your site. Use the words your visitors might use. Site designers tend to overestimate the words their readers know.

Cut! Cut! Cut!
Look at your web content and get rid of half of it. It's probably fluff and jargon. That might be a stretch, but you know what I mean. Think of simpler and quicker ways to say what you need to say. People are much less patient readers on the web - they want concise, actionable content that will help them get to where they want to go.

Conclusion/Note
Writing for the web is just one of many areas of focus in the grand scheme of content strategy. A List Apart often puts out great articles relating to the various aspects of content strategy - so keep up with them: http://alistapart.com/topics/content/

Additionally, the folks at Brain Traffic seem to know a thing or two about content strategy.

Mash-ups + open goverment, troubling or triumphant?

nospam@example.com (Sophie Campagne) — Thu, 12 Feb 2009 14:31:58 -0500

The New York times released a recent article about a site mashing-up google maps and Prop 8 donors. The result? Public access to names and addresses of people in a handful of states who have financially supported the ban of same-sex marriages in the state of California. The Google API makes the map design recognizable and easy to use.

According to California law, details on contributions of $100 or more are available for public access.

The down side has included harassing letters, phone calls and emails to some of the listed donors. One University of California professor explained that despite his support of civil unions for gay couples, he made a $100 contribution because he didn't want to change the traditional definition of marriage. Following his donation, a dozen of his colleagues and supervisors were copied on an email sent to him berating his involvement in supporting Prop 8.

From nytimes.com,

Eightmaps.com is the latest, most striking example of how information collected through disclosure laws intended to increase the transparency of the political process, magnified by the powerful lens of the Web, may be undermining the same democratic values that the regulations were to promote.

Where does one draw the line between open government and protecting democratic rights? A professor at Georgetown proposed that state sites disclosing donor information should ask people interested in downloading the data to provide identification through a credit card.

Equal transparency on both ends, is that where this is headed? What do you think of using the web to expose people's support of specific policy?

Weekly Reads (Week of February 6, 2009)

nospam@example.com (UxD Team) — Thu, 05 Feb 2009 17:34:36 -0500

Caffeine Free Sprite CSS Optimization

a great way to think about the web as a series of frameworks.

Another color scheme generator

Anticipating usability changes included in Drupal 7

Compelling arguments for placement of H1 tag

Fantastic resources alert: 12 screen patterns