カルフォルニア州立大学のUXUIデザインクラス・講義ノート

カルフォルニア州立大学ロングビーチ校でSam Anvari (サム・アンヴァリ)教授の元で2018年春学期に履修したUXUIクラスの講義のノートです。

最終更新:2018年5月14日

全ての授業課題の配布や連絡はより現実の仕事環境に近づけるため教授の意図でSlack(スラック)を使って行われました。Slackの他にもGoogle DocsやDropboxなどのオンラインツールを頻繁に使った授業進行が行われました。アンヴァリ教授はエンジニアの学位も保持し、エンジニアとしての職業経験もあり、デザイナーとしての視点だけでなく、エンジニアとしての経験そして、実際の製品開発の経験に基づいた現実的な指導が行われたように感じます。

クラス内容:“Develop skills and principles to design for non-linear environments. Students learn how to conceptually, theoretically, and aesthetically design for the user experience: information progression, usability, and accessibility.”

 

小課題 1

内容:街で見かける銀行ATM、自動販売機などのキオスク(無人端末)を一つ選びフローチャートをデジタルで制作しPDFドキュメントとしてまとめる。

私は大学キャンパス内にあったバンク・オブ・アメリカのATM端末を選び、引き落としと預け入れのユーザーの行動を色使い分けし、チャートを制作しました。芸術家が過去の画家の絵を模写し練習するのと同じように、既存の製品のフローチャートを書き出すことは基本的なインターフェースの流れと仕組みを学ぶとても良い練習でした。この課題を行うにあたり、教授はまず数学でおなじみの平方根(square root)を求めるアルゴリズムを例にフローチャートの使い方を説明しました。良いフローチャートはエンジニアとデザイナー、さらにはステークホルダーとのコミュニケーションの効率をあげるとても重要なツールということも学びました。

完成したフローチャート

 

小課題2

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

私はこの課題にAirbnb、Yelp、Instagramに加え、個人間送金アプリのVenmo(ヴェンモ)とTwitterを選びました。アメリカでは知らない人はいないほど有名なアプリを解析することは最新のUXUIのトレンドを知ることのできる良い機会でした。個人的にはインスタグラムのUXUIが使いやすく、自然にユーザーを取り込むようにうまくできているように感じました。それぞれの長所短所は以下の画像にまとめられています。

 

プロジェクト1

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

制作過程

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

この課題では私はパルクール(Parkour)というスポーツが練習できるスポットを紹介する架空の地図アプリをデザインしました。iOSに標準のネイティブUIと地図画面を組み合わせ、シンプルに仕上げました。HIGsが指定するフォントサイズや要素などにできる限り忠実に従うことで開発者の負担を減らし、さらに既存のiPhoneユーザーに親しみやすいデザインを作ることの大切さについてしっかりと学びました。矛盾や行き止まりのないユーザーフローを作るという最低限必要なことでさえも、それなりの労力が必要だということを学びました。

 

読書レポート「Design for Emotion」

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

最近の欧米のSaaS (software as a service)などでは良く意識される人の感情を取り入れた人間味のあるデザインemotional designやまた感情のこもったコンテンツ制作に関する本でした。有名なメールマーケティングサービスの「MailChimp」などを例にとり、心理学に登場するマズローの「欲求5段階説」にも触れながらデザインについてとても深く学ぶことができる書物でした。

 

 

プロジェクト2

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

読書課題:
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/

制作過程

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

このプロジェクトの中では教授が持ち込んだ以下のスマートデバイスを実際に操作し、解析する日が設けられました。クラスの皆で市販のIoT家電を試しました。ハードウェアとソフトウェアとの関係がどのようにUXUIデザインをするうえで大切かを学ぶことができました。

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

 

また別の日にはスマートデバイスについての理解を深めるグループワークが行われました。グループ内で家の中にいくつの「ゾーン」(リビング、ガレージ、フロントヤード、バックヤード、地下室…等)があるかを書き出し、そのゾーン別に使うことのできる可能性のあるスマートデバイスの一覧を作りました。デバイスは以下の3つのカテゴリに当てはめました。

  • C (Control): 電球、エアコン など
  • M (Monitoring / survilance): 防犯カメラ など
  • A (Alert): アラート: 例:煙センサー、水漏れセンサーなど
1ゾーンあたり1ポストイット

 

その他にも4人1グループで組みになり、一人をインタビューし回答者の平日と休日の日の行動と使用デバイス、そしてムードを書き出しました。

また以下のようなホームコントロール アプリの例が教授によりクラス内で紹介されました。

最終的に仕上げたこの課題のケーススタディはこのページにあります。

 

 

最終プロジェクト

内容:大学のアプリをユーザーインタビューを等して改善点を見出してペーパープロトタイプを制作し、全体のインタビューの様子をビデオにまとめる。

制作工程

  1. Google Formによる質問制作
  2. ユーザーインタビュー
    1. 結果をまとめる (25人最低)
  3. ビデオ制作(1-2分)
  4. ペーパープロトタイプ

以下が完成したビデオとペーパープロトタイプ(準備中)になります。

(ビデオ制作:Chanel Villanueva

SaveSave

SaveSaveSaveSave

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

Leave a Reply

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