Week 5: Understanding User Experience

Imagine you discover a website that catches your interest but as soon as you click on the link you’re overwhelmed with the information and the structure. What do you do? Typically, you would exit the webpage and look for another that has an organization with your interest in mind.

That’s exactly what you don’t want to happen when users discover your webpage. Users want information that’s quick, there, and easy to follow. Structure and the organization of content can mean everything when engaging with users. You want to keep them interested in your webpage rather than just going to a different one, right?

As stated by Jakob Nielsen, Principal of the Nielsen Norman Group:

“On the Web, usability is a necessary condition for survival. If a website is difficult to use, people leave.”

Usability 101: Introduction to Usability

If you’re convinced about why you should understand user experience, let’s begin!


What is User Experience?

User experience (UX) focuses on understanding users interests, needs, and their abilities/limitations. Users determine the significance of your content almost immediately, so first impressions about how you’ve structured your webpage and all of its information are crucial.

For visual elaboration, here is a representation of the relationship between UX and content. This is known as the “User Experience Honeycomb” which was originally envisioned by Peter Morville in 2004.

Visual representation of the relationship between user experience and content found here.

Now, for the textual breakdown:

  1. Useful: you want your content to be original and fulfill a user’s need (crave for information).
  2. Usable: your website should be easy to use, you don’t want to confuse people by adding unwanted buttons or displaced menus.
  3. Desirable: your design choices, such as images or brands, should invoke some sort of emotion or appreciation, this will help maintain interest.
  4. Findable: users should be able to find your webpage even when it isn’t opened in their browser, try to incorporate terms that are relevant to what they would use to find information
  5. Accessible: taking into consideration certain disabilities, users will appreciate it if your content functions with their potential struggles in mind.
  6. Credible: for your webpage to be successful, you must make users trust and believe what you tell them, don’t falsify information just to add flare to what you’re presenting.

Whatever your discipline may be, UX will likely be involved in it. Understanding how to apply these concepts to your webpage will only make it stronger.

Now that you’ve been given the rundown about what UX is, it’s time to look at the finer details of structure and organization.


Why do we structure?

You, as a user of the internet, could understand why structure is important. Are you suddenly remembering a webpage that had poor design and organization choices? That’s why structure, also know as Information Architecture (IA), is so important. IA decides how parts of the information you provide should be arranged so that it’s understandable. This arrangement can be broken down into two parts: Taxonomy and Choreography.

Taxonomy

Taxonomy, sounds like a super complex term, right? On the contrary, it’s actually just the practice of IA that focuses on organization. This is broken down into “schemes” of organization, which are segregated into two main categories:

1. Exact

Robert Sens “Information Architecture – Structuring & Organizing Content” offers a great visual representation of exact schemes

This organization scheme is the simpler of the two. Exact schemes are mutually exclusive, meaning they can only happen in a certain order that doesn’t allow other factors to function at the same time. There are 3 examples of this that you see in your day-to-day life that you may not even be aware of:

  • Alphabetical

These utilize our 26-letter alphabet to organize complex information so that it’s easily navigable; you tend to find this in dictionaries and encyclopedias.  

  • Chronological

This scheme utilizes the release date to organize information, you typically find them in formats such as history books and television guides.

  • Geographical

You can find this mostly in news and weather platforms, they utilize locations to allow users to identify factors such as weather or economic issues happening in the local area.

2. Subjective

Robert Sens “Information Architecture – Structuring & Organizing Content” offers a great visual representation of subjective schemes

This organization is a bit more complex. Subjective schemes divide information into categories that defy an exact definition, yet they are often more important and useful in comparison to exact schemes. The simple reason: we don’t always know what we’re looking for when we browse the web. It is for this reason that subjective schemes are organized based on relevance rather than exclusiveness. Here are 4 examples of how this information is broken up:

  • Topic

Organizing information by topic can be a little tricky, typically you see this method used in the yellow books or in nonfiction books.

  • Task

Task-oriented schemes organize content and applications into collections based on needs, actions, and questions. You typically see this is in word processors or spreadsheets.

  • Audience

Audience is constantly fluctuating, so this scheme organization is either open or closed off when navigating between different audiences. This is a bit more complicated, as some webpages who use this make it evident who their target audience is for, and this may not apply to all audiences.

  • Metaphor

