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

Pocket


カルーセルとは?

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


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

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

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


使いやすさのポイント

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

1. ちょい見せ

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

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

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

3. 全体数の表示

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

4. ポジション

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

5. ループ

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

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


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

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

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

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

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


早速作る

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


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

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

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


最後に

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

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


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

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

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

プロトタイピングの活用

Pocket

UIとアニメーションの関係②

Pocket

必要最低限の機能は揃っていてもアニメーションが一つもないアプリケーションがあった場合、機能面では問題がなくともUI/UX的には優れているとは言えません。
もしそのようなアニメーションのないアプリが存在した場合、あらゆる動作は唐突で、自分が現在どのページにいるのか?どのページから何を呼び出したのか?など、全ての動作にストレスが生じます。UIにアニメーションを取り入れる事で表示に順序が生まれ、目で追うことのできない唐突な動きを削ることができます。このようにアニメーションはユーザーとOSの対話をスムーズに行うための重要な役割を担っています。

ここまでは前回の記事でご説明した通りですが、アニメーションの役割はOSとの対話をスムーズにするだけではありません。アニメーションを使用して楽しさを演出することで印象に残るUXにする事が可能です。
例えばSNSでハートの形をしたグレーのいいねボタンがあった場合「押した直後にピンク色に切り替わる」場合と「押した直後にハートの周りにキラキラした光が浮かびハートが動きながらピンク色に切り替わる」場合では、後者の方が印象に残りやすくなります。コレはいいねと言うポジティブな動作に合わせたアニメーションだからです。大げさに言うと動作と感情に合わせたアニメーションだからです。
また、アニメーションはユーザーの楽しいという体験に影響を与えるだけではなく、ネガティブな動作のストレスを和らげたり、ポジティブな印象に変えることができます。視覚的に楽しければ、ユーザーは印象深く質の高いUI/UXと判断するでしょう。

今回のブログでは、ユーザーの目線や意識を惹きつけたり、体験に影響するアニメーションをいくつかご紹介致します。

1. 反応を示すアニメーション

SNSやECサイトで見かける「いいね」や「お気に入り」ボタン。押した際にアニメーションがあると、押した後の反応が伝わりやすくなるだけではなく、ポジティブな感情とリンクし、楽しい印象を与える事ができます。

2. 状態の切り替えのアニメーション

こちらは機内モードに変更した際に見られるアニメーションです。ONに変更した際には飛行機が飛んでくる。OFFの場合は飛行機が飛んでいく。動きは小さいですが、このような細部への配慮にも、ユーザは楽しさやサービスの質の高さを感じます。

3. 強調のアニメーション

使用して欲しい機能がある場合や、通知がきている場合などにアニメーションを使用することで要素を目立たせることができます。堅苦しい説明がある場合などに使用すると、堅苦しさを和らげることができます。

4. アニメーションの使いすぎに注意

アニメーションは小さくても動いているため目立ちます。そのためアニメーションを多用すると目線が散り、逆にどの要素も目立たなくなります。また、要素の優先順位やシンプルさが失われますので本当に目立たせたい所にだけ使用する事をオススメします。
アニメーションがよく作りこまれていてもアニメーション自体がくどくなっていたら意味がありません。具体的には動作が長い・派手という状態です。この状態だと使用する度に鬱陶しくなります。ユーザーがアプリを何十回、何百回と使用し、アニメーションに新鮮味を感じなくなった瞬間、アニメーションは目障りになります。ツール系アプリ等では特に使いどころに気を付けるべきかと思います。


アニメーションはUXに影響します。私はアプリを使った時にキャラクターが動いたり、ページ内で面白い動きがあった場合、良くできているな~とか、楽しいな~と思います。アニメーションは使用感の向上だけではなく楽しさの演出にも役立ちますが、アニメーションは一度気になりだすととにかく鬱陶しくなってしまいます。使いどころを良く検討した上で組み込む事をお勧めします。
Pocket

UIとアニメーションの関係

Pocket

こんにちは、ハラです。モバイルアプリで何気なく見るアニメーション、実は見た目を良くする為だけにあるのではなく、使用時のストレスや違和感をなくし使いやすさや満足感を高めるために使用されています。今回のブログではそんなUIのアニメーションについてご紹介いたします。

