情報構造から考える UI

イベント開催支援ツール：ATND とは

ATND はイベント運営者・参加者のためのサービスです。

おもしろい・たのしい・ためになる、そんなイベントや勉強会を個人で運営する人たちが増えています。でも運営者にとっては、告知から参加者の管理などわずらわしい作業が意外と多いもの。

ATND（アテンド）は、そんなイベントや勉強会の開催をお手伝いするシンプルなサービスです。

いまのところの特徴は：

• イベント告知ページの作成
• Mixi, はてな、Yahoo! JAPAN、LivedoorなどのIDによる参加申込 (*)
• アンケート機能
• 参加者リストのDL

不特定多数の人たちに参加意思を確認することであれば何でも適用できますので、気軽に使ってみてください。

* ATNDは、OpenIDを用いてこれに対応しています。

ATND の提供する API

API は REST によって取得可能な構造化データを提供していると思われる。

レスポンスデータは XML か JSON のどちらかが選択可能。

どちらで取得するにも、クエリによる検索が可能。また、検索には複数条件の指定が可能なものと、そうでないものがある。

これらのデータ構造と機能、制限を基に UI を作成する。

検索の制限と問題点の解決案

ATND では地域名からの検索インターフェースは提供されていないようなので、キーワード検索によってそれを解決。問題点としては開催地でない場合も、イベント情報に地域名の文字列がある場合にヒットしてしまう。

また、絞り込み検索も日付とキーワードでの AND 検索が不可能であるようなので、日付とキーワードを指定した場合に OR 検索となり、どちらかにヒットしたものが全て表示される。これは検索者の混乱を招く恐れがあるため、別々に検索するインターフェースを用意することでそれを回避しようと試みている。

検索結果表示の際のユーザーインターフェースによるの解決案

検索結果は現在は多い場合でも20件弱の場合が大半を占めるため、ページ送り等による結果の分割を行わず、全て一画面で表示することが好ましいと思われる。

各イベントには個別のページが用意されており、詳細情報の閲覧ができるので、検索結果での情報は基本的なものに抑えた。また、一覧性を確保するため、結果の初期の状態では、イベント名と、リード文（ATND ではキャッチというラベルになっている。また、リード文のない場合は詳細情報を一部抜粋）のみの表示にした。

ただ、イベント名とリード文のみでは情報の不足が否めず、不足した情報のみでの検索結果と詳細ページの行き来を行うのは冗長であると考えられるため、イベント情報のクリックで非同期で詳細情報の一部を閲覧できるようにしている。

その際に表示する際のトランジションは最小限に抑え、瞬間的に表示されるようにした。逆に非表示に切り替えるトランジションはアニメーションで閉じていくのが分かるようにした。当初そういったトランジションは冗長であるため、不要かと思ったが、表示に比べ、非表示になった際のページの高さの変化が瞬間的であると、それ（情報が非表示になったこと）を認知することが困難であるか、もしくはそれが分かるまで一瞬の混乱が起こると判断したため、あえて、時間を犠牲にしてでもアニメーションが必要という判断をしている。