サイト内で迷子にさせないために

Pocket

サイトに遊びに行ったときに迷子になったことはありませんか?
迷子になってしまうとユーザー本人もせっかく訪問したのに目的が達成し辛くなり、しまいにはサイトを離れてしまいます。
提供側もせっかく訪問してくれたユーザーを離脱させてしまう事はとても勿体ないことです。
では、どういった状況でそのような事が生まれてしまうのでしょうか、改めて考えていきたいと思います。

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

▼訴求元と訴求先の差異

サイトにアクセスしてきたのは良いが訴求元の内容が訴求サイトのどこを探しても見つからない。


ようやく見つけたと思ったら、とても分かり辛い所にありました。

訴求元(例えば広告など)から訪問しているということは、この例の場合「壁紙が1枚もらえる」と言うインセンティブに惹かれてる可能性が高いです。
そのため、希望のものが見つからなければすぐに離脱に繋がってしまい、サイト内の回遊も全く望めなくなってしまいます。

例えばもし出先で場所が分からない、大きな駅構内でなかなか目的地にたどり着かない等の迷子の様な状態のとき、人は知らずのストレスをため込んでいます。
それではどうすればいいのでしょうか?サイト側とユーザー側を考慮しつつ考えてみたいと思います。


訴求元の内容を訴求先で認識しやすく、また整合性をしっかり取ることがユーザーを迷子にさせないことへ繋がっていきます。
結果的に離脱率の減少にもつながるかもしれません。

ただし、サイトによっては掲載する内容の順序や見せ方などをUIデザインを考える際に、訴求元の設置場所を決めていたり、優先度が例えば低く設定されている等、サイト運営側の意図がありますので、上記の例が一概にこうであるとは言えない場合もございます。

▼必要箇所の戻るボタン

サイト回遊中に戻るためのボタンが必要箇所に置かれておらず、TOPや、コンテンツTOPなど等に戻れなくなった事はありませんか?
人によっては端末の矢印を使用する方もいるとは思いますが、上手く挙動しない場合もあるかもしれませんので、サイト内の戻るボタンは用意されている必要はあるでしょう。

サイトによっては、戻るボタンをページ下部に置かず上部のヘッダー、下部のフッターに常駐させていたり、長いページの場合は上部へ戻るボタンが設置されていたりと様々です。
ユーザーがサイトを快適に使える様、サイト内をしっかり行き来できる環境をUIデザインを考える際に並行して考える必要がありますね。

▼現在地の明記

入力フォームやコンテンツの深層まで潜っていると自分がどこにいるのか認識し辛い場合がありますよね。
自分がどこにいるのかわからないとき知らずのうちにストレスがたまってしまうものです。

ユーザーに何か行動を起こさせる際は、予め何を行う必要があるのかしっかりと明記しておくことでユーザーの混乱も防ぐことができます。

▼最後に

サイトの提供内容が優良であってもユーザーは1度でも迷子になると「このサイトは分かり辛い」と印象を覚えてしまうかもしれません。
サイト内のコンテンツ毎の見せ方、内容によってはメリハリをつけるなど、ユーザーが迷わない環境が求められます。
せっかく訪問してくれたユーザー、せっかく作ったサイト、互いに良い方向に向かえる様、UIデザインを含め細かな部分まで目を配る必要がありますね。

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。
それでは、スガがお送りいたしました。
またお会いしましょう!

Pocket

インセンティブ付き動画広告『ADBRO PRIZE』を提供開始

Pocket

こんにちは,デジマースのネモトです。
今回は、弊社が提供開始したインセンティブ付き動画広告
『ADBRO PRIZE』を紹介致します。

「ADBRO PRIZE」とは?

インセンティブ付き動画広告で、「からあげ」や「コーヒー」「人気スイーツ」などのリアルな賞品をインセンティブとしてユーザーへ贈ることができる動画広告です。

