・デザイナーを目指している人や、デザイナーになりたての人
・制作の流れの中で「どうしてそう考えたのか」に興味がある人
・UIはセンスやトレンドで決まると思っている人
・なぜそのUIなのか？というUI設計の根拠を持ちたい人
・分かりやすいUI＝シンプルなUIと思っている人

Webサイトやアプリを見ていると、初めて触れたはずなのに、なぜか迷わず操作できることがあります。

メニューの場所・ボタンの意味・画面の構造、私たちはそれらを、誰かに説明されなくても自然に理解しながら使っています。

では、それはなぜでしょうか。

今回は、「UIの既視感とユーザーの文脈」という視点から、ヘッダーメニューのUI設計にフォーカスして考えてみたいと思います。

文脈 =本記事ではその人が持つ背景や経験、利用シーンや心理状態と定義します。

以前、人生で初めてパソコンを触った母親から

「検索履歴を見る場所が分からない」

と相談を受けたことがあります。

↑Chromeの3点リーダー (ケバブメニュー)

私にとっては自然にメニューと理解できるUIでしたが、母親にとっては既視感が無く、メニューと認識できませんでした。

ミニマルなUIはシンプルで美しいものの、ユーザーの文脈から離れてしまうと、それは分かりやすさには繋がりません。

シンプルなUIと、分かりやすいUIは、必ずしも同じではないのです。

では、一体どうすれば分かりやすいUIになるのでしょうか？

実は私たちは、UIを論理的に理解しているというより、過去の体験をもとに

「たぶんこうだろう」

と推測しながら使っています。

例えばWebサイトのメニュー。

画面上部にメニュー項目が横並びで配置されているものや、右上にハンバーガーメニューだけがあり、タップするとナビゲーションが開くもの。

さらに最近では、中央上部や画面下部にメニューを配置するサイトも見かけます。どれも実際に使われているUIです。

そして多くの場合、私たちは迷わず操作できます。なぜなら、これまでに何度も似た体験をしているからです。つまり、既視感はUIの中に存在するのではなく、ユーザーの中に存在しているとも考えられます。

ここで重要になるのが、ユーザーの文脈です。

文脈とは、その人が持つ背景や経験、利用シーンや心理状態のことを指します。

例えば、日常的にスマートフォンを利用している人であれば、上のハンバーガーメニューを見て、
自然にメニューだと理解できるかもしれません。

一方で、

業務でパソコンを使うことが中心の人であれば、ヘッダーに項目が並んでいるナビゲーションの方が理解しやすいこともあります。どちらが正しいUIという話ではありません。

大切なのは、誰に向けたUIなのかという視点です。ユーザーによって、既視感を持つ対象は変わります。つまり、分かりやすいUIの正解も一つではないのです。

UIというと、形のデザインやレイアウトの話だと思われがちです。

ですが私たちは、UI設計とはユーザーの文脈を理解することに近いのではないかと考えています。

例えば、

同じメニューでも

・どこに配置するか
・どのような表現にするかは、

ユーザーがどんな体験をしてきたかによって変わります。

つまりUI設計とは、画面の見た目を整える行為ではなく、「ユーザーがどんな前提でその画面を見るのかを想像すること」なのかもしれません。

では「分かりやすい」UIとはどんなものでしょう。

UIはユーザーとサービス・商品の接点であり、UXはそこから生まれる体験です。

ただ操作できるだけではなく、迷わず、考えず、自然に使えてしまう。その状態は「分かりやすい」というよりも、「心地よい」に近い感覚ではないでしょうか。

その心地よさは、ユーザーの体験の蓄積に寄り添えているかどうかで決まると考えています。

だからこそ私たちは、UIを形から考えるのではなく、ユーザーの持つ文脈から考えることを大切にしています。

私たちのUI/UXへの考え方に興味を持っていただけましたら、ぜひこちらもご覧ください！

UI/UX

UIの既視感について考えることは、ユーザー理解そのものにつながっています。

見た目の新しさや、UIのトレンドだけではなく、ユーザーの中にどんな記憶が蓄積されているのかを想像すること。

それが結果として、「使いやすさ」を超えた「心地よさ」につながっていく。

私たちはそのようなUI/UXデザインを目指しています。

もし制作事例に興味を持っていただけましたら、ぜひWORKSもご覧ください！

pageWorks札幌のデザインブランディング | commono inc. コモノ株式会社