Hatena::Groupoval-plan

思考地図:OVALPLAN このページをアンテナに追加 RSSフィード

2010-04-0210年品質のユーザインタフェース−その1

[][][][][]JR東海新幹線予約サイト JR東海新幹線予約サイト - 思考地図:OVALPLAN を含むブックマーク はてなブックマーク - JR東海新幹線予約サイト - 思考地図:OVALPLAN


JR東海新幹線を利用されている方は多いので、この新幹線予約サイトを見慣れた方も多いかと思いますが、実はこの新幹線予約サイトはOVALPLANが開発して10年経ちます。デザインイメージ的にはちょっと古くさく見えますが、ユーザビリティ、ユニバーサリティ、ユティリティの3つのインタフェース基本性能は、10年経っても全く遜色なく、むしろ最近のWebデザインスタイルよりもシンプルで明快なデザインの良さが伝わってきます。

f:id:OVALPLAN:20100402223552p:image:right

ユーザビリティ、ユニバーサリティ、ユティリティの3拍子が揃ったUIだから10年の歳月を経てもいまだに現役でいられる訳ですが、ではその三拍子はどうすれば得られるのでしょうか。その秘密はOVALPLANの設計ノウハウの中にあるのですが、これがそのノウハウです、といって容易に示すことができません。特にそのノウハウの中の最上流としてOVALPLANでもっとも重要視しているのが、概念モデルの設計です。

ではその概念モデルとはどのようなものなのか、JR東海以外のロングライフの事例を交えながら紹介してまいります。

2007-08-15ITパフォーマンスリサーチマップ2007

[][][][] ITパフォーマンスリサーチマップ2007 - 思考地図:OVALPLAN を含むブックマーク

f:id:OVALPLAN:20070816141251j:image:w320


インタフェースデザインの現在状況を把握するために、Webサイトや文献などで紹介された先進的な事例を収集し、我々内部で共有できる地図を作っています。


マップはオーバルプランの汎用として使っているITパフォーマンスマップをベースに編集配置しています。

A.データベースのエリア(左下)では、Mac OS X1.5で予定されているTimeMachineなどで代表されるように、膨大な資料やデータベース化されたFileを如何に容易に見出すことができるか、という検索性と同時に視認性、想起しやすい仕掛けを組み込んだものが多く見られます。OVALPLANでは発足時以来ランダムな視覚情報に対するハンドリングのためのUIを自主研究テーマとして取り組んできていますが、情報の海を航海するためのビジュアルな羅針盤作りを今後もしていきたいと思います。


B.ハンドリングでは、Cyberな世界であるにもかかわらずリアルな空間イメージで表現することによって、直感的な操作を導くことを目論んだUIが多く見受けられます。なんといっても注目はiPhone でしょうが、数多くのUIアドバンスのなかでも、指より小さいキーでアルファベット入力を実現しているところは、カーソルの無いタッチパネルUIの課題をクリアーしている点で注目してみたい。


C.クリエイションでは、美しさを意識した情報デザインが多く見受けられ、ディバイスを含め前衛的な取り組みが増えてきているように思います。新しいところでは、岩井俊雄のTENORI-ONやNintendo DSギターなどビジュアルだけでなく音を絡めたインタフェースに取り組むものが出てきていることに注目したい。


D.コミュニケーションでは、SNSのヒットを背景としたSocial型の情報共有や参加型のUIが流行で、時間軸の共有や趣味領域をサポートするWebサイトなどが多く出てきています。中では、GPSや無線LAN、ICタグなどネットワークインフラの充実を背景としたリアルとバーチャルを結ぶコミュニティやSecondLifeの成長は、新たなビジネス領域としても目が離せないところです。

2007-06-12可能無限への頌詩

[][] 可能無限への頌詩…音楽のようにデザインする  可能無限への頌詩…音楽のようにデザインする - 思考地図:OVALPLAN を含むブックマーク はてなブックマーク -  可能無限への頌詩…音楽のようにデザインする - 思考地図:OVALPLAN

