第2回ユーザーインターフェース勉強会に参加してきたよ

第2回ユーザーインターフェース勉強会に参加してきたよ

Table of Contents

UI紹介

プロジェクタ

ぬーらぼさんで使っているプロジェクタ。簡単に使えるので使いやすい。

f:id:re_shikajiro:20091004134048j:image

インナーイヤホン

色んなイヤホンがあって、用途や環境によって使い道が違う。

音質はいいけど雑踏の中では聞きづらい。普通の方が聞きやすい。

f:id:re_shikajiro:20091004132700j:image

注射器

感染症を防ぐ注射器

http://www.design.frc.eng.osaka-u.ac.jp/PKD/index.html

この５分くらいから

小銭入れ

取り出しやすく、一覧性が高い。

f:id:re_shikajiro:20091004135448j:image

トラックボールマウス

慣れると普通のマウスより使いやすい。

f:id:re_shikajiro:20091004140748j:image

ワークショップ

wiiのUIを自分の得意な実装します。しかはwiiのホーム画面の右下のやつ作りました。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Rotate id="rotate"
   angleTo="{angle}"
   target="{controlbar}"/>
<mx:Zoom id="zoom"
 zoomWidthFrom="1"
 zoomWidthTo="1.2"
 zoomHeightFrom="1"
 zoomHeightTo="1.2"/>

<mx:Style>
ApplicationControlBar {
borderStyle: solid;
borderThickness: 2;
backgroundColor: #e9e2e2;
dropShadowEnabled: false;
}
Button {
highlightAlphas: 0, 0;
fillAlphas: 0.6, 0.4, 0.6, 0.4;
fillColors: #ffffff, #cccccc, #ffffff, #cccccc;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.Button;
[Bindable]
public var angle:int=0;


protected function button_clickHandler(event:MouseEvent):void {
var button:Button=event.target as Button;
button.setStyle("highlightAlphas", [0.4, 0.4]);
rotateBar();
}


private function rotateBar():void {
rotate.end();
rotate.duration=300;
rotate.angleFrom=angle;
if (angle < 180) {
angle+=180;
} else {
angle-=180;
}
rotate.play();
}


protected function button_mouseOverHandler(event:MouseEvent):void {
//Zoom
zoom.target=event.target;
zoom.duration=100;
zoom.play(null, event.type == MouseEvent.ROLL_OUT ? true : false);


//Tooltip
var button:Button=event.target as Button;
button.toolTip="伝言板";


}
]]>
</mx:Script>


<mx:ApplicationControlBar id="controlbar"
y="87"
paddingBottom="0"
verticalAlign="middle"
x="125"
paddingLeft="0"
paddingRight="0"
paddingTop="0"
horizontalGap="20"
cornerRadius="20">
<mx:Canvas width="50"
height="30">
<mx:Button y="4"
x="4"
rollOver="button_mouseOverHandler(event)"
rollOut="button_mouseOverHandler(event)"
cornerRadius="10"
click="button_clickHandler(event)"/>
</mx:Canvas>
<mx:Canvas width="50"
height="30">
<mx:Button y="4"
x="4"
rollOver="button_mouseOverHandler(event)"
rollOut="button_mouseOverHandler(event)"
cornerRadius="10"
click="button_clickHandler(event)"/>
</mx:Canvas>
</mx:ApplicationControlBar>


</mx:WindowedApplication>

輪講

「誰のためのデザイン？」第二章

f:id:re_shikajiro:20091004184326j:image

自分を責めてしまうという誤り
毎日の生活の中の思い違い

クーラーを２０度にしてすぐ冷やす。換気扇の時の換気。思い込み。

錯覚はからくりを知っても錯覚する。錯覚を利用すべき。

間違ったことのせいにしてしまう

思い込み。個人差があるね。可能性の列挙が足りない。

  • 楽観的
    • 悲観的な事を考えたくない。
    • ギャンブルでもうすぐ勝てると思っちゃう。
    • 現実逃避・・・　@agata
  • 悲観的

早合点する。

サービスは楽観的に。ソースコードは悲観的に。

人間の思考と説明の性質

原子力発電所の事故。人の気持ちになるとイライラしない。

実力よりも運がよかったと思う。@agata @brazil

人はどのように作業をするか
  1. ゴールの形成
  2. 意図の形成
  3. 行為の詳細化
  4. 行為の実行
  5. 外界の知覚
  6. 知覚の解釈
  7. 結果の評価

お弁当の例 @agata

  1. お昼の弁当を食べてた。
  2. コロッケがあった。
  3. みそダレがあった。
  4. コロッケをミソにつけて食べた。
  5. その味噌はみそ汁用だった・・・。
  6. 文字が黄色で見えなかった。
実行と評価におけるへだたり

脳の話

  1. 準備
  2. 動かそう(知覚)
  3. 動いた(知覚)
  4. 実施

人が思っているのがメンタルモデル(イメージ)。絵を描いて説明できるのが概念モデル。

名言「お前のメンタルモデル間違ってるよ。」

議事録

詳細な議事録はぬーらぼさんの新システムで取ってます。

今のところtenjin.web/ui/の参加者の方だけ見れます。

談話

基礎って大事？

  • 次に進んだ方が
  • 基礎を学んだ方が