♏️ 🤙 👰 新しいMail.ruメールとタコはそれと何の関係があるのか 💗 🏥 🛄

Mail.ruは昨年、20歳になりました。その存在の間に、製品のWebバージョンは何度も変更されました-完全バージョンは7つしかありませんでした。時には技術的な部分だけに触れ、時には外観を著しく変えました。しかし、変更が理由で起こらなかったたびに-製品を開発し、より速く、より便利に、よりモダンにしています。

_{新しいデザインの文字のリスト、2019}

_{新しいデザインの手紙を読む、2019}

10年前の2009年、彼女は次のように見えました。

_{メール、2009}

_{メール2011}

Mailの2014バージョンは、カレンダー、メール、クラウドの3つの製品の統合の一部として登場しました。各サービスは独自の問題を解決しますが、同時に完全に補完します。これは特定の問題を解決するための強力なツールセットであり、当社では生産性サービスと呼んでいます。

_{メール、2014}

WebバージョンのMailと並行して、製品のモバイルアプリケーションが積極的に開発されていました。モバイルオーディエンスは驚異的なペースで成長し、Webオーディエンスとの明らかな交差点が明らかになりました。つまり、人々は自宅または職場でWebバージョンを使用し、外出先ではモバイルアプリケーションまたはモバイルWebバージョンを使用できました。製品の次のステップが明らかになりました-すべてのプラットフォームで単一のビューに移動する必要がありました。

変更のもう1つの重要な推進力がありました。会社のロゴとコーポレートアイデンティティは10年間あまり変化しませんでしたが、外観を更新したいという強い要望がありました。そこで、新しいスタイルを試すことができる旗艦製品の再設計とともに、会社のブランド変更というグローバルなタスクを得ました。

最初のコンセプト

すべてはチーム内の製品名から始まりました。ギリシャ数字を使用してバージョンを呼び出すという面白い伝統があります。そのため、このプロジェクトは8番目のバージョンであったため、Octaviusと呼ばれました（ギリシャ語のoctōは「8」を意味します）。

これはタコという言葉と一致しているため、ダウンロードの現在のベータ版ではタコを見ることができます-これは一種のプロジェクトのマスコットになっています。興味深い事実-タコは、1998年の最初のバージョンのポストに、手の数に起因する多数の文字に対処する郵便配達員のイメージとして登場しました。

私たちは、すべてのプラットフォームで同じになるようにMailのWebインターフェースを作り直すという重大な課題に直面しました。そしてそれにより、会社の他のすべての製品に新しいアプローチを確立します。

どの方向に進むかを決定するために、Double-Diamondアプローチを使用しました。最初に解決策の選択肢に同意せず、次に特定の解決策に絞り込むと、適切な結果が得られるまでそのようなアプローチがいくつかあるかもしれません。

最後に一つのことを残すために、もっと面白いコンセプトやアイデアを得る必要がありました。この世代では、すべての部門のデザイナーが集まって1つの問題を解決するときに、デザインセッションを使用しました。このアプローチは会社でよく使用されます。タスクをより深く掘り下げるのに役立ち、デザイナーはメインの作業プロジェクトを思い切って切り替えます。

_{アイデアの1つのプレゼンテーション中のデザイン部門。}

最初に、各デザイナーがタスクを単独で引き受け、制限なしに新しいメールインターフェイスの独自のバージョンを作成しました。それで、かなり多くの異なるコンセプトを得ました。私たちはすべてのアイデアを検討し、強力なアプローチを残し、同様のオプションを組み合わせました-これがいくつかのチームの形成方法です。

ポップアップのコンセプト

最初のグループは、手紙または手紙の執筆がポップアップウィンドウで開かれた場合に何が起こるかを想像することにしました。実際、デスクトップでは、ほとんどの場合、文字のリストを使用して作業が行われます。これはユーザーのメイン画面です。残りは追加の画面とその状態です。

_{さまざまなプロジェクトとさまざまな画面の概念図。}

メイン画面からユーザーを引き離すことはせず、代わりにポップアップを介してすべての問題を解決する機会をユーザーに提供することにしました。

