本記事の原文はNutanix社のProduct Design DirectorのJeremy Sallee氏によるものです。
原文を参照したい方はCASE STUDY NUTANIXをご確認ください。情報は原文の投稿時のままの情報ですので、現時点では投稿時の情報と製品とで差異が出ている場合があります。
当社のNutanix社製品についてはこちら。
Nutanix製品の優れた部分はインフラストラクチャの高度な自動化や優れたソフトウェアアーキテクチャによってもたらされていることはもちろんですが、Nutanixのもう一つの魅力はその優れたユーザーインターフェイスであるNutanix Prismです。
Prismにどんな思いが込められているのかを表したビデオに字幕を入れさせていただきましたので、合わせて御覧ください。
今回は、そのPrismがどのようにして生まれたのかを解説した記事をお届けします。原文が非常に長いので分割しての投稿になりますが、ご容赦ください。本シリーズの過去の投稿はこちら。
クラスタ健全性(ヘルス)
もう一つの解決すべき主だった機能としてはクラスタ健全性(ヘルス)が有りました。私がこれについて動き始めた際にはこの新しい機能について一から作り始めて4ヶ月以上もかかることになるとは思いもつきませんでした。すべての始まりはpythonコードによるページが私に送られてきたときからです。開発を行っているエンジニアはこの新しい機能のために平均して毎分数百ものテストシステムの全ての要素に対して実行していたのです。クラスタは非常に複雑な親子関係を含んでおり、各要素は独立させることは出来ません。特にそれが障害系のテストとなったら。このツール全体の目的は膨大かつ複雑な要素の塊から問題を引き起こしている根本的な原因となる要素へとナビゲーションを行うことです。要素間の相互依存が連鎖反応を作り出し、ユーザーを惑わせることで問題を見ているユーザーを別の要素へと導いてしまいます。一週間もあれば問題を解決できると確信してデザインを開始しました。2～3週間、膨大な数のデザインを作成しましたが、それは一瞬でボツになりました。アイディアについては経営メンバー、フロントのメンバー、バックオフィスのメンバー、プロダクトマネージャーなどから入り続けていましたが･･･。以下はその頃に作成されたフォトショップやワイヤフレームです:
幾つかの試行錯誤や失敗、そして多くのミーティングの後、ようやく解決の糸口が見えました。メモリや親となる他のパラメーターと各要素をグルーピングするのです。これはユーザーがシステムの概要を迅速にひと目で把握しながら、更にその問題の解決への具体的な見識がある際には役に立ちます。たとえば、仮想マシンをメモリでグルーピングすることで、多くのメモリを利用している状態の仮想マシンに対して更にスペースを利用させるのか、その総量を減らすべきなのかを決めることが出来ます。これが本当のクラスタ健全性(ヘルス)についての始まりとなりました。ついに頭のなかに明確な絵をイメージすることが出来たのです。残りは全てのページについてエンジニアやプロダクトマネージャと毎日のようにミーティングを繰り返して、その進化を共有しながら仕上げていけばよいのです。以下は2ヶ月が立った頃のデザインの様子です。
ようやく我々はインテグレーションの手順を開始しました。これについてはとても長い時間が必要で、さらに、私の関与はインテグレーションの進行のうちのほんの最初の概要だけでした。殆どが終わった後にようやく、私は最終的なインテグレーションについて関与することになります。完全に実装されたCSS、画面遷移、アニメーションそして、ユーザーエクスペリエンスが良いかどうかの確認です。これによって私のフォトショップファイルとおなじになるようにアプリに対して小さなチューニングが多く出てきました。
1月ごろでしょうか、ようやくアプリケーションが充分ユーザーの検証に耐えうるレベルにまで達しました。我々は幾つものユーザー検証を行いました。これによって多くの問題がユーザーインターフェイスに生じてきます。視覚的な問題のみに限られたものではなく、ナビゲーションやユーザーエクスペリエンスに関するものも有りました。ユーザーセッションから学び、ユーザーからのフィードバックを実装して、それぞれのページを改善し続けました。これによって問題が解決することもありましたが、全てではありません。アプリケーションが複雑になりすぎて、最初に利用の仕方を示すことが明確な解決策でした。我々はCSSチームとともに泡のように発生する情報とマウスによる対話を上手く実装する方法を模索しました。すべての体験をよりわかりやすくするためです(例を上げて説明させてください、多くの例がありますが、プロジェクトマネージメントのアプリケーションはフェイクのプロジェクトを作成してどのようにアプリケーションを使い始めるかをガイドします)。技術的に何かが優れていると決めた後も、私は説明的なデザインを最終的に統合することにしました。一度コーディングが終わった後にプロダクトマネージャにより良いものを届けたかったのです。
マルチクラスタとクラスタ健全性(ヘルス)に取り組みながらも、全体のデザインにもこれを踏襲する必要があると思い至りました。この2つの機能はアプリケーションの他の部分へも一貫性のための改修を行う必要を生じさせたのです。ですが、更に私はレイアウトとデザインをシンプルにする必要も感じました。サイドデザインに立ち戻り、4.0の立ち上げのために加わった新しいCSSスペシャリストともにこの課題に当たりました。
ヴァージョン4.0に関連するプレスリリースの幾つかは以下をご参照ください:
http://www.nutanix.com/nos-4-launch/
http://www.reuters.com/article/2014/04/15/
http://www.tomsitpro.com/articles/nutanix-nos-prism-central
ヴァージョン4.0のリリースに関する完全なアーカイブはこちら。
教え、雇い、管理する
9月の3.5のリリース以降、私は管理と採用に継続的に関わり続けています。大量のコードとデザインを活用するためにCSSスペシャリストをフロントエンドのエンジニアリングチーム内に採用しようとしています。2ヶ月にも渡っての再構成を経験し、私自身が全ての｢ビジュアル関連｣のインテグレーションに必要なコミニュケーションは取れるようになりましたが、コードについては未だによくわかりません。このためには我々2人の間にうまい教育と風通しの良いコミニュケーションがなくてはなりません。そして、今のところ、上手く行っています。
そして、私自身はデザイナーを雇用し、チームを作ることにも深く関与しています。2014年の1月に1名のデザイナーを雇い、私はリモートで彼の法的な問題が解決するまで彼のマネージャーを務めていました(その時、彼は上海にいました)。既にもう一名のデザイナーともサインを終え、デザインの研究を7月末に終えれば合流する予定になっています。
我々はもっと別のメンバーも求めています。我々のすぐれた能力を持つ方にとって魅力が滾るように、デザインとコードについては自由なポジションを募集しています。
記事担当者: マーケティング本部 三好哲生 (@Networld_NTNX)
全5回にも及ぶ大作シリーズになってしまいましたが、Prismについての記事はこれでオシマイです。記事としてはオシマイになりますが、Prismは現在進行系のプロダクトです。
ここで述べられていたように新しい機能を追加して、その機能のためのデザインが追加される度に、全体のデザインへもそれが波及します。ユーザーエクスペリエンスの一貫性を保つことが如何に難しいか、そして逆に一貫したデザインによってどれだけの管理工数を削減できるかということをご理解いただけたのではないかと思います。Acropolis以上の魅力を持つこのPrism、インフラストラクチャの世界では比較の対象がないためにあまり語られない機能ですが、是非Prismの良さを立ち止まって考えてみてください。このアイコンがもしここになかったら、今なんとなくクリックしたけど、何故自分がそれを直感的にクリックしたのか?
エンタープライズクラウド製品を使っているときに触っている画面、それは全てPrismです。そして、これだけの労力、インスピレーション、デザインを経て完成した、単なるUIに収まらない、まさにソリューションなのです。
