Often the best ideas are those that make you wonder, "why hasn't anyone done this before?" and in retrospect seem completely obvious and intuitive. Like this!
I have seen this (well, something very similar) done before: newer versions of MS Excel (or at least the web based version) slide the cell focus indicator around instead of just removing it from one place to another. I didn't like it at first but probably because it was different and seemed unnecessarily showy, but after a couple of minutes to get used to the change it does make the interaction feel smoother and a little more natural.
I had a simple and obvious idea to make the browser history a timeline, rather than a list of links that changes when you revisit something. Then I looked at the Chrome history and I saw that it already worked this way. It was only not obvious to Firefox, I suppose.
Sorry, but I've done similar before, although it's for desktop UI :) Check the first video on http://liveditor.com.
To be specific, once the user want to "inspect" a html element, I use a flying animation to jump from the web preview window to the corresponding source code in the html/css/js code editor.
If it's a good idea, and we're going to discuss the proper level of the software stack to situate it, this should go in the UI toolkit for the desktop environment. (Why should the web browser be special?)
Alas, the state of the web today is that every website should feel the need to ignore my desktop settings and re-invent the UI — to some degree of success. I have a beautiful theme, and it seems to me a shame that web browsers (and sites) ignore it. We should not be re-inventing the UI for each web site we design. (And it should not be the websites implementing basic UI elements.)
Better, I think, would be a way to hook into the user's UI toolkit and UI preferences, and theme them. That way, the web site behaves like the rest of the UI environment, but can be themed to match your corporate style. (If you've ever seen FreeCiv on Linux, that might be a good example: it uses GTK, and the settings, but themes the widgets for the game.)
A couple of years ago I saw http://osteele.com/tools/reanimator/, OpenLaszlo based RegExp tester. The animation on tabbing between text fields was unusual and interesting. I implemented a similar effect using JS & CSS, and made Chrome and Safari extensions.
Wow. It fits the current aesthetic, solves a common interface problem I have, is only noticeable when you need it, fast, and doesn't look half-bad. I'm not a big design person so I can't comment on that, but color me impressed.
Great idea.
Possible improvement: Only show the effect if the user uses the tab key. IMHO the effect is distracting if you use the mouse and are already looking at the focused object.
That's actually pretty similar to how in Linux you can choose to either have to click to give a window focus (like in Windows), or simply have whatever window currently is under the mouse to have focus.
Subtle change is often underrated...visual feedback that makes it clear what has changed is a pretty cool improvement.
Some of the mildly frustrating elements of using websites include not knowing where "I" am on the page. facebook, in particular, has some conventions that leave me confused and fumbling around for where I was typing a lot. This particular trick wouldn't fix it for facebook, but I'm pretty likely to add this to my current and future web UI projects, assuming it works reliably across browsers and doesn't interfere with other JS libraries I'm using.
Just start automatically tabbing through the demo elements in a loop, why bother with anything but the real thing? Make it so it's easy to interrupt and take control over. Really neat idea by the way.
Such a simple idea - but it does make it easier to follow. The only problem I have is that it's very mac-centric. On my system the focus color is orange and it looks a bit off.
And then please get all major desktop operating systems to follow suit. Although I guess something like that can be made by someone else to at least work with applications that honor accessibility APIs (and then it could work in all webpages as well and even show the focus shift from the address bar to the default input field on the web page).
This is a great idea and executed well but forms should not be complicated. They should be easy to follow. If you need this library to ease users along then perhaps you need to take a look at your forms workflow rather...
How about highlighting the current element with an "active" color border, and the next element with a different color for "this one comes next" (e.g. blue and dark gray, or dark and light blue, with the inactive elements being a light gray)? I think this would emphasize the element that comes next, as opposed to making you guess whether focus will move down, to the right, back to the top, etc. The animation is nice, but it doesn't really give you information until after the tab.
This is a good idea but I don’t know how to implement it in JS. Probably, I’d need to have a list of all focusable elements, e.g. form elements, elements with tabindex attribute and links (for some browsers). Hidden elements should be excluded. This list should be updated on DOM changes. Sounds complicated already, I don’t think it would be robust.
OpenLaszlo has had this for years. It's a great idea that works well, but it's not original.
The OpenLaszlo implementation animates four shadowed corner chevrons that interpolate between the corners of the current widget to the corners of the next widget, so they are are not as obtrusive as animating a whole rectangle (drawing a bunch of rectangles over each other tends to look cluttered, while the corner chevrons are not as visually distracting), and they work well between differently sized widgets.
The OpenLaszlo animation is a bit slower than the animation shown in this demo, and I think the slower speed of OpenLaszlo's animation works better for drawing your eye between one widget and the other.
This demo seems to move faster than eye tracking speed, and the animation appears to skip or flicker, and it go too fast to follow, especially if the widgets are far apart.
I didn’t use OpenLaszlo-style corners because I wanted to keep the native look as much as possible.
Regarding the speed:
Currently the transition duration is constant; it’s always 0.1 seconds regardless of the distance between the source and the target. I’m considering to make the duration variable and velocity constant so it would take more time for longer distance.
After using it for a few hours I must say it is too distracting since it is overdoing it for links clicked that don't navigate away from the page (only some of them, though). So for example navigating GMail and Facebook you get the focus animation a lot when clicking around which is worse than having a gif animate w/o your interaction.
This is a really great idea. It drives me nuts how pressing tab (or even more commonly, shift-tab) can sometimes lead to focus being "lost". And not in the usual sense programmers mean, but in the sense of "where the hell is the focus?"
Unfortunately, it doesn't seem to work in Ubuntu at all in either Chrome or Firefox.
Works for me - Ubuntu 13.04, Chromium 28, Firefox 24.
It looks way better in Chromium, since it's got the correct focus color and the animation looks more smooth. Firefox is way more jerky and the color/outline is all wrong.
I still like it, even in Firefox, because it's such a nice addition!
Good idea, but the particular visualization (moving shadow) is a bit annoying. I would go with something less in-your-face. Maybe a light shadow that blinks couple of times on focus? I don't think the directional aspect of this is very important. Users just need to know where the focus is now, not where it came from.
You could extend it to all the tabbable elements on the page too. So once you've tabbed outside of the form element, the blue glow files to the next link, or the address bar in the browser and so on...
The idea is great. The visual implementation needs work, but that will happen. (I found it visually scarring to see the blue box jumping around wildly; maybe that's just me.) Anyway, thanks!
Interesting, I just bought a Samsung smart TV and I noticed during the setup that when you switch between fields the focus selector moves just like this does.
