エンジニア出身デザイナーusagimaru氏と学ぶ　ロジカルに考える　エンジニアのためのUIデザイン - connpass

Design = 設計

原理原則

比喩の使用

直接操作

ユーザーによる制御

フィードバック

美的整合性

ロジック

ヤコブ・ニールセンのユーザビリティ10原則

システム状態の視認性を高める

実環境に合ったシステムを構築する

ユーザーにコントロールの主導権と自由度を与える

一貫性と標準化を保持する

エラーの発生を事前に防止する

記憶しなくても、見ればわかるようなデザインを行う

柔軟性と効率性を持たせる

最小限で美しいデザインを施す

ユーザーによるエラー認識、診断、回復をサポートする

ヘルプとマニュアルを用意する

今日の主なトピック

構造パターン

GoF Design Patterns

Template Adapter

Chain of Responsibility

Singleton

Memento

Builder

Proxy

ナビゲーションパターン

フラット

ピラミッド

モーダル

ステップ

ドリルダウン

画面遷移のひとつ

ハブ・アンド・スポーク

ツリーとセミラティス構造

ツリーはフォルダとファイル

VSCode とか

セミラティスは特定の要素が複数のグループに所属できる

iPhone 写真アプリとか

モデル化

机上で検討可能なものはモデルで評価

構造の論理性

表示形態

ナビゲーション／状態遷移

ユーザーの用途と需要

具体を作らないと判断できないものはプロトタイプで評価

表現の妥肖性

見た目・動きの印象や感触

ユーザビリティ、アクセシビリティ

プレゼンテーション、総合的なデザインの評価

https://scrapbox.io/files/670de0597f5731001dbdf837.png

https://scrapbox.io/files/670de06815b9e700226a3cf6.png

ユースケースはユーザーの「用途」

A さんが〇〇を△△する

https://scrapbox.io/files/670de09afba6d4001cdae6aa.png

https://scrapbox.io/files/670de0e4fa371e001c560ff1.png

デザインに興味があるエンジニアは、まずは「情報設計」を学ぶといいと思う