UI Design and UX for Engineer

Powered by

26/3/2014 @Lightningspot Shibuya / Kazuki Yamashita Designed by IMPATH

山下 一樹

インフォメーションアーキテクト

アプリ開発 　Web、スマフォアプリの設計/開発 　プロトタイプ設計 　UI改善コンサルティング Webサイト制作 　Webサイトの企画、UXデザイン

UI Design and UX for Engineer

UX

UI/UX?　UIとUXの関連は？

“ユーザーとサービス、商品の 　相互作用すべてで、　混乱や面倒なしで顧客の的確 　なニーズを満たし、所有する　楽しさ、使用する楽しさを　生み出す「簡潔さと優雅さ」”

http://www.nngroup.com/about-user-experience-definition/

Donald Norman

UX“User Experience”とは？

ISO 13407（1999）人間中心設計が定義 ISO 9241-210（2010）UXについても定義

UX“User Experience”とは？

製品やシステム、サービスの利用、及び／もしくは 予想された使い方によってもたらされる人々の知覚と反応

暑い日、のどが渇いた人が自販機で水を買う。

!その買い方がよく分からなかったり、

いくらの値段で販売しているのか分かりにくく、

なかなか水が買えずイライラした。

!暑い日なのに、せっかく買えた水がぬるい、

もう二度とこの自販機で買おうとは思わない。

UIUI

UX UX

UX

モノ

コト

ユーザー

多くのモノを作れば売れた 良いモノを作ればもっと売れた

モノからコトへ

モノがあふれている時代 デザインや機能だけでは売れない

モノ→コト

大量 生産

スペック

デザイン

趣味

食事旅行

外食

貯金 書籍 家電

車

何にお金をかけていますか？

2010年4月 経産省 消費者購買動向調査

自身の「経験や体験」

体験とは？

期待 予感

もらう 出会う

触れる 使う記憶 思い出

触れる前から思い出までのストーリー

時間の流れ

視覚、聴覚、触覚、味覚、嗅覚

五感もUXをもたらす

UX（体験）をデザインするとは？

時間の流れ

顧客の思考・感情

顧客接点

サービス要素

人間工学

ユーザビリティ工学

工業デザイン

インタラクションデザイン

UXデザイン

マーケティング

情報アーキテクチャ

コンピューター工学ライティング

コミュニケーション デザイン

http://www.designingforinteraction.com/

音響デザイン

モーションデザイン

UIデザイン

UXデザインのフローとアウトプット（アプリの場合）

ユーザー・環境の理解

ユーザー調査

コンテキスト

ペルソナ定義

ユーザーのゴールと機能

メンタルモデル

エクスペリエンスマップ

UIのイメージ化

画面遷移

UI ワイヤーフレーム

プロトタイピング機能要件

UIが良いとUXが向上？良いUIがUXをもたらすとは限らない

良いUXとは？

役に立つ

使いやすい

見つけやすい

価値がある

信頼できる

魅力的

誰でも見れる

http://semanticstudios.com/publications/semantics/000029.php

良いUXとは？

Web以前のデザインから重視されている

Webによって 重視されるようになった

これまでのデザイン手法だけ では実現不可能

役に立つ

使いやすい

見つけやすい

価値がある

信頼できる

魅力的

誰でも見れる

ユーザーはモノより経験に関心がある。

!

クリエイターはストーリーと世界観をつくり、

良い始まりと結末によって

ユーザーの記憶に残す使命がある。

!

機能以上に価値のあるコトをつくる。

UI Design and UX for Engineer

UI Design

Design＝設計とは？

http://www.jjg.net/elements/pdf/elements.pdf

ビジュアル

構造化

表現方法

近接 整列 コントラスト 反復

レイアウトの原則 デザインの概念

デザインパターン アフォーダンス メタファ

構造化の手法論理的に解決する

近接

情報の関連性を視覚化する（見やすくする）

効果：ユーザーの理解を助ける

手法：導線を考慮しスペースを調整する

商品A

商品B

商品C

¥2,000

¥1,500

¥3,000

購入

購入

購入

商品A¥2,000 購入

商品B¥1,500 購入

商品C¥3,000 購入

整列

要素を組織的に構造化する（見やすくする）

効果：統一感を持たせる

手法：基準となる線を引いて配置する

左揃え左揃えは複数行にわたる長い文章を読みやすくします。 主に見出しでは左揃えが用いられます。

中央寄せ中央に寄せることで、要素の近接関係を強める

右揃え 続きはここをクリック

ボタンなど、ユーザーに「次の」操作を促す場合は右に 揃える場合があります。

コントラスト

異なる要素の差異を強める（注意をひく）

効果：ユーザーを意図して誘導できる

手法：濃淡やサイズなどを調整する

商品A¥2,000 購入

商品B¥1,500 購入

商品C¥3,000 購入

商品A¥2,000 購入

商品B¥1,500 購入

商品C¥3,000 購入

反復

レイアウトの原則を繰り返すこと

効果：一貫性を持たせ、文化を生む

手法：原則をガイドラインとして表出する

近接 整列 コントラスト 反復 タイポグラフィ

レイアウトの原則 デザインの概念

デザインパターン アフォーダンス メタファ

構造化の手法論理的に解決する

デザインパターン

既存のパターンを逸脱しない

－追加 ？ 削除

テキストで見かけるアンカーリンクです。

多くの人はこちらのリンクをクリックします。

×＋

アフォーダンス

ユーザーが次に何をすれば良いのか明示する

メタファ

ユーザーが馴染んでいるものを継承する

Apple Inc. iOS 7 Human Interface

ビジュアルデザインは構造化の後で行う。

!

ユーザーの理解を助け、正しく、意図した通りに

導くためのインタフェースを「設計」する。

!

各々のガイドラインに忠実であること。

UI Design and UX for Engineer

for Engineer

①クライアントの真の声を聴く

クライアント 「商品名が見にくいので少し目立つようにしてください」

ユーザーは写真が見たいのかもしれない 仕様が知りたいのかもしれない 配送料が知りたいのかもしれない

クライアント→ユーザーの真のニーズ

②UIは慣れると間違いに気付かなくなるビジュアルよりも配置や構成、構造化

アプリケーション定義ステートメント アプリケーションの主要な目的とその対象を、 簡潔かつ具体的に宣言したもの

https://developer.apple.com/jp/devcenter/ios/library/documentation/MobileHIG.pdf

③機能やコンセプトが一言で言えるかどうか

1. ユーザに好まれる可能性のあるすべての機能の洗い出し 　ex. ○○○を○○○できる

2. 対象ユーザの決定 　→ユーザーのライフスタイル

3. 対象ユーザの定義による機能の絞り込み

4. このアプリではしないこと

④ユーザーのコンテキストをいかに描けるか

運賃表：駅名と料金お金を入れて下さい

切符？カード？

路線を選択

ここで選択

ユーザーの行動を想像してシステムに落とし込む

⑤すべてのユーザーを幸せにするUIはない対象を広げず真のユーザーにまっすぐであること

UI Design and UX for Engineer

User