ソフトウェアデザインにおけるデザイン言語
はじめに
使いやすいユーザーインターフェイスを作るためには、ユーザーが理解しやすいデザイン言語を作ることが大切です。
ソフトウェアデザイン領域で、デザイン言語をどう活かせるのか共有したいと思います。
デザイン言語とは
いきなりですが、このイラストは、なんですか？
そう！傘です！
では、なぜこのイラストが傘であると分かったのでしょうか？
おそらく、持ち手の形、畳まれた生地の形などで、これを傘だと認識しますよね。それが、デザイン言語です。
（引用：「ソフトウェアの達人たち 認知科学からのアプローチ」よりテリー・ウィノグラードの言葉）
「ソフトウェアの達人たち 認知科学からのアプローチ」という本の中で、テリー・ウィノグラードは、デザイン言語をこのように解釈しています。
デザイン言語とは、モノを使うユーザーとコミュニケートするための視覚的、機能的言語です。
従って、皆さんがこのイラストを傘であると知ることができるのは、視覚的、機能的言語というデザイン言語があったからです。そして、皆さんは「傘というモノはこうやって使うんだ」ということもデザイン言語によって認識しているんです。
デザイン言語は、私たちの周りにあるプロダクトから建築、都市、サービス、組織まで、様々な見えるモノ・見えないモノをデザインするのに用いられてきました。
次に、デザイン言語をもっと理解するために、普段私たちが使っている自然言語と比較してみます。
（引用：「ソフトウェアの達人たち 認知科学からのアプローチ」よりシェリー・エヴェンロンの言葉）
私たちが普段話す言葉のことを自然言語と呼びます。自然言語は主に単語と文法で構成されていて、考えを伝えるための表現を生成したり、他人の言ったことを解釈することに役に立ちます。
それに対して、デザイン言語は、デザイン要素と構造のルールで構成されていて、モノを生み出すための表現を生成したり、モノを読み取ることに役に立ちます。
自然言語と同じように、デザイン言語も日常の活動に関わっていて、モノ・コトの体験方法を伝え、ユーザーがモノ・コトをどう認識するかに影響を与えることができます。
そしてユーザーは、教育を受けなくても、モノを使っているうちにデザイン言語を暗黙の了解として把握するようになっていきます。
傘の例でいうと、傘の使い方を教わらなくても、実物の傘を使っているうちに、デザイン言語を暗黙に覚えて、傘というモノを認識することができるようになっています。
モノを生み出すには
デザイン言語では、モノを生み出すための表現を生成することができると言いましたが、そもそもモノを生み出すためには、どうすべきでしょうか。
「ソフトウェアの達人たち 認知科学からのアプローチ」という本の中に、シェリー・エヴェンロンは、下記のように述べています。
デザイン言語を最も効果的に使うためには、モノをデザインするのではなく、体験の中でモノがどのような意味を持つのかをデザインすべきです。…つまり、意味あるモノを作るのではなく、意味ある体験を作り出すことに参加できるモノを生み出すべきです。…モノの意味は経験から切り離して考えられるものではなく、モノは経験の中に存在しつつ経験を作り出していることです。
従って、モノを生み出すためには、まず「意味ある体験」を考える必要があります。
ソフトウェアデザイン領域の例で考えてみましょう。
例えば、「ウィジェット」というモノの意味を辞書で調べると、「コンピューターのGUIの部品群の総体」と書いてあります。しかし、Appleにおけるウィジェットとは、辞書ににあるような部品群ではなく、意味のある体験をデザインしていると言えます。
（参考：https://support.apple.com/ja-jp/HT207122）
Appleのウィジェットは、「お気に入りのAppの情報をタイムリーに一目で確認できる」という意味ある体験を作り出すことに参加できるモノとしてデザインされていると考えられます。
ユーザーはウィジェットを使っているうちに、暗黙の了解としてウィジェットのデザイン言語を把握するようになっていきます。これが「モノは経験の中に存在しつつ経験を作り出している」ということです。
モノを読み取りやすくするためのデザイン原則
モノを生み出した後、そのモノがユーザーにとって読み取りやすくあるためには、どうすれば良いでしょうか。
「誰のためのデザイン？ 認知科学者のデザイン原論」の作者であるノーマンさんは、このように述べました。
人の頭は、世の中のことを理解するように巧妙に作られている。ほんの少しの手がかりさえ与えられれば、自分で説明したり納得したり理解したり、しながらうまくやっていける。…優れたモノは、簡単に解釈したり理解したりすることができます。
従って、優れたモノを作るには、ユーザーが簡単に解釈したり、理解したりすることができるようにするための手がかりを提供する必要があります。
また、ノーマンさんは良いデザインの原則とは「可視性」「よい概念モデル」「良い対応づけ」「フィードバック」の四つだと述べています。
（引用：「誰のためのデザイン？認知科学者のデザイン原論」よりノーマンの言葉）
従って、良いデザイン言語とは、「可視性」「良い概念モデル」「良い対応づけ」「フィードバック」の四つの原則を満たしているものとも言えます。
次に、実際にこの四原則をGoodpatchのプロジェクトではどのように活かしているのかを紹介したいと思います。
オブジェクトにおけるデザイン言語
Goodpatchのプロジェクトでは、初期フェーズで、クライアントの現状のプロダクトのインターフェイスを「情報モデリング」と「インタラクション」この二つの観点でフィードバックを行うことが多くあります。
情報モデリングでは、対象となるアプリ・サービスにどんなモノ＝オブジェクトが存在するのか、オブジェクト同士の関係性を確認します。そして、オブジェクトの情報の表示の一貫性が担保しているかどうかをチェックして、フィードバックを行います。
インタラクションでは、オブジェクトが読み取れるかどうか、またオブジェクトの基本機能が読み取れるかどうかをチェックして、フィードバックを行います。
情報モデリング
情報モデリングは、具体的に次のような順番で行います。
- リバースモデリングをしたり、ヘルプに書いてある説明文を読んだり、概念モデル図を作成して、オブジェクト同士の関係性を理解します。
- オブジェクトの役割と機能をUIクラス図でまとめて、実際に表示している情報（それぞれの一覧と詳細）を確認します。
- Good&Moreの形式で、良かった情報モデリングと改善点のフィードバックを行います。
インタラクション
インタラクションでは、「オブジェクトが読み取れるかどうか」と「オブジェクトの基本機能が読み取れるかどうか」この二つの観点でフィードバックを行います。
まず、「オブジェクトが読み取れるかどうか」から詳しく説明します。
先ほどご紹介した四つのデザイン原則に従って、具体的にチェックするポイントは、「オブジェクトのビジュアル表現」「操作するための視覚的な仕組み」「すぐに見える操作の結果」の三点です。
例えば、オブジェクトをカードのような形で見せて操作可能を示すようにしたり、マウスオーバーすると「矢印」が「手」のシンボルに変わったり、オブジェクトをクリックしたら、色などの操作の結果が反映されたりすることを確認します。
次は、「オブジェクトの基本機能が読み取れるかどうか」をチェックします。
オブジェクトの基本機能としては、作成、読込、更新、削除、この四つの機能です。それぞれの機能がちゃんと読み取れるかどうかをチェックします。
例えば、作成機能には、必須項目をちゃんと明確したり、内容の最大文字数を示したりして、ユーザーがエラーを起こさないように、良いデフォルトを提供して、スムーズに作成することができるかどうかをチェックします。
理想としては、オブジェクトに対する基本的な機能を提供し、ユーザーが自分なりの方法で遂行できるようにすることです。そのために、デザイン原則を従ったデザイン言語をちゃんとされているかどうかが重要になります。
おわり
ソフトウェアデザイン領域において、デザイン言語をどう活かせるのかを参考になったら嬉しいです。また、自分たちが作ったユーザーインターフェイスは、ユーザーがオブジェクトを読み取るための手がかりとして成り立っているかどうかをチェックすることが大事だと思います。
そして、今までのデザイン言語を理解し、さらに新しいデザイン言語を意識的に、開発して、より良いソフトウェアを作っていきたいと思います。
ユーザー体験を考慮したソフトウェアデザインに挑戦したい方はこちらからご連絡をお待ちしています。
また、GoodpatchのUIデザイナー、インターフェイスアーキテクトに実際のプロダクトについてご相談したい方は こちらからお気軽にご連絡ください！
