🕖 🔡 👨🏽‍🔧 MailChimp UXチーム：機能強化と反復[本の最後の部分] 🗓️ 👃🏻 💑

[ TL; DR ]

[本の最初の部分 ]

[本の第2部 ]

[本の第3部 ]

[本の第4部 ]

[本の第5部 ]

[本の第6部 ]

[本の第7部 ]

機能の量と質の反復とバランス

ジェイソン鳥

最近、ある会社が約束された補償金の支払いを小切手を私の住所に送った-これは初めてではない。「これらは彼らの問題であり、彼らはこれをしなければならない！」私の妻は叫び、起こっていたことに不満を抱いた。私も動揺していましたが、この問題を解決することになっていたチームに共感することはできませんでした。

ユーザーがバグに遭遇した場合、または一部のアプリケーション機能がユーザーを混乱させて時間をかけると、製品に対するユーザーの信頼が低下します。また、その結果、サポートデスクの負荷が増加します。バケツに穴があると想像できます。大きな穴は自信をすぐに減らし、多くの小さな穴はゆっくりと徐々に低下します。何らかの方法で、信頼が損なわれると、信頼を取り戻すことはできなくなります。

常にアプリケーションに力を入れていますが、MailChimpはバグの影響を受けません。そして、私たちの「バケツ」には大きな「小さな穴」と「小さな穴」の両方があったことを認める用意ができています。

「穴」を探し、「バケツ」を守る

毎日一つのことに取り組むとき、あなたは単に弱点を見落とすことができます。そして、無害なように見えることもあると、望ましくない結果を招くことがあります。私たちのUXチームは、アプリケーションの欠陥を見つけるために、インタビュー、調査、分析、およびその他の調査方法に依存しています。さらに、ユーザーが意見や不満を表現するために使用できる各フィードバックチャネルにも注意を払っています。

TwitterやFacebookなどのソーシャルネットワーク、ブログ投稿へのコメント、およびサポートチームがすべてのメッセージとメールにタグを付けて、一般的な問題の検出に役立てています。そして、UXディレクターのアーロン・ウォルターが書いたように、私たちを去ったユーザーに投票したときに、信頼が最も急激に低下した理由について学びました。

優先順位を設定し、バグを修正する

フィードバックを取得するのは簡単ですが、応答するものを表示して選択するのはそれほど簡単ではありません。すべてのコメント、ツイート、手紙、ネットワーク上のメッセージ、またはFAXを考慮に入れた場合（実際、FAXによるフィードバックはもちろん受け付けません）、チームが物理的にすべてに対処できないほど多くのタスクを抱えることになります。多くの企業は単にすべてのバグを修正するためにもっと多くの人を雇いますが、このアプローチには限界があり、この場合、使い勝手に問題があるかもしれません。私たちが受け取った提案のすべてが実装されるべきではありません。それらは矛盾しているかもしれないし、少数のユーザーにしか役立たないかもしれません。代わりに、調査チームはフィードバックを注意深く監視し、最も一般的で興味深いリクエストのみを報告します。

リリースの5週間後にログファイルを見ると、「修正済み」、「デバッグ済み」、「改善済み」、「構成済み」、「変更済み」という単語が付いた多くのコメントが表示されます。これらの領域で、ほとんどのリクエストが受信されます。いくつかのバグ、テキストエラー、または作業の過程に影響するデータの出力に関する問題も、リリースの段階で排除されます。

弱点を強みに変える

MailChimpは、新しい珍しい機能があるときに多くの注目を集めているため、徐々に改善するよりも、それらに集中する方が簡単です。ただし、多くの場合、新しい機能は、長期間更新されていないアプリケーションの一部を再考するだけです。私たちのチームは、UX研究者から素晴らしい開発チームに至るまで、何よりも仕事をするのが好きなのはそのようなタスクです。新しい機能の導入は、たとえ古い機能を再考するだけであっても、大きな喜びをもたらします。

時間をかけて改善してください

時々、速度を落とし、新しいアイデアを脇に置き、いくつかの調整と改善を行う必要があります。チケットのキューを減らすことは優先タスクではなく、誰も私たちのブログにそれを書くことはありませんが、根本的な変更とスムーズな改善は私たちにとって等しく重要です。少なくとも年に1回は、以前のバージョンと比べて最終的に改善されたバージョンの製品をリリースします。私たちにとって、このリリースで最も成功した期間は休暇の時間です。同時に、次のリリースでどのような機会が現れるかを計画しています。

