個人的には,「特効薬」的な情報というものに余り興味がないのですが,Webサイトをデザインするうえで,定常的に考えていることを一覧表にしておくことには興味があります。特効薬に興味がないのは,そんな「美味い話」がある訳はないと思うからで,一覧表に興味があるのは,疲れているときなど,自分の体調が万全でないときにでも,できうる限りの検討を重ねたいからです。一覧表になっていれば,体力のあるなしにかかわらず,とりあえず上から順番に試していく,という行為が可能になります。今回は,「ボタン」について,思うところをまとめてみます。ご参考になれば幸いです。

OS標準の差異:Windows(Win)とMacintosh(Mac)

 「submit(サーバーへのデータ送信)」が必要になる画面設計をする場合,よく議論されるのが,「Win型かMac型か」という問題です。次画面に進むボタンの位置が,両OSの標準では異なるからです。下図は,Thunderbirdのアカウントを追加する画面ですが,コンテンツとしての情報は同じでも,ボタンの配置が異なります。

OSによるボタンの位置の違い(クリックで拡大)

 画面の遷移は感覚的には「右側に進んでいく」というものが一般的ではないかと思うのですが,その意味で,Macintoshの右端に「次へ」ボタンが配置されているのは,進むことに違和感を与えないつくりと言えるでしょう。逆に,Windowsのそれは,無意識に右側のボタンを押すとキャンセルされてしまうので,常に適切な判断をすることを促していているようにも見えます。

 実のところ,ユーザーは,情報入力作業に入ってしまうと,OS標準の「文化」がどれほど,瞬時の判断に影響を及ぼすのか定かではないのですが,そうしたことが議論される場面によく出会います。多くの場合,そのサイトの対象ユーザーが,どちらのOSを使っているか,ということが判断材料にされます。しかしそうではなく,右側に進ませようとする「推進力」のようなものを画面内に仕掛けておくべきか,それともブレーキのような「抑止力」を仕込んでおいたほうが良いのか,ということを判断材料にするのが正しいような気がします。後者は,個人情報などを扱う場合に,慎重であってほしい時などでしょうか。

組み合わせの順序

 上の話を,もう少し数学的に考えた場合,ボタンが三つの場合,下記のような六通りの組み合わせが存在します。推進力か抑止力か,という考え方で判断つきにくい場合は,下記のように並べてみて,実際に自分が操作してみて決めるというのも,手です。それぞれの場合で,自分がどれくらい次画面に進みやすいかを体感で押さえておくのです。

三つのボタン配置の組み合わせ

 このようなことは毎回やる必要はないのですが,何回に一度はやってみて,自分の感覚をチューニングすることもあります。サイトを作りなれていくと,王道的な考え方が身に付き,それがほぼ間違いではない場合が多いのですが,たまにインターネット・リテラシーのない人達の突拍子もない行動を予測できなくなったりしてしまいます。このようなシミュレーションを行うことで,それらが回避できる訳ではないのですが,考える習慣がより根付く気がします。

ページに対する位置

 ボタンの配置について検討するときには,上述のように,それぞれのボタンの相対的な位置関係だけでなく,ページに対する位置関係も重要になります。ページのどこにボタンがあるかで,それを押してもらえる確率は大きく変わります。

三つのボタン配置の組み合わせ

 長いページの場合,一番下にボタンを置くことが一般的です【1】。短めのページでは上のほうに配置することも可能でしょう【2】。即答できてすぐに次画面に進めるようにするためには,上下両方に配置することも良く見かけます【3】。進むことと戻ることが,それぞれ右と左という感覚で置き直せることを利用して,上下方向中央に配置することもあります【4】。さらに,「進む・戻る」と「キャンセル」とは別物であるとして,位置関係から,それをわからせる(悟らせる)方法もよく使われます【5/6】。

 こうして見ると,ボタンの位置として独立に語ることはできなくなり,画面全体の構成や,中に書かれるコンテンツ(質問や情報)にも依存して,適切に決めていくべきことがわかると思います。

OS標準の差異:シャットダウン時

 両OSは,シャットダウンの瞬間にも,ユーザーに強いる動作について考えさせてくれます。Macintoshは,起動ボタンを押すことで,シャットダウン・ウィンドウが表示され,クリックするだけで終了できます。Windows(クラッシク)の場合,startボタンから「シャットダウン...」を選択して,さらにプルダウンメニューから選択して,OKボタンを押してから,シャットダウンされます。

OSによるボタンの位置の違い:シャットダウン・ウィンドウ

 ここでも,「終了する」と決断したユーザーに対して,Macintoshはその決断を最優先にして進みやすくするボタン等を表示していきます。これに対してWindowsは,「再考」する機会を何度となく用意しているように見えます。比べなければ,習慣として無意識に進んでいけるものですが,Webサイト設計者としては学ぶべきことがありそうです。進もうとする意思に対して,どのようなユーザー・インタフェース(UI)が,それに「冷や水をかける」ものになるのかを垣間見ることができます。

 個人情報を扱う場合や,自己責任という領域の作業をさせる場合,どちらがユーザーにとって有益なのか,便利なのか,適切なのか,こんなところからもいろいろと考えさせられます。

大きさ

 アクセシビリティの領域に入るのかもしれませんが,押させるボタンの「大きさ」も,大きな影響力を持っています。実際,私自身がそのことに気がついたのは,目が霞んできてからのことでした。小さな文字が見えにくくなるということと,目を細めてまでクリックしたくなるか,ということには,何らかの関係があると思います。
このボタンなら(でも),押す気になれますか?
 
 
このボタンなら,押す気になれますか?
 
 
このボタンなら,押す気になれますか?
 
 
このボタンなら,押す気になれますか?
 
 

大きさによる,行動の変化

 上図は,「submit/resetボタン」の大きさを変えて並べてみたものですが,どれも同じでしょうか。Webサイトを開発する平均年齢は比較的若いので,実感として「見えにくさ」をとらえている開発者は少数派だと思います。が,クリックすることへの恐れは,毎日のように報道される,ネット被害のニュースで,それなりに浸透しています。安心感をかもし出す要素として,「押しやすい大きさのボタン」というのは意外と大きな要素ではないかと思うときがあります。