コンテンツ

モバイルデザインとはユーザーにフォーカスするもの、またはフォーカスすべきものです。このいわゆるユーザー中心設計によっては3つの強固な概念が生み出されました:ユーザー体験(UX)、ユーザビリティ、そしてユーザーインターフェース(UI)です。

これらの用語、およびそれらに関連付けられた役割は、よく間違えられたり代替可能なものとして使われたりします。普遍的な定義もなければ重複するところもあるので、困惑することもあるかもせれません。

これに対処するためには、あなたのサービスを利用するであろうユーザー像を特定し、サービスを利用することによって何を達成したいと思っているのか特定することです。そして次のことを確認してください:

1.彼らはそのゴールを達成しましたか?どのくらい簡単に/早く?=ユーザビリティ

2.彼らはサービスを利用することが価値あることだと気づきましたか?=UX

3.どのようにデバイスと直接やりとりしていましたか?=UI

 

アメリカのカンザス州を拠点に活動するWebとアプリの開発者であるロバートゲインズは、ビジュアルデザインを4つ目に加えることを提案しています。いいアイディアではあるのですが、UにVを加えても役に立たないのではないかと思います。

私ならビジュアルデザインも含めるでしょう、それはグラフィックやタイポグラフィを含む静的ビジュアルコンポーネントが魅力的であることを保証します。4つは以下のように分けられます:

 

・UXはユーザーの包括的な経験についてです。これは、ユーザーがセールスファネル(見込み客から顧客への転換)を含むインターフェースとプロセスの両方についてどのように感じているかの分析を含みます。

・ユーザビリティは、目的を完了することがいかに簡単であるかについてです。

・UIは、ユーザーがWebサイトとどのようにやりとりするかについてです。

・ビジュアルデザインはグラフィックやタイポグラフィなど、静的なビジュアル要素の外観についてです。

 

4つの概念は重複しますが、要約すると UXは、感情的な反応について、ユーザビリティは使いやすさについて、 UIはやりとりについて、ビジュアルデザインは外観についてです。

素晴らしいユーザビリティとユーザー体験を組み合わせた事例はないのか?

私が最近メモしたWebサイトはAMC Theatresについてです。このWebサイトは魅力的で使いやすいだけでなく、普遍的ではありますが目障りでないユニークな導入へのフローを作っています。

「マイムービー」機能はユーザーにエンゲージメントする気にさせ、アカウントに登録し、SNSでアクティビティのシェアを促します。この体験がオンボーディングと呼ばれるもので、しばしばユーザー体験を損ねることにもつながりますが、ユーザーが実際に使うことを楽しむような体験に転換することによってそのファネルの最終目的に到達させることができます。

amc_mymovie_cz21

UIとUXとユーザビリティには様々なアナロジーが存在しますが、車や運転のアナロジーに勝るものはありません(Thomas  Bakdalの言葉)

 フォードフォーカスやフェラーリテスタロッサがA地点からB地点へとあなたを連れていきます。つまりそのユーザビリティは同じです。しかし、運転中の体験、つまりUXはフェラーリの方がよりスリリングでしょう(あなたはそう望んでるでしょう)。 UIは、スチールのタイヤ、ペダル、ギアレベルなどです。ビジュアルデザインはライン、ダッシュボード、色(フェラーリの赤である限りどんな色でも)についてです。

プロジェクトの規模に応じて、これらの要件は、様々な職種の専門チームによって実行されたり、またはそれらを一つの包括的な役割に統合されることもあるでしょう。この募集要項をみてください。Verizon社のマーケティング部門でWebとアプリのためのモバイルUXとUIデザイン、戦略まで担当するスーパーヒーローを探しています。

ui_ux_designer_job_ad_cz21

ユーザー・インターフェース(UI)

UI、またはグラフィカル・ユーザー・インターフェース(GUI)またはヒューマンコンピュータインタフェース(HCI)は、たまに知られているように、ユーザーがデバイスやWebサイト、表示されているアプリケーションとどのようにやりとりするのかを決めます。これはレイアウトや水平方向または垂直方向を含んでいます;メインナビゲーション・メニューを含むメニュー、 – それは多くの場合、3つのラインでできた「ハンバーガー」のアイコンで示されています。ナビゲーション・リンクおよびアクションボタン;テキストフィールドやフォーム;ラジオボタンやチェックボックス;ユーザーのタッチとジェスチャーなども含みます。

