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

UI紹介

プロジェクタ

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

インナーイヤホン

色んなイヤホンがあって、用途や環境によって使い道が違う。
音質はいいけど雑踏の中では聞きづらい。普通の方が聞きやすい。

注射器

感染症を防ぐ注射器
http://www.design.frc.eng.osaka-u.ac.jp/PKD/index.html

この５分くらいから

小銭入れ

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

トラックボールマウス

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

ワークショップ

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>

輪講

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

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

クーラーを２０度にしてすぐ冷やす。換気扇の時の換気。思い込み。
錯覚はからくりを知っても錯覚する。錯覚を利用すべき。

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

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

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

早合点する。
サービスは楽観的に。ソースコードは悲観的に。

人間の思考と説明の性質

原子力発電所の事故。人の気持ちになるとイライラしない。
実力よりも運がよかったと思う。@agata @brazil

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

お弁当の例 @agata

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

脳の話

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

人が思っているのがメンタルモデル(イメージ)。絵を描いて説明できるのが概念モデル。
名言「お前のメンタルモデル間違ってるよ。」

議事録

詳細な議事録はぬーらぼさんの新システムで取ってます。
今のところtenjin.web/ui/の参加者の方だけ見れます。

談話

基礎って大事？

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