Forum One: User Experience & Design Blog

Web site makeover or total overhaul? Lessons learned from a kitchen remodel.

nospam@example.com (Brian Verhoeven) — Thu, 29 Oct 2009 16:38:51 -0400

Recently a friend asked me, “How do you know if your company’s web site needs a visual design refresh opposed to a full redesign?” Because we both spend a lot of time cooking, I talked to him about the decisions he made during his kitchen remodel process and how they may apply to his web site as well.

Why are you considering a remodel?
Believe it or not, determining if you need a web site redesign or face-lift is very similar to investing in a home improvement project. It all starts with a solid understanding of the aspects of your kitchen that don’t meet your needs and what type of budget you have for the project. Some reasons you may be considering a kitchen remodel:

Is your family expanding? Have you suddenly found yourself doing a lot more cooking? Did you compromise on the kitchen when you bought the house? Are you constantly misplacing your utensils, pots, bowls because you do not have enough storage? Do you suddenly have the budget for the kitchen of your dreams? Did one of your appliances die? Are you generally happy with your kitchen but feel it looks dated?

Similarly, when considering a web site redesign or refresh you are probably prompted by similar changes in your needs:
Are you suddenly producing more content? Is your current site a starter site? Do you or your users have a hard time finding information on your web site? Have you been recently provided additional funding for your web site? Does the site continue to support your goals but feels dated?

It's Time for a Change, Now What?

Once you've identified that there is an issue with your kitchen / web, you have options on how you plan address them:

reface your cabinets

full remodel

upgrade your appliances.

Cabinet Re-facing
You do not require a bigger kitchen. You find everything you need with ease. The cabinets just look out of date. You’re a good candidate for cabinet re-facing.

The same principles can be applied to your web site. If your goals are being met and you are happy with the general structure of the site (content organization and layout); you’re probably a good candidate for a refresh.

The Remodel
Do you have a structural problem that prevents you from finding your tools? Is your kitchen just too small and you need more room? Do want more appliances (bigger fridge, a wine cooler, etc). More room, more cabinets, better organization, new appliances all suggest that you are looking at a remodel if you have the budget.

Similarly, if your web site is making it hard for users to find information or you want to add large pieces of functionality that were not previously accounted for; it’s probably time for a redesign.

Upgrading Appliances
How I long for a nice Subzero stainless steel refrigerator with side-by-side doors. While I am dreaming, why don’t we add a Wolf or Viking oven and range to the wish list? Appliances are expensive! People usually only replace them when 1) the old ones break, 2) they are investing in a larger remodel.

On the Web; however, people add new appliances (widgets, tools, functionality) to their site all the time. This is usually where the trouble starts and before too long you have that Subzero refrigerator, two avocado 1970’s ovens opposite each other, a fantastic wine cooler and disposal held together by duct tape. Not to mention your previously organized recipe collection is now in four or five places—one of which is not even in your kitchen!

Why we Refreshed forumone.com in early 2009

Our last redesign of forumone.com was in 2006 and the site was built on a custom CMS (syntaxCMS). By 2009, the visual design felt very dated and we were missing a few key pieces of content on the homepage. Over the last few years we have been attending and hosting more events and we wanted to feature them on the homepage. We have also created a strong following on several social networking sites and wanted to provide links to those communities from our homepage to encourage more conversation with our core audiences.

The primary reasons that we went for a refresh over a redesign:

Goals / Objectives: The homepage no longer supported our expanding goals and objectives and we needed to address them in a timely manner.

Timing: We did not have design or development resources available to address a full redesign

Visual Design: The visual design felt dated and we wanted something that was more representative of the caliber of work we provide our clients.

If we just refreshed, then why are there rumors of a redesign?
It’s true . We are redesigning Forum One’s web site and we are excited to be able to share the new design with you soon. The existing technical platform, information architecture and visual design do not support all of our objectives for the new site.

Technical Platform: We used to (and sometimes still do) develop our sites on SyntaxCMS. Most of current client work is now developed on open-source platforms; most notably Drupal or Wordpress. We felt it was very important that our company web site demonstrate our abilities with these technologies.

Information Architecture: There are significant tweaks to page layout, interactive behaviors, and to some site sections that will help users more quickly access content related to their needs.

Visual Design: We really want the visual design of this site to showcase our capabilities in both coordinating a strong design and implementing that design through CSS, HTML and Javascript.

Stay tuned to our blogs to learn more about the upcoming redesign of forumone.com

Recap: UX Show and Tell at Forum One

