2019年07月25日に初出の投稿

Last modified: 2019-07-25

添付画像

状態か機能かわからないトグルボタンの改善

これは au のディフォールトになっているメール・ソフトのメール一覧画面だ。「あう」というフォルダを作って、au/KDDI のショップから送信されたメールを振り分けている。それはともかくとして、画像で示したように、僕はメール一覧の切り替えボタンのデザインに違和感があった。ご覧いただくと、左は太い罫線で少ない行数に見えるし、右は細い罫線で多い行数に見えるので、僕は右のボタンが《メールを画面の中でたくさん表示するためのボタン》だと思ったのだが、実際には逆である。

これは、さきほど連れ合いとも話題にしたのだが、連れ合いの説明によると、メールについての情報を並べて表示するにあたって、《たくさんの情報を表示する》という機能を実装すれば、それを表すボタンは罫線の数が多くなるので、右のボタンは正しく実装した機能を表しているという。それは説明として分かった。ボタンの罫線は《一覧の中でメールを表示する稠密度》を表しているのではなく、《個々のメールで表示する情報量》を表すというわけだ。なので、そういう理解に立てば、こういう UI デザインになるというのも分かる。しかし、それは UI デザインが「原因を制御する」ためのものであるという前提をエンド・ユーザと共有している限りで成立するのであって、僕のように「結果を制御する」ためのものであるという前提でボタンを扱うことがあるエンド・ユーザには、一定の学習が必要となるし、あまりにも強い違和感を与えると使ってもらえなくなるというリスクがある。

どちらの前提に立っても違和感のない理解を与えるような UI デザインを目標とするには、どうすればいいだろうか。

似たような話題は、昔からある。その典型が、トグル・ボタンだ。どちらを押したら目的を果たしたことになるのかが分かりにくいトグル・ボタンというものがたくさん実装されており、画像とは関係ないが上記にリンクしたページで取り上げられているように、多くのエンド・ユーザに混乱を引き起こしている。そして、そういう曖昧さを巧みに利用した dark patterns と言えるものも数多く見受けられる。

  1. もっと新しいノート <<
  2. >> もっと古いノート

冒頭に戻る


※ 以下の SNS 共有ボタンは JavaScript を使っておらず、ボタンを押すまでは SNS サイトと全く通信しません。

Twitter Facebook