見た目だけじゃないアニメーション

まずは①の画面と②の画面のメニューボタンを押した後の反応を見比べてみてください。①と②でユーザーに違和感を与えないメニューの表示方法はどちらだと思いますか?

  ①    ②

 

大抵の方は②の方を選んだのではないでしょうか? ①ではメニューボタンを押した後にメニューが突然現れました。対して②ではメニューがスライドして現れました。スライドしてメニューが出てきた場合の方が違和感が無いのはなぜか? それはスライドして現れる方が現実に近いからです。現実では魔法のようにいきなり何かが出現することはありません、ユーザの想像を越えない現実に近い動きを加える事で自然でストレスのないメニューの表示が可能となります。①のように「よくわからない場所から突然現れる」という事になると、目線をどこに置くべきか定まらずストレスとなります。
ユーザーは、現実で起きる動きに近い表現に対しては自然に適応します、非現実的なアクションを起こすとユーザーは混乱してしまい、複雑なUIと捉えてしまいます。

そのほかにもアニメーションを使うと効果的な場面をご紹介します。

更新の動作
   

 

こちらは「画面を下にスワイプして放す」という動作により更新を行った場合に現れるアニメーションです。画面のどこからでもスワイプにより更新する事ができるこの方法は、ナビゲーションバーまで指を伸ばして更新ボタンを押し、画面に更新中と表示されるという流れがないため、ユーザにとってはボタンよりも楽な操作となります。しかし、このスワイプ更新にはアニメーションが必要不可欠です。もし、この操作にアニメーションが無かった場合、気づきとなる要素がないため、ユーザーは“どこまで下げればいいのか?” “更新がされているのか?”と悩んでしまいます。かといってどの辺りまで下げるべきなのかをチュートリアルで説明する事は、読まれるかわからない上にユーザーの使用を一時的に止めてしまうため、最良の手段とはいえません。このスワイプ更新のように、行って欲しい動作のイメージに沿ったアニメーションを加える事で、ユーザーは煩わしいチュートリアルを読む必要がなくなります。

削除と詰め
  ×    ○

 

リストなどで追加・削除を行った際にアニメーションが無かった場合、要素が消えたことや消えた空間が詰められたということがあまりにも突然で、ユーザーが認識をする事が難しく混乱します。また、削除と詰めなどの複数の動作が同時に起きる事も混乱の原因になります。この場合はアニメーションにより「削除」→「スペースを詰める」と言う順序をわかりやすく表示する事で混乱を避けることができます。このようにアニメーションにはアクションの順序を伝える手段として有効です。


UIにアニメーションを取り入れる事は非常に重要です。「言われてみれば、ここにアニメーション使われているよね」と、思われるぐらい自然に組み込むことが理想です。また、ポジティブな体験を伝え、ユーザーを飽きさせないようにする・惹きつけるアニメーションももちろんあります!(こちらもまた別の機会にご紹介してみたいと思います)では。

Pocket

ユーザーフレンドリー

Pocket

こんにちは!デザイン業務に関わっておりますコンです。

不安定なお天気が続きますね。急に大雨が降ったりするので困ってしまいます。
さっそく新品の靴が濡れてしまいました…みなさんも気をつけて下さいね。
もし靴の買い替えをご検討中の方は梅雨が明けてからの方が良いかもしれませんよ!

さて、今回のテーマは「ユーザーフレンドリー」です。
ユーザーフレンドリーとはどんなものなのか、スマホ向けサービスをデザインする視点で考えていきたいと思います。


ユーザーフレンドリーとは?

ユーザーフレンドリーとは、その名の通り「使う人にとって親切なこと」と言う意味です。
ユーザーの視点に立ったサービス設計や、使いやすい状態を言います。UIデザインをする上でとても大切なことです。

「何も知らない人が初めてこのサービスを見た時、使い方がわかるかな?」と考えてみて下さい。
ユーザーは、何か目的があってサービスを利用しようと思っています。その目的をストレスなく達成してもらう為に、ユーザーフレンドリーを意識してUIデザインを行って下さい。
そうすることで、問題点のある現状よりUIを向上させることが出来るはずです。


