ビジュアルファシリテーターの阿呆な研究

Read Article

「モバイルフロンティア」読書感想文 ~テクマクマヤコン、テクマクマヤコン、素敵なモバイルUXデザイナーになーれ!

自分、そして周囲の人たちもふくめ、PCサイトを設計してた人がスマホサイトを設計すると、必ず出会う違和感があると思う。

「PCサイトをデザインするようにUI考えたら、スマホサイトが情報ぎゅうぎゅうで使いづらい・・・
「デザインをPCサイトと同じ感覚でやったら、派手になりすぎて見づらい!
「PCサイトでだしているあれもこれもださなきゃいけないんだけど、整理しきれない!
逆もまた、しかりである。

携帯サイトのUI設計と、スマホサイトのUI設計の変遷

4、5年ほど前までは、ガラケー(フィーチャーフォンというけど、ここでは私が慣れ親しんだ「ガラケー」でいく)で見る携帯サイトとPCサイト、まったく別のUI設計がなされるのはあたりまえだった。
携帯サイトのHTMLは絵文字がある、外部CSSが危うい場合がある、javascriptが使えない、キャリア依存の表示制限がある…など、HTML4とは明らかに違う技術制限があった。技術とはいっても、コーダーさんでなくてもだれでも作れるようなものだけど。画面幅こそ2010年頃のガラケーの画面は3インチ前後に大きくなっていたけれど、技術制限が厳しくできることがかぎられており、どのサイトも似たり寄ったりのUIとなっていた。

しかし、2010年頃スマートフォン(以下スマホ)が爆発的に流行し、HTML5 CSS3がひろまってきたことで、状況は一変する。UI設計者にとっては、画面の中で突然いろんなことができるような感覚になったのだ。PCサイトと同じようなことができると考えたUI設計者も多いと思う。
もちろん、iPhone3Gの画面は3.5インチと、さして大きいわけではない。ガラケーより少しだけ大きい画面でどのような表現ができるのか?多くのUI設計者は頭を悩ませたに違いない。その結果、2011年頃はスマホでみると理解不能な複雑怪奇なサイトができたと思ったら、携帯サイトをスマホでそれっぽく表示するサービスが流行したりもした。過渡期だったと思う。

2011年末~2012年頃になると、ドコモがdメニューを開始するなど、キャリアじたいもスマホサイトを公式コンテンツとして認めるようになった。また、情報系サイトやECサイト、SNSは大手は軒並みスマホサイトをそろえるようになる。この過程で、携帯サイトのような表示は影をひそめ、スマホ最適化画面が主流となってくる。スマホの画面はどんどん大きくなり、iPhone5やアンドロイドの端末など、4インチ以上の端末も珍しくなくなってきた。

グラフィカルユーザーインターフェース(GUI)とナチュラルユーザーインターフェース(NUI)の違い

技術の進化に伴い、モバイルで見るサイトのかたちはどんどんかわってきたのだけど。スマホサイトの技術制約は少ない…むしろPCブラウザよりHTML5/CSS3が使える分、技術的にはPCよりも多くのことができる可能性もある。
それゆえに、「スマートフォンのユーザーに対してどんなサイトをつくるべきか」というのは、難しいお題となってしまっているように思う。

モバイルフロンティア よりよいモバイルUXを生み出すためのデザインガイド」では、このようなインターフェースの設計の難しい状況を「GUIとNUIの境目での停滞」と述べている。
GUIは、「グラフィカルユーザーインターフェース」で、イメージとしてはPCサイトが近い。
他方のNUIはナチュラルユーザーインターフェースで、スマホアプリやサイトが近いイメージだ。
この2つのユーザーインターフェースは、以下のような違いがあると本書では述べている。

GUI グラフィカルユーザーインターフェース

・情報をものとして表すため画像を使用
・見たままが得られる
・マウスとキーボードという間接的なインタラクションでたくさんのコマンドを補う

NUI ナチュラルユーザーインターフェース

・情報をオブジェクトとして表す。人間の直感を利用。
・見たままが得られるのではなく、行ったままが得られる
・タッチスクリーンによってインタラクションの仲介がなくなり、ユーザーが直接的かつ自然な方法で情報を操作する

また、GUIエクスペリエンスとNUIエクスペリエンスでは成功要因となる特徴が違う点も指摘している。

個人的には。PCサイトはどちらかというとGUI、スマホサイトはNUIよりであるとおくと、携帯サイトはその中間よりなかんじ。ガラケーは親指で「キー」を操作する。そして遷移はウィンドウを遷移しながら進む形式。その点においてはGUIよりだ。
ただし、ガラケーは手の中に画面を持っていることから、画面と指の位置はだいぶ近い。また、基本上下の操作(上へいく、下へいく)、中央の決定、左右(戻る、進む)しか許容されてないから制約条件下においてはわりと直感的。PCサイトよりはNUIに近い印象だ。
「今日のモバイル端末やタブレットにあるNUIのインターフェースは、NUIの成長過程の一部です」と本書でも論じている。