ローカルに...そしてグローバルに考える

バグを検索して改善しても、何かに気付かなかったり、全体像が見えない場合があります。つまり、変更がMailChimpの一般的な使用体験にどのように影響するかです。新しい大規模なプロジェクトに取り組むことで、全体像を見ることができますが、小さな詳細を見逃したり、人々がどのように対処するかを予測したり、以前は気付いていなかったものを自分で発見したりすることはできません。最も重要なことは、このすべてに注意を払い続けることです。そのため、「バケツ」はより大きく、より良くなっています-穴はますます少なくなっています。

MailChimpをより手頃な価格にした方法

マルダヴ・ヴァラ

MailChimpで何がうまくいくかだけでなく、何がうまくいかないかについて、お客様から貴重なフィードバックをいただいて幸いです。例を挙げましょう。少し前まで、 Justin Romakという名前のクライアントから、見えない人が、コントロールパネルとサブスクライバーのリストのアクセシビリティに問題があることを通知されました。

「メールマーケティングは、私のビジネスにとっても、毎日やり取りするクライアントにとっても非常に重要です」とジャスティンは語りました。 -私は盲目で、画面上のテキストを採点する技術に依存しているため、必要なオプションや完全に利用可能なオプションを見つけるのは必ずしも容易ではありません。ただし、MailChimpチームはその点で非常に優れていました。」

幸いなことに、ジャスティンは以前にも同様の質問をして、MailChimpの改善に協力してくれました。彼は怠け者ではなく、アプリケーションの問題領域を示すビデオをいくつか送ってくれました。これらの記録を閲覧し、いくつかの記事[ 1、2、3 ]を読んだ後、 2つの目標に焦点を当てると、アプリケーションの特別な機能を大幅に改善できることがわかりました。 HTMLのタイトル、およびすべてのマークアップが意味的に正しいことを確認します。（その時点では、divブロックを使用したレイアウトを使用したMailChimpでメーリングリストを作成する場合、これらのトリックは適用されませんでした）。

コントロールパネルの改善

ジャスティンからメッセージを受信する前でも、MailChimpコントロールパネルのアクセシビリティ機能を改善し始めました。これらのマイナーで効果的な調整により、テキストを読むためにナレーターが使用するパネル要素にコンテキストが追加されました。

MailChimpパネルのすべてのアイテムは、チェックボックス、追加情報へのリンクのある見出し、タスクのリストを含むドロップダウンリストなど、意味的に正しいリストアイテムで構成される「ラック」パターンを使用して表示されます。さらに、一部のコントロールパネルには、サブスクライバカウンタとクリックスルーレートカウンタが含まれています。

当時、キャンペーンのタイプとリストの名前に関するパネルの追加情報は、これらの要素の目的を明確にしませんでした。キャンペーンタイプ「標準」とリスト名「テスト1」は完全に明確ではありませんでした。この問題を解決するために、 aria-label属性を使用して、キャンペーンの説明とリストに関する情報を追加しました。これにより、ナレーターは「キャンペーンタイプ」または「リスト名」という言葉に続くテキストを音声で伝えることができました。また、ダッシュボードのアイコンにaria-label属性を追加して、キャンペーンの現在のステータスが発表されるようにしました。

サブスクライバーのカウントとクリックスルー率が意味的に正しく記録されたという事実にもかかわらず、ナレーターは番号と対応する署名に別々に注釈を付けたため、情報を理解することは困難でした。これを避けるために、ナレーターからサブスクライバー情報とクリック可能性を隠し、その情報をaria-label属性として親コンテナーに追加しました。アナウンサーは、数字とキャプションを一緒に発音します。

サブスクライバーのリストの改善

アクセシビリティ機能の改善に取り組んでいる間、サブスクライバーのリストをやり直す必要があることに気付きました。現在は、意味的に適切なデータテーブルの形式で表示されます。この例に示すように、サブスクライバーのリストは水平方向にスクロールでき、左側の1列のみが固定されています。最初は、このドッキングされた列とともにth、thead、およびtbodyタグを使用しましたが、このため、 VoiceOverは各列に2つの名前を表明しました。 VoiceOverユーザーは、テーブルを完全に左に移動して作業する必要がありました。この問題を解決するために、テーブルでtdタグを持つ要素のみを使用し、列ヘッダーにcolumnheaderロールを割り当てます。 Yahoo!ビデオはこれらの変更を支援してくれました。アクセシビリティテーブルの導入について。

