UX技術部会成果発表
交通切符販売機の改良へのUXデザインプロセスの実践
2014年 9月 25日
先端IT活用推進コンソーシアム
ユーザーエクスペリエンス技術部会
原 孝治
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

自己紹介
原 孝治
株式会社ディーディーエス システム部 所属
AITC UX技術部会サブリーダー
AITC 運営委員（渉外・広報WG）
https://www.facebook.com/harakoji.net

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

アジェンダ• なぜ交通切符販売機なのか• UXデザインプロセスの実践• NUI交通切符販売機

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

3

交通切符販売機とはCopyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

4

交通切符販売機

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

5

昔Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

6

定期 or 切符

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

7

定期区間以外は切符を買っていた

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

8

交通切符販売機のユーザー延べ人数

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

9

日ごろ電車に乗る人

あまり電車に乗らない人Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

10

今Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

11

オレンジカード
イオカード等を経てCopyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

12

（念のため）Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

13

SuicaPASMO
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

14

切符を買う必要がない
料金を見る必要がない

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

15

参考 私の場合• 定期はPASMOで、チャージしているので、定期券外でも切符は買わない• Suicaはクレジットカード付きでオートチャージなので、チャージのために切符販売機を使うことすらない

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

16

交通切符販売機で切符を買う人

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

17

日ごろ電車に乗る人

あまり電車に乗らない人
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

18• 今、交通切符販売機を使用するのは、日ごろ、その電車に乗らない人なのではないか？
• 普段は自動車を使用している• 観光• ビジネスでの出張• 冠婚葬祭• などなどCopyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

19日ごろ電車を使用しないユーザーの視点で見てみる

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

20

交通切符販売機（どれ？）Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

21運賃表（目的地はどこ？）

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

22駅名順運賃表（見えない）

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

23運賃表（見つからない）

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

24券売機（どこを押すの？）

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

25

デフォルト表示（値段知らない）

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

26駅名検索画面（読み方は？）Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

27

静岡鉄道

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

28

静岡鉄道（駅名を記載）

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

29静岡鉄道（駅名を表示）

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

30

まとめ• 今の交通切符販売機は、慣れていれば、問題なく使える• しかし、慣れている人は、あまり使わない• 慣れていない人ほど、使う必然性が高い• にも関わらず、今の交通切符販売機のデザインは、普段電車にのらない人に向けられていないのでは？

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

31

UXデザインプロセス

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

32

UX開発プロセスについて

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

33

ユーザーの体験をデザインする

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

34

その体験を実現するための機能、UI、システムを作る

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

35

UXデザインプロセスの実践

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

36ユーザーの体験をデザインするための準備• ペルソナ• エンパシーマップ• カスタマージャーニーマップ• 課題、アイデアのグルーピング（色々な手法があります）

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

37

ペルソナの作成

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

38

エンパシーマップの作成

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

39

エンパシーマップ
欲していること恐れていること考えていること見えるもの
聞こえること言っていること

していることCopyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

40

欲していること・見えるもの

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

41

カスタマージャーニーマップ

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

42

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

43

問題定義

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

44アクティビティ

券売機を探すインタラクション

表示を探す

切符を買う
値段を調べる

券売機

お金を入れる
値段表

ボタンを押す
切符を受け取る

感情の起伏
操作感が悪いとイライラする

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

行き先が探しにくい45

発生する問題• 料金が分かれば切符は買える• 駅までの料金が分からない• 運賃表から駅を探せない• 駅の路線名がわからない• 駅の位置が分からない• 駅の読み方が分からない

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

46

課題とアイデアをグルーピング

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

47

交通切符販売機の課題

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

48

プライド
• 駅員に聞くのが恥ずかしい• 地名が読めない→聞きにくい• 待っている人が気になる• 検索性が悪いのに人が多くてゆっくり調べられない

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

49

運賃表
• 運賃を忘れる• 料金表を見てから買うまでに忘れる• 運賃表・駅一覧・画面が離れている• 料金表と入力画面が遠い• 表が遠い・文字が読めない• 運賃表の字が小さい• 料金表の文字が小さい

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

