workshop/prototyping_basis/main

プロトタイピング基礎

プロトタイピングとは即ち実働する試作のことであるが,実働試作物の他,ビデオプロトタイピングやペーパープロトタイピングなど,ユーザ経験価値を創出するためのいくつかの種類がある.ユーザ・インタフェースデザイン(UIデザイン)において,プロトタイプを作成し,そこから得られるユーザフィードバックを基にさらにUIデザインを改善する手法は一般的である.この授業ではフィジカルコンピューティングやデジタルファブリケーションといった近年のものづくり変革を学習することで,新たな製品価値を創出するための基礎的なプロトタイピング知識と技術習得を目的とする.

Paper Prototyping課題(ユーザビリティ評価とペーパープロトタイピング)

  • 提出先:baba@tmu.ac.jp
  • 形式:1024x768pxのpng形式をメール添付
  • 件名:プロトタイピング基礎
  • 内容:学習番号,氏名


Video Prototyping

教員の指示にしたがってください


ソフトウェアによるプロトタイピング

ここではソフトウェアによるプロトタイピングについて学ぶ.今回は具体的にProcessingを利用し,簡単なUIを作成し,その評価を行う. ペーパープロトタイピングと同様の内容を今度はソフトウェアの実装を通じ,どのような箇所がペーパープロトタイピングと比較して有効であるか等のメリットやデメリットを体験することが目的. 実際にシンプルなボタンデザインをソフトウェアにて実装してみるが,それに先立ち「インタフェースデザインの心理学」からいくつかのトピックを紹介する.

Processingを利用して「ボタンを押す」という動作やボタン形状・色に様々な補助的情報を不可してみる.具体的にはマウスが乗っているとき,ボタンを押した時に関して,ユーザにフィードバックを提供し,ユーザビリティやユーザエクスペリエンスを向上させることを意識してみる.

ボタン画像を表示するプログラム

PImage img_button;

void setup()
{
  size(600, 400);
  img_button = loadImage("button.png");
  imageMode(CENTER);
}

void draw()
{
  background(50, 50, 50);

  tint(255, 255, 255);
  image(img_button, width/2, height/2);
}

ダウンロードして利用して,Processingの作業画面にドラッグアンドドロップしてください.

ボタンの色と背景色を同じにしてみよう

ボタンが見えなくなります.これではどこがボタンかわからず,ユーザはボタンを知覚できません.

背景色のボタンに少しだけずらした黒色ボタンを描いてみます.

ボタンにライティングがされたような結果となり,凹凸のあるボタンと視認できるようになりました.では影を動かす位置を上下に変更して,その結果を確認してみましょう.

通常は凹状態から,クリックした時のみ凸状態にボタンを変更する

PImage img_button;

void setup()
{
  size(600, 400);
  img_button = loadImage("button.png");
  imageMode(CENTER);
}

void draw()
{
  background(50, 50, 50);

  if(width/2 - img_button.width/2 < mouseX &&  mouseX < width/2 + img_button.width/2 &&
    height/2 - img_button.height/2 < mouseY && mouseY < height/2 + img_button.height/2 &&
    mousePressed == true ) {
     tint(0, 0, 0);
    image(img_button, width/2, height/2-2);
  }
   else{
    tint(0, 0, 0);
    image(img_button, width/2, height/2+2);
   }

  tint(100, 100, 100);
  image(img_button, width/2, height/2);
}

セブンカフェUIをつくる

Paper Prototypingの回ではセブンカフェUIを題材に実際に紙面上にUIを構成し,簡単なユーザアンケートを行ってみました. 今回はソフトウェアプロトタイピングを利用し,ユーザビリティ評価だけでなく動作感も体験可能なプロトタイプを作成してみます. まずはプログラムファイルをProcessing上にコピー&ペーストし,6点の画像ファイルもProcessing作業フォルダにコピーして実行してみましょう.

セブンカフェUIをソフトウェア画面上で配置する

PImage img_hot_regular;
PImage img_hot_large;
PImage img_cold_regular;
PImage img_cold_large;
PImage img_info_hot;
PImage img_info_cold;

void setup()
{
  size(1000,600);
  img_hot_regular = loadImage("button_regular.png");
  img_cold_regular = loadImage("button_regular.png");
  img_hot_large = loadImage("button_large.png");
  img_cold_large = loadImage("button_large.png");
  img_info_hot = loadImage("info_hot.png");
  img_info_cold = loadImage("info_cold.png");
  imageMode(CENTER);
}

