-
Notifications
You must be signed in to change notification settings - Fork 0
/
user-interfaces.html
178 lines (162 loc) · 6.31 KB
/
user-interfaces.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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!doctype html>
<html class="no-js">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>User Interfaces @ CLOUD PANIC</title>
<meta name="description" content="Everybody knows a good user interface is a must. A common fact we've known for years. But. You see crap everywhere, every day. People still miss the point.">
<meta name="keywords" content="user interface design, ui design, cloud ui, usability labs, API UI, ui hierarchy, ui minimalism">
<meta name="author" content="">
<link rel="icon" type="image/png" href="/media/img/favicon.png">
<link rel="stylesheet" href="/media/css/style.css?v=4">
<!-- CSS scripting & LabJS only-->
<script src="/media/js/head.min.js"></script>
</head>
<body>
<div id="wrap" class="cloud">
<a href="/about.html" id="logo" title="About Cloudpanic">
<strong>!!</strong> cloudpanic
<em>Technologies to master. Crap to ignore.</em>
</a>
<div id="story" class="clear" style="background:url(http://farm4.static.flickr.com/3056/3082507706_f8db5a4a2b_b.jpg) 0 -200px">
<a id="forward" href="http://cloudpanic.com/cloud.html"><em>Next Technology</em>:The Cloud<span></span></a>
<div id="content">
<div id="title">
<h1>User Interfaces</h1>
<h2>
Everybody knows a good user interface is a must. A common fact we've known for years. But. You see crap everywhere, every day. People still miss the point.
<em id="created">
Wed, 15 Dec 2010 10:00:00 +0200
</em>
</h2>
</div>
<div id="bottom">
<div id="share">
<a id="tweet" href="http://twitter.com/share"
data-text="Technology to master: User Interfaces @ cloudpanic.com"
class="twitter-share-button" data-count="vertical"
data-via="cloudpanic">Tweet</a>
<iframe id="facebook" frameborder="0" src="http://www.facebook.com/plugins/like.php?href=http://cloudpanic.com/user-interfaces.html&layout=box_count&show_faces=true&width=450&action=like&colorscheme=light&height=65" scrolling="no" allowTransparency="true"></iframe>
</div> <div id="facts" class="clear four">
<ul>
<li>
<h3>Hierarchy</h3>
<p>Here is the point: write a table of contents of what you do. Put pieces into their right places.
From top to bottom. Repeat. Don't ever forget this. With an unclear hierarchy your UI (and life) is a mess.</p>
</li>
<li>
<h3>Minimalism</h3>
<p>It's not about fancy buttons or nice gradients. It's about removing them. Go down to the bare minimum.
Be bold. Remove everything non-essential. Your ADHD audience wants to know the core immediately. They
hate screen noise.</p>
</li>
<li>
<h3>No usability labs</h3>
<p>Usability labs are an overkill. They are like meetings. Waste of time. You have a bad hierarchy or
screen noise and you know it. This laziness or uncertainty will cost you. Just ask your friend to try when
you're ready.</p>
</li>
<li>
<h3>It's everywhere</h3>
<p>Documentation, copywriting, features, business plans and the website. Even a programming API has an
UI where same rules apply: proper hierarchy, less methods, less arguments less configuration. Get to
know user interfaces now.</p>
</li>
</ul> </div>
<div id="links" class="clear">
<p><a href="http://www.amazon.com/gp/product/0321344758?ie=UTF8&tag=clopan-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=0321344758">Don't Make Me Think <em>The only book you need</em></a>
<a href="http://apple.com">Apple.com <em>Do you see screen noise?</em></a></p> </div>
</div>
</div>
</div>
<div id="navi" class="clear">
<div id="incloud" class="navi">
<h3>Technologies to master</h3>
<a
href="http://cloudpanic.com/redis.html"
>
Redis
</a>
<a
href="http://cloudpanic.com/user-interfaces.html"
class="active">
User Interfaces
</a>
<a
href="http://cloudpanic.com/cloud.html"
>
The Cloud
</a>
<a
href="http://cloudpanic.com/javascript.html"
>
JavaScript
</a>
<a
href="http://cloudpanic.com/services.html"
>
Services
</a>
<a
href="http://cloudpanic.com/stateless-design.html"
>
Stateless design
</a>
<a
href="http://cloudpanic.com/static-html.html"
>
Static HTML
</a>
</div>
<div id="inpanic" class="navi">
<h3>Crap to ignore</h3>
<a
href="http://cloudpanic.com/nokia.html"
>
Nokia
</a>
<a
href="http://cloudpanic.com/features.html"
>
Features
</a>
<a
href="http://cloudpanic.com/enterprise-solutions.html"
>
Enterprise solutions
</a>
<a
href="http://cloudpanic.com/flash.html"
>
Flash
</a>
<a
href="http://cloudpanic.com/java.html"
>
Java
</a>
<a
href="http://cloudpanic.com/sap.html"
>
SAP
</a>
</div>
<div id="marketing-crap">
<strong style="background-image: none; color: white; text-indent: 0; font-size: 36px; width: 400px; margin: 37px;">This blog is closed.</strong>
</div>
</div> </div>
<div id="footer">
<a href="/about.html">About</a> •
<a href="http://www.flickr.com/photos/55014838@N08/galleries/72157625062868131/">Photo credits</a> •
<a href="http://github.com/tipiirai/cloudpanic">Source code</a> (Github)</a>
</div>
<script>
head.js("/media/js/site.js")
.js("http://platform.twitter.com/widgets.js")
.js("http://www.google-analytics.com/ga.js", function() {
var tracker = _gat._getTracker("UA-19863497-1");
tracker._trackPageview();
});
</script>
</body>
</html>