カルーセルとユーザビリティー

Pocket


カルーセルとは?

カルーセル(バナー/パネル/スライド)とは、
複数画像を左右にスライドさせることで表示させる展開(回転)構造を持ったWebコンポーネントです。


スマートフォンが登場した黎明期から、
カルーセルはナレッジと予見が必要な敷居の高い機能であった為、PC/スマフォでの使用には賛否がありました。
特に最終スライドまでの認知は、構造上少なくなっていく傾向は止むを得ません。

実装は「jQuery」で、Webデザイナーでも簡単に組み込めることから広く利用されておりますが、
理想のカルーセルソースに出会えず、適切に運用されていない状況もあるのではないでしょうか。

今回はそんなカルーセルバナーを有効活用するためのポイントを紹介致します。


使いやすさのポイント

単純に単体静止バナーとして素通りされてしまうのが一番の問題なので、気付きのアピールが必要です。

1. ちょい見せ

「単体バナー」ではなく「複数バナー」であることを認識させる表現にする。

2. 手動+時間での切り替え

停止したままではなく、一定時間経過で自動的に動かすことで複数枚を認識させる

3. 全体数の表示

全スライド数を認識させる

4. ポジション

現在のスライドの表示順番を認識させる

5. ループ

最終スライドから先頭へ戻る(ループする)ことを視覚的に伝え、最初のスライドに手早く戻れることを認識させる。

以上に上げたポイントが一つでも十分でない場合、格納されたスライドの全てを認識させるのは難しくなります。


カルーセルの動きをプロトタイピング

「jQuery」などオープンソースから理想の表現が出来ているカルーセルが見つかれば話は終わってしまいますが、探すにも時間がかかるのではないでしょうか。

それでは、カルーセルの内容や動きが確認できるプロトタイピングして具現化してみます。

デザインも出来て、JavaScriptが出来るWebデザイナーなら問題ないのですが、壁がとても高いと思われます。
そんなプログラムに精通していないデザイナーでも作れるツールが、過去の記事紹介している「Adobe Animate CC」です。

グラフィックUIの操作で作れるためデザイナーに相性が良く、
ある程度のJavaScript命令文を項目を選択するだけで記述出来、厳密に構文を覚える必要がありません。
「再生」「停止」「任意のポイントに戻る」「条件分岐」「繰り返し」
以上を組み合わせるだけでも、
プログラマーやプロジェクトメンバーに動きを確認してもらえるプロトタイプを作ることが出来ます。


早速作る

まずは基本的なレイアウトに「ちょい見せ」搭載したプロトタイプです。
クリックでしか動作が出来ておりませんが、回転してグルグルと回るカルーセル本来の動きが確認できるのではないでしょうか。


プロトタイプならではのバリエーション

追加で2種類のデザイン案も作ってみました。

動きの想像が出来、ついつい回してしまいたくなる表現なら有効です。


最後に

いかがでしたでしょうか。
オペレーションソフトやブラウザ速度の向上した現在では、多くの表現がWeb上で可能となっております。
Webデザイナーに求められるスキルも必然と増え、インタラクティブな動的コンテンツが求められてきていると感じています。

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


/////////// 関連記事はこちら↓ //////////

『リフレッシュレート』とUX

プロトタイピングに挑戦する

プロトタイピングの活用

Pocket

『リフレッシュレート』とUX

Pocket

私たちが普段眺めているスマホやタブレットの画面ですが、
実は、操作してない時でも頻繁に画面を書き換えています。

画面を書き換え(⇒リフレッシュ)しているということは、
常に貴重なバッテリーを消費しているので、その部分だけ聞くとエコではありません。

スマホなど、使用開始から2年目に近くなると著しくバッテリーの劣化を感じますが、
出先での充電も面倒ではあるので、
可能であれば何とか温存して一日持たせたいところです。

そんなネガティブな話題から入りましたが、
リフレッシュレートの機能の恩恵は大きく、私たちの使用感/満足度など、
UXに大きく影響を与えます。

今回は機械的な話に寄りますが、
この(単位時間で画面をリフレッシュする⇒)「リフレッシュレート」の話をUXと絡めて考えてみます。


■リフレッシュレートとは?

一般的な説明として、リフレッシュレートとは、
1秒間にスマフォやテレビなどの画面を何回書き換え更新するか、の理解で良いと思います。
機器の仕様書には、

60Hz(ヘルツ)だの120Hzや最近ですと240Hzなんて数字も確認できます。

つまりはスマホの画面が一秒間に60回だったり120回だったり240回、
最新状態に書き換えしてる端末がそれぞれあるということです。
忙しくエネルギー使いまくってそうですね。

では日本でも売れているiPhoneやiPad Proの仕様についてみてみます。


■iPhoneやiPad Proのリフレッシュレートは?

・iPhone   60Hz
・iPad Pro  60Hz(可変リフレッシュレート)

でした。 ※2017/6/6時点発売済みの端末

ロック画面の静止画状態でも、1秒間に60回も書き換えているなんて、環境に申し訳ないですね…。
バッテリー消費もしているので使用者のメリットもありません。
これは良くない体験の様です。

でも…『iPad Pro』の仕様をよく見てください。
”可変リフレッシュレート” となってます。

