-
Notifications
You must be signed in to change notification settings - Fork 1
/
ux-actions.html
306 lines (254 loc) · 11.5 KB
/
ux-actions.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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>Improving Web Apps User Experiences</title>
<link rel="stylesheet" href="http://www.w3.org/2007/08/video/style.css" type="text/css">
<link rel="stylesheet" href="http://www.w3.org/2007/08/video/print.css" type="text/css"
media="print">
<link rel="stylesheet" href="http://www.w3.org/2013/06/mobile-web-app-state/style.css"
type="text/css">
<style>figure { text-align:center; margin: 1em; }
figcaption { font-style: italic;}
dd { margin-bottom:1em;}
dt { margin-bottom: 0.2em;}
dd p:first-child { margin-top: 0.5em;}
p.continued { margin-bottom: 0em;}
th.category { color: #E2EDFE; background-color:#005A9C;}
td ul { margin:0; padding:0;}
td ul li { margin-left:0.7em;}
div.issue, div.note {
clear: both;
margin: 1em 0;
padding: 1em 1.2em 0.5em;
position: relative;
}
.issue {
background: none repeat scroll 0 0 #FBE9E9;
border-color: #E05252;
}
.issue, .note {
border-left-style: solid;
border-left-width: 0.5em;
padding: 0.5em;
}
tbody {
page-break-inside:avoid;
}
/*table { margin:0 -5em;}*/
</style> </head>
<body>
<div id="page">
<h1>Improving the User Experience of Web Applications</h1>
</div>
<div id="main">
<p class="logo">
<a href="http://www.w3.org/">
<img alt="W3C" src="http://www.w3.org/Icons/w3c_home"/>
</a>
</p>
<h2>Status</h2>
<p>This is a draft, work-in-progress analysis derived from the <a href="http://www.w3.org/wiki/Closing_the_gap_with_native">“Closing
the Gap with Native” Headlight task force</a>.</p>
<h2>Introduction</h2>
<p>To compare the various existing application development approaches, two
broad perspectives can be taken:</p>
<dl>
<dt>End-user perspective:</dt>
<dd>How will a development approach provide the best possible user experience?</dd>
<dt>Content and service provider perspective:</dt>
<dd>How will the development approach affect their costs and benefits?</dd>
</dl>
<p>This document, based on the analysis of <a href="http://w3c-webmob.github.io/gap-analysis/ux-webapps.html">how Web apps
currently fare from a user experience perspective</a>, discusses some
possible actions that could be pursued by W3C members to reduce Web apps weaknesses and
increase their existing advantages.</p>
<p>See also the <a href="http://w3c-webmob.github.io/gap-analysis/provider-comparison-framework.html">framework to compare mobile apps development
approaches from a provider perspective</a>.</p>
<h2>Action plan to improve the User Experience of Web Applications</h2>
<p class="issue">These are very sketchy ideas that need to be further developed and turned into concrete action plans if and when they're deemed appropriate.</p>
<h3>Discovery and acquisition</h3>
<h4>Searching an app</h4>
<p>Increase searchability of apps through better metadata</p>
<p class="issue">This is SEO issue.</p>
<h4>Reaching an app from physical artifacts (ads, paper magazines, TV
screen, product labels)</h4>
<p>Enable over the air discovery for <a href="http://designmind.frogdesign.com/blog/mobile-apps-must-die.html">Just-in-time
interactions</a></p>
<p class="issue">This seems far out into the future. The platform has more immidiate problems.</p>
<h4>Reaching an app from on-line interactions (social networks,
on-line reviews, etc.)</h4>
<p>Promote best practices of URI management for client-side apps.</p>
<h4>Paying for an app</h4>
<p>Enable simple payments on the Web</p>
<p class="issue">Need to describe the limitations of existing solutions.</p>
<h4>Downloading an app</h4>
<ul>
<li>Enable large download optimizations</li>
<li>Fix offline</li>
<li>Integrate off-line Web apps in list of available OS apps</li>
</ul>
<p class="issue">First point is already covered by HTTP2. Fixing offline is
service workers. 3 is an implementation detail.</p>
<h4>Authorizing an app for special privileges</h4>
<ul>
<li>Allow Web apps to manage group of permissions?</li>
<li>Enforce consent-through-interaction pattern?</li>
</ul>
<h3>Finding on device and launching</h3>
<h4>Locating the app launcher</h4>
<p>Get browsers/OS vendors to simplify integration of Web apps in OS
apps list</p>
<p>Get browsers to better support HTML capabilities for "bookmarking" to homescreen.</p>
<h4>Starting the app</h4>
<ul>
<li>Use manifest as a way to promote Singleton enforcement?</li>
<li>Saved Web apps should be started under their own branding
(fullscreen, optional splash screen)</li>
</ul>
<p class="issue">The first point presuposes a manifest as a solution.
that is not the right way to frame this problem: the manifest
may be one solution... there may be other solutions!</p>
<p class="issue">Regarding own branding, this should be left up to the author.
Splash screens are already supported in the platform (index.html can serve as
splash screen).</p>
<h4>Waiting for the app to be ready to use</h4>
<ul>
<li>Provide better hooks for optimizing start time (e.g. for
scripts loading, assets loading)</li>
<li>Promote best practices</li>
</ul>
<p class="issue">First item is an implementation detail.</p>
<h3>Intuitiveness and ease of
understanding</h3>
<h4>Adopting familiar user interfaces</h4>
<p>CSS should provide some level of system UI integration?</p>
<p class="issue">Browsers already do this through markup. CSS is not the correct layer. Also, this is generally considered bad practice: the experience provided by the application should be unique - not a copy of system ui conventions.</p>
<h4>Adopting familiar user interaction patterns</h4>
<ul>
<li>More DOM Events to match specific patterns</li>
<li>Indie UI should help</li>
</ul>
<p class="issue">This pressuposes various solutions - it should be generalilzed.</p>
<h4>Guiding the user</h4>
<h3>Smoothness and responsiveness</h3>
<h4>Navigating through views provided by the app</h4>
<ul>
<li>Get browsers to disable it under the right conditions (<a href="http://code.google.com/p/chromium/issues/detail?id=133391">à
la Chrome</a>)</li>
<li>Promote work-arounds (e.g. <a href="https://github.com/ftlabs/fastclick">FastClick)</a></li>
</ul>
<p class="issue">Promoting workarounds does not address problems in the platform.</p>
<h4>Interacting within a given view of the app</h4>
<ul>
<li>Provide better hooks for managing scrolling (e.g. Scrolling
events)</li>
<li>Promote best practices and libraries</li>
<li>Provide more control on memory management?</li>
</ul>
<p class="issue">Smooth scrolling is independent of events. See, for example, <code>position: sticky</code>.</p>
<h4>Obtaining content from the network</h4>
<ul>
<li>Background network operations.</li>
<li>Priority handling in network ops.</li>
</ul>
<p class="issue">Need to work with Web Perf WG on this... in particular
with regards to the <cite>Resource Priorities</cite> spec.</p>
<h4>Pushing content to the network</h4>
<ul>
<li>Background network operations</li>
<li>Priority handling in network ops</li>
</ul>
<p class="issue">
Need to describe use case here. This can be handled in various was depending on the use case.
</p>
<h3>Adaptability to user access requirements</h3>
<h4>Making the user interface flexible to different user requirements</h4>
<p>Automated or semi-automated testing tools?</p>
<p class="issue">Need to flesh this out...</p>
<h4>Integrating with the accessibility services on the device</h4>
<p>[further analysis required]</p>
<p class="issue">This should be handled by markup. Better question is: what is missing from the markup to make this happen?</p>
<h3>Sensitivity to context</h3>
<h4>Determining the context in which the user is</h4>
<p>Any critical sensor missing (indoor location via WiFi id? BT4?)? Can
we build a more generic sensor API that doesn't work against the
user privacy?</p>
<h4>Notifying the user of a context-relevant information</h4>
<ul>
<li>Progress on Push API</li>
<li>Look into registering wake-up for Web apps (on top of
notifications?)?</li>
</ul>
<h3>Personalization and privacy</h3>
<h4>Gaining access to private data</h4>
<p>Web Intents-like solution?</p>
<h4>Protecting user privacy</h4>
<ul>
<li>Common strategy toward iframe handling?</li>
<li>DNT</li>
</ul>
<h3>Immersivity and focus</h3>
<h4>Managing the whole screen space</h4>
<p>Fullscreen API to the rescue?</p>
<h4>Separating UI from other apps</h4>
<p>Make it possible run Web app fullscreen, in separate browser
instance?</p>
<h3>Ease of returning to once launched</h3>
<h4>Finding quickly the list of already launched apps</h4>
<ul>
<li>Allow singleton-enforcement for Web apps</li>
<li>Include Web apps in tasks list</li>
</ul>
<p class="issue">This is a UX issue.</p>
<h4>Waiting for the app to be re-activated</h4>
<h4>Getting the app back in the state it was left</h4>
<p>[Investigate further which states are hard to restore]</p>
<h3>Ease of obtaining additional features</h3>
<h4>Paying for an add-on</h4>
<p>Enable simple payments on the Web</p>
<p class="issue">Is this in-app payments?</p>
<h4>Downloading the add-on</h4>
<p>Enable large download optimizations</p>
<p class="issue">Covered by HTTP2</p>
<h4>Authorizing the add-on for special privileges</h4>
<p class="issue">Presupposes some special security model.</p>
<h3>Ease of maintaining</h3>
<h4>Updating an app</h4>
<p class="issue">Covered by HTTP2, service workers.</p>
<h4>Retrieving locally stored app data</h4>
<p>Filesystem API?</p>
<p class="issue">Need use case.</p>
<h4>Removing an app</h4>
<h4>Purging an app configuration and stored data</h4>
<p class="issue">This is UX problem.</p>
<h3>Ease of cross devices usage</h3>
<h4>Locating a compatible version of the app on the various devices</h4>
<p>Reduce incompatibilities across devices.</p>
<h4>Acquiring (possibly with payment) the app on these devices</h4>
<h4>Getting the content / configuration of the app synchronized across
devices</h4>
<ul>
<li>Standardized identity management</li>
<li>Easy synchronization for Web dbs?</li>
<li>Discovery of other nearby devices</li>
</ul>
<h4>Making the app work on several devices at the same time</h4>
<ul>
<li>WebRTC</li>
<li>UX guidance on cross-device apps</li>
</ul>
<div id="footer">
<p style="text-align:left;margin-left:0;margin-right:auto;"> <span style="font-size: 10pt"><a
href="http://webinos.org/"><img alt="Webinos logo" src="http://www.w3.org/2012/08/web-and-automotive/webinos.png"
style="float: left"></a> This project is funded by the European
Union through the Seventh Framework Programme (FP7/2010-2013) under
grant agreement n°257103 <a href="http://webinos.org/">webinos</a></span>
</p>
<hr>
<address><a href="http://www.w3.org/People/Dom/">Dominique Hazaël-Massieux</a>
<<a href="mailto:dom@w3.org">dom@w3.org</a>> / <a href="http://twitter.com/dontcallmedom">@dontcallmedom</a><br>
Last Modified: $Date: 2013-09-18 07:41:36 $</address>
</div>
</body>
</html>