Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
アクセシブルなナビゲーションデザインの考え方
Search
Rikiya Ihara
July 04, 2015
0
9
アクセシブルなナビゲーションデザインの考え方
Rikiya Ihara
July 04, 2015
Tweet
Share
More Decks by Rikiya Ihara
See All by Rikiya Ihara
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
0
150
ゼロから学ぶWebアクセシビリティ~導入編~
magi1125
4
1.6k
アクセシビリティに関わる職種とは?〜freee編〜
magi1125
0
15k
アクセシビリティの効果測定
magi1125
1
6.2k
電子決済等代行事業者協会 アクセシビリティ勉強会「Webアクセシビリティの概要」
magi1125
0
12k
noteアクセシビリティ勉強会 〜画像編〜
magi1125
0
5.3k
自社サービスのアクセシビリティ向上、良いパターンとアンチパターン
magi1125
0
5.3k
ユビーAI受診相談でほんとうに起きていた怖い話
magi1125
0
5.3k
noteアクセシビリティ勉強会〜虚空編〜
magi1125
0
5.2k
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
Raft: Consensus for Rubyists
vanstee
130
6.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
Scaling GitHub
holman
456
140k
The Invisible Side of Design
smashingmag
293
49k
Code Review Best Practice
trishagee
54
15k
The Mythical Team-Month
searls
214
42k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Docker and Python
trallard
33
2.6k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
Transcript
アクセシブルなナビゲーション デザインの考え方 RIkiya Ihara / @magi1125
デザイニング Webアクセシビリティ 2015年7月24日(金)発売! http://www.amazon.co.jp/dp/4862462650/
http://www.jjg. net/elements/translations/elements _jp.pdf
構成 • 前編:よくある問題と解決アプローチ ◦ デザイニングWebアクセシビリティよりご紹介 • 後編:ナビゲーションデザインとアクセシビリティ ◦ 「特定」と「さまざま」の関係性
よくある問題と解決アプローチ
ナビゲーションとは ある地点から別の地点へ誘導するもの あるいはその過程を表示するもの グローバルナビゲーション、ローカルナビゲーション、パンくず、関連情報、検索、サ ジェスト、サイトマップ、メガメニュー、ドロワー、スプリングメニュー、カテゴリトップメ ニュー、ダッシュボード、ステップインジケーター、ページネーション、タグクラウド、 キーワードリンク、目次…
よいナビゲーションとは 使いやすい わかりやすい 気持ちのよい 独自性がある かっこいい 先進的 豊富 多彩 シンプル 透明
None
よいナビゲーションとは いまの居場所がわかる 行き先の名前がわかる いろんな手段が選べる いろんな経路が選べる 実際に行ける やり直せる
アクセシブルなナビゲーションとは • なるべく多くの人が「使える」ナビゲーションのこと • 知覚可能、操作可能、理解可能
アクセシブルなナビゲーションの原則 慣例 冗長 寛容 一貫
慣例 NG
慣例 OK
慣例 NG
慣例 OK
慣例 NG
慣例 OK
冗長 NG
冗長 OK
冗長 NG
冗長 OK
冗長 NG
冗長 OK
寛容 NG
寛容 OK
寛容 NG
寛容 OK
寛容 NG
寛容 OK
一貫 NG
一貫 OK
一貫 OK
一貫 NG
一貫 NG
※書籍「デザイニング Webアクセシビリティ」240ページを参照ください 一貫 OK
一貫 NG
一貫 OK
ナビゲーションデザインと アクセシビリティ
素朴な疑問 • アクセシビリティの話じゃない? • ユーザビリティの話? • 割と普通のこと?
http://intertwingled.org/jp/
http://www.bookslope.jp/blog/2012/07/evaluationuxhoneycomb.html
テキスト・セマンティクス インタラクション 表層 構造・機能・内容
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)
「アクセス」のスコープ • 取り組みとしてのレイヤーやレベルは存在する • 現実的には、情報が取得できても、 理解して利用できなければ、体験としては最悪
「誰でも必ず使えるナビ」は存在しない • 検討開始の軸はユーザビリティ • 最初から全体を見るとビジネス要件に繋げられない • 特定ユーザー想定でないと合意形成しづらい • いわゆる情報設計のプロセスは普通にやる
※書籍「デザイニングWebアクセシビリティ」 42ページからの「3章 要件定義」の「概要と流れ」および 66ページからの「4章 ナビゲーション設計」の「概要と流れ」を 参照ください
「特定」と「さまざま」 ユーザビリティ:ISO 9241-11 特定の目的を達成するために、特定の利用者が、 特定の利用状況で、有効性、効率性、そして満足とともに ある製品を利用することができる度合い。 アクセシビリティ:ISO 9241-20(JIS X 8341-1:2010)
様々な能力をもつ最も幅広い層の人々に対する製品, サービス,環境又は施設(のインタラクティブシステム)の ユーザビリティ http://modelessdesign.com/modelessandmodal/2009/11/25/iso-9241-11/
http://blog.chachaki.net/archives/33311401.html
特定ユーザーへの最適化で十分? • 業務アプリ :学習が前提、利用を強制 • ゲーム :学習が前提、レベルシステムで強化 • GitHub :教科書が出てる程、しくじると大変
• スペコン :独自UI、わかる人がわかればいい
Webの特徴 • ユーザーの状況を特定しきれない ◦ 急いでる? 落ち着いてる? ◦ 移動中? 家? 会社? バカンス中? ◦ どのデバイスで、どのUAでアクセスしてる? ◦
さっきまで何を見てた? 次に何を見る? • もちろん狙いはつけるが、全部は無理
Webの特徴 • サイト個別の学習を前提としづらい ◦ Google検索による直接ランディング ◦ SNSやキュレーションメディアでの遭遇 • セレンディピティによる発見 ◦
アクセシビリティを調べていたのに、気づくと なぜか「当たり前体操」「日本エレキテル連合」「スー パー・ササダンゴ・マシン」を調べていた
アクセシブルなナビゲーションが必要 慣例 冗長 寛容 一貫
後から付け足すのではなく、同時に考える • ユーザビリティが検討の軸なのは確か • だが、画面設計やプロトタイピングが進んでから アクセシビリティ成分を足すのは悪手 ◦ 目指すところが違うので根本的に無理が生じる ◦ 後付け感が強く、どこか不自然な感じになる
None
バランスを考えながら案出する • 常に「きもち、一般化」を心がける • 一般 ≒ パターン、把握を常に怠らない ◦ サイトのトレンド ◦
各種デザインガイドライン ◦ デザインパターン集 ◦ ビジネスドメインにおける一般的な表現
http://matome.naver.jp/odai/2131496429696477001 http://spotlight-media.jp/article/13496080201729340
やりすぎないように nav nav nav nav nav コンテンツ nav nav nav
やりすぎないように
高いレベルの「ふつう」を作る それがアクセシブルなWebIA
デザイニング Webアクセシビリティ 2015年7月24日(金)発売! http://www.amazon.co.jp/dp/4862462650/
ありがとうございました