『iPad Pro』の可変リフレッシュレートですが、
実は利用者が操作していない状況を判断して、
リフレッシュレートを低く[30Hz(30回書き換え)などに] 変更させているんです!
画面を操作していないときはエコモードになるなんて、
見えないところでもユーザーに恩恵を与えているんですね。
バッテリー持ちを良くするための機能だと思いますが、
双方にメリットがあり、
これは良い体験なのではないでしょうか。


■新型iPad Proの仕様

2017年6月6日、Appleは、
同社の開発者カンファレンス「WWDC17」の基調講演で、
「iPad Pro」シリーズの刷新を発表をしました。

・iPad Pro  120Hz [可変リフレッシュレート(48Hz/24Hzなど)]

こちらの製品の仕様では、
リフレッシュレートが大きく向上して120Hzに変更されました。
目的としては、「Apple Pencil」の体験向上が上げられ、
レスポンスが快適になるとのことです。

仕様上だけでもペン先への描画追従性が倍に上がるので、
”書き味”に大きな変化が現れることでしょう。

またリフレッシュレートの向上は、
画面スクロール時にも影響が出ると判断でき、
ヌルヌルとしたスクロールになることで、文字の視認性が良くなるのではないでしょうか。

大きな使用体験の変化は新たな需要を生みます。

「読む/見る」といったニーズでは行き渡った感があったタブレット端末ですが、
「描く/伝える」といった新たな体験と価値を提供するツールとして、
新しい市場を開拓するのではないでしょうか。

■今後のリフレッシュレートの向上について

モバイルツールとして120Hzのリフレッシュレートを実装してきましたが、
コンシューマ向け「据置型モニター」での市場では、
240Hzの領域まで量産技術が進んでいます。
さらに、
人間の目で判断できる限界(140~200Hzという説)もあり、
240Hzあれば十分なのですが、
ホールド型液晶画面は仕様上残像の問題が出るので、
その点をカバーする目的で、
高速にリフレッシュする480Hzまで行きつく必要があるのではないでしょうか。
表示応答性に優れた「有機ELディスプレイ」との組み合わせも考えると未知の領域ですが、
スマホでヌルヌルとスクロールしながら文字を速読する、
そんな体験が出来る時代までもう少しです。

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

////////// 関連記事はこちら↓ //////////

プロトタイピングに挑戦する

プロトタイピングの活用


[必然的な利用シーン]環境/需要との接触


UX(ユーザー・エクスペリエンス)を解釈する


サービスVSユーザー!UIリテラシー格差


あぁ…Flashツールに望みはあるか?


8bitに学ぶUIデザイン


サービス運用中の注意点


データとセグメンテーション


サービス立ち上げとデザイン

Pocket

プロトタイピングに挑戦する

Pocket


今回は、
Webサービスのプロトタイピング(ゲーム)に挑戦します。
ツールは、以前にプロトタイピングツールの紹介記事のなかで紹介した
『 Adobe Animate CC 』(旧『Adobe Flash Professional』)を使って、
UXのエッセンスを加えていきます。

現在、FlashとFlash制作ツールは過去のものとなっておりますが、
「ActionScript」から「JavaScript」の制御に変更になる点と、
記述方法の独自の縛りを認識して進めれば、
同じオペレーションスキルで『 Adobe Animate CC 』による、
「HTML5 Canvas 」のアウトプットが作れるメリットがあります。


■まずは設計

私のスキルですが、

・Flashツールのオペレーション
・極少々のJavaScript

程度です。

そんな理由もあり、今回は課金等発生するサービスではなく、
「HTML5 Canvas 」を活かしやすい、
簡単UIワンボタンゲームを作りたいと思います。

まずは遷移図がこちら↓

なんと要素の少ないことでしょう;
しかしながら、
これらの内容全てを盛り込める時間もありませんので、
形に出来るように取り組んでまいります。

遷移図を見る限り、単純な「if文分岐」で作れそうです。

「ランキング」機能については、実現は難しそうですが、
今回の目的は、
短い期間でアイデアを展開出来る形に落とし込む「プロトタイピング」ですので、
やりたいことのイメージ/ビジョンが、
第三者に伝えられる状態になっていれば問題ありません。
最低限伝えたい雰囲気だけは再現していこうと思います。

時間が限られていますので急いで進めていきます!


■画面イメージを起こす

早速『 Adobe Animate CC 』に組み込む画像を作ります。

遷移図を参考に、各ページを『illustrator』で作ります。

アートボードを画面単位で運用ファイル名をつけて設定してしまえば
ワンアクションで全てのページが書き出し出来て便利です。
したがって、必要な画面のブラッシュアップは適宜おこなえますね。
本当に便利です。

ゲームをプレイするターゲット(今回は1970~80年代の古き良き遊び世代)に好感を持ってもらうため
液晶/LSIゲームの表現を取り入れてます。
ターゲットの懐古UX度上げていきます。

※今回は単純な内容なのですが、
「ユーザー・エクスペリエンス(ユーザー体験)」を重視しています。


■いざ組込み素材の書き出し!

必要な画像が揃ったので書き出しします。

⇒ファイル/書き出し/スクリーン用に書き出し…
です。

