Progressive interaction (draft)
This post is about a way of designing interfaces that I have been teaching and practicing for some years now but I’ve never formalized in any support. So after years of collecting examples and discussing about it, here I am trying to clarify my mind. This post will be a draft until I get to the exact point. I’m not even sure of the name of the thing…
What’s “progressive interaction”?
It is the ability of an interface to display the right information at the right moment of the interaction.
An easy example
Let’s take a quick and easy example to understand the basics…
If you have a login box like this in a page:
In order to get a “progressive interaction” you can hide the “Remember me…” functionality until the user types in something in one of the fields.
What do you get by doing this?
- Users that do not login have less information to decrypt (let’s assume that this login box is one of the many element of a crowded homepage)
- Users that do login get the functionnality appear at the right moment, making it more prominent and appealing. You can also allocate more pixels to the explanation of the feature since it only appears in a specific context.
Note: copys in this example are highly improvable.
A more complex example
On the image above you can see TED’s video player. When I see the “1 language [Off]” text label on the subtitles dropdown, it immediately gets my attention. Hmmm… this just looks complex. Let’s see… why is this? The reason is because two different things are stated in the same interaction element:
- There is 1 subtitle language available
- The subtitle functionality is off right now
Many designers will argue that this is not a problem. That having “all this information” in only 3 words is a good solution. Some will also say: hey let’s display the current name of the only available language.
But if you put this in the perspective of the progressive interaction, one question pops out: do people need this two statements at the same time or can we present them progressively? And which one comes first?
It becomes obvious that FIRST you need to know that there is a subtitle feature available for this video and SECOND you’ll check if your language is available.
So a quick solution here is to get rid of the information about the available languages until the user voluntary displays the subtitle options. This way you get a cleaner interface for users that don’t need subtitle and an easier-to-decode interface for those who need it.
The same reasoning made me strip the “(we’ll add the URL)” text in the Tweet this talk feature.
To be continued…
