menu

13.06.10

category

tags

comments

0

trackbacks

0

permalink

12.02.11

category

comments

1

trackbacks

0

permalink

Time spans of UX

最近いろいろなところで UX の重要性について語られることが多いのだけど、UX の意味ってすごく広い。
UX をどう捉えるかによってデザインされたアウトプットも変わってくるはずだと思うので、定義を正しく捉えることってとっても大切。そこで、自分がUX について考えてきた過程を少し書いてみることにしました。

◆UX の定義

自分は UI デザイナーという立場から UX というものに出会いました。
最初の自分の UX の定義は「UI の使い心地、ユーザビリティ」や「インタラクション・ビジュアルデザイン」を通じたユーザ体験という感じだったんです。UI Oriented という感じです。

ところが2011年から参加している AIIT の Human Centered Design の履修プログラムで出会った Web サービス系のデザイナーさんや SIer さん達と話をするうちに UX の定義が自分のものと何か根底から違っていることに気がついたのです。
いや、正確にいうと定義というよりも「UX で最も重要視していること」なのかな。
サービス系の人たちは UX =「サービスを使う過程のユーザ体験、サービスを利用することで成し得た体験」、UXD(UX Design)≒「サービスデザイン」といった割と大きな視点で UXを捉えているのです。この捉え方を Service Oriented と勝手に命名。
こちらのほうが世間一般に言われている UX に近い気もします。

両方ともたしかに UX だと考えられるんだけど... というわけで自分のなかに異なる UX の定義が同居することになりました。
この2つの関係性はどうなってるのか、はたまたこれ以外の定義が存在するのか。
自分のなかに疑問が生まれたのです。

◆UX白書(User Experience White Paper)に出会う

ユーザビリティや HCD に関する勉強会「新横浜ユーザビリティ研究会」というのがあります。自分は第3回あたりからずっと参加しているのだけど、その第6回に HCD Value(HCDの実践をコンセプトとしたコミュニティ)の方々が行ったセッションでこの疑問を解決する糸口を得ることになります。

セッションの内容は UX白書(User Experience White Paper)という 2010年に Dagstul セミナーで議論された「ユーザエクスペリエンスの概念」についてまとめた宣言文を HCD Value が翻訳し、その概要について報告をするというものでした。

その UX 白書のなかに「TIME SPANS OF USER EXPERIENCE」というのがあって、そこに解説とともにこんな図があったのです。

timespans-of-UX.png

自分の理解しているレベルで説明すると

Anticipated UX : 
プロダクトを使う前のUX。プロダクトを使うことでできることを"ユーザが想像する"体験。
>ブランドイメージや販売促進戦略などをデザインすることでよりよいUXを提供できると思う。

Momentary UX:
プロダクトを使っている最中のUX。使い心地や効率性の体験。
>ユーザビリティやインタラクションをよりよくデザインすることが重要。自分の最初に考えていたUXの定義はこれだったのか...

Episodic UX:
使用後のUX。プロダクトを使って成し遂げたことを振り返って感じる体験。
>サービスやアプリケーション設計をきちんとデザインすることでユーザの要求を満たすことができる。要求以上のことを提供できれば、それはすばらしい体験につながる。Service Oriented はこのあたりと次の Cumlative を合わせた感じなのかな...

Cumulative UX:
上記3つの体験をあわせた全体から感じる体験。
>よいUXを提供することがユーザの満足感やエンゲージメント(愛着)につながるのではないか。

このように "UX は Time Span ごとに捉えることができるのだ" と考えると、自分のなかの UX の定義に対する疑問がすうっと消化されました。ただ、UX 白書に出会ったのが8月で AIIT に通い出したのが 10月からですから、ピーンとくるのに大分時間がかかってますけどね。さらに自分が認識していた2つの UX に加えて Anticipated と Cumulative というもう2つの UX があることがわかりました。

◆全ての Time Span で UX をデザインする

自分が UI Oriented や Service Oriented と思っていた UX は実は Cumulative UX という全体の体験の一部に過ぎなかったわけです。
それまでに自分がデザインしたプロダクトを振り返ると、理解できていなかった UX へのケアが不足しているのがわかって、己の未熟さにしょんぼりしたりしましたが、同時に UX を Time Span でセグメントすることでよりよい UX を提供するにはどのような方策を取ればいいか、という改善点を容易に見つけることができたのは、この概念を知ることができたからこそだと思っています。

◆まとめ

正直自分は勉強嫌いだし、理論よりも実践してなんぼと思っているタイプなのだけど、こういうことがあると勉強も大事だよねえ、と思わざるをえないです。クライアントワークでこの4つの UX にフルコミットできるのってなかなかないケースだとは思うけど、こんど自分でアプリを出すときにはこれを意識しながらプランをつくっていこうと思うのでありました。

関連リンク:
新横浜ユーザビリティ研究会:http://asanoken.jugem.jp/?cid=23
HCD Value:http://site.hcdvalue.org/
User Experience White Paper:http://www.allaboutux.org/uxwhitepaper




11.12.01

category

comments

0

trackbacks

0

permalink

MapFan for iPhone 1.5 が iPad のトップ有料で1位を獲得

mzl.eycobknf.480x480-75.jpg

UI 設計/デザインをお手伝いさせていただいている MapFan for iPhone 1.5 がリリースされております。
大きく進化したのは横画面対応、iPad 対応(ユニバーサル)。iPad のトップ有料で1位を獲得しました。

これは INCREMENT P スタッフのみなさんのモチベーションの高さ、ものづくりにおける包容力、大胆な戦略をとれる決断力のなせる技だと思います。

mzl.cmhdjcco.480x480-75.jpg

そして、制作サイドではやはり実装とデザインが深くコミュニケーションしながらものづくりができることはとても強力なのだと実感しました。
実装を行っている HMDT さんとは、Agile 的なこともずいぶん前からあたりまえのようにやっていましたし、少しの無茶もいえる関係があったからこそクオリティを生み出すことができたのだと。

こういう形でプロジェクトに関わることができ、今回こうして結果もついてきたことは本当に嬉しいことです。みなさまに感謝!

関連リンク:


11.11.04

category

comments

0

trackbacks

0

permalink

[AIIT]評価グリッド法による価値分析

今日の演習は評価グリッド法を用いた価値分析だった。
フローモデル図のときと同じく、また理解がしきれずもやもやが残ってしまったので少し整理をしてみた。
講義で教えていただいたことと復習のために web などで調べたことを自分的な基準で統合して書いているので、もし理解が間違っている部分があればぜひ指摘してもらいたいです。


評価グリッド法

どのようなことができるか
・サービスやプロダクトに対してのユーザの評価を
 「抽象的価値」「感覚的理解」「客観的・具体的」と階層的に把握できる
・被験者(interviewee)の本音が聞ける

どんなときに使えるか
・(サービスやプロダクトの)スペックの判断材料
・改善の糸口の発見、改善後のベネフィットの把握

gridmethod111103.png

これだけ聞くとマーケティング的な側面しか見えずらいのだけど、調べていくとこれがメンタルモデル・アプローチ(この言葉すごくしっくりきた!)におけるユーザ側のモデルの一種だと考えると、以前演習したペルソナ/シナリオ法の3つのモデル(フロー、文化、シーケンス)と並ぶペルソナづくりの素材にもなると感じた。
KA 法は価値項目の抽出が効果的にできる反面ユーザ像が若干希薄になる感じがするのだけど、評価グリッドはその人自身の価値観のモデルが浮き出てくる感じ。

mentalmodel111103.png

どういうふうにやる?
・半構造化インタビュー(用語難し杉)
 事前に大まかな質問事項を決めておき、
 回答者の答えによってさらに詳細にたずねて行く簡易な質的調査法
