連載 :
  iKnow!の作り方

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

2008年8月18日(月)
Simon Dennett

スペースの有効利用(タブでの整理)

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

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

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

スペースの有効利用(ユーザーの声を聞く)

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

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

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

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

Cerego Japan Inc.
Creative Director\\, Cerego Japan. Australian\\, 38 years.
Work History
Web Designer\\, TAC Planning 1998、Senior Web Designer Leo Burnett Sydney 2005\\, Senior Flash Designer\\, Avenue A Razorfish Sydney 2006\\, Current Position since 7/2007.http://www.iknow.co.jp/記事をスラスラ読むためのツールはこちら(http://www.iknow.co.jp/list/12690

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています