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 / magi
July 04, 2015
0
23
アクセシブルなナビゲーションデザインの考え方
Rikiya Ihara / magi
July 04, 2015
Tweet
Share
More Decks by Rikiya Ihara / magi
See All by Rikiya Ihara / magi
最速[要出典]アクセシビリティチェック
magi1125
2
210
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
8
6.8k
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
380
ゼロから学ぶWebアクセシビリティ~導入編~
magi1125
6
2.5k
アクセシビリティに関わる職種とは?〜freee編〜
magi1125
0
21k
アクセシビリティの効果測定
magi1125
1
8.2k
電子決済等代行事業者協会 アクセシビリティ勉強会「Webアクセシビリティの概要」
magi1125
0
15k
noteアクセシビリティ勉強会 〜画像編〜
magi1125
0
6.8k
自社サービスのアクセシビリティ向上、良いパターンとアンチパターン
magi1125
0
6.9k
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
How to train your dragon (web standard)
notwaldorf
91
5.8k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
We Have a Design System, Now What?
morganepeng
51
7.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
560
Fireside Chat
paigeccino
34
3.2k
Building an army of robots
kneath
303
45k
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/
ありがとうございました