Show HN: UI Concept – Focus Transition

by NVI • 13 years ago

388 72 13 years ago

NVI14• 13 years ago

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.

ecubed• 13 years ago

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

NVI14• 13 years ago

Maybe I should make an animated GIF next time.

joeblau• 13 years ago

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

fletchowns• 13 years ago

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.

egeozcan• 13 years ago

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

mischanix• 13 years ago

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

erichurkman• 13 years ago

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!

NVI14• 13 years ago

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

SCdF• 13 years ago

Are any YouTube videos more than 30fps?

tripzilch• 13 years ago

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)

cmdli• 13 years 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.

rurounijones• 13 years ago

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

DrewAllyn• 13 years ago

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

NVI14• 13 years ago

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

SwellJoe• 13 years 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.

johnx123-up• 13 years ago

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

NVI14• 13 years ago

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

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

antidaily• 13 years ago

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

NVI14• 13 years ago

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

onli• 13 years ago

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

NVI14• 13 years ago

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

bliti• 13 years ago

This is one of those neat little things that make a big difference in how a program is used and perceived. Very nice work.

hayksaakian• 13 years ago

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

ygra2• 13 years ago

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

divya_v• 13 years ago

Just started using it. looking good. nice work!

Skalman3• 13 years ago

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

NVI14• 13 years ago

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.

Skalman3• 13 years ago

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

thomasahle• 13 years ago

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

nostromo• 13 years ago

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!

mtdewcmu2• 13 years ago

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.

gcb1• 13 years ago

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.

taternuts• 13 years ago

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

edwinyzh• 13 years ago

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.

mtdewcmu2• 13 years ago

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

fyolnish• 13 years ago

That's not the same interaction.

dspillett• 13 years ago

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.

markbao• 13 years ago

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)

ygra2• 13 years ago

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

PhasmaFelis• 13 years ago

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

agumonkey• 13 years ago

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

rjurney• 13 years ago

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

pests• 13 years ago

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

noptic• 13 years ago

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.

vanderZwan• 13 years ago

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.

NVI14• 13 years ago

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

ohazi• 13 years ago

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.

anigbrowl• 13 years ago

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

NVI14• 13 years ago

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.

mistercow• 13 years ago

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.

yesbabyyes• 13 years ago

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!

icebraining• 13 years ago

Fine here (Ubuntu 12.04, Firefox 22).

harrytuttle• 13 years ago

Really like this when using the keyboard.

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

Great work though!

NVI14• 13 years ago

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

smickie• 13 years ago

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

jeffmess• 13 years ago

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

nXqd• 13 years ago

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

batiste• 13 years ago

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

nfoz• 13 years ago

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!

romaniv• 13 years ago

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.

aagha• 13 years ago

The Opera browser has had this capability for years.

NVI14• 13 years ago

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

notdan• 13 years ago

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.

NVI14• 13 years ago

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

SimHacker• 13 years ago

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.

NVI14• 13 years ago

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.

rndstr• 13 years ago

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.

BHSPitMonkey• 13 years ago

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

Show HN: UI Concept – Focus Transition

Related Stories