Show HN: UI Concept – Focus Transition | Hacker News Reader

Show HN: UI Concept – Focus Transition

n12v.com

388 pointsNVI72 comments

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 thought the same thing.

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.

pandora.com had this on their login form wince they launched. on the flash version.

press tab from the username field and the 4 L-shaped corners flown from there to password.

was neat, but they removed it recently... at least I'm not getting it anymore.

I definitely remember seeing that as well - I told a few people about it because I thought it was a cool effect and good idea

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.

It's still a good idea to put it in web browsers. Simple and obvious ideas get continually reinvented until they take hold.

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

That's not the same interaction.

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.

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.

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.

Ditto, I am usually half-hearted about the design related stuff that appears on HN but that is a really solid piece of UX.

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.

I just released Flying Focus 1.2 that doesn’t do anything on mouse interactions.

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.

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

Maybe I should make an animated GIF next time.

LOL, that'a little extreme. He could just mute the sound :)

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.

It wouldn't be that great for this case: http://oi42.tinypic.com/wrfj41.jpg

The video is also 30fps, which I think is completely inadequate for demonstrating a subtle effect like this.

The video really is a disservice to the effect. I played the video first and had a very different opinion of it vs. the playground!

You led me into thinking that slow motion would work very well in the video.

Are any YouTube videos more than 30fps?

LOved the music but, yes, I found it very distracting as well :) Fortunately the text wasw very clear, and so was the live demo.

(the music, was it µ-Ziq? it sounds like him)

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

Unfortunately, this will make colors look off on OS X. "highlight" color is different from the focus color on OS X.

Hardcoding colors for different OS-s might be more reliable.

Oh, didn't know. You could even force highlight colors, by explicitly setting border or outline colors.

And different OS themes... And updating the list every time they change...

I doubt you can detect an OS theme with Javascript or CSS.

You can actually partially detect it with Firefox.

https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-syste... https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-syste...

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

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.

Ugh no. The whole point of the animation is that it's responsive to the tab action, which binds content to context.

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.

Really like this when using the keyboard.

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

Great work though!

http://nv.github.io/flying-focus/test/ is an experimental version that only works on tab and arrow keys (for radio buttons).

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

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.

https://news.ycombinator.com/item?id=6415923

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.

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)

I knew I've seen it before somewhere. NVI posted an example [1] below [2] where it can be seen live.

________

[1] http://osteele.com/tools/reanimator/

[2] https://news.ycombinator.com/user?id=NVI

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

Yes, I’m thinking of a way to turn it on only when the keyboard is used.

Could be optional. At the moment, I like the effect even with the mouse. It's fast enough.

http://nv.github.io/flying-focus/test/ experimental version only works on tab and arrow keys (for radio buttons).

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.

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!

Fine here (Ubuntu 12.04, Firefox 22).

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.

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

It doesn’t slow down the actual focus, e.g. you can start typing in a text field before transition is finished.

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!

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.

So did Apple Front Row before Apple killed it in Lion. http://www.youtube.com/watch?v=gY7o8Rh1D6I

The Opera browser has had this capability for years.

I don’t think it ever had animated focus transitions.

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

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

I just tested on 30.0.1599.47 beta, OS X 10.9. It worked well.

What doesn’t work, exactly? No visual changes?

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!

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

It animates the focus change with a visible box moving between fields as you tab or click on different fields.

Reply on news.ycombinator.com