UX/UIデザインカンパニーのオハコがデザインについて発信していくメディア

Powered byOHAKO Inc.

2014.09.30

UI DESIGN

心地よいUIデザインをする際に考えるべき7つのポイント

多くの人が毎日3時間以上オンラインサービスを利用しています。1,000,000,000,000以上のWebページと数百万件のアプリがリリースされ、それらがユーザーの時間を奪い合っている。

ユーザーに使ってもらうためには有用性だけでは足りなくなってきている。

では何が必要か?その答えは心地よさではなかろうか。

今日は、心地よいデザインをするための原則を、UIUXの観点から書いていこうと思う。

1.どのような体験をしてほしいか、をベースにデザインする

人は、正確な情報よりも、そのときの気持ちを記憶している。

モノからコトに価値基準が変化した現在において、それは顕著である。

Geoffrey Jamesの言葉を借りれば、「情報が重要なのではなく、情報が与える感情的な影響が重要なのである」

ユーザー体験を考える手順

1. ユーザーが何を達成するかを考える

2. それを実現してあげるためには、何が必要かを考える

3. 必要な情報・動作を、どのように実行してもらうのが心地よいかを考える

この手順で「どのように実行するか」まで落とし込んでからデザインをする必要がある。

2.人はWebサイトを読むのではなく、流し読みしていく

スマートフォンが台頭してきて、より顕著になったのが流し読み。インフォグラフィックが流行していることなどからも分かるだろう。

構造化

文章であれば、h2タグの中で一つの主張を唱え、h3タグを使い主張を支える副主張を書き出していくだろう。

文章におけるh2,h3のように伝えたいことのサイズを考え、同じサイズのものが一目で分かるようになっている必要がある。

流れ(制約)を作る

ユーザーにとって使いやすいこと≠制約がないこと、である。

本当に使いやすいプロダクトとは、制約によってユーザーを目標となる行動に導くことができているものである。

1.で作ったユーザー体験を基に、どの動作をしやすくしそれ以外に目が行かないようにすることが重要である。

3.シンプルさと明確性

あなたは、足の踏み場のないほどに散らかった部屋に入りたいと思うだろうか?

Webやアプリの業界では、散らかった部屋のようなプロダクトがリリースされていることが間々ある。

その一方で、机もいすも何もない部屋は居心地がいいだろうか?

シンプルにすればいいと、要素を極限まで減らすことは家の中の家具を全て捨てることを片づけだと主張することに等しい。

明確性→シンプル

上記のような状態にならないために、気をつけるべきことが1点だけある。

「伝えたいことを明確にしてから、それ以外を取り除き、シンプルにしていく」

順番は、明確性→シンプル、なのである。

伝えたいことのないシンプルさは、ただ何もないだけだ。

4.革新的なデザインは一部だけでいい

全部が革新的なのは、本当に革新的なのだろうか?

デザインは表現と手段

何をするためのものなのかを表現し、実際に行動するための手段となる。それがデザインである。

つまり優れた(機能美的に)デザインとは「何をするためのものかを明示し、使いやすいもの」である。

手段に革新性を持ち込む

ユーザーにとって「この体験が便利だ」といえる部分にのみ革新的なデザインを持ち込むことが大事である。

既存のユーザーの行動を大幅に変更する部分においては創造性を発揮させ、メインストリームとは全く違ったデザインになってもかまわない。

表現に革新性を持ち込むことも可能であるが、ユーザー体験の向上と関係がないのに見た目だけを革新的にする意味はない

5.ファーストビューは、ユーザーの気を引くことだけに注力する

ユーザーは第一印象でそれが面白そうかどうかを決めている。そこではじかれてしまった場合、その後は見向きもされなくなってしまう。

ファーストビューだけで完璧な判断はできない

ファーストビューだけでそのサイトがどうなのか、そこでできる体験はすばらしいのか、ということを判断することは不可能である。

あなたの提供する体験がいいものであるとするならば、実際に体験してもらうことが、良いUXの第一歩である。

そのためには、最初の1秒でユーザーの心を掴まないといけない

多くをつめすぎない

また、ユーザーが最初に目にする情報量には、デバイスごとの差がある

そのため、多くの情報をつめた場合、その意図が正しく伝わらない可能性もあるのだ。

業界の定番と逆張りしてみる

業界によってファーストビューは様々であるが、それらが似ている場合、ユーザーは飽きてしまっていると考えられる。

そんなときは、あえて業界標準とは違ったデザインでユーザーの気を引いてみるのも1つの手であるといえる。

6.スクロールデザインを使う

Z型からI型へ

PC→スマホへの変化は、画面の縦横比を変化させた。縦長になったのだ。

スクロールではなく別ページへ移動するデザインの場合、横の移動を連想させる(現在のアプリなどを見ても、タブ切り替えは横向き移動)

