アクセス制御を備えたタブのUXの改善

Question

以下の例のようなタブメニューが使用されたとしましょう。

各タブにはアクセス制御があります。一部のユーザーはすべてのタブを表示でき、一部のユーザーは一部のタブしか表示できませんが、すべてのユーザーは少なくとも1つのタブに対する権限を持っています。

問題を複雑にするために、各タブは1つの大きなプロセスの一部です。たとえば、ページに複数のタブがある場合、最初のタブはプロセスの最初の部分に使用され、2番目のタブは2番目の部分に使用され、最後のタブはプロセスの最後のステージに使用されます。

アクセス制御は、各タブに関与するユーザーを制御するために使用されます。

ユーザーがこれらのページ/タブにアクセスできないようにする場合、この種のシステムの良いユーザーエクスペリエンスとは何ですかたとえば、ユーザーがアクセスできないタブを削除する必要がありますか？タブを削除する際の問題は、タブの連続性が壊れることです。

問題を説明するために、簡単なプロトタイプが作成されました。

URLのクエリ文字列「user」は、現在のユーザーを設定するために使用されます。

この例に示すように、アクセス拒否ページは正しく機能しており、正しいユーザーのみがアクセスできます。ただし、ユーザーエクスペリエンスは良くありません。ユーザーは、これがなぜ起こっているのか混乱し、システムエラーが発生したと考えている可能性があります。

アクセス拒否メッセージを各ページに含めることにより、改善の可能性があります。

Mike Mark · Answer

ページにアクセスできないユーザーは、ページをクリックすることはできません。ユーザーにボタンのクリックを許可すると、後でコンテンツにアクセスできないことをユーザーに伝えるだけで、ユーザーの不満を募らせたり、デザインの信頼性を低下させる可能性があります。

いくつかの提案：

タブをプロセスのように見えるようにする（おそらく矢印が付いている）か、少なくともタブに名前を付けることをお勧めします。1.プロセス1 2.プロセス2など.
クリックできない要素は、異なるスタイル（たとえば、灰色）にするか、追加の要素（たとえば、ロック）を追加して、ユーザーがクリックする前にアクセスできないことをユーザーに明確にする必要があります。
すべてのアクティブな要素をホバー状態にすることを検討してください。ユーザーがアクセスできない要素にホバー状態を追加しないでください。
非アクティブな要素で、ユーザーがホバーしているときにタッチデバイス上にモーダルを追加し、ユーザーがそれをタップすると「プロセスのこのステップにアクセスできません」のようなメッセージが表示されます

そんな感じ： -

Justin · Answer

ユーザーが進行状況の追跡に関心がある場合は、多くの場合、読み取り専用アクセスが妥当なオプションです。たとえば、タブをクリックすると、次のようになります。

もちろん、それはアクセス制御の理由に依存します。誰かの名前の代わりに「購入」のようなものを持つ方が理にかなっているかもしれません。