[&] Smartphone UI/UX by @fladdict

fladdict スマホ UI/UX 講座
-----------------------------
今日はUI話しと、iOS7 の話し。
今日まとめようと思いましたが、天王洲アイルに行ってしまいまして、
ギリギリで到着しました。
皆さんがどんなことを聞きたいのか聞いてみてから決めたいとおもいます。

Apple Human Interface Guideline の話し
デザイナー以外のデザインの話し、
手触りの話し、
手触りのあるものを使うにはどうすれば？
プロトタイピングの話し、注意すること
あたりの話しをストックして持ってきました。
では拍手でどの話題が多いか決めましょう。

■Apple の定めた使いやすいインタフェースのガイドライン

Apple が答えを紹介してくれているのに、あまり読まれていません。
https://developer.apple.com/jp/devcenter/ios/library/documentation/userexperience/conceptual/mobilehig/DesigningForiOS7/DesigningForiOS7.html
Android も Widnows Phone も独自のガイドラインを作っている。

デバイスごとの方言はあっても、基本は同じなので、
一つを学ぶと、他のプラットフォームも理解しやすい。

よい iPHone アプリを作ろうとしたら、
インタフェースをiPhone用に設計しなければいけない。
良い iPhone アプリを作るには HIGを深く理解することが必須！

エンジニアも知っているべきだし、企画の人も知っているべき。

The GUILD（クライアントワーク）, Art & Mobile（個人） で活動しています。
テレビキャンペーン統合、フリフリアプリのUI開発など。
iPhoneアプリ設計の極意。
モバイルデザインパターンなど。

HIGは100ページ以上ある分厚いマニュアルなのd,え
重要なところだけ。

プラットフォームの特徴　8ページ
ユーマンインタフェース原則　3ページ
デザインストラテジー　8ページ
PCアプリの移植　22ページ
ユーザーエクスペリエンス　29ページ
iOSテクノロジ　37ページ
iOSのUIエレメント　64ページ
アイコンについて　19ページ

Apple は深い話しが最初に深く取り上げられている。

●デザインとは？
●Human Interface の原則
●デバイスを理解して作る
●アプリ設計の考え方
●架空のデザイン事例

■デザインとは？
これいいデザインだね？とは、普通かっこいい、かっこわるいとか、
外見のことをデザインと言っていると思います。
これは「デザイン」の使い方として間違っていて、
デザインは綺麗にすること（スタイリング）では無いです。
本当の広い意味でのデザインは、使いやすくすることも含まなければいけない。

本来の意味に近いのは、デザイン = 設計　
UIを設計すること、UXを設計することなど、
センスではなく、割とエンジニアリングに近い話し。

目的を提案・解決する。デザイン　
満足を与える。UXデザイン
使いやすくする。UIデザイン
解りやすくする。情報デザイン

皆に興味を持ってもらうためにカッコ良くするとか、
商品を買ってもらうのに買ってもらうのが、スタイリングや、
グラフィックデザインのパート。
もう少し具体的に、かっこ良くするにも目的があるもの。

整理整頓することで、ぐちゃぐちゃではなく関連する情報だと
見せるのも、デザイン。
グルーピングすることもデザイン。
階層構造をつけることもデザイン。
重要性をつけることもデザイン。
取捨選択、捨ててしまう、何を出して何を捨てることもデザインだったりします。

■複雑な問題を整理して解決することがデザイン

コントロールできないものをコントロールできるものにするのが
デザインの本質。かっこ良くするのは、そのなかの手段の一つ。
センスとか美術は一端忘れてください。
テクニカルな話しですが、エンジニアリング的は話しで、
センスは関係ありません。

文章書くスキルに近いものです。
教育を受けて、学べば、読み書き、正しく訓練すれば、
解りやすい、読みやすい文は誰でも書けるようになります。
感動する小説とかは別な話しです。

エンジニアリングとしてのデザイン。
Human Interface の原則。
Human Interface とは何？
何かと何かをつなぐもの、人と何かとの中間をつなぐもの。
モノが行うためにどう操作すれば良いのか？
インターフェースに対して、一番注意しなければいけないのが....

●必然性のあるビジュアル
●一貫性
●直接的な操作
●フィードバック
●メタファー
●ユーザーに選択肢

