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

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

フォームで最後に必ずあるのが送信ボタンです。最近ではAjaxを使っている場合も多く、送信した直後に何らかの反応をしないと二重送信やストレスの原因になってしまいます。そこで使ってみたいのがLaddaです。


色々なタイプのボタンが用意されています。まず左上をクリックしてみます。


ボタンの横からローディングアイコンが表示されました。ボタンの色も変わっています。


別なボタンの場合、ローディングアイコンの位置が変わります。


オレンジ色のボタンはローディングアイコンだけが強調されるパターンです。


水色のボタンは文字が消えてローディングアイコンだけに変わるパターンです。


最後に紫色。こちらはインジケータ付きで徐々にステータスが100%に近づいていくものです。


丸形の場合でも左から右にステータスが更新されていきます。

緑色のパターンの場合、ボタンのサイズが若干変わります。オレンジ色の場合、全体がグレーアウトするので送信中である旨が分かりやすいです。サイズの大きいファイルなどを送る場合は紫色のインジケータ付きが分かりやすそうです。


MOONGIFTはこう見る

Ajaxを使っている時の二重送信は多々発生する問題です。解決策としてはsubmitボタンをdisableにすることですが、この場合何らかのエラーがあった場合に押せる状態にならないケースが多々あります(エラーがあっても戻せば良いだけですが)。

開発者は利用者のミスが減れば良いと思いがちですが、ミスはUI上の問題から生まれることが多々あります。それを防ぐためのアイディアを積極的に取り入れ、ユーザストレスを解消する仕組みもまた開発者によってしか生み出せないのです。

Ladda

hakimel/Ladda · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2