・比較対象物を用意してそれらを被験者に比較評価してもらい、その評価理由を聞き出す
・ラダリング技法
 上位概念(how、どのように好ましいか?)・下位概念(what、好ましくあるための条件とは?)の抽出


演習

・この手法を理解しよう
・プログラム上の共通課題「旅支度」
というところから(だと思う)、既に調査済みの4人分の旅支度に関するコンテキストインタビューメモの項目を比較対象物として、3人1組で「interviewer」「interviewee」「recorder」役をそれぞれ実習。調査した結果は9人組になって1つの構造図にした。

インタビュー実施
1つ1つの行動についてのラダリングはまあなんとかできて、横方向の構造化?はできた。
inteviewer と recorder が別なので「あ、いまラダーアップしたつもり」なんだけどラダーダウン方向に記録されたりすることはあったけど、あとでみんなでレビューしたときにそれぞれの意見を出し合って修正できたから問題なし。
あと、これは復習しているときに見つけた blog に書かれていて「うん、たしかに」と思ったことなのだけど、その場で3人が記録されたグリッドを見ながらやるとラダーの方向が整地されるのと interviewee に内観的なことが起って答えも整地されるので「グリッドを共有しながらインタビューする」というのはいいですな。

難しかったのは比較素材がサービスやプロダクトといった具体的なものではなくて、インタビューのメモだったということ。そこから「比較対象を決定する」ことがつまずきどころ。

Q:No1さんとNo2さんの「持っていくアイテム」について、どちらが好ましく思いますか?(一対比較になるのかな?)

みたいに始められると、ラダリングっぽさ?がでてよかったのかもしれない。
(けど、両方の人に書いてあって比較できる共通項目を探すのが大変)
interviewee 自身の考えと No1さんの考えを比較するだと(単独評価になる?)、どうしても「比較してどう思う」というより「私はこう思う」にながれがなってしまってラダリングからはみでる感じがした。

どこかのサイトでインタビューの始めに比較する商品について好ましい順に並べてもらうという手法が紹介されていたが、全体のヒエラルキーを作ってもらうことで interviewee 自身で複数あるであろう価値の視点をある程度見切ってヒエラルキー化するので、それも構造化してあげればそこからもその人の価値のプライオリティが分かっていいと思ったけど、見切るのにそれなりに内観する必要があるだろうし、見切りが適切に行われるかどうかは微妙な気もするから、このあたりは気にして取り入れるべきだと思った。

統合
横構造のみにフォーカスしていたのが功を奏して2項目については統合することができた。が、それ以外はラダリングの開始地点がばらばらすぎて統合できず。ちなみに統合すると班になった9人から抽出された価値観をもったペルソナができる?と考えていいのだろうか。

全体的には
自分が演習の時点で評価グリッド法の優位点を見いだせなかったのは手法の理解不足につきる。それと最終的な目標がやってるうちに手法の習得になってしまって、なんのためにやっているのかとか、最終的にはなにが出来上がるのかを理解できていなかったところにあるのかな。
演習の最後の講評会で質問とか意見が、このあたりのもやもやはどうやらみんな同じだったぽい...?


統合についてのさらなる疑問

重複してでてくる着目点については重なった数を記すなどして重みをつけないと統合の意味がない気がした。複数の評価グリッドを統合する際の正しいオペレーションがあれば知りたいところだ。
というわけで復習したつもりが、違うモヤモヤを増やす結果になったのでした... orz


11/10追記:霧が晴れて来た

上のほうにあった図は、複数人のモデルを統合して一人のモデルにするイメージで作ったのだけれども、エントリ後に山口先生からいただいたコメント----

「基本的に評価グリッド法の使い方は、ユーザ全体の評価構造を抽出して俯瞰し分析するためのものです」

「(統合では)定量的に扱う意味でも、重なった評価ワードの人数や、関係線の人数、価値観の系統のネーミングなどを行います」

「数十人分の評価グリッドを統合することで一覧しやすくなりますし、抜け漏れの評価項目が少ない構造MAPができあがり、それを手掛かりに設計につなげることができます」

から理解をし直すと、数人分を代表する一人のモデルを作るというよりは、数人分の価値マップとして統計データ的に利用するほうがこの技法の使用方法としてはふさわしいようです。先生ありがとうございます!


参考になった記事

[AIIT]ユーザモデリングワークショップ

「ペルソナ/シナリオ法」の授業でのユーザの行動モデリングのワークショップ。
6人ぐらいのチームに別れて(自分は赤組)、分担を決めてユーザ2人分の行動モデル分析を行いました。

自分も含め要領を得ないので分担の仕方も微妙な感じに、とりあえず最初は Aさんのフローモデルを作成開始。
共同作業者と情報を共有/すりあわせしながら、ひとりが用紙にプロットしていく感じ。
けど、みんな読むスピードや読解力が違うので、自分は全然ペースが掴めず若干置いてけぼりに。>本当にすいません...

そして、分担を変えて今度はBさんのシーケンスモデルを開始。
こちらはパラグラフにわけて分担をしたので、自分の担当部分に関しては集中して理解できてよかった。
その集合知になるシーケンスモデル全体も(たぶん)うまい感じになっていると思う。
反面、自分の担当外のパラグラフの理解についてはほとんど頭に入ってなかった。

そのあと、チーム内でできあがったモデルをみんなで共有/レビュー。
メンバーそれぞれが意見を出しながらになるので、自分の性格的に意見を理解するのに手一杯でモデルそのもののレビューができないと途中で気がついて、自分でざっくりBさんのフローモデルをつくってみたりとかしていたのだけど、見合わせるとこまではいかずにタイムアップ。
みなさん頭の回転よ杉で、ちゃんとチェックしたりしていてちょっとショック。

今度はそのモデルをもとにユーザ要求を抽出していきます。
ここでついやってしまったのが、解決策やアイディアを考えながら抽出を行ってしまったこと。
自分も含めアイディアについてのほうに話題がいってしまって、機械的に抽出作業ができなかったのは反省材料かなと思う。
つか、抽出の途中でアイディアとか頭に浮かんでしまうのはどうしようもない気がするので、
それを心に留めておくとかするほうが心得的にはあっているのかも。

そんなこんなで、モデリング作業ができましたが、自分的にはフローモデルのところがすっごく出来なかった気がしたので、レビュー中に途中まで書いてあったBさんで復習してみることにしました。

授業でやってみて、最終的なモデルにまとめるのにかなりの書き直しが必要だなとわかっていたので、普段業務でワイヤフレームを作るときに使っている OmniGraffle を使いながら進めることにしました。
手書きで書いたものをベースに配置を最適化しながら、どんどんプロットしていきます。

途中まで来て、疑問に思ったのは「どこに行った」とか「どうやって移動した(電車に乗った)」とかをどうプロットするかということでした。
そこまでの作業ではほとんどが「情報のやりとり」に関するフローだったのだけど、旅の実施のセンテンスでは「実際の旅行行動」に関するフローがでてきたのです。
で、判断としては「情報のやりとり」をメインにしてプロットすることにしました。この判断が正しいかどうかはわからないのですが。

flowmodel_b.png
そんなわけで、出来上がったのが上の図になります(PDF版)。
わかりやすさを向上させるための工夫としては、
・「情報の要求」を青、「情報の提供」をオレンジ、「依頼」を緑色に色分け
・やりとりの矢印を「要求」「提供」で1セットになんとなくまとめる
といったところでしょうか。

ここまでやるのに約3.5時間ほど。疲れましたー。

11.10.06

category

tags

comments

0

trackbacks

0

permalink

No title