コミュニケーションそのものの話し、
人間の原則。
どんなに綺麗でもぐちゃぐちゃしていると使ってもらえない。
いったん整理して、人間が使いたくなる基本原則とは？

■必然性のあるビジュアル
機能と外見が調和しているか？
ゲームとして魅力的な見栄えか？
実務アプリであれば、変な飾りが無いか？
ドレスコードに近いはなし
機能には適切な外見を与える
勉強しなくても使えることにつながる。
Magellan みたいな外見にするだけで、音楽が好きな人であれば、複雑でもくじけずに使ってもらえる。
とっつきやすさが大きく変わる。
Instapaper であれば、変な外見は無くし、読みやすくする。
Twitterlator であれば、コミュニケーションの楽しさで、手紙風のアプリに...

ただ外見をキャッチーにするためだけにそうしているものもあるが、
必然性のがめに外見をつけていくのが重要

■一貫性
統一されたルールができているか。大きいレベルから細かいレベルまで。
他のアプリと操作が一環しているか。
これ一番重要なことで、勝手にルールを作るのではなく
他のアプリを研究して、同じようにしていく。
なんで、一貫性を持たせないかというと、
アプリは数万個あって、インストールして触りますが、
過去の経験のもとに触り始めます。
検討をつけて操作できます。
たとえ作業効率が上がるものでも、勝手な操作だと、解らないから、アプリを消されてしまう。
特に無料のアプリで置きやすいこと。
慣れれば使いやすい独自のルールを作るのは、真剣に作らないとアプリを消されてしまう。

アプリ内で操作が一貫しているか？
トップページでは左上に設定ボタンがあったのに他では違うなど。
ユーザーは設定ボタンがどこにあるのか予測できなくなる。
常に左上にあるとか、全ページ同じルールを持っていると、
だいたい検討して操作ができる。
大きなルールを作って、
重要な色、一貫性のルールを作って、各ページを作ると迷わない。

旧版と操作が一貫しているか？
タイプライターの QWERTY の配列など。キーが絡まないよう、
わざと速くキーが押せないようになっている。
ものすごく速く打てるキーボードを考えても失敗している。
QWERTY で慣れていて、新しい打ち方を使ってくれない。
過去の文脈から全く外れたものを作ってしまうと、使ってもらえない。

車も、十字キーで運転できても、使ってもらない。
画期的なものを誰も使ってもらえないのも、これが理由。

人々が慣れ親しんだUIを採用する（ただしコピーではない）。
一回作った UI は少しづつ変えていくように。
最初の UI設計が重要。

最初はフリックだけだと無理と考え、普通のキーボードも、救済措置があった。

■デバイスの文法を学ぶことが重要

多くのアプリを触ってもらって、何が自然で何が自然ではないのかが解る。
基本的なところはコンサバで、考えなくてもすむように。

■直感的な操作

どういうことかというと、操作をする時は変に難しいことではなく、
一発で操作ができるもの。
コールドバーグマシーンみたいなもの。
無意識だと作ってしまうことがある。
ゲームのアプリでファミコン移植アプリ、そのままで十字キーのものを使ってしまう。
十字キーよりもドラッグを意識しなければいけない。

写真アプリが特徴的。抽象的なスライダーとかメーターとかをつけるよりも、
写真を触る、要素を直接操作するのが大事。

●抽象概念をできるだけ排除する。

■フィードバック
スマートフォンでかなり重要。
操作をしたときに反応が戻ってくること。
雨が降ってきたときに、水たまりに足を入れたときに泥がはねるのもフィードバック
プチプチをつぶした時にプチっとはじけるのもフィードバック。
フィードバックが無いと、人間はモノを意識できない。
マウスやキーボードは、マウスやキーボードが押した瞬間に、カチッという感触がある。
タッチパネルは押した感覚が無いので、普通のものより分かりにくい。

ユーザーの行動ですぐに反応する（タップでハイライト）
反応が返ってくると、安心できる。
解りやすい例だと、ボタンをおしたら、色がつくことで、押したことが解る。
ハイライトが無いと、自分がどこを押したこともわからない。

●アニメーションを利用したリストの追加。
リストを一行追加した時に、0.5秒1秒かけてアニメーションさせることで
フィードバックとして解る。一瞬アイテムが挿入されてしまうと、混乱する。

