鹿のないメール

この投稿は、Yandexが何百万人ものユーザーと製品インターフェースを作成する方法に興味がある人向けです。 新しいTrinityメールの作成を決めた理由をできる限りお伝えしたいと思います。その理由は、その設計に取り組むきっかけとなり、論理的な問題の解決策をあなたと共有することにあります。



新しいインターフェースの設計者であるアンナコトリャレフスカヤは、インタビューで最も人気のある重要な質問に答えました。







なぜ広告を削除したのか、グループ操作がないのはなぜか、他のサービスへのリンクはどこにあるのか、トピックごとに文字のグループ化を無効にできないのかなどを読んでください。

挑戦する

メールの対象者は、2種類のユーザーに分けることができます。 1つ目は、週に数回だけメールにアクセスし、通知レターを確認するだけの人です：割引について、ソーシャルネットワークからのニュースなど。 2番目-ビジネス目的でメールを使用する人。 彼らはその中で積極的な通信を行い、毎日何十通もの手紙を受け取り、書いています。



最初のタイプのユーザーは、標準のWebメールインターフェイスに完全に満足しています。 彼らは彼の習慣を大いに評価し、変化に敏感です。



2番目のタイプのユーザーにとって、メールの処理速度は非常に重要です。各アクションでクリック数を減らし、コンテキストを失うことなく動作し、長い通信の本質をすばやく理解する能力。 私たち自身がこのタイプに属しているため、私たちは彼らの問題を完全に理解しています。



アクティブなユーザーの問題を解決するために、私たちは新しいメールの開発を始めました-厳格で、高速で、人間工学に基づいた、鹿なし。

分析

標準的なウェブメールでの作業を遅くする主な要因の1つは、文字のリストから特定の文字に、またはその逆に移動する必要があることです。 常にクリックが必要であり、ジャンプするたびにページのコンテキストが完全に変更されます。 画面の文字から文字のリストに戻る必要がなくなると、メールの処理速度を大幅に向上させることができます。



古いインターフェイスのフレームワークでは、次のようにこの問題を解決しようとしました。







他のWebメールでも同じことが行われました。







しかし、これらの決定はすべて明確ではありません。矢印を使用した制御は、それが何であれ、どの文字が転送されるかを理解しません。 最初は矢印しかありませんでしたが、問題にさらに取り組みながら、署名ヒント「前」と「次」を追加しました。 しかし、これは明快さを増すものではないことが判明しました。どの文字が前で、次がどの文字であるかは不明瞭のままでした。 どのように試しても、これらのコントロールは一般的ではなく、タスクを解決しませんでした。



メールのナビゲーションを簡素化する問題の自然な解決策は、1つの画面に文字のリストと文字の両方を表示することです。 これは3パネルのインターフェースです。 また、多くのデスクトップクライアントによって長い間実装されてきました。



ウェブにとって、このソリューションはテクノロジーの違いにより非常に時間がかかりました。 実際、クライアントはユーザーのコンピューターに手紙をダウンロードしてそこに保存します。これにより、メールでの迅速な作業が可能になり、サーバー要求やユーザーからの応答を待つ余地がなくなります。 歴史的に、ウェブはブラウザ、コンピュータのパフォーマンス、インターネット接続の速度など、より多くの要因に大きく依存するため、そのような速度を誇ることはできませんでした。 Web上の複雑なインターフェイスが遅れて表示されるのはこのためです。



多くの場合、このようなWebインターフェイスを設計するとき、デザイナーは多くの問題に直面します。 開発者は「未来」の作り方を考え始めるので、技術的な制限のためにいくつかの解決策と発見を適応させる必要があります。



そのため、3パネルのインターフェイスを使用しました。その技術的な実装の可能性を見つけるずっと前に、私たちはそれを設計し始めました。 開発者の前に「未来を作る」というタスクを設定した後、既存のソリューションの研究を開始しました。 彼らは自分の長所と短所を探し、経験に基づいて最適なソリューションを見つけるためにどのように開発したかを分析しました。



たとえば、Windows 8メールクライアントは、そのミニマリズムと清潔さで私たちにインスピレーションを与えました。







