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/UX

2013/10/04に行われた勉強会「モバイルUI/UXのキホンを学ぶ」のスライドです。 第2回目のスライド⇒http://prezi.com/z3dockrqahw-/uxui/
by

Hiroyuki Tanaka

on 15 September 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of UI/UX

UIとUXの違い
UI
ユーザーインターフェイス
画面のレイアウトやテキスト、ボタンなどの外観のこと。
UX
ユーザーエクスペリエンス
利用者の体験のこと。
それぞれウェブやアプリに限らず適用される概念ですが、ここではウェブやアプリに限定します。
ちなみに
もともと、“ウェブアプリ”と“ネイティブアプリ”という言い方がありました。ブログもニュースも、最近のサイトはほとんどがプログラムされているため、これらを総称して“アプリ”とします。
なぜいまUXなのか
UXは昔からある概念
ビル・バクストン氏がトロント大学の助教授だったころに提唱した概念。1992年の論文にHuman Computer Interactionの記述があり、これが恐らく最初の論文。
Windows95
Windows95の発表当時、Microsoftにより“Windowsユーザーエクスペリエンス・ガイドライン”というガイドラインが策定された。このガイドラインの元になったのがビル・バクストン氏の提唱した理論。
市場の成熟
どんな分野でも市場が成熟するとUXで差別化するようになる。
たとえば
PDA → iPhone
たとえば
PlayStation2

Wii
たとえば
メガピクセルカメラ

トイカメラ
たとえば
ゲームボーイ

たまごっち
アプリ市場が成熟した
そのためUXが差別化のキーとして台頭。
iPhoneのヒット
フィーチャーフォン全盛の日本市場ではiPhoneはウケないと思われた。しかし予想外の大ヒットとなり、その要因としてUXが語られるようになった。急速に認知が広まった。
ちなみに
個人的にはUとXという字面のカッコよさもあり、バズワード化したとも思っています。
環境の変化
デジタルと人間の距離感が一気に縮まっている。“生”の操作感に近いデバイスが普及した上、接触時間が急伸している。
メディア接触時間の調査によると
2009年から2013年にかけて、2.8倍増加。2009年の18.1分から、2013年には50.6分へ。
UXハニカム
UXハニカムとは
情報アーキテクチャ/UXコンサルティング会社のSemantic Studiosの代表ピーター・モーヴィルが発案したUXの7大要素。有名。
理解できますか
7つもあると冗長的で、
ちょっと分かりにくいです。
共感のUX
これからのUX
きちんと“体験”をデザインできること。
ブランディングまで据えたUX。
気が利いて
頼りになる
なんかイイやつ
なにが違うのか?
“ユーザーが満足するアプリ”

“ユーザーが手放せないアプリ”

違います。
アプリに接する体験がユーザーとアプリを強く結びつける。
こいつはツボだ!というゲームにはまる感覚と同じ。
ブランドの遷移
ステータスとしてのブランドから、ライフスタイルとしてのブランドへと遷移している。体験を与えられるブランド。
ものを選ぶ基準
需要が飽和するようになると、ものを選ぶ基準がライフスタイルによって大きく変わってくる。人によっては、不要なものというジャッジをすることもある。
使いやすくて、便利な機能があり、コンテンツも良質。
そういうものが
あたりまえになる。

大事なのは、
そのアプリのもつ世界観

デザインフロー
UX
ユーザーの求める情報の洗い出し
コアターゲットの知り得たいものをリストアップする。
既存のアプリの場合
現状の仕様で提供できる情報、提供されている情報をリストアップする。
アプリの定義
アプリを短い言葉で表す。プロジェクト全体で共有されるべき、アプリの骨子。
コアターゲット
使用方法
中心的な機能
ナラティブ
遷移設計
リストアップした機能とアプリの定義に従って、ファーストビューから各機能までの道のりを設計する。
機能のグルーピング
各機能の属性ごとにグループ分けする。
グループの重み付け
アプリの定義と照らし合わせながら、グループ分けしたものに優先順位を付ける。
よくあるグルーピング
記事一覧
カテゴリ一覧
ニュースアプリ
記事本文
SNSシェア
お気に入り
ログアウト
コメント投稿
コメント閲覧
レコメンド
ナビゲーション
カテゴリ一覧
レコメンド
コンテンツ
記事一覧
記事本文
コメント投稿
コメント閲覧
パーソナル
SNSシェア
ログアウト
お気に入り
ログイン
ログイン
個人設定
個人設定
いま...
UXを語るようになるくらいには、市場が成熟している。
目的
ワイヤーフレーム
グルーピングした機能とアプリの定義に従って、各画面のワイヤーフレームを設計する。
優先順位の高い機能/情報ほど注目を集めやすいレイアウトであること。
気をつけたいこと
これからの
レイアウトで大切なこと
シンプル
最小限の要素で、必要な情報を適切に提示する。
クリーン
清潔感があること。色、文字、余白が整っていて情報が見やすいこと。
パワフル
見ただけでその魅力が伝わる大胆さ。すぐ理解できるだけでなく、早く使いたいと思うこと。
テキスト
説明や通知に使われる、コンテンツ以外のテキストを設計する。
テキストはとても重要。アプリケーションとユーザーが意思疎通するための道具。
共感を与えるテキスト
UI
いうまでもなく
UIは、事前のステップで設計された画面を実際にデザイン、作成すること。
気をつけたいこと
UIを“クリーン”にする一般的な方法
タップ領域
タップできるサイズは最小でも88px(実質44px)用意します。Appleが定めた最小サイズです。
要素の間隔
タップ可能な項目は近づけ過ぎないようにします。誤操作の防止です。
フォントサイズ
フォントサイズのルールを作ります。フォントサイズはユーザーも重要度の尺度として意識するので、これも3種類くらいに収めると学習コストが下がります。
領域全部が反応
テキストがボタン上にある場合、ボタン領域がすべて反応するようにします。
文字間隔
日本語は字が詰まって見えるので、ほんの少し間隔を空けるようなスタイリングをしてあげると可読性がぐっと上がります。
カードUIは全面反応
カードを模したUIの場合、文字や写真ではなく全体がタップできるようにします。
UXが優れている
アプリケーション

