Lesson 2: Form and Function

Click for closed captioning

Next Step

Step 2: Navigation in Action

Click for closed captioning

See different styles of navigation in action, from traditional to cutting edge.

The websites discussed in the video include NPR, Plated, Ippon Mattsu Beer, Ed Ou Photography and Quartz Magazine.

Usability expert Jakob Nielsen researched and published the eye tracking study of Internet users that is the source of the F-shaped pattern I cite in the video.

If you want more data-driven facts about usability, an article by Cameron Chapman aggregates the findings of research studies relevant to web designers.

Design and Tone

Click for closed captioning

Explore how aesthetic choices shape the tone of a website and help communicate content.

This video discusses the website of The Andy Warhol Foundation for the Visual Arts, The Louvre, Grizzly Bear and Dolly Parton.

In the video, I suggest you visit the website of a musician, take stock of the design, and then compare the site to a musician from the opposite genre. It's a fun way to think about how design can express culture.

Next Step

Step 3: Tips, Links and the Wisdom of the Crowd

The word cloud below is made from the phrases you used to describe well-designed websites.

Words like simple, easy, clean, friendly and clear came up frequently. Many of you also noted how good photography, logos and information graphics were vital to the overall design. We'll talk about working with images later in the course.

Cluttered, busy, unfocused, clashing, confusing, outdated– these were among the adjectives the group used frequently to describe poorly designed websites. Students often described not being sure what the purpose of a website was.

One student found a website with the "cheesy loop of 1970's or 80's synthesizer Muzak," while another found one with "dense, meaningless graphics."

"The site is for a symphony," said one student, "but the page is not lyrical."

What should you think about as you plan your site navigation?

1. Be specific and concise with headlines, titles and menu items for every page on your site. Navigation is not the place to get wordy or excessively creative.

2. Google Adwords can help you figure out the relative popularity of potential keywords for your menus and titles.

3. Internet users are incredibly impatient and do not forgive confusing navigation. They'll bounce. "To gain several minutes of user attention, you must clearly communicate your value proposition within 10 seconds," writes Jakob Nielsen.

4. Writing for the web is not like writing a novel. Be pithy. In Slate Magazine, Michael Agger amusingly illustrates how people read online.

5. Whether it's web design, photography or creative writing, editing is tough, and many people keep more content than they actually need. Quality and competence come across quickly, so don't be afraid to edit down to your best stuff.

"Design and typography do matter. It's about hierarchy of information and how people perceive information."

"On the other hand," continues New York Times graphics editor Amanda Cox in an interview with the Harvard Business Review, "it's easy to believe that it matters more than it does. If you make a fantastically interesting chart and some poor design decisions, the data will still come through. If you make a bad chart with a beautiful design, what have you done, really?"

What do you think? True, we're all willing to put up with poorly designed websites if we must. We're not going to refuse to pay our mortgage, for example, if the bank website is poorly designed. Craigslist is wildly popular even with crummy design, as a 2009 Wired article points out.

That doesn't mean design can't improve a user's experience even more. When design and good information work together, everybody wins.

Next Step

Log in to Moodle to complete Assignment 2.