UI＆UX 重要なのは、毎日さわって嬉しい UI/UX!

Bascule GO! - 大塚晃

UIについて

さっそくUIの基礎的なところから １０

１．コンテンツ＞UI

○コンテンツが見たい ×UIが見たい コンテンツやサービスを伴い全体でデザインする すぐにボタンでモリモリになりコンテンツを食ってしまうので不要なパーツはどんどん削除。 ナビゲーションで画面を半分使ってしまうようなUIは結構にあるが、当然使いにくい

２．TPO重視

・オンとオフでメリハリを。 ・アプリ内であってもTPOが異なるものは全く別のものとしてデザインしてよい。 ・混ぜるな危険。世界感の異なるものはいっしょに並べず必ず画面を分ける。

オフ→オン オフ→オン

４．６万色カラーでのトーンジャンプ

・ 微妙なグラデや色味を使う時は見た目が汚くなることがある。 →ドット手打ちでタイリング →Photoshopの誤差拡散法でも代用可 →PCモニタで再現したい場合には、モニタの設定でHighColor(16ビット)を選択

↓トーンジャンプ ↓きれいなグラデ ↓実機で見るときれいなグラデになる

５．フォントサイズを大きく

歩きながらの状態と 椅子に座った状態では 可読性が全く違う 最小の文字は Gmailなどを参考にすると○

△

×

×

○

○

○

○

○

６．屋外想定

コントラストを高く 室内で見る何倍も画面が見づらくなるためコントラストを高くする。 また、複雑なレイアウトや演出は避けてシンプルに。

アクションは片手操作 ・荷物を持っている。つり革につかまっている。 主要な操作が片手でできるか実機に入れて確認する。

実機に入れて持ち歩き 通勤時などにチェックしてみるのがよい

７．遷移

無限ループ ・友達リストから友達のプロフィールへ、友達の友達リストから自分のプロフィールへ・・・という感じで無限遷移を作ることができますが、遷移する度にメモリを消費します。スマホのメモリは少ないのでループしないような整理と構成を。

キャンセル遷移

・進む方向だけ設計して、戻る方の遷移は考えられていないことが多い。 ダイアログを表示させ、ダイアログから別画面を呼び出したときにキャンセルボタンを押すと、何が表示されるのか？など。 様々な状況想定のもとに設計する必要あり。

８．iPhone ⇔ Android デザインの互換性

デバイスが変わればUIが変わる、 同じUI設計では対応できない。

両方のUIガイドラインを読み クセを知っておく必要がある。

ただ、サービスやコンテンツを理解していないと、それぞれのガイドラインにひっぱられて全く違うアプリになってしまうこともある。

９．アクション（＝メニュー）の違い

iPhone にはbackキーやmenuキーがない分 アクションで画面が狭くなる

Android はアクションをメニューに入れておけるので メイン画面を広く使える（メニューキーで呼び出し）

Android のメニューキーは iPhoneのActionボタン（ ） に相当する。 てっとり早くAndroidとの互換性を とったりしたい場合には

backキー menuキー

１０．安易にやると失敗するUI

２重タブ、２重ダイアログ

自分が今何の画面を操作しているのかわからなくなる。

タブの左右スクロール

ボタンが動くと操作しづらい。

アコーディオンUI

便利なように見えるが、小さな画面でボタンが動きまわるとかえって操作しにくい。

一画面内で全部できるようにするより、 機能を整理して画面を分けたり削除した方が 結果的に使いやすい

基礎的なところ：まとめ

ボタンが大きくて みんな喜ぶなら いくらでもやるさ

「使いやすい」というのはあくまで手段。 本当にやりたいことをやろう。

UserXperienceとは

やるためのUX

UserXperienceとは

なんだか自由な複雑系

UserXperienceとは

UXに基づいてUIという大きなカラダを作るのに 複雑な概念を用いていても何もできない。 UXの理解や目的の整理はUIの必須条件。 健全なるUIに、健全なる魂やどれかし！！

UXの独自指標

Context Value Mind 事情・背景 生活・仕事・遊び 望み・気持ち

スマホアプリUXのMVC

UXの独自指標

Context Value Mind 事情・背景 生活・仕事・遊び 望み・気持ち

トリガ

TPO 発見

自発性の行動

UXの複雑な一般指標はこの矢印の要素

UXの独自指標

Context Value Mind がない がない がない

届かない

というふうな使い方をします

UXの独自指標

Context Value Mind 事情・背景 生活・仕事・遊び 望み・気持ち

トリガ

TPO 発見

自発性の行動

UXのキモはアクセシビリティやユーザビリティより この矢印の質と量が上がるように考えること

UXの独自指標

Context Value Mind 事情・背景 生活・仕事・遊び 望み・気持ち

２．アプリ仕様 １．サービス要件

UXもUIも、どういった人を狙うかの武器、 UXより一歩近づいてヒットするのがUI

UX UI

設計の流れ

