01背景
Arvan Cloudはイランのクラウド・CDN事業者だ。企業はそのコンソールでクラウドサーバーを購入・運用し、ファイルを保存し、コンテンツを配信する。Sinaはそこでフルタイムのプロダクトデザイナーとして、コンソールのインターフェースと情報設計に取り組んだ。
こうしたコンソールには2つの役目がある。顧客がすでに動かしているものを管理する場所であり、新しい顧客が最初のサーバーを買う場所でもある。本ケーススタディは後者を、公開ウェブサイトから稼働中のサーバーまでたどり、そのうえで再設計したコンソール画面を紹介する。いずれも公開された画面で、ウィザードの最終ステップ、サーバー一覧、サーバーページ、オブジェクトストレージのファイルマネージャーだ。
02課題
調査は2つの問題を挙げた。Arvanのウェブサイトの訪問者が、購入のためにコンソールまでたどり着くことはめったになかった。そしてサーバー作成ウィザードを始めた人は、どのリソースが必要かを見極めようとするうちに離脱していた。
1つ目はGoogle Analyticsが示した。この経路について計測したサイトのイベントのうち、100件中およそ90件はホームページの閲覧、9件はクラウドサーバーのページの閲覧だった。ホームページにあるそのページへのボタンのクリックは約1件、「購入」のクリックは1件未満だった。
2021年9月付けのユーザビリティテストのボードが、その理由を示している。記録されているのは、フルスタック開発に2年携わってきた参加者とのセッションだ。参加者は1366×768の画面で、ホスティング用パネル付きのWindowsサーバーを立ち上げようとしていた。主な疑問は製品そのものについてだった。クラウドとホスティングは何が違うのか、クラウドサーバーは仮想マシンと同じなのか、そもそもサーバーを買うべきかホスティングプランにすべきか。そしてコンソールについては、「なぜこのパネルには、何が何なのか分かる説明がないのか」。
ボードは各所見を種類別に記録している。文言、デザイン、プロダクト、技術の問題だ。
テストと分析の結果は一致していた。人はまず言葉で迷い、次にサイズのステップで迷っていた。
03リサーチ
Sinaは、ユーザー行動分析ツールの要件定義書をチームのために書いて発表した。ツールには、事前にイベントを設定しなくても行動を記録できること、どのチームでも使えるほど簡単であること、目標を共通の指標に落とし込めること、製品を遅くしたりセキュリティを弱めたりしないことが求められた。Google Analytics、Mixpanel、Amplitude、FullStory、Heapを比較し、Heapを選んだ。すべての操作を記録するため、新しい疑問にもすでに記録された行動から答えられ、コンソールでも数か月問題なく動いていたからだ。
04トラッキング計画
フロー全体をコンバージョンで測った。ある画面に来た人のうち、次の画面に進んだ人の割合だ。コンソール側の指標は、コンソールを評価する3つのコンバージョンを定めた。コンソールのホームからサーバー一覧へ、一覧から新規サーバーへ、データセンターからウィザードの最後までだ。ウィザードの最後のスコアで、サーバー作成がどれほど難しく感じられたかも補う。
次にトラッキング計画が、フローを画面ごとに1枚のボードでたどった。日付は2021年9月と10月。各ボードは画面の要素に番号を振り、要素ごとに何を記録するか、どのツールで、なぜかを書いている。クリック数、時間、離脱はHeap、インストールされたOSやマーケットプレイスのイメージはArvanのBI、ヒートマップはHotjarかHantanaだ。ボード全体で測るのは、サーバー作成ボタンを見つけるまでのクリック数と時間、各ステップの離脱、選ばれるデータセンターとOS、サイズ表がどこまでスクロールされるか、カスタムサイズにどれだけ留まるか、プライベートネットワークやファイアウォールを追加するか、複数のサーバーを一度に作るか名前を変えるか、そして最後のページでサーバーの情報をコピーするかだ。
Heapはウィザードを7ステップのファネルにした。サーバー一覧、データセンターのページ、続いてOS、サイズ、接続方法、名前の選択、最後にサーバー詳細。各ステップから次への移行を4つの観点で測った。何人が進んだか、何回の操作が必要だったか、どれだけ時間がかかったか、何人が製品を離れてから戻ってきたか。
どの指標でも1つのステップが突出していた。サイズ選択の後に進んだのは73.09%だけで、ほかのステップでは89〜99%だった。この移行には中央値で5回の操作と23秒、ほかのおよそ2倍がかかり、3.8%が先に進む前にいったん製品を離れて戻ってきた。これはどのステップよりも多い。OSの選択でも人を失っていた。とくに、よく使われるOS以外やマーケットプレイスの中を探していた人だ。全体では、ウィザードを始めた人の52.19%が完了した。
サイズ選択は、プロジェクトに何が必要になるかを予測させる唯一のステップだ。クリックも時間も購入者も、最も多く失っていた。
05ソリューション
Sinaはサイズのステップを2通りに設計した。どちらも同じ枠組みを保っている。「サーバーのサイズを選択」というタイトル、汎用、メモリ最適化、コンピューティング最適化、カスタムの4つのタブ、そして戻るボタンと確定ボタンだ。違うのはサイズの選び方だけだ。
案1は、既定のサイズを規模ごとにまとめ、小さいものから順に表で並べる。各行にはCPU、メモリ、SSD、基本パッケージ、月額料金があり、表の上の注記が2つのハードウェア世代を説明する。1行はあらかじめ選択されているので、何を選べばよいか分からない人も先に進める。
案2のカスタムタブでは、プロセッサのコア数、メモリ、ディスクを3本のスライダーで設定する。横のカードが、動かすたびに月額と時間あたりの料金を更新する。スライダーで組んだサイズは、表の該当する行と同じ料金になる。
06A/Bテスト
Sinaは2つの設計のA/Bテストを行い、コンバージョンを指標にした。Heapのレポートは、サイズのステップで使った操作ごとに人をグループ分けしている。ウィザードを始めた人全体のうち、44%がスライダーでサイズを設定し、約1%が表から行を選んだ。残りはどちらにも触れなかった。
スライダーのグループは全員がサイズのステップに到達し、ほかの人は87.74%だった。Heapの発表で、Sinaはこの差を結論ではなく仮説の出発点として示した。サイズのステップは複雑なインターフェースに選択肢が多すぎる。だから選択肢を減らし操作を簡単にすれば、より多くの人が通過するはずだ、という仮説だ。
その慎重さは正しかった。スライダーはサイズのステップにしかないので、スライダーのグループがそこに到達するのは当然だ。ウィザードの最後では、2つの大きなグループは並んでいた。スライダー利用者の52.04%が完了し、ほかの人は52.30%だった。
人は明らかに、表を読むより自分でサイズを決めるほうを好んだ。だがその好みは、完成するサーバーの増加にはつながらなかった。2つの設計はどちらも、同じステップのタブとして公開された。
好みとコンバージョンは別の結果だ。スライダーは前者で勝ち、後者はそのままにした。
07次のステップ
トラッキング計画では、ウィザードの最後のページで人が何をするかを見ていた。サーバー名を変えるか、その情報をコピーするかだ。再設計では、このページが出発点になる。
ステップバーには、データセンター、OS、サイズ、ディスク、詳細設定、名前と台数の6ステップが完了し、7つ目の作成が進行中であることが示される。新しいサーバーにはそれぞれカードがあり、作成の進み具合、ユーザー名、伏せたパスワードが表示され、どちらにもコピーボタンがある。作成に失敗したサーバーは赤くなり、詳細へのリンクが付く。
サーバーの下では4枚のカードが、多くのサーバーが次に必要とするものを、作成中のうちに設定できるよう提案する。ディスクの追加、ファイアウォールの設定、バックアップの有効化、プライベートネットワークの作成だ。どのカードにも理由を1行、ガイド、ボタンがある。ページの最後には2つのリストがある。ファイアウォールの設定やサーバーの保護といった入門記事と、SSHの問題などのトラブルシューティングだ。
これはユーザビリティテストで出た疑問への1つの答えだ。参加者が何の説明も見つけられなかったところで、このページは次に何をすべきかを説明する。
このページの以前のバージョンは、2通りに描かれており、サーバー1台分の完了メッセージだった。ユーザー名、IPアドレス、パスワードが並び、IPアドレスとパスワードにはコピーボタンが付き、同じ情報をメールでも送ったという1行が添えられていた。その下には注意書きが2つあった。1つは、SSHでつながらなければ最初にファイアウォールの設定を確かめること。もう1つは、ウィンドウを閉じるとコンソールからログイン情報にアクセスできなくなること。2つの案の違いは注意書きの置き方だけで、2枚のカードを横に並べるか、2本の細い行を上下に重ねるかだ。
注意書きを2枚のカードで横に並べた案
08コンソール
再設計は、顧客になってから使う画面にも及んだ。サーバー一覧はデータセンターごとのタブで開く。イラン国内のものと、アムステルダムの1つだ。開いているデータセンターに絞った検索、一括操作、タグのフィルター、新規サーバーのボタンもある。各行にはサーバーのステータス、名前とサイズ、ログインユーザー、タグ、操作が並び、作成中のサーバーは進み具合を示す。別バージョンの一覧では、各サーバーのIPアドレスと、サーバーを別のデータセンターへ移す操作が加わる。
一覧は、最もよく見られるページでもある。Sinaは再設計の前に、コンソールの主要11ページを、2019年5月1日から2020年3月14日までのGoogle Analyticsの閲覧数で順位づけした。サーバー一覧は100回の閲覧のうち約72回、作成ページは約10回を占めた。ウィザードは、この一覧の「新規サーバー」ボタンから始まる。
本ケーススタディの冒頭に載せたサーバーページは、Sina自身の言葉で書かれた1つのユーザーストーリーに応える。「ユーザーとして、サーバーのステータスと詳細を見て問題がないか確かめたい。サーバーを使うための操作もいくつかほしい」。まず、サーバーに接続するために必要なものが並ぶ。名前と稼働しているかどうか、SSHコマンド、パブリックとプライベートのIPアドレスとそのコピーボタン、そしてリモートデスクトップのガイドだ。その横にプランの情報と操作の列がある。電源、削除、設定、レスキュー、サイズ変更、再構築、コンソール、スナップショット。下のタブには設定、ネットワーク、使用状況、スナップショット、コンソール、再構築、イベントがまとまり、使用状況のタブは直近1時間のCPUとメモリをグラフにする。
オブジェクトストレージのファイルマネージャーは、バケット内のフォルダとファイルを、サイズ、作成日、ファイルを公開するスイッチとともに一覧にする。アップロードは一覧の中で進む。ファイルのアップロードに合わせて行が塗りつぶされ、失敗したアップロードは赤くなって再試行ボタンが付く。下部のパンくずリストが、バケットから開いているフォルダまでの道筋を示す。
どの画面も同じ枠組みを共有している。Arvanの製品（CDN、IaaS、VoD、Live、Ads、PaaS）を並べたレールと、開いている製品のメニューだ。
09主要な意思決定
どれも画像、ファイル、あるいはその裏にあるデータに表れている。
Heapは事前にイベントを設定しなくてもすべての操作を記録するので、ウィザードに関する新しい疑問にも、すでに記録された行動から答えられる。デザインや分析の担当者以外でもそれができる。
ファネルと労力分析によって、問題はウィザード全体ではなく、サイズのステップという1か所に絞り込まれた。
表はサイズを規模ごとにまとめ、それぞれのリソースと月額料金を示し、1行を選択した状態で始まる。何を選べばよいか分からない購入者でも先に進める。
スライダーは選択を3つの判断に分け、それぞれ動かすたびに月額と時間あたりの料金を示す。A/Bテストでは、サイズを設定した人の大半がこの方法を選んだ。
10私の役割
Sinaが公開した画像、Figmaファイルのリサーチページ、そこでSinaの名前が入ったフレーム、Sinaが提供した2つのページの以前のデザインをもとにまとめた。コンソールにはもう1人のデザイナーもSinaとともに取り組んでいたが、その画面はここでは紹介していない。
これらの設計はArvanのコンソールで公開された。ファイル内のほかの画面のうち、もう1人のデザイナーの名前が入った画面や、名前のない画面は含めていない。
11成果
設計は公開されたが、証拠にビジネス上の成果はない。満足度や売上の数字はなく、A/Bテストでも完了率はどちらの操作でも約52%のままだった。
12学んだこと
スライダーはサイズのステップにしかないため、スライダーのグループは毎回そのステップに到達した。差を示しえた数字は完了した人の割合で、それは両グループで同じだった。最初に報告すべきなのはその数字だ。
A/Bテストは購入者を無作為に分けたが、レポートは触れた操作で人をグループ分けしていた。これでは設計の効果とそれを選ぶ人の違いが混ざってしまう。スライダーが購入者をより多く引き留めるかを示すのは、無作為に分けたそれぞれの半分の完了率だ。
テストのボードに詳しく記録されている参加者は1人で、時間計測シートには5人分の欄がある。5セッションすべてを埋めていれば、どの問題が多くの人に共通で、どれが1人に固有のものかが分かったはずだ。
サーバーページには8つの操作がアイコンで並び、その中に削除と電源がある。この2つにラベルを付けても場所はほとんど取らず、高くつくミスを防げるかもしれない。
注意書きを2本の細い行で上下に重ねた案
サーバーの作成中、ページは各サーバーのログイン情報をすぐコピーできるようにしておき、ディスク、ファイアウォール、バックアップ、プライベートネットワークをそれぞれガイド付きで提案する。
Windowsの評価版を選ぶと、まず通知が出る。ライセンスは180日間有効で、有効なライセンスがなければサーバーは1時間ごとにリセットされる。