nospam@example.com (Brian Verhoeven) — Wed, 28 Oct 2009 09:02:45 -0400

Last night, Forum One hosted a UX show and tell session with Chris Avore. Chris's idea was to bring together ux practitioners to share the documentation that we create and establish an open dialogue about the work that we do. Nine user experience designers gathered in Forum One's conference room for a little less than two hours and we discussed usability reports, wireframes, and creative briefs. In short, we participated in a UX show and tell.

Usability Reports
One of the participants brought a very detailed usability report and asked the group how we translate usability recommendations into designs and keep up with them during the design process. We had a lively discussion about the format of his report and many noted how they liked the separation of severe issues that needed to be addressed immediately and smaller issues that could be address later. Some participants mentioned that they use a much more visual style of report and showed examples of reports that included a screen shot of the page / functionality under scrutiny with call outs to usability participant's comments about the issue.

Many of us suggested that the recommendations from the usability report be brought into either a bug tracking system or a requirements documentation system. For further traceability, some people suggested that you number the recommendations in a way that they can be tracked within your requirements system.

Wireframes
Another participant shared a set of wireframes. The group was extremely impressed by the level of detailed included in these wireframes (I think there were over 100+ pages of detail!). The group had some discussion around wireframing tools (of course) and also how knowledge of javascript libraries can help you make sound design decisions.

Creative Briefs
We shared a creative brief for one of our recent projects and lead a discussion around how to best capture visual requirements for both client sign-off and to inform the visual design process. While most people said that our current report format served the goals that we have for it, some participants suggested new ways for us to collect the feedback that goes into the reports. More than a few people suggested that rather than sending out a questionnaire (as we sometimes do) we interview stakeholders with our design partner on the phone, thus allowing them to ask probing questions about visual design feedback. Chris also suggested that we may be able to learn something about our moodboard process by reading Kim Goodwin's Designing for the Digital Age: How to Create Human-Centered Products and Services

Thanks again to all who attended. It was a great event!

Creating Usable Content: A Few Tips

nospam@example.com (Matt Humphrey) — Fri, 23 Oct 2009 13:01:12 -0400

This post is a follow-up to my previous post Writing for the Web: A Few Tips, where I focused on more conversational tactics for writing web content. In this post, I want to brief you on a few things you can do to make your web content more usable.

Shorten the Length of Lines
Keep your line length to a manageable minimum. Research has shown that the rate of reading slows and retention rates fall as line length begins to exceed the ideal width of about 12 words per line.^₁ As line length exceeds 12 words, the reader then needs to use the muscles of the eye and neck to track from the end of one line to the beginning of the next line. If the eye must scan great distances on the page, the reader is easily lost and must hunt for the beginning of the next line.

Great use of chunking, imagery, and clean fonts. (example from Pattern Tap)

Break it up!
Chunk your content into meaningful sections. Use section headers to reinforce the user’s understanding of the content. Doing so will provide them cues as to what they are reading. These also improve the ability of the user to scan the page in order to easily pick and choose what sections they may be interested in reading. Chances are your users are bouncing between your site, another site, a handful of social networks, and various other external influences. Providing them clear cues will help them quickly return to where they left off.

Use Images and Photographs...
...but use them wisely. Imagery is one of the most powerful tools in visual design. When choosing or creating images for a page, it's important to use graphics deliberately to support your message and communication goals.

Using images to demonstrate examples of specific ideas increases your site user’s understanding of the content. Thus, satisfaction is improved by helping the user feel that they grasp the ideas.

Imagery also can enhance page hierarchy and scanning by providing visual cues to guide the user throughout the page. Consider the use of a primary focus image with secondary supporting images. The secondary images should support the primary images by helping the eye scan through the page hierarchy. Doing so provides the user with a break from reading content heavy pages.

Use Familiar and Readable Fonts
To achieve the best possible reading speed, use fonts that are familiar and easily scanned. Save unique stylized fonts for headers and features. Use a clean font like Arial or Helvetica for larger amounts of text that requires more dedicated reading time.

These are just a few tips to ensure the best usability for the content on your site. Have any more? Share them in the comments!

-----

(1) Web Style Guide - Basic Design Principles for Creating Website
Patrick J. Lynch and Sarah Horton

Visual Design intended for CMS

nospam@example.com (Jason Powell) — Mon, 19 Oct 2009 16:40:00 -0400