今回の作業は「横幅375px」で『illustrator』上で作業をしてますので、
ターゲット端末(iPhone6 サイズ 横幅750px)で使用した場合も必要な解像度が得られるように、
「x1」(倍)から「x2」(倍)に切り替えて書き出しします。
※「iPhone6 Plus サイズ 横幅1242px」がターゲットの場合は横幅414pxで作り「x3」(倍)

それではポチッと書き出し…

…細かい部品も含めてワンアクションで書き出し完了でリネームも必要ありません。
便利です。

さぁ!時間がありません!

『 Adobe Animate CC 』で簡単プロトタイプを製作するために組み込みしましょう!


■『 Adobe Animate CC 』での組込み

※オペレーションは割愛させていただけます。

組込み方はFlash時代と変わりありませんので、
ライブラリに格納した画像を「ムービークリップ」にそれぞれ設定しましょう。

ステージサイズはWeb表示時に一画面に収めたいので375×554(くらい)。

スクリプトのレイヤーを作ってJavaScriptはまとめて記述しましょう。
基本遷移アクションのスクリプトは項目を選ぶと自動である程度書き込まれます。
楽々ですね。

あとはスライドショーをつくる感覚でタイムラインを制御して実装を続けると…

こちらの状態が出来ました。



※あくまで製品雰囲気を伝えるプロトタイプなので、
挙動や当たり判定の完成度には期待しなくて問題ないです。

十分、提案したい内容は伝わるのではないでしょうか。


■UXを意識した調整

今回の目的に「UX」があります。
画面イメージなど意匠でもUXを意識して制作していますが、
最後に、楽しい体験を演出する表現を追加してみます↓



まだまだ足りませんが、
先ほどの状態より背景の草が動いていて、ポジティブな感情になりましたでしょうか。
単調な内容でも、
目的をより良く導く体験要素を組み込むだけで、
感じる体験の内容が変わってくるのではないでしょうか。

今回のプロトタイプでは再現出来ていない「スコア」、
「スコアの違いを生む要素」、共同体験が可能になる「ランキング機能」などは、
より良い体験(UX)に繋がる要素です。

是非、アイデアを形(プロトタイプ)にして、
より具体的な提案をしていきましょう。

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

/////////// 関連記事はこちら↓ ///////////


プロトタイピングの活用


[必然的な利用シーン]環境/需要との接触


UX(ユーザー・エクスペリエンス)を解釈してみた


サービスVSユーザー!UIリテラシー格差を考える


あぁ…Flashツールに望みはあるか?


8bitに学ぶUIデザイン


サービス運用中の注意点


データとセグメンテーション


サービス立ち上げとデザイン

<a

Pocket

プロトタイピングの活用

Pocket


スマホ市場も成熟期に入り、コンテンツ配信では競合も多く、
サービスの運営に不安を感じることが多くなっていると感じます。
そんな状況はサービス設計についても従来の設計から変革が必要となってきており、
コンセプトやターゲティング、ビジネスモデル構築に十分な時間をかけて設計を進めるリスクを避ける、迅速な発想の商品化が求められてきています。

今回は「起案」と同時に「プロトタイピング」の工程を進めてしまうことで、
より多くのサービスをUXを意識出来るレベルまで具現化して並行提案(開発)出来ないか妄想してみました。


開発コストがリスクだったプロトタイプ

商品開発中に全容認識が容易になるプロトタイプの製作は有意義な作業であることは明確でしたが、
プロトタイプ自体の開発期間/コストが問題でそれを行わず、
本開発を進めてしまう現実がありました。
そんな中、
モバイルwebサービス開発支援を目的とした「プロトタイピングツール」の台頭により状況は大きく変わってきております。
詳しくない方でも名前を良く聞くのは、
「Prott」「Sketch」「Adobe Experience Design(2017.4.25時点で無料ベータ版)」でしょうか。

個人的には以前紹介した「Adobe Animate」でもアプリ寄りなプロトタイピングも出来ると考えております。

プロトタイピングツールによって、
従来専門的なスキルと多くのリソースが必要だったサービス設計のやり方にも変化が起きました。

HTMLやプログラムの知識が無くても全体像の構成サンプルをマウス操作で作ることが出来、
実機確認出来る状態を他者へ共有シェア、遷移図の資料等の自動書き出しまで行えるツールもあります。
つまり、
リスクだったプロトタイプ制作のデメリットが解消されたのですから取り組まない手はありません。


プロトタイピングのメリット

従来からサービスの有効性/ユーザビリティーの検証方法として、
「ユーザビリティー調査(テスト)」が提唱されておりますが、
アジャイル的迅速なサービス開発が求められる現在ではその非効率特性が顕著に表れてきてしまいました。
サービス設計者はスケジュールを考慮すると、
まず「削減」を考えるフェイズになってしまっているのが実情です。

非効率化を解消し、
プロジェクトメンバー間での効率的な共有をする目的で開発されたプロトタイピングツールがあれば、
まずは自身もしくは、プロジェクトメンバー全体での認識として、
満足度の高いイメージ/ビジョンが反映されやすい製品プロトタイプが作れる環境にはなってきているのです。