レイアウト、入力コントロール、メニューやUIの他の側面をより深く理解するために、AndroidデベロッパーガイドラインとiOSヒューマンインターフェイスガイドラインを参照してみてください。

※これらのガイドは、ネイティブアプリ開発者のためのものですが、Webサービスの開発とも重なる部分がたくさんあります。

UIデザイナーは通常、手描きとデジタルワイヤーフレームを使用して、モバイルサイトやアプリのユーザー・インタフェースをモックアップします。

ゼロからモバイルUIデザインを使用するデザイナーや開発者はほとんどいません。デザイナーならUXのキットを使用するでしょう。Speckyboyによるこのコレクションを見てみてください。同様に、開発者なら、テストされたUI要素やレイアウトを再利用することが可能なjQuery MobileやSencha Touchなどのフレームワークを使用するでしょう。

UIデザイナーの芸術とは、競争から一線を画した体験を作り、どうやって使うかを考えなくていいような直感的なUIを作ることとの間でバランスを取ることです。

UIについてのある諺があります。「ユーザーインターフェイスはジョークと通ずるところがあります。もしあなたがUIを説明する必要があるならば、それはよくないUIと言えるでしょう」最初にこれを言った人が誰かはわかりませんが、下記のデザインは、ロンドンを拠点としたデジタルデザイナーのカイル・ロバートソンによるものです。

user_interface_joke_robertson_cz21

米国の大手小売業者のシニアビジネスアナリスト、ギニー・キーガン:

UIは重要な構成要素です。それは家の基礎のようなものです。梁ビームやフローリング、壁、天井を支える、それなしでは家が崩壊してしまうような強くてしっかりした基礎を作らなければなりません。

モバイル開発においても同じです。しっかりした基礎建築、データベース構造、セキュリティなどから始める必要があります。そしてそれがサイトのユーザー体験全体を支えるのです。どれか一つだけでというわけにはいかないのです。

ユーザビリティ

ユーザビリティはUIに立脚しています。実際にインターフェースがどのくらいよく機能しているのかが計測できます。例えば、次のスクリーンに遷移するのにどのボタンをタップすべきか明確ですか?隣にあるディスプレイ広告を間違えてタップすることなく、適切なボタンを簡単にタップできますか?

しかし、ユーザビリティとはこのようなことだけではありません。ユーザーにとってゴールを達成するのはどれくらい簡単なのかも考慮されます。これを評価するために、ユーザの的確なゴールを特定することが不可欠です。だからこそ優秀なモバイルデザイナーは使用事例や、ユーザーストーリー、カスタマージャーニーやユーザジャーニーについて夢中になるのであり、あなたもそうすべきです。

UXと比較すると、ユーザビリティは定量化が簡単にできます。

ユーザビリティは以下の要因に影響を受けます:

・早い vs 遅いページの読み込み時間。
・直感でわかる vs 困惑させるナビゲーション。
・明確で、配置のいいボタン vs 直感的でなく、配置の悪い、または非稼働のボタン。
・ボタンが大きく他のボタンとの間隔が適切、リンクもタップしやすい vsボタンが小さすぎて正確にタップするには間隔が近すぎるボタン
・画面にフィットし、全ての重要な情報やボタンが目に入るページ vs 右や下側に寄った画面
・読みやすいテキスト vs 判読不能なテキスト
・選別され、適切なサイズの画像 vs 無関係でサイズオーバーな画像

・すぐ電話、メール、地図を開くなどのアクションに移れるCTAボタン vs 静的な詳細ページ
・関係性があり、適切なサイズの広告 vs 信用できない、無関係な広告

 

次のブログではWebサイトでのユーザビリティの検証方法について考えます。まだ確立はしていませんが。

 