t_hero.png
あなたから学んだ Philosophy を胸に今日も僕たちは歩き続けます。
ありがとう。

11.08.04

category

comments

0

trackbacks

0

permalink

第3回 HCD-Net サロン「ペーパープロトタイピング ワークショップ」

IMG_1499.JPGのサムネール画像

初の参加でどきどきでしたが行ってきました。
(ほとんど写真とるの忘れていたので、文字多めですがご容赦を)

◆ 課題
居酒屋のセルフオーダリングシステム

コンセプト
・各テーブルからタッチパネル式オーダリング端末を使って、料理を注文できるシステム

基本要件
・料理の注文から会計(おあいそ)まで端末で出来ること
・選んだ料理の変更や取り消しができること
・複数の料理を一度に注文できること
・端末画面の操作ですべての注文ができること(紙のメニューとの併用は不可)

端末仕様
・11インチタッチパネル式液晶モニター
・フルカラーXGA(1024 x 768 ドット)
その他条件等
・店舗側は各テーブルの端末から入力されたオーダーを厨房で確認しながら調理を行う

◆ シナリオ記述ノート
居酒屋に入店〜会計までの想定される状況を記述していく。「Aさんは、いつもの野球仲間とテーブルに着き、雑談をしながらメニューを眺めていた」という例が示されていたのだけど、僕たちのテーブルは

・5名それぞれがポストイットにシナリオを記述する
・シナリオを記述する際に読み上げすることで即座に共有する
・記述されたポストイットを入店〜支払のながれでざっくりわけた台紙に貼っていく

という感じで行った。

scenario.png

個人的には

・第三者的ではなく、自分がお客さんに「チャネリング」して居酒屋を脳内体験をしながら完結に状況を書き出す

ようにした。
脳内体験は業務でもよくやる手法で、第三者的ではないユーザの視点で考えることがしやすい。

作業は1畳ほどのテーブルを囲む形で行ったのだけど、このシナリオを列挙するだけでテーブルがいっぱいになってしまった。
続くタスクフローの作成はこのシナリオを見ながらやれると効率的なはずだから、壁を使ったほうがよかった(許可が降りたかはわかんないけど)。広い場所 or 壁必須だな。

◆ タスクフロー記入
シナリオで記述した内容を、各要素に分けて関係性を図式化する
各要素とは
・だれが(人物名)
・何をするのか(行動)
・そのときに何を考えているのか(思考)
・そのとき使う道具は何か

flow1.png

タスクフローの記述はシナリオで列挙したポストイットをまとめていくことで行った。
類似内容のポストイットをまとめていき、時系列に並ベなおす。
実際のところ、お客側の行動をまとめるのが精一杯で(つまり人物名は全てお客)、厳密に各要素を持ったフロー図は作れなかった。

◆ タスクフローシート作成
前項で記述したタスクフロー記入シートをもとに、基本フローを書き出して必要な画面要素を記述する。

flow.png

このフローに関しては僕のテーブルでは正直ほとんどできていなかったように思う。
シナリオをまとめた時点で実際の画面をつくり始めてしまったので、画面作成と画面要素の抽出が同時進行で行われることになったためだ。

時間的にもこのシートに全てのシナリオを網羅したフローを書き上げるのは無理だったと思うけど、特にこのあとのタスクフローシート作成ができなかったことで、タスクを全員で共有・把握できず、プロトタイピング作業中に画面要素の検討作業がかぶったりと、作業があっちにいったりこっちにいったりすることになってしまった。

よかったのは、大事な機能とか、時系列によらない機能(例:トイレの案内表示、現在の勘定総計)などをプロトタイプ上に早い段階でプロットできたので、それを骨にして画面作りを進めることができたこと。
インタラクティブなUIを提案できたのも、このあたりの作業が寄与しているんじゃないかと思う。

◆ ペーパープロトタイピング
えーと、作業フローに従うとここで始めてプロトタイピング開始なのだけど、僕らのテーブルにはもういくつかの画面のラフがころがっていた。

IMG_1500.JPG

ここでタスクフローシートがしっかり出来ていると、もっとスムーズに設計作業ができた気がするのだけど、なにしろ最初のシナリオを時系列にまとめたものが唯一の頼り。

画面の構成要素を検討したりする一方、新しい機能要件がでてきたりと、みんな楽しみながら作業はできていたものの、進行はだいぶ混沌とした感じだったと思う。よく例えればより現場っぽいって感じ。

途中でコンセントの長谷川さんにスクロールエリアのちょいテクを教えてもらって取り入れたり。実はこのテク以前に業務でやったことがあって、iPadで画面上のスクロールの範囲をどうするかってケースだったのだけど、そのときは正式なテクだと思ってなかったんでちょっと嬉しかったり。

hcd.png

あーだこーだやっているうちにタイムアップとなった。
...やばい、戻る系とかやり直し系とかちゃんと検証できていないぞ。

◆ ユーザテスト
各テーブルから1名を他のテーブルへテスターとして送り込む。
僕のテーブルには新横浜ユーザビリティ研究会で何度かお会いしたことがあった@hokorinさんが刺客wとしてやってきた。やばい。

テスターは与えられたタスクを実際にペーパープロトタイプを使って行っていく。
テスターの操作に対する反応をホストが行う。ホストは操作説明を示唆したりヒントを与えたりしてはいけない。要はデバイス役。

ここで早々に問題発生。勢いで最後につけた「いらっしゃいませ画面」が仇となって、メインのメニュー画面へたどり着けずにタスク未達成。

「もういっかい!」とゴリ押しで、メインメニューの画面からタスクをもう一度やってもらう。全員必死だから、このときはホストは全員でフォローしあう状態w
ある程度は達成できたものの修正系がちゃんと検証できていなかったりインタラクションのホスティングがうまくできてなかったこともあって、結構いろいろ指摘をうけた。

テスターさんを変えてもう1つのタスク。
こんどは清算と清算後の割り勘ができるか。やった、うちらの案、割り勘機能ありますYO! というわけでスムーズにタスク達成。高評価をいただいた。...と思う。
時間があまったので、同じテスターさんに1つめの注文のタスクをやってもらったのだけど、さきほどのテスト後に修正を加えていたおかげで、こちらもスムーズにタスク達成。パチパチパチ!

テスターさんの指摘は本当にためになるし、この時間を通して全員が画面のフローを把握したり、即座に問題点を修正することができたのは、ペーパープロトタイピングならではだと思う。ペーパープロトタイピング強力。

◆ 講評会
それぞれのテーブルの代表1名ができあがったプロトタイプを発表。
やたら機能が充実しているテーブル、質実剛健なテーブル、優等生なテーブル、いろいろありました。あー、目から鱗だわという機能実装をしているテーブルもあって勉強になる。
僕のテーブルはDeNAから参加の床鍋さんがプレゼン。ユーモアたっぷりのプレゼンでいいところが伝わったと思う。個人的に付け加えとして、文字や画面構成要素が他のチームよりでかめなのは、酔っぱらい対策+テーブルで席が離れた人が見えるようにという配慮からなのですよん。

◆ 終了
そんなわけで、あっという間でしたがめちゃめちゃ楽しい時間を過ごすことができました。業務でもこのぐらいフランクに和気あいあいできたら素晴らしいのに。

個人的に悔いがあるとしたら、タスクフローのまとめがもう少しキチンとやりたかったのと、時間ぎれでできなかったユーザテスト前の操作フローの検証をできていればなあと。
特にタスクフローのまとめ方は勉強不足で有効なメソッドも手持ちにないので、スキルとして強化していかないといけないと。

以上ワークショップの報告でした。
おつかれさまでした!

関連:隣り合わせの灰と青春(@hokorinさんのレポート)

11.06.08

