<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>webtron weblog</title>
    <link rel="alternate" type="text/html" href="http://blog.webtron.jp/" />
    <link rel="self" type="application/atom+xml" href="http://blog.webtron.jp/atom.xml" />
    <id>tag:blog.webtron.jp,2009-04-03://1</id>
    <updated>2012-02-11T09:19:53Z</updated>
    
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type Commercial 4.25</generator>

<entry>
    <title>Time spans of UX</title>
    <link rel="alternate" type="text/html" href="http://blog.webtron.jp/archives/2012/02/000089.html" />
    <id>tag:blog.webtron.jp,2012://1.89</id>

    <published>2012-02-11T09:10:52Z</published>
    <updated>2012-02-11T09:19:53Z</updated>

    <summary>最近いろいろなところで UX の重要性について語られることが多いのだけど、UX ...</summary>
    <author>
        <name>webtron</name>
        
    </author>
    
        <category term="HCD" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="log" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="hcdvalue" label="HCD Value" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ux白書" label="UX白書" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="userexperience" label="User Experience" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="userinterface" label="User Interface" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.webtron.jp/">
        <![CDATA[<div>最近いろいろなところで UX の重要性について語られることが多いのだけど、UX の意味ってすごく広い。</div><div>UX をどう捉えるかによってデザインされたアウトプットも変わってくるはずだと思うので、定義を正しく捉えることってとっても大切。そこで、自分がUX について考えてきた過程を少し書いてみることにしました。</div><div><br /></div><div><font class="Apple-style-span" style="font-size: 1.25em; ">◆UX の定義</font></div><div><br /></div><div>自分は UI デザイナーという立場から UX というものに出会いました。</div><div>最初の自分の UX の定義は「UI の使い心地、ユーザビリティ」や「インタラクション・ビジュアルデザイン」を通じたユーザ体験という感じだったんです。UI Oriented という感じです。</div><div><br /></div><div>ところが2011年から参加している AIIT の Human Centered Design の履修プログラムで出会った Web サービス系のデザイナーさんや SIer さん達と話をするうちに UX の定義が自分のものと何か根底から違っていることに気がついたのです。</div><div>いや、正確にいうと定義というよりも「UX で最も重要視していること」なのかな。</div><div>サービス系の人たちは UX ＝「サービスを使う過程のユーザ体験、サービスを利用することで成し得た体験」、UXD（UX Design）≒「サービスデザイン」といった割と大きな視点で UXを捉えているのです。この捉え方を Service Oriented と勝手に命名。</div><div>こちらのほうが世間一般に言われている UX に近い気もします。</div><div><br /></div><div>両方ともたしかに UX だと考えられるんだけど...　というわけで自分のなかに異なる UX の定義が同居することになりました。</div><div>この２つの関係性はどうなってるのか、はたまたこれ以外の定義が存在するのか。</div><div>自分のなかに疑問が生まれたのです。</div><div><br /></div><div><font class="Apple-style-span" style="font-size: 1.25em; ">◆UX白書（User Experience White Paper）に出会う</font></div><div><br /></div><div>ユーザビリティや HCD に関する勉強会「新横浜ユーザビリティ研究会」というのがあります。自分は第３回あたりからずっと参加しているのだけど、その第６回に HCD Value（HCDの実践をコンセプトとしたコミュニティ）の方々が行ったセッションでこの疑問を解決する糸口を得ることになります。</div><div><br /></div><div>セッションの内容は UX白書（User Experience White Paper）という 2010年に Dagstul セミナーで議論された「ユーザエクスペリエンスの概念」についてまとめた宣言文を HCD Value が翻訳し、その概要について報告をするというものでした。</div><div><br /></div><div>その UX 白書のなかに「TIME SPANS OF USER EXPERIENCE」というのがあって、そこに解説とともにこんな図があったのです。</div><div><br /></div><div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="timespans-of-UX.png" src="http://blog.webtron.jp/blogimgs/timespans-of-UX.png" width="560" height="216" class="mt-image-none" style="" /></span></div><div><br /></div><div>自分の理解しているレベルで説明すると</div><div><br /></div><div><b>Anticipated UX :&nbsp;</b></div><div>プロダクトを使う前のUX。プロダクトを使うことでできることを"ユーザが想像する"体験。</div><div>＞ブランドイメージや販売促進戦略などをデザインすることでよりよいUXを提供できると思う。</div><div><br /></div><div><b>Momentary UX：</b></div><div>プロダクトを使っている最中のUX。使い心地や効率性の体験。</div><div>＞ユーザビリティやインタラクションをよりよくデザインすることが重要。自分の最初に考えていたUXの定義はこれだったのか...</div><div><br /></div><div><b>Episodic UX：</b></div><div>使用後のUX。プロダクトを使って成し遂げたことを振り返って感じる体験。</div><div>＞サービスやアプリケーション設計をきちんとデザインすることでユーザの要求を満たすことができる。要求以上のことを提供できれば、それはすばらしい体験につながる。Service Oriented はこのあたりと次の Cumlative を合わせた感じなのかな...</div><div><br /></div><div><b>Cumulative UX：</b></div><div>上記３つの体験をあわせた全体から感じる体験。</div><div>＞よいUXを提供することがユーザの満足感やエンゲージメント（愛着）につながるのではないか。</div><div><br /></div><div>このように "UX は Time Span ごとに捉えることができるのだ" と考えると、自分のなかの UX の定義に対する疑問がすうっと消化されました。ただ、UX 白書に出会ったのが８月で AIIT に通い出したのが 10月からですから、ピーンとくるのに大分時間がかかってますけどね。さらに自分が認識していた２つの UX に加えて Anticipated と Cumulative というもう２つの UX があることがわかりました。</div><div><br /></div><div><font class="Apple-style-span" style="font-size: 1.25em; ">◆全ての Time Span で UX をデザインする</font></div><div><br /></div><div>自分が UI Oriented や Service Oriented と思っていた UX は実は Cumulative UX という全体の体験の一部に過ぎなかったわけです。</div><div>それまでに自分がデザインしたプロダクトを振り返ると、理解できていなかった UX へのケアが不足しているのがわかって、己の未熟さにしょんぼりしたりしましたが、同時に UX を Time Span でセグメントすることでよりよい UX を提供するにはどのような方策を取ればいいか、という改善点を容易に見つけることができたのは、この概念を知ることができたからこそだと思っています。</div><div><br /></div><div><font class="Apple-style-span" style="font-size: 1.25em; ">◆まとめ</font></div><div><br /></div><div>正直自分は勉強嫌いだし、理論よりも実践してなんぼと思っているタイプなのだけど、こういうことがあると勉強も大事だよねえ、と思わざるをえないです。クライアントワークでこの４つの UX にフルコミットできるのってなかなかないケースだとは思うけど、こんど自分でアプリを出すときにはこれを意識しながらプランをつくっていこうと思うのでありました。</div><div><br /></div><div><b>関連リンク：</b></div><div>新横浜ユーザビリティ研究会：<a href="http://asanoken.jugem.jp/?cid=23" target="_blank">http://asanoken.jugem.jp/?cid=23</a></div><div>HCD Value：<a href="http://site.hcdvalue.org/" target="_blank">http://site.hcdvalue.org/</a></div><div>User Experience White Paper：<a href="http://www.allaboutux.org/uxwhitepaper" target="_blank">http://www.allaboutux.org/uxwhitepaper</a></div><div><br /></div><div><br /></div><div><br /></div><div><br /></div> ]]>
        
    </content>
</entry>

<entry>
    <title>MapFan for iPhone 1.5 が iPad のトップ有料で１位を獲得</title>
    <link rel="alternate" type="text/html" href="http://blog.webtron.jp/archives/2011/12/000088.html" />
    <id>tag:blog.webtron.jp,2011://1.88</id>

    <published>2011-12-01T11:16:57Z</published>
    <updated>2011-12-01T11:31:33Z</updated>

    <summary>UI 設計／デザインをお手伝いさせていただいている MapFan for iPh...</summary>
    <author>
        <name>webtron</name>
        
    </author>
    
        <category term="iPhone" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="log" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="mapfan" label="MapFan" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="userinterface" label="User Interface" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ipad" label="iPad" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="iphone" label="iPhone" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.webtron.jp/">
        <![CDATA[<span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="mzl.eycobknf.480x480-75.jpg" src="http://blog.webtron.jp/blogimgs/mzl.eycobknf.480x480-75.jpg" width="360" height="480" class="mt-image-none" style="" /></span><div><br /></div><div><div>UI 設計／デザインをお手伝いさせていただいている <a href="http://itunes.apple.com/jp/app/mapfan-for-iphone/id354667360?mt=8" target="_blank">MapFan for iPhone 1.5</a> がリリースされております。</div><div>大きく進化したのは横画面対応、iPad 対応（ユニバーサル）。iPad のトップ有料で１位を獲得しました。</div><div><br /></div><div>これは INCREMENT P スタッフのみなさんのモチベーションの高さ、ものづくりにおける包容力、大胆な戦略をとれる決断力のなせる技だと思います。</div><div><br /></div><div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="mzl.cmhdjcco.480x480-75.jpg" src="http://blog.webtron.jp/blogimgs/mzl.cmhdjcco.480x480-75.jpg" width="480" height="360" class="mt-image-none" style="" /></span></div><div><br /></div><div>そして、制作サイドではやはり実装とデザインが深くコミュニケーションしながらものづくりができることはとても強力なのだと実感しました。</div><div>実装を行っている <a href="http://hmdt.jp" target="_blank">HMDT</a> さんとは、Agile 的なこともずいぶん前からあたりまえのようにやっていましたし、少しの無茶もいえる関係があったからこそクオリティを生み出すことができたのだと。</div><div><br /></div><div>こういう形でプロジェクトに関わることができ、今回こうして結果もついてきたことは本当に嬉しいことです。みなさまに感謝！</div><div><br /></div><div>関連リンク：</div><div>Response<a href="http://response.jp/article/2011/11/29/166163.html" target="_blank">「UI最適化したiPad対応でより使いやすい電子地図に」...インタビュー　</a></div><div><br /></div> <div><br /></div></div>]]>
        
    </content>
</entry>

<entry>
    <title>［AIIT］インターフェイス設計の８原則</title>
    <link rel="alternate" type="text/html" href="http://blog.webtron.jp/archives/2011/11/000087.html" />
    <id>tag:blog.webtron.jp,2011://1.87</id>

    <published>2011-11-10T10:15:11Z</published>
    <updated>2011-11-10T16:42:32Z</updated>

    <summary>認知科学はときに難解で数回に分けて行われている授業でもたびたび睡魔に襲われつつよ...</summary>
    <author>
        <name>webtron</name>
        
    </author>
    
        <category term="HCD" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="iPhone" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="aiit" label="AIIT" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="shneiderman" label="Shneiderman" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="iphone" label="iPhone" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.webtron.jp/">
        <![CDATA[<div>認知科学はときに難解で数回に分けて行われている授業でもたびたび睡魔に襲われつつようやくあと１回を残すとこまできた。昨日は特に UI デザイナーにとってはとても重要な講義だった。</div><div><br /></div><div>講義ではノーマンのメンタルモデルの話やよいデザインの４原則などが紹介されたのだけど、なかでも「インタフェース設計の８原則（Shneiderman, 1996）」は自分がデザインや設計を行うときに常に肝に銘じているもの。</div><div><br /></div><div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://blog.webtron.jp/blogimgs/shneiderman.png"><img alt="shneiderman.png" src="http://blog.webtron.jp/assets_c/2011/11/shneiderman-thumb-560x420-223.png" width="560" height="420" class="mt-image-none" style="" /></a></span></div><div><br /></div><div><div>UI の使い心地をダイレクトにユーザが感じてしまう今日のタッチデバイスのアプリケーションにおけるデザインでは非常に強力な原則だと実感しているものなので、この機会にもう一度おさらいをしておきたいと思ったのでエントリ書いてみました。</div><div>（でも、いっぺんにはできないのでちょっとずつw）</div><div><br /></div><div><br /></div><div><b><font class="Apple-style-span" style="font-size: 1.5625em; ">１. 一貫性を持たせる</font></b></div><div><br /></div><div>「一貫性」とひとつかみにすると難しいのだけど、なぜ一貫性を持たせるべきなのか？という問いに対する自分の理解としては、</div><div><br /></div><div><b>・「システム」と「ユーザ」のメンタルモデルの乖離を最小限にするため</b></div><div><b>・ユーザのメンタルモデル形成時において、ルールを設けることでユーザがデザイナーの意図したモデルを正しく学習できるようにするため</b></div><div><br /></div><div>という感じ。</div></div><div><br /></div><div><div>一貫性と言われて、手短かなところで例をあげると iOS のナビゲーション。</div><div><br /></div><div>画面のリストをタップすると、画面が右から左にスライドしてより詳細な情報の画面へ遷移する。上のバーの左にある横向きベース形状のボタンをタップすると遷移元の画面へ戻れる。</div><div>詳細画面が左からスライドして現れることから「左から右に向かって情報が階層的になっている」というルールをあることを理解する。</div><div>遷移した画面の上部のバーの左側の横向きベース形状のボタンをタップするとどうなるか？（遷移元の画面に戻る）は、物理的な側面から類推することができる。</div><div><br /></div><div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://blog.webtron.jp/blogimgs/navigation_controller.png"><img alt="navigation_controller.png" src="http://blog.webtron.jp/assets_c/2011/11/navigation_controller-thumb-560x283-225.png" width="560" height="283" class="mt-image-none" style="" /></a></span></div><div><br /></div><div>しかし、利用するうちに「左上にあるボタンは戻るボタンである」という感じに位置的記憶が強くなりすぎでMusic Appの「Store」ボタンを間違ってタップしてしまう、というようなエラーを招くこともある（あ、これ蛇足だ）ので注意。</div><div><br /></div><div>情報構造のテンプレートを用意したり、アニメーションをつかって物理的なイメージを与えたり、ビジュアル的な記憶を使ったりして、一度使えばシステムのメンタルモデルを理解できるのはそういう手法によって生み出された一貫性によるもんなのだよね。</div><div><br /></div><div>で、一貫性を持たせるためにはどんなことをするかというと、</div><div><br /></div><div><b>（Model）</b></div><div><b>・情報の構造化（noun）</b></div><div><b>・コンテキストにおけるユーザのアクションの予測（verb）</b></div><div><b>・モードの利用</b></div><div><b><br /></b></div><div><b>（Visual）</b></div><div><b>・空間的な記憶の利用</b></div><div><b>・正しいマッピング</b></div><div><b>・体制化の利用（ゲシュタルトの法則）</b></div><div><br /></div><div>などを利用する。</div><div>デザイナーはとかく見た目の一貫性だけに固執してしまいがちだけど、そうではなくて全体として「一貫性」というものをとらえないといけないすね。自戒も含め。</div><div><br /></div><div>てなわけで、今日はここまで。</div><div>時間ができたらまた続きをエントリします。</div><div><br /></div></div> ]]>
        
    </content>
</entry>

<entry>
    <title>[AIIT］評価グリッド法による価値分析</title>
    <link rel="alternate" type="text/html" href="http://blog.webtron.jp/archives/2011/11/000086.html" />
    <id>tag:blog.webtron.jp,2011://1.86</id>

    <published>2011-11-04T06:23:50Z</published>
    <updated>2011-11-10T07:09:04Z</updated>

    <summary>今日の演習は評価グリッド法を用いた価値分析だった。フローモデル図のときと同じく、...</summary>
    <author>
        <name>webtron</name>
        
    </author>
    
        <category term="HCD" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="log" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="aiit" label="AIIT" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ラダリング" label="ラダリング" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="評価グリッド法" label="評価グリッド法" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.webtron.jp/">
        <![CDATA[<div>今日の演習は評価グリッド法を用いた価値分析だった。</div><div>フローモデル図のときと同じく、また理解がしきれずもやもやが残ってしまったので少し整理をしてみた。</div><div>講義で教えていただいたことと復習のために web などで調べたことを自分的な基準で統合して書いているので、もし理解が間違っている部分があればぜひ指摘してもらいたいです。</div><div><br /></div><div><br /></div><div><b><font class="Apple-style-span" style="font-size: 1.5625em; ">評価グリッド法</font></b></div><div><b><font class="Apple-style-span" style="font-size: 1.5625em; "><br /></font></b></div><div><b><font class="Apple-style-span" style="font-size: 1.25em; ">どのようなことができるか</font></b></div><div><b>・サービスやプロダクトに対してのユーザの評価を</b></div><div><b>　「抽象的価値」「感覚的理解」「客観的・具体的」と階層的に把握できる</b></div><div><b>・被験者（interviewee）の本音が聞ける</b></div><div><br /></div><div><b><font class="Apple-style-span" style="font-size: 1.25em; ">どんなときに使えるか</font></b></div><div><b>・（サービスやプロダクトの）スペックの判断材料</b></div><div><b>・改善の糸口の発見、改善後のベネフィットの把握</b></div><div><br /></div><div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://blog.webtron.jp/blogimgs/gridmethod111103.png"><img alt="gridmethod111103.png" src="http://blog.webtron.jp/assets_c/2011/11/gridmethod111103-thumb-560x301-219.png" width="560" height="301" class="mt-image-none" style="" /></a></span></div><div><br /></div><div><div>これだけ聞くとマーケティング的な側面しか見えずらいのだけど、<a href="http://blog.goo.ne.jp/woodywood/e/a5cd2d39b5e6d2834653c5c19c9b2617" target="_blank">調べていくと</a>これがメンタルモデル・アプローチ（この言葉すごくしっくりきた！）におけるユーザ側のモデルの一種だと考えると、以前演習したペルソナ／シナリオ法の３つのモデル（フロー、文化、シーケンス）と並ぶペルソナづくりの素材にもなると感じた。</div><div>KA 法は価値項目の抽出が効果的にできる反面ユーザ像が若干希薄になる感じがするのだけど、評価グリッドはその人自身の価値観のモデルが浮き出てくる感じ。</div></div><div><br /></div><div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://blog.webtron.jp/blogimgs/mentalmodel111103.png"><img alt="mentalmodel111103.png" src="http://blog.webtron.jp/assets_c/2011/11/mentalmodel111103-thumb-560x290-221.png" width="560" height="290" class="mt-image-none" style="" /></a></span></div><div><br /></div><div><div><b><font class="Apple-style-span" style="font-size: 1.25em; ">どういうふうにやる？</font></b></div><div><b>・半構造化インタビュー（用語難し杉）</b></div><div>　事前に大まかな質問事項を決めておき、</div><div>　回答者の答えによってさらに詳細にたずねて行く簡易な質的調査法</div><div><b>・比較対象物を用意してそれらを被験者に比較評価してもらい、その評価理由を聞き出す</b></div><div><b>・ラダリング技法</b></div><div>　上位概念（how、どのように好ましいか？）・下位概念（what、好ましくあるための条件とは？）の抽出</div><div><br /></div><div><br /></div><div><b><font class="Apple-style-span" style="font-size: 1.5625em; ">演習</font></b></div><div><b><font class="Apple-style-span" style="font-size: 1.5625em; "><br /></font></b></div><div><b>・この手法を理解しよう</b></div><div><b>・プログラム上の共通課題「旅支度」</b></div><div>というところから（だと思う）、既に調査済みの４人分の旅支度に関するコンテキストインタビューメモの項目を比較対象物として、３人１組で「interviewer」「interviewee」「recorder」役をそれぞれ実習。調査した結果は９人組になって１つの構造図にした。</div><div><br /></div><div><b><font class="Apple-style-span" style="font-size: 1.25em; ">インタビュー実施</font></b></div><div>１つ１つの行動についてのラダリングはまあなんとかできて、横方向の構造化？はできた。</div><div>inteviewer と recorder が別なので「あ、いまラダーアップしたつもり」なんだけどラダーダウン方向に記録されたりすることはあったけど、あとでみんなでレビューしたときにそれぞれの意見を出し合って修正できたから問題なし。</div><div>あと、これは復習しているときに見つけた <a href="http://gitanez.seesaa.net/article/50744773.html" target="_blank">blog</a> に書かれていて「うん、たしかに」と思ったことなのだけど、その場で３人が記録されたグリッドを見ながらやるとラダーの方向が整地されるのと interviewee に内観的なことが起って答えも整地されるので「グリッドを共有しながらインタビューする」というのはいいですな。</div><div><br /></div><div>難しかったのは比較素材がサービスやプロダクトといった具体的なものではなくて、インタビューのメモだったということ。そこから「比較対象を決定する」ことがつまずきどころ。</div><div><br /></div><div><b>Q：No1さんとNo2さんの「持っていくアイテム」について、どちらが好ましく思いますか？（一対比較になるのかな？）</b></div><div><br /></div><div>みたいに始められると、ラダリングっぽさ？がでてよかったのかもしれない。</div><div>（けど、両方の人に書いてあって比較できる共通項目を探すのが大変）</div><div>interviewee 自身の考えと No1さんの考えを比較するだと（単独評価になる？）、どうしても「比較してどう思う」というより「私はこう思う」にながれがなってしまってラダリングからはみでる感じがした。</div><div><br /></div><div>どこかのサイトでインタビューの始めに比較する商品について好ましい順に並べてもらうという手法が紹介されていたが、全体のヒエラルキーを作ってもらうことで interviewee 自身で複数あるであろう価値の視点をある程度見切ってヒエラルキー化するので、それも構造化してあげればそこからもその人の価値のプライオリティが分かっていいと思ったけど、見切るのにそれなりに内観する必要があるだろうし、見切りが適切に行われるかどうかは微妙な気もするから、このあたりは気にして取り入れるべきだと思った。</div><div><br /></div><div><b><font class="Apple-style-span" style="font-size: 1.25em; ">統合</font></b></div><div>横構造のみにフォーカスしていたのが功を奏して２項目については統合することができた。が、それ以外はラダリングの開始地点がばらばらすぎて統合できず。ちなみに統合すると班になった９人から抽出された価値観をもったペルソナができる？と考えていいのだろうか。</div><div><br /></div><div><b><font class="Apple-style-span" style="font-size: 1.25em; ">全体的には</font></b></div><div>自分が演習の時点で評価グリッド法の優位点を見いだせなかったのは手法の理解不足につきる。それと最終的な目標がやってるうちに手法の習得になってしまって、なんのためにやっているのかとか、最終的にはなにが出来上がるのかを理解できていなかったところにあるのかな。</div><div>演習の最後の講評会で質問とか意見が、このあたりのもやもやはどうやらみんな同じだったぽい...？</div><div><br /></div><div><br /></div><div><b><font class="Apple-style-span" style="font-size: 1.5625em; ">統合についてのさらなる疑問</font></b></div><div><b><font class="Apple-style-span" style="font-size: 1.5625em; "><br /></font></b></div><div>重複してでてくる着目点については重なった数を記すなどして重みをつけないと統合の意味がない気がした。複数の評価グリッドを統合する際の正しいオペレーションがあれば知りたいところだ。</div><div>というわけで復習したつもりが、違うモヤモヤを増やす結果になったのでした...　orz</div><div><br /></div><div><br /></div><div><div><b><font class="Apple-style-span" style="font-size: 1.5625em; ">11/10追記：霧が晴れて来た</font></b></div><div><b><font class="Apple-style-span" style="font-size: 1.5625em; "><br /></font></b></div><div>上のほうにあった図は、複数人のモデルを統合して一人のモデルにするイメージで作ったのだけれども、エントリ後に山口先生からいただいたコメント----</div><div><br /></div><div><i><b>「基本的に評価グリッド法の使い方は、ユーザ全体の評価構造を抽出して俯瞰し分析するためのものです」</b></i></div><div><i><b><br /></b></i></div><div><i><b>「（統合では）定量的に扱う意味でも、重なった評価ワードの人数や、関係線の人数、価値観の系統のネーミングなどを行います」</b></i></div><div><i><b><br /></b></i></div><div><i><b>「数十人分の評価グリッドを統合することで一覧しやすくなりますし、抜け漏れの評価項目が少ない構造MAPができあがり、それを手掛かりに設計につなげることができます」</b></i></div><div><br /></div><div>から理解をし直すと、数人分を代表する一人のモデルを作るというよりは、数人分の価値マップとして統計データ的に利用するほうがこの技法の使用方法としてはふさわしいようです。先生ありがとうございます！</div></div><div><br /></div><div><br /></div><div><b>参考になった記事</b></div><div>・semantic forest：<a href="http://blog.goo.ne.jp/woodywood/e/a5cd2d39b5e6d2834653c5c19c9b2617" target="_blank">評価グリッド法とパーソナルコンストラクト理論</a></div><div>・CAUXのブログ：<a href="http://ameblo.jp/caux/entry-10709222122.html" target="_blank">HCDワークショップ インタビューと評価グリッド法</a></div><div>・DESIGN IT! w/LOVE：<a href="http://gitanez.seesaa.net/article/50744773.html" target="_blank">ラダーリング法、評価グリッド法、パーソナル･コンストラクト理論</a></div><div><br /></div></div> ]]>
        
    </content>
</entry>

<entry>
    <title>［AIIT］ユーザモデリングワークショップ</title>
    <link rel="alternate" type="text/html" href="http://blog.webtron.jp/archives/2011/10/000085.html" />
    <id>tag:blog.webtron.jp,2011://1.85</id>

    <published>2011-10-24T10:22:19Z</published>
    <updated>2011-10-24T10:28:42Z</updated>

    <summary>「ペルソナ／シナリオ法」の授業でのユーザの行動モデリングのワークショップ。６人ぐ...</summary>
    <author>
        <name>webtron</name>
        
    </author>
    
        <category term="HCD" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="log" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="aiit" label="AIIT" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="hcd" label="HCD" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ペルソナ／シナリオ法" label="ペルソナ／シナリオ法" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ユーザモデリング" label="ユーザモデリング" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.webtron.jp/">
        <![CDATA[<div>「ペルソナ／シナリオ法」の授業でのユーザの行動モデリングのワークショップ。</div><div>６人ぐらいのチームに別れて（自分は赤組）、分担を決めてユーザ２人分の行動モデル分析を行いました。</div><div><br /></div><div>自分も含め要領を得ないので分担の仕方も微妙な感じに、とりあえず最初は Aさんのフローモデルを作成開始。</div><div>共同作業者と情報を共有／すりあわせしながら、ひとりが用紙にプロットしていく感じ。</div><div>けど、みんな読むスピードや読解力が違うので、自分は全然ペースが掴めず若干置いてけぼりに。＞本当にすいません...</div><div><br /></div><div>そして、分担を変えて今度はBさんのシーケンスモデルを開始。</div><div>こちらはパラグラフにわけて分担をしたので、自分の担当部分に関しては集中して理解できてよかった。</div><div>その集合知になるシーケンスモデル全体も（たぶん）うまい感じになっていると思う。</div><div>反面、自分の担当外のパラグラフの理解についてはほとんど頭に入ってなかった。</div><div><br /></div><div>そのあと、チーム内でできあがったモデルをみんなで共有／レビュー。</div><div>メンバーそれぞれが意見を出しながらになるので、自分の性格的に意見を理解するのに手一杯でモデルそのもののレビューができないと途中で気がついて、自分でざっくりBさんのフローモデルをつくってみたりとかしていたのだけど、見合わせるとこまではいかずにタイムアップ。</div><div>みなさん頭の回転よ杉で、ちゃんとチェックしたりしていてちょっとショック。</div><div><br /></div><div>今度はそのモデルをもとにユーザ要求を抽出していきます。</div><div>ここでついやってしまったのが、解決策やアイディアを考えながら抽出を行ってしまったこと。</div><div>自分も含めアイディアについてのほうに話題がいってしまって、機械的に抽出作業ができなかったのは反省材料かなと思う。</div><div>つか、抽出の途中でアイディアとか頭に浮かんでしまうのはどうしようもない気がするので、</div><div>それを心に留めておくとかするほうが心得的にはあっているのかも。</div><div><br /></div><div>そんなこんなで、モデリング作業ができましたが、自分的にはフローモデルのところがすっごく出来なかった気がしたので、レビュー中に途中まで書いてあったBさんで復習してみることにしました。</div><div><br /></div><div>授業でやってみて、最終的なモデルにまとめるのにかなりの書き直しが必要だなとわかっていたので、普段業務でワイヤフレームを作るときに使っている OmniGraffle を使いながら進めることにしました。</div><div>手書きで書いたものをベースに配置を最適化しながら、どんどんプロットしていきます。</div><div><br /></div><div>途中まで来て、疑問に思ったのは「どこに行った」とか「どうやって移動した（電車に乗った）」とかをどうプロットするかということでした。</div><div>そこまでの作業ではほとんどが「情報のやりとり」に関するフローだったのだけど、旅の実施のセンテンスでは「実際の旅行行動」に関するフローがでてきたのです。</div><div>で、判断としては「情報のやりとり」をメインにしてプロットすることにしました。この判断が正しいかどうかはわからないのですが。</div><div><br /></div><div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="flowmodel_b.png" src="http://blog.webtron.jp/assets_c/2011/10/flowmodel_b-thumb-560x380-216.png" width="560" height="380" class="mt-image-none" style="" /></span></div><div>そんなわけで、出来上がったのが上の図になります（<span class="mt-enclosure mt-enclosure-file" style="display: inline;"><a href="http://blog.webtron.jp/blogimgs/flowmodel_b.pdf">PDF版</a></span>）。</div><div>わかりやすさを向上させるための工夫としては、</div><div>・「情報の要求」を青、「情報の提供」をオレンジ、「依頼」を緑色に色分け</div><div>・やりとりの矢印を「要求」「提供」で１セットになんとなくまとめる</div><div>といったところでしょうか。</div><div><br /></div><div>ここまでやるのに約3.5時間ほど。疲れましたー。</div><div><br /></div> ]]>
        
    </content>
</entry>

<entry>
    <title>No title</title>
    <link rel="alternate" type="text/html" href="http://blog.webtron.jp/archives/2011/10/000084.html" />
    <id>tag:blog.webtron.jp,2011://1.84</id>

    <published>2011-10-06T05:58:11Z</published>
    <updated>2011-10-06T06:02:07Z</updated>

    <summary>あなたから学んだ Philosophy を胸に今日も僕たちは歩き続けます。ありが...</summary>
    <author>
        <name>webtron</name>
        
    </author>
    
        <category term="log" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="apple" label="apple" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.webtron.jp/">
        <![CDATA[<div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://blog.webtron.jp/blogimgs/t_hero.png"><img alt="t_hero.png" src="http://blog.webtron.jp/assets_c/2011/10/t_hero-thumb-560x510-213.png" width="560" height="510" class="mt-image-none" style="" /></a></span></div><div>あなたから学んだ Philosophy を胸に今日も僕たちは歩き続けます。</div><div>ありがとう。</div> ]]>
        
    </content>
</entry>

<entry>
    <title>第3回 HCD-Net サロン「ペーパープロトタイピング ワークショップ」</title>
    <link rel="alternate" type="text/html" href="http://blog.webtron.jp/archives/2011/08/000083.html" />
    <id>tag:blog.webtron.jp,2011://1.83</id>

    <published>2011-08-04T11:28:47Z</published>
    <updated>2011-08-04T11:55:28Z</updated>

    <summary>初の参加でどきどきでしたが行ってきました。（ほとんど写真とるの忘れていたので、文...</summary>
    <author>
        <name>webtron</name>
        
    </author>
    
        <category term="log" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="hcdnet" label="HCD-Net" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="paperprototyping" label="Paper Prototyping" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="userinterface" label="User Interface" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.webtron.jp/">
        <![CDATA[<div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="IMG_1499.JPGのサムネール画像" src="http://blog.webtron.jp/assets_c/2011/08/IMG_1499-thumb-560x418-210.jpg" width="560" height="418" class="mt-image-none" style="" /></span></div><div><br /></div><div>初の参加でどきどきでしたが行ってきました。</div><div>（ほとんど写真とるの忘れていたので、文字多めですがご容赦を）</div><div><br /></div><div><b><font class="Apple-style-span" style="font-size: 1.25em; ">◆ 課題</font></b></div><div>居酒屋のセルフオーダリングシステム</div><div><br /></div><div><b>コンセプト</b></div><div>・各テーブルからタッチパネル式オーダリング端末を使って、料理を注文できるシステム</div><div><br /></div><div><b>基本要件</b></div><div>・料理の注文から会計（おあいそ）まで端末で出来ること</div><div>・選んだ料理の変更や取り消しができること</div><div>・複数の料理を一度に注文できること</div><div>・端末画面の操作ですべての注文ができること（紙のメニューとの併用は不可）</div><div><br /></div><div><b>端末仕様</b></div><div>・11インチタッチパネル式液晶モニター</div><div>・フルカラーXGA（1024 x 768 ドット）</div><div>その他条件等</div><div>・店舗側は各テーブルの端末から入力されたオーダーを厨房で確認しながら調理を行う</div><div><br /></div><div><b><font class="Apple-style-span" style="font-size: 1.25em; ">◆&nbsp;</font></b><b><font class="Apple-style-span" style="font-size: 1.25em; ">シナリオ記述ノート</font></b></div><div>居酒屋に入店〜会計までの想定される状況を記述していく。「Aさんは、いつもの野球仲間とテーブルに着き、雑談をしながらメニューを眺めていた」という例が示されていたのだけど、僕たちのテーブルは</div><div><br /></div><div>・５名それぞれがポストイットにシナリオを記述する</div><div>・シナリオを記述する際に読み上げすることで即座に共有する</div><div>・記述されたポストイットを入店〜支払のながれでざっくりわけた台紙に貼っていく</div><div><br /></div><div>という感じで行った。</div><div><br /></div><div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="scenario.png" src="http://blog.webtron.jp/blogimgs/scenario.png" width="560" height="365" class="mt-image-none" style="" /></span></div><div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><br /></span></div><div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><div>個人的には</div><div><br /></div><div>・第三者的ではなく、自分がお客さんに「チャネリング」して居酒屋を脳内体験をしながら完結に状況を書き出す</div><div><br /></div><div>ようにした。</div><div>脳内体験は業務でもよくやる手法で、第三者的ではないユーザの視点で考えることがしやすい。</div><div><br /></div><div>作業は１畳ほどのテーブルを囲む形で行ったのだけど、このシナリオを列挙するだけでテーブルがいっぱいになってしまった。</div><div>続くタスクフローの作成はこのシナリオを見ながらやれると効率的なはずだから、壁を使ったほうがよかった（許可が降りたかはわかんないけど）。広い場所 or 壁必須だな。</div><div><br /></div><div><b><font class="Apple-style-span" style="font-size: 1.25em; ">◆&nbsp;</font></b><b><font class="Apple-style-span" style="font-size: 1.25em; ">タスクフロー記入</font></b></div><div>シナリオで記述した内容を、各要素に分けて関係性を図式化する</div><div>各要素とは</div><div>・だれが（人物名）</div><div>・何をするのか（行動）</div><div>・そのときに何を考えているのか（思考）</div><div>・そのとき使う道具は何か</div><div><br /></div><div><img alt="flow1.png" src="http://blog.webtron.jp/blogimgs/flow1.png" width="280" height="239" class="mt-image-none" style="" /></div></span><div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><br /></span></div><div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><div>タスクフローの記述はシナリオで列挙したポストイットをまとめていくことで行った。</div><div>類似内容のポストイットをまとめていき、時系列に並ベなおす。</div><div>実際のところ、お客側の行動をまとめるのが精一杯で（つまり人物名は全てお客）、厳密に各要素を持ったフロー図は作れなかった。</div><div><br /></div><div><b><font class="Apple-style-span" style="font-size: 1.25em; ">◆&nbsp;</font></b><b><font class="Apple-style-span" style="font-size: 1.25em; ">タスクフローシート作成</font></b></div><div>前項で記述したタスクフロー記入シートをもとに、基本フローを書き出して必要な画面要素を記述する。</div><div><br /></div><div><img alt="flow.png" src="http://blog.webtron.jp/blogimgs/flow.png" width="560" height="336" class="mt-image-none" style="" /></div></span><div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><br /></span></div><div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><div>このフローに関しては僕のテーブルでは正直ほとんどできていなかったように思う。</div><div>シナリオをまとめた時点で実際の画面をつくり始めてしまったので、画面作成と画面要素の抽出が同時進行で行われることになったためだ。</div><div><br /></div><div>時間的にもこのシートに全てのシナリオを網羅したフローを書き上げるのは無理だったと思うけど、特にこのあとのタスクフローシート作成ができなかったことで、タスクを全員で共有・把握できず、プロトタイピング作業中に画面要素の検討作業がかぶったりと、作業があっちにいったりこっちにいったりすることになってしまった。</div><div><br /></div><div>よかったのは、大事な機能とか、時系列によらない機能（例：トイレの案内表示、現在の勘定総計）などをプロトタイプ上に早い段階でプロットできたので、それを骨にして画面作りを進めることができたこと。</div><div>インタラクティブなUIを提案できたのも、このあたりの作業が寄与しているんじゃないかと思う。</div><div><br /></div><div><b><font class="Apple-style-span" style="font-size: 1.25em; ">◆&nbsp;</font></b><b><font class="Apple-style-span" style="font-size: 1.25em; ">ペーパープロトタイピング</font></b></div><div>えーと、作業フローに従うとここで始めてプロトタイピング開始なのだけど、僕らのテーブルにはもういくつかの画面のラフがころがっていた。</div><div><br /></div><div><a href="http://blog.webtron.jp/blogimgs/IMG_1500.JPG"><img alt="IMG_1500.JPG" src="http://blog.webtron.jp/assets_c/2011/08/IMG_1500-thumb-560x418-208.jpg" width="560" height="418" class="mt-image-none" style="" /></a></div></span><div><br /></div><div>ここでタスクフローシートがしっかり出来ていると、もっとスムーズに設計作業ができた気がするのだけど、なにしろ最初のシナリオを時系列にまとめたものが唯一の頼り。</div><div><div><br /></div><div>画面の構成要素を検討したりする一方、新しい機能要件がでてきたりと、みんな楽しみながら作業はできていたものの、進行はだいぶ混沌とした感じだったと思う。よく例えればより現場っぽいって感じ。</div><div><br /></div><div>途中でコンセントの長谷川さんにスクロールエリアのちょいテクを教えてもらって取り入れたり。実はこのテク以前に業務でやったことがあって、iPadで画面上のスクロールの範囲をどうするかってケースだったのだけど、そのときは正式なテクだと思ってなかったんでちょっと嬉しかったり。</div></div><div><br /></div><div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="hcd.png" src="http://blog.webtron.jp/blogimgs/hcd.png" width="560" height="264" class="mt-image-none" style="" /></span></div><div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><br /></span></div><div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><div>あーだこーだやっているうちにタイムアップとなった。</div><div>...やばい、戻る系とかやり直し系とかちゃんと検証できていないぞ。</div><div><br /></div><div><b><font class="Apple-style-span" style="font-size: 1.25em; ">◆&nbsp;</font></b><b><font class="Apple-style-span" style="font-size: 1.25em; ">ユーザテスト</font></b></div><div>各テーブルから１名を他のテーブルへテスターとして送り込む。</div><div>僕のテーブルには新横浜ユーザビリティ研究会で何度かお会いしたことがあった＠hokorinさんが刺客wとしてやってきた。やばい。</div><div><br /></div><div>テスターは与えられたタスクを実際にペーパープロトタイプを使って行っていく。</div><div>テスターの操作に対する反応をホストが行う。ホストは操作説明を示唆したりヒントを与えたりしてはいけない。要はデバイス役。</div><div><br /></div><div>ここで早々に問題発生。勢いで最後につけた「いらっしゃいませ画面」が仇となって、メインのメニュー画面へたどり着けずにタスク未達成。</div><div><br /></div><div>「もういっかい！」とゴリ押しで、メインメニューの画面からタスクをもう一度やってもらう。全員必死だから、このときはホストは全員でフォローしあう状態w</div><div>ある程度は達成できたものの修正系がちゃんと検証できていなかったりインタラクションのホスティングがうまくできてなかったこともあって、結構いろいろ指摘をうけた。</div><div><br /></div><div>テスターさんを変えてもう１つのタスク。</div><div>こんどは清算と清算後の割り勘ができるか。やった、うちらの案、割り勘機能ありますYO!　というわけでスムーズにタスク達成。高評価をいただいた。...と思う。</div><div>時間があまったので、同じテスターさんに１つめの注文のタスクをやってもらったのだけど、さきほどのテスト後に修正を加えていたおかげで、こちらもスムーズにタスク達成。パチパチパチ！</div><div><br /></div><div>テスターさんの指摘は本当にためになるし、この時間を通して全員が画面のフローを把握したり、即座に問題点を修正することができたのは、ペーパープロトタイピングならではだと思う。ペーパープロトタイピング強力。</div><div><br /></div><div><b><font class="Apple-style-span" style="font-size: 1.25em; ">◆&nbsp;</font></b><b><font class="Apple-style-span" style="font-size: 1.25em; ">講評会</font></b></div><div>それぞれのテーブルの代表１名ができあがったプロトタイプを発表。</div><div>やたら機能が充実しているテーブル、質実剛健なテーブル、優等生なテーブル、いろいろありました。あー、目から鱗だわという機能実装をしているテーブルもあって勉強になる。</div><div>僕のテーブルはDeNAから参加の床鍋さんがプレゼン。ユーモアたっぷりのプレゼンでいいところが伝わったと思う。個人的に付け加えとして、文字や画面構成要素が他のチームよりでかめなのは、酔っぱらい対策＋テーブルで席が離れた人が見えるようにという配慮からなのですよん。</div><div><br /></div><div><b><font class="Apple-style-span" style="font-size: 1.25em; ">◆&nbsp;</font></b><b><font class="Apple-style-span" style="font-size: 1.25em; ">終了</font></b></div><div>そんなわけで、あっという間でしたがめちゃめちゃ楽しい時間を過ごすことができました。業務でもこのぐらいフランクに和気あいあいできたら素晴らしいのに。</div><div><br /></div><div>個人的に悔いがあるとしたら、タスクフローのまとめがもう少しキチンとやりたかったのと、時間ぎれでできなかったユーザテスト前の操作フローの検証をできていればなあと。</div><div>特にタスクフローのまとめ方は勉強不足で有効なメソッドも手持ちにないので、スキルとして強化していかないといけないと。</div><div><br /></div><div>以上ワークショップの報告でした。</div><div>おつかれさまでした！</div><div><br /></div><div>関連：<a href="http://www.hokorin.com/2011/07/20110729.html" target="_blank">隣り合わせの灰と青春</a>（@hokorinさんのレポート）</div></span></div></div></div></div> ]]>
        
    </content>
</entry>

<entry>
    <title>WWDC 2011</title>
    <link rel="alternate" type="text/html" href="http://blog.webtron.jp/archives/2011/06/000082.html" />
    <id>tag:blog.webtron.jp,2011://1.82</id>

    <published>2011-06-08T00:09:56Z</published>
    <updated>2011-06-08T07:06:12Z</updated>

    <summary>はじめての参加でいろいろ戸惑いながらも参加をしております。昨日の Keynote...</summary>
    <author>
        <name>webtron</name>
        
    </author>
    
        <category term="iPhone" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="log" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="wwdc" label="WWDC" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.webtron.jp/">
        <![CDATA[<div>はじめての参加でいろいろ戸惑いながらも参加をしております。</div><div>昨日の Keynote はやっぱり雰囲気がとても特別で、朝の３時すぎから並んだ価値はあったと思います。</div><div>一緒にならんだドイツ、アメリカ、イギリス、中国といったワールドワイドな人たちと話せたのもすごく貴重な経験。けど、UI デザイナーはやっぱ少ない感じですね（あたりまえか）。</div><div>思った以上に忙しかったり、疲れたりでやっつけ気味ですが昨日の様子をちょっとだけ写真で。あとでビデオも追加します。（6/8 16:00 ビデオ追加しました）</div><div><br /></div><iframe width="560" height="349" src="http://www.youtube.com/embed/6vu7rGt9Z9Q" frameborder="0" allowfullscreen=""></iframe><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://blog.webtron.jp/blogimgs/IMG_1426.JPG"><img alt="IMG_1426.JPG" src="http://blog.webtron.jp/assets_c/2011/06/IMG_1426-thumb-560x418-187.jpg" width="560" height="418" class="mt-image-none" style="" /></a></span><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://blog.webtron.jp/blogimgs/IMG_1428.jpg"><img alt="IMG_1428.jpg" src="http://blog.webtron.jp/assets_c/2011/06/IMG_1428-thumb-560x749-189.jpg" width="560" height="749" class="mt-image-none" style="" /></a></span><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://blog.webtron.jp/blogimgs/IMG_1427.jpg"><img alt="IMG_1427.jpg" src="http://blog.webtron.jp/assets_c/2011/06/IMG_1427-thumb-560x749-191.jpg" width="560" height="749" class="mt-image-none" style="" /></a></span><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://blog.webtron.jp/blogimgs/IMG_1440.JPG"><img alt="IMG_1440.JPG" src="http://blog.webtron.jp/assets_c/2011/06/IMG_1440-thumb-560x418-193.jpg" width="560" height="418" class="mt-image-none" style="" /></a></span><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://blog.webtron.jp/blogimgs/IMG_1443.JPG"><img alt="IMG_1443.JPG" src="http://blog.webtron.jp/assets_c/2011/06/IMG_1443-thumb-560x418-195.jpg" width="560" height="418" class="mt-image-none" style="" /></a></span><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><a href="http://blog.webtron.jp/blogimgs/IMG_1444.JPG"><img alt="IMG_1444.JPG" src="http://blog.webtron.jp/assets_c/2011/06/IMG_1444-thumb-560x418-197.jpg" width="560" height="418" class="mt-image-none" style="" /></a></span>]]>
        
    </content>
</entry>

<entry>
    <title>Passcode screen for MoneyTron</title>
    <link rel="alternate" type="text/html" href="http://blog.webtron.jp/archives/2011/04/000081.html" />
    <id>tag:blog.webtron.jp,2011://1.81</id>

    <published>2011-04-25T10:02:38Z</published>
    <updated>2011-04-25T10:06:56Z</updated>

    <summary>MoneyTron の次期アップデートではパスコードの実装を予定しています。これ...</summary>
    <author>
        <name>webtron</name>
        
    </author>
    
        <category term="iPhone" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="moneytron" label="MoneyTron" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="userinterface" label="User Interface" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="iphone" label="iPhone" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.webtron.jp/">
        <![CDATA[<div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="passcode_highdef.png" src="http://blog.webtron.jp/blogimgs/passcode_highdef.png" width="560" height="400" class="mt-image-none" style="" /></span></div><div><br /></div><div>MoneyTron の次期アップデートではパスコードの実装を予定しています。</div><div>これはそのデザインです。地色のテクスチャや光彩の色味を現在のものより少し大人っぽくしたいなあとうっすら考えてますが、どんなもんでしょうね。</div><div><br /></div><div>The next update of MoneyTron will feature passcode lock function.</div><div>This is sneak peek of its design.&nbsp;</div> ]]>
        
    </content>
</entry>

<entry>
    <title>iPad without physical home button means what...</title>
    <link rel="alternate" type="text/html" href="http://blog.webtron.jp/archives/2011/01/000080.html" />
    <id>tag:blog.webtron.jp,2011://1.80</id>

    <published>2011-01-18T17:13:17Z</published>
    <updated>2011-01-18T17:18:25Z</updated>

    <summary>There are rumors that next gen iPhone / ...</summary>
    <author>
        <name>webtron</name>
        
    </author>
    
        <category term="iPhone" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="log" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="ipad" label="ipad" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.webtron.jp/">
        <![CDATA[<div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="nextgenipadwithouthomebtn.png" src="http://blog.webtron.jp/blogimgs/nextgenipadwithouthomebtn.png" width="560" height="205" class="mt-image-none" style="" /></span></div><div><br /></div><div>There are rumors that next gen iPhone / iPad will not have home button.</div><div>I think that it especially would be a great feature for iPad if they're true.</div><div><br /></div><div>As you know, iPad is designed as having no right way or wrong way of holding it.</div><div><br /></div><div>Jony Ive&nbsp;</div><div><i>"The face of product is pretty much defined by a single peace of multi-touch glass, and that's it.</i></div><div><i>There is no pointing device, There isn't even a single orientation,</i></div><div><i>There is no up, there is no down, there is no right or wrong way of holding it.</i></div><div><i>I don't have to change myself to fit product ... It fits me."</i></div><div><br /></div><div>This philosophy is pretty great, also I've been having amazing experience through iPad.</div><div>and I realized there are some interfaces unsuitable for this philosophy.</div><div><br /></div><div>・Home Button</div><div>・Mute (or Orientation Lock）Button</div><div>・Lock Button</div><div><br /></div><div>I think these interfaces seems to have usability problem.</div><div>For instance, I miss the home button sometimes.</div><div>This problem is caused by buttons <b>fixed physically</b> on device, I think.</div><div><br /></div><div>The button should be placed same place "<b>against the user</b>" always.</div><div>Buttons fixed physically are placed different againt the user on each orientation confuse the user.</div><div><br /></div><div>If using gestures could replace home button, it would be great also it would fit its philosophy more.</div><div><br /></div><div><br /></div><div>次期 iPhone / iPad で home btn がなくなるという噂がでてきていますね。</div><div>噂が本当なら特に iPad にとってとてもよい feature になるのではないかと思いました。</div><div><br /></div><div>iPad はデバイスをどのように持ってもいいようにデザインされています。</div><div><br /></div><div>Jony Ive</div><div><i>"iPad を形作るもののほとんどは、一枚のマルチタッチガラス、それだけです。</i></div><div><i>ポインティングデバイスも、縦横や上下を決めるものもありません。持ち方のルールもありません。</i></div><div><i>製品に自分をあわせるのではなく、製品が自分の一部になるのです"</i></div><div><br /></div><div>この思想はとてもすばらしく、実際 iPad を通して得た経験は驚くべきものです。</div><div>しかしわずかながらその理念にそぐわないインターフェイスが残されていることに気付いたのです。</div><div><br /></div><div>・ホームボタン</div><div>・Mute (or Orientation Lock) スイッチ</div><div>・ロックボタン</div><div><br /></div><div>これらはユーザビリティ上の問題をかかえているように思います。</div><div>例えば iPad を使っているときにホームボタンを見失ってしまうことってよくありませんか？</div><div>この問題はデバイス上にフィジカルに固定されているために引き起こされていると考えられます。</div><div><br /></div><div>これらボタンはユーザに対して同じ位置にあるべきと考えられるのですが、</div><div>フィジカルな実装上の制限からデバイスの持ち方によってボタンの位置がユーザに対して上下左右に移動してしまい、それが混乱を引き起こしてしまうのです。</div><div><br /></div><div>もしジェスチャを利用することでこの問題が解決できるのならとてもすばらしいことで、思想をさらに一歩完全に近づけるものだと思います。</div> ]]>
        
    </content>
</entry>

<entry>
    <title>MoneyTron : Editing categories sneak peak</title>
    <link rel="alternate" type="text/html" href="http://blog.webtron.jp/archives/2011/01/000079.html" />
    <id>tag:blog.webtron.jp,2011://1.79</id>

    <published>2011-01-05T09:24:37Z</published>
    <updated>2011-01-05T10:03:16Z</updated>

    <summary>MoneyTron : Editing categories sneak pea...</summary>
    <author>
        <name>webtron</name>
        
    </author>
    
        <category term="iPhone" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="log" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="moneytron" label="MoneyTron" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="iphone" label="iPhone" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.webtron.jp/">
        <![CDATA[<br /><div><iframe src="http://player.vimeo.com/video/18363989?portrait=0" width="400" height="711" frameborder="0"></iframe><p><a href="http://vimeo.com/18363989">MoneyTron : Editing categories sneak peak</a> from <a href="http://vimeo.com/user2309571">webtron</a> on <a href="http://vimeo.com">Vimeo</a>.</p></div><div><br /></div><div>MoneyTron の次の Update の情報を少しだけ。</div><div><br /></div><div>次回の Update の目玉機能として「カテゴリの編集／新規作成」があります。</div><div>非常にたくさんのリクエストをいただいている機能で、次回の Update で提供できることにとてもわくわくしています！</div><div><br /></div><div>アプリの中枢部分にかかわる機能なだけにテストも十分に行う必要があり、まだすぐにリリースという状況ではありませんがムービーだけでもご覧いただければと思います。</div><div><br /></div><div>MoneyTron next update will bring some features,&nbsp;one of major feature is "Editing Categories".</div><div>We've recieved many requests about this feature, so we're very excited.</div><div><br /></div><div>We're on testing phase now,&nbsp;so we can provide just the sneak peak video for now.</div>]]>
        
    </content>
</entry>

<entry>
    <title>MoneyTron : New Year New You</title>
    <link rel="alternate" type="text/html" href="http://blog.webtron.jp/archives/2011/01/000078.html" />
    <id>tag:blog.webtron.jp,2011://1.78</id>

    <published>2011-01-05T09:10:18Z</published>
    <updated>2011-01-05T09:21:32Z</updated>

    <summary>新年からはじめるお小遣い帳というわけで、iTunes の「New Year Ne...</summary>
    <author>
        <name>webtron</name>
        
    </author>
    
        <category term="iPhone" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="log" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="moneytron" label="MoneyTron" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="iphone" label="iPhone" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.webtron.jp/">
        <![CDATA[<span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: Georgia, 'Times New Roman', Times, serif; font-size: 12px; line-height: 22px; "><div><span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: Georgia, 'Times New Roman', Times, serif; font-size: 12px; line-height: 22px; "><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="" src="http://blog.webtron.jp/blogimgs/newyearnewyou2011.png" width="522" height="300" class="mt-image-none" style="" /></span></span></div><div><br /></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: Georgia, 'Times New Roman', Times, serif; font-size: 12px; line-height: 22px; ">新年からはじめるお小遣い帳というわけで、iTunes の「New Year New You」の Money カテゴリで <a href="http://bit.ly/fgdFZn">MoneyTron</a> がおすすめされております。</span></div><div><span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: Georgia, 'Times New Roman', Times, serif; font-size: 12px; line-height: 22px; "><br /></span></div>MoneyTron has been chosen for the "New Year New You" in Japan App Store !</span>]]>
        
    </content>
</entry>

<entry>
    <title>MoneyTron : iTunes Rewind 2010</title>
    <link rel="alternate" type="text/html" href="http://blog.webtron.jp/archives/2011/01/000077.html" />
    <id>tag:blog.webtron.jp,2011://1.77</id>

    <published>2011-01-05T09:02:21Z</published>
    <updated>2011-01-05T09:09:22Z</updated>

    <summary>去年のことになりますが MoneyTron が iTunes Rewind 20...</summary>
    <author>
        <name>webtron</name>
        
    </author>
    
        <category term="iPhone" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="log" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="moneytron" label="MoneyTron" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="iphone" label="iPhone" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.webtron.jp/">
        <![CDATA[<div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="rewind2010.png" src="http://blog.webtron.jp/assets_c/2011/01/rewind2010-thumb-560x226-182.png" width="560" height="226" class="mt-image-none" style="" /></span></div><div><br /></div><div>去年のことになりますが <a href="http://bit.ly/fgdFZn">MoneyTron</a> が iTunes Rewind 2010 に選ばれております。</div><div>ありがとうございます！</div><div><br /></div>MoneyTron has been chosen for the iTunes Rewind 2010 in Japan !! Thanks a lot !]]>
        
    </content>
</entry>

<entry>
    <title>Notes Appとメンタルモデル</title>
    <link rel="alternate" type="text/html" href="http://blog.webtron.jp/archives/2010/11/000076.html" />
    <id>tag:blog.webtron.jp,2010://1.76</id>

    <published>2010-11-04T14:19:44Z</published>
    <updated>2010-11-04T15:13:43Z</updated>

    <summary>先日行った UI / UX Meeting #1。 UI / UX に関して各々...</summary>
    <author>
        <name>webtron</name>
        
    </author>
    
        <category term="iPhone" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="log" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="userexperience" label="User Experience" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="userinterface" label="User Interface" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.webtron.jp/">
        <![CDATA[<div>先日行った UI / UX Meeting #1。</div><div> UI / UX に関して各々の経験や知識を共有して、深めていこうという勉強会です。</div><div><br /></div><div>第１回の参加者は<a href="http://twitter.com/suzukismooth" target="_blank">@suzukismooth</a>, <a href="http://twitter.com/overislandjp" target="_blank">@overislandjp</a>, <a href="http://twitter.com/novi_" target="_blank">@novi_</a>, <a href="http://twitter.com/we6tr0n" target="_blank">@we6tr0n</a> の４名。</div><div> アジェンダは「UI デザインにおける、ユーザの期待するカタチと論理的な情報の階層構造に従ったカタチの対峙」でした。</div><div><br /></div><div>UI を考えているときに、論理的にはこういう手順になるけど、ユーザからの視点でみるとその手順が不自然であったり不便であったりする、ということが結構あると思います。</div><div><br /></div><div>そんなときにどういった対処をすればよいか、実際にどういうケースがあるのかをそれぞれ話そうということで、僕は例としてApple 純正の メモApp をあげました。</div><div><br /></div><div><b>「Notes Appとメンタルモデル」</b></div><div><span class="Apple-style-span" style="color: rgb(0, 1, 0); font-family: 'Hiragino Kaku Gothic ProN'; font-size: 12px; "><br /></span></div><div><b></b><span>メモAppで新規メモを作成する場合、ナビゲーションバーの右側アイテムの「＋」ボタンをタップします。</span></div><div><span><br /></span></div><div><span><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="fig1.png" src="http://blog.webtron.jp/blogimgs/fig1.png" width="400" height="140" class="mt-image-none" style="" /></span></span></div><div><span><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><br /></span></span></div><div><span><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><div>すると</div><div>・画面が新規メモ画面へ遷移</div><div>・編集を開始</div><div>します。</div><div>つまり、上記２つの機能が「＋」ボタンにアサインされているってことになります。</div><div><br /></div><div>図にするとこんな感じです。</div><div><br /></div><div><a href="http://blog.webtron.jp/blogimgs/fig4.png"><img alt="fig4.png" src="http://blog.webtron.jp/assets_c/2010/11/fig4-thumb-560x164-174.png" width="560" height="164" class="mt-image-none" style="" /></a></div><div><br /></div><div><div>でも、</div><div>・メモを編集するための「編集開始」操作はメモ欄をタップする操作で提供されているのだから</div><div>・「＋」ボタンは「新規メモ」を生成（表示）する機能のみを提供すればよいのではないか（重複した機能を割当なくてもよいのではないか）</div><div>・そのほうがシンプルだし、論理的構造に則っていると思える</div><div>という疑問もわいてきます。</div></div><div><br /></div><div><a href="http://blog.webtron.jp/blogimgs/fig3.png"><img alt="fig3.png" src="http://blog.webtron.jp/assets_c/2010/11/fig3-thumb-560x164-176.png" width="560" height="164" class="mt-image-none" style="" /></a></div><div><br /></div><div><div>なぜ「＋」ボタンが２つの機能を提供するべきなのかは、ユーザのメンタルモデルに関係していると思われます。</div><div><br /></div><div>ユーザが新規メモを作成する場面</div><div>・ユーザはメモを「書く」ために新規メモを生成する</div><div>・そのためユーザは新規メモ画面へ遷移し、かつ「編集開始」された状態を予想している</div><div><br /></div><div>そこで</div><div>・「+」ボタンに前述の２つの機能を割り当てて</div><div>ユーザのメンタルモデルに近い操作を提供しようとしているのです。</div><div><br /></div><div>その後につづく操作について考えてみます。</div></div><div><br /></div><div><div>ここで注意しなければいけないのは、</div><div>・「編集の開始操作」はこの時点でユーザに意識されない（編集モードに認知的に入っていない）</div><div>という部分です。</div><div><br /></div><div>新規メモを作成し、ユーザがメモを書き終わったとき、またはキャンセルしたいときは</div><div>・ユーザは編集の開始と対になる編集の「完了（Done）」操作をしようとはせず</div><div>・一覧にもどろうとする＝「戻る」ボタンを探す</div><div>という動作をするのではないでしょうか。</div><div>最初から開いていた（無認知のうちに開けられた）扉を閉じようとはしないものです。</div></div><div><br /></div><div><img alt="fig2.png" src="http://blog.webtron.jp/blogimgs/fig2.png" width="400" height="242" class="mt-image-none" style="" /></div><div><br /></div><div><div>もし「戻る」を編集モード中に提供しないとなると、</div><div>上記の動作で「戻る」ボタンを見つけづらくなり</div><div><br /></div><div>「安全な探検」：</div><div>・ユーザは何の代償も払うことなく操作を試すことができなくてはいけません</div><div>・容易に操作前の状態に戻れること（避難口）</div><div><br /></div><div>に反する事態になってしまうわけです。</div><div><br /></div><div>そこでナビゲーションバー左側アイテムのボタンに</div><div><br /></div><div>・編集を完了する</div><div>・メモ一覧に戻る</div><div><br /></div><div>という２つの機能をアサインし、</div><div><br /></div><div>・編集モード中もこのボタンを提供する</div><div><br /></div><div>ことで、この問題を解決しているのです。</div><div><br /></div><div><img alt="fig5.png" src="http://blog.webtron.jp/blogimgs/fig5.png" width="400" height="140" class="mt-image-none" style="" /></div><div><br /></div><div><div>ボタンのラベルは「Back」ではなく、「Notes」となっていることが単に戻るだけではないことを示しているように思われます。</div><div><br /></div><div>このように、なんてことのない部分をとりあげてみても、</div><div>ユーザが自然と感じる操作が論理的な手順と一致しないケースがあることがおわかりいただけたと思います。</div><div><br /></div><div>こんな感じでだいぶゆるいですが、UI / UX Meeting 今後も地味につづけていきたいと思います。参加自由ですので興味があればぜひお声がけください。</div><div><br /></div><div>PS.</div><div>@overislandjp の未発表 App についてあーだこーだ言う<a href="http://www.ustream.tv/recorded/10357040">ビデオ</a>もUPしております。</div><div>こういうのもみんなで集まったかいがあって楽しいですね。</div></div></div><div><br /></div></span></span></div> ]]>
        
    </content>
</entry>

<entry>
    <title>第２回インタラクションデザイン研究会</title>
    <link rel="alternate" type="text/html" href="http://blog.webtron.jp/archives/2010/10/000075.html" />
    <id>tag:blog.webtron.jp,2010://1.75</id>

    <published>2010-10-30T10:32:17Z</published>
    <updated>2010-10-30T10:39:15Z</updated>

    <summary>第２回インタラクションデザイン研究会に参加してきました。Google のなかの人...</summary>
    <author>
        <name>webtron</name>
        
    </author>
    
        <category term="log" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="userexperience" label="User Experience" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="userinterface" label="User Interface" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://blog.webtron.jp/">
        <![CDATA[<div><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="sigixd2.JPG" src="http://blog.webtron.jp/assets_c/2010/10/sigixd2-thumb-560x418-171.jpg" width="560" height="418" class="mt-image-none" style="" /></span></div><div><br /></div><div>第２回インタラクションデザイン研究会に参加してきました。</div><div>Google のなかの人たちが UX / UI への取り組みについてお話してくれました。</div><div><br /></div><div>全体としてはメンタルモデルやヒューリスティックの話など、UI / UX においてなにか特殊なことをやっているというよりは、基本に忠実にそしてきめ細かくプロトタイピングから効果測定までを行っているという印象でした。</div><div><br /></div><div>「データを信じる」という Google の精神が マーケティング／デザイナー／エンジニアまで確実に浸透していて、みながそれを忠実に実行しているという一貫性はさすがだなと思いました。効果測定の丁寧さも Google ならではだなと。</div><div><br /></div><div>ところで 社内でプロダクトのテストをすることを「DogFood」といっていましたがこれって Google 内部用語なんですかね。ちょっと面白い。</div><div><br /></div><div>検索結果の表示の内容やデザインが幾度も更新され、改善されつづけているというお話もありました。good design is invisible とはノーマンの言葉ですが、ユーザに気づかれないほど自然でいながら、よりよいものを提供しようと努力をつづけるこのような姿勢はすばらしいです。</div><div><br /></div><div>最後のしめではよりよい日本をつくっていきましょうという言葉もあり、現在の日本の状況を憂いながらも成長していこうという気持ちにはとても共感がわきました。</div><div><br /></div><div>こんな貴重な機会を用意してくれたインタラクションデザイン研究会さんやGoogleさんに感謝です。運営おつかれさまでした。</div><div>インタラクションデザイン研究会、今後もフォローを続けたいと思います。</div><div><br /></div><div><a href="http://sigixd.org/">http://sigixd.org/</a></div> ]]>
        
    </content>
</entry>

</feed>