たとえば、ユーザーは文字のリストを無限にスクロールし、ポップアップウィンドウに新しい文字を書き込んで、以前と同じ文字のリストの状態に戻ることができます。

スライス、スライド、スクロール

会社のWebサイトには、ポータルナビゲーションを備えたブロックがあり、すべてのプロジェクトへのリンクが含まれています。この構造を修正し、製品にすべてのページスペースを与えると考えました。すべてをモジュールに分割し（スライス）、モジュール上で移動する機能（スライド）を使用して水平に構築し、最初にすべてのプロジェクトのリストを作成します。同時に、通常の動きを垂直面に残します（スクロール）。

Slice、Slide＆Scrollは、ビジュアルの拡張性とコントラストに関する私たちのチームの大胆な見た目です。当初から、彼らは自分自身を制限せず、「すべてのお金」について空想していました。一部のソリューションは「コンセプトカー」のフレームワーク内に残りましたが、チームは何十ものインターフェースのトリビアと微小アニメーションを考え出し、タイポグラフィと「空気」を実験しました。これは特定のタスクだけでなく、他のプロジェクトにも影響を及ぼしました。

フレックスとタッチ

2つの異なるチームを開始した2つのアプローチがありましたが、非常に類似した結果になりました。

Flexのアプローチは順応性に優れていました。どのデバイスでも製品がどのように見えるかは明らかでした。同時に、実際のデータとビジネス要件が考慮されました。つまり開発に関しては、最も現実的であることが判明しました。

別のアプローチ（Touch）は、3列モードとフォルダーのある狭い列の便利なビューで外観を補完しました。これにより、インターフェイスに柔軟性が与えられ、特定の画面解像度でのスケーリングのギャップが埋められました。

このアプローチの重要な利点は、多くのモバイルパターンを使用したことです。たとえば、明示的に拡大されたブロックサイズは、Web上のインターフェイスをタッチ使用に適したものにしました。追加の衝動は、タッチコントロールをサポートするデスクトップデバイスの外観でした。つまり、インターフェイスを使用すると、タブレットや電話だけでなく、あらゆる場所で指を制御するのに便利なはずです。

新しいインターフェースの原理

設計セッションの結果に基づいて、組み合わせたアプローチを得ました。FlexとTouch.Mail.ruのアプローチを基本とし、他の概念からの成功したソリューションを補完しました。有名な漫画が言うように、私たちは行われた作業から多くを理解し、新しいインターフェイスを組み立てる設計原則を策定することができました。

適応性：Webバージョンのメールは、デスクトップから携帯電話まで、すべてのデバイスで利用できる必要があります
汎用性：外観は特定のタスクに適応します
効率性：インターフェイスを1つのウィンドウで操作し、使い慣れたタスクで作業を加速する機能
関連性：状況のコンテキストを維持し、必要なもののみを表示する
清潔さとシンプルさ：視覚的ノイズと余分な要素の減少
インターフェースのインテリジェンス：ユーザーの日常的なタスクを解決するMailの機能。

インターフェイス適応性

あらゆるデバイスで統一されたユーザーエクスペリエンスを維持することが重要であったため、インターフェイスの適応性は非常に重要でした。タブレットまたはデスクトップの後にモバイルブラウザでメールを開いたときに不快感を感じることはありません。コントロールはすぐに画面に表示されます。

_{手紙のリスト。}

古いメールでは、デスクトップ、携帯電話、タブレット用の3つのWebバージョンのプロジェクトを一度にサポートしています。次に、単一のビューを表示します。

製品は非常に複雑であるため、タスクは簡単ではありません。したがって、ベータ版では、インターフェイスはタブレットバージョンのビューポートにのみ適合します（ユーザーに表示されるWebページの領域はタブレットの解像度に等しくなります）。モバイルビューポートへの適応はすでに進行中ですが、現時点ではこの形式で古いバージョンを示しています。

インターフェースの汎用性

Web内で単一のインターフェイスを作成するだけでなく、モバイルアプリケーションと接続する必要があったため、デフォルトでは、インターフェイス要素が大きくなり、タッチスクリーンを備えたラップトップや大型タブレットでも指で快適にクリックできるようになりました。これにより、すべてのデバイスで単一の次元を維持できます。

