長い内容を隠しすぎず必要箇所へ到達させる

解決する問題

長い内容を分割・省略した結果、必要な箇所の存在、現在位置、元の場所への戻り方が分からない。

発生条件

• 複数sectionを持つ長文ページ。
• 一部を開閉しながら見出し間を移動する内容。

原因候補

• 初期状態ですべてを閉じている

  利用できる情報量と項目の存在を判断できない。

• 目次移動後や長いscroll後の復帰手段がない

  探索を最初からやり直す。

推奨判断

重要内容を初期表示し、独立して開閉できるsection、実在見出しへの目次、十分にscrollした時だけ使える先頭復帰を組み合わせる。

修正手順

1. 初期開示量を決める

   最初の判断に必要なsectionを開き、他も見出しで存在を示す

   期待する結果: 内容の全体像を把握できる。

2. 見出しと目次を一致させる

   目次は実在する見出しIDへの通常リンクにする

   期待する結果: JavaScriptなしでも移動できる。

3. 復帰を補助する

   長く移動した後にscroll containerの先頭へ戻す操作を示す

   期待する結果: 現在の探索を中断せず戻れる。

失敗例

• 一度に一つしかsectionを開けない

  起こること: 比較のたびに内容が閉じる

  代わりに: 独立したnative disclosureを許可する。

• 存在しない見出しを目次へ残す

  起こること: 移動先がなく信頼を損なう

  代わりに: 見出し正本から目次を生成または検証する。

検証方法

• JavaScriptを無効にする

  sectionと目次の通常リンクが利用できる。

• 複数sectionを開く

  先に開いた内容が勝手に閉じない。

• 目次移動後に先頭へ戻る

  実際のscroll containerが先頭へ戻る。

関連レシピ