Digital Media

Monday, February 26, 2007

The more I learn about the importance of testing, the more frustrated I get when I come across a site or an application that obviously has not been tested thoroughly enough. Phase 4: Build and Integrate of Web Redesign 2.0 by Kelly Goto, focuses on the technical hurdles of the build phase of the Web site and the importance of quality assurance testing before the site launches.

Goto gives the optimal formula for QA testing, though she does admit that companies with smaller budgets can still make use of testing with less formality and with less money. The recommended 10 percent to 20 percent of project cost for formal testing for projects with budgets over $70,000 seemed a little unreal to me. But I suppose there are sites out there that have those sorts of budgets. I guess I'm just used to working at companies where the online staff consists of two or three people who put the entire site together, so when Goto starts talking about a staff for QA testing my brain doesn't have the capacity to fathom such a thing. The sort of testing I usually see is launch the site and fix it later. It works I guess. But the entire online staff of two or three is usually stressed beyond belief.

I think a lot of this chapter would make more sense to me if I had more of a background in HTML and CSS. The more I get into this book, the more I think that I should be learning some basic coding skills. One of the things I do like about this book is that there are a lot of additional resources where Goto points to where to get more information about HTML or javascript or browser specs. These are very helpful for trying to implement some of the steps that Goto recommends.

Tuesday, February 20, 2007

Government genre Web sites

The most obvious indicator of a government genre Web site is the .gov ending. Most government Web sites are information portals that are designed to provide users with more information. They provide a public service function by linking to resources that visitors may want to use. For example, the Library of Congress Web page, www.loc.gov, in addition to having links to news and events at the library, has resource links broken down into several categories, including links for librarians or categorical links such as braille and audio materials. There is also a link to legislative information where you can search for bills using key words or sponsors.

Because government Web sites must be accessible to a broad audience, including those with disabilities, they are more likely to have pages that will load quickly on slow browsers and make the site easy to access. When I looked at www.house.gov, I noticed that there was a button for people to make the text larger and another icon that said the site was speech enabled with a BrowseAloud plug-in. Because I have never had to use a site reader, I'm not sure if the site is easy for someone who is blind to scan, but it seems like they have at least taken people with disabilities into account on this site. There is also a hand with a pen icon next to the "Write your representative" link that I assume is for people who don't know much English.


The Access Washington site, http://access.wa.gov/, includes a list of "How do I" topics with links to sites that will allow the visitor to take the action they want. This is a great way of helping people who don't use the Internet much to find everything they are looking for in one place. The site also includes information in six foreign languages.

While looking for some state legislature sites I found out that many do not match the .gov characteristic. In fact there does not seem to be a standardized naming convention for state legislatures at all. While the Washington Legislature is www.leg.wa.gov, the Louisiana Legislature site is www.legis.state.la.us and the Texas Legislature site is www.capitol.state.tx.us. These aren't intuitive or consistent at all!

When I got to the county level, the sites were even more diverse. King County, www.metrokc.gov, had a lot of current press releases and links to local sources of news and transportation tools in addition to public records. The Whatcom County site, www.co.whatcom.wa.us, didn't look like it had been updated in awhile and included mostly links to county agencies and public records and PDFs of reports such as the budget and comprehensive plan.

Most government sites do seem to be sincerely trying to make information accessible to as many people as possible, though clearly some do a much better job than others. It would help if government Web site naming conventions were a little bit more standardized, though that's not something that is likely to happen anytime soon.

Sunday, February 18, 2007

Aesthetic experience

Give customers short paths to what they want
Mistaking the forest for the trees?
Aesthetic Experience and the Importance of Visual Composition in Information Design

"Give customers short paths to what they want" focuses on keeping site menu structure flat by having desired content within two or three clicks. Some of this seemed to contradict Steve Krug a little bit at first, because Krug says that it's not so much how many clicks one must go through, but how easy it is to click on. As I continued through the essay, however, I realized that the study was less about clicks and more about smart usability practices.

For instance, the essay talks about devoting home page space to navigation, not decoration. At first I was worried this meant put so much on the home page that the user no longer knew what the main purpose of the site is. I'm not a big fan of overcrowded home pages. However, the essay goes on to say that the designer should prioritize and group content so that users can skip over entire lists of links they don't need. By grouping content users may not realize that there is so much on the home page, especially if two or three most important things on the home page are highest in the hierarchy.

