SlideShare uma empresa Scribd logo
1 de 21
On
Desining Interfaces



         2012-06-02

      Noriyo Asano
    noriyo@iaspectrum.net
UX ?
「ユーザーエクスペリエンス(UX)」という⾔言葉葉を
   近頃よく⾒見見聞きするようになりました。

UXといわゆる普通の“体験”との違いとは何でしょうか。

 それは、UXには利利⽤用する対象があるという点です。
          つまりそこには、
   何らかのツール/システム/テクノロジーが
        必ず介在するのです。


             たとえば…
 ⾳音楽を聴くという⾏行行為について考えてみましょう。
⾳音楽を聴くという⾏行行為はもともと
「U」が付かない「X」、純粋な「体験」であると思います。


        何か⾳音楽を聴きながら、

     「私は今、その曲を利利⽤用している」

             とか

       「私は⾳音楽ユーザーである」

    などと思うことは、あまりないですよね。
昔々、すべての⾳音楽は「⽣生演奏されるもの」でした。

  つまり、⾳音楽という形のないものを記録・再⽣生できる媒体
    ー  レコード盤、磁気テープ、CD、MD  などなど  ―
が発明され、録⾳音技術というものが⽣生まれる前の時代のことです。


          ⽣生演奏しかない時代には
       すべての⾳音楽体験は「X」であった。

      しかし、録⾳音技術が⽣生まれたことにより
     そのテクノロジーを利利⽤用するという「UX」が
      ⾳音楽体験の中に含まれるようになった。
たとえば、今では⾳音楽を聴くという「X」の中に、

   Amazonで掘り出し物のCDを⾒見見つける
   iTunesでせっせとプレイリストを作る
  ⾼高級ヘッドフォンで昔の⾳音源を聴き直す

そういうさまざまな「UX」が関わっています。


    その時、⾳音楽を体験する⾃自分は、

  AmazonというWebサービスのユーザー
   iTunesというソフトウェアのユーザー
 ヘッドフォンというハードウェアのユーザー

        でもあるのです。
このように「UX」とは
       さまざまな技術の誕⽣生と進化の中で
   「U」なしの、よりプリミティブな「X」の中に現れ、
時の流流れと共にその構成要素として不不可⽋欠となりつつあるもの。
        私はそんな⾵風に捉えています。


           さて、近頃では…

      こんな⾔言葉葉もいっぱい⽬目につきます。
UI/UX
UIとUX。
  ユーザーインターフェースとユーザー体験。
   その両者は決して無関係ではありませんが
    同等な/並列列なものではありません。

    UI/UXという⾔言葉葉を掲げていながら
  実はそのどちらか⼀一⽅方の話をしているだけ。
   そんな例例も少なくないように⾒見見えます。

   今⽇日の読書会のテーマはUI設計です。
ですから、今⽇日はそれだけに集中したいと思います。

UX設計というまた別の次元の話は、またいずれとして。
ところで、
      私たちは⽇日本語の「技術」ということばを
        ⼆二通りの意味で使うことがあります。




「○○社が開発した
  技術(Technology)は凄いね」


     「このツールを使いこなすにはそれなりの
       技術(Technical ability)が要るね」
技術を扱う私たちUI設計者は、常に


      Technology
        を意識識していますが


   Technical Ability
    の問題にはなかなか⼿手出しできません。

「技能」を向上させる啓発活動や教育といった領領域にまで
        UI設計者が踏み込むことは
    ⾮非常に難しいのが現実であるからです。
Technology
     でも、この両者が歩み寄ってこそ
      ユーザーインターフェースは
      その真価を発揮するのです。



  Technical ability
    テクノロジーを追求するだけでなく
     ユーザーの技能を引き出すこと。

それが、UI設計者に求められるのではないでしょうか。
ユーザーの技能を理理解するために
     ⾏行行動経済学の「⼆二重プロセスモデル」を⾒見見てみましょう。
⼈人間は何かを判断する時、実は2段階の処理理をしているという考え⽅方です。


          問題




         システム1      No
      (直感)による判断が
         正しいか?

                      システム2
           Yes                   No
                   (推論論)による判断が
                     そのエラーを
                      正せるか?

                         Yes



         正解!                     不不正解…
