アクセシブルなナビゲーションデザインの考え方

Slide 1

Slide 1 text

アクセシブルなナビゲーションデザインの考え方 RIkiya Ihara / @magi1125

Slide 2

Slide 2 text

デザイニング Webアクセシビリティ 2015年7月24日（金）発売！ http://www.amazon.co.jp/dp/4862462650/

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

構成 ● 前編：よくある問題と解決アプローチ ○ デザイニングWebアクセシビリティよりご紹介 ● 後編：ナビゲーションデザインとアクセシビリティ ○ 「特定」と「さまざま」の関係性

Slide 5

Slide 5 text

よくある問題と解決アプローチ

Slide 6

Slide 6 text

ナビゲーションとはある地点から別の地点へ誘導するものあるいはその過程を表示するものグローバルナビゲーション、ローカルナビゲーション、パンくず、関連情報、検索、サジェスト、サイトマップ、メガメニュー、ドロワー、スプリングメニュー、カテゴリトップメニュー、ダッシュボード、ステップインジケーター、ページネーション、タグクラウド、キーワードリンク、目次…

Slide 7

Slide 7 text

よいナビゲーションとは使いやすい　わかりやすい　気持ちのよい独自性がある　かっこいい　先進的豊富　多彩　シンプル　透明

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

よいナビゲーションとはいまの居場所がわかる行き先の名前がわかるいろんな手段が選べるいろんな経路が選べる実際に行けるやり直せる

Slide 10

Slide 10 text

アクセシブルなナビゲーションとは ● なるべく多くの人が「使える」ナビゲーションのこと ● 知覚可能、操作可能、理解可能

Slide 11

Slide 11 text

アクセシブルなナビゲーションの原則慣例冗長寛容一貫

Slide 12

Slide 12 text

慣例 NG

Slide 13

Slide 13 text

慣例 OK

Slide 14

Slide 14 text

慣例 NG

Slide 15

Slide 15 text

慣例 OK

Slide 16

Slide 16 text

慣例 NG

Slide 17

Slide 17 text

慣例 OK

Slide 18

Slide 18 text

冗長 NG

Slide 19

Slide 19 text

冗長 OK

Slide 20

Slide 20 text

冗長 NG

Slide 21

Slide 21 text

冗長 OK

Slide 22

Slide 22 text

冗長 NG

Slide 23

Slide 23 text

冗長 OK

Slide 24

Slide 24 text

寛容 NG

Slide 25

Slide 25 text

寛容 OK

Slide 26

Slide 26 text

寛容 NG

Slide 27

Slide 27 text

寛容 OK

Slide 28

Slide 28 text

寛容 NG

Slide 29

Slide 29 text

寛容 OK

Slide 30

Slide 30 text

一貫 NG

Slide 31

Slide 31 text

一貫 OK

Slide 32

Slide 32 text

一貫 OK

Slide 33

Slide 33 text

一貫 NG

Slide 34

Slide 34 text

一貫 NG

Slide 35

Slide 35 text

※書籍「デザイニング Webアクセシビリティ」240ページを参照ください一貫 OK

Slide 36

Slide 36 text

一貫 NG

Slide 37

Slide 37 text

一貫 OK

Slide 38

Slide 38 text

ナビゲーションデザインとアクセシビリティ

Slide 39

Slide 39 text

素朴な疑問 ● アクセシビリティの話じゃない？ ● ユーザビリティの話？ ● 割と普通のこと？

Slide 40

Slide 40 text

http://intertwingled.org/jp/

Slide 41

Slide 41 text

http://www.bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html

Slide 42

Slide 42 text

テキスト・セマンティクスインタラクション表層構造・機能・内容

Slide 43

Slide 43 text

WCAG 2.0 2 操作可能 2.4 ナビゲーション可能 2.4.5 複数の手段（AA） 2.4.8 現在位置（AAA） 3 理解可能 3.2 予測可能 3.2.3 一貫したナビゲーション（AA） 3.2.4 一貫した識別性（AA）