As a musician I am familiar with ABA form. I'm trying to figure out how that would translate into Web site design as explained in "Aesthetic Experience." Would the user go from the home page to a different page and then to a page that's like the home page again? I'm curious how that would work in practice. I do understand, however, the need to maintain consistency within the site so that variations of the site do stand out and cause the user to recognize what's different.

Seeing the forest through the trees is important when designing a Web site. A designer must keep the big picture in mind, and must always be thinking about what the site is to accomplish. It's also becoming more important to realize how people are using the site in relation to the Web as a whole. One interesting site I came across recently is answers.com, which doesn't really use original content, but draws from wikipedia, google and other sources to provide a definition or information when a user double-clicks on a word. The site even has a download that allows users to use a key combination (mine is ctrl+alt+click) to have a bubble pop up in any application on the computer. I've tried it in word, QuarkXPress - it works in all of them. I love it because it means I don't actually have to leave the document I am in to quickly check the definition of a word or the spelling of a famous person's name online. I'm able to use this Web application without ever having to go to the answers.com site.

Don't Make Me Think, second edition, by Steve Krug

In Don’t Make Me Think, second edition, Steve Krug follows his own usability guidelines to create a book that is practical and approachable. The title of the book is also Krug’s first law of usability. The purpose of Web pages should be evident without spending a lot of effort trying to determine what it’s about.

One of the most enjoyable parts of Don’t Make Me Think is Krug’s sense of humor. With cartoons and humorous quotes to help him make his point, I never felt like reading this book was a chore. The illustrations and humor help to reinforce the concepts of the book in my memory and apply them to other sites I visit.

Krug says the reality of Web pages is that people will scan to find something that seems to match what they are looking for and simply hit the back button if it doesn’t work. For this reason, he says Web sites should be designed like billboards by: having a clear visual hierarchy, making use of conventions, having clearly defined areas, making it obvious what’s clickable and minimizing noise. Krug also says that users don’t mind clicking — as long as they don’t have to think about what they are clicking.

Another rule that Krug emphasizes is to omit needless words. He advises removing half of the words on each page and then getting rid of half of what’s left. As an editor and as a Web site visitor I appreciate having concise information that directs me to where I want to go without a lot of unnecessary noise.

Krug’s book is ideal for both beginners and experts. While the book offers an easy-to-follow overview of Web usability for the novice, it helps veterans to look at Web pages from the point of view of the user and offers common-sense approaches to such daunting tasks as usability testing and designing for people with disabilities.

Sunday, February 04, 2007

Information architecture

Cognitive Psychology and IA: From Theory to Practice by Jason Withrow
Visible Narratives: Understanding Visual Organization by Luke Wroblewski
Usability experts are from Mars, graphic designers are from Venus by Curt Cloninger

There were several themes in the group 3 readings that seemed to repeat:

1. Readers like categories: Different people will categorize things differently but generally people categorize things by visual similarity, shared purpose or proximity.
2. To create site hierarchy, there must be visual contrast. This can be created by differing colors, textures, shapes, directions and sizes. A hierarchy allows readers to see visually what the most important element on the page is and to navigate through the page without wondering where to look next.

One of my responsibilities is designing newspaper pages so I deal with page hierarchy often. When readers pick up the paper, they (theoretically) look at the largest, boldest headline first and the lead photo on the page. At that point they may read the article if they find the headline interesting or they may scan the rest of the headlines to determine what they want to spend their time reading. If they like a photo, they may look at the cutline to see what is going on. This may lead them to read the story that goes with the photo. By organizing content so not everything is visually the same, readers have cues as to what they should look at first. This is important because readers don't want to think when they are trying to figure out where to go in a Web site. Having a hierarchy leaves readers with fewer options to mentally sort through.

Curt Cloninger gives us insight on the misunderstood graphic designer and how usability experts have gotten all the publicity while the inarticulate, right-brain graphic designer has not gotten enough credit. The main thing that stood out for me in this article was the emphasis on branding. While Web site usability may be the top priority for content sites, corporate sites that have branding as their primary goal may do better with a site with more creativity that advances the brand of the product. A brand tries to convey a certain tone and emotion - something that designers are likely to be better at than information architects. The article emphasizes the important role that both usability experts and graphic designers play in the creation of a Web site.

Tuesday, January 30, 2007

Imaginary Forces Web site analysis