ユーザーの技能は、技術的なスキルだけでなく
    このような判断能⼒力力によっても⼤大きく左右されます。
  操作のたびにいちいちシステム2の処理理を経由させられるUIは
たとえスキルの⾼高いユーザーでも使いにくいものになってしまいます。

          ユーザーの技能を⾼高めるには
     システム1のエラー発⽣生率率率をできるだけ抑えたい。
  つまり、素早く反射的に、難しく考えずに操作できるような
 いわゆる“透明なインターフェース”を作ることが重要になります。


      システム1(直感)     システム2(推論論)


            速い           遅い
         並列列に処理理      順番に処理理
      無意識識的・⾃自動的    管理理されている
       努⼒力力は要らない     努⼒力力を要する
        連想に基づく       規則に基づく
QWAN
そのようなUI設計を⾏行行う上で役⽴立立つのが
   『デザイニング・インターフェース』で⽰示されている
         UIのデザインパターンです。

多くの⼈人にとっての使いやすさ・使い⼼心地のよさといったものには
   何かしら根源的な共通の要素を⾒見見出すことができます。

    建築家クリストファー・アレグザンダーはそれを

         無名の質  /  QWAN
          Quality Without A Name

            と名付けました。
Alive
                     いきいきとした

       Eternal                     Comfortable
                                        ⼼心地よい
         永遠の




                    無名の質
                    (QWAN)
    Egoless                                Whole
     無我の                                    全⼀一的な




                 Exact           Free
                 正確な             ⾃自由な




     無名の質は本来ことばでは表せないものだが
     そこには7つの特性を⾒見見出すことができる。
それを実現し、かつ再現可能にするのが、パターン⾔言語である。
       アレグザンダーは、そう考えました。
デザインパターンは、いわば単語のようなものです。

       誰かとコミュニケーションする時に
 わずか⼀一つの単語で何かを伝えるのが難しいのと同じで、
個々のデザインパターンも単独で存⽴立立するものではありません。

        単語が集まって⽂文章になるように
      どのパターンも互いに組み合わせてこそ
         その真価を発揮するのです。


  あなたが作りたいUIを実現できそうなパターンを集め、
     それらをうまく組み合わせて形にすること。
それは、あなた⾃自⾝身のパターン⾔言語を⽣生み出すということです。

     そのような⼯工程を経て実体化されたUIには
 きっといくばくかの「無名の質」が備わっているはずです。
「無名の質」を備えたUIは、
それ⾃自体が絶賛の的になることはないかもしれません。

   でも、それでよいのではないでしょうか。

   UIを操作すること⾃自体がUXの核⼼心である。
  そんなケースは、ごく限られているはずです。


  ある体験の中に何らかのUXが関わっているとして
  さらにそのUXの中で利利⽤用されるUIの役割とは、
本来の体験における⽬目的の達成を決して邪魔することなく
     いわば“⿊黒⼦子”のように助けること。

   そんな⾵風に⾔言ってもよいかもしれません。
パターンを知り、活⽤用することは、
“ワンパターン”なUIをデザインすることとは違うのです。

      さまざまなパターンを学ぶことで
   あなた⾃自⾝身のパターン⾔言語を作り上げる⼒力力を
           ⾝身につけること。


   それが、デザインパターンの世界への扉を開く
『デザイニング・インターフェース』という本の意義であると
          私は考えます。
I hope you enjoy designing.

Mais conteúdo relacionado

Mais procurados

おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite EditionおかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite EditionYu Morita
 
UX Sketch vol.1 事業とUXデザイン
UX Sketch vol.1 事業とUXデザインUX Sketch vol.1 事業とUXデザイン
UX Sketch vol.1 事業とUXデザインSaori Baba
 
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意Yasuhisa Hasegawa
 
ユーザエクスペリエンスを正しく理解する-UXとUXデザイン
ユーザエクスペリエンスを正しく理解する-UXとUXデザインユーザエクスペリエンスを正しく理解する-UXとUXデザイン
ユーザエクスペリエンスを正しく理解する-UXとUXデザインMasaya Ando
 
