Skip to content

Commit 215da6c

Browse files
marcoscaceres-remotemarcoscaceres-remote
committed
Fixed up markup… added various issues under each section
1 parent 51162c6 commit 215da6c

File tree

1 file changed

+165
-130
lines changed

1 file changed

+165
-130
lines changed

‎ux-actions.html‎

Lines changed: 165 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
</style> </head>
4141
<body>
4242
<div id="page">
43-
<h1>Improving Web Apps User Experiences</h1>
43+
<h1>Improving the User Experience of Web Applications</h1>
4444
</div>
4545
<div id="main">
4646
<p class="logo">
@@ -52,208 +52,243 @@ <h2>Status</h2>
5252
<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
5353
the Gap with Native” Headlight task force</a>.</p>
5454
<h2>Introduction</h2>
55-
<p>To compare the various existing mobile apps development approaches, two
56-
main perspectives can be taken:</p>
57-
<ul>
58-
<li>from the end-user perspective: how well the said development approach
59-
will make it possible to provide the best possible user experience;</li>
60-
<li>from the content and service provider perspective: how well the said
61-
development approach will optimize their costs and benefits.</li>
62-
</ul>
55+
<p>To compare the various existing application development approaches, two
56+
broad perspectives can be taken:</p>
57+
<dl>
58+
<dt>End-user perspective:</dt>
59+
<dd>How will a development approach provide the best possible user experience?</dd>
60+
<dt>Content and service provider perspective:</dt>
61+
<dd>How will the development approach affect their costs and benefits?</dd>
62+
</dl>
6363
<p>This document, based on the analysis of <a href="http://w3c-webmob.github.io/gap-analysis/ux-webapps.html">how Web apps
6464
currently fare from a user experience perspective</a>, discusses some
65-
possible actions that could be pursued to reduce Web apps weaknesses and
66-
increase their existing advanages.</p>
65+
possible actions that could be pursued by W3C members to reduce Web apps weaknesses and
66+
increase their existing advantages.</p>
6767
<p>See also the <a href="http://w3c-webmob.github.io/gap-analysis/provider-comparison-framework.html">framework to compare mobile apps development
6868
approaches from a provider perspective</a>.</p>
69-
<h2>Improving Web Applications User Experiences Action Plans</h2>
69+
<h2>Action plan to improve the User Experience of Web Applications</h2>
7070

7171
<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>
7272
<h3>Discovery and acquisition</h3>
7373
<h4>Searching an app</h4>
74-
Increase searchability of apps through better metadata
74+
<p>Increase searchability of apps through better metadata</p>
75+
76+
<p class="issue">This is SEO issue.</p>
77+
7578
<h4>Reaching an app from physical artifacts (ads, paper magazines, TV
7679
screen, product labels)</h4>
77-
Enable over the air discovery for <a href="http://designmind.frogdesign.com/blog/mobile-apps-must-die.html">Just-in-time
78-
interactions</a>
80+
<p>Enable over the air discovery for <a href="http://designmind.frogdesign.com/blog/mobile-apps-must-die.html">Just-in-time
81+
interactions</a></p>
82+
<p class="issue">This seems far out into the future. The platform has more immidiate problems.</p>
83+
7984
<h4>Reaching an app from on-line interactions (social networks,
8085
on-line reviews, etc.)</h4>
81-
Promote best practices of URI management for client-side apps
86+
<p>Promote best practices of URI management for client-side apps.</p>
87+
8288
<h4>Paying for an app</h4>
83-
Enable simple payments on the Web
89+
<p>Enable simple payments on the Web</p>
90+
91+
<p class="issue">Need to describe the limitations of existing solutions.</p>
92+
8493
<h4>Downloading an app</h4>
85-
86-
<ul>
87-
<li>Enable large download optimizations</li>
88-
<li>Fix offline</li>
89-
<li>Integrate off-line Web apps in list of available OS apps</li>
90-
</ul>
91-
94+
<ul>
95+
<li>Enable large download optimizations</li>
96+
<li>Fix offline</li>
97+
<li>Integrate off-line Web apps in list of available OS apps</li>
98+
</ul>
99+
100+
<p class="issue">First point is already covered by HTTP2. Fixing offline is
101+
service workers. 3 is an implementation detail.</p>
102+
92103
<h4>Authorizing an app for special privileges</h4>
93104

