二重送信の防止に。ボタンにローディングアイコンを追加「Ladda」
LaddaはJavaScript/CSS3製のオープンソース・ソフトウェア（MIT License）です。
フォームで最後に必ずあるのが送信ボタンです。最近ではAjaxを使っている場合も多く、送信した直後に何らかの反応をしないと二重送信やストレスの原因になってしまいます。そこで使ってみたいのがLaddaです。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 9.51.14.1370952846.png)
色々なタイプのボタンが用意されています。まず左上をクリックしてみます。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 9.51.18.1370952850.png)
ボタンの横からローディングアイコンが表示されました。ボタンの色も変わっています。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 9.51.21.1370952856.png)
別なボタンの場合、ローディングアイコンの位置が変わります。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 9.51.24.1370952865.png)
オレンジ色のボタンはローディングアイコンだけが強調されるパターンです。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 9.51.30.1370952872.png)
水色のボタンは文字が消えてローディングアイコンだけに変わるパターンです。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 9.51.34.1370952878.png)
最後に紫色。こちらはインジケータ付きで徐々にステータスが100%に近づいていくものです。
[](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 9.51.38.1370952884.png)
丸形の場合でも左から右にステータスが更新されていきます。
緑色のパターンの場合、ボタンのサイズが若干変わります。オレンジ色の場合、全体がグレーアウトするので送信中である旨が分かりやすいです。サイズの大きいファイルなどを送る場合は紫色のインジケータ付きが分かりやすそうです。
MOONGIFTはこう見る
Ajaxを使っている時の二重送信は多々発生する問題です。解決策としてはsubmitボタンをdisableにすることですが、この場合何らかのエラーがあった場合に押せる状態にならないケースが多々あります（エラーがあっても戻せば良いだけですが）。
開発者は利用者のミスが減れば良いと思いがちですが、ミスはUI上の問題から生まれることが多々あります。それを防ぐためのアイディアを積極的に取り入れ、ユーザストレスを解消する仕組みもまた開発者によってしか生み出せないのです。