P2Pのオンデマンドテレビ:「Joost」というサービスが始まっているそうです。

テレビ視聴用UIの新規性として衝撃的だと思いました。


f:id:OVALPLAN:20070613042809j:image:w200 ←クリックで拡大


半透明のウィジェットっていうのはゲームの世界では普通ですが、これを表示したままでのテレビ視聴に対する違和感がどの程度かっていうのは、確かに体験してみないと語れないという気がします。

シリアスなドラマにはフィットしないかもしれなくても、バラエティならむしろとっても楽しそう。

あり得なさそうなUIが、シーンによってはありだなぁと感じました。


だら〜っとテレビを見ている時の人って、確かにいろいろ暇だからそうしている訳で、しかもくだらない番組見てる時なんかは、一段と暇感が増強されるので、チャットしながらテレビ見るのって、いかにもありそう。


CM流すにしたって、リアルタイムでそれについてチャットされちゃうってことは効果もそれなりに等比的になるってことですし…多分。


…というようなことをぐだぐだメールしてたら、川上さんから

OS X用国産Webブラウザ「シイラ」

を教えてもらいました。

f:id:OVALPLAN:20070613042931j:image:w200 ←クリックで拡大

他にもAdobeのapolloで作られたマップUIなど。

f:id:OVALPLAN:20070613045427j:image:w200 ←クリックで拡大


これらも半透明UIがとっても上手く使われています。


そして、昨日のApple のLeopard

透過が激増したUI。重ね合わせる"Stacks"。グルーピングする"Spaces"

Vista のUIでは疑問符付きで眺めたウインドウの一部半透明だって、こうして見るとそれなりに共時的。



音楽のようにデザインする

先日からずっと気になっていた視覚表現における「ステルスデザイン」や「半透明なUI」などの潮流を、「Winner take all」になりがちな視覚に対して音響学的な方向を探る流れなんじゃないかと、勝手に位置づけて考えてみたいと思っています。


上手く表現できませんが、同時に認知しうるメロディー、ハーモニー、リズムのようなものとして…。

超巨大画像(超高解像度画像)や3Dやアニメーションも、今回のスタックも多分その方向。

でも、なんていうか、もっと耳的な眼というか、被写界深度のような認識方法として。あるいは、走馬燈的時間圧縮方法として。


私がこのようなことを考えるきっかけになった江村哲二さんが亡くなりました。

すい癌だったということなので、おそらく彼は自分の命の有限性を知りながら、最後の曲「可能無限への頌詩」を作曲されたのでしょう。

この曲のセレンディピティに恐れを抱かずにはいられない。


彼は対談で何度も言っていました。

「内なる音を聴く」という姿勢を持って耳を傾けて聴いて欲しいのだと。それから、プログラムノートには作曲過程について図解つきで説明してくれていました。

f:id:OVALPLAN:20070613043024j:image:w200 ←クリックで拡大


若すぎる急逝は彼自身悔しいだろうけれど、

作曲家の脳内の「可能無限への頌詩」の「仮想としての響き」が楽譜に転写され、演奏家の手によって「今ここにある響き」としてクオリアが生み出された瞬間に、彼の生命がぎりぎり間に合ったことだけは本当に良かった。

そして残念でならない。

小林です小林です2007/06/15 00:01我々人間が知覚し得る五官を総動員できるUIへ向かっているはずで、マクルーハンはテレビが登場したときにそのことを真剣に哲学したのだと思います。印刷媒体からラジオによる聴覚が媒体として目覚め、テレビによって視覚へと拡張、そしてPCやネットワークによって五官を超えたもう一つの時間と空間の体験的知覚へ。
見えない向こうの世界のざわめきを感じる、、、脳内の創造行為。
次世代UIの取り組むべきイメージ世界の気がします。

2006-11-06UIデバイス先進事例・PS3メニュー画面