Rambler社の設計者は、メールの新しいインターフェースで、文字に関するグループ操作用の美しい画面を作成しました。







Gmailの3パネルインターフェースでは、「新鮮より古い」という文字の順序でチャット形式で会話が表示されます。 このロジックは、隣接する列で使用される異なる年代順のために私たちを困惑させました。







Apple Mailは、スレッドに対するエレガントなソリューションを示し、一般的に、努力すべき品質レベルの優れたガイドとして役立ちました。







一般に、私たちはさらに以下のような3パネルのインターフェースを12個以上注意深く検討しました。



Microsoft Outlook





新しい見通し





コウモリ





Mozilla Thunderbird





すずめ





Yahoo! メール





GMX





AOLメール

シェルへの最初のアプローチ

2009年モデルのほぼメールに基づいて作成された最初のレイアウトの1つは、次のようになりました。







インターフェイスのいくつかの変更は、メインの開発とともに導入されました。 そのため、たとえば、左側の列のレターカウンターのスタイルが変更され、フォルダーの下線が不要になり、レターのヘッダーが削減されました。 Evaの開発後、文字のリストの外観が変更されました。

3列では不十分でした

そのため、インターフェイスを3パネルにしたため、メールの処理速度を低下させる主な障壁を克服しました。 しかし、ビジネスのやり取りを遅くする別の重要な要因がありました。長い議論を読むには、文字を1つずつ開き、それぞれをクリックする必要がありました。



ほとんどのユーザーにとって、実際に長い通信が行われることはほとんどないため、メインインターフェイスではこのような問題はありません。 スレッドが表示されると、人々は何か新しいことに慣れる必要があり、これは常に苦痛です。 ただし、アクティブな通信のための新しいインターフェースでは、優先順位が逆になります。速度が非常に重要です。つまり、スレッドが必要です。



最初は、通常のチャットのように、スレッドを単一のダイアログとして表示し、開始は上から、終了は下からでしたかったのです。 しかし、Gmailで行われたように、2つの隣接する列の文字の異なる年表が私たちに適していないことを時が経ちました。 この考えを捨てて先へ進みました。



最初の文字が下から、次の文字が上からである場合、メール内の標準的な文字のソートを解除せず、スレッドでサポートすることにしました。 さらに、Apple Mailは私たちにとって非常にうまくいったので、フォローする人がいました。



新しいメールの右側のパネルは次のようになり始めました。







この決定は、その単純さと明快さにおいて驚くべきことです。 それは習慣を壊さず、文字が別々のエンティティのままであることを明確に示し、ユーザーにスレッドを表示するロジックを強制的に理解させません。



スレッドの各メッセージに表示されるメニューもこれに役立ちます。 それが以前占めていた場所はほとんど空でした。 論理的には、スレッド全体を操作するためのコントロールが必要です。おそらく、そうなると時間が経つにつれてそうなります。 しかし、今では、新しいメールはまだユーザーには馴染みがありませんが、そのようなグローバルツールバーの存在はエラーにつながります。人々は文字をグループ化することに慣れておらず、メニューの単一のボタンをクリックすることで、一度に複数の文字で何かができるとは思っていません。 このようなエラーを回避するため、暫定的な決定を行いました。グループ作業コントロールを削除し、スレッド内のすべての文字をアクティブに選択した後にのみ表示します。 このソリューションをさらに開発します。



スレッドを含む最初のプロトタイプを受け取った後、スレッド内の各文字のステータスを表示する必要があることがわかりました。何が読み取られ、何が読み取られないかです。 通信は通常の手紙のように振る舞うべきであるように思われたため、すぐには明らかではありませんでした。 しかし、アクティブユーザーの重要な習慣はサポートされていないことが判明します。個々の文字を未読にしてから、それらに戻るようにします。 スレッド内の複数の文字を未読としてマークする場合、インターフェイスはもちろんフィードバックを提供する必要があります。



さまざまな視覚補助の数をできるだけ減らすために、スレッド内で文字のリストと同じ未読インジケーターを使用することを考えました-テキストを太字で強調表示します。 しかし、彼らはこれが悪い決定であることにすぐに気付きました。 スレッドで文字を読みながら、ステータスが変化するとテキストが「ジャンプ」します。 未読の手紙を新しい方法で何らかの方法で区別する必要があることが判明しました。







