ユーザーインターフェイスとは、誰もが使いやすくする思考の事。
一度作ってしまえば、その思考で使い続けるしか内が、使いにくいユーザーインターフェイスは非常にストレスが貯まる。
ストレスが貯まるシステムは、使い続ける気にならない。
仕事で作ることが多い、ホームページのヘッダメニューや、システムのメニュー部分に焦点を当てて、使いやすいヘッダメニューを追求してみたいと思います。
ヘッダメニューについて
だいたい、どのホームページにもヘッダメニューが存在しています。
（別に減っだメニューは必須ではないですが）
このブログも、上部にヘッダメニューを設けています。
パソコンのOSにも、ヘッダメニューがあります。
自分の今使っているMacOSのデスクトップはこんな感じ。
OSのヘッダメニューは結構使いやすく設計されているので、この使い勝手をそのままシステム設計に組み込むのが良いでしょう。
ホームページに見られるいろいろなヘッダメニュー・インターフェイス
ホームページなどで使われているヘッダメニューは、単にページリンクやサイト内リンクとして、単一リンクで設置されている場合の方が多いですが、たまにプルダウンメニューのモノがあります。
Amazonのjヘッダメニュー
メジャーなページで見てみると、Amazonなどは、かなり独特なヘッダメニューになっていて、OSのモノとは違っています。
一番左のハンバーガーメニュー（すべて）の箇所と、プルダウンマークの逆三角アイコンのある箇所にマウスを乗せると、メニューリスト（または何かしらのウィンドウ）が表示されます。
この手のメニューは、Webサイトにはありがちなメニューですが、個人的には、間違って押してしまう事も多かったり、マウスオーバーで表示されると、見ていた画面を不意に隠されて邪魔になることも多いので、あまり使い勝手が良いとは思いません。
Yahooのヘッダメニュ−
地味なデザイン変更はされているけど、当初からヘッダメニューのインターフェイス思考は貫いているYahooです。
無難な見た目とわかりやすさはありますが、サイト内のカテゴリ整理ができている証拠です。
プルダウンメニューの箇所がいくつかありますが、気になったのは、検索キーワード入力欄の下にある三角マーク。
「入力補助機能」なのだそうだが、パッと見何なのかよくわかりませんね。
MacOSのヘッダメニューからインターフェイス仕様を取得する
今回目指すMacOSのヘッダメニューの仕様を見てみましょう。
全てのメニューがプルダウン構成
OSのヘッダメニューは、基本的にメニューのカテゴリ理由がされたメニューになっています。
そのため、プルダウンマークなどを付けなくても、必ずプルダウンするので、間違えて押しても、不要なウィンドウが立ち上がることはありません。
プルダウンメニューの表示トグル
どれかのプルダウンメニューを表示させると、マウスを移動してマウスオーバーさせるだけで他のメニューもクリックせずに表示されます。
単にマウスオーバーでプルダウンメニューが開くのではなく、開く・開かないのトグル（ON/OFFの切り替え）がフラグ立てされていて、
間違ったメニューを開いたとしてもすぐに別のメニューを開き直すことができるので、直感的な操作ができます。
この仕様は、ホームページで搭載されているモノは、これまで見たことがないのですが、使いやすいインターフェイスだと思うので、これを採用するのが使いやすいヘッダメニューだと考えてみました。
プルダウンからのサブメニュー
プルダウンメニューの中には、サブメニューを持っているものもあり、表示トグルがONの場合には、マウスオーバーすると、右側にリスト表示が追加されます。
ここからさらなる孫階層などのサブサブメニューなどもある場合があり、ドラクエウィンドウのようにわかりやすいメニューリスト仕様だと思われます。
あとがき
今回ヘッダメニューを調査して仕様検討したのは、今現在とあるWebアプリケーションを作っていてそのヘッダメニュー仕様を使いやすくしたいと思った時に、やっぱりOSのメニューだと行き着きました。
でも、Webアプリとはいえ、ホームページの延長での技術構成なので、使いにくいヘッダメニューになりがちだったので、MacOSのメニューを徹底分解して調査してみた次第です。
今回調べてわかった決定的なポイントは、「表示トグル機能」です。
これを踏まえて汎用的に使えるヘッダメニューのソースコードを作ってみたいと思います。
コードが気になる方は、次回「サンプル構築編」を掲載する予定なので、そちらを御覧ください。
0 件のコメント:
コメントを投稿