以下の例は先月ロンドンで行われたデジタルシフトカンファレンスで話題になったものですが、あるプレゼンターが携帯で「UKのイケてるスタートアップ100社」を見始めたら、ページごとに全画面のポップアップ広告がでてきたことについての不満を語りました。(彼は2ページで諦めたそうです)。

 

タブレットとスマートフォンでの体験を比較した時に面白いのは、Mobilizerを使用しているスタートアップ100社はモバイルデバイスで見られた時だけ全画面広告が現れるのですーつまりタブレットの広告の方は押し付けがましくないのです。

100_startups_cz21

機能と美しさどちらが必須なのか?

ユーザビリティに着目すると、実用的なデザイン、つまり必要最低限、シンプルさ、機能性を促し、ビジュアルアピールを高めてオーディエンスにハッと言わせるような機能は追いやることになります。北欧家具のような、最高に実用的なモバイルWebやアプリは美しくもあり、楽しものであると言わなければなりませんが。

TargetInternet.com社のマネージングディレクター ダニエル・ロウルズ:

ユーザビリティは、目的に主眼を置いたやりとりであり、ユーザーの目的を簡単に、そして直感的に完了させるものです。ユーザー体験は、より広範なものであり、これらの目的を実行しなければならないという感情的繋がりです。有意義で価値があり、楽しいユーザー経験だったかが重要なのです。


素晴らしいユーザビリティとユーザー体験を組み合わせた例はどんなものがあるでしょう?

Uberは、シンプルで効果的なアプリのデザインをしている良い例です。そのシンプルの中にもハッとさせる要因があり、それは非常に直感的です。

但し、タクシーアプリのUberはまだネイティブアプリの素晴らしい体験を、もはやアプリのダウンロード広告としては機能しなくなったモバイルWebにまで広げるかどうかは決めていません。

ユーザー体験(UX)

UXとは、ユーザーがモバイルサイト(またはアプリ)とのやりとりから得られる包括的な感情のことです。目に見えにくく、独立しているので、ユーザビリティよりもテストやデザインするのが困難です。

一般的に、ユーザビリティはUXのサブカテゴリーであると考えられます。

UXの一番いい視覚的表現の一つはセマンティック・スタジオのピーター・モービル社長によって作成されたユーザー体験のハニカムです。これは、もともとWeb製品用に作成されたのですが、これらの基準は同じくらい、またはモバイルにより適していました。

あなたのWebサイトは、以下のそれぞれについて、どのようにユーザと共鳴しているか考えてみましょう:

・実用性- ユーザーがそれなしでは生きられないような必須のツールになりますか?

・使いやすい- それは直感的に使用でいますか?ユーザにとって目標達成は簡単にできますか?
・望ましい – 友人からそれを聞いたとき、 「私もそれが必要だ!」と思ってもらえますか?
・探しやすさ -関連用語をWeb検索(またはアプリストア検索)した時に、簡単に見つけられますか?サイトであなたが必要としているものを探し、ナビゲートするのは簡単ですか?

・信用できる – 行動を促すに説得力がありますか?ユーザーは、サイト上のコンテンツを信頼しますか?
・アクセスしやすい – 障害を持つ人が使いやすいサイトですか?視聴覚障害者にスクリーンリーダーを使用するなど。
・価値がある- ユーザーは使用する見返りに広告を受け入れたり、個人情報を渡したり、支払ったりしますか?

honeycomb_morville_cz21ギニー・キーガン:

ユーザー体験は戦略を立てる上で重要です、なぜならユーザーがモバイルサイトやアプリを使う際、それが一番記憶に残ることだからです。UXはよりユーザーの感情や心理に関することです。それはユーザーがページをスワイプしたり、ブラウジングしてる際に感じる感情です。

 モバイルの開発において、ユーザーにあなたのプロダクトを使用している時にポジティブで簡単、楽しいという感情を持たせることは重要です。あなたもユーザーに対し楽しい気持や、幸せな経験をさせたり、ストレスフリーで困惑させるような経験はなくしたいですよね。

 

この記事は、ClickZのブログ “The three Us of mobile design: UX v usability v UI” を著者の了解を得て日本語に抄訳し掲載するものです。 Repro published the Japanese translation of this original article on CliickZ in English under the permission from the author.