[UX]は投げ捨てろ!
[UX]は投げ捨てろ![UX]は投げ捨てろ!
[UX]は投げ捨てろ!c-mitsuba
 
図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」Katsuhito Okada
 
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1Yu Morita
 
“UI/UX”?~恥をかかないための15分UXD入門
“UI/UX”?~恥をかかないための15分UXD入門“UI/UX”?~恥をかかないための15分UXD入門
“UI/UX”?~恥をかかないための15分UXD入門Masaya Ando
 
磨いて光らせる UX入門
磨いて光らせる UX入門磨いて光らせる UX入門
磨いて光らせる UX入門yohei sugigami
 
UX設計の第一歩-インテリジェントネット社内勉強会
UX設計の第一歩-インテリジェントネット社内勉強会UX設計の第一歩-インテリジェントネット社内勉強会
UX設計の第一歩-インテリジェントネット社内勉強会INI株式会社
 
UXデザイナーの生存確認と最新事情 | UXなまトーク
UXデザイナーの生存確認と最新事情 | UXなまトークUXデザイナーの生存確認と最新事情 | UXなまトーク
UXデザイナーの生存確認と最新事情 | UXなまトークToshiaki Otsuka
 
最近のUIデザインプロセス
最近のUIデザインプロセス最近のUIデザインプロセス
最近のUIデザインプロセスShingo Katsushima
 
体験をデザインするとは何か
体験をデザインするとは何か体験をデザインするとは何か
体験をデザインするとは何かSunami Hokuto
 
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメ
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメUXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメ
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメHiroyuki Arai
 
UXはじめの一歩
UXはじめの一歩UXはじめの一歩
UXはじめの一歩井上 誠
 
ユーザーエクスペリエンスの分解
ユーザーエクスペリエンスの分解ユーザーエクスペリエンスの分解
ユーザーエクスペリエンスの分解Takehisa Gokaichi
 
UIは「習うより慣れろ」
UIは「習うより慣れろ」UIは「習うより慣れろ」
UIは「習うより慣れろ」tomo tsubota
 
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会INI株式会社
 

Mais procurados (20)

おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite EditionおかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
おかんでもわかるUXデザイン Ver.0.2 CSS Nite Edition
 
UX Sketch vol.1 事業とUXデザイン
UX Sketch vol.1 事業とUXデザインUX Sketch vol.1 事業とUXデザイン
UX Sketch vol.1 事業とUXデザイン
 
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
 
ユーザエクスペリエンスを正しく理解する-UXとUXデザイン
ユーザエクスペリエンスを正しく理解する-UXとUXデザインユーザエクスペリエンスを正しく理解する-UXとUXデザイン
ユーザエクスペリエンスを正しく理解する-UXとUXデザイン
 
[UX]は投げ捨てろ!
[UX]は投げ捨てろ![UX]は投げ捨てろ!
[UX]は投げ捨てろ!
 
図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」
 
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
 
“UI/UX”?~恥をかかないための15分UXD入門
“UI/UX”?~恥をかかないための15分UXD入門“UI/UX”?~恥をかかないための15分UXD入門
“UI/UX”?~恥をかかないための15分UXD入門
 
磨いて光らせる UX入門
磨いて光らせる UX入門磨いて光らせる UX入門
磨いて光らせる UX入門
 
UX設計の第一歩-インテリジェントネット社内勉強会
UX設計の第一歩-インテリジェントネット社内勉強会UX設計の第一歩-インテリジェントネット社内勉強会
UX設計の第一歩-インテリジェントネット社内勉強会
 
UXデザイナーの生存確認と最新事情 | UXなまトーク
UXデザイナーの生存確認と最新事情 | UXなまトークUXデザイナーの生存確認と最新事情 | UXなまトーク
UXデザイナーの生存確認と最新事情 | UXなまトーク
 
最近のUIデザインプロセス
最近のUIデザインプロセス最近のUIデザインプロセス
最近のUIデザインプロセス
 
