Designing the Wider Web

In the olden times, I made static web pages. They sat quietly on tubular displays that squatted like toads on the desk of every office worker. Early humans grunted at these pages with mice and keyboards. That was it.

To write the simplest of web apps, the classic to-do list. I would design and build a dozen or so user interface elements, including the text input fields, buttons, labels, and checkboxes. To design and build a static page to-do list, I would create a dozen elements and write one-off code to handle keyboard and mouse input.

12 elements multiplied by 2 input types equals 24 considerations.

Easy!

Then came smart-phones and tablets, and I would create elements that worked in three unique layouts and accepted touchscreen input along with the keyboards and mice.

12 elements in 3 layouts handling 3 input types means 108 considerations.

Not terribly easy, but possible.

Here come the headsets! And not just one kind of headset, no, there are two divergent screen technologies, see-through and pass-through, with different design and engineering constraints. Even worse, these headsets ship with a radical variety of input types. A person using a to-do list today could hold in their hands something as simple as a two button pointer or something as complex as a pair of tracked wands that offer eight buttons, two thumb-sticks, and two touch-pads. Oh, and the headsets also track individual eye direction, finger movements, and spoken commands.

12 elements in 3 layouts and in 2 headset types, handling 10 input types means that for this measly to-do app there are 600 considerations.

Impossible!

I require another path.

I have to encapsulate in opinionated tools with intelligent defaults the design complexity and engineering overhead of this combinatorial explosion of displays and inputs. To design, I need mental frames, templates, and testing rigs so that I'm no longer designing from scratch. To build, I need patterns, frameworks, and skeletons so that on day one of a build I start with a reactive and progressive experience.

Here are the mental frames and patterns that I'm working with today:

There are three display modes:

There are three control types: (in green)

Display modes and control types can be mixed and matched per design:


click for full size

Finally, there are action maps. These declare routes from low level inputs like keyboard presses or voice commands to high level actions like "activate", "move", or "delete". These actions are fed into the controls so that the experience can react to the user's intent.

As I design and engineer wider* web applications, I'll think about and work within display modes, control types, and action maps. These three ideas represent the essential considerations of this paradigm.

This is freshly formed. I might be wrong. I will definitely be partially wrong.

So, I'm experimenting with an app framework that handles the common work of tracking these display modes, control types, and action maps. It communicates the transition between display modes so that application specific logic can be progressive and reactive.

No app framework can eliminate the inherent complexity of the wider web, but perhaps this one will exchange an impossible situation for one that allows me to design and code at human scale.

  • Addendum, April 26th 2018: I've switched to the umbrella term "the wider web" instead of "the transreality web" because it's more inclusive of the flat web. The title of this article used to be "Designing the Transreality Web" but I changed it to avoid confusions in the future. details here
More posts

Recent posts

  • What is PotassiumES?

    This is a post about PotassiumES, an ECMAScript library that enables browser-side development for the wider web. If you're not sure about the wider web, click that link because otherwise the rest of this post won't make a lick of sense.

  • Wider Web Lingo

    People sling around a lot of lingo when talking about the wider web, and even the term "wider web" is lingo!

    So, I wrote a series of short posts defining words and phrases ...

  • Wider Web Lingo: Voice

    There's a lot of lingo around the wider web so this is one of a series of short definition posts.

    Voice: Phrases or other vocal noises that can be recognized and used as input

    Computers are getting pretty good at understanding ...

  • Wider Web Lingo: Gesture

    There's a lot of lingo around the wider web so this is one of a series of short definition posts.

    Gesture: A body motion that can be recognized and used as input

    Computers are getting better at watching how we position ...

  • Wider Web Lingo: More Hugs, Fewer Thugs

    There's a lot of lingo around the wider web so this is one of a series of short definition posts.

    More hugs, fewer thugs

    The wider web is inherently more intimate than the flat web that you hold in your hand ...

  • Wider Web Lingo: Spatial Controls

    There's a lot of lingo around the wider web so this is one of a series of short definition posts.

    Spatial controls: Interactive visual elements that are placed in the real or virtual environment

    Unlike page controls or overlay controls (the ...

  • Wider Web Lingo: Overlay Controls

    There's a lot of lingo around the wider web so this is one of a series of short definition posts.

    Overlay controls: Visual elements that seem to sit on top of a portal display

    Overlay controls on the wider web float ...

  • Wider Web Lingo: Page Controls

    There's a lot of lingo around the wider web so this is one of a series of short definition posts.

    Page controls: Visual elements that you're used to on the web like buttons, images, text fields, and blocks of text ...

  • Wider Web Lingo: Wand

    There's a lot of lingo around the wider web (which is itself lingo) so this is one of a series of short definition posts.

    Wand: A handheld device with tracked orientation and position, often with touchpads, thumbsticks, buttons, or other controls ...

  • Wider Web Lingo: Immersive Display

    There's a lot of lingo around the wider web (which is itself lingo) so this is one of a series of short definition posts.

    Immersive display: A display into a real or virtual environment that covers most of your field of ...