インターフェイスの世界の言語

サービスの構造分析第1章インターフェイスの世界の言語

2016.08.01 Tomohiro Suzuki

イントロダクション

02

03

自己紹介

Tomohiro SuzukiUXデザイナー

- 受託でワークショップしながら進めたり、戦略考えたりする人- デザイナー 6年目- DTP→新聞社→スタートアップ→Standard

04

本資料の目的

仮定デザイン行為に意味が存在し、コミュニケーション（言語化して伝達）ができると仮定するならば、言語レベルでの構造化が可能なのではないかという仮説の元、研究を進めており、それの報告書となります。また、本資料では入り口として物質的かつデジタル的なインターフェイスでの例を扱っています。

エキスパートからのレビュー本資料の内容、および今後の研究についてより専門的知識を持つ人からの意見を頂くために、資料化しています。是非批評を頂ければと思います。

05

留意事項

アプリケーションでの限定本資料では理解のために、シンプルなタスクとして説明のしやすいモバイルアプリケーションを対象として、各事例で扱っていきます。

UIとインターフェイスの使い分けユーザーによるコンテキストの変化の影響を考慮しない部分を主に扱うことになるため、人間中心のインターフェイス設計と区別するために、以後UIという語は用いず、インターフェイスという用語を使用します。

名詞としての分類

06

07

我々が用いるインターフェイスという用語は何を示しているのか

インターフェイスの認識

我々が普段の会話で示すインターフェイスという記号は、何に対して用いられているのでしょうか。接触面をいったい何だと認識して使い分けているのでしょうか。

インターフェイス

インターフェイスの領域インターフェイスではない何か

認識の壁

意味①


意味②

???

意味③

???

意味④

08

アプリケーション

09

画面郡

10

画面

11

コンポーネント ※複数のグラフィックの集合体としての意味なので、「パーツ」「エレメント」「モジュール」などの単語の場合もありますが、本資料ではコンポーネントとして統一します。

12

画像

13

図形

14

Safari search now includes Spotlight Sugges-tions from the Internet, iTunes, App Store, movie showtimes, locations nearby, and more.You can change this in Settings.

テキスト

15

日常会話例


「最近見つけていいと思ったUIのアプリない？」

画面群

「メルカリで購入する時のUIみたいにしてよ」

画面

「SmartNewsの記事の一覧のUIって、ニュース系のアプリの中でも特殊だよね」

コンポーネント

「そこのタブはもっと大きくて押しやすいUIにしてもいいんじゃない」

UIデザイナーが集まると、毎回こんな感じの会話を耳にしませんか？

16

画面群


画面


画像

図形

テキスト

認識しやすい領域

認識の壁

認識しにくい領域

（意識せずとも自然と言語化して通じる）

（日常ではデザイナー同士の会話でもインターフェイスではなく、別の∨を用いて認識・表現されている）

認識の境界線

コンポーネントとその構成要素との間に認識の境界線が存在。

17

名詞としての分類

インターフェイスの表記は、下記のように4種類の意味で用いられており、その意味を我々は会話のコンテキストに応じて理解し、判別して使用。




画面群


画面



18

動詞の作用と関係構造

19

20

インターフェイスは何を成すために存在するのか

抽象

（設計としての）行為

具体

概念整理


画面群

画面


存在目的

構成物

設計対象

まずは先ほどの4種類のインターフェイスという語が示す対象を元にして、それぞれがどのような関係性をもって存在しているかを整理。

21


存在目的アプリケーションを通して得られる結果のため

経験に必要なタスク

構成物画面群の集合体

設計対象

22

画面群

存在目的経験に必要なタスクを成すため

タスクに必要なアクション

構成物

画面の集合体

設計対象

23

画面

存在目的タスクに必要なアクションを成すため

アクションに必要なジェスチャ

構成物

コンポーネントの集合体

設計対象

24


存在目的アクションに必要なジェスチャ

ジェスチャに必要な視覚情報の結合

構成物- 画像- 図形- テキスト

設計対象

25

アプリケーションを通して得られる結果のため

経験に必要なタスク画面群の集合体

存在目的構成物設計

タスクに必要なアクションを成すため



アクションに必要なジェスチャを成すため


- 画像- 図形- テキスト

概念整理


画面群

画面


経験に必要なタスクを成すため

タスクに必要なアクション画面の集合体

26

目的構造

一時的な経験とは、それを構成するタスク以下がインターフェイスを通して得られた実体験をユーザーを通して変換された結果。

経験（一時的）

タスク

アクション

ジェスチャジェスチャ

アクション


タスク

アクション


アクション


ユーザー

インターフェイスを目的に発生する行為

インターフェイスを目的に発生しない行為

27

物的情報の生成

目的達成のために必要となる作用の設計過程の結果、物的情報としての画面、またはそれを構成する視覚的にも確認できる存在が生成される。

画面群が生成

画面が生成

コンポーネントが生成

経験（一時的）

タスク

アクション


アクション


タスク

アクション


アクション


ユーザー

インターフェイスを目的に発生する行為

インターフェイスを目的に発生しない行為

