インターフェイスデザイナーとして、私たちの仕事は見栄えが良く、理解しやすいものにしたいのです。 画面上の各要素は目を愛すべきであり、同時に、インターフェイスは単なるオブジェクトではありません。 彼らは動作するはずです。 インターフェースは情報を提供し、実行可能な方向を明確に示す必要があります。 これらの2つの側面-性的魅力と機能性、魅力とシンプルさ、デザインと重要性-は、しばしば経験豊富なデザイナーと共存します。 しかし、それがどのように見えるかと、ユーザーがそれをどのように認識するかとの間には、まだ対立の危険性があります（ 彼らは、顧客についてのみであり、人々について考えるのではありません...-声に出して考えてください ）。 私は最近、 GitHubサービスの設計と価値の間のこの種の矛盾に注意を喚起しました。
基本的なGitHubナビゲーション
GitHubにログインすると、ヘッダーの右側に一般的なナビゲーションメニューが表示されます。 ナビゲーションユニットは角丸長方形で囲まれています。
ブロック全体をリンクする長方形を見てください。 背景は水色で、周囲は灰色の枠で制限されています。 境界線と背景は装飾的です。 ブロックを様式化し、視覚的な魅力を高めます。 これらの要素の装飾性を確認しやすくするために、元のバージョン（上）と境界線と背景のない新しいバージョン（下）の比較を行いました。
両方のオプションは目を楽しませてくれ、それらの機能は同じように見えます。 あなたはそれらの違いはむしろ美学であると言う権利を持っています。 しかし、もう1つあります。 リンクを結合する決定は、より深いです。 装飾的なコンテナは実際にリンクの意味を変え、後で見るように、GitHubの問題につながります。 その理由を理解するには、まず要素の組み合わせがユーザーのデザインの認識にどのように影響するかを調べる必要があります。
コンテナは、結合されたアイテムの値を変更します
コンテナ内にリンクを配置すると、コンテナとリンクの間のリンクが想定されます。 技術的に言えば、あなたは他の一部を作ります。 より身近な例として、Webアプリケーションでよく見られる編集リンクを見てみましょう。
2つの編集リンクは、それぞれのコンテナーで結合されます。 ユーザーは、リンクがMichaelの名前と同じセルにあるため、トップリンク「edit」がレコード「Michael Bluth」を編集することを期待しています。 編集リンク自体は同じです。 違いはコンテナにあります。
では、これはGitHubでのナビゲーションにどのように関係していますか？ リンクの問題（「リポジトリ：すべて」）。 GitHubは何千ものオープンなリポジトリをホストしており、誰でも、誰でも利用できます。 同時に、各ユーザーは独自のリポジトリを持つことができます。 そしてここで、ナビゲーションの設計にあいまいさがあります。
ナビゲーションブロックがフレーム化されると、「すべて」のリンクがアクティブユーザーのフレームワーク内に囲まれているように見えます。 リンクにより、このユーザーのみに属するすべてのリポジトリが表示されるはずです。
これをフレームレスバージョンと比較してください。 ここで、「すべて」というリンクがMichaelのリポジトリのリストにつながるのか、それとも絶対にすべてのリポジトリのメインリストにつながるのかは、それほど明確ではありません。
最初、GitHubナビゲーションユニットの周囲のフレームは、スタイルの問題としてのみ見られました。 審美的な決定は、ユーザーによるデザインの理解にも影響を与える可能性があることがわかりました。 GitHubの場合、フレーム化されたリンクによって作成される期待は、実際の動作と一致しません。 [すべて]リンクをクリックしても、現在のユーザーのリポジトリのリストは表示されません。 代わりに、すべてのユーザーのパブリックリポジトリのメインリストに自分を見つけます。 アクティブなユーザーのリポジトリのリストを表示するには、アバターの横にある名前をクリックする必要があることがわかりました。 賢く！
申し出
混乱をなくすために、どのように設計を変更できますか？
[..]-記事の著者によって提案された「再設計」の最初のバージョンは、特に以下と比較して率直に悪いため、省略されています。 あたり
オリジナルの装飾フレームを保存し、「オーサーシップ」を使用して明白なロジックを「上回る」ことができます。
このオプションは、「すべて」と「私の」という2つのリンクを使用して、すべてのリポジトリのメインリストとアクティブユーザーのみに属するリポジトリのリストを分離します。
GitHubは素晴らしいサービスです。 そして、私は間違いを見つけることを知っています。 しかし同時に、ユーザーインターフェイスの設計は微妙な問題です。 デザイナーとして、目のためにデザインするとき、脳のためのデザインを忘れることがあることを認識しなければなりません。 これらの例が、装飾的な要素とインターフェイスの意味を変える要素との境界線をよりよく感じるのに役立つことを願っています。