ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Focus transitionはCSS3製のオープンソース・ソフトウェア(MIT License)です。

ちょっとした工夫でユーザビリティは大きく向上します。今回はWebフォームにおいてTabキーを押した時にアニメーションを実現するFocus Transitionを紹介します。


インストールしました。


任意のWebフォームにおいてFocus Transitionが適用されます。


デモ動画です。アニメーションが分かるかと思います。

Focus Transitionが行っていることはCSS3のアニメーションを適用することです。それによってTabキーを押した時にフォーカスがぱっと移るのではなく、アニメーションしながら移動していくようになります。これだけでフォーカスの大きな移動がスムーズになり、目線でも追いかけやすくなります。スタンドアローンのJavaScriptファイルの他、Google Chrome/Safari向け機能拡張も提供されています。


MOONGIFTはこう見る

WebサイトはURLごとに移動するのが基本になっているため、リンクをクリックした瞬間に頭が切り替わってしまいます。そのため何を入力していたのか忘れてしまったり、必要としていた情報を探し出せなくなったりします。これはタブやウィンドウをまたぐとさらにその傾向が強くなります。

スマートフォンアプリでは右や上下にスライドすることでユーザのストレスを低減するようにし、スムーズに操作が続行できるように工夫されています。こういった仕組みはWebにおいても使えるところがあるでしょう。Ajaxを使ったり、スムーズな表示切り替えにするだけでユーザビリティは向上するはずです。

Focus transition

NV/flying-focus

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2