[][][] PS3のメニュー画面  PS3のメニュー画面 - 思考地図:OVALPLAN を含むブックマーク はてなブックマーク -  PS3のメニュー画面 - 思考地図:OVALPLAN

f:id:OVALPLAN:20061106130504j:image:w120 f:id:OVALPLAN:20061106130531j:image:w120 f:id:OVALPLAN:20061106130547j:image:w120


来る11/11発売予定のプレイステーション3のメニュー画面についてEngadget Japanの記事です。


もうおなじみのクロスバーUIです。

見所としては、5分30秒あたりから始まるスライドショー。その演出は、手書き風の日付表示、写真がはらはらと落ちてくるといった内容で、なかなか心地よく思えました。

最後に、webブラウザですが、キャプチャにあるようにエクスポゼ風の機能が実装されています。また、文字入力ではケイタイでメジャーな省入力方式(インクリメンタル入力)が採用されています。


個人的には、PC以上の解像度を持つフルHDとシンプルな入力デバイスという組合せなので、PCとケイタイの合いの子となるのは納得ですが、それだけでは少し物足りないよう思います。

2006-10-12動画の検索性

[][] 動画を時間と空間で料理している天神祭のサイト  動画を時間と空間で料理している天神祭のサイト - 思考地図:OVALPLAN を含むブックマーク はてなブックマーク -  動画を時間と空間で料理している天神祭のサイト - 思考地図:OVALPLAN

動画の検索性の悪さというか、ランダムアクセス性の低さについて

先日Ringo's Weblogで文字というメディアの優位性としてエントリーされていて、

動画の利用効率アップのためにtagiriというツールを開発中だそうです。

(tagiriについては以前も紹介しましたが)

f:id:OVALPLAN:20061010221048j:image:w120


そのエントリーを見たのと同じ日に、天神祭のサイト

「時間×人」「空間×移動中のもの×ちょっとだけ時間」のマップに動画を配置してるのを発見しました。

f:id:OVALPLAN:20061012153626j:image:w120 f:id:OVALPLAN:20061012153735j:image:w120 f:id:OVALPLAN:20061012153736j:image:w120

オートモードにしないで「Time」と「Space」を見てください。

メニューの作り方もとても良い感じです。


シーケンシャルなものをランダムアクセスするための方法として、ディープタギングという技術は今後ますます注目されていくと思われますが、YouTubemotionboxにアップして、そこで提供される様々な手法でみんなでタグ付けしていくやり方と、tagiriのようにある程度構造的に自動化していく手法が組み合わされていくんでしょうね。


撮影時間や撮影場所や絵柄チェンジのタイミング等をカメラ側でオートでタグ付けしてくれれば、旅行記録なんかは自動的に天神祭のサイト様に表示できるようになるかもしれません。

ブログがこんなにまでも一般化されたのは、きれいにデザインされたテンプレートの効果がかなり大きいと確信していますが、動画でも応目的的なテンプレートがあると受けるだろうなぁ、と思ったのでした。


子供の運動会用とか、コンサートの記録用とか、卒業アルバム用とか、旅行用とか…それぞれにパターンがあるから、撮影時に各シーンへ自動タグ付けするのも可能に思えます。

川上川上2006/10/12 15:50
>天神祭のサイト

楽しくできてますね。
大阪市にはぜひ、来年、再来年・・と積み重ねていって欲しいです。

>子供の運動会用とか、コンサートの記録用とか、卒業アルバム用とか、旅行用とか、

スルーしそうになりましが。。
卒業アルバム自体が動画というのはおおいにアリですね。
これからの学校カメラマンには動画スキルも必須ということですか。

>きれいにデザインされたテンプレートの効果

子供のDVDを作るんですが、iDVDのメニュー画面テンプレートを使うだけで、喜ばれ方が段違いなんですよ。
簡単に作れることもさることながら、美しい仕上がり(しかも個性的!)を得られることが、何より嬉しかったりします。

大草大草2006/10/12 15:51
>これからの学校カメラマンには動画スキルも必須

