Inverting the UI

Charles Roth, 11/25/2023

I. Introduction

Earlier this week, I met with two UI developer colleagues (Anthony and Cathy) at ProQuest, and discussed the current mivoter.org, and Ian's sketches for an improved interface. (They also helped do data entry in 2022.)

(Note: I recommend viewing this whole page, and the links from it, on your phone. Or on a 'mobile simulator' page on a laptop.)

What I got out of that meeting (literally) turned my thinking upside down. What follows is a summary, and then some crude mock-ups for discussion.

II. Web = App?

Back in 2022, I thought of using a website to "look like" an app. Everybody's got an app, right? That's the cool way to go -- but app development is too expensive, and requires a lot more knowledge. But HTML is easy, yes?

And it worked astonishingly well, considering how little we had to work with. But the way the browser nav buttons, and the site nav buttons, were "nailed" down to the bottom of the window, always looked a bit funky. (See 2022.mivoter.org on your phone.)

That was my goal: to look like an app, which typically has its nav buttons 'nailed' to the bottom, no matter how you scroll.

III. Well, no. They're different animals

What I learned from Anthony and Cathy is that there is a great divide between apps and mobile websites -- and most importantly, that most users (especially younger users) know the difference.

In particular... most mobile websites put the most important controls at the top. Many of them also "nail" controls to the top. See, for example, IRS, Olgas, BlueVoterGuide, and Target.

"Why?", I asked. At first that 'divide' seemed counter-intuitive.

Apparently, nobody's quite sure. In fact, there's quite a debate on the 'net about which approach is better, and why. But it seems to (mostly!) come down to this:

People are used to websites flowing down from the top. All of the browser controls are at the top, and most websites for the desktop follow this approach, and put key nav controls at the top.
Phones, on the other hand, have the most significant buttons at the bottom, within easy reach of the user's thumbs(!). App design followed that pattern, and flowed "upwards".

This, however, makes mobile websites neither fish nor fowl. Which approach makes more sense? Which approach will seem 'more natural' to the user?

From what I'm hearing and reading, it appears that most users realize that websites are just "different" from apps. (Just the lack of having to install an app apparently cues the user's expectation, among other things.)

Plus, we run into the "what's really nailed at the bottom?" dilemma. If we 'nail' buttons to the bottom, then we have two choices:

Show the site buttons and the browser nav buttons, stacked at the bottom, 100% of the time (just like in 2022).
Nail the site buttons to the bottom, but then the bottom itself moves (slides down) the moment the user scrolls on a longer page.

Personally, I find the 1st one ugly (even though I chose it in 2022), and the 2nd makes me sea-sick. OTOH, users have (often unconsciously) already adapted to some changes like that. E.g., when you scroll down:

the URL/address bar often vanishes, or becomes smaller (shorter).
the browser nav buttons disappear (the page effectively becomes longer), until you scroll back up (even a little).

IV. Mockups

Another thoughtful suggestion from Anthony and Cathy was a very simple first "splash" page, that does two things:

Appeal to emotions
Get the address

... and nothing else. As simple as can be -- no distractions.

See a mockup of such a splash page.

From there the idea is that, once the user is past the splash page, everything else has the same template:

A tiny logo
Site nav buttons
And the user's editable address

all at the top. See, for example, this mockup of the Candidates page. (The logo/buttons/address would all be 'nailed' to the top, and everything else scrolls "under" it.)

V. Other Resources