ガジェット通信

見たことのないものを見に行こう

UIデザインを作成するとき、“実際のデータ”を意識しなければならない理由

DATE:
  • ガジェット通信を≫

こんにちは。Pooleチームのデザイナー、コーリーです。
先日デザインをしているときに、“UIデザインとデータの関係”が気になりました。

皆さんは、新しいサービスのUIデザインを作成する際、どんなユーザデータを使用していますか? 自分で作ったデータを入力していると、予想外のことが起きたときに対処できなくなるかもしれません。

そこで今回は、UIデザインを作成する際に実際のデータを意識しなければならない理由と、データを使用するために便利なツールをご紹介したいと思います。

“実際のデータ”を意識すべき理由

データの値によってデザインが崩れることは多々あります。
例えば先日、メンバーページのUIデザインが一瞬崩れたのですが、原因はメンバーの1人である「野田クラクションベベー」の名前が長すぎたことでした。

このように、SketchやPhotoshopなどでせっかく綺麗なデザインを作っても、実際のデータと合わないことがあります。ときには、デザインのコストが無駄になってしまうことも。
実際のデータは動的に変わっていくものであり、その値がいつも綺麗だとは限りません。そのため、データがデザインの犠牲となって崩れないように気をつける必要があります。
根本的にUIデザインとは、データを整理し、解決し、操作方法を伝えるもの。実際のデータを使用することは、デザインをするときの対策として有効です。

作成したデザインがちゃんと統一されて想定通りに動くかどうかを確認するため、必ずデータを使って作ります。
実際のデータを使わないで綺麗な仮定データを入力すると、リリース後にデザインが崩れたりページが表示されなくなったりすることがあります。

UIデザインを崩しがちなデータ

アプリやサイトの種類によって使うデータは異なりますが、デザインを崩しやすいデータをいくつか紹介します。

ユーザが投稿した画像

デザインのモックアップを作成するとき、綺麗なstock photographyやグラフィックを使うことはありませんか?
しかし、ユーザはプロのフォトグラファーではありませんから、実際に投稿するコンテンツは解像度が低かったり構成が悪かったりと、それほど綺麗なものでないことも多いです。

ですから、ユーザが画像を投稿するサービスやアプリなどの場合は、デザインをするときにその点も含めて考えないといけません。つまり、デザイナーとして、ユーザが微妙な画像をアップロードしてもいい感じに表示しなければならないのです。
もちろん、想定外の画像にも気をつける必要があります。
余白の多い画像が投稿されてもUIは大丈夫か。写真に文言を重ねたとき、文字は読めるのか。サービスやサイトの背景が白であれば、画像に枠を付けた方がいいのか。
さまざまな問題が浮き上がってくると思います。

そんな画像に関するよくある問題はこちらです。

暗い画像や白い画像は、周りのUIに対してどう見えるのか?
画像上に文字を載せたとき、ちゃんと読めるのか?
荒かったり解像度が低かったりする画像はどう見えるのか?
UIの大事な要素が画像によって見づらくないか?

ユーザの名前

人の名前にも想定外のデータが出てくることはよくあります。冒頭で説明したメンバーページがいい例ですね。
サービス内などのユーザ名であればデザインが崩れないように入力制限をかけられますが、人の名前であれば無理に制限をかけることはできません。
大事なのは、自分の想定外の名前を持つユーザがいることを忘れないことです。

名前データを取り扱う際に気をつける点はこちらです。

文字数が多い場合
文字数が少ない場合
漢字やひらがな、カタカナ、英字それぞれの場合と、それらを混ぜる場合
絵文字やその他シンボルを使う場合
外国人名の場合

How to Design with Real Data

基本的な問題を把握したので、実際にUIデザインをテストする際に使えるデータをご紹介します。

データベースから出力 or サービスのAPI

既にリリースしたものであれば、ユーザのデータは大体何らかのデータベースに保存されています。データベースならCSV(Excelで見られる)やJSON(テキストエディターで見られる)で、データの出力ができます。
もちろん、ユーザデータには個人情報が含まれている可能性があるので気をつけないといけません。

