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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. 慣例
    NG
    

    View Slide

13. 慣例
    OK
    

    View Slide

14. 慣例
    NG
    

    View Slide

15. 慣例
    OK
    

    View Slide

16. 慣例
    NG
    

    View Slide

17. 慣例
    OK
    

    View Slide

18. 冗長
    NG
    

    View Slide

19. 冗長
    OK
    

    View Slide

20. 冗長
    NG
    

    View Slide

21. 冗長
    OK
    

    View Slide

22. 冗長
    NG
    

    View Slide

23. 冗長
    OK
    

    View Slide

24. 寛容
    NG
    

    View Slide

25. 寛容
    OK
    

    View Slide

26. 寛容
    NG
    

    View Slide

27. 寛容
    OK
    

    View Slide

28. 寛容
    NG
    

    View Slide

29. 寛容
    OK
    

    View Slide

30. 一貫
    NG
    

    View Slide

31. 一貫
    OK
    

    View Slide

32. 一貫
    OK
    

    View Slide

33. 一貫
    NG
    

    View Slide

34. 一貫
    NG
    

    View Slide

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

    View Slide

36. 一貫
    NG
    

    View Slide

37. 一貫
    OK
    

    View Slide

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

    View Slide

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

    View Slide

40. http://intertwingled.org/jp/
    

    View Slide

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

    View Slide

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

    View Slide

43. 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）
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

54. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

58. やりすぎないように
    

    View Slide

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

    View Slide

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

    View Slide

61. ありがとうございました
    

    View Slide