Show HN: UI Concept – Focus Transition (opens in new tab)

I found it nearly impossible to concentrate on what the video was trying to show me because of the background music.

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!

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.

I'd suggest to use the highlight color:

  box-shadow: 0px 0px 2px 3px highlight, 0px 0px 2px highlight inset

Feels off if you _dont_ use keys. But I guess thats not the point.

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.

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 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.

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.

Could someone with the appropriate clout contribute this to chromium and Firefox?

It seems like in a perfect open source world, a change like this should be simple to at least propose (pull request).

Really like this when using the keyboard.

When using the mouse, the transition is implied so it's annoying.

Great work though!

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.

This reminds me of the moving brackets between form elements in OpenLaszlo—anyone remember that from circa 2008?

(Can't find a live demo, but looks like this: http://cl.ly/image/3Q2g0a182M46)

Just installed it, seems awesome so far. Hopefully I don't get annoyed by the additional transition time.

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.

The Opera browser has had this capability for years.

Looking good. But, demo doesn't work in Chrome 30.0.1599.47 beta-m

Still can't figure out what it is. Hitting tab in a form to switch fields? That exists.

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.

I released it just two days ago.

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.

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...

I want something like this for text-searching within a page.

Interesting but I think it's a bit too subtle or quick.

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 one of those neat little things that make a big difference in how a program is used and perceived. Very nice work.

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.

That's a ingenious little addition.

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!

I noticed the Wii U's system software does this exact thing when you navigate the UI using the D-pad.

I was expecting some messy JavaScript. This is nice an clean solution.

Like this ! I think this is so simple and neat :)

Just started using it. looking good. nice work!