Tags: cover

26

sparkline

Monday, November 6th, 2017

Installing Progressive Web Apps

When I was testing the dConstruct Audio Archive—which is now a Progressive Web App—I noticed some interesting changes in how Chrome on Android offers the “add to home screen” prompt.

It used to literally say “add to home screen.”

Getting the “add to home screen” prompt for https://huffduffer.com/ on Android Chrome. And there’s the “add to home screen” prompt for https://html5forwebdesigners.com/ HTTPS + manifest.json + Service Worker = “Add to Home Screen” prompt. Add to home screen.

Now it simply says “add.”

The dConstruct Audio Archive is now a Progressive Web App

I vaguely remember there being some talk of changing the labelling, but I could’ve sworn it was going to change to “install”. I’ve got to be honest, just having the word “add” doesn’t seem to provide much context. Based on the quick’n’dirty usability testing I did with some co-workers, it just made things confusing. “Add what?” “What am I adding?”

Additionally, the prompt appeared immediately on the first visit to the site. I thought there was supposed to be an added “engagement” metric in order for the prompt to appear; that the user needs to visit the site more than once.

You’d think I’d be happy that users will be presented with the home-screen prompt immediately, but based on the behaviour I saw, I’m not sure it’s a good thing. Here’s what I observed:

  1. The user types the URL archive.dconstruct.org into the address bar.
  2. The site loads.
  3. The home-screen prompt slides up from the bottom of the screen.
  4. The user immediately moves to dismiss the prompt (cue me interjecting “Don’t close that!”).

This behaviour is entirely unsurprising for three reasons:

  1. We web designers and web developers have trained users to dismiss overlays and pop-ups if they actually want to get to the content. Nobody’s going to bother to actually read the prompt if there’s a 99% chance it’s going to say “Sign up to our newsletter!” or “Take our survey!”.
  2. The prompt appears below the “line of death” so there’s no way to tell it’s a browser or OS-level dialogue rather than a JavaScript-driven pop-up from the site.
  3. Because the prompt now appears on the first visit, no trust has been established between the user and the site. If the prompt only appeared on later visits (or later navigations during the first visit) perhaps it would stand a greater chance of survival.

It’s still possible to add a Progressive Web App to the home screen, but the option to do that is hidden behind the mysterious three-dots-vertically-stacked icon (I propose we call this the shish kebab icon to distinguish it from the equally impenetrable hamburger icon).

I was chatting with Andreas from Mozilla at the View Source conference last week, and he was filling me in on how Firefox on Android does the add-to-homescreen flow. Instead of a one-time prompt, they’ve added a persistent icon above the “line of death” (the icon is a combination of a house and a plus symbol).

When a Firefox 58 user arrives on a website that is served over HTTPS and has a valid manifest, a subtle badge will appear in the address bar: when tapped, an “Add to Home screen” confirmation dialog will slide in, through which the web app can be added to the Android home screen.

This kind of badging also has issues (without the explicit text “add to home screen”, the user doesn’t know what the icon does), but I think a more persistently visible option like this works better than the a one-time prompt.

Firefox is following the lead of the badging approach pioneered by the Samsung Internet browser. It provides a plus symbol that, when pressed, reveals the options to add to home screen or simply bookmark.

What does it mean to be an App?

I don’t think Chrome for Android has any plans for this kind of badging, but they are working on letting the site authors provide their own prompts. I’m not sure this is such a good idea, given our history of abusing pop-ups and overlays.

Sadly, I feel that any solution that relies on an unrequested overlay is doomed. That’s on us. The way we’ve turned browsing the web—especially on mobile—into a frustrating chore of dismissing unwanted overlays is a classic tragedy of the commons. We blew it. Users don’t trust unrequested overlays, and I can’t blame them.

For what it’s worth, my opinion is that ambient badging is a better user experience than one-time prompts. That opinion is informed by a meagre amount of testing though. I’d love to hear from anyone who’s been doing more detailed usability testing of both approaches. I assume that Google, Mozilla, and Samsung are doing this kind of testing, and it would be really great to see the data from that (hint, hint).

But it might well be that ambient badging is just too subtle to even be noticed by the user.

On one end of the scale you’ve got the intrusiveness of an add-to-home-screen prompt, but on the other end of the scale you’ve got the discoverability problem of a subtle badge icon. I wonder if there might be a compromise solution—maybe a badge icon that pulses or glows on the first or second visit?

