Scribble at 2021-07-05 14:48:50 Last modified: unmodified

上記は、Box のプランについて説明しているコンテンツを lightbox に表示するボックス要素の一部分を切り取った画像だ。言い回しが回りくどいけれど、誤解なく正確に表現しようとすると、どうしてもこんな風に修飾が多くなってしまう。ともあれ、この画面で気づいたのは、「アップグレード製品の選択」というタイトルの下にある二つの点だ。一方は濃い色で、他方は薄い。ふつう、これは左右に何かコンテンツの表示をスライドするかフェードして切り替える挙動が実装してあって、いまは左の点が濃いから左側のコンテンツが表示されている体裁に見える。だが、実はこういう場合でも、「これからユーザがアクションを起こせる余地が残っている方のボタンや装飾を濃い色で描く」という UI デザインの方針もありえる。

・・・しかし、実はこの点は全く何も反応しない。単にクリックしたりドラッグできないだけなら、僕の使っている Waterfox が旧式のエンジンであるために、JavaScript を正しく扱えていないという可能性もあるわけだが、それでもこれだけ小さな点を操作の道具として提供するなら、何らかのバルーン・チップとして title 属性などで説明を表示するのが UI の設計として当たり前だろう。しかし、そういうものもないらしい。ということは、何か左右に動作する他のインタラクティブな要素のインジケータなのだろうか。でも、他に左右にスライドさせたり切り替えるアクションが加えられそうな要素はページにない。

ということは、やはり単なるあしらいなのだろうか。でも、この要素のクラス名をソースで確かめると "multi-step-tracker" となっているので、何かの手順を示す点のようだ。ただの span 要素となっているので、これをどう動かすのかは DOM に展開してイベントを操作している JavaScript を読み解かないと分からない。

というわけで、試しにどれかプランを選んでみると、なるほど次のチェックアウト画面に進んで、右の点も濃くなった。これで、プランを選ぶという最初の画面が「手順の１画面め」として表示され、インジケータとしての点は２画面ある契約手順を表していることが分かった。確かに、僕はもともと Box にどういう契約プランがあるのか知りたかっただけで「追加のストレージを入手する」というボタンを押して最初の画面を出したのだが、これはただの情報を紹介するコンテンツではなく、契約プランを変更するための手続きの一部なのだった。