しかし、デスクトップ解像度の多くのユーザーにとって、画面上の情報量が重要であることがわかっているため、インターフェイスのコンパクトな表示も残しました。

コンパクトバージョンは常にインターフェイスにあります。これは生産的な作業の重要なポイントです。しかし今では、この種のロジックは十分に開発されており、設計システムの一部になっています。ビューの変更は、メール設定で利用できます。

外観設定では、文字を使用した作業を高速化する必要があるユーザー向けに、別のビュー（文字列のあるビュー）も使用できます。調査のおかげで、生産性を重視するユーザーは、たとえばMicrosoft Outlookに頻繁に切り替わることがわかっています。これは、手紙のリストと公開レターの両方を見ることができる特定の表示モードがあるためです。

Mail.ru Mailの古いバージョンでは、以前はこのように見えていましたが、pro.mail.ruと呼ばれ、個別に存在し、最終的にはインターフェースを簡素化しようとして失われました。メールボックスの設定で簡単に見つけることができます。

インターフェース性能

膨大な数のユーザーがビジネス目的でメールを使用していることを知っています。そして、今日のメールの通信のほとんどは、単なるビジネス通信です。

以前は、手紙を書いて同時に手紙のリストを使用するために、新しいウィンドウで文章を開く必要がありました。同じことが、同時に複数の文字を書く必要があるときに起こりました。

Mailの現在のバージョンに関するUXの研究では、人々が新しいブラウザタブで手紙を書くのをよく見ました。したがって、私たちは、ある人が自分のメールボックス、たとえば特定の手紙からの情報を必要とすることをすぐに期待しました。また、一度に複数の文字を書く必要がある場合に備えて、ウィンドウに折りたたみの可能性を追加しました。

これはすべて1つのウィンドウで実行でき、いつでも文字のリストに戻り、文字を折りたたんだり展開したりできます。複数の文字を一度に書くこともできます。つまり、人をどこにでも連れて行くのではなく、1つのウィンドウですべてを実行する機会を与えます。

文字のフィルターも作成できます。手紙から直接利用でき、ポップアップウィンドウで開き、別の画面に人を連れて行くことはありません。将来のバージョンでは、ウィンドウを最小化する機能も追加します。

インターフェイスの関連性

私たちの状況に関連するのは、不必要なものを切り離し、必要なものだけを残し、重要なものを強調する能力です。

たとえば、上部の青いメニューでこの原則を使用しました。新しいバージョンでは、文字で基本的なアクションが含まれるようになり、現在必要なものだけを表示するためにコンテキストになりました。

たとえば、公開レターを開いている場合、そのレターのメインアクションがメニューに表示されます。

複数の文字を選択すると、グループアクションのセットが表示されます。

モバイルアプリケーションを介したメニューとのこの相互作用を知っています。これにより、プロジェクトは、無限のメニューレイヤーを備えたWebサイトではなく、本格的なWebアプリケーションのようになります。

インターフェイスをオフロードするために、文字のリストを使用しました。たとえば、特定の文字を選択するためのチェックボックスを削除することにしました。チェックボックスはより明白に見えますが、特にこのようなパターンがモバイルアプリケーションで既に定着しているため、明るさを選択することにしました。

これは、成熟した製品の進化のまさに例です。いくつかのことが明らかになり、それらを削除しようとすると、すべてが機能します。

手紙の見出しがよりコンパクトになり、内容がより高くなり、メッセージの発信者ではなく、メッセージ自体が強調されています。これは、インスタントメッセンジャーへの参照と見なすことができ、同様のロジックに従って通信が機能します。

すっきりしたシンプルなインターフェース

インターフェイス要素自体を使用して、視覚的なノイズを減らしました。背景のないボタンスタイルを導入しましたが、それほど重く見えません。この傾向は、コンテキスト自体がボタンの目的を促すモバイルアプリケーションから生じました。背景または下線は省略できますが、アクションは引き続き読み取られます。