フラットデザイン
フラットの建前
スキューモフィズムの多用によって、デザインが使い方を示唆してきたが、もう十分に使い方を周知できた。スキューモフィズムの役割が終わった。
デザイナの本音
レスポンシブが求められている中でフラットはデザインしやすい。ミニマリズムデザインは誰でも憧れる。スキューモフィズムの反動。
スキューモフィズムのもどかしさ
画面の中はデジタルなのに、本物に真似てデザインするということは、デジタルならではの操作感を提案できていない。デザインが負けた気分。リアルのモックをデザインしているにすぎないというもどかしさ。
フラットなら?
スキューモフィズムのもどかしさを軽減してくれる。デザインが勝った気がして気持ちがイイ。
当然ながら
デザインの負荷が高いので、UXのスキルを求められます。
インフォメーションアーキテクチャ
正確には、UXではなく、IA(インフォメーションアーキテクチャ)のスキルが求められます。
iOSが採用したことで、デザイナが自信をもってフラットをデザインできるようになった。
建築との比較
歴史主義建築
モダニズム建築
歴史様式を引用した装飾。
装飾の排除。
機能性、合理性の重視。
空間の概念。
Appleがアプリケーション定義ステートメント」と呼んでいますが、長いので「アプリケーションステートメント」でもいいと思います。
ナラティブ?
ユーザーが能動的に感じ取るストーリー。映画的なストーリーではなく、体験から得られるもの。気分や感情の変化ともいえる。
ユーザーが自発的に次の行動を決定し、
その行動によりユーザーが成長を感じたり他者とのつながりを感じること。
余白は統一
マージン、パディングのルールを作ります。パターンは3種類くらいまでにして、明快なルールにします。
関連記事⇒「こんな記事もあります。」
Error⇒「うわっ!何かエラーが起きました。もう一度試してみてください。」
ログインしました⇒「おかえりなさい、◯◯さん!」
自分の連絡先
読み取り履歴
連絡先交換アプリ
アドレス帳
QR読み取り
モード
パーソナル
イベント一覧
イベント作成
イベント予約アプリ
イベント詳細
SNSシェア
出欠登録
ログアウト
イベント編集
支払い
イベント削除
ナビゲーション
コンテンツ
パーソナル
ログアウト
ログイン
ログイン
個人設定
個人設定
イベント一覧
イベント検索
イベント検索
イベント詳細
ユーザーコンテンツ
出欠登録
イベント作成
イベント編集
イベント削除
QR表示
自分の連絡先
読み取り履歴
QR表示
QR読み取り
アドレス帳
会員登録
会員登録
会員登録
会員登録
入力は最小限に
文字入力などを必要とする場合、入力項目は最小に収めます。1つがベストですが、多くても3つが限度だと思います。必須ではない項目は後から入れてもらうなど、工夫します。
オプションは3つまで
ある情報に対して付随する情報を表示したい場合、付随する情報は、種類・数量とも3つくらいに絞ります。
ボタン
ここだけじゃなくて
ここまで
Google
明快な検索窓
URL非表示
検索結果にすぐ戻る
IAがバツグン
GoogleMaps
明快な検索窓
屋外でも雑に扱える大きな要
頼りになる
Flipboard
情報を一気見せしない
優雅な気分
Readability
適切な選択肢
大きくて使いやすい要素
しゃれた古本屋みたいな雰囲気
hidden!
Evernote
一覧性重視からクイックネス重視へ
ノートをさくっと登録
タイトルの入力はおまけ
ライフスタイルに共感
UX=体験
UXは使いやすさではなく体験。使いやすさはその一端。
使いやすさはコモディティ化しても、体験はコモディティ化しない。
IA?
インフォメーションアーキテクチャという概念があります。いま巷で語られるUXの話は、IAのことだったりします。混乱のもとなので先にこれも説明します。
インフォメーションアーキテクチャ
データを人に伝えるための表現技術。情報過多が語られるようになった頃から出てきた概念。人間が、適切な情報を適切に理解し、適切に利用するためのデザインともいえる。認知心理学などの範疇。
IAは分かりやすさ。
体験じゃない。
UXをデザインし、
IAで伝える。
UX(体験)
IA(利用)
UI(外観)
こういう流れ
とはいえ、UXとIAを混ぜて語られる今日このごろ。
言葉の定義に頑固になるよりも、輪に入ってナレッジの共有をしたほうがお互い有益。
日本人であること
日本人は狭い家、狭い国土で暮らしているので、狭い領域に情報を詰め込みがちです。この意識をもっておくといいと思います。
大事なこと
UXは体験
アプリを使っているときに、どんな体験が得られるのか?のデザイン。
よい体験
強制された体験ほどつまらないものはない。体験はあくまでも自発的に。
パワー
シンプル、クリーン、パワフルに。パワーがないと伝わらない。
KISSの原則
Keep it simple, stupid(シンプルにしておけ!この間抜け)の略語。

機能もデザインもKISSで。
田中宏幸
Hiroyuki Tanaka

いつもFacebookにいます
hiroyuki.aggre
レイ・フロンティア株式会社
デザインからサーバ/クライアントサイドの実装までやってます。
デザイン≠アート
UXのデザインもUIのデザインも、アートではなくエンジニアリング。
課題解決のための手法。
Full transcript