以前は、長い開発期間を経過するなかで薄れてしまったイメージ/ビジョンがあり、
ユーザビリティー調査で「答え合わせ」するまで良し悪しの判断が出来なかったことが、
ツールの導入により素早くプロトタイプが作成出来、
温度差/感覚差が生まれにくい環境が整ったことが最大の導入メリットと言えます。


従来の開発フローで進めるリスク

効率的なツールを競合他社が使うなか、
従来の手法で確実なサービス設計を進めるリスクを考えてみます。

どんな「ひらめき」や「アイデア」が市場で成功するかの確証は残念ながら得られません。
そんな中進めるサービス設計について、
従来のマス需要に向けていれば十分な成功が得られた時代は終わってしまいました。

生活環境が多用化した現在では、同じ環境/価値観自体が少なくなり、そのリサーチしやすい需要も少なくなってしまいました。
先が暗いマーケティング事情なのか定かではありませんが、
「大衆向けヒット商品」が出にくい時代になったことは判断できます。

そんな中で「確実なサービス設計」で進めることはリスクが大きく、
プロジェクトラインを多く抱えられない企業では大きな機会損失に繋がるので、
多くのアイデアを次々と短い期間で具現化し、
そしてビジネスモデル検証するフローが求められると考えます。
そこで可能性を活かす理想論が、「起案」と同時に「プロトタイプ」まで進めてしまうプロセスです。


「ビックプロジェクト」ではなく「ひらめき」の可能性

多用化した生活環境、多様化した需要は裏を返せば、
起案者自身の個人的な需要でさえも、必要とするニッチな需要層である可能性が考えられます。

都合が良すぎる話ですが、
例えば、起案者自身がプロトタイピングツールを使いUX設計を提案出来れば、
残ったリソースでも多くのプロジェクトラインを同時に立ち上げることも可能なのではないでしょうか。

「数打てば当たる」ではなく、
「数打てなければ可能性が埋もれる」でしょうか。

サービスの提供期間についても短く変化してきている感もありなおさら…ではあります。

今後登場する、プロトタイピングツール「Adobe Experience Design」製品版については、
Adobe Creative Cloudのサブスクリプション契約下であればすぐにでも導入出来ます(Mac/Windows10環境)

まずは無料体験期間のあるツールを使用してみてはいかがでしょうか。

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

/////////// 関連記事はこちら↓ ///////////


[必然的な利用シーン]環境/需要との接触


UX(ユーザー・エクスペリエンス)を解釈してみた


サービスVSユーザー!UIリテラシー格差を考える


あぁ…Flashツールに望みはあるか?


8bitに学ぶUIデザイン


サービス運用中の注意点


データとセグメンテーション


サービス立ち上げとデザイン

Pocket

[必然的な利用シーン]環境/需要との接触

Pocket

あなたが関わっているサービスの、UX設計上の「利用シーン」はどんな状況でしょう。

「テレビで聴いた楽曲を購入したくなったとき」など唐突にサービスを使用している場面が多いと思われますが、
初めてサービスに接触する「その時」の環境と需要を意識出来ていることが重要です。

と、さすがにこんな具体性なく都合よくあなたの関わるサービスを見つけ使ってくれる状況は、そこまでに至る過程を省きすぎだと理解いただけるとは思います。

「何に困っているのか」「何を欲しているのか」「どう接触してきたのか」
という利用者の抱える問題を踏まえた「必然的な利用シーン」がある上でサービスのUX設計をしていく必要があります。

今回は、
「ペルソナ設定/行動シナリオ」の設計フェイズでも方向性がぶれないように
開発起案段階での「環境」「需要」などの「接触要素」と過程の理解を考えてみます。


環境ありきの「接触」

サービスと利用者が「接触」できる環境(状況)を正しく認識するために「ターゲット」を知る必要があります。

近年、マス(大衆/集団)だけでセグメントをすることは適切でなくなり、
「何」に関心があり何に関心が無いのか、
また、どういった移動手段をつかうのか、どういった趣向をもっているのかという、「心理的変数」「行動変数」など動向別にセグメントすることが有効になってきました。

「心理的変数」
・価値観、ライフスタイル、性格、好み、将来の希望

「行動変数」
・利用方法/手段、購買意欲、購買履歴、商品への忠誠/親密度(ロイヤルティー)

上記のワードを常に意識してサービス起案の方向性を決めていれば、
提供者視点を避けられそうです。

つまり、
人々の考え方を神のように常に把握していれば「究極マーケッター」に成れそうですが、現実は難しいので仮説の元、細々と都度データで確証を得てターゲットの行動を理解していくしかないようです。
地味な作業がやっぱり大事なんですね。

ターゲットの行動が見えてくると、どのような環境下でサービスとの「接触」が行われるかが見えてきますので、
初めてサービスに接触するその時の「利用シーン」の具体的な過程がわかってくるのではないでしょうか。

下記は、
状況によって「起こり得る/起こり得ない接触」「環境」の例です↓


「隠れた需要」との接触

「需要」を考える場合、ユーザーから直接聞くことが適切と思われますが、
その「聞き出した需要」はそのままでは必ずしも適切ではない場合が多いようです。

私たちが世の需要を掴みにくい状況は、「利用者側が発する声」にも表れ、
本人も本質が見えていないため、例えば、必要だと思って買った商品が結局使われないまま埃をかぶることは良くあることです。