MVCを実績紹介を交えて ３つ

AQUA Social Drive

AQUA Social Drive

ドライブしながらツイートするアプリ

AQUA Social Drive

YouTube http://www.youtube.com/watch?v=MmeWeKI8kZs

1.まずは （Context）

AQUA Social Drive

ドライブ中は運転に集中している 画面操作はもちろん不可 外を見ているから、画面表示は無意味。 見られないしタッチされないアプリって何？

TPO

２. アプローチ

AQUA Social Drive

・メーター類やサイン標識と同じく状態を簡潔に知らせるもの。 ・スクリーンセーバーのような反応 ・オーディオやラジオのように耳で楽しませるもの

・最小構成 ・１M離れても読める文字の大きさ →実際の環境を体験しておく、PC画面を見ていてもわからない。

AQUA Social Drive

・ノイズにならないようにその空間にあるものと トンマナをあわせる。→信号や交通標識

AQUA Social Drive

【安全のための配慮】 メイン画面に触れようとするとアラート 放置しておくとすぐ解除され元にもどる ガイドラインに沿ったアラートであれば ドライバーは小さな【OK】ボタンを押そうとする。 これは危険な上にドライブが台無しになる。

AQUA Social Drive

ガイドラインより優先すべきことはある！

AQUA Social Drive

設計段階では予期できない問題が起きる。 UI設計で準備できることは？

３. 設計から開発へ向けた準備

AQUA Social Drive

シーケンス単位でUIパターン出し 全UIをシーケンスに分割し、考えうるパターンの検証を終わらせておく ※UIはシーケンス単位で再利用が可能、 独自ライブラリくらいの感覚でコストはさほどかからない。 ex. Social Drive の UI には pelo のものが多く使われている によって ・最適なUIを選択できる、優れたUIを発見できる。 ・自分の頭もクリアに、クライアントやメンバーへの展開がスムーズ ・開発やサービスからの変則的な要求に対応できる。

AQUA Social Drive

シーケンスの大量生産１ シーケンス単位で並べてUIを作成しておくと パターン出しやチェックなどがしやすい。

ログイン・コネクト プロフィール

ドライブの開始～終了

終了後のアクション

AQUA Social Drive

シーケンスの大量生産２ 大量のUIを簡単に実機確認したり、素早くシェアするために Webツールを制作。

PSDやドキュメントを ドラッグ＆ドロップ

AQUA Social Drive

モックアップでの検証 ・開発のリスク：アプリの完成には時間が必要、 実際に使ってみてから気づいてもやり直すことは難しい ・設計のリスク：頭の中で完成していても気づいていない箇所がある。 ・関係各位に対して実際に体験を提供できるので調整が早くなる。 全員の理解が深まりプロジェクトが盛り上がる

プロジェクトに関わる人間が多いほど効果的

AQUA Social Drive

モックはUIデザインをもとにFlashやAirで制作 ・ひと通りの操作を追えるフルモック、 ・サーバーサイドとの連携整理目的で使用するシーケンスモック ・主要な操作を流れで説明できる最小限のプレゼンモック など種類がある。 何を検証するためのモックアップなのかを定義しておかないと 期待した効果が出ないこともある。

[PR] 自社サービス

Pelo Cotto

写真をかわいく デコしてあそべる 女子アプリ

散歩気分の チェックインアプリ おでかけログに

Androidの方 iPhoneの方

Pelo's PUZZLE

Newers

www.newers.net

Newers

Twitter 過去のことを誰も覚えていない。 「ニュースの更新・破棄による鮮度キープ」が得意なメディア 自分のまわりの情報が集まる。

RSSReader 似たようなニュースばかりで飽きる、やがて使わなくなる。「ニュースの集積」が得意な管理ツール

Newers 自分の身の回りで話題になっているニュースが読める、 インタレスト型ニュースリーダー

UX

フィルタリング機能 RSSのミュートとロック機能 トップ

Newers

Value をどう

コントロールさせよう。。 全ての行が

Value

Newers

WebAppはUXやUIを一番早くモノにできる こうならいいのにというアイディアはみんな持っている。 スマホ用にスケーリングすればわりと簡単にカタチにできる

jQueryで作ったモックを公開するイメージ 実際に体験してみなければそれが意図したものかはわからない 言語化が難しいものの実体を作ってみる。

開発者は２人＋有志

UI用ライブラリも作りたいという軽い気持ち

Newers

Androidではタップ挙動が微妙

var target click touchstart touchmove touchend

→ fn.apply(target, arguments) → bind(“touchmove touchend”) → unbind(“touchmove touchend”) → target=e.target

click → fn

iPhoneのClick実装

AndroidのClick実装

Newers

最後に： UXは映像やドラマみたいなもので UIはその１フレームのようなものだと考えます 連続するフレームの上で シーン・ムード・展開を練った上で 外に出てロケハンしたりすると 面白いスマホUIが作れるはず

Thank you.