直接データベースから出力する以外にも方法はあります。サービスのAPIを使いリクエスト経由で情報を得る方法です。
「Postman」というツールを使えば、パラメーターを指定してリクエストするとJSON形式のデータを得ることができます。JSON形式のデータは読みやすく、デザインに反映しやすいので便利だと思います。
開発能力をお持ちの方であれば、データを直接デザインに繋げることも可能だと思います。

前回書いた上の記事のように、私はSketchの大ファンなので、もちろんプラグインを探しました。それが「Sketch Data Populator」です。

Sketch Data Populator

https://github.com/preciousforever/sketch-data-populator

「Sketch Data Populator」を使うとJSONファイルが読み込まれて、データが勝手に入るんです。便利ですね〜。

Real Fake Data(本当のデータを使えないとき)

もちろん実際のユーザデータを使えないこともあると思います。
例えば、まだアプリやウェブサービスがリリースされていない場合や、新機能のUIデザインである場合は、ゼロから始めるしかありません。しかし、都合のいいデータを使用してデザインしては、予想外のことが起きたときにデザインが崩れてしまったり対応できなかったりします。
ですから、以下のような方法で「Real Fake Data」を使う必要があります。

既存サービスを参考にする

どんなに斬新でオリジナルな概念から新しいサービスを作り出しても、すでに同じようなものが存在している可能性は高いです。しかし、UIデザインの際にはかなり参考になります。
実際のユーザが入力するデータの内容や、入力パターンなどがすぐにわかるからです。また、Postmanを使えば、APIから大量のデータをすぐに見ることができます。

UI Facesを活用する

http://uifaces.com/

「UI Faces」は、ユーザが投稿した画像をデザインモックアップ用に使えるツールです。一般人が投稿したものなので、顔が切れてる写真や荒い画像などがあります。デザインをする際にはあまり考えない、現実的な例が多くあります。

また、プログラミングができる方には、ランダムな画像を返すAPIもおすすめです。

UI Faces API
$ curl http://uifaces.com/api/v1/random

{
“username”: “calebogden”
“image_urls”: {
“epic”: “https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg”,
“bigger”: “https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/73.jpg”,
“normal”: “https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/48.jpg”,
“mini”: “https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/24.jpg”
}
}

UI Namesを活用する

http://uinames.com/

「UI Names」はランダムな名前ジェナレーターツールです。
使い方はすごくシンプルで、性別と国を選択して“spacebar”を押すだけ。その度にランダムな名前が表示されます。日本や中国を選択すると、漢字の名前も表示されます。

Mockarooを活用する

https://www.mockaroo.com/

「Mockaroo」は最近見つけた便利なツールなので、紹介しますね。これを使えばメール情報や位置情報など、さまざまなランダムデータを作成し出力してくれます。

データがない状態をデザインする

いままでデザインのデータ対応について話してきましたが、UIデザインをする際にデザイナーがよく忘れることがもう1つだけあります。それが“空データ”。
ユーザがアプリやウェブサービスを使いはじめる際にニュースフィードや通知、メッセージ、フォロワーなどがないことはよくあります。こういった空のデータにもデザインを用意することは重要ですね。
最近では、UIの空状態を回避するために、初めてサービスを使った人向けにいろいろな情報を用意しているものも多いですね。

また、初めてのユーザでなくても、ユーザが一部や全部のデータ削除をしたらどういうUIにするのか? 空データと中途半端なデータの場合がありますので、この2つのパターンにもデザインを用意しないといけません。

そうしたEmpty State(空状況)の参考になるサイトはこちらです。

Empty States:

http://emptystat.es/

Empty States – Pttrns:

http://pttrns.com/?scid=30

まとめ

デザイナーとして綺麗なものやかっこいいものを作ろうとしたとき、本質を見逃すことがあります。UIデザインの本質は、使いやすさと分かりやすさを作ることです。
データを意識してデザインを作りましょう。

それでは。

参照

Designing with Data:

https://medium.com/design-at-depop/designing-with-data-7f6bcd907f0a

Modern Design Tools Using Real Data:

https://medium.com/bridge-collection/modern-design-tools-using-real-data-62d499e97482a

カテゴリー : 生活・趣味 タグ :
LIGの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。