製品は絶えず成長し、時々断片的に変化するため、スタイルに混乱が現れ、色が多すぎて色合いが異なっていました。どちらの色を使用するかを把握するのは容易ではなく、作業が複雑になりました。

8番目のバージョンでは、パラダイムデザインシステムをサポートしました。これにより、わずか9色で管理できるようになりました。

インターフェースのインテリジェンス

最新のメールは本当に賢く、さまざまな方法でユーザーを支援します。そして、強力な機械学習チームが私たちを助けてくれます。

すべての電子メールクライアントは、スパムだけでなく、私たち自身が購読している多数のメーリングにも苦しんでいます。それらは非常に便利ですが、同時にメールに混乱をもたらします。

新バージョンでは、レターのリストで直接開くことができるスマートフォルダーに隠されたメールを使用して、メタトレッドを作成しました。とても重要な手紙、例えば、人々との通信は、多数の郵送物の間で失われません。

機械学習は手紙への回答を助けてくれました。これで、すぐに送信できる既製のフレーズを提供できます。常に3つのオプションがあります：ポジティブ、ネガティブ、ニュートラル。

テスト中

テストプロセスはいくつかの段階に分けられ、各段階で特定の人々のサンプルと問題の解決方法を確認しました。

実験室でのUX研究

新しいインターフェイスで使用した原則がどのように機能するかを確認する必要がありました。 UXラボでの一連の研究がこれを助けてくれました。

調査のために、特定の回答者を集めました。1つはWebバージョンのプロジェクトのみを使用するグループ、もう1つはモバイルアプリケーションを追加するグループです。 Webインターフェースには多くのモバイルパターンが含まれていたため、さまざまなタイプのユーザーでそれらをテストする必要がありました。

_{テスト中の調査アナリストの回答者。}

すべての回答者は、基本的なタスクを実行しました。たとえば、手紙の作成、手紙の強調表示、手紙への返信などです。標準的なシナリオを新しい機能を備えたタスクで希釈しました。たとえば、2文字の同時書き込み、レターへの既製の迅速な応答の使用、レター内の送信者のフィルターの直接作成などです。

すべてのイノベーションの中で、最も問題となるのは、アバターによる文字の割り当てです。特に、このようなソリューションが長年使用されているモバイルアプリケーションに慣れていないユーザー向けです。アプリケーションの経験から、ユーザーは時間が経つにつれて、この文字の選択に慣れ、新しい旅行を教えるために慣れていることを知っています。すべての文字を選択するための明示的なボタンと使用開始時のヒントを表示することにより、インターフェイスを補完しました。

また、新しい形式の手紙を書くことにも困難がありました。そこでは、手紙の件名と受取人のフィールドを入れ替えようとしました。そのため、文字を読むときにスペルはフィールドの構造を繰り返しましたが、習慣の回答者は文字の件名に宛先を入力しましたが、ほとんどの人は何かを入力するときに画面を見ていないため、インターフェイスのプロンプトは役に立ちません。その結果、古典的なフィールド順序を返しました。

主なシナリオでは、これ以上問題は発生しませんでした。回答者は、新しいメールの外部を積極的に評価し、インターフェイスの清潔さとシンプルさについて、メールクライアントのモバイルアプリケーションとデスクトップアプリケーションと比較して、これを達成しました。

企業ユーザーのテスト

Mail.ru Groupは巨大なスタッフを抱える大企業であるため、同僚は新製品を最初に目にし、有益なフィードバックを受け取っています。ほとんどの場合、Mailが主要な作業ツールであるため、このシナリオは経験豊富なユーザーにとって適切なテストとなり、基本的なスクリプトだけでなく、ツールセット全体で問題を確認できます。

製品を中に見せて、私たちは多くの願いを受け取りました。たとえば、最初のアプローチでは、文字を書くためのボタンはコンテキストに応じて表示され、リスト内の文字の検索または選択に切り替えると非表示になりました。このボタンへの常時アクセスの必要性は、プロのユーザーにとって重要なポイントです。常に利用可能であるべきであるという事実を認識し、私たちはそれを達成しました。

