@Roy_S_Kim
スマートフォン / タブレットPCのソリューション開発&コンサル
UXコンサル
企業システム構築コンサル
UI/UXデザインの概要
UIデザインの基礎
UXデザイン方法論
ベストプラクティス
「ITエンジニアに易しい」
エンジニアの視点でUX UIを勉強する
学問としての深掘はしない
画像とWebサイトの見た目の差
キャプチャー と サイトの画像の差
Macの感想
GUIはきれい
WebObjectsはすごいけど、Javaで代用できる
Oracle使えないなどの理由でwindowsに戻る
Parallelsの登場で、ほぼMac
Q.
- 高いのになぜMacを使うのか
- Appleの製品の良さを伝えるためにはどうしたらよいのか
A. 使っていて気持ちいいから
やってることは同じでも、見た目の差で使い易さが変わってくる
→ファンを獲得するためには、良いデザインが必要である。
デザインとは？
wikipedia(デザイン)
目的達成のために対象をより気持ちよく、使いやすく魅力的にする
cf. アート
自分の表現が大事 ⇔ 商品や企業の表現が大事
作家の自己表現 ⇔ 使用者の自己表現を支援
デザイン=使用者に対する心遣い
いいデザインの前提(=高級温泉旅館のもてなし=お客様のくつろぎのためにデザインされたもの)
でも高級旅館としては子供には物足りない
=ユーザーを定義する必要がある!!
UX User Experience(使用者の経験をデザインする=ユーザーを正しく理解する)
UX白書
経験についての研究
経験を評価
特定の文脈のなかで行われる
UXには期間が存在し、利用前、利用中(一時的UX)、利用後のフェーズが存在する。さらに利用期間全体でも評価される。
すべての経験がUX
ユーザーの満足度=良いUX=ビジネスゴールを達成できているか
システムとユーザーとの全ての接点で良い経験を提供できるように心掛ける=ユーザーインターフェイス
UXが広いから、UIも多様？
(広義) 全ての接点にUIが存在する
直接的UI 企業が制御できるUI CS 製品 パッケージ ストア
間接的UI 雑誌 メディア 口コミ セレブユーザー 競争製品
UXは多様なUIデザインの「総和」
あなたが考慮すべきUI(ものすごい幅広い)
マーケティングPR担当ならば (SNS メディアなど)
エンジニアならば (ソフトウェア ハードウェアなど)
経営者は全て見ないといけない
今日のUIはソフトウェアのUIに限定する。
デザイン 効率 シンプル きれいさ
UX 満足度
UI UXへの貢献度
(UX と UIってどう違うの？)
UIはUXのために存在する。
UIは手段で、UXは結果
よいUXを提供するためにはよいUIが必要
目指すUX→(手段としてのUI)→結果としてのUX
UXはUIデザインの理由であり、結果でもある。
なぜそのようなUIデザインにしたの？という
答を用意できるのはUX
「このような経験を持たせたいから」というロジックのために
UIが存在する。
UI/UXデザインに必要なスキル
目指すUX
人に対する理解(認知心理学)
共感力
分析力
コミュニケーション(プレゼンテーション)
≠絵がうまい、イラレやフォトショが使える
UI
販売=立地 BGM 雰囲気
ソフトウェア
結果としてのUX
目指すべきUXを達成しているかを評価する
(情報収集力 根性)
よいUXをデザインする方法
いいUXを提供するには
「ITエンジニアとして意識すべきデザインについて考える」
多様なデザインの区分から自分に必要なものを学ぶ
The Elements of User Experience ですでに定義されている
Visual
Interface
IA
など
システムアーキテクチャとのマッピング
各デザインに必要な素養
美的センス vs 論理的思考
全ての部分に論理的思考が必要。
ビジュアルデザインはUIのごく一部に過ぎない
よいUI作成に必須素養は「論理的思考」
ビジュアルデザインにも論理的思考は存在する
色選びなど、「デザインの理論」と呼ばれる
デザインの基本的な要素とその背景にある理論を知るとそれなりの
UIデザインが出来る!!
近接
整列
反復
コントラスト
フォント
各要素の特性を理解して適切に使えばそれなりのデザインは出来る!!
近接
- 関連の強いものを近くに配置すると、要素の意味が分かりやすくなる
整列
- 画面内のすべての要素を意図をもって配置する
- 内容が明快に伝わり、洗練されたイメージを伝える
- 空間(スペース)は整列の大切な要素
- スペースを徒に排除すると情報量が増えるが窮屈になる
- 適切なスペースで余裕と高級感を出せる
反復
- 画面内要素を統一してパターン化することでユーザーの学習コスト減らし、誤操作を防ぐ
- 世界観を生み出せる
(e.g. FB)
- たとえばOKとキャンセルの色が場所によって違っていたら…
コントラスト
- 要素に特徴を与えて他の要素と区別する
- コントラストが薄い場合は、コンテンツに集中できる
- 向き、色、サイズなどでコントラストを出す
フォント
- フォントの違いでイメージががらっと変わる
その他
メタファー オフラインの世界をオンラインに持ち込む
アフォーダンス 環境にたいする人間の反応を利用する(ボタンがあると押したくなる 線があるとそれに沿って歩きたくなる)
既存デザイン言語の再利用 (ハイパーリンク スライドなど、ユーザーが既に慣れているUI要素を利用する)
これさえ覚えれば、出来るような気がする
センスだけでなく、ロジックがあればある程度モノになる。
ユーザーの特徴を考慮する(ユーザーがどのくらいITリテラシが高いか、年齢、性別、デバイスなどでデザインを変える必要がある)
使われる環境を考慮する(オフィスの中だけでなく、外、カフェなど、どこで使われるか分からない 日差しがつよい場合はコントラストを考慮する)
やってはいけないこと
近い、似てる、意味が分からないことは避ける
(核ミサイルの発射ボタンとコーヒーのオーダーボタンが同じ色ではいけない)
危険な操作を防ぐためにもデザインは存在する
参考図書
The Non Designers Design Book