This sort of scheme helps users by relating content to familiar concepts; you can find this example in the “folders” or “trash” tabs of your email. These aren’t typically found on webpage’s primary organization schemes because they can be misunderstood and create unwanted complications.

Choreography

By definition, Choreography is the art and practice of designing and arranging movements that guide dancers for a performance. You’re probably wondering, what does this have to do with writing?

Well, as stated by the Information Architecture Institute,

“The structures that IA creates foster specific types of movement and interaction, anticipating the ways users and information want to flow, and making affordance for change over time.”

Now that you understand the depths of structure, let’s address the importance of making sure the organization is properly navigable for your users.


What about navigation?

Webpage navigation will be your best friend if you know how to use it wisely. Navigation of your webpage goes back to that first impression we talked about; it determines how your content is served and will either make or break UX. There are many common types of navigation, and there are certain webpage navigation mistakes you may want to avoid.

Common types of navigation

Surprisingly, you see forms of navigation at least once in your day-to-day activities. Think of the menu you read when sitting down at a restaurant. The way the information of the food, beverage, dessert, and whatever else that restaurant has to offer is coordinated is a form of navigation. In webpage structure, the most common types of navigation are:

1. Scrolling

Think about when you’re scrolling through a webpage… There it is, scrolling. Scannable content is becoming more desirable by users, it’s even becoming a conditioned response to webpages. Some of the pros of scrolling include:

  • Delivering content quickly
  • Doesn’t require commitment by forcing users to click a button
  • Allows visitors to digest information at their own rate

Forms that allow scanning are being seen in practice and application significantly more, so keeping up with the pace of your users is important for your success.

2. Clicking

Be sure to be careful with these! While including clicks is necessary for interactivity of your webpage, you don’t want to lose your users’ interest by having too many navigation links. It’s important to establish who you are, what you offer, and which part of your webpage is your users next step first. Here are some ways to improve the clicking experience you can offer users:

  • Use a clear, concise copy of all your call-to-action (CAT) buttons
  • Minimize your number of clicks to complete certain actions
  • Make your clickable content easy tap on (keep in mind mobile devices)
  • Use clicks sparingly, don’t be afraid to utilize scrolling
  • Avoid forcing your users to click in order to finish a reading or action

Clicking can be a great contributor to your webpage, but being conscious of it is necessary. You don’t want to overwhelm your users by having an overabundance of clicks.

3. Menus

This brings us back to the restaurant example; menus are a very common navigation guide amongst webpages. A few examples of these common menus include:

  • Top/Side
  • Drop-downs
  • Side-scrolling content

When placing these menus, make sure to keep in mind your audience, their needs, and their goals.

4. Icons, images, and buttons

Take a moment and think of your favorite webpage, what’s the first thing you remember about it? Likely something along the lines of a special icon, a certain image, or a button that just stood out to you. This navigation format is incredibly popular amongst webpages. They invoke a sort of emotion, catch users’ interest, and can even be friendly to mobile devices.

5. Linked text

Linked text is perfect if you wish to navigate your users to certain pages embedded within your webpage. For example, the “click here” text that follows certain content can entice your user to become interactively involved within your webpage.

Website navigation mistakes you may want to avoid

With every positive, there must be a negative. Navigation of your webpage structure can be successful, but knowing what you may want to avoid is also important when designing. Here is a list of some of the commonly seen mistakes in navigation that are undesirable to users:

  • Unclear navigation location

No one likes an unexpected design or menu

  • Too many menus

You don’t want to overwhelm your users with too many options

  • An unclear objective

Cute may be nice when designing a webpage, but what users really crave is a clear understanding.

  • Information overload

A cluttered menu will quickly lose the interest of your users.

There you have it, now you understand how the application of navigation and structure coincides with user experience. As a webpage creator, keeping in mind these nitty-gritty details is essential in order to obtain the success you wish to have for your platform!

Sources

Miller, Jessica. “How to Use Organization Schemes To Improve Website Usability.” Usability Lab, Usability, 8 Oct. 2014, https://usabilitylab.walkme.com/use-organization-schemes-improve-website-usability/. Accessed 26 Sep. 2021.

