Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

シニアに向けたUIについて

熟年層のユーザビリティについて考える。。
by

makoto ogiwara

on 28 January 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of シニアに向けたUIについて

E P I S O D E
C r e a t e Y o u r O w n
May the Force be with you.
1つの画面に機能を
詰め込みすぎない
ブラウザにてリンクを新しいウィンドゥで開くのはNG
ヨーダ
固定観念を捨てろ!
ブラウザのオートコンプリート機能が事態をややこしくさせる
ブラウザの戻るボタン以外の戻り方を知りません!
半角と全角、大文字と小文字を勘違いする。
IDやニックネームが思いつかない
「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃう
パスワードに英数混在や5文字以上を強制すると問い合わせ激増
数字4桁パスワードしか覚えられない??
チェックボックスで選んだ○○を「削除」ボタンでまとめて消す、というUIは理解されない
チェックボックスで項目選び、
別のボタンで操作を決定するUIはわかりにくい
アイコンは理解されない 使う場合は添え書きを
■で停止、▲で再生なんてことすら理解されないことも。家マークを押したらホームに戻る、なんてのは本当に
まったくと言っていいほど理解されない。
余白の取り方がアルファベット圏と日本語とでは違う
平仮名、カタカナ、漢字、アルファベット、数字、記号と実にカオスな言語。
そのためタイポグラフィという見栄えの観点からすれば、どうしても
ゴチャゴチャした印象になりがち。結果として英文よりも行間を少しだけ
広く取らないと可読性が損なわれてしまう。
リアリティあるデザインから
ピクトグラムへ変わり考えることが必要
ミニマル(単純)化したアイコンは、そういった補足情報の多くが削ぎ落とされているため、
より少ない情報だけでそれが何であるのか識別しなくてはならない。
もちろん識別不可能ではないし、充分に識別が可能ではあっても、
少なからず脳への負担は高まり、それはストレスとなる。。
ボタンは大きめに・立体感を出す
アイコンだけではなく
テキストを併用する
アコーディオンメニューや、フリックバナーなどはサイトにアクセスしたタイミングでは画面に表示されないものはコンテンツに気づいてもらえない可能性がる。

隠されたメニュー
にはヒントを
なんやかんや言っても、フラットデザインでデザインされたボタンは、ボタンなのかそれとも単純に背景が塗りつぶされたテキストエリアなのかが分かり辛い。
若者であれば、フラットなデザインのボタンに慣れているのでとりあえずタップしてみようと行動してみるが、慣れていない人はタップするという発想すら生まれない! 
フォントサイズは大きめ・
テキストリンクには下線を
E P I S O D E IV
E P I S O D E V
シニア層のインターネット利用状況
E P I S O D E VI
フラットデザインは理解されていない
E P I S O D E I
May 1999
E P I S O D E II
デザインの向こう側
E P I S O D E III
改めて熟年層向けのUIを考えてみる
E P I S O D E VII
おまけ:らくらくスマートフォンのUI
1)テキストはフォントサイズを大きく、テキストリンクには下線を

2)フラットデザインは避ける

3)アイコンだけではなくテキストでもメニューを表示する
 (アイコンだけでは意味が理解できない)

4)ボタンとボタンの間には十分な間隔を取り、誤動作(誤遷移)が発生するのを極力避けるようにする。

5)フリックバナーやアコーディオンメニューなど、初期状態でメニューが隠れてしまうUIは多用しない。  利用する場合は、操作方法を促せるようなデザインにしたりテキストを添える。

6)1つの画面に機能を詰め込みすぎない、単純・シンプルに
見出し、本文、ラベル、ボタン、
テキストインプットなどの区別がつきづらい
UI の大半がタイポグラフィのみで構成されているということは、それだけ各要素の差別化に制限が生まれる。

例えば見出し、本文、そしてボタン。
基本的に全てがただの文字列に
なりがち。文字サイズ以外の
違いが無いため、パッと見は
すべて一つの段落であるかの
ような錯覚に陥ったりして、
どこからどこまでがひとつの
セクションなのか判断に困ってしまう。
© &TM Lucasfilm Ltd.
熟年層はログインでつまづく
アプリに慣れ親しんでいない人からしたらメニューアイコンが何を意味しているのかがわからない場合が多い。
なので、アイコンだけを表示するのではなく、そのアイコンが何を意味するのかをテキストでも説明する必要がある。
他のデザイントレンドと同じく、バランスよく適度に。流行を追うために、ユーザビリティを犠牲にするようなデザイン上の判断はしてはならない。忘れてはならないのは、デザイナーはそのデザインのユーザーではない、ということだ。デザイナーの好みや、クリックの可能性を示すシグニファイアを読み取る能力はユーザーとは違う。というのも、自分自身のデザインにある各要素の意図をあなたは「知っている」からである。
Gogleの提唱する
マテリアルデザインのこと!
フラット2.0って?
おおむねフラットではあるが、わずかな影とハイライト、レイヤーを利用して、UIに多少の奥行きを作り出そうと
するデザインスタイルのことである。
フラットの覚醒
年代別人口の割合
年代別インターネット普及率
ログイン時に、パスワードを全て全角で入力してしまったり、パスワードを再発行した際の新しいパスワードに大文字が入っているのに、全て小文字で打ち込んだり、など。このあたりも無限ループに簡単に入り込める。
ログインする際に、
「.(ドット)」と「,(コンマ)」を打ち間違える。
デスクトップの黄色の時計のアイコン、もしくは手紙マークのアイコンをクリックする」と覚えているから
自分のメールアドレスを知らない。
熟年層に向けたUI設計
年末年始、四国の片隅で...
w i t h t h i s t e m p l a t e
D e s i g n e d b y T o m o h i r o Y O S H I F U J I
年代別に見る利用しているICT(情報通信技術)サービス
平成27年度情報通信白書
年代別
スマホ
利用率
長い影のついたフラットなデザイン要素というのはフラットデザイン2.0が間違った方向に行ってしまった例の1つだ。というのも、そうした3D効果は見た目のためだけのものであり、ユーザーにとって意味のある情報を何も追加してないからである。
Android向けのEvernoteアプリはフラットデザイン2.0の利点を示す良い例である。ほぼフラットなUIであるにもかかわらず、このアプリでは、ナビゲーションバーやフローティング表示になっているプラスボタン(「新しいメモを追加する」)に多少の影がつけられている。また、カードというメタファーを利用して、コンテンツを3D空間にあるレイヤー可能なフラットな面として表示している。
まとめ:熟年層をターゲットにしたWebサイトのUIで気をつけること
Full transcript