category

tags

comments

0

trackbacks

0

permalink

WWDC 2011

はじめての参加でいろいろ戸惑いながらも参加をしております。
昨日の Keynote はやっぱり雰囲気がとても特別で、朝の3時すぎから並んだ価値はあったと思います。
一緒にならんだドイツ、アメリカ、イギリス、中国といったワールドワイドな人たちと話せたのもすごく貴重な経験。けど、UI デザイナーはやっぱ少ない感じですね(あたりまえか)。
思った以上に忙しかったり、疲れたりでやっつけ気味ですが昨日の様子をちょっとだけ写真で。あとでビデオも追加します。(6/8 16:00 ビデオ追加しました)

IMG_1426.JPGIMG_1428.jpgIMG_1427.jpgIMG_1440.JPGIMG_1443.JPGIMG_1444.JPG

11.01.19

category

tags

comments

0

trackbacks

0

permalink

iPad without physical home button means what...

nextgenipadwithouthomebtn.png

There are rumors that next gen iPhone / iPad will not have home button.
I think that it especially would be a great feature for iPad if they're true.

As you know, iPad is designed as having no right way or wrong way of holding it.

Jony Ive 
"The face of product is pretty much defined by a single peace of multi-touch glass, and that's it.
There is no pointing device, There isn't even a single orientation,
There is no up, there is no down, there is no right or wrong way of holding it.
I don't have to change myself to fit product ... It fits me."

This philosophy is pretty great, also I've been having amazing experience through iPad.
and I realized there are some interfaces unsuitable for this philosophy.

・Home Button
・Mute (or Orientation Lock)Button
・Lock Button

I think these interfaces seems to have usability problem.
For instance, I miss the home button sometimes.
This problem is caused by buttons fixed physically on device, I think.

The button should be placed same place "against the user" always.
Buttons fixed physically are placed different againt the user on each orientation confuse the user.

If using gestures could replace home button, it would be great also it would fit its philosophy more.


次期 iPhone / iPad で home btn がなくなるという噂がでてきていますね。
噂が本当なら特に iPad にとってとてもよい feature になるのではないかと思いました。

iPad はデバイスをどのように持ってもいいようにデザインされています。

Jony Ive
"iPad を形作るもののほとんどは、一枚のマルチタッチガラス、それだけです。
ポインティングデバイスも、縦横や上下を決めるものもありません。持ち方のルールもありません。
製品に自分をあわせるのではなく、製品が自分の一部になるのです"

この思想はとてもすばらしく、実際 iPad を通して得た経験は驚くべきものです。
しかしわずかながらその理念にそぐわないインターフェイスが残されていることに気付いたのです。

・ホームボタン
・Mute (or Orientation Lock) スイッチ
・ロックボタン

これらはユーザビリティ上の問題をかかえているように思います。
例えば iPad を使っているときにホームボタンを見失ってしまうことってよくありませんか?
この問題はデバイス上にフィジカルに固定されているために引き起こされていると考えられます。

これらボタンはユーザに対して同じ位置にあるべきと考えられるのですが、
フィジカルな実装上の制限からデバイスの持ち方によってボタンの位置がユーザに対して上下左右に移動してしまい、それが混乱を引き起こしてしまうのです。

もしジェスチャを利用することでこの問題が解決できるのならとてもすばらしいことで、思想をさらに一歩完全に近づけるものだと思います。

11.01.05

category

comments

0

trackbacks

0

permalink

MoneyTron : Editing categories sneak peak


MoneyTron : Editing categories sneak peak from webtron on Vimeo.


MoneyTron の次の Update の情報を少しだけ。

次回の Update の目玉機能として「カテゴリの編集/新規作成」があります。
非常にたくさんのリクエストをいただいている機能で、次回の Update で提供できることにとてもわくわくしています!

アプリの中枢部分にかかわる機能なだけにテストも十分に行う必要があり、まだすぐにリリースという状況ではありませんがムービーだけでもご覧いただければと思います。

MoneyTron next update will bring some features, one of major feature is "Editing Categories".
We've recieved many requests about this feature, so we're very excited.

We're on testing phase now, so we can provide just the sneak peak video for now.

11.01.05

category

comments

0

trackbacks

0

permalink

MoneyTron : New Year New You


新年からはじめるお小遣い帳というわけで、iTunes の「New Year New You」の Money カテゴリで MoneyTron がおすすめされております。

MoneyTron has been chosen for the "New Year New You" in Japan App Store !

11.01.05

category

comments

0

trackbacks

0

permalink

MoneyTron : iTunes Rewind 2010

rewind2010.png

去年のことになりますが MoneyTron が iTunes Rewind 2010 に選ばれております。
ありがとうございます!

MoneyTron has been chosen for the iTunes Rewind 2010 in Japan !! Thanks a lot !

10.11.04

category

comments

0

trackbacks

0

permalink

Notes Appとメンタルモデル

先日行った UI / UX Meeting #1。

UI / UX に関して各々の経験や知識を共有して、深めていこうという勉強会です。

第1回の参加者は@suzukismooth, @overislandjp, @novi_, @we6tr0n の4名。

アジェンダは「UI デザインにおける、ユーザの期待するカタチと論理的な情報の階層構造に従ったカタチの対峙」でした。

UI を考えているときに、論理的にはこういう手順になるけど、ユーザからの視点でみるとその手順が不自然であったり不便であったりする、ということが結構あると思います。

そんなときにどういった対処をすればよいか、実際にどういうケースがあるのかをそれぞれ話そうということで、僕は例としてApple 純正の メモApp をあげました。

「Notes Appとメンタルモデル」

メモAppで新規メモを作成する場合、ナビゲーションバーの右側アイテムの「+」ボタンをタップします。

fig1.png

すると
・画面が新規メモ画面へ遷移
・編集を開始
します。
つまり、上記2つの機能が「+」ボタンにアサインされているってことになります。

図にするとこんな感じです。

fig4.png

でも、
・メモを編集するための「編集開始」操作はメモ欄をタップする操作で提供されているのだから
・「+」ボタンは「新規メモ」を生成(表示)する機能のみを提供すればよいのではないか(重複した機能を割当なくてもよいのではないか)
・そのほうがシンプルだし、論理的構造に則っていると思える
という疑問もわいてきます。

fig3.png

なぜ「+」ボタンが2つの機能を提供するべきなのかは、ユーザのメンタルモデルに関係していると思われます。

ユーザが新規メモを作成する場面
・ユーザはメモを「書く」ために新規メモを生成する
・そのためユーザは新規メモ画面へ遷移し、かつ「編集開始」された状態を予想している

そこで
・「+」ボタンに前述の2つの機能を割り当てて
ユーザのメンタルモデルに近い操作を提供しようとしているのです。

その後につづく操作について考えてみます。

ここで注意しなければいけないのは、
・「編集の開始操作」はこの時点でユーザに意識されない(編集モードに認知的に入っていない)
という部分です。

新規メモを作成し、ユーザがメモを書き終わったとき、またはキャンセルしたいときは
・ユーザは編集の開始と対になる編集の「完了(Done)」操作をしようとはせず
・一覧にもどろうとする=「戻る」ボタンを探す
という動作をするのではないでしょうか。
最初から開いていた(無認知のうちに開けられた)扉を閉じようとはしないものです。

fig2.png

もし「戻る」を編集モード中に提供しないとなると、
上記の動作で「戻る」ボタンを見つけづらくなり

「安全な探検」:
・ユーザは何の代償も払うことなく操作を試すことができなくてはいけません
・容易に操作前の状態に戻れること(避難口)

に反する事態になってしまうわけです。

そこでナビゲーションバー左側アイテムのボタンに

