検索について

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

知らないと会話がストップ!?
コントロール系部品の名前(2)

Pocket

新年最初の更新を担当いたします。デジマースの原です。
明けましておめでとうございます。
2017年もデジマースブログをよろしくお願い致します!

それでは昨年のUIに関する話題を振り返ってみたいと思いま………いえ、その前にまだ紹介していない内容がありました。それは…「地味ですが基本となるコントロール系部品(2)」の紹介です!
早速ですが第2段の紹介を始めていきたいと思います。

今回は「ステッパー」「ページコントロール」「テキストフィールド」「スイッチ」「チェックボックス」「ラジオボタン」についてご紹介いたしました。
各コンポーネントは、使用する場所を誤れば意味のないものとなってしまいます。そのため、名前だけではなく使用場面を合わせて知っておく事も大切です。
前回紹介したコンポーネントと、今回紹介したものを合わせて覚えれば、UIに関する打ち合わせで以前より会話がスムーズに進行すると思います。
それでは、みなさま本年もよろしくお願い致します。

Pocket