さらに、タイトル属性をサブスクライバーのプロフィールページのチェックボックスに適用しました。これにより、チェックボックスにチェックボックスがある場合、ナレーターはサブスクライバーのメールアドレスを読み上げることができました。また、ARIAの役割と署名を使用して、アクセシビリティの機会に対する顧客活動評価リストを設定します（サブスクライバーのCodePen リストをご覧ください）。

まとめ

意味の一貫性を確保し、要素に説明を追加することは、アプリケーションをナレーターと一緒にユーザーの喜びとして機能させることができる非常に簡単なトリックです。 JavaScriptの場合、利用可能なフレームワークのいずれかを使用することをお勧めします。 Dojoと、そのUIライブラリーの組み込みのアクセシビリティー機能を備えたすべてのUIウィジェットを使用します。

すべての修正の後、ジャスティンの意見を聞いて、彼の肯定的な答えを受け取りました。すべてが期待どおりに読み取られます。気に入った！」

Googleアナリティクスで顧客の解約を修正する

アリソンアーバン

Webアナリストとして、私はデータの視覚的な表示に多く取り組んでいます。私のお気に入りのツールの1つは、Googleアナリティクスのネクストページパスです。この小さなレポートは、ユーザーが特定のページを閲覧した後にどこに行くかを示します。 UXについて話す場合、これはユーザーがコンバージョンファンネルを通過するのを止める最も速い方法の1つです。

アカウントアクティベーションファンネルの例を挙げます。ユーザーは登録した後、アカウントに入る前に正しいキャプチャのチェックに合格する必要があります。 Googleアナリティクスで予想される一連のアクションは、登録>登録の成功>確認の受信> login.mailchimp.comのようなものでした。

ただし、登録に成功したユーザーの32％は、確認の受信をバイパスして、login.mailchimp.comに直接アクセスしようとしていることがわかりました。 captchaチェックなしでアカウントにログインできれば問題はありませんが、このチェックは必須です。以前はcaptcha-checkが完了する前にアカウントにアクセスすることが可能でしたが、開発者はセキュリティ上の理由からこの移行を禁止していました。

それでは、なぜ誰かが指示に従って領収書を確認するのではなく、自分でアカウントにログインしようとしたのですか？ユーザーが明るい「ログイン」ボタンに惹かれたからといって。成功した登録ページから削除した後、確認ページに直接アクセスするユーザーの割合は63％から79％に増加しました。サポートチームは、アカウントのアクティブ化のリクエストを25％少なく受け取り始め、その結果、このような質問はこれまでになく少なくなりました。

研究に費やした数分間は悪くない。

間違いから学ぶ

Tyric Christian

ゴルフでは、初めてホールに入ることは非常に困難です。スイングを改善するために何年も練習していても、ゴルファーは風、地形、平らでない表面など、彼らとは独立した障害に直面しています。ゴルファーはこれを考慮します。だから、彼らは最初のストライキの後に打つたびに立ち往生するわけではありません。彼らは可能な限りボールをホールに近づけるために可能な限りのことをします。

デザイナーは、空白のページを見ると同様の困難に直面しています。スケッチ、ビジネスプロセス、語彙、およびスタイルの作業は、同時に不可能です。代わりに、各タスクを分解し、徐々に前進して、ユーザーのニーズを満たします。一度にすべてに成功しようとはしません。反復アプローチを使用します。

2013年、MailChimp UXチームはWebアプリケーションの大規模な再設計を開始しました。モバイルWebアプリケーションのトラフィックは急速に増加しており、ユーザーオーディエンスの調査によると、人々はどこにいても複数のデバイスから異なる時間にMailChimpにアクセスしたいことがわかりました。顧客へのインタビューと、現代文化に対するモバイルデバイスの影響に関する詳細な調査は、MailChimp開発計画の作成に役立ちました。再現したいユーザーエクスペリエンスに関するストーリーをチームに伝えるために、スクリプトを作成し、俳優を雇い、将来のアプリケーションのユースケースとワークフローに関する短いビデオを記録しました。このビデオでは、新しいインターフェイスではなく、操作方法のみを紹介しました。

その瞬間から、目標が明確になり、設計を開始できました。電話からコンピュータまで、あらゆるサイズの画面のアイデアを開発したため、この本で同僚がすでに説明したパターンのライブラリを作成することにしました。作業の過程で、1つの素晴らしいアイデアの開発ではなく、より良い解決策が得られるまで、いくつかの異なるアイデアの段階的な実装に取り組みました。