その時の状況を思い返すと、
単純にタイムセールの商品で限定感で買ってしまったり、
モデルやタレントへの憧れから同じ洋服を買ってしまっていたり、
忠誠心/信仰心から、同じ系統(系譜)の商品を惰性で買っていたりと、
つまり「間接的な要因による需要」があることを認めざるを得ないわけです。
よって、「利用者の声」には「本当の需要」が隠されています。
一度寝かせて落ち着いたタイミングで、広い視点で分析、有効活用していきましょう。

必然的な利用シーン

以上を踏まえて、改めて冒頭の利用シーンを考えてみると、下記のような行動をする利用者も設定できるのではないでしょうか(あくまで手段の一つ)。

上記は今回の説明のために極端にセグメントをして必然性を上げているので母数は限られますが、
具合的な接触ポイントの必要性を理解いただけるのではないでしょうか。

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

/////////// 関連記事はこちら↓ ///////////

UX(ユーザー・エクスペリエンス)を解釈してみた


サービスVSユーザー!UIリテラシー格差を考える


あぁ…Flashツールに望みはあるか?


8bitに学ぶUIデザイン


サービス運用中の注意点


データとセグメンテーション


サービス立ち上げとデザイン

Pocket

UX(ユーザー・エクスペリエンス)を解釈してみた

Pocket


ユーザー・エクスペリエンス(以下UX)の概念を解説されても、具体的に日々の業務に何がどう関係していて、どう進めるのか行動に結びつかないものですよね。
また、何とか概念を理解出来ても環境や開発体制、会社の文化などによって導入が難しかったりする場合が多いのではないでしょうか。
厄介ですねぇ。

今回はそんな厄介UXを何とかスマートフォン向けサービス開発に当てはめて都合よく解釈して導入出来ないか考えてみました。


UXってどういうこと?

そもそもUXの目線でサービスを設計するということを大雑把に短く言葉にすると、
ユーザーの需要があり、
ユーザーの目線で提供され、
ユーザーの望むゴールが達成できて、
ユーザーが心地良い!素敵!と感じてまた利用したいと思う設計を、
関わるプロジェクトチームメンバー全員が統一意識で、効率的に精度高くポジティブに開発を進めることと解釈してます。

一番重要なポイントは、
「だれに」向けた「需要」あるサービスなのかを明確に設定することで、この設定次第でサービスの成功が決まるのではないでしょうか。

以上を踏まえて、
「なにを」「いつ」「どこで」「なぜに」「どのように」提供するかを考ることでユーザー体験の設計が行えるはずですが、
ここでUX開発を難しくする環境の問題が出てきます。

実際のサービス開発では、何を売りたいか、どんな手段で提供したいかが、サービス側の事情から既に決まっている状態から企画がスタートすることがあり、その状態ではユーザー目線と需要から起案されることがそもそもないことです。

どんなにUX設計を心がけたとしても、
「ビジネス目線」からスタートした企画には、後付けでUXを適応する事は出来ないと考えておいた方が良いのではないでしょうか。

それでは、UX開発を具体的に設定してみましょう。


チーム内の役割を再認識する

UX設計のフローと、関わるメンバーのスキルについて整理してみます。
フローの内容と、それぞれの担当がプロジェクトに参加するタイミングを表にしてみました↓(注>あくまで弊社環境の場合です)

いかがでしょう?
まだまだ書き込む詳細は残っているので今後も表の最適化を進める予定です。

表のなかで注意が必要なポイントは、
会社やプロジェクトの規模、外部協力会社によって、担当欄一人それぞれの活動範囲に違いはあるところです。

中小規模プロジェクトであれば、幅広い工程を一人で担当することもあり、
大きなプロジェクトであれば、外部の協力会社も入り、各工程を専門スキルに特化した活動を分担して進めることになります。
専門スキルに特化するということは、難易度の高い設計がそれぞれに求められ、広く浅いスキルでは対応できない状況が多いのではないでしょうか。

それでは、ご自身の状況を重ねてみてください。

敢えてネガティブに例えると、
「プランナー」の立ち位置の方はほとんどの工程に関わりますが、
1人で黙々と設計を進めて結果を関係者に共有する流れが多いのではないでしょうか?
専門スキルをもつ各担当者と一緒に具現化作業を進め、多くの機能や仕組みを提案してサービスを充実させていくことが重要なんですが、なかなか責任感が柔軟的方向性を見えにくくします。

逆にプランナー以外のメンバーは、「サービスの製作には協力している…」という他人事意識になりがちな部分…あるのではないでしょうか;
どうしてもどこかで最終的な責任は関係しないという考えが消えずに協調性が不足します。

それぞれの立場が
「私(誰か)の考えたサービス」
の意識が無くならないかぎり、その視点で開発が進むと「UX開発」には到底ならず、
提供者側視点/ビジネス目線の、
マス(大衆)に向けたサービスから脱却はできないと考えられます。

その状態では今の時代の「有効ターゲット」に届かないから、UX設計が必要になってしまっているんですね。

UX設計は先ほどお伝えした通り、
「プロジェクトチーム単位」複数人で進める必然がある以上、
メンバー全員の意識統一が重要なのです。

