Website Critique - {fray}

Timothy Mills
http://www.inajar.net/351/critiques/fray.html

Introduction

{fray}, http://www.fray.com, is an online storytelling magazine devoted to telling real, true stories in graphically interesting ways. The site is the brainchild of Derek Powazek, http://www.powazek.com, author of Design for Community. The site was originally launched in 1996 and just last week Powazek posted the first redesign since {fray} opened. I'll be looking at the current design here; however, I may reference aspects of the old design as well. It may be beneficial to take a look at that old design using the Internet Archive, http://web.archive.org/web/*/http://fray.com.

Audience/Purpose

{fray} exists as an online magazine of storytellers, we might think of it as a totally digital version of something like Creative Nonfiction or The Fourth Genre. Since its most basic purpose it to tell real stories from real people to other real people it could be said that {fray} takes as its audience any English speaker interested in reading about the lives of others. However, no site (save perhaps a search engine) could have such a large audience. While the readership at {fray} does seem to be rather diverse (you can see this not only in some of the stories published, but even more so in some of the comments posted at the end of the stories), the core audience of {fray} seems to be suburban/urban, college-educated, middle class men and women under 35. One might argue that the core of this group could be called Generation X, but I like that designation even less than the troublesome designation "middle class." Partially contained within this still large group we can find a secondary audience, web and graphic designers. {fray} caters to this audience by presenting each story in an unique, graphically rich way.

Information Architecture/Navigation

{fray} is divided into four sections: Criminal, Hope, Work, and Drugs. At first glance these section titles offer a rather distorted view of the stories each contains. If we had to go by the section names alone we might think that half of the site (Criminal and Drugs) is devoted to stories about illicit behavior. But Powazek has provided tag lines for each of the sections that helps to explain what type of stories one can expect to find within:

Based on these tag lines we get a slightly better idea of what to expect, and we also begin to realize that the Criminal and Drug sections won't be filled with stories of illicit behavior. One might argue that "Hope is the thing with feathers" does not really provide any further explanation as to what we can expect to find in that section. However, we should be able to assume (based on the audience) that visitors to {fray} will have some basic recognition of this line as coming from Emily Dickinson, and that they will associate the emotion in her poetry with what they can expect to find in the Hope section.

Shifting to navigation, the home page maintains the basic features that have been present since the 1996 launch: {fray} logo, link to the featured/latest story, and links to each of the four sections. But the recent redesign has seen those features rearranged along with a few other new features. The logo and tagline are still at the very top of the page, though they have become much smaller in the redesign. The main element of the homepage is still, unarguably, the link to the featured story (usually the latest story). But rather than floating somewhere in the middle of the page as it did in the old design now it sits at the top (just below the logo) spanning all other elements on the page. The home page also contains links to two other recent stories, which in my opinion is a nice addition to the site. Links to the four sections of the site hover in about the middle of the screen (at least at higher resolutions, at lower resolutions they probably sit right at the bottom of the screen). While this may seem like a poor choice, especially if we believe everything the usability experts tell us, if we consider that most of the site's visitors are probably repeat viewers looking for the newest story it makes sense to give the section links less prominence. Also on the home page (and both new) are a listing of upcoming, real-life events sponsored by {fray} and a blog, which Powazek says will be "a daily feed of links to interesting personal stories across the web." The homepage is rounded out by a standard footer with text links to each of the sections along with copyright information and a link to some of Powazek's other projects.

The main section pages are also rather easy to navigate and follow a similar organizational structure as the homepage. The very top of the page displays the logo and section title along with the section tagline. The top of the page is also home to links to each of the four sections, moving the sections links from the middle/bottom to the very top. Below the logo is a large graphically rich link to the most recent story from that section. The other stories from that section are displayed in three columns, organized in chronological order. Along with the links to the stories is the name of the author and a blurb from/about the story (typically the first few lines). The bottom of the page contains the same standard footer as found on the home page.

The organization and navigation of {fray} are both pretty standard and similar across the home page and main section pages; however, once a story page is loaded all of that changes. Since each story is presented in an unique way the navigation for each becomes unique. The most important element on any of the story pages is always the story itself, but most also contain a link back to the section the story came from. The last page of the story also typically contains a link back to the section as well as a link to a pseudo-forum for the story where visitors can post short experiences similar to the story.

In my experience {fray} is a rather usable site. But {fray} is less about providing information (and not at all about providing a product) and much more about providing an experience. It is easy to get lost at {fray}, but lost in a good way. More being lost in reflection than lost in terms of not knowing where one is or how to get back to where one came from.

Usability

I've watched many people use the site (albeit mostly the old design). None had any trouble finding the stories within each section, and none seem to have any trouble with a request such as "Go to the Hope section and find the story called ÔGiving Thanks'." If there is any problem with the usability of the site it is that the {fray} is too good of an experience. {fray} can (and has) easily consume hours of a user's time, but this is usually time willingly spent reading and searching through the stories.

Design

I've already touched on the organizational elements of the design above when talking about navigation, so here I'll try to focus on the aesthetics of the design. The homepage and section pages of {fray} have a dark and somber color scheme, relying mostly on black and dark grey backgrounds with white text. Links, including the image links to each section, appear in a dark violet, and viewed links appear in a slightly darker shade of violet. The section links are represented by cartoonish icons roughly related to each of the section titles. These icons also appear on the section pages and usually on the story pages as a link back to the section. The consistent design only spans the home page and section pages though. Each of the stories has a different design to compliment the story and the individual voice(s) telling the story. The design styles vary drastically and include everything from illustration to photography to some combination of the two. And while it may seem at first to give each story a different design (something that goes against what most usability experts suggest), it does not seem to take away from the cohesiveness of {fray} as a whole. Rather it seems to add to that cohesion by emphasizing the different voices present on the site.

Quality/Appropriateness of Writing

Right now there isn't much writing on {fray} from Powazek as site administrator (although that stands to change with the introduction of the blog on the home page). What is there seems appropriate and well written. The stories are also well written. It would seem that Powazek takes as much care in choosing the contributors to {fray} as an editor at a print journal would. It is hard to say what is appropriate writing in terms of the stories at {fray}, but each seem to fulfill the overall purpose of the site, to tell a real story. Even the postings at the end of the stories show a level of quality and appropriateness rarely seen in web forums.

The Big Picture

{fray} does what it sets out to do very well. The site presents real stories told by and for real people in graphically interesting (though never distracting) ways. {fray} remains a strong cohesive experience even while maintaining and highlighting the individual voices that make up the site. While Powazek has made some design choices that Krug (and certainly Nielsen) would not agree with, they seem appropriate to the audience. {fray}, in my opinion, goes beyond providing its users with a usable site and instead provides them with an excellent experience.