Web designs for CMS can be a challenge at times, as the approach has to be taken in a different manner than it would be if the site were only static content. Many times we get excited about the most innovative and creative designs, however, these designs do not always accommodate the CMS framework and structure the developer is dealing with.
As you begin your approach to designing for a CMS, the designer must first take into account that this site is not static. We must consider that the content, navigation, and images will grow at an infinite amount and the design must accommodate any future modifications. Specific elements such as background images and columns cannot break if this happens the design ultimately fails.

Here are recognizable issues when designing for a CMS:

Any designs, layouts, or elements that are designed as if the site was going to print are bad way to begin. – Some examples are:

Elements that are meant to only accommodate a fix width or height. Fixed areas on a site, such as a fixed width or fixed height should be heavily scoped by the designer to make sure these elements never change, as a CMS is an application meant to load data and content. Usually, most elements and information change or are dynamically driven. The approach should be that the design take into consideration and is adaptable to content loading.

Gradients that go through an entire element whether vertical or horizontal should always consider expansion. Also, radial gradients should be utilized with extra caution, as this can be quite tricky or hard to achieve in an expanding elements. We love the gradient look as it adds an outstanding visual design, however the elements that use these must be heavily identified and defined.

Evaluate and scope the usage of shadows, gradients and transparencies. Moderate the use of these and evaluate the length of them as well. Think about content elements that grow. If these elements expand or contract, we must take note that the shadow, gradient, or transparency must do the same. We should consider if these effects have a place of cutoff; I.E. will the shadow end at some place? Does the gradient flow into a solid color at some point? These are areas that should be carefully thought threw.

Headers, navigation, and any copy or text that are images. – When designing for these elements you must always consider that these can change at anytime. If using graphics for any of these, you must recognize that it may be difficult or not possible to change these in the future.

Design for future needs and minimize efforts to have to create new styles in the future. – An example of this may be where as a header is created and a client needs a new one using that style, however the header was specific to the existing content. The header style didn’t consider wrapping or long text and distorts because of this. Create designs for most elements and even scope out and design for elements a client may wish to add in the future. By doing this, you help to keep a consistent look and feel and keep your visual design clean, even as future elements or modifications are added.

Text-wrapping elements – What happens if the header is too long for the background element? The design should always consider this as the client may wish to change this element text. Be cautious on how you use fixed widths and make sure that text can wrap in those elements accordingly.

As overview, just remember it is important as a designer to understand the CMS and how it works, and map out a fully thought-out design strategy and attack plan. The designer must think to create a stable design first, and innovative and creative second or else you may face a challenging situation in trying to fix what has been created. Solve tomorrow's problems with today's design!

Forum One to Host UX Show and Tell

nospam@example.com (Brian Verhoeven) — Mon, 19 Oct 2009 09:32:00 -0400

On Tuesday, October 27th from 6:30 to 8:00 Forum One will host a UX Show and Tell at our headquarters. We still have a few spots available. Please contact Chris Avore to RSVP.

What is UX Show and Tell

A UX Show and Tell is a small, informal gathering of UX practitioners to critique each others work and provide insight on how to better communicate ideas. It is all about being a better communicator and a better designer.

Chris describes the UX Show and Tell as..

a casual get-together that’s all about the work. Show shortcuts. Ask what to annotate in a wireframe. Practice writing scenarios and user stories, and identify one from the other. Share resumes and portfolios. Get feedback from practitioners instead of stakeholders.

Format
Each presenter has about 10 minutes to show his or her work and share dialogue and get feedback from the group.

The presenter will introduce the document to the group by:

explaining what document/deliverable you've brought to share and a background on the project/audience/etc
Explain whether you're demonstrating a unique way of communicating OR if you would like feedback on how to improve the documentation that you've brought

If you'd like feedback, you will be expected to ask targeted questions, particularly if you need feedback on the document itself.

Chris held the first UX Show and Tell in September. You can read more about the first UX Show and Tell session on Chris Arove's Blog. Chris is also taking the UX Show and Tell on the road to Interaction 10. He will be leading a UX show and tell session during lunch on Sunday. If you're attending be sure to bring some work samples to get in on the fun!

We hope that you will join us!

NPR’s API and Open Data (Public Media Camp DC 2009)

nospam@example.com (Sophie Campagne) — Sat, 17 Oct 2009 16:24:28 -0400

Today, I attended Public Media Camp in DC to hear/discuss with locals how Public Media + Social Media trends are shifting. Daniel Jacobson from NPR held a session on NPR’s API. With a goal of publishing NPR content through various channels, opening up the API and building NPR.org on top of it has resulted in NPR’s content showing up repackaged on iPhone apps, member station sites, etc.

The NPR API's target audiences include NPR itself, partners, member stations and the general public. NPR sees the API as a great opportunity to allow the public to cultivate and repackage NPR content in ways that the NPR team doesn't have resource time or expertise to build.

One example of a NPR mashup (content + comments) includes http://www.twitter.com/NPRbackstory, which uses Yahoo Pipes to display NPR stories into a twitter feed.

WBUR is able to pull in NPR stories wrapped in WBUR.org's visual identify. Requires no human publishing, but of course means they have no control over the content within the news story.

Geomapping’s up next. Here’s a test project Daniel’s been working on: http://danieljacobson.com/NewsMap using Yahoo Placemaker which scans text to guess location and ultimately show stories overlaid on a map.

NPR's API output formats include: NPRML feed, RSS, MediaRSS, Podcast, ATOM, JSON, HTML Widget, Javascript widget - learn more on npr.org/api

Want more? Here’s a collection of articles about the NPR API -> http://delicious.com/metacreek/nprapi

Personas in comic form

nospam@example.com (Sophie Campagne) — Thu, 15 Oct 2009 11:04:45 -0400

A fun interpretation of personas, illustrated by Brad Colbow.

Personas are fictitious characters created to encapsulate the needs of target users of a site or product.

Indi Young, the star of his story, originally hails from Adaptive Path and is well known for her work on mental models, an audience research method mapping audience tasks to site structure.

Enjoy!

DataMasher - the IA perspective

nospam@example.com (Courtney Clark) — Wed, 07 Oct 2009 19:53:08 -0400

In early July, Forum One participated in the Apps for America 2 contest, organized by the Sunlight Foundation.

The Background
The goal of the contest was to show “that when government makes data available, it makes itself more accountable and creates more trust and opportunity in its actions.”

As we put together our Forum One team, we came up with our own set of goals for the website, eventually called DataMasher. DataMasher would:

Use government data from Data.gov

Create something with returning value

Let users interact with the data in ways that they couldn’t before

With a team of five people (two developers, one information architect/designer, one project manager, one advisor) and four weeks to create something, we hit the ground running!

Since data.gov is full of state-specific data, we decided to create a website that could include any type of data, as long as it was broken down by state. DataMasher allows users to combine any two data sets and display the results in a table and on a map.

What I Learned
With a limited amount of time, there are a couple of things I kept in mind while creating the information architecture and design:

Focus on a small set of solutions and goals. Do them well.
We knew that we would never get the site done in four weeks if we tried to add every bell and whistle. We had to move fast. I chose to focus on a small set of pages that we could build on (home page, detail page, list page).

Be flexible. Constantly brainstorm.
These two go together. I did tons of sketches, with different layout and functionality options, and presented those to the developers. We chose which solution to move forward with based on what required a low level of effort on the development site and still achieved a good user experience. No solution was perfect. We brainstormed and changed as needed to keep things moving. Below are some of my early sketches.

Maximize the easy stuff.
We built DataMasher on Drupal. Throughout the process we thought,

What does Drupal do well (or innately) without customization? Let’s do that!

For example, within Drupal it is easy to add commenting and rating systems. So, voila! Stars and commenting were added. I just had to figure out where to place them.

Keep it fresh.
We wanted users to see something new every time they came to the site. The easiest way to do this was to incorporate a running list of the newest items on the home page. In this case, those items are mashups.

Keep the design simple.
We didn’t have a lot of time to apply a design (or theme), so I keeping the visual layer simple was an important technical objective. I used standard web-safe fonts throughout, and not a lot of images. As you can see the buttons in the right column are simple blue backgrounds with different colored and sized text. If I had added rounded corners everywhere, we would have needed images for each corner.

Test. And then test again.
There were a couple of items that weren’t completely intuitive.
The name
We originally planned to name the website Indik8r (pronounced indicator). We chose this name because after a user combines sets of data, they get a map that shows how the states rank, and users can identify trends or indicators. After we shared the concept and site (in very early stages) with a couple of coworkers and friends, we heard from all of them that they didn’t understand what we meant by Indicator and why it was spelled wrong. Our solution was to rename and open up to forum for suggestions and DataMasher was born.

The explanation
We wanted users to do a couple of initial things on the site:

check out the data sets

check out the mashups

create a mashup

The original designs showed each action, but again, after running it by a few folks, they didn’t get it. They didn’t understand what a dataset or a mashup was, or how to create one. So, I went back to the drawing board and tried to address these issues.