50

検索方法
• 目的の駅が出ない• 駅名サーチ使いにくい• 検索できない• 選択できない文字も押せる• 文字入力のサジェストがない

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

51

路線中心（特に乗り継ぎ）• どう乗り換えたらいいかわからないのに乗り換え方法を選択する必要がある• 駅・料金表が途中までしか乗っていない• 乗換えが入ると操作が複雑• どの路線図が出ているか探しにくい• 路線の色を知らない

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

52

金額中心インターフェース• 金額を探さないと操作できない• 値段しか書かれていないボタン• 金額だけでどこまでいけるかわからない

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

53

操作性
• 機能選択のボタンがわかりづらい• メニューが分かりにくい• サブメニューに意識が向かない• 一つ前に戻り方がわからない• 券売機の反応が鈍い• 反応がにぶい• 手数が多い• 購入までのステップが多すぎる• 「連絡線」がわからない

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

54券売機の種類• 券売機に種類がある• どの券売機を利用するのかわからない• 券売機が路線ごとにばらばら• 地域。国によってインターフェースが違う・慣れていない

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

55

解決するアイディア

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

56

音声• 音声IFで操作• タクシー・人との会話• 音声入力• 音声出力Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

57

路線• 料金表・券売機で地図を表示• 運賃表表示・拡大できるようにする• 運賃表・駅名の分かりやすいソート（色など）• 料金・路線統合

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

58

駅コード
• 駅コードによる入力• 駅コードで検索※ 駅番号、駅コードといったナンバリングが実在するが、ここでは抽象度の高い議論として、駅に振られた一意のコードの利用について検討した

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

59駅を見つける機能を分離する• 駅を見つける機能を分離できないか

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

60

インクリメンタルサーチ• インクリメンタルサーチで駅を見つけやすくできないか

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

61

UI改善
• 操作性・クリック感の提示• 手書き入力• 操作がないときにHintを表示• 操作性・キーボードの種類が選べる• 料金ボタンに駅名を表示• 金額にどこまでいけるかアシスト表示• 金額投入と操作開始でメニューを変える

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

62

新しいUI• 目的地をスキャン• 駅名をカメラ認識• QRコード的な、紙から読み込み• グーグルマップ＆グーグルウォレットを連携

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

63支払い方法• クレジットカードでのれる• おつり・途中下車プリペイド

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

64

ストーリーボード
ユーザーの体験を表現

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

65

後ほど登場します

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

66

デザイン

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

67

NUIを使って解決

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

68モーションコントローラ

Leap Motion
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

69

Leap Motion

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

70アイトラッキングセンサー

Eye Tribe
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

71

Eye TribeCopyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

72

アクティングアウト

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

73

言語の選択Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

74

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

75

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

76

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

77駅名ツールチップ

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

78

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

79

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

80

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

81

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

82

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

83

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

84

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

85

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

86

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

87駅名検索機能Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

88

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

89

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

90

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

91

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

92

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

93

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

94路線検索機能Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

95

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

96

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

97

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

98Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

99

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

100

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

101

ストーリーボード
ユーザーの体験を表現

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

102マンガを使うことでCopyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

103ストーリーボード（マンガ）• 利用シーンがわかる• 感情表現ができる• ユーザーを想像できる• 絵を描くのは時間がかかるということであれ
ば、マンガ作成ツールが便利• 画面を表示しないことで、抽象度の高い要求を表現できる

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

104

ストーリーボード（マンガ）• アクティングアウトで使うと• 背景が分かる• 小道具の不足を補える• セリフが聞き取れない場合に、文字が表示されている• プレゼンテーション資料に残すことができる

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

UX部会とNUI部会• ユーザーの体験をデザインする対象として、新しいデバイス、インターフェースを使って考えてみる• 新しいデバイスを使用すると、そのUXは、これまでと全く違うものになるのでは？
• NUIと合同で部会を開催し、その可能性を探求

Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.

最新情報はこちらをご参照ください
http://aitc.jp
https://www.facebook.com/aitc.jp
ハルミン
AITC非公式イメージキャラクター
Copyright © 2014 Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved.