Zenn のボタンの機能・役割の再定義を試みました。
目標は「ボタン」に関するコンポーネントの適切な使用法を明確に定義することで、エンジニアが画面を実装する際に迷わずにそれらを選択できるようになることです。
「ボタン」 における課題
Zennにおけるボタンは大きく分けて２種類の外観があります。
- テキストの外観のボタン
- テキストとそれを囲む矩形の外観のボタン
テキストとそれを囲む矩形の外観のボタンの見た目は、ステレオタイプのボタンのイメージかもしれません。
一方で、テキストの外観のボタンはメトロUIやフラットデザインの登場と共に一般に普及したと考えることができます。
主な課題は、これら二つの外観のボタンをどのように使い分けるべきか判然としないことです。
ソースコード上の分類を確認
Zenn では、上記の２種類のボタンは下記のコンポーネントで表現可能です。
テキストの外観のボタン
-
Buttonコンポーネントの'text'type -
TextAnchorコンポーネント
テキストとそれを囲む矩形の外観のボタン
- Button コンポーネントで
'text'type 以外 （例：Primary）
submit か ページ遷移かで使い分ける （→ 不採用）
そのオブジェクトが持つ機能的な役割で分類できないか検討し、以下の仮説を立てました。
- submit 系の操作を行う場合はテキストとそれを囲む矩形の外観のボタンを使用する
- 遷移（リンク）をする際はテキストの外観のボタンを使用する
しかし、チームメンバーへのレビュー依頼の結果、遷移（リンク）の場合でも矩形を伴った外観のボタンを使用したいケースも存在すると指摘を受けました。
むしろ、役割よりもそのオブジェクトが持つ重要度で使い分けたいというフィードバックもいただきました。
ボタンの重要度に応じて使い分ける （→ 採用）
フィードバックを踏まえて、そのオブジェクトが持つコンテキストに基づいた柔軟な指針を作成することが必要であると考えました。柔軟性を保ちつつ、ユーザーが迷わずに操作できるようにするために、一定の指針を設けることができると考えます。
ただし、指針を厳格にしすぎることで融通が利かない仕組みを作りたくないということも理解しています。そのため、特定の状況に応じて適切なコンポーネントを選択できるようにすることが重要です。柔軟性と使いやすさを両立し、ユーザーエクスペリエンスを向上させるためのガイドラインを作成することを目指します。
以下の原則としました。
- 重要度の高いボタンにはテキストとそれを囲む矩形の外観のボタンを適用する
- 重要度の高くないボタンにはテキストの外観のボタンを適用する
理由としては、矩形の外観のボタンは矩形部分にカラーが適用されているため、より目を引く外観のためです。
重要度はどのように決定されるか
エンゲージメントにつながる度合いが高いほどに、重要度が高いと定めました。
エンゲージメントの意味はコンテキストに応じて変わりますが、その都度に判断を行います。
ボタンの矩形の持つ役割
ボタンの矩形部分は、テキストの外観のボタンと比較してクリック可能な領域が大きいことに貢献します。
よって、クリックしやすいことになります。これはエンゲージメントの向上にデザイン面で貢献をします。
ボタンにアタッチされるアイコン
Zennではボタンの右側に矢印が配置されることがあります。矢印にはバリエーションがあります。これらを改めて下記のように定義しました。
- →: リンク（画面遷移）する際に使用する
- ↗️: リンクが別タブで開く際に使用する
-
↓: 画面に対して下方向にアンカーリンクする際、または表示された項目を「さらに表示する」ような操作の際に使用する
- 「さらに表示する」ような操作の際に使用する理由は、それが画面遷移でないことを明示するため
- ↑: 画面に対して上方向にアンカーリンクする際 に使用する
また、アイコンをアタッチする/しないの指針は下記としました。
- アイコンは必ず配置しなくても良い。クリックした際に起こる挙動をより明示したい際に配置する
- アイコンを配置しない場合に、起こる挙動が唐突だと想定される際
- アイコンを配置しない場合に、考えられるいずれかの挙動の中のどれに該当するか不明と想定される際
動的文字列リンクと文中リンクの整理
テキストの外観のボタンとは分離して整理すべきテキストのリンクがあります。
下記がそれらに該当します。
- 動的文字列リンク
- 文中リンク
これらはクリック可能なテキストであるため、インタラクションの可能性を示す外観を持ちます。以下はその特徴です。
- 文字に色を付ける（color: link-primary）
- 文字に下線を付ける
- 文字を太字にする
これらのバリエーションの適用にあたり、以下の原則に決定しました。
コンテンツ（記事）内のリンク、またはリンクを目立たせたい時
→ 文字リンクに色を付ける（color: text-link-primary）
文中のリンクをさほど目立たす必要がない時
→ 文字リンクに下線を付ける
ユーザー名、記事等のタイトル
→ 文字リンクを太字にする
この決定に伴い、上記の整理との乖離のある箇所の修正を行いました。
例えば、下線のタイプのものでもdot形式のものがあったので、通常の下線に統一しました。
結びと考察
今回のボタンの定義の明確化は、既存のUIに大規模な改修をもたらすことはありませんでした。しかし、得られた成果としては、より明確で柔軟な基準を策定することで、今後の開発の効率化が期待できることです。
文中でも触れましたが、フラットデザインの普及以降、デザイナーたちはインタラクティブなテキストの外観や振る舞いについて悩んできました。今回、リンクの概念と合わせてボタンやテキストを整理する試みを行いましたが、私が調べた情報からは明確なガイドが見つかりませんでした。
もしかすると、現実世界とウェブ（画面）におけるメンタルモデルが一致しないことに原因があるかもしれません。例えば、ボタンは現実世界にも存在しますが、ドキュメントマークアップにおけるリンク（遷移）の振る舞いは現実世界には存在しません。
結果として本稿でご紹介した Zenn 独自のアプローチを一時的に確立しました。
この取り組みが、他のプロジェクトやデザイナーにとっても参考になれば幸いです。
Discussion