デザインダイアローグコペンハーゲン

デンマークのコペンハーゲンでのデザイン留学を通して考えたこと

はてなブログの投稿UIが改悪された件について改善案を考えてみた

気がついたら投稿画面のUIが少し変わっていました。なんだこれは?と思って調べて見たところ下記のような記事を見つけます。

staff.hatenablog.com

上記記事からの引用になりますが、以前のUIは下記のような問題があったという事。

これまで、記事編集画面では公開させるためのボタンと下書き保存するボタンが横並びで表示されていました。このため押し間違えてしまうことがあり、とくに公開済みの記事を再編集した際に誤って下書きに戻してしまうというお問い合わせをいただいていました。

なるほど、確かにこれはあるかも知れません。参考までに過去の公開ボタンと下書き保存ボタンがどのような感じだったかを調べて見ると下記のような感じでした。

f:id:mikio-k:20160526072001p:plain

色が違うから公開するボタンが目立って居るように思うけれど、下書き保存ボタンのほうが広い面積を占めているし間違えて押してしまう人も居るのでしょう。こういった際にユーザビリティを向上させるためにはどうすれば良いのでしょうか、ちょっと考えて見たいと思います。

どんな場合に困るのか

まず、ユーザがどんな場合に困るのかを考えてみます。

  1. 新しく書いた文章、または下書き保存してあった文章を下書き保存するつもりで、公開するつもりじゃなかった記事を公開してしまった
  2. 新しく書いた文章、または下書き保存してあった文章を公開するつもりで下書き保存してしまった。
  3. 既に投稿済みの文章を更新するつもりで下書き保存してしまった

想定される操作ミスは、主に上記3パターンかと思います。

1に関しては投稿されてしまったという事実はリカバー出来ませんが投稿後に投稿完了画面がでます。ですので、ユーザーが公開を意図していなかった場合は、ユーザ自信でそれに気が付き、リカバーする事が可能です。

2に関してですが、下書き保存ボタンを押した場合は下書き記事のリストに遷移する仕様になっているようです。この場合、下書き保存ボタンを押したという意識がユーザーに無い場合は何が起きたのか状況を把握する事が難しいと感じます。

3に関しても2と同様の問題があるように感じます。

新しいUIの何がダメなのか

f:id:mikio-k:20160526073531p:plain

新しいUIを確認して見ますと、ボタンがひとつになって居ますので、少なくとも押し間違えというのは無くなるのだろうな、と感じます。つまり、前述した1,2,3の課題は解決されています。しかし私はこの新しいUIが素晴らしいUIだとは思えません。

その理由は3点あります。

  1. 下書き保存するための方法がひと目でわからず、ユーザに負担をかけている
  2. 「書いた記事を公開せずに保存出来る」という事実がユーザーに伝わらない
  3. プルダウンメニューとボタンが統合されており、UIとしてわかりにくい

順番に説明しましょう。

まず、ひとつ目についてです。ヤコブニールセンというWebユーザビリティの大家がユーザビリティに関して10の原則を唱えて居ます。

www.nngroup.com

この中に下記のような項目があります。

Recognition rather than recall

つまり、ユーザが記憶しなくても良いように見ればわかるデザインを作りなさいという事です。下書き保存するためには、ここをクリックして、プルダウンメニューを選択しなきゃいけないという事をユーザーが覚えなければならないというのは悪いデザインなのです。

ふたつ目についてです。ユーザインタフェースの世界ではアフォーダンスという言葉をよく使いますが「その製品、サービスで何が出来るのか見ればわかる」が重要であると考えられています。特定の操作を行わないと特定の操作をするためのユーザインタフェースが出てこないという状況である場合、初めてのユーザはその操作が可能であるという事を認知出来ず、あまり良くないユーザインタフェースだと考える事ができます。

3つめについてです。通常、ボタンのような形状のUIがあれば、ボタンのどこを押しても同様の操作が行われると思いますが、今回の新しいUIでは、ボタンに見える右端を押すとプルダウンメニューが現れる構造になっています。つまり、ボタンと、プルダウンメニューが融合されたようなユーザインタフェースとなっています。このような複合的なUI要素はうまくハマればかっこよくて使いやすい場合もあるのですが、こういった場合に適切ではありません。(DAノーマンの誰のためのデザインでも説明されていたと思いますが手元に無いためソースを示す事ができません。)

例えば、下書きするためのUIを探そうと思った際に、プルダウンメニューらしきシンボルを見つけても、そのシンボルが、ラベルとして「公開する」と書かれているボタンの上にあると、押すのを躊躇する人も居るのではないのでしょうか。

改善案

上記の問題点を踏まえた上で、改善点を提案したいと思います。

  1. 下書きボタンを押したあと下書き一覧画面に遷移する際に、下書きとして保存された旨のメッセージを提示する。保存された下書きの背景色を変えるだとか、簡単なメッセージボックスを出すだとか。これによってユーザに対して、ユーザが下書きとして保存するボタンを押しましたという事を明確に伝える事が可能になります。
  2. 状態を公開から下書きに変更する場合には警告のアラートを出す。公開されている記事を意図せず下書きにしてしまう場合があり、一番の混乱の原因となっているように思いますので、公開されているものを非公開にする場合には何らかのメッセージを出すのが親切かと思います。

以上、よろしくお願い致します。