This page is still a work in progress.
Breadcrumbs
Breadcrumbs in web design are a navigation aid. They help you know exactly where you are on a website and how you got there. You’ll often see them as a row of links near the top of a page.
Think of it like leaving a trail of digital breadcrumbs as you explore a website with lots of sections. Say you’re checking out sofa beds on an furniture store:
Home > Furniture > Beds > Sofa beds
This breadcrumb trail tells you that you started at the home page, then went to Furniture, then Beds, and finally landed on Sofa beds. Each of those links is clickable. So, if you want to go back to Beds, just click it.
Breadcrumbs are like your website map. They give you the bigger picture of where you are and make it easy to hop back if you need to. They can be quite handy, especially for big websites with lots of content.
Card sorting
Card sorting is a usability technique used to help design or evaluate the information architecture of a site. In a card sorting session, participants organize topics or content pieces into categories that make sense to them. Participants may also help you label these groups. To conduct a card sort, you can use actual cards, pieces of paper, or an online card-sorting software. This method helps ensure that your site structure matches the way users expect information to be organized. The result is a navigational and organizational structure that is more intuitive to users, leading to better findability and engagement.
Hamburger menu
Ever seen those three horizontal lines stacked on top of each other in a corner of a website or app? That’s the hamburger menu! It’s called that because it looks a bit like a hamburger.
Basically, it lets you hide all the navigation stuff on a website or app behind a tiny icon. This way, you save space, especially on smaller screens like phones and tablets. When you tap or click it, it unfolds into a menu that shows you all the things you can click on or go to.
It’s a common navigation design element, especially for making websites work well on different devices. But, here’s the thing: not everyone knows what that hamburger icon means right away. So, while it cleans things up, it might also make things confusing for some people. That’s why its usage should be carefully considered. Sometimes, regular menus at the top of the page or screen are better because everyone can see them easily.
Hero image
A hero image, also known as a banner image or a header image, is a large, eye-catching graphic displayed prominently on a webpage or digital platform. It serves as the visual centerpiece, capturing attention and setting the tone for the design. A hero image is carefully chosen to convey a message or evoke emotion, leaving a lasting impression.
Tree testing
Tree testing is a usability technique used to evaluate how efficiently and effectively a website’s information architecture works. It involves testing a hierarchical category structure, or “tree,” by asking users to find items based on this structure. During a tree test, participants are given a task and navigate through the categories and subcategories in the tree to complete it. This method is particularly helpful in identifying whether users can easily find specific information and where they face difficulties.