94-
<ul>
95-
<li>Allow Web apps to manage group of permissions?</li>
96-
<li>Enforce consent-through-interaction pattern?</li>
97-
</ul>
98-
105+
<ul>
106+
<li>Allow Web apps to manage group of permissions?</li>
107+
<li>Enforce consent-through-interaction pattern?</li>
108+
</ul>
109+
99110
<h3>Finding on device and launching</h3>
100111
<h4>Locating the app launcher</h4>
101-
Get browsers/OS vendors to simplify integration of Web apps in OS
102-
apps list
112+
<p>Get browsers/OS vendors to simplify integration of Web apps in OS
113+
apps list</p>
114+
<p>Get browsers to better support HTML capabilities for "bookmarking" to homescreen.</p>
115+
103116
<h4>Starting the app</h4>
104117

105-
<ul>
106-
<li>Use manifest as a way to promote Singleton enforcement?</li>
107-
<li>Saved Web apps should be started under their own branding
108-
(fullscreen, optional splash screen)</li>
109-
</ul>
110-
118+
<ul>
119+
<li>Use manifest as a way to promote Singleton enforcement?</li>
120+
<li>Saved Web apps should be started under their own branding
121+
(fullscreen, optional splash screen)</li>
122+
</ul>
123+
124+
<p class="issue">The first point presuposes a manifest as a solution.
125+
that is not the right way to frame this problem: the manifest
126+
may be one solution... there may be other solutions!</p>
127+
128+
<p class="issue">Regarding own branding, this should be left up to the author.
129+
Splash screens are already supported in the platform (index.html can serve as
130+
splash screen).</p>
131+
111132
<h4>Waiting for the app to be ready to use</h4>
112133

113-
<ul>
114-
<li>Provide better hooks for optimizing start time (e.g. for
115-
scripts loading, assets loading)</li>
116-
<li>Promote best practices</li>
117-
</ul>
118-
134+
<ul>
135+
<li>Provide better hooks for optimizing start time (e.g. for
136+
scripts loading, assets loading)</li>
137+
<li>Promote best practices</li>
138+
</ul>
139+
140+
<p class="issue">First item is an implementation detail.</p>
141+
119142
<h3>Intuitiveness and ease of
120143
understanding</h3>
121144
<h4>Adopting familiar user interfaces</h4>
122-
CSS should provide some level of system UI integration?
145+
<p>CSS should provide some level of system UI integration?</p>
146+
147+
<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>
148+
123149
<h4>Adopting familiar user interaction patterns</h4>
124150

125-
<ul>
126-
<li>More DOM Events to match specific patterns</li>
127-
<li>Indie UI should help</li>
128-
</ul>
129-
151+
<ul>
152+
<li>More DOM Events to match specific patterns</li>
153+
<li>Indie UI should help</li>
154+
</ul>
155+
156+
<p class="issue">This pressuposes various solutions - it should be generalilzed.</p>
157+
130158
<h4>Guiding the user</h4>
131-
<br>
132-
159+
133160
<h3>Smoothness and responsiveness</h3>
134161
<h4>Navigating through views provided by the app</h4>
135162

