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

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

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

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

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


①メニューを開く

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

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

②ボタンタップ

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

③ログインの遷移

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

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

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

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


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

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

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

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

Pocket

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

Pocket

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

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

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

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

Pocket