色や形や配置の前に、色々とUI構想。

UIに関する持論ですが、備忘録としてblogに書きます。

色んなサイトを巡回していれば、自然と優れたUIとそうでないUIの差を理解でき、
似たようなUIなのにどうしてコチラは売れてコチラは売れていないんだろう?
あー売り方ね。お金ね。なんていうWebデザインのみでの集客の限界も理解する。

Path と Facebook のタイムラインは驚くほど似ているが、
先にこのUIを導入していた Path の人気は未だにそれほどでもなく
それを更に改変したFacebook のタイムラインの情報は瞬く間に拡散する。

そんな利点欠点利益弊害を踏まえ、UIを作るためにかかるコストや
利用するシェアへのマッチングを考えていけば、悪いUIはできないと思う。

クリック・タップを演出する。

UIを考える時、先ずメニューが浮かんでカテゴリ分けて配置すると思うが、
何かを求めてアクセスしてくるユーザーに利益という夢を与えられるサイトには、
UIにも何かしらのストーリーがあって、クリックやタップで、新しい世界が広がり
その広がりが楽しくてユーザーは来ると考えている。

そこには当然、予期したものがなければいけないし、
予期してないサプライズだって欲しいし、不要な場合の抜け道も必要だ。

★Wikipediaの説明文中のリンクは、調べたい事柄に関連する雑学を
提供するためにあり、どんどん派生して読み進めるようにできている。
★googleのロゴはだんだんとロゴの形状を崩し、形状を成さないロゴが
グーグルのロゴであり、何かを期待できるリンクに飛べると思わせている。
★Facebookは実名公開で登録する事によってモラル悪やマナー悪の管理費
を削減しながら、一方でビジネスでも使えるSNSを構築している。
★Dribbbleはユーザーがユーザーを認証しなければ画像をアップできないという
認証式ルールで、作品クオリティとサイト自体のカリスマ性を演出している。

UIをデザインするにおいて、先ずそのサイトが何を目的としているかを知り
知るために必要な項目を洗い出し、それらに「タップする理由」を紐付ける。
それらの理由については理由が理屈になってしまったら切り捨てる。
逆に「ボタンがデカイからまず押す。かわいいから、セクシーだから押す。」
なんていう安直な理由でも、それが理由ならば全く良いと思う。

サイトマップを的確に、広がりを感じさせる。

自分がどこにいるのか分からないと不安になるのは、土地もサイトも同じで
自分がどこにいるのか分からないUIやなにができるUIかが分からなければ、
ホームボタンを押されるか、そのままサヨナラということもある。

どこを押せば良いんだろう。何をすれば良いんだろう。
「期待値」の低いサイトはユーザーにこう思わせてしまうと終わり。
では期待値を高める為にはどうすれば良いのか?

・貴方はいまこのサイトのここのページにいます。ご自由にお進みください。
・このページでは、だいたいこんなことができます。あとはお楽しみあれ。

それらは探す楽しみであり、探した結果得られる知る楽しみである。
そのときのUIは地図でありコンパスでなくてはいけないし、場合によっては
あとどの程度で結果が得られるかを示唆するナビでなくてはいけない。
そしてそのためには先ず、ユーザーが今どこにいるのかをユーザに的確に
示さなければ、行動(タップ・クリック)すらしてもらえない。

動きの面白さ・気持ちよさを考える。

私が愛用しているiPhoneアプリにFlipboardというものがあるのだが
【参照】http://flipboard.com/
このアプリは操作性が非常に気持ちよくて愛用している。
ニュースのトピックと内容を示す象徴的な写真だけがコンパクトに収まり
コンテンツとUIの調和が非常に良く取れている。

iPhone独特のぬるっとした動きや、変化速度にインターレースがかかった
アニメーションや配色など、操作自体が面白いUIが作れれば、
作業ゲーともいえるソーシャルゲームの様に暇な時によく使ってもらえる
サイト演出のきっかけになる。

タップミスの防止。

これはスマホサイトにいえることだが、センサーが感知するため
ユーザによっては押したいボタンが押せないことがストレスになる。

ボタンの大きさに対する人間工学的なサイズや配色は勿論だが、
「続きを読む」などのテキストリンクがボタン近くに無造作に配置され、
行きたい場所へいけないサイトにならない工夫は必要だ。

などなど、これらの注意点を踏まえて作り、踏まえて見直せば、
iPhoneに搭載された長押しルーペや、ピンチアウトで拡大なんていう
補助機能に頼らずに操作ができるUIを作成していけると思う。

Categories: 02:Twit

Leave a Comment