その結果、未読メールを選択するために、デスクトップメールクライアントに馴染みのあるポイントを使用することにしました。 彼女ははっきりと見えますが、彼女の失disappearは読書を妨げません。







もう1つの重要な疑問が残っていました。未読のスレッドがいくつかあるスレッドを開くときに、どの文字を表示する必要があるかです。 それらの最も新鮮なまたは最も古い？



最新の手紙の主な議論は、手紙のリストに導かれて、人は送信者の名前とスレッドからの最新の手紙の最初の行を見るということでした。 したがって、ユーザーの期待を維持し、開いているスレッドで表示する必要があるのはまさに彼です-クリックしたものが受信されました。



最も古い未読のものを表示するための議論は、その人が前回停止した場所と同じ場所を表示する必要があるということでした。 いずれかのオプションを選択するのは簡単ではありませんでした。



ソリューションオプションの1つを使用してプロトタイプを作成し、それを実際に使用してみることにしました。 それで、スレッドに何を表示するかを理解するようになりました。いくつかの未読の手紙では、最新の手紙は不可能です。 そのようなスレッドを開くとき、最初から最後まで読むために、その逆にではなく、毎回それを正しい場所にスクロールする必要がありました。



2番目のオプションはより成功しました。 ここでは、基本原則がうまく機能することがわかりました。ユーザーがインターフェイスを離れた状態でインターフェイスを表示する必要があります。 スレッドが開かれたときに、最も古い未読の手紙が表示された次のプロトタイプに絶対に満足しました。

再び挑戦

そのため、インターフェイスの基本的な動作にすでに満足しています。 それは、千の見た目の詳細と相互作用のニュアンスを変えるために残った。



作業の特定の段階で、タスクにもう1つの要件を含める必要があることを理解しました。新しいメールはデスクトップアプリケーションの印象を与える必要があります。 そして、デスクトップ品質に到達しないパラメータを正確に分析し、差異を排除するという目標を設定しました。

解決策

手紙のリスト

新しいメールはすべてのWebキャノンに準拠する必要があるハイパーテキストページではなく、単一画面のデスクトップアプリケーションであることを強調したかったため、文字のリストのリンクは黒に変わりました。

「ハット」

画面上に非常に多くの3つのパネルがあるインターフェイスは、Yandexサービスの標準ポータル「ヘッダー」の高さに明らかに適合しませんでした。







そして、私たちはそれを切り始めました。 まず、このように：







次に、このように：







そして、このように：







同時に、新しいメールではニュートラルな黒とグレーの色が非常によく合うため、できるだけ落ち着いていて、目に刺激を与えないことがわかりました。



正直なところ、このような「キャップ」の削減は簡単ではありませんでした。 実際、多くのYandexサービスの「上限」が統一されているため、人々はポータルをより簡単にナビゲートできます。 さらに、彼らはYandexの関連サービスに精通し、それらを使用し始めるのを助けます。 要するに、ポータルメニューサービスを奪うには、いくつかのリスクを認識する必要があります。



それでも、この変更を決定しました。最初は、新しいメールをインターフェイスとして扱いませんでした。すべてのユーザーのプライマリとしてインストールを開始します。 しかし、インターフェースがそれ自体でポピュラーになった場合、ポータルメニューに戻ります。

左の列

スペースを節約するために、そこからバナーを削除して、左の列の幅を減らしました。 さらに、これによりタグのリストが進化し、混雑することがなくなり、バナーに取って代わりました。







次のメールが判明しました。

ノイズと不正確さを取り除きます

何らかの理由で、私たちのインターフェースは未検証で冗長なカードの家のように見えました。 デスクトップインターフェイスは、機械的なタイプライターのように、中立で安定しており、従順です。 このようなインターフェースは、プラスチックで分離することはできず、堅固でなければなりません。 ブロックには、けいれんやジャンプする権利はありません。各ブロックには、厳密に定義された場所が必要です。 整頓はこの点で重要な役割を果たします。目が強調できない場合、必要なものに焦点を合わせ、ランダムな線やグラフィックノイズにつまずくと、全体像が崩壊します。