1. Download plugin to view site
2. Click on projects
3. Clicked on "Our Reel" but firefox wouldn't open pop-up box
4. Looked for search button
5. Clicked interactive
6. Box disappeared because mouse went off of brown area
7. Clicked interactive again
8. Clicked honda element
9. Saw "Web video"
10. Moved mouse over page trying to find something clickable
11. click view honda air
12. Close honda air pop-up window
13. Click back to project index
14. Move mouse to icon
15. click Contacts
16. Click map and driving directions to N.Y. office
17. Page links to mapquest that says no address exists
18. tried to go back to contacts to double check address but it was in a new window so I couldn't
19. Went back to map page and clicked suggested address

Interface experience: I felt lost when I got to the homepage of this site. I was annoyed that I had to download something before I was even able to view the Web site. When I couldn't use the back button I became frustrated. There should have been a place to enter search words or at the very least a site map - clearly labeled on the home page to tell me where I was and the different options for where I could go.

I should know when I open the page what the site's purpose is. After going through the site, I still don't know what Imaginary Forces is. Are they a production company? An ad agency? I'm not sure who the audience is for this site either. Is it people who are interested in movies? People who are interested in creating movies?

I finally found a page on what the company is, but I can't read the entire text because the page does not allow me to scroll down. I had to physically restrain myself from hitting the back button. There wasn't a very easy way to get back to the home page.

The featured projects on the home page don't have anything to do with the rest of the site. The actual categories for the site are small in the right-hand corner. I wanted to click on something that was big - not something small in the corner. The categories should have been more prominent than the featured projects so I knew that they were categories. I still don't know what "Our Reel" is because I couldn't open it with my browser.

Sunday, January 28, 2007

Gestalt Principles of Perception and Human-Computer Interface

Most of the conventions for using a computer are solidly engrained in our minds. We don't think about scrolling up and down in a Web site; we know when we can click on a link for a number of reasons: our mouse turns from an arrow to a hand, the word is or becomes underlined, sometimes the color of the text changes, maybe a button lights up. These conventions give us feedback as users so that we feel confident when clicking that we will be transported to a new location.

These Web conventions offer continuity. One of Gestalt's principles of perception, people prefer continuity in their interactions. People want a Web site to feel seamless and effortless. They should be able to flow from one part of the Web site to another without thinking about it. One way to improve continuity is through consistency, one of Shneiderman's principles of human-computer interface. Menus, colors and fonts should be consistent throughout the site as should the navigation of the site.

It will also help the human-computer interface to design items into related groups of items. Using the similarity principle, we can suppose that people will see the groups as a whole rather than as individual items - this will make the material seem more manageable. This also helps to give users control of their experience by allowing them to see where they want to go.

It is also important to make sure that items that are close together really are related as items that are close in proximity will be perceived as being related.

A consistent site map on the site can help to ground the site and make people feel in control. The site map becomes the ground and the information on each individual page then becomes the figure that people pay attention to. This also allows users to feel less overwhelmed, because rather than a new page of material every time they click, only the individual content changes and they can still see where they are at in the context of the site as a whole.

It's possible to reduce short-term memory load by having reminders on each page of other pages that they may want to navigate to next. This would be an example of symmetry or closure I believe since users don't need a full explanation of the page to understand where it will go - just a word, or an icon perhaps, will suffice.

Tuesday, January 23, 2007

Interaction Design

A few years ago, when I had more free time than I do today, I tried playing The Sims on my computer. As many of you probably already know, The Sims allows you to create characters and build houses and then command them to act in certain ways. The results attempt to simulate life and the consequences that come with actions. I became addicted to the game for a time and now try to stay away from it unless I really have a lot of time to kill. In "Information Interaction Design: A Unified Field Theory of Design," Nathan Shedroff says that "Creative products and experiences require that others participate by creating or manipulating instead of merely watching and consuming." I think one of the reasons The Sims was so successful, and why similar products have been successful, is because of the creativity and exploration that can go into the game. What will the Sims do if I put two toilets in the bathroom? (just makes two toilets you have to clean later) What happens if Sims doesn't go to work? (They lose their jobs) What happens if the Sims kiss a lot? (They have a baby and get really tired!)

The game relies on good design to make it easy for people with no construction or design experience to build a house to their own specifications. The adaptive nature of the game, I think, is what makes the game so enjoyable to play. People can do as much or as little as they want with the interactivity components of the game. They can design a whole neighborhood or use the houses that have already been built. They can design new Sims or play with preprogrammed Sims. Time goes as fast or as slow as you want it to. In my experience Shedroff's assertion that the best interactivity involves high levels ofcontrol, feedback and adaptivity is very accurate.