Slide 44

Slide 44 text

「アクセス」のスコープ ● 取り組みとしてのレイヤーやレベルは存在する ● 現実的には、情報が取得できても、理解して利用できなければ、体験としては最悪

Slide 45

Slide 45 text

「誰でも必ず使えるナビ」は存在しない ● 検討開始の軸はユーザビリティ ● 最初から全体を見るとビジネス要件に繋げられない ● 特定ユーザー想定でないと合意形成しづらい ● いわゆる情報設計のプロセスは普通にやる

Slide 46

Slide 46 text

※書籍「デザイニングWebアクセシビリティ」 42ページからの「3章要件定義」の「概要と流れ」および 66ページからの「4章ナビゲーション設計」の「概要と流れ」を参照ください

Slide 47

Slide 47 text

「特定」と「さまざま」ユーザビリティ：ISO 9241-11 特定の目的を達成するために、特定の利用者が、特定の利用状況で、有効性、効率性、そして満足とともにある製品を利用することができる度合い。アクセシビリティ：ISO 9241-20（JIS X 8341-1:2010）様々な能力をもつ最も幅広い層の人々に対する製品，サービス，環境又は施設（のインタラクティブシステム）のユーザビリティ http://modelessdesign.com/modelessandmodal/2009/11/25/iso-9241-11/

Slide 48

Slide 48 text

http://blog.chachaki.net/archives/33311401.html

Slide 49

Slide 49 text

特定ユーザーへの最適化で十分？ ● 業務アプリ：学習が前提、利用を強制 ● ゲーム：学習が前提、レベルシステムで強化 ● GitHub ：教科書が出てる程、しくじると大変 ● スペコン：独自UI、わかる人がわかればいい

Slide 50

Slide 50 text

Webの特徴 ● ユーザーの状況を特定しきれない ○ 急いでる？　落ち着いてる？ ○ 移動中？　家？　会社？　バカンス中？ ○ どのデバイスで、どのUAでアクセスしてる？ ○ さっきまで何を見てた？　次に何を見る？ ● もちろん狙いはつけるが、全部は無理

Slide 51

Slide 51 text

Webの特徴 ● サイト個別の学習を前提としづらい ○ Google検索による直接ランディング ○ SNSやキュレーションメディアでの遭遇 ● セレンディピティによる発見 ○ アクセシビリティを調べていたのに、気づくとなぜか「当たり前体操」「日本エレキテル連合」「スーパー・ササダンゴ・マシン」を調べていた

Slide 52

Slide 52 text

アクセシブルなナビゲーションが必要慣例冗長寛容一貫

Slide 53

Slide 53 text

後から付け足すのではなく、同時に考える ● ユーザビリティが検討の軸なのは確か ● だが、画面設計やプロトタイピングが進んでからアクセシビリティ成分を足すのは悪手 ○ 目指すところが違うので根本的に無理が生じる ○ 後付け感が強く、どこか不自然な感じになる

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

バランスを考えながら案出する ● 常に「きもち、一般化」を心がける ● 一般 ≒ パターン、把握を常に怠らない ○ サイトのトレンド ○ 各種デザインガイドライン ○ デザインパターン集 ○ ビジネスドメインにおける一般的な表現

Slide 56

Slide 56 text

http://matome.naver.jp/odai/2131496429696477001 http://spotlight-media.jp/article/13496080201729340

Slide 57

Slide 57 text

やりすぎないように nav nav nav nav nav コンテンツ nav nav nav

Slide 58

Slide 58 text

やりすぎないように

Slide 59

Slide 59 text

高いレベルの「ふつう」を作るそれがアクセシブルなWebIA

Slide 60

Slide 60 text

デザイニング Webアクセシビリティ 2015年7月24日（金）発売！ http://www.amazon.co.jp/dp/4862462650/

Slide 61

Slide 61 text

ありがとうございました