I first attempted to add more visuals and examples to make it clearer. I started with a mashup. How do you represent a mashup? My idea was based on a Venn diagram, which shows two items and where they overlap.

Before:

After:

Second, I simplified the information even more, attempting to answer the user’s question of “So what?” The user needs to know how DataMasher works and why they should participate. What do they get? The result was the final infographic on the home page.

Before:

After:

Thanks, Come Again - Web Executive Seminar

nospam@example.com (Courtney Clark) — Mon, 05 Oct 2009 21:38:16 -0400

The November Web Executive Seminar is quickly approaching! This year we're focusing on how organizations keep users coming back to their websites. Join us on November 5th for "Thanks, Come Again: Audience-Centric User Experience"

Over the years I've worked on several project where we focus on establishing a strong foundation for a website with intuitive navigation, clear layout, and beautiful visual design, but the work doesn't end there. Websites, like cars or houses, require continual maintenance and improvement. But how do you know what your audience wants? How do you create a compelling user experience that keeps your audience engaged? How do you get more users to return to your site? What does it look like?

During this event, speakers will tackle these tough questions and share lessons learned. You'll learn what other organizations are doing to keep their audiences coming back for more.

Register now!

Online School for Girls

nospam@example.com (Sophie Campagne) — Mon, 28 Sep 2009 16:34:38 -0400

I was recently surprised to discover that a local school is leading an effort to partner with three other US schools to launch an online girls school, merging two concepts: thanks to today's technology, obtaining an education no longer requires a person to physically sit in a classroom, and single sex education has its merits. In fact, studies show that girls tend to engage and participate more in a single sex learning environment, and that females respond to technology differently than males do.

This last fact is not surprising to me. Social behaviors vary between males and females at a young age and carry through into adulthood. I remember reading similar research from a 2002 Nielsen Norman report while conducting audience research for a children's web site we were redesigning.

For this online girls school program, teachers design the curriculum, and students work through the material largely independently. This model lowers the barrier of engagement across geography, allowing registered students to exchange ideas with other female students and teachers around the globe, with whom they would otherwise not have an opportunity to interact.

Given that more than 4 millions college students are already taking classes online, it seems like a natural expansion for online coursework to be conducted at the highschool level. In fact, a national survey released in January by the Sloan Consortium, an online education organization, estimated that the number of K-12 students nationwide who took online courses had increased by nearly 50 percent since the 2005-06 school year. [1]

Because research shows that young girls respond best to environments where connectivity is emphasized, I'm interested in hearing what the program's measures of success are, and how it will overcome time differences and geographical barriers for an audience that thrives on connectivity. Shared publishing, Wikis, Web Cams, what else?

A great user experience and service design opportunity - customizing the experience to the target constituents' needs. And exciting to see to what extent technology will break down those geographic and collaboration barriers.

[1 ] http://www.washingtonpost.com/wp-dyn/content/article/2009/07/05/AR2009070502424.html

Nifty iPhone Webclip Icons

nospam@example.com (Corey Lafferty) — Fri, 25 Sep 2009 15:15:12 -0400

We all know about favicons, but not everyone is aware that the popularity of the iPhone has introduced a new concept similiar to the favicon called the iPhone webclip icon. Currently if you push the big + symbol in the iPhone Safari browser to create a bookmark, you are given the option to "Add to Home Screen."

Doing this will create one of those rounded, glossy iPhone icons on the home screen that links directly to the website. On most sites, the icon will be a very tiny representation of the website's homepage. For example, bookmarking the site you're reading right now, using its homepage as the icon, would lead to an iPhone webclip icon that looks like this.

That's pretty cool and all, but it doesn't convey much information other than "you're looking at something we've made really tiny." If you bookmark a few websites, it's unlikely such icons would be very useful in differentiating them. Luckily, there's another option. You can create your own icon, much in the way you do for a favicon.

Simply create a 45x45 pixel PNG file and name it apple-touch-icon.png. You need not add the glossy, rounded look to the file as the iPhone will do that itself when it creates the icon. Drop that PNG file into your site's root directory, and you're good to go. For this blog, I simply used a slightly larger version of our favicon. Adding this site to your iPhone's home screen now yields the icon shown below.

To create slightly crisper images, I've seen others suggesting using an image size of 158x158 pixels, which the iPhone will automagically shrink to the proper size. If you'd rather store the image in a directory other than the root (or you'd like to name the file something other than apple-touch-icon.png) you can simply add this bit of code to the of your site, changing the directory and filename to your liking.

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.