ユーザーフレンドリーのポイント

ユーザーフレンドリーで特に意識すべき代表的なポイントをご紹介したいと思います。


①目線の流れを意識する

基礎的なことではありますが「目線の流れ」を考えましょう。
簡単に言えば、横書きの文字は左から右へ、行が変われば上から下へ読むのが自然なことですので、そう行った目の動線を意識すると言うことです。

目線があっちこっちに行くより、一定のルールでテンポよく見せてあげた方が見やすいですよね。

②優先度を明確にする

ユーザーにとって優先度が高い物から順番に構成しましょう。
①とも関係しますが、目線が左から右、上から下へ動く特徴を活かし、優先度の高い物は上部または左上に置くと効果的です。
最も目立ち多くの人に見てもらえる場所ですので、それだけユーザーがすぐ気付くことが出来ます。

更にその中でも優先度が最も低い物やあまり目立たせたくない物、最も重要な物で表現を変えたりするとよりわかりやすくなります。

上記を意識してボタンを配置する場合のイメージも作ってみました。下の図を見てみて下さい。

まず、あまり目立って欲しくない物とは「キャンセル」「戻る」など離脱する要素で、イメージの左の図のように色の面積を減らして目立たないようにしています。
開発側からするとネガティブな要素なので、出来るだけ押してほしくないですよね…。
優先度をかなり下げてテキストだけにすることもありますが、これは開発側の目線なのでユーザーフレンドリーではなくなってしまいます。
その場合はテキストの色を変えてあげたりするとアクションを起こせる気づきになるので、ユーザーフレンドリーになります。

次に、特に重要な物とは「決済の確定」「消去」など取り消せない要素で、イメージの右の図のように注意を促す赤色を使用して目立つようにしています。
こうすることで目線を優先度の高い物へ誘導してあげることが出来ます。


③押せることがすぐわかるようにする

ボタンやリンクパネルなどタップすることでアクションが起きる要素が、押せるものだとすぐわかるようにしましょう。

下記の図を見てみて下さい。

左の図のより、右の図の方がボタンだと認識しやすく押せることが分かりやすいですよね。
文字を囲っただけですが、ちょっとしたことでグッとわかりやすさが変わってきます。

優先度が低いアクションに対しては、テキストの下に下線を引いたり、矢印アイコンを付けるだけでも効果があります。

 

ここで注意したいのが、押せる場所と押せない場所の違いが明確になるようにすることです。
押せない場所が押せるように見えないように表現を変えましょう。


④シンプルに

機能や画面の要素は出来るだけシンプルにしましょう。
選択肢が多ければその分迷いが発生しますので、ユーザーが目的を達成するまでに時間を掛けさせてしまいます。

極端な話ですが、選択肢が2つしかなければ、どちらか1つ選べばいいだけなのでわかりやすいですよね。
機能を減らすのが難しい時など、どうしても画面内が複雑になってしまう場合は、最も優先度が高い物が何なのかわかるように構成しましょう。

例えば下記の図ですが、機能が沢山ある中でもシンプルに見せることが出来ます。

左の図は、選択肢が多い上に見た目も同じなので、どこを選択すればいいか一目ではわかりづらいですよね。
上から下まで読んでから選択する…と言う動きになるので、時間のロスだったりユーザーのストレスに繋がります。
右の図だと、「はい」「いいえ」の選択肢にまず目がいきますよね。「青いボタンのどちらかを押せばいいんだな」とユーザーが直感的に気付けるかと思います。
このように、いかにシンプルに見せるか注意することで、わかりやすさに大きな違いが出てきます。


おわりに

いかがでしたでしょうか?
ユーザーフレンドリーの考え方自体は、そんなに難しい事ではないですよね。
そもそも機能が複雑だったり、サービス開発が進んでいく中で仕様が変化したりすると「どうすればいいかな?」と悩むところではありますが…

悩んだ時こそ、ユーザーにとって何がフレンドリーなのか初心に返ることも大事なのではないでしょうか!

それではまた!デジマースのコンでした。

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

こんにちは。デザイン業務に関わっております、コンです。