void draw()
{
  background(100,100,100);

  tint(0, 0, 0, 255);  
  image(img_hot_regular, 400, 200);
  image(img_hot_large,   600, 200);
  image(img_cold_regular, 400,450);
  image(img_cold_large,  600, 450);
  
  image(img_info_hot, 500, 100);
  image(img_info_cold, 500, 350);
}
info_hot.png

info_cold.png

button_large.png
button_regular.png

下記プログラムを参考にして,各ボタンを押したら赤色/青色になるようにプログラムを変更してください.

PImage img_hot_regular;
PImage img_hot_large;
PImage img_cold_regular;
PImage img_cold_large;
PImage img_info_hot;
PImage img_info_cold;

int x_hot_regular = 400;
int y_hot_regular = 200;
int x_hot_large = 600;
int y_hot_large = 200;

int x_cold_regular = 400;
int y_cold_regular = 450;
int x_cold_large = 600;
int y_cold_large = 450;

int x_info_hot = 500;
int y_info_hot = 100;
int x_info_cold = 500;
int y_info_cold = 350;

void setup()
{
  size(1000, 600);
  img_hot_regular = loadImage("button_regular.png");
  img_cold_regular = loadImage("button_regular.png");
  img_hot_large = loadImage("button_large.png");
  img_cold_large = loadImage("button_large.png");
  img_info_hot = loadImage("info_hot.png");
  img_info_cold = loadImage("info_cold.png");
  imageMode(CENTER);
}

void draw()
{
  background(10, 15, 17);

 
  if (x_hot_regular - img_hot_regular.width/2 < mouseX && mouseX < x_hot_regular + img_hot_regular.width/2 &&
    y_hot_regular - img_hot_regular.height/2  < mouseY && mouseY < y_hot_regular + img_hot_regular.height/2 &&
    mousePressed == true ) {
    tint(250, 130, 140, 255);
  }
  else{
    tint(255, 255, 255, 255);
  }
  image(img_hot_regular, x_hot_regular, y_hot_regular);
  
  tint(255, 255, 255, 255);  
  image(img_hot_large, x_hot_large, y_hot_large);
  image(img_cold_regular, x_cold_regular, y_cold_regular);
  image(img_cold_large, x_cold_large, y_cold_large);

  image(img_info_hot, x_info_hot, y_info_hot);
  image(img_info_cold, x_info_cold, y_info_cold);

  
}

参考

上記のプログラム練習に加えて,違和感があるユーザへのフィードバックとして誤った色使いや,背景の無意味な変化, おかしなフィードバック呈示箇所等を実際に作成してみる

音を鳴らす

ボタンを押すことが出来るようになりましたが,実際にボタンを押す際,音の設計も必要になります.そこでいくつかの音色を試して,プリミティブな視覚と聴覚の関係性を体験してみます.まずはProcessing側で音声ファイルを再生するプログラムを記述する必要があります.

Soundライブラリのインストール

「Procesingメニュー」→「スケッチ」→「ライブラリをインポート」→「ライブラリを追加」を開き,検索窓にsoundと入力します.すると幾つか関連するライブラリが表示されますが,このなかで,Sound という名前のライブラリをインストールしてください.

ボタン押下と音の再生.音声ファイルをダウンロード

import processing.sound.*;
SoundFile sound_button;
PImage img_button;

void setup()
{
  size(600, 400);
  img_button = loadImage("button.png");
  imageMode(CENTER);

   sound_button = new SoundFile(this, "button.aif");

}

void draw()
{
  background(50, 50, 50);

  if(width/2 - img_button.width/2 < mouseX &&  mouseX < width/2 + img_button.width/2 &&
    height/2 - img_button.height/2 < mouseY && mouseY < height/2 + img_button.height/2 &&
    mousePressed == true ) {
     tint(0, 0, 0);
    image(img_button, width/2, height/2-2);
  }
   else{
    tint(0, 0, 0);
    image(img_button, width/2, height/2+2);
   }

  tint(100, 100, 100);
  image(img_button, width/2, height/2);
}

void mousePressed()
{
  sound_button.play();
}

ボタン押下と音の再生その2(音声ファイル無しで作成)

import processing.sound.*;
PImage img_button;
SinOsc sine;

