The Hover State: Between Noticing and Doing

[00:00:00]Welcome to Interface Studies my name is Saleh when the iPhone arrived in 2007 apple started over it built an operating system designed for fingers from the beginning buttons became larger interfaces stopped assuming there was a cursor somewhere on the screen the mouse simply wasn't  part of the picture anymore the web didn't get that luxury every page that already existed still had to work the same document now had to open on a desktop with a mouse and on a phone without one and nothing could be left behind that became a problem because the web had quietly  built itself around one very small assumption that there would be always something pointing and with pointing comes this  state that we call hover native software rarely has this problem a Mac app can become an  iPhone app by being rewritten a Windows application never has to care about a television each version belongs to its own platform but the web works differently a web page is expected to  survive whatever arrives next today that might mean a laptop a phone a tablet or a television tomorrow it might mean something else entirely that sounds like a strength but sometimes it isn't now hover wasn't invented for the web if you have a mouse there's  always a pointer somewhere and even when you're doing nothing it is resting on something transmitting its position data nobody had to invent that resting state it simply came with the hardware in 1991 Apple built a feature called Balloon Help into the Macintosh turn it on move the pointer over something and a small speech bubble explained what it did a couple of years later Microsoft took the same idea and made it quieter rest the pointer over a toolbar button in word and a small label appeared they called it a tooltip and by the time Windows 95 arrived the name has spread everywhere neither feature needed a click they depended on something much simpler the pointer could stop it could wait over a thing  without committing to it it's that gap between noticing  something and doing it and that tiny pause turned out to be surprisingly useful then the web got hold of it at first it was decoration by the late 90s websites were swapping images the moment the pointer drifted over them buttons lit up colours changed designers called them rollovers and they were held together with Javascript and two copies of every image one for before the pointer  arrived and one for later it was a bit fiddly but people did it anyway then the browser made it effortless though more slowly than the story usually goes Internet Explorer 4 introduced hover but only for links and in 1998 CSS made the general version part of the language so that in principle any element on a page could respond to a pointer resting on it that was in principle in practice the dominant browsers think Internet Explorer only applied hover to anything other than a link when version 7 shipped that was in October 2006 the iPhone was introduced three months later let's sit with that for a second the timing here is almost unkind the web spent eight years with the most powerful mouse dependent feature half implemented and then finished the job at the exact moment the mouse stopped being the  thing people browsed with and once it was finished hover was everywhere menus unfolded as you moved towards them sometimes buttons appeared  only when you needed them captions faded into view even the little labels that still surface when you leave the pointer over an image are built on the same assumption hover became part of how the web worked and that is the important change here the web hadn't simply borrowed the mouse it had started assuming that the mouse would always be there not because anyone decided it should but because it was the easiest way to build things once that assumption settled into browsers standards and millions of websites it stopped looking like an assumption at all it just looked like the web now that assumption about hover became welded into computing actually it was deeper than the web itself back in 1990 before the web had really taken off Bill Buxton described pointing devices as moving through three distinct states first was out of range the device isn't being sensed at all second is tracking the pointer moves but  nothing has been selected yet third is dragging the button is down and now you're acting on something hover lives entirely inside the Middle State it's the moment where you are pointing without committing now Buxton's point wasn't really about mice it was that different input devices can reach different states some can track before they act some can't and if a device can never enter that middle state it can never truly hover no matter how clever the software becomes some people had been living with that limitation long before phones arrived if you navigate with a keyboard instead of a mouse there's nowhere for a pointer to rest you move from one control to the next and there's no tracking state in between the web's accessibility guidance saw this early and they named it plainly in 1999 eight years before the iPhone the very first web Content Accessibility Guidelines carried a guideline called design for Device Independence and one of its checkpoints told authors to stop reaching for event handlers that only a mouse could fire if something only appears on hover some people will never discover it eventually the standards turned that into a rule anything revealed on hover must also be reachable another way not because hover was bad, but because it was never universal and that mattered more than anyone realized then touch arrived suddenly the missing state wasn't an accessibility issue anymore it was everyone's problem a touch screen works very differently from a mouse with a mouse the pointer can wander across the screen all day without choosing anything a finger can't think about where your fingertip can actually be either it is off the glass and the device doesn't know it exists or it's on the glass and it's already touching something there's nothing in between no hovering no resting no second thought before the action the tracking state had simply vanished native software adapted surprisingly easily phone apps were written for  touch from the beginning desktop carried on using hover because desktop computers still had mice each platform evolved in its own direction the web couldn't it still had to be the same page the same menu the same CSS the same assumptions and now they had to work under a  pointer and under a fingertip for a while they didn't menus that opened on hover  couldn't be opened at all tooltips disappeared some menus would open and never close because a mouse leaves a target by drifting away and a finger only leaves by lifting the web had inherited a behavior that touch simply couldn't perform not because touch was missing a feature but because it was missing a state so what do you do when an entire state disappears you have two choices either you find another way to produce the same behaviour which was what millions of  sites did through mobile first best practices and advancements in web standards to detect these devices or you try to bring the missing state back almost every solution since the smartphone has turned out to be one of those two ideas some systems replaced hover without replacing the state itself an Android did this almost immediately from the very first version of Android pressing and holding on something open Deck context menu the method that builds it has been in the toolkit since the original release in 2,008 which tells you how early they knew they'd need it a hover menu had become a time based interaction instead of a space based one rather than resting over a target you committed to it and waited the browser borrowed the same idea press and hold a link on your phone and instead of opening it straight away a menu appears different gesture same purpose apple explored a more ambitious version in 2015 the iPhone Learned to measure pressure press lightly and you could peek into something press harder and you could open it apple called it 3D touch it was clever and it disappeared within four years the extra hardware was gone replaced by haptic touch  which isn't pressure sensitive at all it is simply a timed press with a small tap of feedback when it activates apple arrived at exactly the same answer Android had reached years earlier if you can't hover wait time had become a substitute for distance but that only replaces what hover does it doesn't bring back the missing state the other option is bringing the state back and other engineers tried something more ambitious instead of changing the interaction they changed the hardware one approach was to sense something before it touched the screen Samsung's Galaxy Note 2 did exactly that in 2012 bring the stylus close to the display and the screen reacted before the tip arrived links could be previewed images could expand menus could appear hover had returned here not because software had changed but because the hardware could once again enter the tracking state not with a mouse but through a special stylus Apple Pencil does much the same thing today hold it above the iPad and the interface shows where the stroke will land before you've made it then came the Vision Pro and this time the thing hovering over the interface wasn't a pen it was your eyes look at a button and it quietly responds pinch your fingers and the action happens there's another way to restore hover and it doesn't require inventing anything just plug the mouse back in Android discovered this surprisingly early connect a mouse to and Android tablet which its tablets have accepted since 2011 and a familiar arrow appears move it around and the operating system quietly slips back into the world of pointers you'll have hover and clicks and Google documented that to describe the mouse moving without any buttons pressed Android introduced a new motion event and it called that event hover the word survived because the state had returned the interesting thing back then that the engineering notes also mentioned one more thing almost in passing hover enter and exit weren't supported yet Android could tell you where the pointer was not that it had left apple solved the same problem very differently when mouse support arrived on the iPad in 2020 it didn't use a desktop arrow that would have looked foreign on an interface designed for fingers instead apple drew a soft circular cursor about the size of a fingertip and as it approached the control the cursor stretched and wrapped itself around it the pointer no longer floated above the interface the interface reached out to meet the pointer the tracking state had returned but it looked completely different eventually Android drifted in the same direction and after more than a decade its sharp arrow became rounder and softer too the mouse had come back just not in the form people expected since we mentioned the Vision Pro it's worth as asking the question what happens when the web reaches devices that came after the smartphone so on the Vision Pro and on the face of it this looks like hover finally making a comeback you don't point with a mouse you don't touch a screen  you simply look at something the button once before you have chosen it and then you pinch to commit that sounds remarkably familiar your eyes have become the pointer the pinch has become the click so surely the web gets hover back there on the Vision Pro it doesn't to a web page Vision Pro still looks like a touch device your gaze never triggers the hover pseudo class and websites are never told where you're looking that is deliberate the platform knows where your eyes are the page doesn't now let's imagine if every website received the livestream of your gaze it wouldn't just know what you clicked it would know what caught your attention what distracted you what you hesitated over what you read and what you ignored your eyes reveal far more than your mouse ever did so because of all these privacy issues apple keeps add information to itself the interface responds the page never sees why at the end of all this an interesting thing that  came out of all my research around this topic was that hover is starting to look different it isn't just a CSS pseudo class anymore and it isn't even really about the mouse the mouse just happened to be the first device that made a particular kind of interaction feel effortless which is the ability to point at something without acting on it the web inherited that ability almost by accident then it slowly forgot that  it had inherited it at all and then began to treat hover as though it were a permanent  property of computing instead of a temporary property of one particular device that's why the arrival of touch felt so disruptive early on the finger didn't remove hover it just exposed the assumption that hover had always depended on the interesting thing here is that the tracking state  never belonged to the mouse a stylus can enter it your eyes can enter it a trackpad reaches it through  a cursor somewhere else even a controller floating in virtual space can reach it a bare fingertip cannot and that isn't a limitation of software it's simply the kind of device a fingertip is once we see all that a lot of interface history  starts making more sense hover wasn't disappearing engineers kept trying to rebuild the same state in different ways sometimes they use time sometimes pressure sometimes a pen sometimes your eyes sometimes they simply plug the mouse back in it's just different hardware and the same missing space  between noticing and doing