-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathEasyInteraction.html
79 lines (62 loc) · 2.96 KB
/
EasyInteraction.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
<!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="Interaction.png"
alt="There is a comparison of two types of button groups, one where the buttons are the same color which is hard to distinguish which is which. The other shows the buttons with two different colors where the buttons are easier to distinguish.">
<div>
<h2>
Easy Interaction
</h2>
<h3>
Explanation:
</h3>
<h4>
What does it mean?
</h4>
<p>
Interaction is concerned with the ability for users to easily use the website. This includes navigation, completing tasks, and receiving information.
</p>
<h4>
How do you do it?
</h4>
<p>
During the design process, it is important to be cater to a general audience. A clear and simple design is the best way to do this. It can be difficult to know what users would and would not understand, so Usability Testing is a very valuable tool to check and see how a user interacts with your website.
</p>
<h3>
Accessibility Example:
</h3>
<p>
This guideline supports accessibility because by designing for a general audience, the site is more accessible through assistive technologies. For a person with an arthritic disease, it can be painful and extraneous to try to navigate a difficult website or not be able to use the keyboard to navigate. By allowing the user to efficiently accomplish their goals and navigate in a way that they choose, they will be much more likely to use the website.
</p>
<h3>
Resource for more information on this topic:
</h3>
<p>
<a href="https://www.interaction-design.org/literature/article/usability-a-part-of-the-user-experience">Interaction Design Foundation - Usability</a> <br>
<a href="https://alistapart.com/article/designing-for-easy-interaction/"> A List Apart – Designing for Easy Interaction</a> <br>
</p>
</div>
</body>
</html>