ダイコロはSchoolTubeサービスを作るべきでしょうね。
お父さん達のビデオ作品を全部吸収してちゃんと卒業アルバム風なタグ付けして、
ベーシックバージョンと我が子バージョンとの両方で見れるようなサービスを。
このご時世ですから、セキュリティ対策だけはしっかり必要だから、
学校単位でのSNSをベースにするというのも良いかも。

「運動会」シーズンにはサーバはち切れるほど投稿あるだろうなぁ。
で、親が参加できない「遠足」とかは、子どもたちにビデオ持たせる。
もちろん学校カメラマンのプロスキルも提供するけど、
それ以上に効率的な編集力が問われるでしょうね、きっと。
そういう際にとっても役立つのが「tagiri」の様なツールじゃないかと思います。

はじめましてはじめまして2006/10/13 10:18シアトルQuantumFusion社のシコラと申します。いつもお仕事ではOVAL社に大変お世話になっております。ブログ大変興味深く読ませていただきました。弊社のサイトとはまた切り口や視点が違っていて、刺激になります。つきましては、相互リンクを張らせていただけないかと存じます。
弊社ブログはhttp://d.hatena.ne.jp/quantumfusion/です。
どうぞよろしくお願いいたします。

川上川上2006/10/13 18:48シコラ様、コメントありがとうございます。相互リンクのご提案ありがたく頂戴いたします。早速サイドバーにはらせて頂きました。
ところで、この度、このようなブログを開設したのは、実は御社のブログがきっかけなんです。また、制作面でも大変参考にさせて頂いております。
ですから、このリンクは、どこか里帰りといった趣を感じます。
記事の日付は古いですが、mixiの閉鎖的なコミュニティで積み上げたコンテンツを移植したもので、開設してから今日でちょうど一週間といったところ。まだまだよちよち歩きといった風情のこのブログともども、今後ともよろしくおつきあいくださいますようお願いいたします。

シコラシコラ2006/10/14 09:19川上様、相互リンクをはっていただき、ありがとうございました。弊社のサイトにも早速はらせていただきました。弊社ブログを参考にしていただいているとは、、、お恥ずかしい限りです。集客のほうはいろいろWebマーケティングを屈指してがんばっていますが、デザインのほうは、まだまだです。オーバルさんのサイトはデザインはさすがに素敵ですね。今度、是非アドバイスしてください。それから、コメント数が少ないのが悩みなので、もしお気づきになられたことなどありましたら、是非コメントしてください。それでは、これからもどうぞよろしくお願いいたします。