キャンペーンページに訪れたユーザーは、商品・サービスの動画広告を視聴完了後に商品・サービスのサイトへページ移動します。
その後ユーザーは成果地点(会員登録、資料請求など)に到達した際にインセンティブを獲得します。
ユーザーはデジタルコードとしてインセンティブを受け取り、コンビニエンスストアなどの店頭で賞品と交換することができます。

動画広告は情報量の多さや表現の幅が広いことでブランドリフトを生み出すことができる効果的な広告として利用されていますが、ADBRO PRIZEではインセンティブをユーザーに贈ることで確実にコンバージョンに結びつけることが可能です。
「ブランドリフト」と「コンバージョン」を同時に実現することができる、これまでにない新しい動画広告です。


特徴まとめ

(1)ユーザーにリアルなインセンティブを贈ることが可能な動画広告。

(2)成果地点は自由に設定可能。広告主様の幅広いニーズに対応できます。

(3)インセンティブは成果が発生した際にオンデマンドでデジタルコードとして発行するため、在庫を持つ必要がございません。

(4)インセンティブをデジタルコードとしてオンラインでユーザーへ付与することで、個人情報の取得が必要なく、発送対応の手間と送料が掛かりません。

(5)インセンティブの種類はコンビニ商品やギフトコードなど63商品をラインナップ。今後も追加予定です。


それでは、
お気軽にお問い合わせください!

詳細はこちらとなります。
http://adbro.jp/lp/prize.html

Pocket

スマホ画面サイズユーザビリティ

Pocket

今回はモバイル端末を中心に、「画面サイズ/画素密度と目の距離に関係するユーザビリティと満足度」を考えてみます。

画面サイズと画素密度の相対関係を考えると非常に奥が深く楽しそうなので、まずは個人的に思い入れがある端末でスペック表を作ってみました↓


主要画面表示機器スペック表

スマホ 画面サイズ / ppi リスト

iPhone 3G
3.5 インチ 320× 480  HVGA 163ppi

iPhone 3GS
3.5 インチ 320× 480  HVGA 163ppi

iPhone 4
3.5 インチ 640× 960  Retina 326ppi

SO-01B
4.0 インチ 480× 854  FWVGA 254ppi

IS03
3.5 インチ 640× 960  WVGA 330ppi

iPhone 4S
3.5 インチ 640× 960  Retina  326ppi

iPhone 5
4.0 インチ 640×1136 Retina  326ppi

iPhone 5S
4.0 インチ 640×1136 Retina  326ppi

iPhone 6
4.7インチ  750×1334 RetinaHD 326ppi

iPhone 6plus
5.5 インチ 1080×1920  FHD 401ppi

iPhone 7
4.7インチ  750×1334 RetinaHD 326ppi

iPhone 7plus
5.5 インチ 1080×1920  FHD 401ppi

iPhone 8
4.7インチ  750×1334 RetinaHD 326ppi

iPhone 8plus
5.5 インチ 1080×1920  FHD 401ppi

iPhone X
5.8インチ 1125×2436 SuperRetinaHD 458ppi


ガラケー 画面サイズ / ppi リスト

W11H
2.2 インチ 240× 320  QVGA 182ppi

W52SA
2.8 インチ 240× 400 WQVGA 167ppi

W54SA
3.0 インチ 480× 800 WVGA 311ppi

MARVERA KYY08
3.2 インチ 480× 854 FWVGA 306ppi


ガラホ 画面サイズ / ppi リスト

MARVERA KYF35
3.4 インチ 480× 854 FWVGA 288ppi


携帯ゲーム機 画面サイズ / ppi リスト

Nintendo DSi LL (上画面)
4.20インチ 256× 192      76ppi

Nintendo 3DS (上画面)
3.53インチ 400× 240 WQVGA 132ppi

Nintendo 3DS LL (上画面)
4.88インチ 400× 240 WQVGA 96ppi

Nintendo Swich(携帯モード)
6.20インチ 1280× 720  HD 237ppi


モニター 画面サイズ / ppi リスト