みなさん、バレンタインはどうお過ごしでしたか?楽しく過ごせましたでしょうか。
普段買わないちょっと良いチョコや、独創的なチョコを見るのが楽しくて、お店の特設コーナーを見かける度につい立ち寄ってしまいました。

さて、今回のテーマですが、「アイコンデザイン ―おまけ編―」です。
前回私が作成した記事、「アイコンデザイン ―基礎編―」の“おまけ”になっています。そのままです!
アイコンについての考え方など、少しだけ踏み込んだ内容をまとめてみました。

アイコンについて意見が割れてしまった時、そもそもどうして意見が割れてしまうのかな?と悩んでしまった時の1つの気付きにしてもらえると嬉しいです。
私の主観によるところも大きいので、そんな考えもあるのかぁ…と言う参考程度に読んでください。


アイコンの良し悪しは見た人による

アイコンとは、ユーザーや見た人の目的が達成できる、何を表しているのか意味が理解できる物が良いとされています。
確かにそうなのですが、これは見る人それぞれの経験、価値観で差異が生じるものでもあります。

以下では、経験と価値観について事例なども交えながら考えてみたいと思います。


アイコンと経験

経験の例で言うと、「ハンバーガーアイコン」です。
多くのスマホサービスで導入されていて、そのほとんどの場合でタップするとメニューや設定などが一覧で表示されます。
スマホを使い慣れた人にとっては馴染みのあるアイコンですね。アプリを使用していて「あれ?あの機能はどこかな…」と迷ったら、とりあえずハンバーガーアイコンの中を探してみると言う人も多いのではないでしょうか。

一見わかりやすいように思えます。ですが、これはアイコンの形自体が特別に優れている訳ではなく、見る人それぞれの経験に基づいているに過ぎません。
ハンバーガーアイコンは広く普及している為、スマホを触っていれば見る機会は多いです。その為、スマホを積極的に使う人には「ハンバーガーアイコンをタップするとメニューが出てくる」と言う経験がインプットされています。
ですが、初めてこのアイコンを見た時、何を意味しているかすぐにわかった方は少ないのではないでしょうか。経験を重ねることで学習し、今では当たり前の事として捉えられるようになったのです。

スマホに慣れていない人だとハンバーガーアイコンを目にする機会が少ないか、そもそも意識すらしたことがない状態になってしまいます。
経験がない人にとってこの3本線は、それがメニューで、中にどんな機能が隠されているか想像できません。
その為、何か迷いが発生した時の目印が1つもないような状態になってしまうので、咄嗟にどうしたらいいかわからず誰かに訊くか、結局諦めてしまう…なんてことが発生します。

ハンバーガーアイコンに関しては様々な議論が成され、広く普及しているにも関わらず、分かりづらいアイコンだとまで言われている事例もあります。
分かりづらいとされる要因としては、「何の情報があるか想像できない」「優先度の高い情報と低い情報が詰め込まれてゴチャゴチャしている」などがあります。

こんな時は、テキストラベルをつけると問題が緩和されます。アイコンの下に「メニュー」と入れてあげるだけで、3本線だけでは想像できなかった部分を補うことが出来ます。
アイコンの意味を全く知らない人が見ても、メニューと書いてあれば何か情報がまとまっているかも?と言う気づきにしてあげることが出来ます。

余談ですが、私の祖父が最近ガラケーからスマホに買い換えました。経験が一切蓄積されていない状態ですので、もちろんハンバーガーアイコンの意味はまったくわからず…。
設定やヘルプを開きたい時は3本線(ハンバーガーアイコン)をタップすれば良いんだよ、と言うような説明を何回もしました。アイコンの形だけだと機能を想像しづらい為、なかなか覚えられないようでした。
ですが、カメラアイコンはすぐに意味を理解して使いこなしていたので、これは形が明確で馴染のある形だからなんだろうなぁと改めて勉強になりました。


アイコンと価値観

価値観の例で言うと、「お気に入りアイコン」です。
「お気に入りアイコン」の形と言うと、どのような形を思い浮かべますか?星マークやハートマ―クを思い浮かべる人も多いかもしれません。
私が「お気に入りアイコン」に価値観の違いが顕著に表れていると感じたのは、Twitterがお気に入り機能の変更を行った際です。