「私達が考えたサービス!」

…声に出すとなかなか恥ずかしいものですが、割り切って声高らかにポジティブ意識をもってサービスのUX設計を進めてみましょう!

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

/////////// 関連記事はこちら↓ ///////////

[必然的な利用シーン]環境/需要との接触


サービスVSユーザー!UIリテラシー格差を考える


あぁ…Flashツールに望みはあるか?


8bitに学ぶUIデザイン


サービス運用中の注意点


データとセグメンテーション


サービス立ち上げとデザイン

Pocket

検索について

Pocket

こんにちは。今回のブログ更新担当のデジマースのはらです。

皆さんはアプリやwebサイトで欲しい商品や見たいコンテンツなどがある時、どのようにして探しますか?「新着」ページや「人気」ページ、あるいは「おすすめ」などから探しますか?
最近流行している商品などは、大抵どのサービスでも目につくように紹介されているので、上記の方法ですぐに見つかるかもしれません。
しかし少し古い商品、あるいはマニアックなコンテンツなどはすぐには見つかりません。そんな時、皆さんはサイト内で何をしますか? おそらく「検索」を行いますよね? 虫眼鏡のアイコンやテキストフィールドを探しますよね?
と、いうことで今回は「検索」について紹介していきたいと思います。

代表的な検索方法は?

代表的な検索方法は2つ、「キーワード検索」と「カテゴリ検索」があります。今回は見せ方や関連の機能も合わせて解説して行きたいと思います。


1.キーワード検索

読んで字のごとく、入力されたキーワードを基に情報を検索する方法です。キーワード検索は意外に難しく、慣れている人は多いのですが、普段アプリやwebを使わない方には高度で、本当に必要な情報を引き出す言葉を見つけるには慣れが必要です(慣れていても検索ワードを絞る事は難しい時があります)。少しでも検索を簡単にするためには、ローマ字・ひらがな・カタカナなど、どの入力方法でも検索できたり、検索候補の表示(サジェスト表示)されることが望ましいです。

検索ボックスの位置
商品やコンテンツの多いECサイトでは、サイトTOPに検索ボックスを配置することが望ましいです。なぜかと言いますと、「これが欲しい」と目的を持ったユーザーは、まずはじめに目当てのものを探すからです。その際に検索機能がサイト下部やメニューの奥に隠れていると、使用するたびにストレスになってしまいます。ですので特別な理由がない限りフッターや本文への検索ボックスの配置は避けたほうが良いです。(検索結果に情報が引っかからなかった場合のために検索ボックスをフッターに配置する事は問題はありません)
TOPに検索ボックスがあれば、慣れているユーザーには自然で使いやすくなります。また、不慣れなユーザーにとっては見つけやすい位置となります。

検索ボックスのデザイン
キーワード検索は通常テキストフィールドとボタンで構成されています。検索ボックスのデザインは、視認性が高い事が重要で、特にテキストフィールドの視認性が悪くならないように気を付けてデザインすることが重要です。検索開始を決定するボタンには「検索」「GO」「SEARCH」「虫眼鏡アイコン」などの文字・アイコンが一般的に使用されています。また、検索ボックス内にボタンの要素は含めず変わりにキーボードの決定ボタンで検索を開始するパターンもあります。


2.カテゴリー検索

カテゴリ検索は「バラエティ」「スポーツ」「ファッション」などに分けてまとめられた情報を、目的の情報まで選択して辿っていく検索方法です。ユーザーがキーワードを考えたり文字入力をする必要が無いため、分かりやすくカテゴリ分けされていれば、効率よく目的の情報までたどり着けます。カテゴリの分かりづらいものが多い場合に使用するとかえって使いにくくなってしまいます。

カテゴリ検索のデザイン
カテゴリ検索の見せ方や仕組みはサービスによって大きく変わってきます。シンプルなカテゴリ検索の場合、カテゴリの大項目にアイコンを使用したり、文字のサイズを変えてメリハリをつけるとより直感的に伝わり、使いやすくなります。

関連機能
カテゴリ検索時に、カテゴリ内の検索数を表示する機能を「ファセットカウント」と呼びます(例1)。これによりユーザーは求めているカテゴリの検索結果をページ遷移を行うことなく確認する事ができます。他には、検索時に「価格、色、サイズ、性別、機能」などの複数の条件を指定して結果を絞り込む「絞り込み機能(例2)」があります(そのままの呼び方ですね…)。

 


検索は便利です。しかし、めんどくさい作業です。検索機能は「手間が少なく正確で、目的のものに最短でたどり着ける」という事が重要です。位置や仕組を工夫して使ってもらえる検索機能にしていく事が大切です。また、検索機能の改善はすぐに大きな成果につながるわけではないのですが、こうしたユーザビリティの改善がサービスの印象を変えます。検索機能を実装しているサービスがある以上、実装していないと「こんな機能もないのか…」思われてしまうかもしれません。

Pocket

あぁ…Flashツールに望みはあるか?

Pocket

こんにちは。サービスデザインに関わっているデジマースのネモトです。
すっかり寒くなり、街をイルミネーションが着飾ってとてもキレイですね!
というわけで今回は、
Webの一時代を華やかに着飾った「Flash」の、
代表的な制作ツールの今後を妄想してみました!