void setup()
{
  size(600, 400);
  img_button = loadImage("button.png");
  imageMode(CENTER);

  sine = new SinOsc(this);
  sine.amp(1.0);
  sine.freq(2000);
}

void draw()
{
  background(50, 50, 50);

  if(width/2 - img_button.width/2 < mouseX &&  mouseX < width/2 + img_button.width/2 &&
    height/2 - img_button.height/2 < mouseY && mouseY < height/2 + img_button.height/2 &&
    mousePressed == true ) {
     tint(0, 0, 0);
    image(img_button, width/2, height/2-2);
  }
   else{
    tint(0, 0, 0);
    image(img_button, width/2, height/2+2);
   }

  tint(100, 100, 100);
  image(img_button, width/2, height/2);
}

void mouseClicked()
{
  sine.play();
  delay(100);
  sine.stop();
  delay(100);
  sine.play();
  delay(100);
  sine.stop();
}

課題

これまでの上記プログラムを基に,ボタンを押した際に視覚と聴覚のフィードバックを持つセブンカフェUIのソフトウェアプロトタイプを作成せよ


ハードウェア基礎

ここではArduinoを利用して電子工作の入門を行います.

Arduinoソフトウェアの準備

Arduinoというソフトウェアを利用します.各OSに対応したインストール方法を参考にして各自でインストールを終えてください.Windowsのインストールには必ずWindows Installerをダウンロードしてください.ZIPファイルの方ではありません.Installerを利用してインストールを行う際,インストールオプションにすべてチェックをいれてください. 無事にインストールが終わったら,ExampleのBlinkプログラムを動作せさて,プログラムが書き込めるか確認します. 抵抗値を計算する
float V;
float I;
float R;

V = 5.0;
I = 0.02;
R = V/I;

text(R, 10, height/2);
LEDのVfが決まっている時に,LEDに20mA流したい場合のRの計算方法
float V;
float Vf;
float I;
float R;

Vf = 1.5;
V = 5.0;
I = 0.02;
R = (V-Vf)/I;

text(R, 10, height/2);
可変抵抗でのVの値を図示
// V=R*I R:Slider R
float V, V1, V2;
float I;
float R1, R2;
int i;
V = 5.0;
beginShape();
for ( i = 0; i < 10000; i++ ) {
  R1 = i;
  R2 = 10000-i;
  I = 5/(R1+R2);
  V = R1*I;
  vertex(width*i/10000.0, 10+V/5.0*height);
}
endShape();

Arduino

Arduinoを利用して,簡単な電子回路をブレッドボード上に作ってみます.Arduinoの利用にはドライバが必要になる場合があります.次を参照して,適時自分の環境に合わせてドライバをインストールしましょう.

  1. MacOSXでArduino Unoを利用する場合:ドライバのインストール必要なし
  2. 上記以外,ドライバインストール必要あり
