【8日目】「はじめてのUIデザイン 改訂版」備忘録 3章1〜4
Tumblrは全然使ってないのに、Pinterestは結構使ってる。
フリマアプリ2個インストールしてるけど、1つしか使わなくなった。
Gmailのアプリの方はこまめにチェックしてるけどmyMailはチェックするのが億劫で溜めがち。
使いやすさってきっとこういうこと。
私は感覚的に操作できて文字が少ないUIが好みだな。
※この記事は個人の勉強の備忘録として「はじめてのUIデザイン 改訂版」を参考にまとめたもので、イラスト等も全て同書を参考に作成しています。
3.UIの見えない部分を学ぶ
実際にツールでの作業を行う以前に行う作業。
ここがめちゃくちゃ大切な感じ。土台部分。
ここがしっかりしてたらビジュアルのデザインしやすい気がする。
（つまりしていなかったら、、、表面的なものになりがちということですね。 WEBデザイン的な、、、？）
3-1.UIデザインの前に
画面として表れるものは最終的なアウトプットであり、アプリは目的達成の手段に過ぎない。
ユーザーがわかりやすい、使いやすいと感じ、思いのままに目的を達成できるUIのデザインをおこなうためには、要件の定義や、構造の設計が必要
ユーザーがUI上でどのような情報を目にし、目的を達成するためにどのように行動するのかといった本質に向き合って進める必要がある。
3-2.情報設計
情報設計とはわかりやすさを設計すること。
以下、なんか全文大事だったから引用した。
ユーザーがアプリやサービスの本質的な価値を捉え、迷うことなく操作できるようにするために情報設計が必要です。適切に情報設計されたアプリは、ユーザーが自由に工夫して楽しく目的を達成できるといった、優れた体験を提供できます。優れた体験は、ユーザーに「アプリを自分の思いのままに操作できている」と感じさせたり、自分自身がレベルアップしたという感覚を生みます。そうした体験が、ユーザーにとってのわかりやすさや、使いやすさにつながります。また、情報設計はアプリのデータ構造の整理にも機能します。情報設計を適切に施すことでアプリ全体がシンプルな構成になり、エンジニアリングにおいても優れた拡張可能性を提供します。
（キャプチャを載せるのがよくない気がして手描きしてみた。。）
なんかもう全文なるほどすぎて全文引用しました。↓
要件とUIデザインの架け橋情報設計は、作るものの要件とUIデザインをつなぐ架け橋となる存在です。例えると、ここまでの章で学んできた視覚的要素が「単語」だとすれば、要素を組み合わせて1つの画面にしたものが「文」、複数の画面で構成されるアプリ全体が1つの「物語」です。しっかりとした骨格を作れば、さまざまな物語、パターンに展開しても、重要な体験のブレを避けられます。見た目から独立した情報の構造を丁寧に設計する力がつけば、デザイナーはユーザーの創造性を刺激する、よりたくさんの表現を試せるようになるのです。
3-3.制作の流れ（具体的な成果物）
行動・操作のシナリオの作成（ユーザーシナリオ）
ペルソナが目的を達成した状態までをつなぐ価値・シーン・行動・操作を具体的にするためのもの。
シナリオを使ってペルソナに動きを与え、ペルソナが目的を達成するに至るまでの具体的な行動を理解する（抽象と具体を行き来しながら要件定義を進める）「価値シナリオ」「行動シナリオ」「操作シナリオ」に詳細化する。コンテンツの分類軸の設計（コンテンツの分類軸）
ユーザー視点の分類とコンテンツのカテゴライズUIモデルの設計（フロー図）
上記で作成したものを元にユーザーの動きを線で繋いで図示化したものレイアウトとインタラクションの設計（ペーパープロトタイプ）
開発前に手書きで作成するシュミレーションツール
3-4.ペルソナを動かすユーザーシナリオの作成
3-3. の制作の流れの1.の工程、
書籍内の例を元に、ユーザーシナリオを作成しました。
価値と関連のあるシーンの部分だいぶ端折ったけど。。
人に見せる前提では無いので綺麗ではないけど、、
実装方法や見た目のイメージを先行させずユーザーが目的を達成した様子を想像しやすくするのがポイント。
具体化されたものから抽象度を上げたり下げたりしながら
ユーザーの持つ多くの目的を達成することを明確化していく。
続きはまた次回。
あと92日〜🐊
↓「はじめてのUIデザイン 改訂版」読んだよシリーズはこちら。
この記事が気に入ったらサポートをしてみませんか？