・編集を完了する
・メモ一覧に戻る

という2つの機能をアサインし、

・編集モード中もこのボタンを提供する

ことで、この問題を解決しているのです。

fig5.png

ボタンのラベルは「Back」ではなく、「Notes」となっていることが単に戻るだけではないことを示しているように思われます。

このように、なんてことのない部分をとりあげてみても、
ユーザが自然と感じる操作が論理的な手順と一致しないケースがあることがおわかりいただけたと思います。

こんな感じでだいぶゆるいですが、UI / UX Meeting 今後も地味につづけていきたいと思います。参加自由ですので興味があればぜひお声がけください。

PS.
@overislandjp の未発表 App についてあーだこーだ言うビデオもUPしております。
こういうのもみんなで集まったかいがあって楽しいですね。

10.10.30

category

comments

0

trackbacks

0

permalink

第2回インタラクションデザイン研究会

sigixd2.JPG

第2回インタラクションデザイン研究会に参加してきました。
Google のなかの人たちが UX / UI への取り組みについてお話してくれました。

全体としてはメンタルモデルやヒューリスティックの話など、UI / UX においてなにか特殊なことをやっているというよりは、基本に忠実にそしてきめ細かくプロトタイピングから効果測定までを行っているという印象でした。

「データを信じる」という Google の精神が マーケティング/デザイナー/エンジニアまで確実に浸透していて、みながそれを忠実に実行しているという一貫性はさすがだなと思いました。効果測定の丁寧さも Google ならではだなと。

ところで 社内でプロダクトのテストをすることを「DogFood」といっていましたがこれって Google 内部用語なんですかね。ちょっと面白い。

検索結果の表示の内容やデザインが幾度も更新され、改善されつづけているというお話もありました。good design is invisible とはノーマンの言葉ですが、ユーザに気づかれないほど自然でいながら、よりよいものを提供しようと努力をつづけるこのような姿勢はすばらしいです。

最後のしめではよりよい日本をつくっていきましょうという言葉もあり、現在の日本の状況を憂いながらも成長していこうという気持ちにはとても共感がわきました。

こんな貴重な機会を用意してくれたインタラクションデザイン研究会さんやGoogleさんに感謝です。運営おつかれさまでした。
インタラクションデザイン研究会、今後もフォローを続けたいと思います。

http://sigixd.org/

10.10.21

category

comments

2

trackbacks

0

permalink

wallpaper for iPad

wpipad_demo_w1000.png

i have been working on wallpapers for iPad since the day before yesterday.
i think making wallpapers for iPad is more difficult than making one for iPhone,
because they need to adjust to 2 orientations (portrait and landscape) by one image.


To adjust to 2 orientation,
- the image should be 1024 x 1024 px to keep original size without zooming.
- i focus on areas that only appear in one orientation.

wp025.png
Click to show the original image. 
(Unexpectedly, the image have possibility to be a wallpaper. :P)


Designing these areas well, they should adjust to orientations nicely.
After some studies, i make a wallpaper that seems to have better combination.

fc022.png

what do you think about it.


10.10.15

category

comments

0

trackbacks

0

permalink

homescreen.me

homescreenme.png

少し前になりますが homescreen.me というホームスクリーンをシェアするサイトで、このブログでも紹介した僕の作った壁紙が使われていました(iPhone 4のほう)。
自分のつくったデザインが知らない誰かに使ってもらえるのはとても嬉しいですね。
ありがとう homescreen.me !

------

Since a few months ago, this wallpaper for iPhone 4 which I created has been used in front page of homescreen.me.
homescreen.me provides web app that lets you share your iOS device' homescreens with the world.
I'm really excited that someone in the world use my creation.
Thanks homescreen.me !

10.07.23

category

comments

0

trackbacks

0

permalink

MoneyTron : Note UI の追加実装案

memo_flow.png

多くのユーザさんからご要望をいただいている機能の1つとして、
「新規記録をつける際にメモも同時に書きたい」というものがあります。

MoneyTron のコンセプトの1つ、
・記録をつける際の操作をシンプルにする
を明確に提示したかったこともあり、現在のバージョンには実装されていませんが
機も熟したという感もありますし、現在実装へ向けた検討を行っています。

★メモ入力のながれ
1)記録画面(上図左)で画面下部の「えんぴつアイコン」ボタンをタップする
2)ふきだしがフリップし、Note 入力画面へ状態が遷移(上図真ん中)します
3)任意のメモを入力しおわったら、ふきだし右上の「Done(完了)」ボタンをタップ
4)ふきだしがフリップし、記録画面へ戻ります。
  ふきだしにはメモフィールド(上図右、青く囲まれた部分)が追加されていて
  メモの先頭十数文字が表示されます。
  再度メモを修正したい場合はこのフィールドをタップして2)に遷移することもできます。

★設計のポイント
・メモはオプション項目(必須ではない)
・カテゴリと金額がそろっていれば記録の保存ができる現在の入力フローを汚染しない
 > ノート画面はモーダルな画面とする。記録の保存はノート画面からは行わない。
・「機能を選択する」という負担をユーザに負わせたくない
 > 初期導線としては画面下部のえんぴつボタンのみ用意する
   記録の操作中にはユーザの意識のフォーカスはふきだしにあるため
   意識的にメモ入力をしようとする場合のみに、
   えんぴつボタンの存在が意識されると考えられる

ご意見などありましたらぜひお願いします。

10.07.14

comments

8

trackbacks

0

permalink

iPhone 4 用 Wallpaper

ちょっと前に Twitter のほうに放流した Wallpaper です。
放流しっぱなしももったいないので、こっちにもエントリしときます。

blackthumb.png
Download : for iOS 4.1 | for iOS 4.2 and 5.0


調子こいて White も作ってみましたが、...ものすごい駄作でした。
ぱっと見はいいんだけど、実際に貼ってみると orz な感じ。
けど、せっかくつくったんで放流しておきます。

whitethumb.png
Download : for iOS 4.1 | for iOS 4.2 and 5.0

よろしければどうぞ。

If you like these wallpapers, please check out our iPhone App "MoneyTron".
Thanks.

追記 2010.12.09
iOS4.1とiOS4.2でアイコンの配置が微妙に変わったので、対応版を用意しました。

P.S.
We updated wallpapers. cuz the grid pitch of home screen on iOS 4.2 is changed a little.

2011.10.20
We confirmed that wallpapers for iOS4.2 are compatible with iOS5.0 :)



10.07.01

category

comments

0

trackbacks

0

permalink

MoneyTron:カテゴリー編集機能草案

ご要望を一番多くいただいている「カテゴリーの編集機能」について、どういう実装がよいのか考えてみました。

edit_categories.png
※画像をクリックするとPDFを見れます

迷ったところとしては、

・カテゴリを削除したときに紐づいていた記録をどう扱うか。
 1)記録も一緒に削除する
 2)「カテゴリなし」というカテゴリをあてがう
 現在の案:2を採用
 考察:
 「支出(カテゴリなし)」「収入(カテゴリなし)」というカテゴリが必要。
 この2つは特別扱いで削除不可にしておかないといけない。
 実装上は例外を介在させることになりめんどくさいことになるが、
 ユーザのデータを守るという観点から必要と判断する。

・支出/収入を編集可能にするか
 1)OK
 2)NG。新規カテゴリ作成時のみ、収入or支出を決定可能
 現在の案:2を採用
 理由:
 入力後に収入<>支出を変更することは現実的な運用を考えるとほぼありえず、
 そのようなことを可能にする UI は避けるべき。
 
のようなものがあります。

もしご意見があれば是非サポートtwitterでお寄せください。
次のステップとしては、これをもってプログラマーさんに相談しながら実現への道を探りたいと思います。

