こんにちは。
コーポレートデザインチームのmewmo(@mewmoppel)です。
ペパボではテレワークを基本とする働き方に移行することが決定され、社内デザイナーのナレッジシェアの場として開催されている「Designer’s MTG(通称 デザミ)」のフルリモート開催も当たり前の風景となってきました。
今回は「UI Design」のエキスパートスキルエリアのデザイナーにナレッジシェアしていただきましたので、その様子をお届けしていきたいと思います〜
これまでのデザミのレポートはこちら
「デザミとは?」「エキスパートスキルエリアとは?」については、前回の記事で紹介していますので、気になった方はあわせてご覧ください。
UI Designのナレッジシェア
UI Design Keynote
今回はUI Designのナレッジシェアということで、まずはきでりん(@kii0719)さんからイントロダクション。
GUIの歴史から始まり、ペパボのデザイナーが目指すUI Designのスキルの定義を共有し、より良いUXをつくるためにどのようなアプローチが必要なのかを簡単に話していただきました。
ペパボではUI Designのスキルを次のように定義しています。
プラットフォームのマナーに則り、ユーザビリティとアクセシビリティに優れた美的価値と機能的価値を両立したUIをデザインする。ペパボでは現状主にGUI。
まず、OSなどのプラットフォームのマナーに則ってデザインを行うことで、開発コストもユーザーの学習コストも下がります。次に、ユーザビリティとアクセシビリティはUXの重要な土台であり、美的価値と機能的価値はUXの向上に欠かせない要素です。『Web情報アーキテクチャ』の著者の1人であるPeter Morvilleは、体験を次の7つの要素に分解し、その相関を「UXのハニカム構造」として図に表しています。
- accessible(アクセスできる)
- usable(使える)
- useful(役に立つ)
- findable(見つけられる)
- credible(信頼できる)
- desirable(望ましい)
- valuable(価値がある)
またこれらの要素をピラミッド状に配置してレベルを示した「UXの4つのレベル」という図もあります。こちらは『UXハニカム構造』を評価軸として考える場合の構造として、『IAシンキング』の著者、坂本貴史さんが図に起こしたものです。
書籍『デザイニングWebアクセシビリティ 』から引用
好ましい体験はまずアクセスできることから生まれ、使えることで体験を成功させることができます。
そして機能的価値があることでユーザーとって役に立つ体験や価値ある体験につながり、さらに外観の美しさが加わり両立することで、ユーザーにポジティブな感情が生まれ、より満足しやすい体験につながっていきます。
どんなUIをデザインすることが求められているのかが見えたところで、UIの役割にも目を向けてみましょう。
ペパボでは、「ペパボのデザイナーがデザインしているもの」の関係を表した「ペパボデザインスキーム」という図が社内のデザイナーで共有されています。その全貌はまた別の機会にお届けしようと思いますが、今回はその中でUIがどのように位置づけられているのかに注目したいと思います。
UIはユーザーとツールの間に境界面として存在し、境界面上に丸で示されているように「ユーザーが使う」「ツールが使われる」というインタラクションが発生しています。このようにUIを通してユーザーがツールを使い、何かが起きたことを知覚・認識し、その結果、意識・行動に変化が起こります。この変化の量がValueです。
そしてこの一連の流れが体験であり、意識や行動変化をおこすために知覚・認識させることがUIの本質的な役割です。
この知覚・認識のために重要なことが、Designer's ModelとUser's Modelを一致させることです。
「こう思わせたい」というデザイナーの意図と、「こう思った」というユーザーの認知の間にUIは存在しています。
UIを通してユーザーがDesigner's Modelを理解し、ツールを使って起きたことを知覚・認識するためには、User's Modelと整合性のあるUIをつくることが重要なのです。そして、その理解の結果がそのプロダクトのメンタルモデルになります。
『PMがUXするために必要なのは多分IA/IA for PM』から引用
ここまでの話を踏まえて、より良いUXをつくるためにどのようなアプローチが必要なのか。
UIデザインは、ある1つの画面の見た目を作るだけではありません。たとえば、ユーザーが語弊なく理解したりより良い体験に導くためには、言葉のデザイン、マイクロコピーが重要です。また、ユーザーが一連の体験を完了できるように画面同士のつながりをデザインしていく、ナビゲーション設計も求められます。
この2つはUIデザインのスキルの範疇でありながら、マイクロコピーはコミュニケーションデザインのスキルでもあり、ナビゲーション設計はIAのスキルでもあります。つまり、他のエキスパートスキルを向上させ多角的にアプローチすることで、より良い体験につながるUIをデザインするができます。
私たちペパボはユーザーにサービスを提供し、そのタッチポイントの1つとしてWebサイトやアプリといったツールを開発しています。体験がどのようなものであり、UIがどのような役割を持っているのか、そして、より良い体験をつくっていくためにどのようなアプローチをしたらいいのかをここで共有してもらうことで、それぞれの業務での意識づけや実践ポイントを学ぶことができました。
OOUIについて
ここから、Keynoteの発表内容を踏まえて具体的な事例を紹介していただきます。
つばさ (@tsubasa_sris)さんからは、最近「銀の弾丸」で界隈を沸かせた書籍『オブジェクト指向UIデザイン―使いやすいソフトウェアの原理』が出版されてホットワードとなっている、OOUIの概念について話していただきました。
GUIの設計には大きく分けて「タスクベース」と「オブジェクトベース」の2種類があります。
タスクベースは銀行の「お引出し」のようにユーザーがタスクを選んでからオブジェクトを選択し、オブジェクトベースはユーザーがオブジェクトを選んでからそれに対するアクションを選択します。MacOSのFinderのように1つのファイルに対して開く、ゴミ箱に入れるといったアクションを選択するようなものはオブジェクトベースですね。
タスクベースにするとタスクを完了しないと先に進めない場合が多く、ユーザーがアクション完了まで拘束されるモードが生じやすいため、大抵の場合はオブジェクトベースのほうがモーダレスで使いやすさにつながるとされています。
しかしながら、何でもかんでもOOUIにしたらよいのかというと、そういうわけではありません。
たとえばATMのようにオブジェクトが限定されている場合や、リニアな導線でユーザーを誘導したほうがわかりやすいときには、タスクベースのUIのほうが適しています。
また、失敗例として「とっつきやすさだけをとってタスクベースを採用してしまう」という事例に対して、「ユーザーは時間軸によって変化するものであり、長期的に使われたり接触頻度の高いプロダクトの場合は、自由度の高いOOUIのほうが結果的に生産性を高められる」とつばささんは話します。
タスクベースとオブジェクトベース、どちらの考え方も使いやすさを目指しているのは同じで、どちらが適しているのかしっかり見極めてUIを設計することが重要であることを学べました。
Kindaichi tool実装におけるOOUIを考えるまで
次に、デザインエンジニアのgyugyu(@gyugyu)さんから、現在開発中の社内校正ツール「Kindaichi tool」の実装について。
前回はIAの観点でどのようにオブジェクトの関係性をとらえ定義・命名していったのかを話していただきましたが、今回はそこで定義したオブジェクトをUIに落とし込んで設計する際の気づきについて話していただきました。
概念を切り分けて名前をつけたものの、その概念をそのままUIに落とし込もうとしても何をしたいのかがまとまっておらず、意図する体験を実現できるUIにはならなかったそうです。
ここで大事になってくるのが、オブジェクトに対してユーザーがどのような操作をするかを定義すること、そしてそのユーザーの操作に対してシステムがどのように応答するかを定義することの2つです。
たとえばRaw Text
というオブジェクトに対しては、ユーザーの操作は「入力(更新)する」、システムは「Raw Text
が更新されたらValidation Result
を表示する」と定義され、ユーザーの操作を束ねるオブジェクトとしてRaw Taxt Editor
が新たに作られることになりました。このように、ユーザーの操作とシステムの応答の定義をして体験を整理することで、UIの設計を精査できることを学べました。
minne事例 - 3列表示から2列表示に戻した話 -
てっちゃん(@outskirtsHinode)さんからは、minneの検索結果画面の改修事例から考察したことについて話していただきました。
minneでは「作品をたくさん見てもらいやすくする」という目的のもと、検索結果を2列表示から3列表示にすることを試みていました。
しかし実際にやってみたところ、クリック率は上がったものの、全体の収益やお気に入り経由の購入数・収益は下がるという結果になり、最終的には再びもとの2列表示に戻すこととなりました。
これらの事実に対しては、「サムネイルの縮小にともなってお気に入りボタンが作品にかぶりやすくなり、見えづらいから確認するためにクリック率が上がったが、逆に作品を探す手間が増えた結果購入数が下がったのではないか」と推測できます。
それではなぜ3列表示ではうまくいかなかったのか。ここで前回IAでも登場した探索行動を使って、てっちゃんさんがその理由を紐解いていきます。
前回カラーミーリピートの注文画面の事例では、既知情報探索がアクションのメインであったために一覧性を重視したUIを採用しました。しかしminneの作品検索は、知らない作家さんのオリジナルの作品がたくさんあるなかで自分にとってピンとくる作品、自分のセンスを探求探索する体験でもあります。
そして、自分のセンスとぴったりハマる作家さんや作品を見つけ出会うことが、minneの価値でもあります。
問いも答えも自明でないなかでインタラクションを通して自分の好きに気づいていくプロセスは、前回IAで説明されていたベリーピッキングモデルの話に通じています。
自分でも知らないあるいは曖昧であるものを探す探求探索であること、そしてお気に入りに出会うことに価値があること。
この2つを考えたときに、大事なのは一覧性よりも作品の魅力を伝えることであり、その場合3列表示よりも2列表示のほうが適しています。
一覧となる画面について考える際には、何でも一覧性が重要なのではなく、サービスの体験と価値に基づいて考えることがまず第一なのだと学べました。
作成したUIの能力を実証する - ムームードメイン事例
かわもと(@keita_kawamoto)さんからは、ムームードメインでUI検証としてユーザビリティテストを行った事例について。
きでりんさんのKeynoteでDesigner's ModelとUser's Modelを一致させることが重要とありましたが、デザイナーの意図と実際にユーザーが思うことは必ず一致するとは限りません。リリースする前にUIを検証し、UIが設計意図通りの能力を持つのかあらかじめ確認することで、リリース後の「全然使えなかった…」という悲劇を回避することができます。
ここではムームードメインのカレンダー連携機能を実装した事例をもとに、簡易的なユーザビリティテストのポイントについて話していただきました。
ユーザビリティテストを行う際には「できるだけリアルで純度の高い情報を入手することが重要」とkawamotoさんは話します。そのために事前に準備しておくことがいくつかあります。
まずは試験内容(シチュエーション)と被験者の操作モチベーションを設定します。
シチュエーションとモチベーションを設定することで被験者に実際にできるだけ近いシチュエーションで操作してもらい、純度の高い情報を入手できるようになります。
次に必要なのは、被験者のリクルートです。
ターゲットユーザーと同じ条件で、かつ今回の設計の背景・詳細を一切知らない人物を選ぶ必要があります。少しでも事情を知ってしまっていると潜在意識が多少なりとも影響してしまい、純度の高い情報を入手できません。
このようにテストの条件・環境をしっかり整え、純度の高い情報を入手・解析することで、よりユーザーが使いこなせるUIを設計できることを学べました。
新卒デザイナー自己紹介
UI Designのナレッジシェアはここまでで、ここからは新卒デザイナーの自己紹介。
今年は2名のデザイナーが新しくペパボの仲間に加わってくれました!
絵でメッセージやストーリーを伝えるのが得意なまりりん(@maririn04250)さんと、こちらもなんと漫画家のぐーちー(@tokufumi130238)さん。
今後一緒に働いていけるのが楽しみです。おふたりともよろしくおねがいします〜!
Webアクセシビリティ・ガイドラインについて
最後に、鹿(@shikakun)さんからは、社内リリースしたWebアクセシビリティ・ガイドラインについて共有していただきました。
ペパボデザインプリンシプルでは、ペパボのプロダクトは「アクセシブルであること」と定めており、アクセシビリティを達成するために具体的にどのようなことに気をつけたらよいかは国際規格であるWCAG2.0やその後継であるWCAG2.1を参照することが理想的です。
しかしながらWCAGは特定のWebの技術に依存しないように抽象的に書かれていることから解釈が難しい箇所があり、WCAGを直接参照すると実際の実装で判断に迷う点もいくつかあります。
そこでペパボでは、他社が公開しているアクセシビリティに関するドキュメントを収集し、ペパボのサービスにとって重要な項目を追加・精査し、職種問わず業務に活用できるリンク集のようなガイドラインを作成して社内で共有してみました。
まとめ
以上、第10回目デザミの模様をmewmoがお届けしました!
今回は冒頭で「UIデザイン+α」とあったように、今まで以上にエキスパートスキルエリア同士の関連を感じる回でした。
こうしてデザミを通して横断的に知識をインストールすることで、より良いデザインを目指していきたいですね。
さて、次回の開催は8月初旬ごろ、エキスパートスキルエリア「UX Engineering」のデザイナーがナレッジシェアをする予定です。第11回目のレポートもお楽しみに!
それではまた!