●サンド・バイブ（多用に注意）
どこで何がおきているのかをユーザーに伝えるのが大事。
アニメーションとか効果音はかっこいい演出ではなく、
ユーザーに明示的にフィードバックしている。
ユーザーに TURE/FALSEを返して、成功したのかを認識させている。
ユーザーにたいする「ほうせんそう」

■メタファー
いろいろ扱いが変わってきていますが、
原則としては重要。
何かを別のものに例えて説明すること。比喩。暗喩。
なぜアプリ内で使わなければいけないのか？
慣れ親しんだものを例にすると、学習コストが減る。

ゴミ箱メタファー　ファイルの削除の概念を教えるのは難しい。
いらなくなったものをゴミ箱に入れると消えます。というと、
何が起こるのかを見当つけるので、技術的なことが解らなくても理解できる。
説明無しでわかるのが良い。

データの構造を説明するよりも、ファイル／フォルダで示すと
なんとなく使い方がわかる。
現実をモデルにしていれば、ユーザーはすぐに理解できる。

電子書籍は、ページをめくるようにすると、現実の本と比べて解りやすい。
一番始めて導入した時に、現実世界と似ているので、
タッチスクリーンのような初めてのものでも、説明無く使える。

今はもう、ユーザーがタッチに慣れてきたので、
冗長に説明することは無いだろうと考え、大げさな表現はさけ、
抽象的な表現になってきました。
電卓も普通の電卓の形だと説明無しで使えます。

Cella アプリのように、趣味のアプリのようなものであれば、
帳簿のリストよりも、ワインの絵を並べる方がわかりやすい。
メタファーはすごい便利なツール。。

一方で、現実世界の欠点まで持ち込まないように注意すること！
満杯になると捨てられないゴミ箱。
月水金しか処理できないゴミ箱とか。
ガチガチにエンジニア主導だと、変なルールが実装されてしまうかもしれない。

フォルダの中にもフォルダが入るし、
現実世界に即しすぎると、表現として変な表現にしてしまうと
メタファーの悪いところが再現されてしまう。
5,6年、セカンドライフみたいなもの。ユーザーインタフェースの話しからすると、
現実の面倒な部分を真似すぎているので、実際は Facebook が浸透した。

メタファーは解りやすくする方法なので、
用法、量を守ってつくりましょう。

●世代や文化で通じないメタファーもある。

電話機、受話器。今の子供は、電話のアイコンはなんで？
CDのアイコン、音楽プレイヤーのアイコン、楽譜のアイコン、
けっこう有名なジョークがあって、
フロッピーディスク、「セーブアイコンの模型？」
フロッピーディスクの実物を知らない。
文化的なものに頼りすぎると、国際展開におもわぬ落とし穴があるかもしれない。
しっかりとチェックする必要があります。

■ユーザーに選択肢を。
重要な時にはユーザーがモノを拒否する権限をあたえる。
勝手に裏でやってしまうのを避ける。

ユーザーに操作の主導権、意思決定を奪わない。
削除、スキップ、重要な操作のときにはユーザーに確認する。

挙動が慣れ親しんだもの、予想できるものだとユーザーは暗視し、理解もしやすい。
キャンセルやアンドゥ、確認の機会をもうける。
危険な操作は、隠したり、階層を深く。
Save データをリセットするようなものも、隔離するなど。
ユーザーが必要な時に選択し、操作をリカバリもできるように。

Apple が考えている抽象的なお話し...............

■iOS 7 のフラットデザインを理解する

iOS 7 は政治的な話しもある事柄、
仕方ない中でも頑張っていて、ドリブルにあるフラットデザインよりも
使いやすい工夫がなされています。

iOS7 の特徴、一番特徴的なのは、レイヤー構造を持っていること、
視覚的にはフラット、構造的には多層化。
拝見、アイコン、ノーティフィケーションセンター。
過去との後方互換性ともつながるのだが、昔の構造を維持している。
概念は立体のまま。
これはどうにか解決しなければいけないので、いろいろ工夫している。

●ジャイロを用いたパララックス
おしゃれエフェクトに思われているかもしれないが、
フラットデザインで立体感が無い中で何が手前に来ているのか解るように。
背景と主題が分かるようにした情報デザインの手段。
手前と奥が分かれているので、手間がでていることがわかる。

