7 ms·
Show HN: UI Concept – Focus Transition
- NVI 13y agoA 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.
- ecubed 13y agoI found it nearly impossible to concentrate on what the video was trying to show me because of the background music.
- NVI 13y agoMaybe I should make an animated GIF next time.
- joeblau 13y agoLOL, that'a little extreme. He could just mute the sound :)
- fletchowns 13y agoJust 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 13y agoIt wouldn't be that great for this case: http://oi42.tinypic.com/wrfj41.jpg http://oi42.tinypic.com/wrfj41.jpg
- mischanix 13y agoThe video is also 30fps, which I think is completely inadequate for demonstrating a subtle effect like this.
- erichurkman 13y agoThe video really is a disservice to the effect. I played the video first and had a very different opinion of it vs. the playground!
- NVI 13y agoYou led me into thinking that slow motion would work very well in the video.
- SCdF 13y agoAre any YouTube videos more than 30fps?
- tripzilch 13y agoLOved 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 13y agoWow. 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 13y agoDitto, I am usually half-hearted about the design related stuff that appears on HN but that is a really solid piece of UX.
- DrewAllyn 13y agoJust installed it, seems awesome so far. Hopefully I don't get annoyed by the additional transition time.
- NVI 13y agoIt doesn’t slow down the actual focus, e.g. you can start typing in a text field before transition is finished.
- SwellJoe 13y agoSubtle 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 13y agoLooking good. But, demo doesn't work in Chrome 30.0.1599.47 beta-m
- NVI 13y agoI just tested on 30.0.1599.47 beta, OS X 10.9. It worked well. What doesn’t work, exactly? No visual changes?
- antidaily 13y agoFeels off if you _dont_ use keys. But I guess thats not the point.
- NVI 13y agoYes, I’m thinking of a way to turn it on only when the keyboard is used.
- onli 13y agoCould be optional. At the moment, I like the effect even with the mouse. It's fast enough.
- NVI 13y agohttp://nv.github.io/flying-focus/test/ http://nv.github.io/flying-focus/test/ experimental version only works on tab and arrow keys (for radio buttons).
- bliti 13y agoThis is one of those neat little things that make a big difference in how a program is used and perceived. Very nice work.
- hayksaakian 13y agoCould 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 13y agoAnd 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 13y agoJust started using it. looking good. nice work!
- Skalman 13y agoSuch 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 13y agoUnfortunately, 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.
- Skalman 13y agoOh, didn't know. You could even force highlight colors, by explicitly setting border or outline colors.
- thomasahle 13y agoAnd different OS themes... And updating the list every time they change...
- rorrr2 13y agoI doubt you can detect an OS theme with Javascript or CSS.
- Skalman 13y agoYou can actually partially detect it with Firefox. 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 https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-syste...
- nostromo 13y agoOften 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!
- mtdewcmu 13y agoI 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 13y agopandora.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 13y agoI 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 13y agoSorry, 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 13y agoIt's still a good idea to put it in web browsers. Simple and obvious ideas get continually reinvented until they take hold.
- markbao 13y agoThis 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 13y agoI 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
- PhasmaFelis 13y agoI want something like this for text-searching within a page.
- agumonkey 13y agoInteresting but I think it's a bit too subtle or quick.
- rjurney 13y agoStill can't figure out what it is. Hitting tab in a form to switch fields? That exists.
- pests 13y agoIt animates the focus change with a visible box moving between fields as you tab or click on different fields.
- noptic 13y agoGreat 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 13y agoThat'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.
- NVI 13y agoI just released Flying Focus 1.2 that doesn’t do anything on mouse interactions.
- ohazi 13y agoHow 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 13y agoUgh no. The whole point of the animation is that it's responsive to the tab action, which binds content to context.
- NVI 13y agoThis 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 13y agoThis 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 13y agoWorks 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 13y agoFine here (Ubuntu 12.04, Firefox 22).
- harrytuttle 13y agoReally like this when using the keyboard. When using the mouse, the transition is implied so it's annoying. Great work though!
- NVI 13y agohttp://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).
- smickie 13y agoThat'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 13y agoThis 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 13y agoLike this ! I think this is so simple and neat :)
- batiste 13y agoI was expecting some messy JavaScript. This is nice an clean solution.
- nfoz 13y agoThe 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 13y agoGood 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 13y agoThe Opera browser has had this capability for years.
- NVI 13y agoI don’t think it ever had animated focus transitions.
- notdan 13y agoInteresting, 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 13y agoSo did Apple Front Row before Apple killed it in Lion. http://www.youtube.com/watch?v=gY7o8Rh1D6I http://www.youtube.com/watch?v=gY7o8Rh1D6I
- SimHacker 13y agoOpenLaszlo 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 13y agohttps://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.
- rndstr 13y agoAfter 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 13y agoI noticed the Wii U's system software does this exact thing when you navigate the UI using the D-pad.