web-dev-qa-db-ja.com

複数選択リストを表示する最適な方法は何ですか?

複数の選択肢リストを表示するための提案を探しています。

vertical text

私の最初の(そして素朴な)解決策。明らかに、90度の垂直方向のテキストは不必要に読みにくく、垂直方向の画面領域の多くを占めます。

slanted text

傾斜したテキストの方が効果的です。垂直方向のスペースが少なくて読みやすくなっています。

slanted text with lines

線を追加すると使いやすさが向上する可能性がありますが、IMOは見た目があまり良くありません。

different direction

このソリューションは他のソリューションとはかなり異なりますが、限られた数の選択肢でうまく機能する可能性があります。私が本当に気に入らない点の1つは、このレイアウトでは、少なくとも1つのオプションを選択することがほぼ必須であることを伝えているようですが、そうではありません。


質問

たとえば、読みやすさを向上し、場所を取らない代替ソリューションはありますか?

選択肢は常に表示されている必要があります。水平方向のスペースは制限されています(約640px)。 15個ものチェックボックスが存在する可能性があります。

まったく違う方向に進むことに反対しているわけではありませんが、これ以上優れたものを思いつくことはできません。

1
Willem-Aart

行が追加された斜めのテキストは、本当にすてきで読みやすい解決策です。役立つのは、特定のチェックボックスにカーソルを合わせるとヒントが表示されるバルーンです。これにより、ユーザーは誰がチェックしているかのチェックボックスを知ることができます。

写真を参照してください:

Vertical choices

もちろん、ツールチップの色はページのデザインと一致している必要がありますが、一方で表示されているはずです。

2
Mike