Twitterには元々、星マークの「お気に入りアイコン」がありました。気に入ったつぶやきがあればお気に入り登録して、プロフィール画面でまとめて見ることが出来る機能です。
それが2015年の11月に、ハートマークの「いいねアイコン」に変更されました。見た目と名前が変わっただけで、機能はお気に入りアイコンだった時と変わりません。
Twitterとしては、より気軽にコミュニケーションツールとして利用してもらいたい狙いがありました。
ツイートしても何も反応が返ってこない事で、意味を見いだせずつまらなくてやめてしまう人が多かった為、利用者同士の交流をより活発にすることで、新規ユーザー獲得や継続率を改善したいと考えていました。

ですが、この変更によりTwitter利用者の意見が分かれました。「元に戻してほしい」「お気に入りといいねは意味が全然違う」など批判的な意見が多かったです。

何故批判的な意見が多かったのか考えてみると、制作者側と利用者の価値観の違いでした。
批判的な利用者の多くは、自分のツイートに反応が返ってくることにそもそも価値を見出していない、ただ呟ける場所が欲しい人。あるいはお気に入りはしたけどその相手とのコミュニケーションを望んでいないなど、そういった価値観を持っている人も多くいました。
その為、コミュニケーションを活性化させる為の「いいね」に対して、ひっそりお気に入りして楽しんでいた人からすると、「お気に入り」より強い意思表示になる、相手へのアピールになってしまうと感じ、嫌だと思う人が多かったのではないでしょうか。

このように、利用者を増やしたい製作者側としては複雑ですが、価値観によっては利用者の目的には沿わず、結局良いアイコンとは言えなくなってしまう場合もあります。
私も未だにお気に入りに戻してくれたらなぁと思う事があります。

コミュニケーションの活性化だけで見れば、「いいね」自体はよい機能なんですが…。
Twitterの場合、変更前と変更後で意味が変わってしまったので、より受け入れ難かったとも言えます。


おわりに

いかがでしたでしょうか?

アイコンの良し悪しは、その人の経験や価値観によって左右されてしまう場面もあります。
そのことを前提に置いて、その影響をなるべく受けないようなデザインを考える必要があります。
考えると言うのはまったく新しい表現を模索すると言う意味ではなく、多くの人に認知され理解してもらえる物を考えると言う事です。

繰り返しにはなりますが、「初めてこのアイコンを見たユーザーは、意味を理解してアクションを起こせるだろうか?」と言う問題提起を常に忘れないようにしましょう。

それではまた!デジマースのコンでした。

Pocket

検索について

Pocket

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

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

代表的な検索方法は?

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


1.キーワード検索

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

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

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


2.カテゴリー検索

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

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

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

 


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

Pocket

アイコンデザイン ―基礎編―

Pocket

こんにちは。デザイン業務に関わっております、デジマースのコンです。

みなさんのお住まいの地域は、雪は降りましたでしょうか?
私の地元は冬でもほとんど雪の降らない地域なので、雪と聞いただけでワクワクしてしまいました!

さて、今回のテーマですが、「アイコンデザイン ―基礎編―」についてです。
アイコンを使いたい!作りたい!でもどんなデザインが良いのかわからない…、意見が割れてしまって決まらない…。
そんな時のために、そもそも良いアイコンとは何か?を初心に返ってまとめてみました。

ここで言うアイコンとは、「アクションを直感的に伝える為の記号」を指します。
アプリやWEBサイトで、「物事を簡単な絵柄で記号化して表現(https://ja.wikipedia.org/wiki/アイコン)」した物です。

例えば、皆さんは下記の図のような状況で「○○を調べたいな…」と思った時どうしますか?

「虫眼鏡マーク」をタップする、と言う方が多いのではないでしょうか。
虫眼鏡マークは「調べる・検索」の意味を持つモチーフとして一般的ですので、直感的に「このアイコンを選択すれば調べられるな…」と想像できたかと思います。

このように、アイコンは出来る事や意味が記号として視覚的に表現されているので、ユーザーに直感的に何が出来るのか理解してもらう事が出来ます。


アイコンのメリットとデメリット

メリットは、記号として視覚的に表現されている事で、ユーザーに直感的に概要を理解してもらう事が出来ます。
また、機能の説明が多くなってしまったり文章が長くなってしまう場合に、アイコン化することで親近感のある見やすいデザインが出来ます。
これらによりUIの最適化に繋げることが出来ます。

デメリットは、ユーザーにとって親近感のないモチーフや認識しづらい形状だと、意味が伝わらず機能を理解してもらえません。
アイコンにしたことで余計にわかりづらいと言う、本末転倒な結果になってしまっては困りますね…。


良いアイコンとは?

アイコンは、「○○したい!」というユーザーの目的が達成出来るように誘導してあげなければなりません。
その為に気をつけたい事は、大きく分けて3つです。

1)親しみやすい形

