-
Notifications
You must be signed in to change notification settings - Fork 0
/
Wayfinding.html
80 lines (62 loc) · 3.12 KB
/
Wayfinding.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
<title>Creating a Web for Everyone</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="main.css">
</head>
<!--NavigationBar-->
<nav>
<div class="topnav" role="navigation">
<a href="index.html">Home</a>
<a href="ClearPurpose.html">Clear Purpose</a>
<a href="SolidStructure.html">Solid Structure</a>
<a href="EasyInteraction.html">Easy Interaction</a>
<a href="Wayfinding.html">Wayfinding</a>
<a href="CleanPresentation.html">Clean Presentation</a>
<a href="PlainLanguage.html">Plain Language</a>
<a href="AccessibleMedia.html">Accessible Media</a>
</div>
</nav>
<body>
<h1>Creating a Web for Everyone</h1>
<img class="example" src="wayfinding.jpg"
alt="There is a sign on a highway with arrows pointing in different directions for the different lanes leading to different locations. It is very clear which lane you need to be in to get to each destination and how many miles until you'll get there.">
<div>
<h2>
Wayfinding
</h2>
<h3>
Explanation:
</h3>
<h4>
What does it mean?
</h4>
<p>
Wayfinding is how easy it is for users to navigate through your website. This is guided through cues, consistency, and alternatives. There should be orientation cues such as titles at the top of the page. The structure and navigation should be consistent from page to page and throughout the site. There should be multiple ways for a user to find what they are looking for, for example a search bar and a navigation bar.
</p>
<h4>
How do you do it?
</h4>
<p>
Wayfinding can be simple to implement if a clear structure is set up by ensuring titles, descriptions, and navigation is clear and obvious. This needs to be done through landmarks in the code and through design.
</p>
<h3>
Accessibility Example:
</h3>
<p>
Wayfinding is very helpful when using assistive technologies such as screen readers. For a person with blindness, they need constant assurance about where they are within your website because they cannot see the structure of the site. They need titles and landmarks, read to them through the screen reader, which help them know where they are and how to find what they are looking for.
</p>
<h3>
Resource for more information on this topic:
</h3>
<p>
<a href="http://www.ai.mit.edu/projects/infoarch/publications/mfoltz-thesis/node8.html">Design Principles for Wayfinding</a> <br>
<a href="https://www.uxmatters.com/mt/archives/2014/03/information-wayfinding-part-3-designing-for-wayfinding-1.php">WUX Matters – Information Wayfinding</a> <br>
</p>
</div>
</body>
</html>