コンテンツとナビゲーションを分離するための手がかり

●曇り硝子状のブラー
Siri を起動したりするとき、背景がボケて、特殊な画面になります。
使いやすさのための伝達の機能。
今表示されているものが、一時的なもの、特殊なものであること
「一時的なステートであること」
「前のステートに戻れることへの保証」

自分の状況を説明する効果。
完全に別画面にしてしまうと、現在位置が喪失してしまう。
一連の長い操作をする時には全画面だが、
選択肢３個などの時は、全画面を覆うのではなく、今ある画面をぼかして、
一時的な操作をしていること示す。

●画面遷移の変更
増えている表現として、画面遷移も結構変更されている。
モノをタップすると横にスライドして階層が深くなる。
もうすこし拡張されて、オブジェクトを直接操作するルールに従って、
タップすると、オブジェクトが拡大して表示される。

横にスライドするとか、大きくなるアニメーションも
情報デザインとして重要なもの。
アニメーションすることで、どれをタップしたのか一目瞭然。
アニメーション一つつけるだけで、どこからどこに変わったのかが操作していない人もわかる。

ナビゲーション中心でなく、コンテンツ中心
コンテンツ中心のため、UIのテカリを減らしたり、
全画面でコンテンツ表示するようにしている。

●カラーマナーと脱アイコン
アプリ内でテーマカラーを定め、押せる部分に徹底するように
アップルが対策して考えたのは、
基本カラーみたいなのを使って、
これは押せますというのをアプリ内で徹底している。
基本カラーの場所を押せば操作できるというふうに工夫されている。

似ているアイコンがあって、どれだか分からない問題。
アイコンを減らして、文字表現を増やしている。

●手触りもすべて意味がある。

視覚的言語とは？
デザインの話しでは、模様としてのカッコ良さではなく、
文字と同じ言葉であって、コミュニケーションする手段である。
グラフィックを言語として扱う。
グラフィックを使えば、ここが重要です。ということを書かなくても
ユーザーに言葉で伝えたのこと同じことができる。
文字じゃなくてもメッセージを伝えることができる。
アニメーションも音も言語。

●アニメーション
なぜアニメーションが必要？
特定の場所に注目が集められる。
画面の中でアニメーションしていたら、ユーザーはまずそこに注目する。
状態が変化したのかを伝えるのもアニメーションの仕事。
iOSのブラーもその一つ。
言葉じゃないけれど、メッセージとして伝わる。
説明文が無くても、ユーザーに伝えられる。
こういったものが視覚言語。

●ナビゲーションと遷移の例
スライドも言語のひとつ。
階層を潜ったことをユーザーに伝える。
階層戻ったことをユーザーに伝える。
一時的モーダル。言葉としてユーザーに情報を阿賀得る。

一瞬の変化は知覚できない。

iOS7 の電卓をみてみよう。
2500÷50 を押してみてください。= を押す。
表示どうなりました？イコール押した後も 50なので分からない。
もう一回押してしまうと、1になってしまう。

本来はこうあるべき。
÷50 と =50 の違いがわからない。
一瞬パッと消えて、答えが表示されれば、答えが表示されたことがわかる。
さらに使いやすくすれば、結果の下に式を出したり。

アニメーションが状態の変化を伝える。
感覚のチャンネルが増えるほどわかりやすくなる。
ユーザーに考える時間を与えらえる。

メールを送るアニメーション中はキャンセルできるようにする。
ストレスの軽減
ユーザーが一瞬の変化は認識できないし、信用しない。
一瞬の変化は信用されない。
ワザと時間をかけた方が良いものもある。

RPG の画面。ズームして戦闘シーンに画面移動していたと思います。
実はかっこいいエフェクトではなく、
アニメーション中に次の画面をロードすることで体感待ち時間を無くすための仕組み。
待ち時間を気にせずストレスを受けない。

音だと、画面を見てないユーザーにも通知できる。
すごい長い処理の場合、他の作業をしていても、
画面を見ていない人にもメッセージを与えることができる。

●まとめ
デザインはセンスではなくエンジニアリング
しっかししたデザインは、位置、色、動き、音、あらゆることに意味と目的がある。