同社には膨大な数の異なるモニターとラップトップがあるため、順応性をテストしました。すぐに、私たちが持っていた国境の許可に関するフィードバックを受け取り始めました。

この段階では、ビュー設定を開始せず、デフォルトで大きなビューを表示しました。経験豊富なユーザーの間で最も重要な要求は、コンパクトなディスプレイを返すことでした。その後、このオーディエンスに座りたくない場合は、この種のものをできるだけ早く行う必要があることが明らかになりました。

また、企業ユーザーは、手紙を積極的に使用するときに慣れるささいなことにすぐに注意を向けました。たとえば、人は添付ファイルについて手紙に書きますが、添付しません。以前は、添付するのを忘れたかどうかを尋ねましたが、新しいバージョンでは見逃していました。そのため、ユーザーは再び同様の間違いを犯し始め、それについて私たちに話しました。

ベータ版コミュニティ

企業環境でのテストは一方的です。なぜなら、これらは仕事で製品を積極的に使用する経験豊富なユーザーだからです。 UXラボでは、普通のユーザーに会いますが、定量的な結論を出すための選択は非常に限られています。そして、私たちは普通のユーザーにとって好きではなかったものや欠けていたものを見つける必要がありました。そのため、次のステップはベータコミュニティでのテストでした。すべてのメールユーザーがベータコミュニティに接続して、メインインターフェイスに到達する前に新機能をテストできるようにします。

たとえば、レターを翻訳するために多くのリクエストを受け取ったため、延期したかったのですが、状況を確認し、インターフェースに少し速く追加しました。

フォルダーの作成への移行が十分ではありませんでした-古いバージョンでは、フォルダーのリストにリンクがありました。この機会を返しましたが、プロセスを加速しました。これで、リスト内にフォルダーを直接作成し、ポップアップウィンドウを上げて、以前のように別のページに移動することができます。

また、新しいインターフェイスに関する意見を聞くために、新しいユーザーの調査も開始しました。とりわけ、ユーザーは、デザイン、デスクトップクライアントに近いこと、メールボックスの外観をカスタマイズできること、文字の無限のスクロールが気に入っていることに気付きました。

たとえば、多くの場合、新しいインターフェイスは慣れていないだけでなく、成熟した製品の再設計で頻繁に発生する重要なレビューがありました-ユーザーが習慣を変更してすぐに新しいインターフェイスに切り替えることは困難です。

製品を長期間使用したときの感覚を聞くことが重要でした。これは品質指標です。以前のレビューから、新しいインターフェイスへの切り替えは不快であることがわかりました。しかし、さらに大きな不快感は、新しいものに時間を費やしていた古いものへの回帰です。その結果、接続ユーザーの間で古いインターフェイスに戻る割合は、製品が更新されるにつれて着実に減少していることがわかります。

品質に加えて、定量的指標も確認しました。私たちにとっての主なことは、ユーザーが問題を解決するためにインターフェイスに戻る頻度（保持率）です。そして、この数字は大きくなりました。さらに、ユーザーは手紙とより積極的に対話するようになりました。たとえば、添付ファイルの回答とオープンの数がほぼ半分になりました。

最初の結果

Mailは大規模で成熟したプロジェクトであり、多くの読者がいます。そして、そのような再設計を行うことがどれほど難しいかを私たちは直接知っています。急ぎではなく、ベータ版をメインのメールクライアントにすることに慎重に取り組んでいますが、最初の結論はすでに得られています。

新しいWebインターフェイスとモバイルアプリケーションは、視覚的なスタイルと要素との相互作用が保持される単一システムとして製品を構築するのに役立ちました。これにより、チーム内での作業方法が変わりました。モバイルとWebデザイナーの分離はなくなりました。今日では、これが製品全体のレンダリングを担当します。しかし最も重要なことは、Mailのユーザーに統一されたエクスペリエンスを提供し、あるデバイスから別のデバイスへの移行を可能な限りシームレスにします。

新しいインターフェースはoctavius.mail.ruで入手できます。

新しいMail.ruメールとタコはそれと何の関係があるのか