28

had been V（Verb）

経験について

アプリケーションでの経験 = 一時的UX（Momentary User Experience）

経験 = 「過去」に「した」こととして分解

完了形を削除した場合に残るのは「動詞」であり、その動詞の一部はインターフェイスを通して経験することとなる。

have been

語幹

V（Verb）

た（活用語尾）※必ずしも過去・完了のみを表すものではないが本資料では省略

ラテン語文法

日本語文法

29

記号変換




画面群


画面



経験（一時的）タスクアクションジェスチャ

先にまとめた4種類の分類に基づき内容を行為（動詞）へと変換。

表現

内容

行為

30

料理する移動する

宿泊する食べる

釣る転職する

撮影する描く

録画する観る

計算する確認する

連絡する購入する

作成する検索する

加工する投稿する

タップするスワイプするドラッグする

動詞変換とサンプル

経験レイヤー

タスクレイヤー

アクションレイヤー

ジェスチャレイヤー

各レイヤーに使用される動詞で分類すると下記のような構成になります。

インターフェイスが直接的に関わる世界

インターフェイスが間接的に関わる世界

31

動詞変換とサンプル

家計簿作成初心者が、収支を管理する。

タクヤは残金を管理するために、まずは今月の給料を登録する。支出が発生した時には、レシートを撮影するだけで、

アプリに記録することができる。

タクヤはアプリ内のカメラアイコンをタップし、レシートをカメラの範囲に収め、撮影ボタンをタップする。撮影が完了したレシートは、自動でスキャンが完了し、

使用した金額をアプリに記録することができる。32

シナリオへの活用と分類

33

価値活動操作

バリューシナリオアクティビティシナリオインタラクションシナリオ

抽象的具体的

構造化シナリオについて

ユーザーの要求事項の抽出に基づき、価値、活動、操作の各レイヤーでユーザーにとっての理想的となるシナリオを書き出す手法。

34

シナリオ構造

バリュー

アクティビティ

インタラクションインタラクション

アクティビティ

インタラクションインタラクション

シナリオの構造について考えると、単一のバリューシナリオから複数のアクティビティシナリオ、その下にインタラクションシナリオが存在する構造が伺える。

35

バリュー活用

アクティビティ活用

インタラクション活用

構造化シナリオによる動詞分類

料理する連絡する

宿泊する食べる

撮影する描く

録画する観る

連絡する購入する

作成する検索する

タップするスワイプする

経験レイヤー

タスクレイヤー

アクションレイヤー

ジェスチャレイヤー

経験動詞

インターフェイス動詞

36

動詞の分類

バリュー活用アクティビティ活用


経験動詞インターフェイス動詞

インターフェイスを目的としない活用形インターフェイス上での行為を目的とする活用形

インターフェイス上でのジェスチャを表す活用形

1, vVのためにaVする2, aVのためにiVする

バリュー活用=vV,アクティビティ活用=aV,インタラクション活用=iV と仮定した場合の文章構造

※ バリュー活用以外の経験動詞の分類については次章にて記述

37

動詞の分類指標βの作成

i) 目的語=X,動詞=V と仮定した場合の基本構文

ii) 上記XとVに文脈で使われる目的語と動詞を代入

[X] を/に/と [V] する

バリュー活用

Xは現実世界に存在する物/概念 Xはデータ世界に存在する物/約束事/概念

動詞によってはバリュー活用、アクティビティ活用の両方として存在することもあるため、目的語を当てはめた場合の文脈により判断。

アクティビティ活用

※ インタラクション動詞は数が少なく、動詞単体で判断できるため除外

38

代入例サンプル

解除する [パスワード] を [解除する] アクティビティ活用

行く [オフィス] に [行く] バリュー活用

加工する [写真] を [加工する] アクティビティ活用

消す [火] を [消す] バリュー活用

[メール] を [消す] アクティビティ活用

[送付先] を [選ぶ] アクティビティ活用

選ぶ [家具] を [選ぶ] バリュー活用

39

既存動詞の分類

https://docs.google.com/a/standardinc.jp/spreadsheets/d/1YKXsOCwWZgvGzWpTF4XllbjuAuD0ebqw83Agd5ToKmA/edit?usp=sharing

バリュー活用とアクティビティ活用の両方に適用できる動詞は黄色で記述

40

UI Flowsへの活用と概念整理

41

ワイヤーフレームの情報分解

12:24 AM

Download Files

awesome_file.pdf 12.3Mb



awesome_file.pdf 12.3Mb12.3Mb



位置情報- 存在位置による意味の付与

形状情報- 記号抽象化

色彩情報- 2色以上の意味の付与

知覚補助コンポーネント- 操作はできずトリガーとフィードバックのインタラクションを補助するための要素

操作コンポーネント- 画面に存在しなくては成り立たない要素効果

効率

42

UI Flowsについて

37signalsによって作られた、シナリオを元にユーザーが見るもの/することに分解することで、行為から視覚情報を生成するフレームワーク

43

ユーザーが見るもの

ユーザーがすること

ユーザーが見るものユーザーが見るもの

ユーザーがすること①