モニター/デスクトップ
24.0 インチ 1920×1080 FHD  92ppi

MacBook Pro
15.4 インチ 2880×1800 Retina 221ppi


TV画面 サイズ / ppi リスト

ブラウン管TV
29.0 インチ  640× 480  SD  28ppi

ハイビジョンブラウン管TV
32.0 インチ 1280 × 720  HD  46ppi

フルHDTV
50.0 インチ 1920×1080 FHD/2K 44ppi

4K TV
60.0 インチ 3840×2160  4K  73ppi

8K TV
60.0 インチ 7680×4320  8K  147ppi


大きさと密度の移り変わり

2001年から3G携帯電話(フィーチャーフォン)がサービス開始されましたが、その当時の画面サイズは下記でした。

--------QVGA端末--------
・240×320 pixel (QVGA解像度)
・2.2インチ
・画像密度は182ppi
---------------------
※ppi (pixels per inch)
1インチ当たりの画素数
数値が大きいほど高精細


現在の端末と比較すると、
四角い大きな画素(ドット)がハッキリと認識できるもので、
いわゆる「8ビット的」な画質制約の中でサービスやその広告バナーを作っていました。

WEBページの容量制限(Web1ページ100KBまで等)もあり、質素倹約の時代だったのです。

その後は画面の高精細化と大型化が進み、「VGA解像度の端末」(QVGAの倍の解像度もつ端末)が登場することで、フィーチャーフォンは成熟期を向かえます。

-------- VGA端末 --------
・480×800 pixel (WVGA解像度)
・3.0インチ
・画像密度は311ppi
---------------------

そして、新しい市場/エクスペリエンスに向けて登場したのがスマートフォンです。

日本ではiPhoneやAndroid端末を発売開始した2010年あたりからスマートフォンの普及が始まりましたが、
大型化した画面と高細化した解像度を十分に処理できるスピードとOSの環境が整うまで時間がかかり、
特にAndroid初期端末の「モッサリ感」は苦い記憶として残っている方も多いのではないでしょうか。

-------- iPhone 6 --------
・750×1334 pixel (Retina HD)
・4.7インチ
・画像密度は326ppi
---------------------


最適視聴距離による体験

それでは本題である「画面サイズ/画素密度と目の距離に関係するユーザビリティと満足度」について「ブラウン管式の家庭用TV」の時代まで戻ってから考えてみます。

過去のブラウン管TVの場合、画面の高さの「5~7倍」離れて視聴する状態が「最適視聴距離」とされてきました。
「最適視聴距離」とは「1ドットを構成するRGB画素」が距離をとることで程よくぼやけ、溶け込み、画面全体が「綺麗な一枚絵」として視聴できる距離とされています。


液晶TV/ハイビジョンTVの場合は(共にフルHDレベルの条件)、ブラウン管(SD)と比較して高精細になった為、画面の高さの「3~4倍」の離れた距離で十分な絵が視聴出来るようになりました。


----最適視聴距離の基準設定要素----
・16:9のアスペクト比
・視野角33度
・視力1.0での走査線識別が出来ない距離
※ハイビジョンTV走査線数(1125本)
---------------------

過去のTVと比較して、液晶TVの画素密度(ppi)は「4K化」「8K化」など高精細化が進んでおります。
家庭環境において意識して見入る映画や鑑賞コンテンツについては、
視野角を踏まえたうえで今後も視聴距離が近くなっていく可能性があります。

それでは、そのTVよりも高精細な画素密度を持つスマートフォンの「最適視聴距離」はどうでしょうか。


スマホの最適視聴距離?

まず、スマートフォンについては「最適視聴距離」の概念は適切ではないと考えます。

理由として、手に持って使用するスマートフォンはTVなどの機器とは利用環境がそもそも異なり、目と端末の距離は常に意識せず一定に保たれています。
距離の違いは身体特徴のほか、近視、遠視、老眼など視力の個人差により出てきます。