MailChimpアプリケーションを使用する場合、ユーザーはいくつかのコントロールパネルからアカウントのメインデータの簡単な概要を受け取ります。再設計プロセスでは、このデータをより適切に表現する方法を見つけるために、テーブルと写真を実験しました。数週間の実験の後、興味深いアイデアがあると判断しましたが、適切なソリューションが続くかどうかはわかりませんでした。テーブルは明確で退屈でした。写真は見栄えがよく、リストとレポートを「活気づけ」、キャンペーンを簡単に操作できるようにしましたが、多くのスペースを占有し、それらのために情報がコンパクトすぎませんでした。彼らは美しいが、実用的ではなかった。

一歩下がって、情報がコントロールパネルにどのように表示されるかを調べました。すべてが非常に良かった：各行が簡単に読まれた。アクションは予測可能であり、コンテンツを簡単に表示できました。このパターンは、設計を完全にやり直すことなく、多くの改善を加えなければ改善できないことがわかっていました。

次に、レポート、キャンペーン、リスト、および留守番電話パネルで各「スタッフ」のスケッチを作成しました。まず、ヘッダーとメタデータのテキストをフォーマットし、ボタン、チェックボックス、ステータスインジケーターなどの要素を徐々に追加しました。スケッチを何度か繰り返した後、Photoshopでの作業に進むことができました。各要素について特定のパターンが設定されていたため、ブロックの初期バージョンを作成することは難しくありませんでした。キャンペーンページは最も問題が多いことがわかりました。状態インジケーターを視覚的に魅力的にしたかったのですが、コンテンツの構造や配色の選択などの要因を考慮する必要がありました。その結果、一連の反復の後、アイコンを使用して適切な色を使用して各キャンペーンのステータスを表示することにしました。

それらが作成され、マイナーな修正が行われた後、再設計以来、ほとんど何も修正しませんでした。実際、要素は非常によく一致していたため、テンプレートやファイルマネージャパネルなど、アプリケーション全体の他のページに要素を実装しました。これらのページのコンテンツに大きな違いはないため、アプリケーション全体に単一のスタイルを使用することは理にかなっています。もちろん、すべてが完璧というわけではありません。最初のリリース後、ユーザーからフィードバックを受け取りました。私たちは彼らに耳を傾け、彼らのコメントに答えました。

たとえば、再設計の前に、レポートパネルにはビューとクリックの総数が表示されました。再設計後、レポートパネルには各キャンペーンのクリック率が表示されました。ユーザーの意見を学んだ後、私たちは妥協し、ユーザーのリクエストでビューとクリックの総数を表示し始めました。「レール」の作成と改善は、再設計で反復アプローチを適用するためのオプションの1つにすぎません。パターンライブラリの他の要素、およびすべてのビジネスプロセスおよびMailChimpアプリケーションのすべてのページで作業する場合、同じプロセスが使用されました。

今日、アプリケーションに変更を加える前に、顧客からのフィードバックを慎重に分析し、この道筋に導きました。感謝の言葉を聞くこともあれば、苦情を言うこともあります。何らかの方法で、変更後に新しい何かを学び、フィードバックに対応します。その結果、ユーザーとチーム間のこのような対話は効率を高め、ユーザーに喜びをもたらすことを願っています。

再設計による改善

Tyric Christian

2012年11月、私はMailChimpを適応アプリケーションとして見るように頼まれました。 MailChimpのような大規模な適応アプリケーションがほとんどないという事実のため、私は多くのインスピレーションの源を持っていませんでした。デスクから荷物をまとめ、UXチームのオフィスから、DesignLab、マーケティングチーム、およびいくつかのマーカーボードとともに別の部屋に移動しました。すでにここで、私たちのクリエイティブディレクターであるロンルイスは、制限なしに研究とデザインの作成に従事するように私に指示しました。

これは私の最初の適応プロジェクトでした。 MailChimpは大規模なアプリケーションであり、チームで唯一のUIデザイナーでした。これらすべてにどのように対処しましたか？

手始めに、私は1つの研究をする必要がありました。 Ethan MarcottのResponsive Web Designを読み直し、Brad Frostのアダプティブデザインパターンのコレクションを調べ、レスポンシブレイアウトとレスポンシブサイト自体のレスポンシブレイアウトの例を調べました。さらに、インスピレーションを与えるデザインソリューションをオフィスの壁に取り付けました。カラフルなイラスト、フォント、パターンの例です。

