UI:無人の山中で木が倒れた時、音はするか

2014年05月29日 23:58

  • LINEで送る
ux

最近は、jQuery の普及もあって、手軽にスクリプトが実装できる良い時代になりましたね。
技術革命によって大量生産品の「モノ」が普及した、かっての時代のような感覚をも覚えます。

これからはプログラムの世界であっても職人のような存在は消えていき、オープンソースを利用した二次産業のような作り方になってしまうのでしょうか。
実際、jQuery を使うことで、リッチなデザインに見えるサイトも多いですね。

jQuery では様々なプラグインが開発されているのですが、その中でもお手軽にひとつ上のWEBデザインを可能にしてくれるスライドショー。



UI:無人の山中で木が倒れた時、音はするか

上は、よく見るスライドショー。
画面上部中央というプレミア感のある位置に、大きくビジュアルで目を引く画像を表示させる。
その画像を次々に切り替えることができるようにすることで、目線を引く協力な位置を複数の画像で使うことができる。というエリアの有効な使い方をするものです。

少し前の WEBデザイントレンドってやつですね。
ものすごく目にすることの多い画面デザインです。

ただクリック率を解析していくと、2枚目・3枚目の画像は異常に全くクリックされない傾向にあるんですよね。
バナーのクリエイティブの質の差かなぁ、とバナーが表示される順番を入れ替えてみると、やっぱりさっきと同じ結果になる。
完全に、「スライドショーでは2枚目以降の画像はクリックされない」というアクセス解析結果が見えます。

UI の考え方では、画像が切り替わるスライドショーでは、左右にボタンをつけるようになっているのですが。
左右のボタンとは「>」などのシンボルとなった矢印。
この矢印があることで、閲覧者に次の画像があることを気づかせています。

という考え方はあまりよくなく。

この矢印は、「クリックできる」というアフォーダンスです。
クリックすることで次の画像を表示させるという動きを理解させるためのインターフェースになっています。

ここで問題になるのは、人間の心理の部分。
「クリックした先に何があるか分からない」という状態では、人間はクリックしません。
だから2枚目がクリックされないという結果になります。

じゃぁ2枚目をクリックさせるための結果の出せる UI デザインとは・・・。

UI:無人の山中で木が倒れた時、音はするか

サムネイルを表示します。

これだけで「興味を持った人」が気づいてクリックしていくので、クリック数は半端なく跳ね上がります。
入口というのはやっぱり重要ですね。

こういうのは、下積み時代に ECサイトのバナーを大量に作る仕事などで培われていくスキルのようですね。
僕の駆け出しの時代は EC とか無かったので、よく知らないけど。



タグ :UI


このブログの新着情報を配信中!

RSSリーダーに登録することで、新着情報だけを確認することができ便利です。
上のアイコンをクリックしてご登録ください。

見るだけでは飽き足らない、あなた。あなたも小言に参加してみませんか。コメントトラックバック、ご自由にどうぞ。


入力した内容は表示されます
上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。
過去記事
デザイン特集
グルメ特集
アクセスカウンタ
読者登録
メールアドレスを入力して登録する事で、このブログの新着エントリーをメールでお届けいたします。解除は→こちら
現在の読者数 32人
QRコード
QRCODE
プロフィール
yasukawa
yasukawa
浜松在住クリエイター&デザイナーが仕事のことについて頑張って書いてみる。
【認知心理学、コミュニケーションデザイン、情報デザイン、UI/UX、インフォメーションアーキテクト、サイネージ(Scala)、3Dモデリング、データベースアプリ構築(FlileMaker)、Flash Script 2.0&3.0、サーバ構築(Linux)、IoTセンサー&電子工作(Arduino)
文部科学省後援情報検定 情報デザイン試験合格
日本商工会議所販売士検定試験2級合格
日本英語検定協会実用英語検定試験3級合格
デザインカレッジ 外部講師(WEBマーケティング)
日本最大級レビューメディア「zigsow」2021年ベストレビュワー、2022年ベストレビュー