目に負担の少ない利用距離の確認方法としては、今回詳しく紹介は行いませんが「ハーモン距離」と言われる距離測定の考え方もあります。

「画面の大きさ」「画素密度」の違いはユーザビリティと体験に大きな影響を与えます。
年齢によってはスマートフォンを使うこと自体が負担となり使いにくい場合もありますので、
自身の環境に適した使いやすい機器を選んでいくことが大切です。


年齢による距離の違い

下の表を見る限り、
「20歳」と「30歳」「45歳」の裸眼状態では文字を読める最適な距離がまず違うことが確認できます。


注目する部分は、「20歳」と「45歳」では距離の開きが3倍近い点です。
既に「45歳」の裸眼状態では、ピントが合わず「近く」が見えにくい為、
腕を伸ばし頭を引くといった、若年利用者とは異なる厳しい使用環境が待ち受けています。

素直に老眼鏡を受け入れる割合も少ないことから、
サービス設計する側は、利用者の大半をも占める興味深いこのターゲット層も踏まえてガイドラインを策定して、適切なサービス設計を行なうと良いのではないでしょうか。


最後に

モバイル端末の普及により目の疲労に拍車をかけているこの現代だからこそ、普段のデスクワークで使用するPCモニターの適切な配置が必要です。
幅広い利用者に向けてユーザビリティを考えていくのであれば、なお大切な心掛けなのではないでしょうか。

それでは次回も、サービスUX設計に関係した話題をします。
以上、デザインに関わっているデジマースのネモトでした。

Pocket

ユーザーを混乱させないUIとは

Pocket

アプリを使用するとき、皆さんは操作に関してストレスなく使用できていますか?あえて説明を聞かなくても、「これは押せる」「これを押せば戻る」など理解できていますか?
普段アプリを使用している方なら、チュートリアルを確認したり説明を聞かずとも「これは押せるな」と、“ある程度予想ができ”スムーズな操作ができるはずです。
実はこの“ある程度予想できる”というのはユーザーの使用経験が豊富というだけではなく“ある程度予想できる”ように設計されているからなのです。
UIでユーザーが混乱してしまう場面は様々です。目的の機能が見つからない、操作方法がわからない、表示されているアイコンの意味がわからないなど、書き出したらキリがないほどあります。
今回は色使い、エフェクト、位置でユーザーを混乱させないための方法をご紹介いたします。

ユーザーを混乱させないためには…

UIでユーザーを混乱させないためには、デザインのルールを決めサービス内で統一する事が必要です。UIデザインでは、色使い、エフェクト、レイアウトなどサービスを通して統一させる必要があります。

UIではタップできる色・強調する色などを統一する必要があります。例えばユーザーが最初に目にするアプリTOP画面でテキストリンクが青だった場合、ユーザーは「青が押せる」と認識します。しかしTOP以外のページでテキストリンクが赤だった場合、ユーザーは「押せるのか?」「強調しているだけなのか?」「押せるようだが特別な意味があるのだろうか?」と、青から赤に変わるだけでこれからの動作やこの後に起きる出来事について余計なイメージが広がり混乱してしまいます。また、見落としてしまうかもしれません。少し大げさな言い方をしましたが、たとえ混乱が一瞬だとしても、これをページ遷移する度に繰り返すとストレスになります。

エフェクト

TOPで押したボタンは立体感のない角丸ボタンだったのに、別ページでは立体的だった。このように、ページ毎に知らない形のボタンに出会うとユーザーは遷移前のページとは関係のないページに来てしまったような違和感を覚えてしまいます。
エフェクトなどのあしらいは統一することが望ましいです。

位置、構成

目的は同じでもページ毎に構成が違う、そのような場合もユーザーは混乱します。

アイコンや操作方法を
OSのガイドラインや定番のものにそろえる