本書では、よりNUIよりでユーザーに心地よさを与えるスマートフォンアプリやサイトを作るにあたり、以下NUIの8原則を提唱している。

【NUIの8原則】
1:パフォーマンス重視の原則
GUIではタスク達成が評価される
NUIではエクスペリエンスを楽しみながら操作することが重視2:直接的な操作の原則
GUIではキーボードとマウスによる間接的な操作。
NUIでは情報をオブジェクトとして直接操作できる3:足場組の原則
すぐれたGUIはたくさんのオプションとコマンドを一度に表示し、複雑な改装構造と視覚的な強調効果で描く。
すぐれたNUIは直観的、ユーザーが直観的に予想したとおりにふるまえる。4:状況を考慮した環境の原則
GUIでは、コンテクストを無視して同じオプションのセットをユーザーにいつまでも表示続ける
NUIでは、環境に適応し次のインタラクションが何かを示唆する

5:スーパーリアルの原則
GUIでは紙の束のようにウィンドウをずらしながら重ねて表示
NUIではピンチやズームのように、リアルに自然に見える表示

6:ソーシャルインタラクションの原則
GUIは高度に視覚的で認知的な集中力が必要。
NUIはよりシンプルで認知的に消耗することが少ない・

7:空間関係の原則
GUIでは情報をアイコンで表示する
NUIでは情報をオブジェクトで表示する

8:シームレスの原則
GUIはキーボードとマウス前提。
NUIはセンサーやジェスチャーUIを利用。NUIのほうがユーザーと情報の間の障壁が低い。

スマホのECサイトUI設計者としては、「エクスペリエンスを楽しみながら操作」というのがなかなか難しいなあと思う。短時間でさくさく閲覧できるような利便性ばかりを追求してしまいがちだから。

また、「NUIはよりシンプルで認知的に消耗することが少ない」という点、私は特に気をつけている。この点はモバイルサイト構築の精神「1画面でやることは一個!」というのをうけついでいる。PCと比べ情報量の少ないスマホやガラケーにおいては、ユーザーがこの画面で何をすればいいかすぐ気付けるようにするためには、「これをやってね」と直観的にわかりやすいことこそ肝だと思うのだ。

でもねでもね。画面だけ考えている・・・・だとまだまだデザイン領域はたりないのだ。

モバイルサイト(スマホ・携帯サイト両方)のUXを考えるときに大事なこと

本書では「モバイルエクスペリエンス デザインに大事なこと」として、以下3点をあげている。

・モバイルならではの体験を作ることに焦点を絞る
・注意が散漫になったり途中で行動が遮られてもいいようにデザインする
・認知的負荷や機会費用をできるだけ減らすこと

特に個人的に大事だなーと思うのは、「モバイルならではの体験を作ることに焦点を絞る」という点。特にここ、PCサイトがメインサービスだと、忘れがちになっちゃう点なのだ。

『 電車で旅行の価格比較をしていたユーザーが、その後家のPC(予約前提)で比較したものを再現しやすくするにはどうすればいいか?とかを考えるのがUXデザインだ。』
引用

まさにこの部分!
モバイルだからこそできること、を考えぬきたいなあと思う。まだまだできてないところなんだけど。汗。

ユーザーはもはや閉じ込められた単独の体験には興味をもたず、代わりに複数のデバイスやコンテクストをシームレスに横断する体験を当然と思いつつあります
デザイナーは「画面」や「ページ」という思考から外に出て、仕組みをデザインすることを始めなければなりません。

スマホサイトでも携帯サイトでも、モバイルサイトを考える人は、ユーザーが日々持ち歩いている端末で何をするか、という部分のデザイン~まさにUXデザイン~を考えてく必要があるのだ。
「モバイルフロンティア」はまさに、モバイルUXをつかさどっていこうとしている方にとって、応援の書になることまちがいなし!と思う。

———-

UIを考えるだけでなく、体験をつくりだす。体験をデザインする。

小さい頃、岡田あーみんとか、さくらももこのような漫画家めざして落書き帳にお絵かきをしまくった結果。なんの因果かUXデザイナーという仕事についていた。
落書き帳をはみだして、現実世界にもwebというどこまでも広がる魔法の世界、両方にお絵かきできる仕事。現実と魔法の世界をつなぐのは、みんながもっているスマートフォンやガラケーというモバイル端末だ。

願わくば。スマホにむかって
「テクマクマヤコン、テクマクマヤコン、ルルルルルー!成果をあげれるモバイルUXデザイナーになーれ!」
ってできたらいいのになー。スマホにはやく変身機能がついてほしいものです。
真っ白なUI設計書、どうしようかなこれ(´・ω・`)

URL :
TRACKBACK URL :

Leave a Reply

*
*
* (公開されません)

Facebookでコメント

Return Top