10.06.24

category

comments

0

trackbacks

0

permalink

Retina Display : ベクターデータの調整

path_preview.png

またまた Retina Display 対応のお話。
標準のUIエレメントについて、解像度があがったことでそれらはどう変わったのかちょっと見てみました。

retina_sys.png

左:以前の simulator のキャプチャを2倍
右:iPhone 4 simulator のキャプチャ

なるほど、エッジの影のボケ足の表現などがより精細になっています(そりゃそうだ)。
標準の UI エレメントを模したものをつくるケースって意外に多いんですけど、
僕の場合は元データはイラストレータ上でつくってるので、エレメントはベクターで描画されています。
パスなんだから、2倍にしても大丈夫じゃん!とか思ったりもしましたが、やっぱり世の中そんなに甘くないのでした。これ↓を見てください。

retina_path.png

左:いままでのパスデータを単純に2倍した
右:2倍後にそれなりの調整を行ったもの

まあ、こんなに違いますですよ。
右の調整済のパスデータは半分ぐらい作り直してますです。

というわけで、本気でやりだすと恐ろしく人的リソースを消費する Retina Display ではありますが、実際 iPhone 4 の実機で最適化されたアプリケーションを見るともう以前には戻れなくなります。
1つ1つのエレメントを見る分にはそれほど感じないのですが、総合的な外観の印象が圧倒的に違っていて、実体感がより強く感じられるようになりました。

webtron が関わっているアプリとしては「iMandalArt」「MoneyTron」から対応します。
どちらももうじき申請できそうな予感なので、お楽しみに!

10.06.23

category

comments

0

trackbacks

0

permalink

MoneyTron : Retina 対応作業完了

retina_mt.png

iPhone 4 の発売を明日に控えて、ようやく MoneyTron の Retina 対応が終わりました。
実機で検証・微調整後、AppStore に申請する予定です!

10.06.16

category

comments

0

trackbacks

0

permalink

『iPhoneのオモチャ箱 〜iPhone SDKプログラミング〜』刊行 & 記念イベント開催!

昨年から執筆に参加させていただいていた本なのですが、ついにリリースの運びとなしました! ...長かったですねえw

執筆陣がとても豪華ですし(僕なんぞがご一緒させていただいていいのかしらという感じであります)、それぞれが好き勝手やっている感じがとても面白い感じになっていますので書店で見かけたら是非ちょい見してみてください。
ちなみに僕はUIデザインとweb appについて書かせていただいています。MoneyTron の開発工程なども(ちょっとですが)載ってますです。

それとタイトルのとおり、刊行イベントを Apple Store 銀座、ジュンク堂新宿店で開催しますので、興味のあるかたは足を運んでいただければ嬉しいです!

IMG_2160.JPG


『iPhoneのオモチャ箱 〜iPhone SDKプログラミング〜』
『ユメみるiPhone』の続編として第二弾『iPhoneのオモチャ箱』が、より実践的なサンプルベースのiPhoneアプリ開発の解説書が6月21日に弊社より発売されます!!
執筆には、『ユメみるiPhone』の徳井直生氏をはじめ岡村浩志氏(Re<ords)、笠谷真也氏(Pocket Guitar)、深津貴之氏(QuadCamera)、青木太臣氏(one-dot enemies)、大宮聡之氏(MoneyTron)、瀬尾浩二郎氏(LetItSleep)、バスケ氏(ランブリン)、宮川義之氏(iYamato)ら、注目のデベロッパーが集まりました。
--
執筆は、私が個人的に気になっているプログラマー/クリエイターのみなさんにお願いしました。いってみれば、iPhoneというおもちゃ箱の魅力に取りつかれた子どものような大人たちです。開発の第一線で活躍されている方々がそれぞれの得意分野でどのようにiPhoneで遊んでいるか、その一端がうかがえるような記事が集まりました。ステップ・バイ・ステップのチュートリアルから、より概念的なお話、開発のヒントまで、さまざまなトピックの中に、それぞれの開発者ならではの創意工夫が垣間見えてくるはずです。
(徳井直生、本書「はじめに」より抜粋)


刊行記念イベント
本書の刊行を記念し、AppleStore,Ginzaおよびジュンク堂新宿店にてトークイベントを開催いたします。
内容が異なっておりますので、いずれも、ふるってご参加ください!!

●6/22(火) 19:00〜20:00 AppleStore,Ginza(3Fシアタールーム) 入場無料 定員84名
iPhoneデベロッパーが語る"いま、iPhoneで何ができるか"

●6/25(金) 19:00〜20:30 ジュンク堂新宿店(8F喫茶) 1,000円(ドリンク付) 定員40名
話題のiPhoneアプリ開発者が語る、これから...
※特製Tシャツ・書籍プレゼント(抽選)、サイン本の販売あり


WORKS CORPORATION

10.06.14

category

comments

0

trackbacks

0

permalink

MoneyTron : Finance カテゴリ1位獲得!

appstore_banner.png

先週末から始まった AppStore でのバナー掲載の効果もあって、ついに念願のファイナンスカテゴリ1位を獲得しました。ありがとうございます!

IMG_2127.PNG

レビューでもご意見を頂いているように、まだまだ未熟なアプリケーションではありますが、いろいろ検討しながらよりよいアプリケーションになるようがんばっていきたいと思います。今後ともよろしくお願いいたします!

10.06.14

category

comments

0

trackbacks

0

permalink

Retina Display

iPhone 4 の1つの特徴としてあげられる Retina Display
解像度2倍。ピクセル数4倍。
これに対応するには、アプリケーションに組み込む画像部品のほぼ全てに対して、高解像度版の画像を用意してあげる必要があります。

retina.png

webtron で関わっているアプリケーションの中では「iMandalArt」と「MoneyTron」を皮切りに対応をすすめていきます。今週はまさにその作業の真っ最中。実機でどんなふうに見えるのか楽しみにしながら作業をすすめています。

10.06.10

category

tags

comments

0

trackbacks

0

permalink

プロダクトの心

新しい iPhone が発表されましたね。

なかでも FaceTime (ビデオチャット)にはとても心を動かされました。
FaceTime がかなえてくれるであろう体験が、人の心を豊かにしてくれるものであることはムービーからも手に取るようにわかります。



そんな体験をITリテラシーとは無関係にすべての人が手に届くところに近づけてきた Apple の知恵と誠実さにあらためて感銘を受けたのでした。

それを使うことによって人のライフスタイルや心がどう変わるかをデザインすること。人中心のデザイン。
それが今、時代からデザイナーにかせられた命題なのだと思います。

10.06.01

category

comments

0

trackbacks

0

permalink

MoneyTron リリースから一週間

2nd.png

お祝いのメールをいただいたり、ユーザさんからご要望やご意見を頂いたり、嬉しいレビューを頂いたり、App Store のランキングに一喜一憂したり、風邪をこじらせたりと、バッタバタの一週間。

アプリのほうは、おかげさまで現在ファイナンスカテゴリで2位をいただいています。
ユーザさんと直接コミュニケートできるのって、とてもエキサイティングな経験で楽しい一方、人生でこんなこと初めてだけにいろいろ至らなくてすいません。

もう少し落ち着いたらいただいたいろいろな要望も含めて、将来の機能についてのウィッシュリストをまとめてみたいと思います。

とくにカテゴリの編集はとても多くいただいている要望なので最優先で検討すべき項目になりそうです。

それと今日、HMDTさんからいくつかのバグを修正したものをいただきました。
これからテストを行って、問題が発生しなければupdate版の申請となります。
ご迷惑をおかけしてすいません!もうしばしお待ちいただければと思います。

MoneyTron - App Store

10.05.25

