You’re in the middle of creating your new webpage: you’ve done your research, got your content planned out, filled your page with colorful graphics, and are all set to upload. Before you post, how much have you thought about your user’s experience? Will your viewers be able to quickly find the information they’re looking for, or will it be hidden between images, or cluttered with other content?
How you tailor your page for users matters. I’m sure you’ve visited websites in the past to find specific information, only to leave because what you were looking for wasn’t clearly laid out for you. In order to avoid these frustrations for potential viewers of your site, it’s important to incorporate usability, organization, and navigation into your design decisions.
Let’s talk about it:
Knowing Your Audience
Your site greets customers outside business hours. Its purpose is to communicate as effectively with a visitor as if they were speaking with you directly. It showcases your products or services, and tells your brand story in a captivating way – or at least it should!
Website Navigation: UX Best Practices
No matter what type of website or online content you have, your website’s primary goal is to fulfill a need for your users while not making it complicated for them. When approaching the creation of your website, your goal should be to keep it as simple as possible. This could mean avoiding menus that require multiple clicks to get to their intended location, or writing your information in list format to make it more concise and easy to read. We’ll talk more later about different organization methods, and how to pick the best one for your audience.
Speaking of your audience, it’s important to think about why they are coming to your website in the first place. What demographic is your content meant for? What needs to they have that your site can meet? By recognizing what users are using your site for, that can help you tailor the experience to them.
For example, say you are writing a cooking blog. On this blog, you might give cooking tips, and share some of your recipes. You might notice that your site is being visited by people with busy schedules, who are in need of quick, easy meals. Since this group of people are likely to be in a rush when viewing your site, you might decide to showcase some of your quick recipes at the top of your website, so it’s the first thing a viewer sees upon clicking on your site. You might also include pictures of your meals with links directly to the recipe, so the user can see what they’re looking for at a glance and get there quickly. Considering the pre-existing experiences of users is a key part of information architecture.
Now, imagine in the previous example, users aren’t immediately shown to their desired content. Instead, they have to click through a menu to the ‘recipes’ tab, scroll down to where ‘quick and easy meals’ are, and then find the recipe they want. More than likely, most users would have already clicked out and found another site that gave them answers more conveniently before they found what they were looking for. This is why well organized content is important: if a user can’t easily find what they’re looking for, they’ll go to a similar site where they can.
So how do we organize our information in a way that is user friendly and clear, but also logical? The concept of information architecture tells us how to do that.
Information Architecture
Information Technology = Making Sense of Complexity
Information Architecture Slides
Simply put, information architecture helps us display a complex idea in simple terms. It focuses on designing websites around three ideas: the pre-existing beliefs and experiences of users, the environment in which a user engages with a site, and the intentional conveying of meaning to a user. This can be achieved through strategic arrangement of content.
Ontology
A set of concepts and categories in a subject area or domain that shows their properties and the relations between them.
Information Architecture Slides
Have you ever read a product label or instruction set that had a yellow triangle with an explanation point in it, and you instinctively paid special attention to it? That is an example of ontology at work. Ontology deals with how user interpret specific language, symbols, or images. Like the warning label, our brains are trained to respond in specific ways to certain images. Using recognizable imagery can help your users better understand the meaning of your content.
Taxonomy
The science (and practice) of classification of things or concepts to create hierarchy and organize meaning.
Information Architecture Slides
If you are writing about a subject that is very dense and has a lot of topics, you should sort specific bits of information into groups, whether it be by an exact organization scheme (alphabetical, chronological, or geographical) or by a subjective organization scheme (by topic, task, or audience). This can help your viewers easily find the particular information that is right for them.
Choreography
The art (and practice) of designing and arranging choreographic sequences that guide the movements of dancers for a performance.
Information Architecture Slides
In IA, this is your presentation. Your order of operations, how you move your readers through your content. This may sound daunting, but once you understand your audience and what they want, it can all fall into place. By understanding their goals and motivation, you can order your content in a way that aligns with their needs.
By using the right navigation method, this can be accomplished.
Navigation Methods
One of the most common navigation methods is scrolling. It’s what you’re doing right now! Scrolling is a great method for every age demographic, since it’s so simple pretty much everyone can do it. It’s also a reliable way to deliver information quickly, since a single scroll doesn’t require any load time, while clicking to a separate page might. Readers might be more inclined to keep scrolling, because it doesn’t require the commitment that clicking a button could. Just be sure to keep your content brief: scrolling for a long time without knowing what’s at the bottom can scare away readers!
For more involved desktop or mobile content, clicking can be a better way to organize your site. Separating sections on different pages with button clicks can make things less intimidating for your readers. There is another benefit to clicking: users can bookmark the pages they are most interested, saving time that would otherwise be spent scrolling. Just make sure not to overdue it with the amount of clicking required; every button press is a decision, and an opportunity to click away.
Lastly, we’ll talk about menus. Menus are a great feature to use alongside clicking or scrolling. Depending on the type of menu you use, it can help streamline the search process for your users. While the much debated hamburger menu can create more work for your user, and put a barrier between them and the content they want, a well labeled menu at the top or side of a website can help users find the content they want much quicker.
Your website is yours, but remember that it’s primary purpose is to help users. By taking account of user experience, you can accomplish the goals of your website much easier, while improving the searchability of your website as well.
You Might Also Like
Information Architecture Design: A Step-By-Step Guide
The hamburger menu: pros, cons, and our favorite alternatives
Alexa F
26 Sep 2023Hi Patrick! I thoroughly enjoyed the way that you explained styling content for the audience. Your use of plain language helps readers like me understand the content easiest. I personally found this especially helpful as I have had issues in the past with really understanding the audience’s needs in a stylistic way. The way that you chunked your information has made it so that the post flows easily from header to header. In relation to the content, think that there are so many websites that violate these principles that you have mentioned. Today in class, my group looked at the website for CraigsList. It absolutely does not follow any of the tips above. In fact, it was the exact opposite of an easily navigable, usable, and organized website. I linked it below for you to see for yourself. I really did learn a lot from this post and I think that these tips will greatly help me in this class with our final project and in my future career.
Here is the Link: https://grandrapids.craigslist.org/
Mark L
26 Sep 2023Hey Patrick, as a student, your topic is highly relatable. Your incorporation of sources really aided in understanding the complexity of information architecture. I’m glad you mentioned recipes as part of your example because recipes are notorious for delaying information. However, once the reader gets to a bulleted list with measurements and food items, ontology begins to work in that they know they’ve finally reached the recipe. Unfortunately, I don’t think many recipes are designed with information architecture or the need for bite-sized information in mind.
I did a bit of research and found some possible reasons why recipes are “so long winded”, as the article puts it. I don’t really agree with this author’s first point, where they stated, “Many people enjoy reading [the long text accompanying recipes].” Based on what we’ve read in most of our class materials and from Professor Palmer, we know that most users do not like to read when they’re looking for pertinent information–they have questions that they need answered, and long winded stories are not conducive to quick hunting-and-finding. However, the second point about SEO seems true, but a flawed practice if so; Pryor states that these long, irrelevant stories that push important information to the bottom of the page are full of keywords to help SEO, but to me, it seems like an effective writer would be able to integrate keywords into headlines, headings, and even the recipe steps themselves.
Here’s the link: https://jjpryor.substack.com/p/why-are-online-recipes-always-so
Lauren L
26 Sep 2023Hi Patrick, the conversational tone of your post made it enjoyable and easy to read. I made note of how you wrote using “you” and “your.” Your headers were also effective in conveying the content that was to be discussed. One critique I have would be to number the H3 headings under the “Information Architecture” section, because at first I thought the sections were H2 headings where you were presenting a new topic. Or another option would be to give a preview of the architecture before breaking it down; you could do this by making a list in the IA paragraph. Overall, your blog post is helpful when determining what is important to consider when creating my own website. I am reading your blog post after our class where we discussed usability and navigation. My group specifically looked at a website that sells items for aquariums. It was not satisfying to use, due to difficulty navigating through the website, and not being totally sure of its purpose.
Here’s the link: https://ultumnaturesystems.com/
Brandon J
27 Sep 2023Hey Patrick,
I really liked the tone that you used throughout the blog post, it seemed like someone giving advice to someone else who is looking to create and write their own website. The part about Ontology and how certain symbols and colors draw the readers eyes to a certain portion of the website was demonstrated quite well by the large picture of the warning symbol. I can’t lie, I was definitely drawn to that section when reading, so it definitely seemed to work on me! I think that alongside the hamburger navigation menu, the side bar on one side or the other of the website definitely could also help with website organization and navigation. The site I was looking at that related to this seems to agree with both the hamburger navigation menu and the side bar.
Here’s the site: https://thegood.com/insights/website-navigation/
Overall, I really like your blog post, and was a great read! Keep up the good work!
Alexis O
27 Sep 2023Hi, Patrick
Your blog was fantastic! The tone of the blog was excellent since it felt very teacher-like, which is ideal because you are providing advice to someone who is developing their own website. I like how you used the sign image to draw your attention to this section of the article. The “Knowing Your Audience” portion of your blog might benefit from something to separate the large amounts of content, whether it’s a quote or bolding. I like how the blog post is organized; it reminds me of a professional blog.
Here is a good link to expand more of the content: https://mediaboom.com/news/website-navigation-design-best-practices/
Heather
27 Sep 2023Hello, Patrick! I appreciate how this blog post was formatted. I liked the use of quotes/terminology from other resources. It was a great way to break apart all the text. I liked that you used different examples to explain your ideas, like bringing up scrolling to find a recipe, a problem we can all relate to. I, for one, have been happy to see more and more recipe websites have a “jump to recipe” button. That is an example of where the audience would rather click a button then scroll through the webpage, as your blog post described. From your post, I wanted to take a look into what kinds of navigation styles are the best for different blog topics. The article I found talked about different levels of content like top level, secondary, and tertiary level content. Top level content works best for scrolling and tertiary level content should be clickable. Here is the article that talks more about navigation: https://forgeandsmith.com/blog/scrolling-vs-clicking-whats-the-preferred-user-experience/
Emily M
27 Sep 2023Hello, Patrick! I enjoyed reading your blog post this week! Some aspects that I found valuable were the definitions that you gave throughout. They were informative because a lot of those phrases were new to me! Your section on navigation was also interesting and demonstrated an idea mentioned in this week’s reading. One topic I looked further into was the importance of font and color for usability. The article linked below talks about how the color of text and what fonts you use are important for people’s ability to properly read and navigate your site. Using hierarchy, consistency, and contrast, in the form of fonts, are all ways to help improve usability. This topic connects well with your article because it demonstrates additional factors on how to make a website have better usability. I found it interesting because I love the creative side of websites and the color and fonts play a big part in that. Overall the tone of voice and the information provided all work together well and make for a good post. Your organization is also done nicely, utilizing headings and subheadings.
Link: https://info.keylimeinteractive.com/the-importance-of-color-and-typography-for-ux-researchers
Margaret F
28 Sep 2023Hi Patrick! Great post. You really captured the conversational, plain language tone that I would expect from a blog teaching the fundamentals of UX design. You make good use of headings and block quotes to introduce new sections. The specific examples given throughout (ex. the cooking blog and the caution sign) helped me to conceptualize and even visualize the principles you discussed. The cooking blog analogy instantly made me think of a baking blog I love to visit called Broma Bakery. At the top of the webpage, the designer placed quick links to Broma’s most recent/popular recipes. The current recipes are considered “fall” recipes, which makes them even more relevant to a user hopping on the site for the first time. I find this site to be incredibly searchable; it’s easy to filter recipes to find what you’re looking for, and even if you don’t know what your looking for, the site does a good job of promoting other materials a reader might be interested in. To me, Broma Bakery’s website is a shining example of good UI/UX: https://bromabakery.com/
Abigayle S
28 Sep 2023Patrick, I really enjoyed reading your post! Your use of plain language to introduce and define new terms made them easy to understand, and I appreciated that the links were embedded seamlessly so that you could learn more about a topic right after reading, instead of having to scroll to the bottom to find them. You brought up some great points about organizing the page to make it more user-friendly, and one way that I find to do this is to use whitespace to your advantage. A lot of website designers try to maximize their page and put content in every corner, but this can make the page appear cluttered and scare users away. Leaving space and allowing the content to spread out through the page can improve flow and give the readers less to sift through. This article shares some more ways to use whitespace to improve the user experience: https://elementor.com/blog/white-space-web-design/#:~:text=Salesforce%20Form%20Layout-,What%20Is%20White%20Space%3F,visual%20experience%20for%20the%20user.
Katharine R
28 Sep 2023Wow, Patrick, I’m thoroughly impressed with the blog post you wrote! The style is more informal, yet still highly informative; it was extremely easy for me to digest and understand the information you were presenting. Obviously, this expresses comprehension of your own target audience, this class, as you also demonstrate through the “knowing your audience” section. And in terms of errors, I found only one, which is impressive considering the amount of original content included. As a graphic design major, I spent a semester learning about UI and UX design. I decided to find another summative article about UX design to share with you. This article from Medium discusses 7 tips for improving UX design; the last tip shares the importance of site accessibility, which was not covered in your post. To ensure *every* user can obtain the information from a website, it’s crucial they can always read it. Some websites have plug ins that automatically provide options for increased color saturation, or have screen reader-compatible alternative text. From my own experience, utilizing both of those options is the best route.
Link: https://medium.com/outcrowd/how-to-improve-ux-design-cd5957f98b71
Katelyn F
28 Sep 2023Hello Patrick! I thought your blog post was incredibly engaging. I like how you asked thought-provoking questions that you then presented concise answers to. I thought your photos and your definitions were extremely vital in helping me understand the material for this week. Overall, I think your casual, yet informative tone was excellent!
You did a great job of illustrating ontology, taxonomy, and choreography and how they all work together to create a good user experience. I wanted to read more about ontology because it seems to be the most obvious, yet the most important. I liked this quote from the website I was reading where they say ontology has to do with “how we encourage users to think about the content or functionality we are offering”. I thought this was so important and underrated. Not only are things like menus and taskbars vital to site, but how the users will interpret the information on the site is equally as important. Great post!
Link:https://uxmag.com/articles/what-we-talk-about-when-we-talk-about-ontology
Caleb I
5 Oct 2023Hey Patrick, right off the bat, I feel that you did a good job presenting a lot of insightful information here. The different ways you describe navigation and usability is very helpful for new users unknown to this subject. I think the structure has a great layout that really makes your headings and visuals stand out within your blog. A lot of the information is neatly organized in longer paragraphs which I like since you are incorporating indents and lists within your post. They make the blog look really formal and organized when tackling such a large subject. When you talk about knowing your audience for best usability, it got me thinking about the different types of sites that need usability testing for their organization. After researching further on this topic, I found an article from playbookux.com outlining the massive variety and different approaches to conducting a usability test. This site provided me with new ideas like “moderated usability testing” and “lab usability testing.” These are some unique ways of performing different academic variations of a usability test based on the product or topic you are analyzing. Overall, great work on this blog post, very detailed and easy to read.
Site: https://www.playbookux.com/10-popular-usability-testing-methods/