そもそも「Flash」とは?

元々は旧Macromediaが開発したインタラクティブWEBアニメーションファイルを制作するツールで、
現在はAdobe内にて開発が継続しています。
Webページの切り替えにオーバー表現なアニメーションが展開されたり、
アーティスティックな個人WebサイトのUIでは目を奪われる表現に使われたり、
さらには、
YouTubeなど、Web動画再生の仕組みにも過去使われていました。

そんなFlashの制作ツールはタイムライン制御GUIによる直感的な操作が特徴で、
JavaScriptやhtmlなどが苦手なWebデザイナーでも簡単にアニメーションが作れたことで大変支持を得たのです。

「Flash」で出来ること

また、
特に独自のActionScriptを使用することでインタラクティブな制御か可能となり、
プログラムスキルがあればFlashアプリも作ることが出来る特徴があります。

近年では、SEO対策や脆弱性問題とブラウザ組み込みプラグインという特性上から標準搭載されなくなっている傾向がありますが、
まだまだ実装例も多くあり、身近なアニメーションツールと手段として使われています。

時代の流れにも対応

そんな、Web業界では肩身が狭くなってきていたFlashオーサリングツール「Adobe Flash」ですが、
ツールの名称を「Adobe Animate CC」に変更して開発が継続されることになり、世のフラッシャーに希望を与えました。

注目は、近年対応を進めてきた「HTML5 Canvas」機能の実装によるJavaScriptアニメーションアウトプットであり、
今後のアップデートによって、動画書き出し含めて機能充実が期待されています。

「Adobe Animate CC」の活用

個人的な意見を述べるのであれば、
デザイナーが慣れ親しんだこのオーサリングツールを、
最終的なアウトプットやコンテンツを制作する目的に限定するのは大変もったいないので、
UIの確認を行う「プロトタイピング」の工程で大いに活躍することが出来ると考えています!

UX全体を考慮するのであれば単純な画面遷移アニメーション(トランジション)具合も重要なサービスの振る舞いになってきますので、
「静」でなく「動」の表現を企画者や開発者に伝える手段として適切なツールなのではないでしょうか。

「Adobe CC」を導入している環境であれば「Adobe Animate CC」を是非活用して、
プロジェクトメンバー間で、プロトタイピングによる使用感の共有を進めてみてください。

次回も日々変化するWeb制作環境などにスポットを当ててご紹介します。

/////////// 関連記事はこちら↓ ///////////

[必然的な利用シーン]環境/需要との接触


UX(ユーザー・エクスペリエンス)を解釈してみた


サービスVSユーザー!UIリテラシー格差を考える


8bitに学ぶUIデザイン


サービス運用中の注意点


データとセグメンテーション


サービス立ち上げとデザイン

Pocket

サービス運用中の注意点

Pocket

こんにちは。サービスデザインに関わっている、デジマースのネモトです。
モバイル向けサービス構築に関連した周辺デザインの情報を、UXを意識して発信しています。

前回はターゲット設定に必要なセグメンテーションの説明しました。
今回は順を追わずに、「サービス運用中の注意点」の説明をしたいと思います。


顧客目線と営業目線

サービス設計中は「UX」や「顧客目線/ユーザー中心設計」を重視して開発が進められていますが、
サービス開始後の運用(日々の運用/追加機能開発/施策の投入)ではどうでしょうか。

プロジェクトメンバーと相談が出来ないままサービス変更が続き、それが習慣化して「営業目線/売り手目線」が続くとユーザー体験に大きな問題が発生していきます。

おざなりになる顧客目線

スマートフォン向けの月額定額/サブスクリプション対応サービスでは、サービスへのアクセスがレベニューシェアの成果となるため、多くの対象サービスでは利用者をアクセス直後、他サービスへの流動遷移によってを促します。
これは利用者からみた場合「顧客目線」とは別角度の「売り手目線」、売り手都合となります。
結果、別サービスへの「離脱」を優先度高く促され、求めた需要は達成しにくい状況となり、ユーザー体験が著しく阻害されています。

「どのようにすれば利用者は、こちらの求めた行動をしてくれるのか」

この考えは営業目線上にある顧客目線であり、それはアンチ顧客目線なのです。

160713_01

利用者需要と優先度を保った施策の組み込み

それでは、営業目線での施策そのものに問題があるのでしょうか?
問題があるとすれば、サービス設計/ユーザー体験を踏まえない独立した施策にあります。

利用者がサービスに求める需要達成に干渉しない施策であれば、ユーザー体験を阻害することはないからです。

考えられる利用状況として2つ想定出来ます。

(1)はじめてサービスに訪れた利用者が、内容をある程度確認した状態で、自分に向いたサービスではないと判断

(2)サービスを継続利用している利用者が、今回の需要/目的を達成した状況

表示画面スペースの限られた情報系のサービスであれば、ファーストビューの情報量はUIの命であるため、営業施策は優先度が非常に低くなります。

ただ、ファーストビュー内であってもユーザーの目線/意識が弱い領域が存在します(最上部の狭い空間等)。
(1)(2)の状況を両立できるレイアウトはもちろん理想ですが、
利用者需要を優先しながらも、目立たない傍からそっと付き添う様な営業施策を組み込んでいければ問題ないのです。