ユーザーがすること②ユーザーが見るもの

UI Flowsの記法

アクティビティ型UI Flows


アクティビティ活用動詞

インタラクション型UI Flows



44

メール一覧

メールを選択

メール詳細

返信をタップ

転送をタップ

テキストフィールド

転送先選択

UI Flowsの記法

45

アプリケーションを通して得られる結果のため

経験に必要なタスク画面群の集合体

存在目的物的存在設計

タスクに必要なアクションを成すため



アクションに必要なジェスチャを成すため


- 画像- 図形- テキスト


画面群

画面


経験に必要なタスクを成すため

タスクに必要なアクション画面の集合体

概念整理

構造化シナリオUI Flows

UI Flows

46

形容詞による品質向上

47

品詞とユーザビリティ

先までの動詞による構造化は効果を成立させるための条件であるが、効率を向上させるためには形容詞、形容動詞による言語化が必要。

効果

効率

満足度

概念品詞コンポーネントへの影響

0→1

1→100

動詞- 操作コンポーネント- 知覚コンポーネント

- 位置情報- 形状情報- 色彩情報

形容詞

48

影響を与える情報

形容詞の相対性

動詞に比べ形容詞は認識の違いに差異が発生するという特徴があるため、ユーザー調査による定性的、定量的な定義が必要。

動詞

形容詞

AA

CB - 言語- 文化- 宗教- 社会- 経済

- 経験- 身体的特徴- 感情- 感覚- 性別

- 年齢- 職業- 空間- 時間- 調査方法

※ 本資料では形容詞、形容動詞をあわせて形容詞として明記しています。

49

形容詞の対称性

形容詞よっては相対的に反対の意味をもたらす対義語が存在する（動詞に比べ対義語の単語数が多く存在することも特徴）。

大きい小さい

古い新しい

浅い深い

高い低い

高い安い

固い柔らかい

長い短い

明るい暗い

早い遅い

薄い濃い

50

形容詞の対象性

形容する対象の存在と、形容する状態の軸により、下記のように分類することができ、本資料では主にインターフェイスに関係する部分を扱う。

性質・状態

人

概念

物質

感情対象

状態

経験形容詞

インターフェイス形容詞

51

形容詞の与える影響

ゴールが同じ動詞であっても、形容詞の性質によって価値が変化する。

目的地に確実に辿り着く。目的地に適当に辿り着く

52

インターフェイス内での分類　

インターフェイスに影響を与える形容詞では、下記のような分類ができ、それぞれインターフェースの性質や存在に影響を与える。

色彩形容詞色彩印象形容詞

色彩直接形容詞

形状形容詞

程度形容詞

色情報

形状情報

画面群、画面、コンポーネントの存在

53

インターフェイス形容詞の分類

https://docs.google.com/spreadsheets/d/1YKXsOCwWZgvGzWpTF4XllbjuAuD0ebqw83Agd5ToKmA/edit#gid=374031657

程度と色彩印象の両方に適用できる形容詞は黄色程度と形状の両方に適用できる形容詞は緑で記述

54

55

構造化シナリオへの対応

バリューシナリオ

アクティビティシナリオ

インタラクションシナリオ

効果効率満足度

効果型バリューシナリオ

効果型アクティビティシナリオ

効果型インタラクションシナリオ

効率型バリューシナリオ

効率型アクティビティシナリオ

効率型インタラクションシナリオ

インターフェイスへの影響小

大

56

ネクストステップ

57

ネクストステップ

- インターフェイス領域　- ナビゲーション構造と言語　- 他品詞の影響　- デバイス依存型言語の構造化　- インターフェイスパターンと判断言語の構造化

- ユーザー体験領域　- 課題品詞と解決品詞の分類による定性的課題の特定方法の確立　- 経験に関する形容詞の分類

参考文献

池上嘉彦（1984） - 記号論への招待 http://amzn.to/1UUoY2F

クラウスクリッペンドルフ（2009） - 意味論的転回―デザインの新しい基礎理論 http://amzn.to/1gpUiDD

内田樹（2012） - 街場の文体論 http://amzn.to/1OdIcw3

S.I.ハヤカワ（1985） - 思考と行動における言語 http://amzn.to/1NCbrZe

田中克彦（1993）- 言語学とは何か http://amzn.to/1UUqe5X

小林重順（1995） - 配色イメージワーク http://amzn.to/1FM53qs

レトリックの記号論（1993） https://goo.gl/suhqJ2

細川英雄（1989） - 現代日本語の形容詞分類について http://goo.gl/I25DNR

原沢伊都夫（2010） - 心の状態を表す動詞の再分類 http://goo.gl/1hfMti

野口良平 - イコン・インデックス・シンボル ― 概念再定義への試み http://goo.gl/AKMc2F

UX INSPIRATION!(2014) - サービスデザイン方法論2014 第5回：構造化シナリオ法レポート http://goo.gl/PGBrsY

REFLECTION （2014） - 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール http://goo.gl/tBwUIp

58

インターフェイスの世界の言語

Design

Transcript of インターフェイスの世界の言語