小林です小林です2006/10/14 14:03神祭は素晴らしいですね。
10年以上前になりますが京都CD-ROMを作るときにイメージしていた洛中洛外マルチメディアへ後一歩です。それをWebに上げておけるとしたらREAL京都(REAL東京http://www.realtokyo.co.jp/japanese/では実現できていないのですがコンセプトはいただき)の夢も叶えられるのかもしれない。

2006-10-11映像のタイリング

[][] 映像検索サイトBlinkx  映像検索サイトBlinkx - 思考地図:OVALPLAN を含むブックマーク はてなブックマーク -  映像検索サイトBlinkx - 思考地図:OVALPLAN

f:id:OVALPLAN:20061011224917j:image:w120 f:id:OVALPLAN:20061011224855j:image:w120


映像検索サイトBlinkx

CNET Japanの記事


こんなに小さなスペースで、これだけたくさんの映像が、こんなにスムーズに動いている様は壮観です。また、壮観なだけでなく、意外なほどその内容を判別できることに驚きます。


いままで、動画コンテンツは、テレビのザッピングに代表されるように、一つずつ吟味されるものでしたが、このようなサービスが一般化すると、動画は一覧して比較されるものになるでしょう。

これは、動画コンテンツのスタイルに多大な影響を及ぼすと思います。


また、こういった検索技術以外にも、iPodやワンセグ携帯などポータブル端末で動画を見る習慣の浸透など、動画コンテンツの在りように影響を及ぼしそうな事柄が同時並行的にたくさん出現していることは大変興味深く思います。


流通経路の電波からIPへの移動はまだ始まったばかり。

キーワードは「短(時間)・小(画面)・軽(流動的)・薄(単純)」でしょうか。


動画関連のニュースは当分目を離せそうにありませんね。



ところで、プレビューの長さって気になりませんか?

というのも、ユーザーがこういったサイトを利用するのは、有象無象のコンテンツの中から、時間を費やすに値するコンテンツを探すためだということを考えれば、長すぎるプレビューは逆効果ですし、短すぎるプレビューは役立たずに思えるからです。


そこへきてBlinkxの8秒というのは、なかなかバランスがよいように思えましたが、いかがでしょうか。

2006-09-29動画のサムネイル画像による管理

[][] 動画のサムネイル画像による管理  動画のサムネイル画像による管理 - 思考地図:OVALPLAN を含むブックマーク はてなブックマーク -  動画のサムネイル画像による管理 - 思考地図:OVALPLAN

f:id:OVALPLAN:20061010221048j:image:w120

tagiri


・パソコン上の動画をサムネイル画像で管理

・インクリメンタル検索&スポットライト表示

・動画の気になる所をピンポイントで再生


ringoさんの29日のエントリーから


sugarlessさんの日記(mixi)に関連

2006-09-06映像配信サイト

[][] 映像配信サイト  映像配信サイト - 思考地図:OVALPLAN を含むブックマーク はてなブックマーク -  映像配信サイト - 思考地図:OVALPLAN

f:id:OVALPLAN:20061010220641j:image:w120 f:id:OVALPLAN:20061010220714j:image:w120

映像配信サイト ミランカ

画像左:自動スクロールするタイトル画像

左のスクロールエリアの内部にカーソルがある間自動スクロール

上下のボタンを押すことで任意スクロール

画像右:下部に自動ページめくりと任意ページめくりボタン

2006-07-26年表インタフェイス

[][] 年表インタフェイス  年表インタフェイス - 思考地図:OVALPLAN を含むブックマーク はてなブックマーク -  年表インタフェイス - 思考地図:OVALPLAN

f:id:OVALPLAN:20061010220128j:image:w240


年表付日記サービス

ネタ元は百式


こういう時間軸ベースのUIは、さまざまなプロジェクトに役に立つものと思います。


どれが最新ファイルで、誰がどの時間帯に作業したものかなどの履歴がタグとして追加されている状態がファインダから直感的に確認できると、共同作業中のファイルの取り扱いミスが減るはず……。それよりも作業者の注意力の方が重要なのは間違いないですが。

2006-07-03デジタルノートバッド

[][] 手描きの文字・図表をデジタル保存するデジタルノートバッド  手描きの文字・図表をデジタル保存するデジタルノートバッド - 思考地図:OVALPLAN を含むブックマーク はてなブックマーク -  手描きの文字・図表をデジタル保存するデジタルノートバッド - 思考地図:OVALPLAN

f:id:OVALPLAN:20061010220355j:image:w120 f:id:OVALPLAN:20061010220408j:image:w120 f:id:OVALPLAN:20061010220423j:image:w120

Technote

手描きの文字・図表をデジタル保存するデジタルノートバッド

GUIトピックかどうか微妙だけど、タブレットということで、

BumpTop Prototype」のようなUIと組み合わせるとかなりうれしい感じ。

価格がとっても魅力的。

川上川上2006/10/10 21:59
3色というのは新しいですね。

「BumpTop Prototype」のようなUIと組み合わせるとかなりうれしい感じ。
http://oval-plan.g.hatena.ne.jp/OVALPLAN/20060623

(Engadget受け売りですが、、)直感的だけど現実には不可能で便利な機能、というのがポイントなんでしょうね。

http://japanese.engadget.com/2006/06/27/bumptop-3d/