UX Design とは何か?
UX Design とは何か?UX Design とは何か?
UX Design とは何か?
 
体験をデザインするとは何か
体験をデザインするとは何か体験をデザインするとは何か
体験をデザインするとは何か
 
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメ
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメUXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメ
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメ
 
UX / UIデザインって何?
UX / UIデザインって何?UX / UIデザインって何?
UX / UIデザインって何?
 
UXはじめの一歩
UXはじめの一歩UXはじめの一歩
UXはじめの一歩
 
ユーザーエクスペリエンスの分解
ユーザーエクスペリエンスの分解ユーザーエクスペリエンスの分解
ユーザーエクスペリエンスの分解
 
UIは「習うより慣れろ」
UIは「習うより慣れろ」UIは「習うより慣れろ」
UIは「習うより慣れろ」
 
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
 

Destaque

デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするためにデザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするためにChihiro Tomita
 
リサーチャーとマーケター原稿2012326
リサーチャーとマーケター原稿2012326リサーチャーとマーケター原稿2012326
リサーチャーとマーケター原稿2012326Shigeru Kishikawa
 
Debugging mobile websites and web apps
Debugging mobile websites and web appsDebugging mobile websites and web apps
Debugging mobile websites and web appsMihai Corlan
 
3D printing for Development Hack Day in Bucharest, session 1
3D printing for Development Hack Day in Bucharest, session 13D printing for Development Hack Day in Bucharest, session 1
3D printing for Development Hack Day in Bucharest, session 1Asociatia Techsoup Romania
 
解析データの分析と活用
解析データの分析と活用解析データの分析と活用
解析データの分析と活用Keisuke Anzai
 
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoya
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench NagoyaWordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoya
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoyatakashi ono
 
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
マークアップエンジニア だからうれしい Fireworksの使い方あれこれマークアップエンジニア だからうれしい Fireworksの使い方あれこれ
マークアップエンジニア だからうれしい Fireworksの使い方あれこれNaoki Matsuda
 
Transformative Web Design ~変化にしなやかに対応するデザイン力~
Transformative Web Design ~変化にしなやかに対応するデザイン力~Transformative Web Design ~変化にしなやかに対応するデザイン力~
Transformative Web Design ~変化にしなやかに対応するデザイン力~Yasuhisa Hasegawa
 
最新開発支援ツールを使ったデバッグ対応
最新開発支援ツールを使ったデバッグ対応最新開発支援ツールを使ったデバッグ対応
最新開発支援ツールを使ったデバッグ対応Osamu Monoe
 
WebフレームワークXSS対策の自動化
WebフレームワークXSS対策の自動化WebフレームワークXSS対策の自動化
WebフレームワークXSS対策の自動化Yoshihiro Ura
 
Simple Pure Java
Simple Pure JavaSimple Pure Java
Simple Pure JavaAnton Keks
 
これから求められるWebコミュニケーションスキル 〜今日から始めるプロトタイプデザイン
これから求められるWebコミュニケーションスキル 〜今日から始めるプロトタイプデザインこれから求められるWebコミュニケーションスキル 〜今日から始めるプロトタイプデザイン
これから求められるWebコミュニケーションスキル 〜今日から始めるプロトタイプデザインYasuhisa Hasegawa
 
Developing with Phonegap - Adobe Refresh 2012
Developing with Phonegap - Adobe Refresh 2012Developing with Phonegap - Adobe Refresh 2012
Developing with Phonegap - Adobe Refresh 2012Ryan Stewart
 
6 Key Elements to a Good Website
6 Key Elements to a Good Website6 Key Elements to a Good Website
6 Key Elements to a Good WebsiteWebs
 
デジタルインテリジェンスの「構想力」
デジタルインテリジェンスの「構想力」デジタルインテリジェンスの「構想力」
デジタルインテリジェンスの「構想力」Digital Intelligence Inc.
 
【16-D-4】3分ではじめるスマホアプリのビジュアル開発
【16-D-4】3分ではじめるスマホアプリのビジュアル開発【16-D-4】3分ではじめるスマホアプリのビジュアル開発
【16-D-4】3分ではじめるスマホアプリのビジュアル開発hmimura_embarcadero
 

