モデルベースUIデザイン

https://gyazo.com/7e99fbe3118d7b516cade9ea1b92be89

精緻な見た目を先に作ってから後で構造設計の辻褄を合わせるやり方は非常に効率が悪く、 UI全体の質が下がりやすくなります。

はい

情報のもう 1つの対応語である「 information」についても見てみましょう。英語の「 inform」とは動詞の「伝える」ですが、これを分解すると「 form（形作る）」に「 in（中）」の接頭辞を付けた言葉だとわかります。何かを（相手の頭の）中に形作る →伝える、そんなニュアンスでしょうか。

情報は何かを相手の頭の中に形作り伝えること

受け手が望んだような形の情報を適切に与える方法を作ること

ソフトウェアは永久に完成しない

新たな技術の導入によって一部の構造が陳腐化→陳腐化したものを取り除いて拡張していく

ユーザーがあなたのアプリだけに完全集中する状態」は基本的には生じ得ないことを念頭に UIを設計しましょう。

そうなんだよね。。

使われる想定って結構イメージしないといけないんだよね

モデルベース UIデザインは、デザインの各工程をより細かな単位に切り分けて、取り回しの効きやすい「モデル」の形で成果物を作っていく方針をとります。デザイナーの仮説的推論のような考え方を否定するのではなく、デザイナーの視界を工程ごとに細分化して、ロジカルに構造設計に取り組める環境を作ります。作業には、環境調査や方針決定を行う序盤フェーズ、モデルの構造設計を行う中盤フェーズ、モデルに基づく表現設計を行う終盤フェーズの大きく3段階があり、それぞれで異なる成果物の構築を行います。そして最終的には1つの「UI」が成り立つことを目指します。

序盤

製品やユーザーに関わる環境調査を得て具体t撃な設計のための材料を集める

中盤

情報設計を駆使してUIの基盤となるモデルを作る

画面遷移ではなくナビゲーションを設計するのもこのフェーズ

コンテンツに基づく構造がどのように成り立つのかをちゃくもくする

終盤

UIのルックアンドフィール、インタラクションなどを検討してUI全体を整える

モデルベースUIデザインでは成果物として機能一覧を作ることは推奨していない

ユーザーの用途=ユースケースを定義していく

「〜する」みたいな書き方はしない

検索、投稿など簡潔で読みやすくする

ユースケースのIDふるときアンダースコアで切るのがいい

ダブルクリックで選択できなくなるので

001とかのゼロパディングはしない

見栄えが良くなるだけなので

なのでそれ以外の箇所をしっかり定義していく

コンテンツ構造

サービスやアプリの中で扱うコンテンツに関わる構造設計とその成果物

概念オブジェクトを設計する

例としは以下

レシピ

料理研究家

材料

ユーザー

コメント

名詞で表せるもの

フレーム構造

UIの基本的な枠組みを決めるモデル

概念オブジェクトを包むUIの枠組みを設計する

ナビゲーション構造

画面遷移とかサイトマップの話ではなく

UIを作り切ってから考えるより先行して大まかな設計をすることで手戻りをなくす

1:1じゃないってこと

https://gyazo.com/ddce5c2ba957f2eb1cfde4d0d14cd1d5

上記のようにコンテンツ構造とフレーム構造を関連付ける

名詞（オブジェクト）に対してCRUDを考える方法

メンタルモデル

概念オブジェクト

メッセージ

タスク

新規作成

コンセプト

メッセージを受信する

概念オブジェクトの中で親子関係になれそうなものを組み替える

ナビーゲーション設計

レイアウトを決めるよりもずっと前の段階から着手する

多数のコンテンツを扱うメディア系の Webサイトやモバイルアプリでは、兄弟間のナビゲーションはユーザーの回遊性を上げる効果を発揮します。

なるほど

事前にボトムアップ式の設計を進めておけば、主要な概念オブジェクトの詳細表示パターンが定まるので、目標地点に向かうためのユースケースを絞り込みやすくなります。

時にはボトムアップ式では現れた構造が、トップダウン式では現れなかった、というようなこともあります。この場合は、 ANDで考えるのではなく ORで考えてみましょう。どちらか一方で現れた構造は一旦有効なものとして採用し、その後必要性をしっかりと吟味してください。

順番にぐるぐるオブジェクトに戻れるようにしておくと良い的な

モーダルビューは、一時的に集中させたいタスクを包むものです。必ず、中止して抜ける動線か、実行して抜ける動線のいずれか（あるいは両方）が用意されています。情報コンテンツ間をナビゲートさせて回遊性を高めるような場面にはまったく不向きのパターンなので、ドリルダウンやコンテンツ主体のナビゲーション等には採用しないようにしましょう。

はいその通り

まず、ユーザーは操作対象となる〈オブジェクト〉を先に選択して、次に実行したい〈コマンド〉をメニューから選ぶ 　まず処理の対象となるオブジェクト（名詞）を選択して、次に処理内容（動詞）を選ぶ 2段階のアクションです。このことを、「名詞－動詞」方式のアクションとも言います

一回で覚えられるイディオム

直感的とはその人が過去の記憶から似たような知識を瞬時に呼び出して目の前の物事に当てはめたものにすぎない

UIデザインの実務においては、ツリーかセミラティスかで極端に考えるのではなく、まず基本のツリー構造で全体の情報アーキテクチャを形作り、横断機能が必要な箇所で部分的にセミラティス構造を導入し、インターフェイス表現を工夫しながらバランスをとるアプローチが有効です。

極端ではなく掛け合わせで行う

1回限りのモード

アクション一回で終われる

擬似モード

キーやマウスのボタンを押し込んでいる時だけ有効になる

ゲームとしゃがむとかで使われている

たまに、ダイアログにもバツボタン（閉じるボタン）を付けてしまうデザイナーがいるのですが、これは良くない設計だと筆者は考えます。ダイアログで唯一機能する否定的アクションは「キャンセル」であるので、それと同等なのかよくわからない第 3の「バツボタン」を置いてしまうと、ユーザーはその違いをうまく判断できなくなります。物事をシンプルにするためにも、さして違いがない表現を複数並べる必要はなく、できるだけ無駄なものは取り除いてあげることが重要です。