多くの人に意味を理解してもらえる形にしましょう。
一般に広く普及しているアイコンなど、ユーザーにとって見慣れたアイコン・モチーフである程わかりやすいです。
デザインに情熱を注ぐあまり、またはクライアントからの要望で、凡庸から外れた独創的な物を求められるかもしれません。
ですが、そうして出来た物はアートの観点から見れば素晴らしいかもしれませんが、UIデザインとしては適切でないこともあります。
ユーザーはアートを見て感動したいのではなく、目的を達成する事を最優先に考えているはずです。

2)シンプルに

必要最小限に簡略化しましょう。
アイコンは小さく表示されるので、明確で何の形か認識しやすく、覚えやすい物がよいです。
装飾過多だと視認性が悪いだけでなく、画面全体のUIに悪影響を及ぼしてしまう事もあります。

3)テキストラベルをつける

サポートとしてテキストラベルをつけることも考慮しましょう。
全ての人がアイコンだけを見て、それぞれの意味を正確に理解することは難しいです。
もしユーザーがアイコンのみの表示で理解できなかった時、目的を達成するまで1つ1つ自分で確認してねとまかせてしまっては快適とは言えませんよね。
「わかりづらいな…」と使ってもらえなくなってしまいます。
テキストラベルをつけることで、ユーザーの想像する行程を省略し、統一された正確な意味を伝えることが出来ます。


おわりに

いかがでしたでしょうか?

今回はアイコンデザイン基礎編と言うことで、初心に返って考えてみました。
「初めてこのアイコンを見たユーザーは、意味を理解してアクションを起こせるだろうか?」と言う問題提起を常に忘れないようにしましょう。

それではまた!コンでした。

Pocket

マテリアルデザイン~実演編~

Pocket

こんにちはもしくはこんばんは!
デザイン業務に関わっております、デジマースのスガです!
2017年初アップとなります♪

先日鏡開きでしたが、おもちは頂きましたでしょうか?
私は年末より鏡餅をロックオンしておりましたのでしっかり食べました!

さてさて、今回は良く見るWEBサイトの表現をマテリアルデザインにしてみたらどうなるのかな?
という実験的なことを部分的にとりあげてみたいと思います。
言葉より実際に目に見えた方が分かりやすいので、画像中心におおくり致します。
※わたくし個人の主観が入っております。

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


①メニューを開く

よく見るメニューマークですね。タップすると何らかの形でメニューが開かれます。
左側の「従来」の形は見たことがある方が多いと思いますが、ページが切り替わるので、
一瞬メニューを開く流れが目の前からプツっと途切れたように見えます。遷移が遅かったら尚更です。

右側の「マテリアルデザイン」の方はタップしてからメニューが開くまでの流れが途切れずユーザーを誘導してくれています。
よくよく見るとメニューマークが切り取られ開かれたメニューに付属し、最後には戻る矢印に変換されています。
開いてから閉じるところまでさりげなくユーザーを誘導しています。

②ボタンタップ

一見、どちらのボタンもタップ時に色が変わっていますので、押したかどうかの判別はしやすいです。
あえてを言えば「マテリアルデザイン」の方はタップした際に指で触れた部分に変化が起きているため自分がどの部分に触れたか、よりリアルに体感できますね。

③ログインの遷移