こちらはとても重要なことです、ユーザーはOSの操作に慣れています。ですので見慣れたOSと同じアイコンや操作法でUIを設計すれば当然利用しやすくなります。アプリを設計する際はまず、OSごとに用意されているデザインガイドラインを確認する事をオススメします。
また、アイコンや検索ボックスなどを頻繁に利用されている定番のデザインにすることで、ユーザーがアイコンの意味や操作法を調べる手間が無くなるめ、利用しやすくなります。

_

同じ位置・同じサイズ・同じ色で作られていれば、ページが変わろうともユーザーはこれまでの経験からすぐに意味を理解します。
UIは皆さんの意識しないところで使いやすくなるよう様々な気配りがされています。また、レイアウトが統一されているほうが作りやすいという製作者側のメリットもあります。
他の表現については、機会があればまたご紹介いたします。では。

Pocket

簡単!ペーパープロトタイピング

Pocket

こんにちは!
今回のテーマは「簡単!ペーパープロトタイピング」です。
ペーパープロトタイピングとは何なのか、どうやれば良いのかなどを、アプリ開発の観点から説明していきたいと思います。

ディレクターや企画職など、これからペーパープロトタイピングが出来るようになりたい!と言う非デザイナーの方向けの内容になっています。
ぺーパープロトタイピングは誰でも簡単に出来る上、仕事の効率化に有効だったりとメリットが沢山ありますので、ぜひ試してみて下さいね。


ペーパープロトタイピングとは

ペーパープロトタイピングとは、簡単に言うと「紙で試作すること」です。
「こんな感じにしたい」と言うアプリ画面の案を手描きし、完成した時のイメージを視覚化します。
書き出したイメージを元に、遷移や画面の要素を検証し、アプリが使いやすいかの確認を行います。


ペーパープロトタイピングをやるべき3つの理由

ペーパープロトタイピングですが、絶対にやらなければいけない物ではありません。
ですが、これを行うことで得られるメリットは沢山あります。

①素早く作成・修正が出来る
紙とペンさえあれば誰でもすぐ作ることが出来ます。難しいソフトの技術や知識は必要ありません。
イメージを描いては直しを繰り返し、スピード感を持って検証を行う事が出来ます。

「自分は絵が下手だから…」と言う方も大丈夫です!丸や四角などの簡単な図形と文字さえ描ければ出来ます!
遷移や画面の要素の検証に、見た目のクオリティは重要ではありません。何度も検証を行うことが大切ですので、素早く描いたり描き直したりできるペーパープロトタイピングが適しています。

Adobeソフトやパワーポイントを駆使して綺麗に作る必要はありません。
むしろ作成に時間が掛かってしまうので、この段階ではソフトに頼らない方が良いです。
綺麗な線や色合いなど見た目のクオリティが気になって、そこを整えるのに時間が掛かってしまうからです。ここで時間を掛けるべきなのは、描き終わった後の「検証」です。
それに、いくら綺麗に作っても、後々「やっぱりこうしたい」と内外から修正点が沢山出てきます。
ガチガチに作り込むと修正がし辛かったり、大幅な修正になるとそれまでに掛けてきた時間が無駄になってしまいますので、手描きがオススメです。

 

②コミュニケーションツールとして最適
描き出したイメージはすぐプロジェクトメンバーに確認してもらいましょう。そうすることで、メンバー全員が共通のサービスビジョンを持つことに役立ちます。
言葉だけの説明ではイメージすることが難しくても、図として視覚化されている事で認識のズレが軽減されるからです。
また、具体的なイメージを見ることで問題点にも気が付きやすくなり、その場で皆の意見を聞きながらすぐ描き直すことが出来ます。

「思っていたのと実際に見るのとでは違った」と言う、修正の連鎖を軽減することも出来ます。

③後々の手戻りを防ぐ
後々の工程、デザインカンプが完成した、テストアプリが出来た、と言う段階で大きな手戻りが発生しないように防止する為でもあります。
上記の段階まで来て「使いづらいから直したい」と問題が発覚し、解決するには大幅に修正する必要がある…となると、それまでに掛けてきた時間が無駄になるばかりか、更に時間とコストが掛かります。
修正する為に必要なだけ期日や予算の調整が出来れば良いのですが、なかなか難しい場合も多いと思います。
「このアプリは使いやすいか」「要素が足りていて辻褄があっているか」など根本的な問題を確認する為に、ペーパープロトタイピングを行ってください。