Morville, Peter. “User Experience Design.” Semantic Studios, Semantic Studios, 21 June 2004, http://semanticstudios.com/user_experience_design/. Accessed 27 Sep. 2021.

Nielsen, Jakob. “Usability 101: Introduction to Usability.” Nielsen Norman Group, Nielsen Norman Group, 3 Jan. 2012, https://www.nngroup.com/articles/usability-101-introduction-to-usability/. Accessed 26 Sep. 2021.

“Organization Schemes.” Improving the User Experience, https://www.usability.gov/how-to-and-tools/methods/organization-schemes.html. Accessed 27 Sep. 2021.

Sens, Robert. “Session 03: Information Architecture – Structuring & Organizing Content.” Sens, https://www.docdroid.com/5rbKmdU/session-03-information-architecture-structuring-organizing-content-pdf#page=91. Accessed 27 Sep. 2021.

Soeggard, Mads. “Usability: A part of the User Experience.” UX Courses, Interaction Design Foundation, 2020, https://www.interaction-design.org/literature/article/usability-a-part-of-the-user-experience. Accessed 27 Sep. 2021.

“What is Information Architecture?” What is IA?, The Information Architecture Institute, https://www.iainstitute.org/what-is-ia. Accessed 27 Sep. 2021.

This Post Has 14 Comments

  1. Hi, Kat! The way you’ve organized your blog post is incredibly efficient and helpful. I especially enjoyed the section about structure. I never thought about all the ways that a webpage can be structured, and I think the subjective organization is interesting. I’ve never heard of the “metaphor” method, and I would love to learn more about that. Organizing by topic makes the most sense because users will anticipate information to fall into different categories. Users don’t necessarily want to read or interact with the website, which is why you also make a great point about clicking navigation. If it takes too many clicks to find desired information, users may grow frustrated and leave the website (or never return). However, the “3 click rule” may be more fiction than fact. This rule of web design says that users will leave after 3 clicks if they can’t find what they’re looking for. In trying to decrease the number of clicks, designers may introduce new problems into the website. Instead, usability should be measured through ease of navigation. Users won’t mind a few more clicks if the navigation process is streamlined. The Institute of Electrical and Electronics Engineers (IEEE) shares some great tips for web designers to ensure smooth navigation while keeping the integrity of usability. They make a great point that users need to feel like they are getting closer to the content. Check out the full article here: https://brand-experience.ieee.org/the-3-click-rule-myth-or-fact/

  2. Hey Kat. Overall, I am very pleased with how thorough and structured your blog post is. My favorite aspects included your conversation with the reader, use of different levels of headings, and your flow/organization. I liked that you included questions as headings, as you emphasized the questions that the reader may have! I was initially confused by the format of your “Website navigation mistakes you may want to avoid” section. For things in the bulleted list, the sentences/descriptions underneath seem a little odd to me.

    For your picture, cited from Robert Sens, I would maybe have found a picture that does not have the copyright symbols throughout/covering the picture. Just a small thing that would help with the aesthetic of the post. In the article linked below, the second item focuses on “adding authentic images”. Be careful with stock photos, and make sure the photos you include have a clear purpose.
    https://www.semrush.com/blog/8-key-tips-for-improving-your-sites-user-experience/

  3. Hi Kat!
    I liked reading your blog post! I thought it was very informative, and I enjoyed learning more about User Experience (UX). It’s easy to see why UX should be at the forefront of every website’s design in order to attract users and make their experience as easy and enjoyable as possible. The honeycomb example is a great visual to understand the aspects of a website that are most important to users. Finally, I enjoyed your explanation of navigation techniques.

    The article I chose called “5 Navigational Tips to Improve the UX of your product/service” discuss navigation in greater detail. I enjoyed the specific attention to the appearance of navigation tools, like making the labels match actions the user will want to perform. I also learned that menus should look interactive otherwise users may not know they can use them to navigate the site. Finally, the article explains how mobile and desktop versions need different menus, which we previously discussed in class. This connected to the weekly articles because my article builds on the information about navigation tools and how to make them effectively in order to better the UX. I am interested in this topic because I use the menu option for almost all of the websites I visit, so it was great to lean more about what goes into creating menus.

    https://uxdesign.cc/5-navigation-tips-to-improve-ux-of-your-product-service-f64840ef2f4c

  4. Hi Kat. Thank you for explaining the different aspects of the user experience and describing how we can organize and structure our web pages to best fit the needs (and desires) of our site visitors. The images displaying examples of organization schemes were extremely helpful for my understanding. It is important to be aware of the various methods for structuring a web page in order to pick the option that best suits the content shared with site visitors. It’s also important to understand that a variety of these organization schemes can be used on one website. For example, the GVSU academic website might use alphabetical organization for their course catalog, but they might also use audience organization for their parking services web page. Deciding whether your website should be scroll or click oriented depends on the context. I found a great article that describes four different types of scrolling patterns along with their pros and cons and gives tips for how to utilize those patterns (https://www.uxpin.com/studio/blog/4-types-creative-website-scrolling-patterns/). Scrolling has become a more popular feature on websites as it is faster and maintains the reading flow. Successful site navigation is the starting point for a positive user experience.

  5. Hey Kat!
    I appreciate the way you got us thinking about UX. I particularly enjoyed the second half of your blog post, starting from the “Why do we structure?” section. The fact that you adopted a conversational tone helped break the content into sections that made sense. I had not thought about the organization of a site as either exact or subjective, but this distinction is especially important once we start thinking about how our audience will interact with our website, as Kendra noted in her comment about 4 common scrolling patterns. And as you noted, the choice between an exact or subjective scheme depends on the context of our website. That’s why I so appreciated the way you listed typical applications of each subsection – where Alphabetical, Chronological, Topic, Task, etc., are most commonly used is great information to take away from this post. I was interested in your discussion of the Audience, so I went and found this article: https://www.bitcatcha.com/blog/website-ux-design/ which goes in-depth on the topic of an audience, as related to UX design. Again, thanks for your post!

  6. Hi Kaitlin! Thank you for a beautifully explained blog post. I think the approach you took and the way you made your ideas come to life was really well. I appreciate the friendly aspect of it, I personally think it’s easier to learn when information is presented in this supportive way. I think your use of color is a nice touch to separating content, but I would be careful using the color blue. I remember seeing it in one of the class readings that they should be links, but in this case your headings in blue aren’t links. Not a big deal, just something to think about. Taxonomy is something I don’t think I’ve heard of before, so I looked into a bit more. This website I found, https://blogs.perficient.com/ecm/2011/01/27/taxonomy-vs-information-architecture/ , shares that the term is generally used in a scientific way. I think they do a good job explaining the way it’s used in content management and IA. It definitely offers the information we are looking for about the topic, compared to taxonomy in general. Good job on your post! Definitely a lot of helpful information we can all learn from.

  7. Hi Kaitlin! To start off, I really enjoy your writing style. This blog is super enjoyable and easy to read! I also really liked what you had to say about the navigation of your webpage structure and how that relates to User Experience. This was especially helpful because there were examples of things to avoid so that this doesn’t become a problem for the reader. This reminded me of our in-class activity on Tuesday, where we explored websites that aren’t really user friendly. More specifically, I thought of GVSU MyPath. The example that made me think of MyPath was when you said to avoid having too many menus and information overload. These are two things that overwhelm me about MyPath and are part of the reason why I don’t enjoy using it whenever I do. A source that I found that relates to this topic is https://www.usability.gov/what-and-why/user-experience.html! It was interesting because you both used the honeycomb model to get your point across (and I think it worked well). This article also goes into detail about areas that are related to user experience, like usability evaluation. This is something that I thought was cool and would fit in well with your blog post. Again, great job on the post!!

  8. Hi Kaitlin! I really loved how you demonstrated exactly what you were talking about in your own writing. You kept the paragraphs short by only including the important information. You also included images that would help readers understand the subject better. The only issue I have with some of the images is that on my screen, they appear kind of blurry, and I wish I could see it clearly. I do like the inclusion of the honeycomb that we learned about in class; it ties everything back to the course and why we’re learning this. I found this article, https://newicon.net/5-reasons-why-ux-design-is-important-for-business, and it explains why as a business owner, these ideas are crucial to your success. Your blog post ties in directly with what he’s saying, and you both touch on the importance of website usability. I just thought it was interesting that something you wouldn’t really think about in your everyday life (unless you’re a website developer or UX designer, of course), can have such a huge impact on how we interact with media.

  9. Your introductory paragraph is so relevant and relatable – I feel like this happens way too often to me and I’m sure many others as well! The structure of the information is just overwhelming and not easy to read. The quote you provided from Jakob Nielsen is a very important concept to remember when considering usability on a web page. It is incredibly crucial! You did a great and thorough job explaining what User Experience is – I didn’t know this term before this class and now I know it completely. Also, great use of visual representations to further convey the information you provided in your post. I found the common types of navigation section interesting, as it made me wonder which one people prefer the most. I personally rely on a reliable and consistent search engine, but scrolling can be an addictive movement. It reminds me of Netflix – Watch TV Shows Online, Watch Movies Online, which is scrolling for the most part and it kind of surprised me to find this. Overall, easy to read, informative, and strong blog post!

  10. Hi Kat! Your post is extremely user-friendly and easily readable. I found your breakdown of the “User Experience Honeycomb” to be simpler than the one in the book! Your questions for headings are direct and conversational, immediately catering to the blog users needs. If I did not have time to read the entire post, I could easily find the section I am looking for. I found the section regarding the common types of navigation to be the most valuable part of the post. As you explained each navigation type in detail, you successfully employed the scrolling, linked text, and icons, images, and button navigation. Under your subheading “Website navigation mistakes you may want to avoid” you make a very nice point by stating: “You don’t want to overwhelm your users with too many options”. I have stumbled upon too many web pages before where the dropdown menus and information provided was too much all at once, and extremely complicated. I often find shopping websites such as Target and JcPenney to have what appears to be simple layouts, but complicated navigation with an overwhelming amount of information. While researching more on websites that have poor navigation compared to those with high quality navigation, I found this blog post (https://www.psd2html.com/blog/the-good-the-bad-and-the-best-in-website-navigation.html) showing the sites that did terrible, those that got everything right, and why they work or don’t work.
    https://www.jcpenney.com/
    https://www.target.com/

  11. Hello Kat! I really enjoyed reading your post about user experience and specifically the effect structure and taxonomy has on it. I found that the “User Experience Honeycomb” visual was a great way to lead the post into why structure is an important factor. I also appreciated the design of your post as well. It felt very minimalistic but still very clean and credible. If I had one suggestion it would be to edit the color of the headings toward the end of the post, I assumed they were hyperlinks as well at first. However the brown that was used in previous headings would perhaps be a nice substitute? I thought the links to the information architecture were very helpful in demonstrating your point, it made me think about this article on the “personas” in user experience https://www.interaction-design.org/literature/topics/personas. This article goes in depth about how to avoid stakeholders making design decisions for themselves instead of the user. It helps in the early design process and involves many steps to help designers be sure they aren’t making their design choices for too broad or too niche of an audience.

  12. Hey, Kaitlin! Great job with your post; I learned a lot from reading it! I’m really glad that you discussed how too many clicks on a website can be frustrating to the user and then listed some concrete ways to minimize clicking. I get irritated with having to click through websites, so I think it is important that you highlighted this important issue. I also liked learning about the application of the term “Choreography” to website design, and I interpret it as the aspect that perfects the flow or a site. The subject of taxonomy piqued my interest, so I did a little more research and found this site that dives deeper into the topic: https://www.seoptimer.com/blog/website-taxonomy/ . It also breaks down the taxonomy of some sites, including Forbes, and summarizes some best practices to use.

  13. Hey Kat! I Love the way you blog post is organized! It is so efficient, and clean! I loved getting to hear about the “User Experience Honeycomb” that was so interesting! I have never heard of it before so you broke it down well. There is so much that goes into your text that we don’t think about right away. You want it to make sense to your readers so they aren’t reading it over and over. So by keeping with the honeycomb method you can be concise and to the point. I also really enjoyed your description of different navigations. Honestly, I haven’t thought about this till you brought it up. There are so many ways to get through a site, but in my mind I didn’t register them as navigation, I was just looking for what I needed. But now looking back, I can see the difference between sites with good navigation and sites with bad navigation. I can also see why this is so important or your audience. If someone is looking for some thing on a site and is just going through menus and menus till the find it they won’t want to look for it anymore. They will give up because it’s complex. But if there is a organized menu and navigation system your users with be happy and able to easily find what they need! Great job!

Leave a Reply

Close Menu