UIデザイン

スマートなデザインには人間が追いつけない? ステートフルなコンポーネントの問題点

最終更新日:2024.10.31編集部
スマートなデザインには人間が追いつけない? ステートフルなコンポーネントの問題点

デザイナーの皆さんは、MacでUSキーボードと日本語キーボードのどちらを使っていますか?USキーボードには、ひらがなの印字がなく見た目がシンプルなのでそちらを使っているという人も多いかもしれません。ただこのUSキーボードで日本語入力を使うと直面するのが、「入力言語切り替えが使いにくい」という問題です。

MacのUSキーボードユーザーを悩ませる入力言語切り替えショートカット

日本語キーボードでは、スペースキーの両隣に「英数」と「かな」キーがあり、ユーザーは「左が英語で右は日本語」として記憶することができます。一方、USキーボードで入力言語を切り替えようとすると『command + space』で英語と日本語を順番に切り替える必要があり、多くの人がこの操作に慣れることができず「日本語キーボードにしておけば良かった」と後悔するのです。

では、なぜ私たちはUSキーボードの入力切り替えに慣れることができないのでしょうか?

スマートに振る舞うデザインは使いにくい?

USキーボードのショートカット『command + space』は、システムが現在の入力言語にもとづいて他の言語に切り替えてくれます。つまり、ただボタンを押したら決まったことをするようなボタンよりは、ちょっと複雑なことをしているスマートなボタンということもできそうですね。

スマートなボタンとスマートではないボタンの違い

他のスマートなボタンの例としては、以下の写真のような照明スイッチがあります。押すたびにON/OFFが切り替えるこのボタンも、電気が点いているのか消えているのかという状態に合わせてスマートに振る舞ってくれます。

日本の照明スイッチ

このタイプの照明スイッチを使ったことがある方は、「電気を消したと思ったら点けていた」というような「思っていたのと違う」動作にストレスを感じた経験があるのではないでしょうか?期待と違う動作に混乱して何度もスイッチをカチカチと押してしまうようなケースもありますよね。

スマートなボタンのロジックは条件分岐を伴う

このようなボタンの動作ロジックに注目すると、スマートなボタンは「条件分岐をともなう」ボタンであり、スマートでないボタンは「条件分岐が存在しない」ボタンと言い換えることもできそうです。

スマートな振る舞いはステートフルな設計によるもの

電気の状態くらい確認してからスイッチを押せば良いような気もしますが、人間の行動の多くは経験則に基づいてほぼ無意識的かつ直感的に行われます。そのため、一瞬の思考を求められることがストレスにつながるのです。

UIを設計する立場としては、このようなインターフェースのパターンをもう少し上手く言語化して、できるだけ避けるようにしたいですよね。ここではステートレスとステートフルという考え方が役に立ちそうです。

ステートフルな設計、ステートレスな設計とは?

システムが現在の状態を記憶しておいて、その情報に合わせてスマートに振る舞いを変えるような設計をソフトウェア設計の世界では「ステートフルな設計」と呼びます。主にサーバーとクライアント(ブラウザやアプリなど)との通信設計において使用されるコンセプトです。

ステートフルな設計を導入する場合にはサーバーとクライアント間のロジックに相違がないようにする必要があり、ステートレスな設計と比べてややメンテナンスにコストのかかる設計として知られています。

スマートなデザインには人間が追いつけない?ステートフルなコンポーネントの問題点

このステートフルな設計をシステムと人間のインタラクションに置き換えて考えると、スマートなボタンの使いにくさの原因が見えてくるのではないでしょうか?

ステートフルなUIとステートレスなUIの違い

ステートフルなインターフェースは現在のシステムの状態に合わせて振る舞いを変えてくれますが、それを使用する人間にも現在のシステムを把握していることが求められます。システムは状態を完璧に記憶し判断することができますが、人間にとってはこれが大きな負担となります。

逆にロジックを持たないステートレスなインターフェースであれば、何度押しても同じ結果が返ってくるため特に考えずに直感的に操作することができます。冒頭のMacのキーボードの例では、日本語キーボードの「英数」と「かな」キーは完全にステートレスなコンポーネントです。照明スイッチの例では、上下でオン・オフが分かれているようなタイプのスイッチであればステートレスな設計になりますね。

上下に分かれたスイッチであれば、下を押せば必ずOFFになるため記憶しやすい。

上下に分かれたスイッチであれば、下を押せば必ずOFFになるため記憶しやすい。

このステートレスという観点でみると、モードを切り替えるスイッチのような単純な問題以外にも、さまざまな場面で気を付けるべきパターンが見えてきます。例えば、リストUI上でそれぞれのアイテムの状態によってクリック時の遷移先が異なるようなパターンです。これはキャンペーン情報一覧など、表示するオブジェクトによってユーザーの取れるアクションが異なるような場合に起こりがちな問題です。

ステートフルなUIデザインの例

情報を注意深く読んで理解すれば使うことはできそうですが、カードごとに動作が異なるので直感的に操作するのは難しいのではないでしょうか?また、どのような遷移パターンが存在するのかを網羅的に把握することも難しいため、操作を記憶することも容易ではありませんね。こちらもそれぞれの情報のステートによってユーザーができる操作が異なるという意味でステートフルなデザインということができそうです。

unprintedのオリジナル記事をメールで受け取る

メールマガジンでは、オリジナル記事や最新ニュースをメールで配信中

※登録ボタンを押すと利用規約に同意されたものとします。

unprintedニュースレター登録

"Keep it simple, and stupid!"

「何度押しても同じ結果を返すボタン」は単純すぎて面白みに欠けるような気もしますが、このような「スマートではない設計」の重要性は1960年代から唱えられており、「KISSの法則(Keep it simple, stupid)」として知られています。

デザインの世界でも「シンプルな設計をしよう」といったの意味合いで知られるこの「KISSの法則」ですが、もともとは1960年代に工学の世界において設計の簡潔さを説く標語として生まれました。そのまま訳すと、「シンプルにしておけ、バカやろう」という意味のように見えてしまいますが、本来は「Keep it simple and stupid(シンプルで愚鈍な設計をしよう)」というような意味合いとして考えられたもののようです。つまり、最後の”Stupid”は読み手に対する罵り言葉ではなく、設計をStupidにしようという意味です。

そして、この「Stupid」や「Dumb」という言葉はソフトウェア開発の世界ではまさに「ステートレス」という意味で使われます。UIデザインにおいても、このように「ステート情報を知らない間抜けなコンポーネント」が使いやすいUIインタラクションのための重要なポイントとなるのではないでしょうか?

ちなみに、冒頭で紹介したUSキーボードの入力言語切り替えに悩まされている人は、「⌘英かな」という便利なアプリがあるので、ぜひ試してみてください。このアプリは、キーボードの左右のCommandキーにそれぞれ「英数」と「かな」のステートレスなボタンを割り当ててくれるもので、USキーボードでも日本語キーボードと同じ言語切り替え方法にしてくれます。ある意味、ステートフルなUIの使いにくさを解決するだけでも多くの人に使われるアプリになるということは、それだけユーザビリティにとっては大きな問題であるということもできそうですね。

UIデザイン

関連記事

Related Articles

最新の記事

Latest Articles

デジタルデザインの最新情報をお届け!

unprintedのメールマガジンにご登録いただくと、デジタルデザインの最新情報をメールで受け取ることができます。今までに配信したバックナンバーも公開中!

※登録ボタンを押すと利用規約に同意されたものとします。