今月から1ヶ月間で読んだ本を記事にアウトプットも兼ねてまとめるようにする〜(漫画は含まない)
りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】 (電子版)
Zennのスクラップでアウトプットしているので割愛
はじめてのUIデザイン 改訂版
デジタルデザイン、主にモバイルを対象としている。iPhoneが登場してからの変遷についても書かれていて面白かった。
UIの見える部分を学ぶ
- ドロワーメニューはナビゲーションが隠れるので最終手段
- タブバーは画面の移動、ツールバーはコンテンツへのアクション
- プライマリーボタンはページで一番重要なアクション
- セカンダリーボタンは二番目以降に重要なアクションに使用する
- ユーザーがスピナー状態を待てるのは4秒と言われているらしい。それ以上かかる場合はインジゲータが良い
- 文字ジャンプ率とはサイト内で使用している文字サイズの差
- UIデザインに大事な3原則(グルーピング、余白、グリッドレイアウト)
- 余白でそれぞれの関係を示す事で、グルーピングできる。また枠線を減らせてシンプルなレイアウトを作れる。大中小と定義しておくと統一感がでる
UIの見えない部分を学ぶ
- すぐに詳細なデザインに落とし込むと形にしたものの印象が強く変える事が難しくなる。十何二考えることができなくなる
これは最近肌身で感じていることだな。ページ全体のUIを考えようとなった時に、すぐにFigmaで詳細なデザインに落とし込んでいたけれど、設計が足りずに考慮できていない部分が多々あったり、作ったデザインに囚われてしまうことが多かった。 - 画面は最終的なアウトプットに過ぎず目的達成の手段
- 要件の定義、構造の設計
- サービスの本質的な価値を捉え迷わず操作できる状態にするために情報設計は必要不可欠。見た目から独立した」情報設計ができればよりよいアプリケーションにができる
- 行動・操作シナリオ/今点流の分類軸の設計/UIモデルの設計/レイアウトとインタラクション
- ペルソナの設定
ターゲット層を代表した1名の架空人物を作る。ペルソナには氏名、年齢、性別、1日の行動イメージ、欲求、現状の課題を含むといい。 - 具体と抽象を行き来し要件定義する
- シナリオは目的の到達までの様子をわかりやすく書く
- 価値シナリオ
ユーザーがアプリをどのような文脈で使用するか - 行動シナリオ
目的達成までのストーリ。欲求が生まれるシーンからアプリを使いどのように変化してどうなったから目的が達成できたか。書き上がったシナリオを達成するためにユーザーがおこうなうタスクを抽象する(ex. ログイン、メンバー登録…など)。優先度もつけるといい。 - 操作シナリオ
タスクを実行するための操作。ここで洗い出されたものが振る舞いに当たる。
ex. テンプレートをダウンロードし、メンバー情報を記入する、アプリ上にアップロードする - UIモデルを設計する
- オブジェクトを抽出する
オブジェクトは何をどうするかの何をで表すものを参考にするといい。名詞で表せる。どうするかはアクションで動詞。 - フロー図の作成
ユーザーが何をみてどうするのかを線で繋ぎUIの流れを表す
- オブジェクトを抽出する
- UIのモデリング
- ビューの種類、ビューを構成する要素として見えるものを、見えるものに対してユーザーができることを表しモデルを作成する。
- 抽出したオブジェクトとどのビューが関係するかを意識することがポイント
- 画面や見た目と切り離してオブジェクトを具現化する
- 名詞にできるものをオブジェクト、動詞をアクション
- モードレスなUIは操作の柔軟性を提供し操作対象( オブジェクト)を選択し操作方法(アクション)を決めるため画面数が必要以上に多くならないことがも利点。ユーザーが実行するタスクベースで考えるとモーダリティでタスクベースなUIになってしまいアプリケーション都合が増え創造性を高めいにくい側面がある。
- モードとモードレスについては、本文で紹介されていたモードレス・ユーザーインターフェースがわかりやすく理解が進んだ
- ユーザーが情報を受け取り、必要に応じてアクションできるようなUIを設計する
UIをつくる
- 現状理解と目的の把握
- 一貫性を意識する
- コンポーネントの一貫性
- スタイルの一貫性
- スペースの一貫性
- 一貫性をがもたらすメリット
- 統一感
- ユーザーの学習コストを減らす
- UIの制作プロセスを効率化する
- 開発の複雑度を減らす
UIデザインができたら
- プロトタイプは壊すために作る、より気楽に動くものを作るという心持ちで取り組むことで柔軟なものづくりとコミュケーションを生む。
運用を考える
- 定量的な数字を見る
- PV・・・特定のページが閲覧された数
- セッション数・・・サイトへの訪問回数
- UU(Unique User)・・・サイトへの訪問者数
- DAU(Daily Active User)・・・1日あたりの利用ユーザー数、月間の場合はMAU
- CTR(Click Though Rate)・・・表示数に対してのクリック率
- CVR(Conversion rate)・・・訪問者数に対しての顧客転換率
- ABテストはあくまでもAとBという限られた条件内で比較した場合の結果であることを念頭におく必要がある。
オブジェクト指向UIデザイン──使いやすいソフトウェアの原理 WEB+DB PRESS plus
オブジェクト指向UIとは
オブジェクトを手がかりに操作設計されたUI。画面とデータを対応づける方法論。1980年初頭からOOUIという言葉が爆誕。
オブジェクトとはアプリケーションが扱う情報オブジェクト。ユーザーが操作する対象。
- オブジェクト指向UIの原則
- オブジェクトは知覚でき直接的に働きかけることができる。
- オブジェクトは自身の性質と状態を体現する。
- オブジェクトの選択→アクションの選択操作手順(名詞→動詞の構文)
- 全てのオブジェクトが互いに強調しながらUIを構成する
- オブジェクトかどうかを判断する指標
- 数えられる名詞として表せる
- 同種の集合として管理され得る
- 共通のアクションを持っている
- タスク指向UIの問題
- 動詞→名詞式のタスク指向のUIはモーダル(モードがある)であり、ユーザーの操作の自由度を奪い、余計な手続きを増やす。=> 学習効率、操作効率が悪くなりがち
- ユーザーの関心の対象であるオブジェクトがタスクの中に閉じ込められた状態になっていてタスクを開始しないとわからない。ユーザーは行き先が不明瞭な中進んでいく状況になるため、インタラクションコストが高くストレスになる。
- UIがタスク指向になってしまう背景
- OOUIの設計方法が明文化されていない
- ユーザーの要求を実現するにあたり、ユーザーが”やること”の単位で機能要件が定義されるため、UI構成も”やること”ベースになりがち。（わかる…業務系のアプリで関係者(コンテクストが違うユーザー)が多いほどこの問題に直面する。多様なコンテクストに一貫して作用する原理、本質を捉えることが大事だ）
- タスクによって処理対象となるオブジェクト集合が異なる場合。タスクの選択がアプリケーションの選択と同じ様な位置付けになる。(複合的な業務アプリケーションとかはまさにこれに当たるのかな。まず、どのモードを使いたいか選択する)
- タスクによってユーザーに提示するべきオブジェクトの属性やアクションが大きく異なる場合。オブジェクトを先に提示すると情報量が多くてUIに収まらない。
- オブジェクトがユーザーのメンタルモデルにおいて意識されていない。また、オブジェクトがひとつだけで選択の必要がなくアクションの引数としての入力がタスクの大部分である場合。(ATMなど)
- ユーザーの創造的な作業を禁止し、一定の順序で限定的な操作をさせたい場合。
オブジェクト指向UIの設計プロセス
- UIとはユーザーとその関心の対象(オブジェクト)を接続する空間。
- レイヤー構造はモデル・インタラクション・プレゼンテーション
- モデル
- ユーザーの関心対象の模式
- ソフトウェアデザインの基盤となる層。デザイン全体の60%を占める。オブジェクトのモデリングにあたり、ユーザーの活動領域の調査やタスク分析を行う必要がある。
- インタラクション
- 構造と機能
- モデルとプレゼンテーションをつなぐ
- プレゼンテーション
- スタイルやレイアウト
- モデル
- モデル、インタラクション、プレゼンテーションの方向で設計の具象度が上がる
- いいデザインとはユーザーに合わせたものではなく、ユーザーが自ら合わせられるもの。
=> 抽象度が高く、使い方を強要されなので柔軟で拡張性がある(モードレス)
1. オブジェクトの抽出
クラス定義やデータベース設計のエンティティと同じ。ユーザーのメンタルモデルを調べる。オブジェクトを抽出するためには、ユーザーがそのドメインで何をどのように行なっているか、業務内容をよく理解しなければならない。
- オブジェクトかどうかを判断する指標
- 数えられる名詞として表せる
- 同種の集合として管理され得る
- 共通のアクションを持っている
2. ビューとナビゲーションの検討
ビューはユーザーが実際に画面上で目にするひとまとまりの情報表示領域。オブジェクトはビューを伴うことで具象されユーザーへ認識させることができる
一つのビューの中で同種のオブジェクトを複数並べ表示する＝コレクション。
一つのビューの中でオブジェクトひとつ分を表示する(コレクションより多くの属性を表示する)= シングル
(コレクションは記事一覧、シングルは詳細ページなイメージ)
3. レイアウトパターンの適用
上記1.2.3のステップはどこから始めても、順番を変えてもいい。行ったり来たりしながら進める。
オブジェクト指向のフィロソフィー
オブジェクト指向プログラミング(OOP)
- データと動作のセットを基礎要素にしてそれらの相互作用によって処理を行う
- 小さなオブジェクトの集まりによる相互作用によって大きな構造体を動かす
- OOPではオブジェクトの型(概念)をクラスと呼び、このクラスから実態なオブジェクトであるインスタンスを生成していく。
- クラスからインスタンスを作るのは古代ギリシャの哲人プラトンのイデア論と似ている
イデア論とは、事物の在り方は、当の事物についてのイデア(観念、真理、本質)によって規定されている、という考え方。
池上彰の世界の見方 中東: 混迷の本当の理由
現状の世界情勢を踏まえて、もう一度中東の歴史を学び直したくて読んだ。
振り返り
今月はUIについての本を二冊読み、オブジェクト指向にも少し触れた。普段の生活の中でも、「これはタスク指向なデザインになっているから、こうするとオブジェクト指向なUIになって操作性がよくなりそうだな」なんて考えたりする機会も増えた。共感できる部分や、今まさにこの問題にぶち当たってます！みたいな事例も多くあったので読んで良かった。UIデザインする際に、すぐ具体から入ってしまう節があるがしっかり俯瞰して、オブジェクト指向で考えられる様に日頃から意識したい。
コメント