UI設計における「押してダメなら引いてみる」の重要性


UI/UX業界の教典本といえばドナルドノーマンですが、イタリアのアーティスト/プロダクトデザイナーであるブルーノ・ムナーリの著作「モノからモノが生まれる」でも、 自分たちがやっているUI設計にも通じる内容で、共感できる本でしたのでご紹介します。

モノからモノが生まれる

プロダクトデザインの方法論や課題解決についてブルーノ・ムナーリの持論を展開する本ですが世の中のプロダクトのデザインについて講評している章があり、そのなかでノコギリを取りあげていました。

西欧のノコギリは「押して切る」ため、イメージするとわかると思いますが、体重をかけて刃先を押し込む動作をするため、曲がらないようにノコギリの刃がついているブレード自体が厚く、しっかりした作りになっています。そのため重たくなります。

西欧のノコギリwikipedia「Saw」より

日本のノコギリは、説明は不要かもしれませんが「引いて切る」ため、刃の方向も西欧のものと逆になっており、腕力に頼らないため、ブレードは薄くなり軽く出来ています。

日本のノコギリwikipedia 「日本の鋸」より

この西欧と日本のノコギリの違いをUI設計に当てはめて考えてみると、「木材を切断する」という一つの要件に対して、インタラクションとして上記の「押し切り」と「引き切り」というアプローチの違いがあります。そしてそのインタラクションを具体的に実行するためのユーザーインターフェースがプロダクトの意匠や形状、握り手の違いとして表れているんだと思います。

ブルーノムナーリは、薄くて軽い日本のノコギリを褒めていましたが、実際にプロの大工ではない自分からしても、西欧のノコギリはちょっと重くて使いにくそうです。

UI設計の過程の中で、例えば「押して切る」というアプローチを採用すると、考え方がそれにフレーミングしていまい、「引いて切る」というアプローチを見落としがちです。実際にはユーザのプロフィールが「力持ちでプロの大工」でない限り、「押して切る」というやり方とそれを実現したプロダクトは万人にとって使いにくくなるケースが多くなるのではないでしょうか。

さらに日本のノコギリは、要件に対してさらに付加機能がついていて、刃の目が違うものが両刃になって木材の性質や使う人の腕力に応じて使い分けができるものが多いと思います。

このようなメインの要件を満たすために、さらに便利にしたり、手間を無くしたりする機能=要件周辺機能がそのプロダクトやサービスの「使いやすさ」や「習慣化させる力」に違いにでてくるんじゃないかと思います。

要件と要件周辺機能

ブックマークアプリである「Pocket」や、「Kippster」で、WebのURLをコピーしてクリップボードに保持している状態で、それらのアプリを起動したりフォアグラウンドにすると、そのURLを保存するかユーザに問い合わせる画面が自動的に出てきます。
ユーザが「URLをコピーしてアプリをフォアグラウンドにする」という一連のコンテキストを読み解いて自動的に追加画面を出す、という要件の周辺機能が、これらのブックマークアプリの使い勝手をぐっと良くしています。

ブックマークアプリ

この要件周辺機能も、「Pocket」と「Kippster」でアプローチが異なっていて、「Pocket」が画面下部にモードレスなダイアログを出すのに対し、「Kippster」はモーダルな画面に遷移して「URLの追加」をユーザに問いかけるようになっています。自分のユースケースでは追加したいURLは即座にカテゴリ分けしたいのと、ナビゲーションボタンはiOSユーザには反射的に操作できるので、モーダルビューで展開される方が好ましいと感じました。(もちろん他のユースケースを考えるとモードレスの方がいいかもしれませんが)

自分たちも「要件」へのアプローチを客観的にみて、またいろんな実現手段や「インタラクション」「要件周辺機能」が無いか検討し、「ユーザ」に対しより良いUIを提供していけるよう、考えていきたいと思っております。