カリフォルニア州立大学 UX/UIデザインクラス 講義ノート

現在カルフォルニア州立大学ロングビーチ校でSam Anvari (サム・アンヴァリ)教授の元で現在履修しているUXUIクラスの講義のノートです。新しいノートが増える都度更新する予定です。

最終更新:2018年4月5日

小課題

小課題1

銀行ATMや自動販売機などを一つ選びフローチャートをデジタルで制作しPDFドキュメントとしてまとめる。

小課題2

Airbnb(エアービーエヌビー)、Yelp(イェルプ)、Instagram(インスタグラム)と2つの任意のモバイルアプリを選んで合計5つのモバイルアプリのフローチャートをデジタルか手書きで制作。その後それぞれのアプリの長所と短所を書き出し、それぞれのアプリの簡単な解説を含めてPDFドキュメントを制作。(2018年2月1日 締め切り)

プロジェクト1:iOSアプリデザイン

このプロジェクトでは任意のiOSアプリをAppleのHIG(ヒューマンインターフェイスガイドライン)に基づいてデザインする。

制作過程

  • PRD制作
  • フローチャート制作
  • ワイヤーフレーム制作
    • クリック可能なワイヤーフレームをInVisionで。全てのビューと1つのシナリオを制作。5分間のプレゼンテーション。
  • ブランディング
    • 5つのロゴのアイディアをベクターファイルとして制作してPDFファイルとして提出しクラス内で批評。
  • Hi-fi プロトタイプ制作
    • クリック可能なHi-fiプロトタイプをAdobe Illustrator, SketchまたはAdobe XDで制作。InVisionにアップロードし全てのビューと2つのシナリオについて5分間のプレゼンテーション。
  • プロセスブック制作(pdf形式)
    • PRD
    • フローチャート
    • ユーザーケース、シナリオ
    • ペルソナ
    • ワイヤーフレーム
    • 最終インターフェイス

 

プロジェクト2:アンドロイドホームコントロールアプリデザイン

この課題では複数の「スマート家電」を操作するアンドロイドアプリをGoogleのマテリアルデザインの概念に基づいてデザインする。

読み物(3月8日締め切り)

Rapid User Research for Enterprise UX: The 10-Minute Guide
https://www.uxpin.com/studio/blog/rapid-user-research-enterprise-ux-10-minute-guide/

UX Mapping Methods Compared: A Cheat Sheet
https://www.nngroup.com/articles/ux-mapping-cheat-sheet/

コントロールする製品の例(ブランド例)

教授が持ち込んだ以下のスマートデバイスを実際に操作してみる。

  • スマートLEDライト(LIFX
  • スマート卵カートン(Quirky Egg Minder
  • スマートプラグ(TP-LINK
  • スマートセキュリティーカメラ(NEST, Yi

ゾーン別スマートデバイス使用状況

1ゾーンあたり1ポストイット

グループワーク。家の中にいくつの「ゾーン」(リビング、車庫、地下…等)があるかを書き出しそのゾーン別に使える可能性のあるスマートデバイスの一覧を作る。デバイスは以下の3つのカテゴリに当てはめる。

  • C (Control): コントロール(電球)
  • M (Monitoring / survilance): モニター・防犯(カメラ)
  • A (Alert): アラート(例:煙センサー、水漏れセンサー) 

ユーザージャーニーインタビュー

4人1グループで組みになり、一人をインタビューし回答者の平日と休日の日のアクティビティと使用デバイス、気分を書き出す。

制作過程

  1. ユーザージャーニーマップ制作 (3人分)
    1. 日々の日課(平日1日と休日1日)
    2. 家の中でのアクティビティ
    3. 使っているデバイス/家電
  2. インフォメーションアーキテクチャ

読書レポート「Design for Emotion」

「Design for Emotion」を読み感想文を2ページ(レターサイズ)にまとめる。

ホームコントロール / アンドロイド参考アプリ例

授業ノート

Google Material Designの以下の項目を読んでコンセプトを理解する。

  • Material Design → Component
  • Card

Leave a Reply

Your email address will not be published. Required fields are marked *