日付選択のUIの調査

先日作った新幹線の予約アプリで日付選択のためにinputタグのtype=’date’を使っていたのだが、かなりの環境で表示されていないことがわかった。他の方法を考えることにした。シンプルなデザインでモバイルフレンドリなものを探す。ところで他のサービスはどんな手法を使ってるのだろうか。

airbnb


フォームがバラバラに分割されておらずシンプル。モバイルの場合はフォームを全画面モーダルで表示。あくまで入口はシンプルに見せたいらしい。この辺り、従来の旅行会社のサイトとはちょっと違う。日付の選択もモバイルに特化したモーダルタイプになっていて安心感がある。モバイルの場合は遷移を増やしてでもその時その時のUIにフォーカスさせることが効果的だと感じる。

skyescanner


ファーストビューでのフォームはちょっと複雑だが要素がはっきりしてて視認しやすい。日付選択もモバイルもやはりしっかりと全画面表示されている。

他にもモバイルに特化したものならこの辺りが参考になりそうだ。

探した結果

pickadate.jsが良さそうだ。デフォルトのデザインがシンプルでモバイルフレンドリ。

2016-09-23 | Posted in デザイン, ブログ, 開発No Comments » 
Comment





Comment