The basic principles of website design boil down to purpose, usability, and readability.
Website Navigation
Navigation is how your users move around your site as intuitively, and with as few clicks, as possible.
A website is for: to assist a user with accomplishing a task.
Remember! if a user cannot quickly find what they are looking for, or if they become confused, they will move on to the next site.
User-Centered Design Basics
Usability refers to the measurement of how easily a user can accomplish their goals when using a service.
Analysis/Research Phase: Understanding the context in which users will interact with the product, including user needs and requirements.
Essential for gathering insights into the user's needs and expectations, ensuring the product is useful and relevant. Design Phase: Creating wireframes, prototypes, and design specifications based on user requirements gathered in the analysis phase.
Translates user needs into a tangible product blueprint, which guides the product's development. Implementation Phase: Developing the actual product based on the design specifications.
The practical application of designs to create the functional product. Testing/Evaluation Phase: Conducting usability tests with real users to evaluate the product and identify any areas that need improvement.
Critical for verifying that the product meets user needs and identifying areas for refinement. What is the International Standard 13407?
International Standard 13407 is the ISO standard for human-centered design processes for interactive systems. It provides a framework for understanding and applying the user-centered design process in product development.
This standard has been superseded by ISO 9241-210, which focuses on the principles and activities of human-centered design to enhance user satisfaction and overall usability.
Website Structure
Website Structure is the first step in building an effective information architecture.
The three most used site structures are:
Hierarchical: Pages organized into parent/child subsections Also called tree structures, or hub-and-spoke structures, the information is organized from the top down into paths starting with a broad category (parent) and branching down into detailed, more defined subsections (child). A clothing site is a perfect example of a hierarchical structure: if you are looking for a specific type of sock for your grandmother, you would start in the apparel section of the page and drill down until you have found her favorite, black and blue compression socks. Sequential: Pages organized into a specific order As the name implies, this type of configuration leads a user to follow a particular path, step-by-step. The steps are easy to follow and the link to the next stage is marked Ex. Think of those quirky Facebook quizzes. Do you want to know which Game of Thrones Direwolf You Are? To find out, you must answer a series of questions, each one popping up after the previous has been answered, until you land on your result. (You are no wolf—you are a dragon! Congratulations.) Matrix: Pages connected via links Also called web-like structures, this type describes pages connected in numerous ways by links, allowing the user to choose their own path of discovery as the whim takes them. A wiki is an excellent example of this kind of structure. One may begin casually looking up their local dam's history, but the various linked texts could send them three hours later to learn about solar farms in Sweden. To view an example of a matrix site structure, please explore the following website:
File Names on the Website
Clear Planning: It's crucial to plan your website content clearly and consistently, organizing it into a structured directory.
Importance of File Naming: Effective file naming is essential for usability and search engine optimization.
Naming Conventions: Files should have concise names with two to three keywords, avoid spaces, special characters, and excessive capitalization.
SEO and Usability: Proper file naming helps make the site user-friendly and optimizes it for search indexing.
Database Model
Database Model Approach:
Utilizes a dynamic site structuring approach. Relies on a database to provide information based on user queries. Offers a highly customizable and responsive user experience. Ideal for e-commerce sites and services requiring real-time updates and personalization. Structures to Avoid:
Overly Complex Structures: Can confuse users, making navigation difficult. Overly Simplistic Structures: May not provide sufficient information for users to make informed decisions or fully understand the content. Design Implications:
These insights are crucial for creating websites that are not only user-friendly but also strategically effective in meeting digital presence goals (Source: Digital.gov).
URLs
A URL (Uniform Resource Locator), more commonly known as a "web address," specifies the location of a resource (such as a web page) on the internet.
They also identify the file structure on the given website. A URL consists of a protocol, domain name, and path (which includes the specific subfolder structure where a page is located) and has the following basic format:
protocol://domain-name.top-level-domain/path
A well-crafted URL provides both humans and search engines an easy-to-understand indication of what the destination page will be about.
The maximum length of a URL should generally not exceed 2,048 characters. Instead of spaces, what should you use as a separator?
Instead of spaces, it's recommended to use hyphens (-) as separators in file names. This helps ensure the file names are URL-friendly and more easily readable by both users and search engines. How many keywords are needed for SEO?
The number of keywords needed in file names for effective SEO typically ranges from one to three. It's important to balance keyword usage to avoid over-optimization while ensuring enough detail for SEO purposes. What kind of keywords should be used?
Keywords used in file naming should be relevant, descriptive, and specific to the content of the file or page. They should reflect terms that users might use to search for the content and be closely related to the topic at hand.
Site Navigation Conventions
Logo Placement: Place the logo in the upper left-hand corner or centered at the top. It should link back to the home page.
Navigation Bars: Positioned at the top or side, these display primary and secondary links, often replicated in the footer.
Breadcrumb Trails: Provide a path back to previous pages, with each step being a clickable link, useful for navigation on complex sites.
Menus: Drop-down or sidebar menus help users navigate different layers of content.
Site Maps: Outline the website's structure in a parent/child layout.
Footers: Contain legal information and may include navigation links to avoid scrolling back to the top.
Visited Links: Change color (commonly to purple) to indicate previously clicked links.
Home Page: Central page that organizes and directs content throughout the site.
Search Boxes: Allow users to find specific content; interactions may redirect within the same tab or open a new one.
Naming Conventions: Use standard, clear names for pages (e.g., "Contact Us" instead of "Phone a Friend") to avoid user confusion.
Positional Awareness
Positional Awareness allows a user to understand where the current page is in relation to the overall information architecture. Users should never wonder where they are in the site or how to get where they want to go.
TECHNIQUES
These are techniques that can provide positional awareness:
A descriptive heading or title on each page allows the user to clearly identify the topic of the current page. Breadcrumb trails show a path through the navigational hierarchy to the current page and are very useful for large complex sites. Using color or other stylistic highlighting to visually indicate within the primary or secondary navigation that the user is viewing a particular page. Images can be useful to indicate positional awareness since they quickly communicate to the user the topic of the page.
Web Navigation Concepts
Primary Navigation is the main, or 'top-level', navigation pages on a website. Users expect to find primary navigation links in the header or another prominent location, usually seen as bars or tabs.
Users expect primary navigation to behave consistently, and if they click on a particular link, they can rely on it taking them exactly where it says. Primary navigation also provides comfort; clicking a logo will reliably take a user back to the home page and allows users to reorient themselves. Secondary Navigation works in conjunction with the primary navigation, offering more detailed access to sections within a specific area of the site.
This type of navigation often appears under the primary navigation elements in various forms such as dropdown menus, sidebars, or under headers within the primary navigation itself. Secondary navigation is context-sensitive, meaning it can change based on the part of the site you are currently viewing. It is used to group related topics or subjects, helping users navigate to more specific content within broader categories. Card Sorting is when participants sort a set of cards into categories based on what is written on them. This method is used to help create and refine the navigation scheme of a site.
There are two types of card sorting: open and closed (U.S. General Services Administration, 2013). Participant Role: Sort cards with content descriptions into groups they define themselves. Grouping: No pre-defined categories; participants create and label their own groups. Purpose: Useful in the early stages of design to explore how users perceive and organize information. Outcome: Helps reveal users' mental models and preferred terminology, informing the initial structure of the website or product's information architecture. Participant Role: Sort cards into specific, pre-defined categories provided by the research team. Grouping: Categories are established prior to the session, based on existing or proposed structures. Purpose: Used to evaluate and refine the effectiveness of an existing information structure. Outcome: Identifies content that does not fit well into categories and clarifies any confusing aspects of the information structure. What is modern navigation? Modern navigation involves clear, effective structures that help users access various sections of a website easily without confusion. It prioritizes user experience by offering intuitive paths through the content.
What are the rules for designing great navigation? Effective navigation design should prioritize consistency, ensure clear interactions, avoid deep hierarchical structures, and be responsive across different devices.
What are subpages, breadcrumbs, and flat navigation?
Subpages are nested pages under primary navigation elements, helping organize content under main categories. Breadcrumbs provide a trail for users to follow back to the starting or entry point; they help users understand their current location within the website’s hierarchy. Flat navigation minimizes the depth of the navigation structure, aiming to place any page within one or two clicks from the starting point, enhancing the speed and ease of navigation. Responsive Design Navigation:
Adjusts to different devices like desktops, tablets, and smartphones. Features collapsible menus and adaptable layouts for various screen sizes. Ensures navigation elements are user-friendly and functional on all devices. Aims for consistent and intuitive access to content across platforms. Enhances user experience by maintaining clear and accessible navigation regardless of device.
Navigation Planning
Guided Navigation:
Designed for environments with extensive or complex information. Utilizes filters and categories to refine search results. Helps users navigate large amounts of data more efficiently. Reduces user frustration by streamlining the search process. Enhances discoverability and accessibility of content. Helps users who have a vague idea of what they are looking for by offering suggestions for narrowing a broad search. Remember to allow for multi-select options. The more searches a user must do to narrow their scope, the more likely they are to give up and go to a site that allows for quicker narrowing (Calik, 2020). Think about a clothing site; many offer ways to narrow a search by size or color, but also material and brand. Faceted search is a powerful technique for accessing information more efficiently, allowing users to refine their search results by applying various filters.
These filters, known as facets, categorize the information so users can progressively refine their search based on multiple criteria.
Facets: These are attributes or characteristics of the data, such as date, author, or topic for documents. Users can select facets to filter the data to better match their specific needs. User Experience: Faceted search improves the user experience by making it easier and faster to navigate large sets of data or products. It is particularly effective on e-commerce sites, libraries, and other content-heavy databases. Implementation: On the technical side, implementing faceted search involves indexing data with all possible search attributes and providing a user interface that displays these facets to users. This setup enables dynamic filtering where the results update to reflect each selected facet. Dos and Don'ts of Faceted Search:
Do: Use clear, user-centric categories for facets to enhance discoverability and navigation. Do Not: Over-complicate the interface with too many facets, which can overwhelm users. Do: Test and adapt facets based on user behavior and feedback to ensure they match user expectations and improve the search experience. Difference Between a Facet and a Filter:
Facets and filters both help users narrow down search results, but they do so in slightly different ways. Facets are specific attributes or categories that are indexed and used to refine search queries. They are structured and predefined, such as "color" or "size" in e-commerce. Filters, on the other hand, are more flexible and can be applied to sort and adjust visible results without changing the underlying dataset, like sorting by price or rating () (). What Every New Faceted Search Creates:
Every new faceted search typically creates a new URL or modifies the existing URL with parameters that define the facets applied. This can lead to the generation of many unique URLs for essentially the same content, potentially causing issues like duplicate content and wasted crawl budget in SEO () (). What are Canonical Tags?
Canonical tags are used to address issues of duplicate content that can arise from faceted navigation. They tell search engines which version of a URL is the main or "canonical" version that should be indexed, helping to consolidate link equity and avoid penalties for duplicate content. This is especially important in e-commerce, where multiple URLs might exist for the same content due to different facet combinations () (). Navigation Action Plans
Navigation Action Plans are a set of tasks that must be completed that will layout and define the structure of a website and how the navigation will work.
It should include the following:
A well-defined description of the goal A clear explanation of what the organization hopes to achieve from this endeavor The goal needs to be clear: it needs to have the ability to be tracked, it needs to be realistic, it needs to align with other goals, and it needs to have a specified date that it should be completed by. The goal of a navigational plan is to layout and define the structure of the website and how each page will navigate to the next The tasks and steps to reach this goal Creating a list of tasks, who is doing them, and when they are being done or completed is a good way to track the amount of work being done, who is doing it, and when. Tasks should be easy to understand and clear in what they are asking and hoping to achieve. Tasks also need to be prioritized based on feedback and based on the needs of the organization or requester Members of the group and their tasks When each task will be completed Ways to evaluate progress
What should you make first when planning your site?
Start by creating a sitemap. This helps you organize the website's structure and the hierarchy of information, which is crucial for effective navigation. What is responsive navigation?
Responsive navigation adjusts to fit different device screens, ensuring usability across desktops, tablets, and smartphones. Often implemented as a 'hamburger menu' on mobile, it helps in maintaining a clean and functional design without taking up too much space. What is sticky navigation?
Sticky navigation refers to a menu or navbar that remains visible at the top of the screen as a user scrolls down a page. It provides constant access to the navigation, improving user experience by making site navigation easily accessible from anywhere on the page.
Creating a functional navigation design system
Test the prototype on real potential users Determine if the site is user-friendly and functional
Navigation Hierarchy
Navigation Conventions
Logos should be placed highest up on the page. Navigation should be placed along the top of the page or under the logo. Content should be made up of headings and paragraphs. Use a grid system to create flows and hierarchies on a page. Incorporate link styling within the page to differentiate various types of links. Ensure the color used follows any brand standards of the company. Buttons should be used for calls to action and should follow website conventions.
Navigation principles
Design for the User: Focus on optimizing usability for site visitors, not just meeting client or organizational requirements.
Thorough Testing: Conduct real-world user testing in actual work environments to ensure usability.
Clear Navigation Controls: Ensure navigation elements are easily distinguishable from regular content by using different colors, fonts, and sizes.
Multiple Navigation Options: Offer various navigation methods (text links, image links, drop-downs, site maps) to accommodate different user preferences. Provide at least two ways to access the same content.
Minimize Navigation Space: Keep navigation simple and unobtrusive to facilitate quick and easy user interaction.
Unified Navigation: Maintain a coherent navigation structure across the website to avoid confusion.
Clarity in Links: Use clear, descriptive links that convey precise information; avoid vague verbs to enhance link clarity.
Common navigation design mistakes
Adhere to Conventions: Avoid experimenting with the placement of key navigation elements like the navigation bar; keep it consistent across all pages.
Avoid Drop-Down Menus: Drop-down menus can overwhelm users with too many options, disrupting the user experience.
Use Specific Labels: Labels like "products" or "services" are too generic; navigation should be descriptive to inform visitors about what to expect.
Limit Options: Offering too many choices on the homepage can confuse visitors and make it hard for them to find what they need.
Ensure Responsive Navigation: Navigation must be responsive to various screen sizes to accommodate mobile users.
Avoid Dead Ends: Ensure all pages provide easy access to other parts of the website to avoid user frustration.
Prefer Text-Based Links: Buttons can slow down site performance and are not indexed by search engines; use text-based links for better engagement and SEO.
Unit 7: Navigation
