UX

【画期的】素のJavaScriptで桁数チェックが容易なテキストボックスのUIを作る

金額が大きくなればなるほど、桁数を1桁間違えれば大きく違ってきます。

1,000
1,000,000
1,000,000,000

この「カンマ」で示される形だと私が数えやすいのは、1万までです(苦笑)。

100万
10億

これの方が分かりやすくないですか?

アルファベットなら27文字で済むのに日本はやたらと種類が多い漢字があるから、漢字テストというものもあるし、Webフォントは重い。漢字というものは基本的に合理的じゃないと私は思ってますが、せめて使えるところでは使っていこうよ、日本人。書類を西暦じゃなくて和暦で書かせるとかいう記憶テストみたいな非合理的なことばっかりしてないでさ。

桁数チェックが容易なUI

数えるのが大変なくらいの桁数の多い数字を入力してみてください。

解説

はい、それだけです。
でも結構画期的じゃないですか?
ちなみにエラーもちゃんと返すようにしてます。
エラーの表現は遊び心です。

アクセシビリティ

ところでこれ、目の不自由な方がスクリーンリーダー(画面読み上げソフト)を用いているときにどうだと思いますか?

次回はこのUIについて、アクセシビリティも踏まえた実装がどうあるべきか考える、をテーマにします。

まとめ

この実装は、当方に制作をご依頼いただく場合にご希望の旨伝えていただければ無料でお付けします。
大きな数字の入力をする必要のあるものであれば便利だと思うんですよね。
だって私なら、インターネットで振込むとき10万以上になると入力後、念のため数えますよ。

著者のイメージ画像

BringFlower
稲田 高洋(Takahiro Inada)

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有、数年間ウェブアクセシビリティ基盤委員も務める。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。
2022年3月にBringFlowerを開業し、SEOコンサル、デザイン、ウェブ制作を一手に受ける。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。
プロフィール詳細