手順としては、どちらも申し分はないですが①のメニューを開く同様「マテリアルデザイン」の方はタップしてからメニューが開くまでの流れが途切れずユーザーを誘導してくれています。
人は動いているものについつい目が向いてしまうものですが、モーションが入ることで自然とユーザーの行動を分かり易くサポートしてくれているのですね。

如何でしたでしょうか。
あくまでほんの一部ですが、見え方・捉え方に違いがあるのが分かると思います。
流れが切れずスムーズに遷移してくれるとモチベーションも上がりますよね。

一旦、今回にてマテリアルデザインについて最終回となります。
機会があればまた、同テーマについて書いていきたいと思います。

★★過去記事おさらいはこちら★★


マテリアルデザインを読む

マテリアルデザイン~アニメーション~を読む

マテリアルデザイン~アニメーションpart2~を読む

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

Pocket

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

Pocket

こんにちは。サービスデザインに関わっているデジマースのネモトです。
年末年始、どう過ごされましたか。

私は、某年末歌番組の勝敗の見せ方について考えさせられ、
何で最後の最後でサービス側の仕組みで有料視聴者を置き去りにするの!?と、
改善の必要性を強く感じながら新年を迎えちゃいました;

…という流れで今回は、
サービス側とユーザー側のUIリテラシー格差(UI理解力の格差?)について、
深い瞑想をしながら考えてみたのでお付き合いください。


高リテラシー故に陥る危険な考え

生まれて間もなくスマホに触る…ともいえる世の中になりましたが、
機能やUIのリテラシーを高めるには、それなりの年月と経験、趣向が必要です。
また、アクティブ中心層はスマホの普及とともに増加していると思われますが、
全体に目を向けると、一定の初心者層は、いつの時代でも生まれ存在している事実を忘れてはいけません。

そこで問題となるのが、高リテラシー層の専門用語/先進的機能の常用です。
クールで先進的な表現が一見目を引きますが、
多くのユーザーからして見れば「コワレモノに触るタッチ箇所探しゲーム」になってしまっているのが現実です。

リテラシー強者と弱者がターゲットユーザーに含まれる場合は、
弱者の利用を意識したUI設計が必要になりますが、
サービス側はその分野を知るが故に、一般的尺度にズレが生じがちなのです。

企画内容自体の問題もありますが、
先にふれた某年末歌番組の勝敗判定の仕組みについても、
番組側のゲスト審査員票を優遇する仕組みは、生放送故、十分な説明時間が取れなかったのか、
視聴者には伝わらず内輪だけの理解になっていましたし、
さらに問題があったのが、
多数である視聴者をなおざりにした為に、仕組みを理解したとしても納得出来なかったことです。

レベルアップを要求させない

あえてターゲットを絞った敷居の高いサービスなら問題ないのですが、
一般的なサービスであれば、「仕組み」「機能」を理解させる前提での要学習UIは避けるべきで、
本に例えるなら「実用書」よりも「雑誌」的な受け入れやすさが必要だと考えます。
サービスをわざわざ身構えて使用したいニーズは無いのではないでしょうか。

アイコン表現について紹介します。
「ハンバーガーアイコン」はメニューを表すものとして、業界では一般的ですが、
リテラシーの低い利用者にとっては認知できない表現でしょう。

数々の検証結果も見つけられるように、
アイコン記号だけではなく、文字によるラベル表現が伴った方が理解と実際の利用が多いようです。
全てをその様にする必要はありませんが、
単純な選択肢として、UIは、高いリテラシーと経験を必要としない表現からスタートするべきです。

受け売りではありますが、
必然的な考えとして、
「UI設計に関わる人間は新しい表現を認めない/追わない」ことで、
サービスの敷居を下げる必要があるのではないでしょうか。

ついつい新しいものを取り入れて先進的にサービスを設計したいものですが、
利用者にとっては、
求めたコンテンツを手に入れるのが結局の目的で、
そのための手段は、できるだけストレスのない、
空気のように慣れ親しんだ理解あるUIコンポーネントなのではないでしょうか。

色々な方向での考え方があるとおもいますが、
皆様はどうお考えでしょうか。

次回も引き続き、UI/UXとサービス設計を妄想してみますので、
是非お付き合いください。

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

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


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


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


8bitに学ぶUIデザイン


サービス運用中の注意点


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


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

Pocket