テーマが変わる場合には有効であるが、一続きの内容を記載したい場合には縦に続いているほうが直感的に理解できる。

通信スピード

LTEになり、かなりスピードは上がったといえる。それでも「ホームPCと比較すると遅い」という声は多い。

ページ遷移をするということは読み込み回数が増えることであり、ユーザーは細かいラグタイムを待つことになる。

通信環境の変化が著しいスマホユーザーは、(無意識的にではあるが)読み込み回数を減らしたいのである。

7.デバイスごとに見易さの定義が違う

レスポンシブデザイン

マルチデバイスに対応するなら、デバイスごとに表示が変更される必要がある。スマホユーザーにPCサイトを見させてはいけないのだ。

レスポンシブにする方法はいくつかあるが(ブラウザ幅、UserAgent等)どれが正しいとは一概に言えない

手法にフォーカスするのは間違いであり、他にフォーカスするべき点が存在する。

誰に何を伝えるか

デバイスごとにユーザーを切り分けるかを判断する必要があり、そしてほぼ確実に切り分けるべきである。

その上で、スマホユーザーとPCユーザー(とタブレットユーザー)それぞれに何を伝えるかを決める

飲食店のサイトを考えてみると、PC向けには料理の情報をリッチメディアを用いて伝え、スマホに対しては地図情報と今だけのお得情報を伝えるのがいいかもしれない。

ユーザーがどんな状態で見ているのか何を求めているのか

この2点を基に情報のプライオリティを考え、それぞれの見せ方を検討してレスポンシブデザインの実装方法を考える。

こちらの方が無駄な作業が少なく、効果の上がるプロダクトを作成できそうではなかろうか。

終わりに

人ファースト

ユーザーファーストという言葉が聴かれるようになって久しいが、突き詰めるべきは”“である。

そのユーザーがどんな状況でどんな目的を持っているか。それに対して、どんな体験を提供するのか。

それらを考え抜いてはじめて良質なUIデザインが作り出せる。

ユーザーが「無意識に」再び使ってしまうようなデザインを実装したいものである。

 

※実際に作成する際の、UIデザインチェックリストはこちら

サイト掲載・UI/UXのご相談に関して

UI/UX JAPANではアプリデベロッパーさんのアプリのレビュー・インタビューを企画および、UI/UXに関する悩み相談・改善提案を行っています。

「インタビューを受けてみたい!」や「改善提案をお願いしたい」など、興味のある方は下記お問い合わせより”お気軽に”ご相談ください!

EDITOR'S PROFILE

admin_ohako

菊地 涼太

代表取締役CEO & UI Designer

  • Facebook
  • Twitter

神奈川県生まれ、神奈川県育ち。慶應義塾大学時代より大手企業内でWebデザインの仕事に携わり、フリーランスとして新規事業立案〜UX設計・UIデザインまでを主な担当分野としているうちに、デザイン領域全体に可能性を感じて株式会社オハコを設立。

RELATED POSTS
top

2016.11.11

来客受付アプリから見る、UXをしっかり伝達するためのUIデザインの考え…

はじめまして! 株式会社オハコのアシスタントUIデザイナーの吉川、サーバサイドエンジニアの有馬です。 11月を迎え、本格的に寒い季節になってきましたね。 少し前のことです...

UI DESIGN

wearabledevice

2015.04.10

AppleWatchでどう変わる?ウェアラブルデバイスUXテ…

いよいよ本日、AppleWatchの予約が日本時間16時01分より開始されました。 これまで様々な企業が研究開発を行ってきたウェアラブルデバイスの分野に、ついにAppleが参...

UI DESIGN

dashboard

2015.03.04

ダッシュボードのUI/UXを考える際に重要な3つの視点

「The laws of shitty dashboards(ひどいダッシュボードの法則)」を読んで 成功例を目にすることは多いが、実際にはトライアンドエラーをした軌跡を追う事の...

UI DESIGN

uidesign

2014.10.28

UX思考を学ぶ。UIデザインパターン全28選

はじめに-UIデザインパターンの使い方- なぜUIデザインパターンを確認するのか、しっかり目的意識を持って確認作業を行っているだろうか。 以下にあげるUIデザインパターンを...

UI DESIGN

mobileuipatterns

2014.10.10

用途・デバイス別!スマホサイト、アプリのUIデザインパターン17選

弊社でも参考にしているUIパターンサイトを使いやすいようにデバイス別・用途別に分類してみました。 UIデザインで詰まってしまった際や、修正を指示したいんだけど参考になるデザイ...

UI DESIGN

iphone6_app

2014.09.25

iPhone6、搭載アプリのUIと使い方まとめ

iPhone6,6 Plusの累計売上が1,000万を突破したことはみなさんもご存知だと思う。 今後も引き続き、アプリ開発で国内・海外どちらに主軸をおいた場合でもiPhone...

UI DESIGN