136-
<ul>
137-
<li>Get browsers to disable it under the right conditions (<a href="http://code.google.com/p/chromium/issues/detail?id=133391">à
138-
la Chrome</a>)</li>
139-
<li>Promote work-arounds (e.g. <a href="https://github.com/ftlabs/fastclick">FastClick)</a></li>
140-
</ul>
141-
163+
<ul>
164+
<li>Get browsers to disable it under the right conditions (<a href="http://code.google.com/p/chromium/issues/detail?id=133391">à
165+
la Chrome</a>)</li>
166+
<li>Promote work-arounds (e.g. <a href="https://github.com/ftlabs/fastclick">FastClick)</a></li>
167+
</ul>
168+
169+
<p class="issue">Promoting workarounds does not address problems in the platform.</p>
170+
142171
<h4>Interacting within a given view of the app</h4>
143-
144-
<ul>
145-
<li>Provide better hooks for managing scrolling (e.g. Scrolling
146-
events)</li>
147-
<li>Promote best practices and libraries</li>
148-
<li>Provide more control on memory management?</li>
149-
</ul>
150-
151-
<h4>Obtaining content from the network</h4>
152-
153-
<ul>
154-
<li>Background network operations</li>
155-
<li>Priority handling in network ops</li>
156-
</ul>
157-
172+
<ul>
173+
<li>Provide better hooks for managing scrolling (e.g. Scrolling
174+
events)</li>
175+
<li>Promote best practices and libraries</li>
176+
<li>Provide more control on memory management?</li>
177+
</ul>
178+
179+
<p class="issue">Smooth scrolling is independent of events. See, for example, <code>position: sticky</code>.</p>
180+
181+
<h4>Obtaining content from the network</h4>
182+
<ul>
183+
<li>Background network operations.</li>
184+
<li>Priority handling in network ops.</li>
185+
</ul>
186+
187+
<p class="issue">Need to work with Web Perf WG on this... in particular
188+
with regards to the <cite>Resource Priorities</cite> spec.</p>
189+
158190
<h4>Pushing content to the network</h4>
159191

160-
<ul>
161-
<li>Background network operations</li>
162-
<li>Priority handling in network ops</li>
163-
</ul>
164-
165-
<h3>Adaptability to user access
166-
requirements</h3>
192+
<ul>
193+
<li>Background network operations</li>
194+
<li>Priority handling in network ops</li>
195+
</ul>
196+
197+
<p class="issue">
198+
Need to describe use case here. This can be handled in various was depending on the use case.
199+
</p>
200+
201+
<h3>Adaptability to user access requirements</h3>
167202
<h4>Making the user interface flexible to different user requirements</h4>
168-
Automated or semi-automated testing tools?
203+
<p>Automated or semi-automated testing tools?</p>
204+
<p class="issue">Need to flesh this out...</p>
169205
<h4>Integrating with the accessibility services on the device</h4>
170-
[further analysis required]
206+
<p>[further analysis required]</p>
207+
<p class="issue">This should be handled by markup. Better question is: what is missing from the markup to make this happen?</p>
171208
<h3>Sensitivity to context</h3>
172209
<h4>Determining the context in which the user is</h4>
173-
174-
Any critical sensor missing (indoor location via WiFi id? BT4?)? Can
210+
<p>Any critical sensor missing (indoor location via WiFi id? BT4?)? Can
175211
we build a more generic sensor API that doesn't work against the
176-
user privacy?
177-
<h4>Notifying the user of a context-relevant information</h4>
178-
179-
<ul>
180-
<li>Progress on Push API</li>
181-
<li>Look into registering wake-up for Web apps (on top of
182-
notifications?)?</li>
183-
</ul>
184-
212+
user privacy?</p>
213+
<h4>Notifying the user of a context-relevant information</h4>
214+
<ul>
215+
<li>Progress on Push API</li>
216+
<li>Look into registering wake-up for Web apps (on top of
217+
notifications?)?</li>
218+
</ul>
219+
185220
<h3>Personalization and privacy</h3>
186221
<h4>Gaining access to private data</h4>
187-
Web Intents-like solution?
188-
<h4>Protecting user privacy</h4>
189-
190-
<ul>
191-
<li>Common strategy toward iframe handling?</li>
192-
<li>DNT</li>
193-
</ul>
222+
<p>Web Intents-like solution?</p>
223+
<h4>Protecting user privacy</h4>
224+
<ul>
225+
<li>Common strategy toward iframe handling?</li>
226+
<li>DNT</li>
227+
</ul>
194228