Destaque (20)

デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするためにデザイナーがエンジニアさんと楽しくデザイン実装の話をするために
デザイナーがエンジニアさんと楽しくデザイン実装の話をするために
 
リサーチャーとマーケター原稿2012326
リサーチャーとマーケター原稿2012326リサーチャーとマーケター原稿2012326
リサーチャーとマーケター原稿2012326
 
Debugging mobile websites and web apps
Debugging mobile websites and web appsDebugging mobile websites and web apps
Debugging mobile websites and web apps
 
3D printing for Development Hack Day in Bucharest, session 1
3D printing for Development Hack Day in Bucharest, session 13D printing for Development Hack Day in Bucharest, session 1
3D printing for Development Hack Day in Bucharest, session 1
 
解析データの分析と活用
解析データの分析と活用解析データの分析と活用
解析データの分析と活用
 
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoya
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench NagoyaWordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoya
WordPressコミュニティの魅力 | OSC Nagoya 2012 WordBench Nagoya
 
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
マークアップエンジニア だからうれしい Fireworksの使い方あれこれマークアップエンジニア だからうれしい Fireworksの使い方あれこれ
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
 
The Craft of UX
The Craft of UXThe Craft of UX
The Craft of UX
 
Transformative Web Design ~変化にしなやかに対応するデザイン力~
Transformative Web Design ~変化にしなやかに対応するデザイン力~Transformative Web Design ~変化にしなやかに対応するデザイン力~
Transformative Web Design ~変化にしなやかに対応するデザイン力~
 
画像Hacks
画像Hacks画像Hacks
画像Hacks
 
最新開発支援ツールを使ったデバッグ対応
最新開発支援ツールを使ったデバッグ対応最新開発支援ツールを使ったデバッグ対応
最新開発支援ツールを使ったデバッグ対応
 
WebフレームワークXSS対策の自動化
WebフレームワークXSS対策の自動化WebフレームワークXSS対策の自動化
WebフレームワークXSS対策の自動化
 
Simple Pure Java
Simple Pure JavaSimple Pure Java
Simple Pure Java
 
言語の世界
言語の世界言語の世界
言語の世界
 
これから求められるWebコミュニケーションスキル 〜今日から始めるプロトタイプデザイン
これから求められるWebコミュニケーションスキル 〜今日から始めるプロトタイプデザインこれから求められるWebコミュニケーションスキル 〜今日から始めるプロトタイプデザイン
これから求められるWebコミュニケーションスキル 〜今日から始めるプロトタイプデザイン
 
Developing with Phonegap - Adobe Refresh 2012
Developing with Phonegap - Adobe Refresh 2012Developing with Phonegap - Adobe Refresh 2012
Developing with Phonegap - Adobe Refresh 2012
 
6 Key Elements to a Good Website
6 Key Elements to a Good Website6 Key Elements to a Good Website
6 Key Elements to a Good Website
 
デジタルインテリジェンスの「構想力」
デジタルインテリジェンスの「構想力」デジタルインテリジェンスの「構想力」
デジタルインテリジェンスの「構想力」
 
JavaFX
JavaFXJavaFX
JavaFX
 
【16-D-4】3分ではじめるスマホアプリのビジュアル開発
【16-D-4】3分ではじめるスマホアプリのビジュアル開発【16-D-4】3分ではじめるスマホアプリのビジュアル開発
【16-D-4】3分ではじめるスマホアプリのビジュアル開発
 

Semelhante a 『デザイニング・インターフェース』読書会資料

UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! Akiko Ohtsuka
 
第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923Hub DotnetDeveloper
 
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~GoAzure
 
LiBRA 09.2021 / 総集編 1/2
LiBRA 09.2021 / 総集編 1/2LiBRA 09.2021 / 総集編 1/2
LiBRA 09.2021 / 総集編 1/2Masanori Saito
 
Go azure5 16 9_提出用
Go azure5 16 9_提出用Go azure5 16 9_提出用
Go azure5 16 9_提出用Mami Shiino
 