Of course that would also need to be thoroughly tested.

Monday, October 9th, 2017

Defining design principles at EMBL | Journal | The Personal Disquiet of Mark Boulton

Mark describes the process he favours for creating (discovering?) design principles, like the ones for EMBL (I must remember to add those to the collection).

All you do is be mindful of when the team repeats design desires. This could be several members of the team say the same thing in a slightly different way, or that you keep circling around and around a problem but struggle to articulate it. By being mindful at all times to this a team can quickly pull together principles that are derived from doing the work on their particular problem rather than principles which are imposed on the work. An important difference.

Wednesday, July 13th, 2016

How to Make Sense of Any Mess

Did you know that Abby Covert’s book is available online in its gloriously hyperlinked entirety?

Tuesday, June 7th, 2016

PWA Discovery: You Ain’t Seen Nothin Yet | Infrequently Noted

Smart thinking from Alex on how browsers could better indicate that a website is a progressive web app (and would therefore benefit from being added to the home screen). Ambient badging, he calls it.

Wouldn’t it be great if there were a button in the URL bar that appeared whenever you landed on a PWA that you could always tap to save it to your homescreen? A button that showed up in the top-level UI only when on a PWA? Something that didn’t require digging through menus and guessing about “is this thing going to work well when launched from the homescreen?”

Thursday, November 5th, 2015

Chipmunks on 16 speed

This sounds genuinely good—Alvin and the Chipmunks slowed down to reveal their true ’90s post-punk goth-grunge nature.

chipmunkson16speed

Tuesday, September 24th, 2013

It Takes a Village to Save a Hard Drive

An epic tale of data recovery.

Of course Jason Scott was involved.

Wednesday, March 20th, 2013

Don’t Be Afraid To Teach Interactions by Timoni West

Timoni tackles the tricky topic of teaching taps.

Discoverability can be hard, but that shouldn’t stop us trying out new interactions.

Monday, March 4th, 2013

Springboard – Coming soon from Clearleft

The latest Clearleft product will be like having an intensive set of discovery, collaboration, and exploration workshops in a box. Perfect for startups and other small businesses short on time or budget.

It starts in Spring but you can register your interest now.

Wednesday, February 6th, 2013

Cover-Up’s open device lab

The guys at Cover Up are great: they make accessories for tablets and e-readers, so they have lots of those devices. They’ve made them all available for web developers to test on. Like I said: they’re great!

Friday, January 18th, 2013

Bargain Bin Blasphemy

I think there might be some subliminal messages hidden in these album covers.

Saturday, May 26th, 2012

Fictional magazine covers from Blade Runner - a set on Flickr

Magazine covers created by Tom Southwell for background scenes in Blade Runner.

Fictional magazine covers from Blade Runner

Sunday, March 18th, 2012

Galaxy Zoo and the new dawn of citizen science | Science | The Observer

A lovely piece of mainstream news reporting on Galaxy Zoo and the other Zooniverse projects, and the broader role of Citizen Science.

Monday, December 20th, 2010

Song To The Siren by Salter Cane on Huffduffer

A cover version of a cover version: Salter Cane do This Mortal Coil doing Tim Buckley. All in one take.

Thursday, January 21st, 2010

Bookbook - Bookbook - Twelve South

Cute covers for Macbooks to give them that bookish look.

Saturday, August 9th, 2008

Hueniverse: Beginner’s Guide to Discovery – Part II: People vs. Machines

A great explanation of how open technologies like microformats and OpenID enable greater discovery of data.

Friday, June 20th, 2008

Twitter / MarsPhoenix: Are you ready to celebrate?...

In the future, all great scientific discoveries will be conveyed in 140 characters.

Monday, April 21st, 2008

The Acorn Electron Haven - Usborne Publishing Section

Prompted by my post on adventure games, Relly sent me this link to a wonderfully archaic series of books from 1983.

Thursday, February 21st, 2008

SXSW Videos

The guys from Viddler have put together a little site dedicated to video coverage from South by Southwest.

Thursday, January 24th, 2008

O'Reilly Maker - Create a funny book cover!

Create your own O'Reilly book cover. Maybe you have to be a geek to find this amusing. I find this amusing.

Monday, November 12th, 2007

Sleevage » Album Cover Blog. Music, Art, Design.

I could spend ages browsing through the archives of this site dedicated to analysing album sleeve artwork. In fact, I just did.