お取引サイト内にある、オーダーフォームを大幅に更新しました。
かねてから「ごちゃごちゃしてわかりずらい」という感じはずっと気になったけど、情報量は減らせないのがオーダーフォーム。細かく説明すれば文字列だらけの整理されてない羅列になりますし、情報量を減らすと細かい説明がなくなってしまうジレンマがありました。
もともとはiphone (ios14)のドラムロールが非常に操作が面倒でiphoneユーザーにとってはオーダーフォームはぶっちゃけ苦行のようなものでした。
当店ではiphoneが1つもないため(厳密にいうとiphone3が1台)、メイン作業はwindows。デバックスマホはandroidでした。まぁ、それでもモダンブラウザだろうから、操作、デザインは多少違っても操作まではそうかわらないだろうとタカをくくったまま10年近く放置してきたわけで(汗
試しにiphoneを一台調達し、オーダーフォームを操作してみたのですがこれがまた死ぬほどめんどくさくて、こりゃたまらんと抜本的更新を始めたわけです。
(ちなみに調達したiphoneがios14だったので、最新のios15で動作チェックしていたら結果が変わっていたかも)
で、セレクトボックスをjs+css化する手法を見つけ、これを更新。さらにjsに手を加えることによって、各選択肢に対して説明文をつけることができるようになったため、説明文の配置が大きく変わりました。
以前は、セレクトボックスの下に説明文を入れていたため、全体的にごちゃごちゃしていましたが今回最低限の説明だけで済ませられたため、かなりスッキリしました。
セレクトボックスの選択画面。セレクトボックスは要素のみしか掲載できないため、補足説明ができなかったのですが今回js+css化により、各要素に対して補足説明を入れることができたため、それぞれの選択に対して説明文を入れることができるようになりました。
わかりずらいオーダーフォームに注文断念してしまった方も、改めてトライしていただけますと幸いです。( ﾟДﾟ)ｹｯｺｳﾀｲﾍﾝﾀﾞｯﾀﾖ