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
200
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
8
6.6k
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
370
ゼロから学ぶWebアクセシビリティ~導入編~
magi1125
6
2.5k
アクセシビリティに関わる職種とは?〜freee編〜
magi1125
0
21k
アクセシビリティの効果測定
magi1125
1
8.1k
電子決済等代行事業者協会 アクセシビリティ勉強会「Webアクセシビリティの概要」
magi1125
0
15k
noteアクセシビリティ勉強会 〜画像編〜
magi1125
0
6.8k
自社サービスのアクセシビリティ向上、良いパターンとアンチパターン
magi1125
0
6.9k
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Being A Developer After 40
akosma
89
590k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
The Pragmatic Product Professional
lauravandoore
32
6.4k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
The Language of Interfaces
destraynor
156
24k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Side Projects
sachag
452
42k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
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/
ありがとうございました