-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgood-web-page-commandments.html
112 lines (101 loc) · 5.2 KB
/
good-web-page-commandments.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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>10 Commandments of Good Commercial Web Pages (by @georgebaily)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/overrides.css" media="screen">
</head>
<body>
<section class="page-header">
<h1 class="project-name">10 Commandments of Good Commercial Web Pages</h1>
<h2 class="project-tagline">Thou shalt think skimmability</h2>
</section>
<section class="nav">
<p><a href="https://georgebaily.github.io/">« Home: @georgebaily on GitHub</a></p>
</section>
<section class="main-content">
<figure><img src="images/george-web-commandments-by-jack.jpg" alt="george as moses with commandments tablets" />
<figcaption>web commandments George by @JackDElshaw</figcaption>
</figure>
<blockquote>Ten basic UX principles for creating (or auditing) web pages, with an emphasis on business web page producers, who easily drift into default "we us our" boring sales mode.</blockquote>
<h3 id="one">1. Mobile friendly</h3>
<ul>
<li>I can consume the content easily on a small mobile screen</li>
<li>I can complete navigation and forms on mobile</li>
<li>I can read any downloads, slideshows, and text in videos on my tiny screen</li>
</ul>
<h3 id="two">2. Fast loading</h3>
<ul>
<li>I do not have a chance to notice the page is loading slow</li>
<li>I am not downloading MBs of stuff I didn't ask for</li>
</ul>
<h3 id="three">3. Clear point</h3>
<ul>
<li>I know what the page is about</li>
<li>So that I can judge easily if it matches the reason I came here</li>
<li>and there is nothing substantially distracting me from getting what I want here</li>
</ul>
<h3 id="four">4. Single page view is sufficient</h3>
<ul>
<li>I can get the main part of what I need from this page only</li>
<li>I don't need to go to the homepage </li>
<li>I'll view inner pages, linked from here, if I want to get more info on particular topics</li>
<li> Since I mainly get what I want from single pages, I don't notice or care if a lot of information is duplicated across many pages of this site</li>
</ul>
<h3 id="five">5. Skimmable</h3>
<ul>
<li>As a person with gnat-like attention powers, I can successfully skim the page and:
<br/>a) satisfy myself of the point of the page (3)
<br/>b) get the gist of what I want (4)
<br/>c) know where to pause or navigate after I've found what I am interested in
<br/>d) find pictures and video that spare me the pain of reading text</li>
</ul>
<h3 id="six">6. Where next</h3>
<ul>
<li>It's obvious what I can do next, and how to do it</li>
<li>I am not paralyzed or confused by multiple calls to action</li>
<li>Almost always, the main thing I want to do is not "talk to a sales person and buy now"</li>
<li>(But if I actually want to do that, it is super easy to do it)</li>
<li>(And all the rest of the time, there is something that helps me with where I am right now)</li>
</ul>
<h3 id="seven">7. Voice</h3>
<ul>
<li>It's clear to me who is talking to me from this page</li>
<li>I can see it's {your brand here} and I can sort of get who they are within my single page (4) skim (5)</li>
<li>I like a person talking to me rather than a brand</li>
<li>I like seeing real {your brand here} people and real {your brand here} things</li>
</ul>
<h3 id="eight">8. Something is memorable</h3>
<ul>
<li>When a fellow gnat interrupts me and asks watcha lookin at, I know how to summarize what I was looking at because I remember the main point </li>
<li>Stories are good for this</li>
</ul>
<h3 id="nine">9. Retrievable</h3>
<ul>
<li>When I later recall that thing I saw / watched / heard, I know how to find my way back to it</li>
<li>This might be via a memorable word which is in the page and in the meta title, hence easy to find in my web history or bookmarks</li>
</ul>
<h3 id="one">10. Relevant</h3>
<ul>
<li>The people (7) who produced this page about which I remember this key thing (8) seem like experts to me because they really talk to my...
<br/>...interest
<br/>...pain
<br/>...motivation
<br/>...experience
<br/>...sense of humour
<br/>...fear of missing out
<br/>...desire to be more awesome in life
</li>
</ul>
<p>To comment or contribute please tweet <a href="https://twitter.com/georgebaily">@georgebaily</a></p>
<footer class="site-footer">
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
</footer>
</section>
</body>
</html>