ノイズのみを慎重に取り除き、情報のみを残しました。 バランスを見つけるのは簡単ではない場合がありました。製品はメールを使用したアクティブな作業用に作成されたため、多くのオタク機能が残っているはずです。 したがって、たとえば、手元にある文字のリストにチェックボックスを残しましたが、文字間の水平セパレーターは不要として破棄されました-モジュラーグリッドの助けがあれば、文字自体は完全に分離されます：







デスクトップの安定感を維持するために、ブロックをぴくぴくさせたりジャンプさせたりする可能性を排除しようとしました。 ここでのルールは単純です。ページに何かを表示した場合、完全にロードされるまで、同じ場所に残り、同じサイズを維持する必要があります。 ここのすべてが最初のバージョンで実装されたわけではありませんが、私たちは仕事を続けています。



最新のデスクトップアプリケーションでは、文字のリストにチェックボックスはありません。 そして、私たちのインターフェースはチェックボックスをより重くし、複雑に見せます。 Webインターフェースがそれらなしでも実行できることは明らかです。システムを操作可能な状態に保つために、それらを置き換える方法について考える必要があるだけです。 人々がチェックボックスなしで複数の文字を割り当てることを許可する方法を理解する必要がありました。



ここで、私たちは再び人々のデスクトップ習慣を使用することに決めました。Shiftキーで多くの文字を選択し、リストでマウスを押したままにします。 この動作が、ユーザーが慣れているドラッグアンドドロップと交差しないようにする方法を検討したので、プロトタイプに実装しました。



ちなみに、ここでの1つのニュアンスは未解決のままでした。Ctrlを押して文字を選択することを敢えてしませんでした。 おそらく近い将来、これを決定するでしょう。すべてのインターフェースによって、文字のリストの要素がリンクではないことをすでに示しているため、標準的なリンク動作を期待しないでください。 ここでは、新しいダブルクリックタブで文字を開くことが既に適切であり、アプリケーションとの類似性を描きます（はい、それは明らかではありませんが、必要ではありません）。



もちろん、チェックボックスの分離は簡単な決定ではありませんでした。 チェックボックスの置換は明白ではないことがすぐに明らかになり、いくつかの文字を強調表示する方法を見つける前に、人はつまずきます。 ただし、起動前に1つのポイントでのみチェックボックスのインターフェースを奪うことが可能であることを明確に理解しました。 後でこれを行うことはできません。人々は習慣を身に付け、インターフェースから一定の期待を抱きます。 そして、発売時には、ユーザー向けのインターフェース全体が新しく未知のものです。習慣も要件もありません。もっと余裕があります。 チェックボックスがなかったため、デスクトップアプリケーションに一歩近づき、ノイズの量を大幅に減らすことができました。



ブラウザウィンドウでおなじみのデスクトップロジックを感じることは、予想外に良かったです。

おわりに

そのため、次のタスクに直面しました。



1.各アクションでクリック数を減らし、コンテキストを失うことなく作業を確保し、長い通信の本質をすばやく理解する機会を与えます。



2.新しいメールは、デスクトップアプリケーションの印象を与えるはずでした。



すべてのタスクが解決されたようで、プロジェクトチームはこれに同意しました。 もちろん、インターフェイスをより強固でマテリアルにするために、まだ磨かなければならないことがあります。

PS

私たちは、すべてのジョイントとその要素の接続に引き続き取り組みます。 作業のこの部分は、多くの場合Webインターフェースで過小評価されたままであり、製品の全体的な雰囲気に大きく影響します。







入力の境界は背景色にうまく適合します。



キャップは、素材の表面を暗示する軽い質感を持っています。



帽子はその下にある影の性質から明らかなように、郵便物全体の上にあります。 スペースの組織化の明確な物理モデルがあります。







文字には明確な境界線と影があり、文字と背景を明確に区別しています。







表面はより硬くなり、そのジョイントはよりシャープになります。



それまでの間、これに取り組んでいます。 新しいメールをベータモードで試すことができます。