Hatena::Groupoval-plan

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

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

[][][][][][][] 10年品質のユーザインタフェース−その3 - 思考地図:OVALPLAN を含むブックマーク

JR東海新幹線予約サイトのUI設計プロセス


「誰にも優しいステップバイステップ」というコンセプトから縦型のタブ構造のステップナビゲーションをUI概念モデルとして採用するに至った考察をご紹介します。


f:id:OVALPLAN:20100404102713j:image:left

1.人間の思考モデル:上から下への移動は現実世界の階段を下りていくというメタファとつながり、上位から下位へと順に細部へ分け入っていくモデルと一致します。水平の左から右へのステップナビゲーションと比較するとその階層感覚が全く違うことが分かります。水平というのは実は平等、対等といった関係性を示すときに使われる概念で、横展開、水平思考といった展開で使われる空間のモデルなのです。横の空間モデルでも左に始まりがあって右に終わりがあるスタート/ゴールのモデルで使われることもありますが、その場合でも、左から始まって右に行くに従って階層を下っていくイメージは無くはないですが強く意識されることはありません。上下の空間構造が持つ階層概念は、順に詳細を決定していくステップナビゲーションに最適といえるわけです。

まだまだ上下空間の持っている意味性と左右空間が持っている意味性には奥深いものが有りますが、この辺りの人間の思考モデルについては思考地図の解説をご覧下さい。


2.デザインの象徴性:パソコンやインターネット画面は、システムの表示構造が基本的に横組みです。Alphabetが横組みだというのが背景にあり、世の中に始めてグラフィカルUIが登場する以前のテキストでコマンド操作をしていた時代から、システム世界のレイアウトは横組みが基本です。皆さんは横組み以外に、すなわち日本の新聞や雑誌、書籍のような縦組みのユーザインタフェースというものを見たことがないかも知れませんが、実は以前リコーの学習用ソフト、その中の国語の学習をするためのユーザインタフェースを作ったことがありますが、そこでは縦組みのUIでした。確かワードプロセッサが全盛だった80年代には、日本製のシステム機器では縦組みの画面デザインもあったと思います。

話を戻しまして、下のマップをご覧下さい。このマップはJR東海新幹線予約サイトを設計していた2000年頃の日本を代表する企業のWebサイト画面を俯瞰したものです。こんな中へJR東海新幹線予約サイトが登場することになる、ということを踏まえ、デザインのアイデンティティを検討した結果、上から下への階層的タブ構造を左サイドに整然と並べ、ダークな紺色の上にくっきりとタブが浮かび上がるデザインが生まれたのです。さらにダークな背景にタブを並べることで、過去タブ、現在タブ、未来タブがしっかりと色分けできて、自然なナビゲーションを可能にしています。1.人間の思考モデルを象徴的なデザインに仕立て上げたビジュアルコンセプトワークがここにあります。ビジュアルアイデンティティの視点というのは、縦型のステップナビゲーションではなくても検討は可能ですが、縦型にこだわった背景として「ビジュアルアイデンティティをしっかり出せる!」という考え(コンセプト)が、重層的に見えてくることが大事だったわけです。(こうした蓋然性が感じられると言うことは概念設計では重要なことです)

一般的なWebサイトデザインでは、左サイドの縦スペースはカテゴリー分類に占拠される傾向があり、このJR東海新幹線予約サイトのような縦型のステップナビゲーションはあまり見かけません。その理由は、この予約サイトは新幹線予約の機能に特化しているからで、現在のポータル的な機能満載のWebアプリケーションと一緒に実現しようとすると、これほどのシンプルなアーキテクチャーは実現が難しかったかも知れません。


3.サイトの構造システム(アーキテクチャ):どんなに構造的な思考モデルがあっても、どんなにデザインの象徴性が高くても、サイト全体を俯瞰したときの構造システム=アーキテクチャとしてきちんと構成されていなければ、ユーザインタフェースとしては破綻します。JR東海新幹線予約システムで採用した縦型タブのステップナビゲーションが、サイトで実行する機能全体で一貫した作法となるよう構造が組み立てられなければ、良い概念設計とは言えないでしょう。予約、購入、変更、設定など中心機能を一貫したロジックのステップモデルに展開するには、ステップの粒度を揃えていく必要があります。粒度というのはステップ毎の表示内容とユーザ操作の範囲で、細かすぎると面倒なステップ進行になり、粗いと誤操作や思い違いが増えて戻りが増えてしまいます。システムの造り勝手とも絡めながらバランスの良いステップ構造を設計することは、根気のいる作業だと言えます。

ノウハウという意味では、この「サイトの構造システム」での見通しを早い段階で獲得できるか、がもっともロジカルな概念設計技術だと思います。(SEなど)システム開発に長けた人は、この全体を見通したシステムアーキテクチャ設計が最優先するために、シンプルな設計でいかにも使いやすそうなユーザインタフェースが設計できたと、勘違いされる場合が多いと思います。アーキテクチャー設計は、システムエンジニアリングの高級な技術ですし、ユーザインタフェースでも同じ事が言えるからです。しかしこの構造システムがいくらシステムとしてシンプルで、全体機能を包含していたとしても、上記の思考モデルやデザインの象徴性が欠けていれば、広くユーザに受け入れられるユーザインタフェースとはなりません。


4.UI設計の統合モデリング:ユーザの頭の中に形成される空間や時間の概念と合致しているか、表現されたデザインが象徴的なイメージとしてユーザに伝わるか、そして同じロジックでメインの複数の機能を束ねることができるか、をサイクリックに考察し続ける力、これがUI設計における統合モデリング力といえるものです。難解であればあるほど、要求が複雑なほど、パズルを解く喜びは大きいものです。そこにクリエイティブの魅力があります。と同時に破綻の落とし穴も待ち受けていますので、速やかな撤収再チャレンジの繰り返しが大事です。がしかし、ここ一番のコンセントレーションが、新たなブリッジに繋がることも申し添えておきたいと思います。


コンセプトからUIデザインへの流れを文章で紹介すると、なーんだそんなことか〜と簡単そうに思われるでしょうが、実際は言葉化できる範囲をはるかにしのぐ思考の厚みが要求されるものだということをお伝えしておきます。


f:id:OVALPLAN:20100404103149j:image


次回は、JR東海新幹線予約サイトのその他のコンセプトメイキングについて、ご紹介してみたいと思います。

ゲスト



トラックバック - http://oval-plan.g.hatena.ne.jp/OVALPLAN/20100404