はちど

ボードゲームのレビューなど。

*

一年前に作ったフォームのリニューアルに思うこと。

   

Hachiです。
昨日、1月15日は私の誕生日でした。
SNSが発達したおかげで、自分から言い出さなくとも勝手に誕生日をお知らせしてくれるので、いろんな人に祝ってもらえて、幸せですw

で、その前の3連休、特に最終日はひどい大雪でしたね。
大学時代に豪雪地帯にいた経験からすると、20~30センチなんて雪は、降ったと実感が湧く程度でしかないのですが。
といっても、困らないってわけじゃなく。
土地には土地の雪に対する困った事情ってのはあるなあ、と思うのです。

とくにこの辺、長野は、雪が降っているときよりも振り積もってからが本番、といった感があります。
冬の気温がとにかく低いので、日中ようやく溶け出した雪が夕方には凍り付き、
どこもかしこもアイスバーン!車道もよく見りゃブラックバーン!てな具合で。
転けないように歩くのが大変です。注意しないと。

閑話休題。
一年前、社内インフラ屋として初めて作った簡素なサイトがありました。
今度それが再利用されるということで、bugfixとフォームのリニューアルを行っています。

当時は、とりあえず納期に遅れないように、要求されたものを最低限満たせるサイトを作るのに励んでいて、
それが使いやすいものなのかということは度外視して、作れればいい、動けばいいという感じで作ってました。
それでも、完成したものが仕様通りに動いてくれて、実際に使われることになり、一安心。
bugはいくつか残ったままでしたが、criticalではなかったので、とりあえず放置していた、というわけです。

で、現在。
再利用するのでfixしてくださいと言われて見直したそれは、、
HTML4.01テーブル組みのデザイン。散見されるfont,center,bなどのタグ。丸くない角(!?)。
とても1年前に作ったとは思えないくらい古めかしくかび臭い古風で奥ゆかしいものでした。
そんなのを目の当たりにして恥ずかしく思いつつ、この1年間で得た知識は、
その古くさいHTMLを古くさいと言えるくらい何年間もの知識が凝縮されていたんだなぁと感じた瞬間でもあります。

そんなこんなで、そのフォーム。
bugfixするのは当然としても、改めて見て、”普通”に”使いづらい”ものでした。

Webフォームの”普通”な”使いづらさ”は、具体的にはこんな感じ。

  • 必要事項全部書き込んで送信ボタン押したら
    「エラー!同意のチェック忘れてます」フォームから離れすぎだよ忘れるよこんなの
  • 戻って同意のチェックつけてよしOKと送信ボタン押したら
    「エラー!パスワード未入力です」ページ戻るまで書いてあったよ勝手に消えんなよ
  • 「エラー!日付のフォーマットはMM/dd/yyyyで入力してください」
    そっちの事情ですよね人に頼らないで自分で判断しろください
  • 「エラー!ふりがなは全角カタカナで入力してください」もうやだこのフォーム

上記の例は、はまちや2さんのスライドを元ネタにしました。
ふつうのformをつかいたい | はまちや2

変なデータが送信されないために大抵のフォームに導入されている、
入力の確認を自動的に行ってユーザに修正を促すシステムです。
そしてユーザにとっては、「なんかしらんが怒られる(何度も)」ということを
子供時分以来久々に体験できる素敵な青天井イラつきシステムだと思います。

正しく入力したはずなのにエラー出て修正させられるというところが、ユーザをイラつかせるポイントだと思います。
しかし、それこそがこのシステムでやりたいこと(誤入力の防止)なので、そのシステム自体を外すことはできません。

ならばそのエラーメッセージの出し方や情報入力の仕方を工夫しましょうというのが今回の趣旨です。
具体的には。

  • 日付はカレンダーをクリックすれば自動でフォーマット通り入力できるようにする
  • エラーメッセージの表示までに画面遷移を挟まない
    =戻るをクリックしなくても情報の修正ができる
  • どこを修正したらいいかわかるようにし、正しく修正できたことも確認しやすくする

で、使うのはこのへん。
Datepicker | jQueryUI
exValdation | 5509.me
HTMLの中身はさておき、このプラグインをちょちょいと組み込んでやるだけで、使いづらかったWebフォームがそれなりに使えるようになってくれます。

旧来のWebフォームは、とかく使いづらいものでした。
当時からの人は「こんなふぉーむに まじになっちゃって どうするの」と言って、それに慣れるという選択をしました。
そういうのが積もり積もって、しばらくの間、Webは使える人だけが使うツールになっちゃってたわけです。
しかし今やWebは誰も彼もが使う便利ツール。
昔の人が慣れて忘れてた不平不満も、開発者側に立ってしまうと慣れてないユーザから次々に聞こえてきます。
慣れろの一言で済ませたい気持ちもありますが、ここは、こういう考え方でいきましょう。
東大入試英語の過去問で見たこんな例文が、私は未だに好きで、ずっと覚えています。

Creative thinking may well mean simply the realization that there is no particular virtue in doing things the way they have always been done.
訳;クリエイティブな考え方とは、単純に、今までのやり方には何の価値もなかったと気付くことなのかもしれない。

sns-widget

更新情報の確認にはこちら!

 - Web技術 , ,