160713_02

顧客目線と営業目線の経路設計

道路は、双方の走行車両が決して接触することが無いように、ドライバーが守る交通ルールと経路設計よって安全に作られています。
顧客目線と営業目線についても同じように、お互いを干渉させないルールを設定して、別視点、別経路であるべきです。

また、「離脱/流動」も状況によって発生する利用者のニーズの一つと考えれば、
ポジティブな利用者の行動に物理的に干渉しにくいサービス設計は可能なのではないでしょうか、

「これから進めようとしている提案は本当に利用者のためになっているか」

「今作っている資料は利用者がみても理解される内容になっているだろうか」

会社としてのミッション、営業としてのミッションは、顧客目線を進める上で非常に悩みどころではありますが、
営業側の売りたいものと、顧客の買いたいものは違うものです。

顧客目線を進めながらビジネスとして売上が立っていくビジネスモデルは理想論ですが、
長期的には結局そんなやり方を目指さなければいけないのではないでしょうか。

次回もお付き合いください。

/////////// 関連記事はこちら↓ ///////////

[必然的な利用シーン]環境/需要との接触


UX(ユーザー・エクスペリエンス)を解釈してみた


サービスVSユーザー!UIリテラシー格差を考える


あぁ…Flashツールに望みはあるか?


8bitに学ぶUIデザイン


データとセグメンテーション


サービス立ち上げとデザイン

Pocket

データとセグメンテーション

Pocket

こんにちは。サービスデザインに関わっている、デジマースのネモトです。
モバイル向けサービス構築に関連した周辺デザインの情報を、UXを意識して発信しています。

前回はサービス構築に際してのプロジェクトメンバー意識の共有を説明しました。
今回は、ターゲット設定に必要なセグメンテーションの説明をします。


セグメンテーションに必要な「市場」(顧客)データ

セグメンテーションする市場について、まず注意しなければいけないことがあります。
「市場」=「業界や競合のデータ」ではありません。
業界や競合データだけでもサービス展開出来ますが、最も大事な「顧客(顧客ニーズ)」を知らないと提供者よがりの一方的なサービスになってしまいます。

01a

ターゲットの対象

セグメンテーションとは、ターゲットを決める際、広すぎる顧客を細分化して、求められるニーズや特性ごとの塊に分けていくことです。
従来、顧客をセグメントする方法として利用されてきたのは「男女」「年齢」「地域」などの属性(デモグラフィック/ジオグラフィック)ですが、
生活環境が多様化した今の時代は、それだけでは個人の意識や趣向をまとめることが出来なくなってしまいました。

02

漫画を読むのは子供だけではなく、漫画を読んで育った大人であったり、発信された情報や個々の価値観から至った人だったりと、同一世代間だけの価値観自体は少なくなってきました。
皆が同じことに感心を持つ単純な時代ではなくなったのです。
そこで新しく重要視されることになったのが価値観/ライフスタイル/趣向などの心理的変数(サイコグラフィック)と、
利用方法や手段/購買行動などの行動変数(ビヘイビア)なのです。

03

特に心理的変数については後々説明していく「ペルソナ設計」にも必要なデータとなります。

「顧客の行動」と「顧客の声」の違い

「顧客の行動」はある条件下において顧客がどのような行動をするかですが、「顧客の声」はその場限りの一次的な感情である場合が多く、それを貴重な需要として受け取ってしまうと問題があります。
顧客の声を集めたアンケートより、どういった行動をしたかの調査データの方が役立ちます。

適切サイズに細分化

セグメントは、ビジネスが成立するある程度のまとまりに留め、細分化しすぎないことが重要です。
顧客ニーズや特性により塊単位で分類していきましょう。

更なる細分化(ターゲット深堀)でニッチ市場の隙間を探せ

セグメンテーションをして細分化した幾つかのニーズや特性は市場でまだ満たされていないものだったのではないでしょうか、
その隙間のセグメントこそ新しいビジネスチャンスであるかもしれません。

04

後追いでサービスを企画する機会も多いですが、後追いである以上その分野で1番になれる可能性は極めて低く、1番になるには競合サービスよりも多彩でリーズナブルで魅力的でなければ勝てません。
ですが、商材は同じでも別の方向性で企画を進めることが出来るはずです。
リソースが限られているのであれば尚更個性を出すこと、特化することでサービスの差別化が図れ、そのキッカケ、気づきを見つけられるのがセグメンテーションされた顧客ニーズや特性です。

ポジティブなユーザー体験は顧客ニーズを根拠に設計されています。

より良いUX設計には今回の市場(顧客)調査とセグメンテーションが必然的方向性を生んでいきますので、この設定には十分な時間を掛けていきましょう。

次回はターゲティングとポジショニングを予定してます。

/////////// 関連記事はこちら↓ ///////////

[必然的な利用シーン]環境/需要との接触


UX(ユーザー・エクスペリエンス)を解釈してみた


サービスVSユーザー!UIリテラシー格差を考える


あぁ…Flashツールに望みはあるか?


8bitに学ぶUIデザイン


サービス運用中の注意点


サービス立ち上げとデザイン

Pocket