おばかアプリ勉強会資料 マイクロソフト
おばかアプリ勉強会資料 マイクロソフトおばかアプリ勉強会資料 マイクロソフト
おばかアプリ勉強会資料 マイクロソフトatmarkit
 
UX - 業務システムにも感動を
UX - 業務システムにも感動をUX - 業務システムにも感動を
UX - 業務システムにも感動をYasunobu Kawaguchi
 
01_良いユーザー体験のためのデザイン
01_良いユーザー体験のためのデザイン01_良いユーザー体験のためのデザイン
01_良いユーザー体験のためのデザインEmi Takayama
 
LiBRA_210201/New_emploee
LiBRA_210201/New_emploeeLiBRA_210201/New_emploee
LiBRA_210201/New_emploeeMasanori Saito
 
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方neokigao
 
UX Design Lecture in TUAD 2014
UX Design Lecture in TUAD 2014UX Design Lecture in TUAD 2014
UX Design Lecture in TUAD 2014Yoshinori Wakizaka
 
Jumvo 2.0 における デザイナーとエンジニアの連携
Jumvo 2.0 における デザイナーとエンジニアの連携Jumvo 2.0 における デザイナーとエンジニアの連携
Jumvo 2.0 における デザイナーとエンジニアの連携Norihisa Nagano
 
モバイルのためのUXデザイン
モバイルのためのUXデザインモバイルのためのUXデザイン
モバイルのためのUXデザインYoshinori Wakizaka
 
UXD教育の実態と課題
UXD教育の実態と課題UXD教育の実態と課題
UXD教育の実態と課題Masaya Ando
 
UX actually is all around us. - UXを感じよう -
UX actually is all around us. - UXを感じよう -UX actually is all around us. - UXを感じよう -
UX actually is all around us. - UXを感じよう -Akihiro Mukai
 
アプリデザインのお勉強 UI/UXのお話
アプリデザインのお勉強 UI/UXのお話アプリデザインのお勉強 UI/UXのお話
アプリデザインのお勉強 UI/UXのお話shinta rock
 

Semelhante a 『デザイニング・インターフェース』読書会資料 (20)

UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
 
第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923
 
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
A 1-4 azure × metro style apps~ azure ではじめるmetro スタイル アプリ~
 
LiBRA 09.2021 / 総集編 1/2
LiBRA 09.2021 / 総集編 1/2LiBRA 09.2021 / 総集編 1/2
LiBRA 09.2021 / 総集編 1/2
 
Go azure5 16 9_提出用
Go azure5 16 9_提出用Go azure5 16 9_提出用
Go azure5 16 9_提出用
 
211101_DXの基礎
211101_DXの基礎211101_DXの基礎
211101_DXの基礎
 
おばかアプリ勉強会資料 マイクロソフト
おばかアプリ勉強会資料 マイクロソフトおばかアプリ勉強会資料 マイクロソフト
おばかアプリ勉強会資料 マイクロソフト
 
UX - 業務システムにも感動を
UX - 業務システムにも感動をUX - 業務システムにも感動を
UX - 業務システムにも感動を
 
01_良いユーザー体験のためのデザイン
01_良いユーザー体験のためのデザイン01_良いユーザー体験のためのデザイン
01_良いユーザー体験のためのデザイン
 
LiBRA_210201/New_emploee
LiBRA_210201/New_emploeeLiBRA_210201/New_emploee
LiBRA_210201/New_emploee
 
Indigo Studio で作るプロトタイプ
Indigo Studio で作るプロトタイプIndigo Studio で作るプロトタイプ
Indigo Studio で作るプロトタイプ
 
20140515 digital media publishing user interface design
20140515  digital media publishing user interface design20140515  digital media publishing user interface design
20140515 digital media publishing user interface design
 
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
 
UX Design Lecture in TUAD 2014
UX Design Lecture in TUAD 2014UX Design Lecture in TUAD 2014
UX Design Lecture in TUAD 2014
 
Jumvo 2.0 における デザイナーとエンジニアの連携
Jumvo 2.0 における デザイナーとエンジニアの連携Jumvo 2.0 における デザイナーとエンジニアの連携
Jumvo 2.0 における デザイナーとエンジニアの連携
 