ペーパープロトタイピングっていつやるの?

ペーパープロトタイピングを行うタイミングですが、これはそれぞれの開発状況によって異なるかと思います。
今回は例として、「画面遷移図/サイトツリーが完成した後に、ペーパープロトタイピングを行った場合」を想定して進めたいと思います。
この段階でペーパープロトタイピングを行う目的としては、遷移図の整合性の最終確認を行う為です。

絶対にこのタイミングでペーパープロトタイピングをしなければいけない!と言う物ではなく、あくまで弊社の場合はと言う一例なので参考程度に見て下さいね。

「画面遷移図ってそもそもどのタイミングで必要なの?」と言う方は、こちらに詳しく載っていますので、ぜひ読んでみて下さい!


ペーパープロトタイピングに必要な物

ペーパープロトタイピングに必要な物は下記の通りです。

■紙
■ペン
■スマホ

たったこれだけあれば出来てしまいます!
場合によって描く場所は「ホワイトボード」や「ポストイット」などでも良いです。


ペーパープロトタイピングのやり方

①スマホの画面を描く
紙に縦長の長方形を描きましょう。
これはスマホの画面を表しています。手描きでザックリ描いてしまって大丈夫です。

線がぶれるのがどうしても気になる、と言う方は、パワポなどでテンプレートだけ作ってしまっても大丈夫です。
テンプレートは紙に印刷して使ってくださいね。

 


②要素を描く
ヘッダーやフッター、ボタンや画像など、必要な要素をどんどん描いていきましょう。

ここのポイントは「作り込み過ぎないこと」です。
画像は斜線を囲んで表現したり、重要なタイトル以外のテキストは省略して線で表現したり、アイコンは簡素な物や仮の図形を配置する、など。
また、色を付けたり装飾をする必要もありません。ペーパープロトタイピングのメリットである作成スピードが損なわれてしまうからです。

その画面にどんな要素があるのか伝われば十分ですので、細部に時間が掛かり過ぎないようにすることが大切です。


③遷移を確認する
「アプリのTOP画面からどこへ遷移するのか」など、遷移の確認をしましょう。
言葉だけでなく、遷移する順に隣合わせにしたり、線で繋げたり、画面ごとに切り分けて並べたりと、見て伝わるようにするとわかりやすいです。

 


④実機で確認する

紙の上で全体像が掴めたら、実際にスマホで見るとどのようになるか実機確認を行いましょう。
紙に描いたイメージをスマホで撮影して、画像をプロトタイピングアプリ(Prott、Marvel、POPなど)に取り込みましょう。
※プロトタイピングアプリとは、静的な画像に「ボタンを押して遷移する」など動的な効果を付けることが出来るアプリです。
実際にアプリを見る時と同じような画面比率・動作を確認出来るので、より現実的な検証をすることが可能です。

 

紙の上でどんなに考え尽くしても、いざ実機で確認すると思っていたのと違った…なんてことはよく起こります。
「ボタンはこの位置にあるのが適切か」「遷移は適切か」など、実機で検証を行い、ペーパープロトタイピングの段階で問題点を修正出来るようにしましょう。


おわりに

いかがでしたでしょうか?
ペーパープロトタイピングのやり方をまとめてみましたが、思ったより簡単だったのではないでしょうか!
やり方事体は簡単でも、アプリによっては必要な画面要素が多く、物理的に数が多くて大変…と言うのはあるかと思いますが…
ですが、ペーパープロトタイピングをやるのとやらないのとでは、後々の工程のスムーズさに差異が出てきます。

興味を持った方は、ぜひ試してみて下さい!
それではまた!デジマースのコンでした。

Pocket