category

comments

0

trackbacks

0

permalink

MoneyTron App リリース

webtron の1st アプリが AppStore にならびました。
現在ファイナンスカテゴリで7位ということで、出来過ぎの結果をいただいております。
これを糧にこれからもがんばります。

そして、twitter のほうにも書きましたが、こうやって無事リリースができたのは開発を担当してくださった HMDT さんのみなさんの力添えがあってこそ。本当にありがとうございました!
今後ともよろしくお願いいたします!

7th.png

MoneyTron : AppStore

10.05.19

category

comments

0

trackbacks

0

permalink

MoneyTron 申請

周囲の人たちに助けてもらいながら無事申請が完了しました!
月曜日の夜に申請したので、今日で2日目。まだ Waiting for Review です。
無事に通過してくれるといいのだけど。
審査のあいだに web site の準備をしてるわけですが、とりあえずこんな感じまで出来ました。
今日はもうちょっとだけ作業して明日に備えます。

IMG_2098.JPG

10.05.15

category

comments

0

trackbacks

0

permalink

cross point

中目黒時代、オフィスをシェアしてともにクリエイティブ道を歩んだ、
10年来の偉大な先輩であるP.M.Kenさんが個展を開催するとのことで
オープニングパーティにお伺いしてきました。

Kenさんお得意の楽しげな作風とは少し趣きが違う作品たちに年月を感じながらも
結局朝まで話込んでしまいました。
とても華やかな世界で活躍されているけど、根っこは以前と変わってなくてちょっとほっとしたり...

_PMK0849_2pub.jpg

「cross point」
5/14〜5/26 (5/20休)
11AM-8PM 展示最終日のみ6PMまで

10.03.12

category

comments

0

trackbacks

0

permalink

Microsoft Courier

Microsoft Courier の UI。おおよそ Microsoft らしくないw 

いいかどうかは別としてペンを入力デバイスとして使い続けることにこだわりを感じる。
iPad の方向性は生活に入り込んで創造性を豊かにするすべの提供にフォーカスしていると思うのだけど、Courier は作業の効率化という面にフォーカスしている感じだね。

思想が違うっておもしろい。どちらも重要だけに期待したいな。


10.01.25

category

comments

0

trackbacks

0

permalink

姉川たく EXHIBITION

デジタローグギャラリーで知り合って以来の友人、姉川たくの EXHIBITION にいってきました。
なつかしい作品も見れたし、意外な人のつながりがあったりしておもしろかった。
anetaku.png

姉川たく 理想論(砂糖多めにしておきました)
FRIDAY 22 JANUARY - WEDNESDAY 3 FEBRUARY 2010
@ GALLERY SPEAK FOR

09.09.29

category

tags

comments

0

trackbacks

0

permalink

WEB 制作会社総覧 2010

IMG_0879.JPG
分厚い郵便が届いたな、と思ったらこれでした。
今年のはいつもの2倍ぐらいの厚み。豪華です。

掲載していただいたことに感謝!

WEB制作会社総覧2010

09.09.04

category

comments

0

trackbacks

0

permalink

ヒューメイン・インターフェース

ジェフラスキンの著書を読んでいる。
冒頭にでてくる機械式時計とデジタル時計の時刻設定のインターフェースの件。

腕時計の時刻設定をしたいとき
・機械式時計:側面についているつまみをぐるぐるまわせばよい
・デジタル時計:側面についたボタン(たいてい4つ)を組み合わせて使用する

元来とても単純なオペーレーションであった時刻合わせが、テクノロジーの進化によって出現したデジタル腕時計では複雑化していることを指摘し、ラスキンはここでテクノロジーの複雑化がインターフェイスが退化することの理由にはならないと述べています。


うんうん、そうだねそうだねと思いつつ、頭の中がカオス状態になっていく。

連想項目
・つまみひとひねりにおける数値のレンジ:低い
・つまみがモードをもつモノもある:ふつうに回す=長針がまわる。ひっぱりながら回す=短針がまわる
・つまみであわせる時刻の精度:誤差1〜3分程度か
・日常で必要な時刻の精度:ミーティングに出たり電車に乗ったりするときに精度は必要だが、それ以外では誤差2〜5分程度は許容範囲
・つまみをまわすときの重さ(回転抵抗):あわせたつまみがうっかり動かない程度の重さがある
・つまみをまわしたときの視覚的フィードバック:リニアに針がまわる

つまみのことを考えるだけでもう胸いっぱい。
でもこのなかにいろいろなヒントがつまっている予感。素敵素敵。

09.08.23

category

comments

0

trackbacks

0

permalink

iMandalArt on CreativeApplications.net

creativeapps.png

iMandalArt が海外でも紹介され始めました。
こちらのサイトでは CreativeApplications.Net の名前のとおり、デザイン性の高いアプリケーションがプラットフォームを問わず紹介されていて、そのなかで iMandalArt が紹介されています。
User Interface Design を担当させていただいたデザイナーとして、こういう紹介のされ方はとても嬉しいですね。

www.creativeapplications.net

09.07.24

category

comments

0

trackbacks

0

permalink

Mandal-Art

mandalart_logo.png

9つのマスを使った思考支援ツール「Mandal-Art」のiPhone版が発表されます。
HyperCard を発祥の地とする伝統のあるアプリケーションです。

光栄なことにその User Interface Design を担当させていただきました。

iPhone 版のデザインを制作するにあたって
・HyperCard からの伝統をもちながら、かつ2009年の現在らしい外観
・ユーザの思考を妨げない UI デザイン
・機能の理解を助けるためのデザインボキャブラリの活用
この3つをポリシーとして掲げました。

3番目のデザインボキャブラリというのは、
ーー例えば「フォルダ」や「ファイル」のアイコンが示す意味は経験から知っています。
また「虫眼鏡」アイコンを見たとき「検索」、場面によっては「拡大/縮小」という機能を想像しますね?
...といったように、「デザインとそれが示す意味の理解」の集合のことをいいます。

それらをうまく利用することで、
ユーザは無意識のうちにアプリケーションの操作を理解し、
オペレーション操作の煩わしさを感じることなく
本来の目的である創作活動を始めることができるようになります。


Mandal-Art はこれまでに
HyperCard 版、Windows 版、Palm 版の歴史があり機能も進化してきました。

従来の機能や操作性を引き継ぎつつ、
先に述べたデザインを提供することは思った以上に難しいことです。

考案者である今泉さん、開発を担当する HMDT さんらと、
本当に土壇場まで議論をしてデザインを詰めました。

最終的には HMDT 木下さんの明晰な思考による分析・判断と、
今泉さんの大いなる包容力によって
難しい命題を達成するデザインを作りだすことができ、
そして、それをHMDTの優秀なプログラマさんたちが実装し、息をふきこんでいます。

そんなこんなで、来る7/26(日)に Apple Store 銀座にて発表イベントが催されます。
iPhone で新たに息をし始める Mandal-Art 、
その伝統あるアプリケーションにたるデザインを携えることができたかどうか
ぜひ確かめに来てください。


Apple Store, 銀座
2009/7/26(日)15:00〜16:30 @Apple Store 銀座
Mandal-Artのご紹介:Life is random.だから人生は"編集"できる。

Mandal-Art 公式サイト

HMDT株式会社

09.07.04

category

comments

0

trackbacks

0

permalink

ドア

IMG_0624.JPG

事務所の入り口用のカッティングシートが届いたので早速貼り込み。
すてき。

09.07.02

category

comments

0

trackbacks

0

permalink

おこづかいApp(仮)Part 1

というようなものを開発しています。
開発。といっても突然全部自前でできるはずもなく、ディベロップは敏腕なプログラマさんに手伝っていただいていて、webtronの役目はUI設計・デザインになっております。

