日付入力フォームのUXデザインガイドライン
日付入力欄は、適切なデザインパターンを利用して、あいまいさのない、タスク達成に役立つものにしなければならない。小さなデザイン変更で、大きなユーザーエラーが防げる可能性もあるのだ。 Date-Input Form Fields: UX Design Guidelines by Angie Li on January 22, 2017 日本語版2017年4月24日公開 日付入力欄の書式設定など、ささいなことだと思うかもしれない。しかし、書式の実装が不適切だと、ちょっとしたインタラクションによって、入力のプロセスが立ち往生してしまうこともある。日付入力に関するデザインが良くないと、ユーザーが悩んだり、イライラすることになり、その入力フォームを全面的に断念してしまうというリスクがあるからだ。それどころか、ユーザーが間違った日付を指定してしまって、取引自体が悲惨なことになってしまう可能性もある。たと
ユーザーの目に入るタイミングで適切に表示させる
ウェブサイト上でユーザーに快適に操作を行ってもらうためには、画面上で適切な誘導を表示した方が負担が少なくなる場合があります。 分かりやすい例では「入力フォーム」です。 スポーツジムの入会フォームの例 スポーツジムの店舗窓口で、新規入会手続きのため指定されたウェブサイトをスマホ使って手続きしました。 その時の会員情報登録フォームは以下になりますが、長くて大変な経験をしました。 詳細は、こちらになります。 入力すべき項目を整理すると以下のようになります。 既にお客様番号や、会員番号がある人のための検索フォーム 入会者の情報登録 未成年の保護者情報の登録 個人or企業orスクールかの種目登録 来館予定日の登録 これらがひとつの画面内に表示されています。 情報量の多さに戸惑ってしまったのか、入力ミスを連発してしまいました。 さらにこの会員情報登録フォームを終え、別の登録をしている最中にもなにか操作
Bootstrap Page Builder - Bootstrapを使った画面設計ツール
WebのUIは自由度が高い分、イチから作るのは手間がかかります。そうした状況だからこそ、Bootstrapのように見栄えの良いUIが作れるフレームワークに人気が集まりました。しかし、Bootstrapの記法に沿ったHTMLの手打ちすら面倒に感じてきます。 そこで使ってみたいのがBootstrap Page Builderです。ドラッグ&ドロップで簡単にUIが作れます。 Bootstrap Page Builderの使い方 メイン画面です。左側に部品が、右側にエディタが表示されています。 グリッド構成も簡単に実現できます。 多数のパーツが用意されており、それらをドラッグ&ドロップして画面を作っていきます。 プレビューです。基本的には同じ見た目が再現されます。 スマートフォンサイズなどレスポンシブな表示確認も簡単です。 Bootstrap Page Builderを使えばBootstrapを使
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