195229
<h3>Immersivity and focus</h3>
196230
<h4>Managing the whole screen space</h4>
197-
Fullscreen API to the rescue?
231+
<p>Fullscreen API to the rescue?</p>
198232
<h4>Separating UI from other apps</h4>
199233

200-
Make it possible run Web app fullscreen, in separate browser
201-
instance?
234+
<p>Make it possible run Web app fullscreen, in separate browser
235+
instance?</p>
202236

203237
<h3>Ease of returning to once launched</h3>
204238
<h4>Finding quickly the list of already launched apps</h4>
205239

206-
<ul>
207-
<li>Allow singleton-enforcement for Web apps</li>
208-
<li>Include Web apps in tasks list</li>
209-
</ul>
210-
240+
<ul>
241+
<li>Allow singleton-enforcement for Web apps</li>
242+
<li>Include Web apps in tasks list</li>
243+
</ul>
244+
245+
<p class="issue">This is a UX issue.</p>
246+
211247
<h4>Waiting for the app to be re-activated</h4>
212-
<br>
213248

214249
<h4>Getting the app back in the state it was left</h4>
215-
[Investigate further which states are hard to restore]
250+
<p>[Investigate further which states are hard to restore]</p>
216251
<h3>Ease of obtaining additional features</h3>
217252
<h4>Paying for an add-on</h4>
218-
Enable simple payments on the Web
253+
<p>Enable simple payments on the Web</p>
254+
<p class="issue">Is this in-app payments?</p>
219255
<h4>Downloading the add-on</h4>
220-
Enable large download optimizations
256+
<p>Enable large download optimizations</p>
257+
<p class="issue">Covered by HTTP2</p>
221258
<h4>Authorizing the add-on for special privileges</h4>
222-
<br>
223-
259+
<p class="issue">Presupposes some special security model.</p>
224260
<h3>Ease of maintaining</h3>
225261
<h4>Updating an app</h4>
226-
<br>
262+
<p class="issue">Covered by HTTP2, service workers.</p>
227263

228264
<h4>Retrieving locally stored app data</h4>
229-
Filesystem API?
265+
<p>Filesystem API?</p>
266+
<p class="issue">Need use case.</p>
230267
<h4>Removing an app</h4>
231-
<br>
232268

233269
<h4>Purging an app configuration and stored data</h4>
234-
<br>
235-
270+
<p class="issue">This is UX problem.</p>
271+
236272
<h3>Ease of cross devices usage</h3>
237273
<h4>Locating a compatible version of the app on the various devices</h4>
238-
Reduce incompatibilities across devices
274+
<p>Reduce incompatibilities across devices.</p>
239275
<h4>Acquiring (possibly with payment) the app on these devices</h4>
240-
<br>
241-
276+
242277
<h4>Getting the content / configuration of the app synchronized across
243278
devices</h4>
244279

245-
<ul>
246-
<li>Standardized identity management</li>
247-
<li>Easy synchronization for Web dbs?</li>
248-
<li>Discovery of other nearby devices</li>
249-
</ul>
280+
<ul>
281+
<li>Standardized identity management</li>
282+
<li>Easy synchronization for Web dbs?</li>
283+
<li>Discovery of other nearby devices</li>
284+
</ul>
250285

251286
<h4>Making the app work on several devices at the same time</h4>
252287

253-
<ul>
254-
<li>WebRTC</li>
255-
<li>UX guidance on cross-device apps</li>
256-
</ul>
288+
<ul>
289+
<li>WebRTC</li>
290+
<li>UX guidance on cross-device apps</li>
291+
</ul>
257292

258293
<div id="footer">
259294
<p style="text-align:left;margin-left:0;margin-right:auto;"> <span style="font-size: 10pt"><a

0 commit comments

Comments
 (0)