既に開発自体はそれなりに進んでいるんだけど、どんな感じでiPhoneアプリケーションが出来上がって、どんな経緯があったかを振り返れるようにしたくて、少しずついろんな方向から公開していければなあと思っています。


きっかけ
・財布のなかがすぐに寂しくなる。自分はいったいここ1週間で何にいくらつかったんだ? とか
・クレジットの額が結構いってる? なに買ったっけ? とか
そういうのを iPhone で手軽にログって自己分析できたらおもしろいし、それで新たな1面が見えたりしたらさらにいいじゃないかという。

調査
お財布管理系の iPhone アプリを適当にさわってみる。
・iXpenseIt - 機能大杉で操作方法さえよくわからない。少なくとも手軽に使う感じではないのかも。
・Pennies - デザイン良し。とかいわれて期待したが微妙。だた、手軽さとか月表示の一覧性とかは自分のイメージに近い使い心地。

コンセプト
・らくちん入力、らくちんビュー
・すみずみまでデザインされたインターフェース
の2つだけ。いさぎよく。

こんなのどう?
ジャストアイディア的なところもありつつ、ばばっとつくったのがこれ。
・スクリーン
 収支のサマリーが表示される。
 フリック操作で状態の切替(トータル/月別/日別)
 タップでレポート画面へ遷移

・クリックホイール的ななにか
 カテゴリ、金額をホイール操作で決定
 真ん中ボタンでエントリー追加

・日付ボタン
 エントリーを追加する日付を表示
 左右矢印タップで日付を移動
 
・info ボタン
 設定画面へ遷移

クリックホイールとかリジェクト食らうに決まってるじゃんとかいう無粋なつっこみはなし。
というか現時点ではクリックホイール的ななにかはあきらめる方向になっていて、それはリジェクト云々よりも基本的な操作方法に問題が発生したからなのだ。その話は次回以降でしたいと思う。


Part 2 へつづく

09.06.26

category

comments

0

trackbacks

0

permalink

3GS

IMG_0602.JPG
やってきました。なにもかもが速い。
いままでガクガクすることもあったトランジションまわりもスムーズになってとても気持ちがいいです。

09.06.02

category

comments

0

trackbacks

0

permalink

STAR TREK

d52_1024.jpg

辛抱たまらず、朝仕事前に見てきました。
シーンの随所で自分が子供のころに見たオリジナルの登場人物たちがフラッシュバックして、なつかしさを感じる一方、新しい歴史を追っていくワクワク感。
そしてそれを支える美しいアートワーク。非常にエモーショナル。
制作スタッフに感謝と賞賛を。
最高でした。

IMG_0472.JPG

エンタープライズのガイド。インジケータのグラフィックが秀逸。
ずいぶん昔に購入したものだけど、いまでも本棚のメインキャスト。

STAR TREK オフィシャルサイト

09.05.22

category

comments

0

trackbacks

0

permalink

THE APERO N' RIDE PARTY

tさんに誘われて、THE APERO N'RIDE PARTY へ。

IMG_0396.JPG
IMG_0402.JPG
IMG_03991.JPGのサムネール画像

三者三様で面白い。
このあと中目の kinfolk に移動して party... だったのだが、自分は仕事の都合で六本木の手前で別れを告げ事務所へ。

09.05.09

category

comments

0

trackbacks

0

permalink

おしらせ

なかば放置プレイを続けてきたオフィシャルサイトをリニューアルすることにしました。
とはいえ、計画としてはまだほぼ白紙。

時間を要する作業になることは間違いなさそうだ... ということでリニューアル作業をすすめる間、暫定的にオフィシャルサイトの機能を weblog にもたせることにしました。

ぱらぱらと事務事務しいエントリーもあるかと思いますが、どうかご了承いただければと思います。

09.04.18

category

comments

0

trackbacks

0

permalink

Matias Duarte

先日発表された palm pre の Human Interface Design を手がけた人物です。

matias.jpg

preの発表の際、彼自らが行った User Interface のプレゼンテーションをみて結構な衝撃をうけました。
まだデモを見ただけなので正当な評価はできないのですが、かなり品質が高いことは間違いなさそうです。
iPhone の User Interface をよく研究して、理解・消化し、新しい要素を投入した上でオリジナリティのある Interface を作り上げていると感じました。

09.04.17

category

comments

2

trackbacks

0

permalink

富ヶ谷〜初台〜中目

POSITRON の土井さんとご友人のTさんと一緒に初台の Blue Lug までいってきました。

IMG_0326.JPG
IMG_0322.JPG

ピンクタイヤが土井さん、白タイヤが僕のピストです。
マイナーチェンジをもくろみ、パーツ数点をご購入。

09.04.06

category

comments

0

trackbacks

0

permalink

デザインをリニューアル

事務所の引っ越しにあわせて、blogのほうもデザインをupdateしました。
MovableTypeとひさびさの格闘。

blogdesign.jpg

09.04.04

category

comments

0

trackbacks

0

permalink

お花見

HMDTチームとお花見@代々木公園。主催のHMDT木下さんに感謝!
nitram+nuncaの佐々木さん、HMDTの山口さんとデザイン話で盛り上がる。

IMG_0298.jpg

09.04.03

category

tags

comments

0

trackbacks

0

permalink

ALERT 歓送迎会

中目黒の共有オフィス「ALERT」をついに卒業。
10年ちょっとを過ごした中目ともお別れです。
今日はそのお別れ会&新人歓迎会@BEEF KITCHEN!
最高にうまい肉を食らいながら別れを惜しみました。

IMG_0294_560.jpg

08.03.13

category

comments

0

trackbacks

0

permalink

「KI RI GA」 展

福井利佐さんの個展におじゃましてきた。


RISA FUKUI EXHIBITION VOL.2
「KI RI GA」 展

日程: 2008年3月14日(金)~4月13日(日)
会場: Gallery ef (浅草)
詳しくはこちら


1つ1つの作品から想像できる作品に対する仕事量と集中力にまず感動。
伝統工芸的な美しさはもちろん「数学的な」美しさをもった(個人的な印象)作品たちにしばし見入っていたところ、
福井さんが声をかけてくれてその場でしばし談笑。

土蔵を改装したというギャラリーが醸し出す雰囲気と作品が絶妙にマッチしており、
そこから感じるものは少なくなかったと思う。

asakusa.jpg

そのあと遅れてやってきたages5upの岡村さんとアシスタントの天野でホッピーあおったのは蛇足w
写真は雷門。

07.11.09

category

tags

comments

0

trackbacks

0

permalink

T6M opening reception

代官山のキャッスル通り沿いから移転したT6Mのオープニングにお邪魔させていただいてきました。新店舗はAPCの裏ぐらいにあって、テラスが開放的でいい感じ。

R0011791.JPG

staffの緒方君と壹岐君も心なしか表情がのびのびしてます。

最近代官山はあちこち「あれ?こんなだったけ?」というぐらい開発がすすんでいて、
住んでいた5年前とは随分雰囲気がかわってきているなあ。

自分も常に変わり続けなければ。
Stay hungry, Stay foolish...


07.09.13

category

comments

0

trackbacks

0

permalink

tokyo midtown

気がついたら6ヶ月もほっときぱなしって、筆無精にもほどがありますね...
先日(といっても8月のことですが)事務所をシェアしているp.m.kenさん、imaitoonsさん、Ages5&Upの岡村さん、エイチのカタヤくん、アシスタントちゃんらと東京ミッドタウンのビアガーデンにいってきました。

beer.jpg

東京のど真ん中とは思えないほど、空が広く感じた不思議な空間。
リフレッシュ!