
Show HN: UI Concept – Focus Transition - NVI
http://n12v.com/focus-transition/
======
nostromo
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!

~~~
edwinyzh
Sorry, but I've done similar before, although it's for desktop UI :) Check the
first video on [http://liveditor.com](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.

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

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

------
NVI
A couple of years ago I saw
[http://osteele.com/tools/reanimator/](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.

------
cmdli
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
Ditto, I am usually half-hearted about the design related stuff that appears
on HN but that is a really solid piece of UX.

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

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

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

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

~~~
erichurkman
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!

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

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

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

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

~~~
Skalman
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-system-
metric%28windows-default-theme%29) [https://developer.mozilla.org/en-
US/docs/Web/CSS/:-moz-syste...](https://developer.mozilla.org/en-
US/docs/Web/CSS/:-moz-system-metric%28mac-graphite-theme%29)

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

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

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

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

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

------
harrytuttle
Really like this when using the keyboard.

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

Great work though!

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

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

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

~~~
NVI
[https://news.ycombinator.com/item?id=6415923](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.

------
markbao
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](http://cl.ly/image/3Q2g0a182M46))

~~~
ygra
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/](http://osteele.com/tools/reanimator/)

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

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

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

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

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

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

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

------
mistercow
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
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!

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

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

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

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

------
nfoz
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!

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

~~~
NVI
So did Apple Front Row before Apple killed it in Lion.
[http://www.youtube.com/watch?v=gY7o8Rh1D6I](http://www.youtube.com/watch?v=gY7o8Rh1D6I)

------
aagha
The Opera browser has had this capability for years.

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

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

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

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

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

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

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

------
divya_v
Just started using it. looking good. nice work!

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

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