モバイルのためのUXデザイン
モバイルのためのUXデザインモバイルのためのUXデザイン
モバイルのためのUXデザイン
 
UXD教育の実態と課題
UXD教育の実態と課題UXD教育の実態と課題
UXD教育の実態と課題
 
Designing UX Development
Designing UX DevelopmentDesigning UX Development
Designing UX Development
 
UX actually is all around us. - UXを感じよう -
UX actually is all around us. - UXを感じよう -UX actually is all around us. - UXを感じよう -
UX actually is all around us. - UXを感じよう -
 
アプリデザインのお勉強 UI/UXのお話
アプリデザインのお勉強 UI/UXのお話アプリデザインのお勉強 UI/UXのお話
アプリデザインのお勉強 UI/UXのお話
 

『デザイニング・インターフェース』読書会資料

  • 1. On Desining Interfaces 2012-06-02 Noriyo Asano noriyo@iaspectrum.net
  • 3. 「ユーザーエクスペリエンス(UX)」という⾔言葉葉を 近頃よく⾒見見聞きするようになりました。 UXといわゆる普通の“体験”との違いとは何でしょうか。 それは、UXには利利⽤用する対象があるという点です。 つまりそこには、 何らかのツール/システム/テクノロジーが 必ず介在するのです。 たとえば… ⾳音楽を聴くという⾏行行為について考えてみましょう。
  • 4. ⾳音楽を聴くという⾏行行為はもともと 「U」が付かない「X」、純粋な「体験」であると思います。 何か⾳音楽を聴きながら、 「私は今、その曲を利利⽤用している」 とか 「私は⾳音楽ユーザーである」 などと思うことは、あまりないですよね。
  • 5. 昔々、すべての⾳音楽は「⽣生演奏されるもの」でした。 つまり、⾳音楽という形のないものを記録・再⽣生できる媒体 ー  レコード盤、磁気テープ、CD、MD  などなど  ― が発明され、録⾳音技術というものが⽣生まれる前の時代のことです。 ⽣生演奏しかない時代には すべての⾳音楽体験は「X」であった。 しかし、録⾳音技術が⽣生まれたことにより そのテクノロジーを利利⽤用するという「UX」が ⾳音楽体験の中に含まれるようになった。
  • 6. たとえば、今では⾳音楽を聴くという「X」の中に、 Amazonで掘り出し物のCDを⾒見見つける iTunesでせっせとプレイリストを作る ⾼高級ヘッドフォンで昔の⾳音源を聴き直す そういうさまざまな「UX」が関わっています。 その時、⾳音楽を体験する⾃自分は、 AmazonというWebサービスのユーザー iTunesというソフトウェアのユーザー ヘッドフォンというハードウェアのユーザー でもあるのです。
  • 7. このように「UX」とは さまざまな技術の誕⽣生と進化の中で 「U」なしの、よりプリミティブな「X」の中に現れ、 時の流流れと共にその構成要素として不不可⽋欠となりつつあるもの。 私はそんな⾵風に捉えています。 さて、近頃では… こんな⾔言葉葉もいっぱい⽬目につきます。
  • 9. UIとUX。 ユーザーインターフェースとユーザー体験。 その両者は決して無関係ではありませんが 同等な/並列列なものではありません。 UI/UXという⾔言葉葉を掲げていながら 実はそのどちらか⼀一⽅方の話をしているだけ。 そんな例例も少なくないように⾒見見えます。 今⽇日の読書会のテーマはUI設計です。 ですから、今⽇日はそれだけに集中したいと思います。 UX設計というまた別の次元の話は、またいずれとして。
  • 10. ところで、 私たちは⽇日本語の「技術」ということばを ⼆二通りの意味で使うことがあります。 「○○社が開発した   技術(Technology)は凄いね」 「このツールを使いこなすにはそれなりの 技術(Technical ability)が要るね」
  • 11. 技術を扱う私たちUI設計者は、常に Technology を意識識していますが Technical Ability の問題にはなかなか⼿手出しできません。 「技能」を向上させる啓発活動や教育といった領領域にまで UI設計者が踏み込むことは ⾮非常に難しいのが現実であるからです。
  • 12. Technology でも、この両者が歩み寄ってこそ ユーザーインターフェースは その真価を発揮するのです。 Technical ability テクノロジーを追求するだけでなく ユーザーの技能を引き出すこと。 それが、UI設計者に求められるのではないでしょうか。
  • 13. ユーザーの技能を理理解するために ⾏行行動経済学の「⼆二重プロセスモデル」を⾒見見てみましょう。 ⼈人間は何かを判断する時、実は2段階の処理理をしているという考え⽅方です。 問題 システム1 No (直感)による判断が 正しいか? システム2 Yes No (推論論)による判断が そのエラーを 正せるか? Yes 正解! 不不正解…
  • 14. ユーザーの技能は、技術的なスキルだけでなく このような判断能⼒力力によっても⼤大きく左右されます。 操作のたびにいちいちシステム2の処理理を経由させられるUIは たとえスキルの⾼高いユーザーでも使いにくいものになってしまいます。 ユーザーの技能を⾼高めるには システム1のエラー発⽣生率率率をできるだけ抑えたい。 つまり、素早く反射的に、難しく考えずに操作できるような いわゆる“透明なインターフェース”を作ることが重要になります。 システム1(直感) システム2(推論論) 速い 遅い 並列列に処理理 順番に処理理 無意識識的・⾃自動的 管理理されている 努⼒力力は要らない 努⼒力力を要する 連想に基づく 規則に基づく
  • 15. QWAN
  • 16. そのようなUI設計を⾏行行う上で役⽴立立つのが 『デザイニング・インターフェース』で⽰示されている UIのデザインパターンです。 多くの⼈人にとっての使いやすさ・使い⼼心地のよさといったものには 何かしら根源的な共通の要素を⾒見見出すことができます。 建築家クリストファー・アレグザンダーはそれを 無名の質  /  QWAN Quality Without A Name と名付けました。
  • 17. Alive いきいきとした Eternal Comfortable ⼼心地よい 永遠の 無名の質 (QWAN) Egoless Whole 無我の 全⼀一的な Exact Free 正確な ⾃自由な 無名の質は本来ことばでは表せないものだが そこには7つの特性を⾒見見出すことができる。 それを実現し、かつ再現可能にするのが、パターン⾔言語である。 アレグザンダーは、そう考えました。
  • 18. デザインパターンは、いわば単語のようなものです。 誰かとコミュニケーションする時に わずか⼀一つの単語で何かを伝えるのが難しいのと同じで、 個々のデザインパターンも単独で存⽴立立するものではありません。 単語が集まって⽂文章になるように どのパターンも互いに組み合わせてこそ その真価を発揮するのです。 あなたが作りたいUIを実現できそうなパターンを集め、 それらをうまく組み合わせて形にすること。 それは、あなた⾃自⾝身のパターン⾔言語を⽣生み出すということです。 そのような⼯工程を経て実体化されたUIには きっといくばくかの「無名の質」が備わっているはずです。
  • 19. 「無名の質」を備えたUIは、 それ⾃自体が絶賛の的になることはないかもしれません。 でも、それでよいのではないでしょうか。 UIを操作すること⾃自体がUXの核⼼心である。 そんなケースは、ごく限られているはずです。 ある体験の中に何らかのUXが関わっているとして さらにそのUXの中で利利⽤用されるUIの役割とは、 本来の体験における⽬目的の達成を決して邪魔することなく いわば“⿊黒⼦子”のように助けること。 そんな⾵風に⾔言ってもよいかもしれません。
  • 20. パターンを知り、活⽤用することは、 “ワンパターン”なUIをデザインすることとは違うのです。 さまざまなパターンを学ぶことで あなた⾃自⾝身のパターン⾔言語を作り上げる⼒力力を ⾝身につけること。 それが、デザインパターンの世界への扉を開く 『デザイニング・インターフェース』という本の意義であると 私は考えます。
  • 21. I hope you enjoy designing.