ソーシャルサイトのWebデザイン

スペースの有効利用（タブでの整理）

　最も重要なイテレーションサイクルの1つは、コースの表示で、その次にユーザーリストでした。主な問題は、多数のコースを学習しているユーザーにとって、マイページで最も重要な機能の1つであるコース管理が、ページ全体を占めるようになっていたということです。当初は、学習コースを次々とリストにし、iKnow!、そしてDictationの学習アプリケーションと学習ゲームのBrainSpeedのボタンを学習コースの列ごとに配置をしました。

　最初の試みは、コンパクトなレイアウトで2段階のナビゲーションを使い、タブパネルを実装することでした。1つの軸上にページ数を、アプリケーションの選択肢はもう片方の軸におきました。これはユーザーが早く簡単に学習コースとアプリケーションの載っているページをめくりやすくするためでした。

　一方では、パネルの高さを制約するためでもありました。このレイアウトは右側に幾分かスペースを空けてくれ、学習バッジや学習進ちょくグラフを見せることができました。Cookieはユーザーが戻ってきた時にタブごとの状態を記憶しています。もし、ユーザーがDictationアプリケーションを前回使っていたら、そのユーザーが戻ってきた時に、選択した状態を維持しています。

スペースの有効利用（ユーザーの声を聞く）

　このソリューションは、これまでに述べた問題を解決することに役立った一方で、別の新しい問題をもたらしました。主な問題はすべてのアプリケーションにおける学習進ちょくがコースごとに早く把握することができないということでした。この意味は、目標終了日を設定するモードを使うユーザーにとっては、いちいちタブをクリックしないとそれぞれのコースの学習進ちょくを見ることができませんでした。

　コミュニティーからのフィードバックは、再考する十分な根拠でした。そして、もう1つの改定サイクルに向けて、振り出しに戻りました。これは、アジャイル開発プロセスの利点のうちの1つで、ユーザーのフィードバックに素早く対応し、通常ベースでアプリケーションへの変更をリリースできます。

　その次の改定で、プロフィールイメージエリアとプロフィールバッジを一緒に左側に集め、各アプリケーションの学習コース進ちょくバーを再びに前面に持ってきました。これは、いくつか小さめのスタートボタンとセットにすることで、再び、ユーザーはすべてのアプリケーションにおいての学習コース進ちょくをすぐに見ることができるようになりました。

　初回はプロフィールバッジとグラフをデザインするのにかなり努力したので、そのコードを維持し、ユーザーにウィジェットとして提供し、ブログに貼（は）り付けることができるようにしました。そして、タブに対する作業は何回かあとのイテレーション時にコースとリストを切り替えるために使いました。アジャイルの概念をデザインと開発において維持する能力は、時々やりにくいとはいえ、結果としてより短い時間でよりよいソリューションを得られます。