2番に当てはまる場合
  • Windowsの場合
    ArduinoのダウンロードページからWindows Installerをダウンロード後,それを実行してください.するとインストールオプションが表示されるので,USB Driver,Associate .ino.. 項目にチェックをし,インストールを行って下さい.
  • MacOSXの場合
    ArduinoのダウンロードページからMac OSX用のアプリケーションをダウンロードする.次にFTDI DriverのウェブサイトからMac OS X最新版のドライバをダウンロードして下さい.32bit, 64bitのどちらでも構いません.パッケージのインストールの際「署名のないアプリケーション」等と表示されてインストール出来ない場合は,システム環境設定→セキュリティとプライバシー→一般 の設定を開き,ダウンロードしたアプリケーションの実行許可について,すべてのアプリケーションを許可に変更した後,再度アプリケーションのインストールを行って下さい.
  • ハードウェア基礎:音と光

    Arduinoのtone関数を用いると指定した周波数の振動を任意のピン番号で実行できます. 一般的に鳴らしたいメロディがあるときに,周波数を指定するのは,ユーザにとって解りやすいインタフェースでしょうか? ここで,fを周波数,nをfに対応する鍵盤位置とした場合,fとnは次の式にて表せます.なおこれは440Hz(真ん中のラの音)を 基準に計算をしています.

    f = 440 · 2 n - 69 12

    となり,これを両辺自然対数をとり,nについて計算すると

    n = 12 · log f 440 log 2 + 69

    となり,これを計算することで,任意の周波数の値からノート番号(鍵盤位置)に割り振ることができます.

    ProcessingとArduinoの連携

    ここまでの知識を踏まえ,最後にArduinoとProcessingをシリアル通信を用いて連携してみます. 例えばArduinoとCDSでユーザの手のかざし具合に応じてスピーカーの音高を制御しました.センサ部品の値を 直接Arduinoが読み込む場合は,これで問題無いですが,例えばPC側からデータを取得し,Arduinoに利用したい場合 もあると思います.または,その逆で,Arduinoで取得したセンサデータをPCに取り込みたい場合があるかと思います. そのような場合,一般的にはシリアル通信を利用します.

    まずはArduinoに付属のシリアルモニタを利用して,シリアル通信の様子を観察してみます.

    Arduinoのコード
    void setup()
    {
      Serial.begin(9600);
      pinMode(2, OUTPUT);
    }
    void loop()
    {
      if( Serial.available() > 0 ){
        int note = Serial.read();
        int f = 440*pow(2,(note-69)/12.0);
        tone(2, f, 50);  
      }
    }
    
    Processingのコード
    import processing.serial.*;
    Serial arduino;
    void setup()
    {
      println(Serial.list());
      size(500,500);
      
      // "/dev/tty.usbmodem1411"については各自環境に合わせて書き換えて下さい
      arduino = new Serial(this, "/dev/tty.usbmodem1411", 9600);
    }
    void draw()
    {
      int note = (int)map(mouseY,0,height,0,88);
      arduino.write(note);
      println(note);
    }
    

    CDSで画面背景色を変更する

    Arduino
    void setup()
    {
      Serial.begin(9600);
    }
    void loop()
    {
      int a = analogRead(0);
      a = map(a, 0, 1023, 0, 99);
      Serial.write(a);
      delay(30);
    }
    
    Processing
    import processing.serial.*;
    Serial arduino;
    
    void setup()
    {
      // "/dev/tty.usbmodem1421"については各自環境に合わせて書き換えて下さい
      arduino = new Serial(this, 
      "/dev/tty.usbmodem1421", 
      9600);
    }
    
    void draw()
    {
      if( arduino.available() > 0 ){
        float a = arduino.read();
        a = map(a, 60, 90, 255, 0);
        background(a);
        println(a);
      }
    }
    

    デジタルファブリケーション

    科学技術・学術政策研究所 科学技術動向研究センターによる報告を読み, デジタルファブリケーションに関する基礎知識を身につけます.

    三次元に層を重ねて物体を製造する積層造形を利用する三次元(3D)プリンタが、デジタル&パーソナルファブリケーションツールとして注目されている。従来のものづくり手法と異なり、デジタルデー タを基に一体的に 3D 形状が作製できることから、製造の大幅な低コスト化、あるいはオープンソース を利用した製造のイノベーションが期待されている。近年、欧米を中心に、このデジタルファブリケー ションを製造業や教育に展開する政策が推進されている。 デジタルファブリケーションでは、デザインとプロセスを一体化・融合することで、新たな発想によ るものづくりが実現できる可能性がある。今後、基幹となる付加製造技術の高精度化、高スループット 化、材料の多様化のための研究開発と併せて、アイデア創出のためのデザインとプロセスの研究者・技 術者の融合の場の提供や、人材育成の観点からの市民や子供たちへの教育・啓発のための施策も、将来 に向けたデジタルファブリケーションの進展のために有効である。
    1. Neil Gershenfeld
    2. 田中浩也


    特別講義

    1. 2015年7月21日:作品制作とプロトタイピング(講師:藤木淳,中安翌)
    2. 2015年7月1日:音楽プロトタイピング(講師:樋口聖典,太陽)
    3. 2014年6月21日:音楽プロトタイピング(講師:樋口聖典)


    最終課題

    身の回りにあるインタフェースにおけるデザイン問題を指摘し,改善策を提案してください.またはすでに解決済みデザイン事例も可とします.

    • 対象物の写真を入れること
    • 問題点と改善策を文章で記入すること

    提出方法
    電子メール
    宛先:baba@tmu.ac.jp
    件名:プロトタイピング基礎2014
    内容:名前,学習番号
    添付ファイル:[学習番号][名前].pdf
    例:01234284馬場哲晃.pdf
    

    Copyright (c) 2015 Tetsuaki BABA all rights reserved.