Project 2 - Layout Wireframes

Home Page:

Product Page:

Checkout Page:

Week 4 Reading

Summary:
In this chapter, Steve Krug takes us on a journey through the daunting, restrictive (yet all-encompassing) homepage. He establishes that a homepage (namely an eCommerce site) must accommodate site identity and mission, site hierarchy, search, teases (content and feature promos), timely content, deals, shortcuts, and registration. Including these things, it must then show the user what they're looking for, expose them to new things, show them where to start, and establish credibility and trust. He then explains the many pitfalls that become homepage design, such as how most advertising partners will want the prime real estate it provides, and how these obstacles can cause designers to lose sight of the big picture, namely that the home page must make clear what the site is and what it does. He explains that at the first glance, a good homepage should answer for the user the four questions: What is this? What can I do here? What do they have here? and Why should I be here and not somewhere else? He explains how to answer these questions by using a well-crafted tagline next to the site ID and a welcome blurb that describes the site quickly and in an abbreviated fashion. Finally, he closes by revisiting the concept of navigation. This time for the homepage, he explains that navigation can be different from the rest of the site, but it must be similar enough so as not to be confusing. Similar wording and identical order is necessary in this case.

Links:
http://www.fivestarwebdesign.com/home.htm
Though it serves as an advertisement of sorts for a web design service, this site quickly lays out four things a good website should have.

http://www.coolhomepages.com/
A vast collection of decidedly good homepages in several different categories.

http://www.copyblogger.com/create-a-tagline/
A sort of "Taglines For Dummies" article laying out the steps to strong tagline writing in an easy to digest manner.

Project 2 Project Statement

Quinn Davis & Matthew Barrow

Client:

Daniel Smith  

Local Art Retailer

danielsmith.com

Problem:

The site in its current incarnation suffers from a number of issues, mostly related to navigation. The primary navigation, placed intuitively on the top, is reiterated on the left side bar in a convoluted, greatly expanded list that leads to confusion. Navigation by supplier brand sits just beneath the main nav with the same visual look and size, and would benefit greatly from the establishment of a visual hierarchy. Persistent navigation disappears from item pages, which doesn’t bode well for usability.

As well as navigational issues, the layout of the site is slightly cumbersome, with several size inconsistencies in rows and columns that don’t flow well. Items compete on their own page with suggested items (placed directly adjacent) and item customization choices, which are listed at length and would benefit from drop down menus.

Solution:

We will begin by building a new site map, to tighten categories and make sure the site follows a logical path. We will then focus on navigation, making sure it is as intuitive as possible by establishing a clear visual hierarchy and making use of established design conventions. We will finally focus on content layout, to make sure the site is visually appealing as well as functional. 

"Week 3 Reading"

Summary:

In this week's reading, Krug explains the importance of navigation to a website, likening it to finding your way around a department store. He goes on to explain how the two examples are similar in that they both are important to finding certain items, but the similarities stop at the point that a website is not a physical space, thus users don't have the benefit thereof. As such, certain steps must be taken by websites to ensure that the user can find their way around. Making use of well-established conventions, every page of a site (not including registration, transaction, and home pages where they would be a distraction) should have a persistent navigation that includes a Site ID (preferably in the upper left corner),  Page Name (generally at the top), Sections and subsections (also at the top, with the current section notated), Local navigation (often at left, including sites related to the current site), “You are here” indicator (Breadcrumbs work well for this purpose), and Search (As many users will eschew browsing altogether for search. Should use simple conventions of being labeled "Search" alone, possibly with a button that says "Go"). He also points out effective navigation techniques that are often reminiscent of physical items, such as tabs.

Related Links:


http://www.webdesignpractices.com/navigation/breadcrumb.html
Brief explanation of - and stats for - breadcrumb navigation.

http://graphicdesign.about.com/od/effectivewebsites/a/web_navigation.htm
Short summary of five rules easily-navigated sites follow.

http://www.webdevelopersjournal.com/articles/navigation.html
Longer tutorial on designing Web navigation, with slight differences to Krug's philosophy.

Three E-Commerce Sites That Could Use A Redesign

Daniel Smith
Local art supply site. Could benefit from clearer navigation, utilizing hierarchy. The ordering process could use clarification and reordering.

eBay
23rd most visited site in the world, but popularity does not necessarily translate to ease of use. Anyone who has ordered through eBay is aware of the steep learning curve involved.

Arngren
What... uh... What's going on here? I'm not entirely sure what this site is selling... Hovercrafts? Dummy cameras? Robots? There's virtually no negative space.

Week 2 Reading

Summary: Having established in the last reading that most web users simply scan webpages - as one would a billboard – opposed to actually reading them, Krug begins this reading by explaining to designers how to design websites that resemble billboards, in the sense that they work effectively at a glance, without being scrutinized over. The five steps he lays out for success with this method are: Create a clear visual hierarchy on each page, take advantage of conventions, break pages up into clearly defined areas, make it obvious what’s clickable, and minimize noise. As the best websites typically follow these guidelines, the best way to sum it up, taken directly from the text, is to not bother “re-inventing the wheel”. The author then goes on to reiterate that (and explain why) users prefer mindless choices. So preferable is navigation that requires little to no thought, in fact, that Krug states in his second “law of usability”: “It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice.” Given that knowledge, we can discern that numerous, simple steps are better than fewer, more difficult steps in site navigation. The reading finishes with Krug explaining at length his third “law of usability”: “Get rid of half the words on each page, then get rid of half of what’s left.” He states the biggest offenders in the area of needlessly verbose sections are “happy talk” (self-congratulatory, content-free small talk) and instructions. By reducing the amount of text accompanying these and other areas, overall noise is reduced, useful content is more prominent, and pages become shorter, requiring less scrolling.

Response: All good advice. Most of it seems to be common knowledge at this point (the importance of visual hierarchy, conventions, minimizing noise), but some comes as a surprise (users prefer several mindless choices over fewer that require thought). Some of it seems contrary to our nature as designers. Removing unnecessary text is especially hard for me, as I find I tend to throw a lot of words into sites to pad out what little I know about design, as long as we’re being brutally honest with ourselves. Something to work on, I suppose.

Relevant Links:

http://webdesign.tutsplus.com/articles/design-theory/understanding-visual-hierarchy-in-web-design/

Fantastic post that lays out everything about visual hierarchy, from its history to its use in modern design, with helpful diagrams illustrating important points.

http://netaccountant.net/website-design-for-accountants/web-design-conventions/

A list of ten important web design conventions with explanations of how they make for a good website, using Amazon.com as an example.

http://goarticles.com/article/Concise-Writing-Tips/3847631/

A short article that states tips for concise writing, including reducing needless words, and choosing strong words to replace several weaker ones.

Portfolio Site - Layout Sketch