UXD Notes: Website Navigation

To learn more about User eXperience Design, I’m:

  • Taking the Udemy course “User Experience Fundamentals” by Joe Natoli.
  • Reading the book Don’t Make Me Think) by Steve Krug.

According to the timeline I created in a previous post (this is my inner the project manager speaking), I should have this course completed in 10 weeks from now…

This Week’s Learning Takeaways

Disclaimer: My takeaways are not comprehensive of the resources I cite and therefore should not be read in lieu of. If I’m citing resources, I’m recommending them to you. If you like what you read, please support the creator.

User Experience Design Fundamentals: Session 2

(I’ll be honest, I haven’t looked at this yet. I reported two posts ago that I discovered I was pregnant. This week, I lost the pregnancy. This week has been a physical and emotional rollercoaster, and I didn’t have the capacity to dedicate to new learning. The loss hasn’t necessarily hindered my focus, but I haven’t seen in color all week.)

94bf59ff24f8dc667d9078873d8afd15

Don’t Make Me Think: Chapter 6

“It’s so easy to forget that the Web experience is often more like being abducted than following a garden path. When you’re designing pages, it’s tempting to think that people will reach them by starting at the Home page and following nice, neat paths you’ve laid out. But the reality is that we’re often dropped down in the middle of a site with no idea where we are because we’ve followed a link from a search engine, a social networking site, or email from a friend…”

  • Web sites do not offer the senses of scale, location or direction that we rely on when navigating in the physical world. It is imperative that a site’s navigation structures are effective.
  • Generally, users will either “ask” (aka search) or browse first. Because of this, a site should also follow standard navigation conventions:
    • Site ID – This is usually the logo in the top left corner on every page. (It also often serves as a button.)
    • Utilities – These often include the 4 or 5 most commonly used utilities in the top right corner. The most frequently used include a search box, “Contact Us” link, “Shopping Cart” link, and “Sign In”/”Your Account” link. (Others are typically found in the footer of each page.)
    • Sections – This is the primary navigation. On this site, the sections include Home, Blog, About, and Contact.
    • Subsections and Sub-subsections – These lower levels of the hierarchy often don’t get the attention required for effective “persistent navigation.” This creates opportunities for users to “get lost” in the lower level pages of the site.
    • Persistent (or Global) Navigation – This helps users know where they are and where they’ve come from. Breadcrumbs (below) and tabs also serve as “you are here” markers.

breadcrumb-navigation-in-interactive-wireframes

New Skills Learned: HTML: Details tag, Nested unordered lists

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s