はじめに
先日「パスワード(パスフレーズ)自体を保存しておかなくても、パスワードが生成出来る」Webサービスを公開しました。
パスワード・パスフレーズ管理ってめんどくさいな、毎回決めなおすの手間だしいい手ないかな～と考えている自分のような方向けのもので、以下のようなページデザインにしていました。
こちらのサービス記事に対してこんなコメントをいただきました。
サーバーにはpassphraseに関わる情報を保存しているわけではないがユーザーから判別できないのでは。
確かにわかんないな～と思いながらそこに至った原因について考えていたところ、全ては私の不親切設計なUIが原因なのかなという気がしてきました。
コーディング中の自分の心の中「私にはデザインセンスがないし得意分野でもないから、イケてるWebページじゃなくてもまあいいか」
うん、それはまあいいよ、趣味で作るなら
コーディング中の自分の心の中「だから操作方法が分かればいいか、説明は記事で書けばいいし」
いやいや、ダサいのはいいけどそのいい加減な姿勢は良くないな！それが不親切設計に繋がってないかい？
というわけで、今回何が不親切でどうすればよかったのかを通して、親切設計なUIについて考えていきたいと思います。
修正後のサーバーもこちらで動作しています。
https://server.developerkikikaikaienjoy.work:60443/
目指せ親切設計！UIの見直しを行う
前提: Webサイトは簡潔に操作を完結、使いやすい
日常に見るUI/UXが分かりやすかったです。
- Webサイトは使いやすくて当たり前
- 基本的にユーザーはせっかち
- 3イラっくらいでブラウザバックする
CHECK!: Webサイト内で情報が閉じていない
「だから操作方法が分かればいいか、説明は記事で書けばいいし」なんて意識はいけないですね。
説明なしでも何が出来るかが分かるのが理想。Detailがいるならヘルプでも用意しなよ！って感じですね。
参考その1:UI/UXデザイナーが気を付けるべき6つの設計ミス
こちらで提示されているチェック項目は6つ。記事をざっとまとめるとこんな感じでしょうか
- メニューに選択肢が多すぎる～情報が多くて理解しにくい
- メニューに選択肢がなさすぎる～階層が深すぎてわけわからん
- メニューが可視化されていない～必要な情報隠し過ぎ
- 一般的でないデザイン配置をしている～デザイン奇抜すぎ！
- わかり辛いアイコンを使用している～アイコン奇抜すぎ！
- ユーザーに現在地を伝えていない～今操作している位置わからない問題
今陥っているのは1, 3, 5ですかね。
CHECK!: 全ての情報を一度に同列で表示している。
この1ページで大きく分けて3つのことを表現しようとしています。
- パスフレーズの生成
- パスフレーズの生成用の情報管理
- アカウント管理(パスフレーズの生成用情報の保管する為)
混在具合はこんな感じ。これはわからないわな。
CHECK!: 主となる機能が一目でわからない
上の枠でもわかると思いますが、Save settingのところに思いっきりKeyphraseがあるんですよね。
今回のサイトのポイントは、パスフレーズを保存しなくてもその場で生成出来ることなのに、それが分からない構造になっています。
というかGenerate passphraseと同じ項目なら、普通同じ内容が保存されると思いますよね。。。
例えば「Keyphraseを隠す」という動きがあるだけで、「KeyphraseはSaveされない」という事実が可視化されるかもしれません。
CHECK!: ボタンが何をするものか一目でわからない
文字で説明でもいいんですが、メール送信なら紙飛行機みたいな馴染みのあるアイコンを使えば一発ですよね。
改善案が出なかったので、ここは今回未着手でお願いします。。。
見直した結果がこれだ！
パスフレーズとアカウントのページをタブで分け、パスフレーズ側、「Generate Passphrase」を別枠にしました。左右で別タブ。
これだけでもちょっと見やすくなりますね。ただ何となく目に優しくない。でもこれはボタンだけの問題じゃない気がする。
参考その2:デザイナーに言われた「非デザイナーが気をつけるべきデザインの4原則」
デザインを考える上では重要な近接, 整列, 反復, コントラストという4つの原則があるそうです。こちらに従い更にページの内容を検討していきます。
CHECK!: 近接, 整列
- 近接
同じものは寄せてあげて、視線が止まるグループを減らす。視線が止まった回数を数え、適切にグループ毎に目が留まるようになっているかを見るといいようです。
今回のケースでいうと、passphraseタブ側の視線が定まらないような気がしますね。
- 整列
意識的に揃えて表示させましょうって話。
今回のケースでいうと、縦横の幅がまばらなのが気になってしまいます。これらを踏まえてpassphraseタブをこのような形に修正。
Passphraseに関する2種類の機能がまとまったのではないでしょうか。
CHECK!: 反復
意識的に構造を同じような形の繰り返しになるようにしましょうって話。
上記で整理したPassphraseをベースにして考えると、以下のような構造の反復が良さそう。
- グループを枠で囲い、上にメインタイトル(2～3語)を記載
- 項目はサブタイトル+「label+フィールド」の組み合わせ
- ボタンは1個、左下に表示
- ボタンに一言入れる
主にAccount側のタブに対して、上記のようにアップデートをかけました。大分目に優しくなってきたのではないでしょうか。
CHECK!: コントラスト
一辺倒なデザインの中で、強調したいことを全面に出してみよう！
ここではPassphraseの生成がメインなので、ここだけ反復したデザインからちょっと変えてみました。
また、枠外に行って浮かないように使い方を書きつつ高さも確保。デザインセンス無くても、大分何がしたいか見やすくなった気がします。
熟練されたWebページ開発者なら、表現できる引き出しが多くて幅が広がると思います。でもまあ不親切さは改善されたかな
最後に
UIについて、正直どういうものが使いやすいのかあまりアイディアが無かったですが、先人の方々の素晴らしい記事達のお陰で改善されていく実感があったのが中々楽しいですね。
簡単な改善しかしてませんが、とてもいい勉強になりました。ただこれ触れば触るほど気になる点が出てきて、時間がモリモリ奪われますね。。。
Webデザイナーさん凄いな、ほんと尊敬します。