web-dev-qa-db-ja.com

コンテンツ内のタブとネスト

私の意図は、ソフトウェアのインストール手順をユーザーに提示することです。ドキュメントには3つのバージョンがあり、2番目には5つのサブバージョンがあります。

  1. バイナリーインストール(WindowsとOSXのデフォルト、そこでのみ可能)
  2. ソースインストール(Linuxのデフォルト、どこでも可能)

    1. Ubuntu/Debian
    2. アーチ
  3. 開発インストール(どこでも可能)

そして、私はそれが一度に見られる(そしてリンクされることができる)ドキュメントドキュメントの1つの一貫した関連するバージョンだけが欲しいようにしたいです。 「バイナリーインストール」または「Archのソースインストール」

ここに私が持っているものがあります(それはトリミングされているので、波状の紫色のヘッダーを無視します、そして私はすでに2番目のコードサンプルのインデントを修正しました):

nested tabs

(a)長い形式の説明(「ソースからのインストール(…)」)をヘッダーではなくテキストに切り替える必要があること、および(b)バイナリ/ソース/開発タブ間の切り替えが明確でないことを除いて、私はそれが好きです「ノートブックの実行」まですべてを置き換えます。

質問:

  1. 「インストール」セクション全体を切り替えることができることをより明確に示すより良いUXはありますか? (ネストされたタブ領域のように)フレーム/シャドウをその周りに配置すると修正されますが、見た目が悪くなります。
  2. ネストされたタブは一般的に悪い考えではないと思いますが、一部の人は そう思われている です。最初の質問で述べた欠点を除いて、これは彼らにとって有効なユースケースだと思います。同意しますか?
2
flying sheep

2セットのタブを積み重ねているようですね。インストール方法の選択に別のUIを使用することを検討しましたか?ラジアルボタンセレクターを使用してリストにインストールメソッドをリストすることはオプションです。

私はまた、あなたがあなたの説明を持っている一番上のタブの下で、その上に気づいています。タブの背後にある説明を非表示にしています。

説明の横または内部を提供することは、人々が決定を下すのに役立ちます。選択したUIを使用して、ユーザーはタブを選択し、説明を読む必要があります。むしろ、ユーザーは説明を読んで最も関連性の高いものを選択し、そこから先に進むことができます。

ZURB Foundationのダウンロードページを確認してください。名前付きの説明が含まれ、ボタンのみが含まれています。 http://foundation.zurb.com/sites/download.html/

2
mrmac

3つのオプションをユーザーにわかりやすくする

それぞれ簡単な段落で説明されている3つのインストールオプションを含む特定の画面を追加することを検討しましたか?このようにして、ユーザーは3つのオプションが利用可能であることを明確に理解し、適切なオプションを選択し、「戻る」ボタンを使用して次の画面で情報を(タブなしで表示されているとおりに)参照します。

もっと透明になるはずです!

0
Jane Portman