この調査の最後に、アプリケーションの開発と設計に使用される要素、ルール、および関係のシステムであるMailChimpパターンライブラリを再設計すると、プロセスを開始する方が簡単になることに気付きました。

パターンライブラリの基本要素の種類

タイポグラフィテンプレート

少数のパターンセットに同意するとすぐに、アプリケーションナビゲーションの設計を開始しました。これは、さらなる開発の[アプリケーション]のフレームワークを作成するのに役立ちます。私たちの目標は、どのデバイスでも機能する十分に柔軟なナビゲーションを作成し、共同ブランド機能をある程度サポートし、まず検索問題を解決して、ユーザーがいつでも必要な情報にアクセスできるようにすることでした。

水平ナビゲーションを実装しようと何度か試みた結果、すべてのデバイスに適しているわけではないことに気付きました。最終的に、大きな画面でのナビゲーションを含む通常の列を小さな画面でのメニューボタンに最小化できるため、あらゆる画面サイズに適した垂直ナビゲーションを選択しました。これに気付いたとき、私はさらにいくつかのオプションを試し、選択した方向をチームと合意し、このナビゲーションオプションを開発者に引き渡してプロトタイプを作成しました。

再設計プロセスの初期段階での水平ナビゲーションの例

垂直ナビゲーション設計オプション

それから、MailChimpでコンテンツを表示するさまざまな方法を学び始めました。パターンのライブラリを操作した後、グリッドとさまざまな画面サイズのさまざまなモジュールを再構築する方法を考えました。私が最初に思いついたのは、コントロールパネルを持つページの2つのデザインオプションを作成することでした。ブロックとリストの形式です。最初のオプションは新しいユーザーに適しており、注目を集めています。2番目のオプションは、経験豊富なユーザーがシンプルで有益なテーブルにアクセスするために使用できます。

キャンペーンコントロールパネルに情報をリスト形式およびブロック形式で表示する例

キャンペーンコントロールパネル、リストパネル、レポートパネルに情報を表示するためのブロック形式のタイルテンプレート

数週間、私はタイルの実験を行い、残りのチームはパターンライブラリのプロトタイプを作成しました。リストをより「生きた」ものにしたかったのですが、そのためには、まだ準備ができていなかった実装者のアバターを追加する必要がありました。クライアントの各キャンペーンの情報を表示することを考えましたが、これは各文字が他の文字と根本的に異なる場合にのみ意味がありますが、常にそうであるとは限りません。情報をリスト形式で表示する場合、アダプティブテーブルはカラフルすぎず、小さな画面にはほとんど適していませんでした。

数週間の実験と議論の後、コースを変更することにしました。フェデリコと私は以前の設計について議論し、合意に達しました。実用的なテーブルのアイデアが気に入ったため、コンテンツを並べ替え可能にし、すばやく表示し、垂直と水平の両方に反転させることにしました。これを理解するとすぐに、表の形式で定型化されたリスト、または「レイキ」が必要であることが明らかになりました（FRBは以前にそれらについて話しました）。すぐに、これらのアイデアをスケッチ、デザイン、プロトタイプの形で実現しました。

スケッチフェデリコ

作成されたスケッチとデザインは、プロトタイプを作成するために同僚に引き渡されました

リスト、レポート、キャンペーン、留守番電話のプロトタイプが作成された後、サイトのいくつかのページの設計に進みました。パターンライブラリの設計と比較して、このタスクは思ったよりもはるかに簡単でした。最も難しい作業が行われ、数ページの小さな要素を開発する必要がありました。新しいMailChimpの完成したデザインを取得する前に、無数の反復を行いました。独創的と思われるアイデアをすぐに破棄しましたが、ユーザーのニーズを満たしていませんでした。多大な労力を費やして先に進んだアイデアを残すのは簡単ではありませんが、これは創造的なプロセスの一部に過ぎません。このような大規模な共同プロジェクトは謙虚であることが教えられています。

MailChimpの再設計は非常に貴重な経験を与えてくれたため、私たちの創造的なプロセスを再検討し、それらをどのように改善できるかを考えました。他のチームとより効果的に仕事をする方法と、ユーザーエクスペリエンスの全体像を見る方法を学びました。新しいMailChimpが起動しましたが、まだ作業が必要です。私がアプリケーション開発について気に入っているのは、いつでもさらに改善できることです。

ソース

Mailchimpチームから：

書籍：

[ Megamozg.ruのブログのプロジェクト管理とスタートアップ開発に関する資料 ]

MailChimp UXチーム：機能強化と反復[本の最後の部分]