プロデュース

Foursquareのチェックインボタンの挙動を通して気がつくユーザインターフェース設計の考え方

FoursquareのPCサイト

FoursquareのPCサイト

What's Foursquare?

Foursquare」というスマートフォンアプリがあります。
携帯のGPSによる位置情報を使ったゲームのようなアプリで、駅などのランドマークに来た時に「私はここに来ました」というような情報を残していくものです。

その「ここに来ました」という情報を残す作業を「チェックイン」と呼称しています。
また同じ場所に沢山くると「メイヤー」(=市長)として、「その場所の主」のような称号を得ることができます。

この「メイヤー」は自分より他の人がその場所に沢山行くようになれば、その人に移転してしまいます。

また色々なチェックインの内容によっては、「バッチ」と呼ばれる、「移動距離が多いで賞」「カフェ一杯行ってるで賞」的なモノももらえたりします。

この「メイヤー獲得」と「バッチ獲得」がこのFoursquareのゲーム性を上げて、どこかに行ったら「チェックイン」というような行動を引き出しています。

チェックインをする時の挙動のユーザインターフェース

Foursquareの紹介記事ではないので、説明はこれぐらいにして、先日このチェックインをする時の画面でふと気が付きました。


iPhoneにおけるFoursquareのチェックイン画面

iPhoneにおけるFoursquareのチェックイン画面

上の画面はiPhone5のおけるFoursquareの画面ですが、それだけを見ると、チェックインのボタンは画面の右上のあります。
この場所にあるのは、2013年6月15日時点のアプリのバージョンなのですが、以前のアプリのバージョンではここにありませんでした。

そして実はキーボードのギリギリ上の方に緑の横棒のようなものがありますが、実はこれも「チェックイン」のボタンなんです。

How to CheckIn?

Foursquareでチェックインするには、

  1. アプリを起動
  2. 現在地を検索するボタンを押す
  3. 画面上部に地図、下部にその界隈のランドマークの選択肢が表示
  4. その中から該当のランドマークの名称を選択

とします。
で、手順の4番目のランドマークを選んだ後が下のものなんです。


場所選んだ直後のFoursquareの画面

場所選んだ直後のFoursquareの画面

この時点で「チェックイン」をすることも出来るのですが、「ここに来た時の一言」を残すことができます。
その為には地図上の吹き出し部分をタップするのですが、その結果、画面の下部にキーボードが出てくる訳です。

その時、慣れていない人は恐らく「あ、あれ?チェックインボタンがキーボードの下に行って、チェックイン出来ないやん!」となったんだと思います。

キーボードの「完了」を押せば大丈夫なのに・・・はユーザインターフェースとして正しいのか?

Foursquareの最初のキーボードが出ていた画面、実はここでキーボードの右下の「完了」を押すとこのキーボードは下がって、二枚目のFoursquareの画面になるんです。

でも、その「完了を押せば」ってのが分からない、気が付かない方がきっと多数出たんだと思うんです。

その結果として、キーボードが出ている画面の時には画面の右上に「チェックインボタン」を表示させるようになったと思います。
案の定、完了を押すと画面「右上」のチェックインボタンはフェードアウトして消えます。

ただ「アプリとしての挙動」だけを軸に考えれば「画面表示時のキーボード有無」というのはあるものの、「同じ画面にチェックインボタンが2つある」事になります。

正確に言えば、

同じ画面に、同じ機能のボタンを二箇所、しかも大きさも異なるものを配置する。

ということになるわけです。

これは「機能として動くもの」だけを考えている思考ではそもそもこの発想は出てこないと思います。
だって要らないから。

更に言えば、下手に頭の硬いエンジニアとかと話をすると、「なんで同じボタンを二箇所に置かないと駄目なの?」と実装することに拒絶反応すらする人もいるのではないか?と思います。(名村は2000年前半ごろにこの話に近しい内容で当時のエンジニアと喧嘩したことがありますので・・・(笑))

使ってくれる人に寄り添う気持ちこそがUI設計の源泉ではないでしょうか?

ユーザインターフェース設計は結局「どのリテラシーの人を対象にするか?」を真剣に想像出来るか?が肝心なんだと思います。

そしてその人達が「少しでも便利に」「少しでも気持ちよく」、そして「少しでも迷わず」使えることを考えぬくことがユーザインターフェース設計の源泉になっているのではないかと思います。

ユーザインターフェース設計というと「グローバルナビゲーションが・・・」とか「サブナビゲーションが・・・」とか「フッターリンクエリアが・・・」といった方に行きがちですが、そもそもの原点はどこか?というのが自分の腑に落ちれば、それはあくまで手段・手法であることに気が付きます。

場合のよっては「ボタンの表示するラベルの文言」を考えることですらユーザインターフェース設計になってくる訳です。

となれば、それは「ディレクターだから」とか「デザイナーが」とかってことではなくて、エンジニアであってもテスターであってもそれぞれに出来る分野でユーザインターフェース設計には関わっていくことが出来るんだと気が付きます。

「ユーザ視点」という言葉がありますが、それは更に言えば「ユーザの気持ちの寄り添う事」ではないかな?とこのFoursquareの「チェックインボタンのあり方」で気が付かせてもらいました。


名村晋治のプロフィール

Webディレクター 名村晋治

株式会社サービシンク

代表取締役 / テクニカルディレクター

名村晋治

1996年よりWeb制作に携わり、キャリア28年目のWebディレクター

2010年に不動産業界特化のWeb制作会社「サービシンク」を設立して、今も現場でディレクターとしてPMをしています。

詳しいプロフィール

大学在学中の1996年「Web制作集団ネイムヴィレッジ」を設立し100社を超えるサイト制作の企画、ディレクション、デザイン、マークアップ、システム開発に携わる。

2000年不動産検索サイトHOME'Sを運営している株式会社LIFULL(旧:ネクスト)に合流。
2005年からは都内のWeb制作会社に合流し取締役を歴任。同社ではフロント実装からディレクションまでを担当。

2010年東京のWeb制作会社・ホームページ制作会社、株式会社サービシンクを立ち上げる。 不動産業界に特化したサイト制作の、アートディレクション~HTML実装設計~システム設計のすべてに携わるジェネラリスト。基軸としてはクライアントの商売に寄り添う為に、徹底的に思考を巡らせる為のディレクションを行う。

Webブランディングの入門教科書」、「変革期のウェブ」を「マイナビ出版」から出版。

2000年から「Webディレクター育成講座」を独自開催し、40時間のカリキュラムを通し「仕事を回す事ができる」Webディレクター育成手法には定評があり。
首都圏のみならず地方でも講座実施、参加者は延べ700人を超える。 もう一つのキャリアとしてプロとして舞台俳優、声優。 1996年から養成所に通い始め2004年に廃業するまでの間はWebディレクターと二足のわらじでの活動。

俳優としては、東京の小劇場でシェイクスピアやマリヴォーといった古典を中心に舞台に出演、また声優としては大きく活躍できる程ではありませんでしたが、NHK海外ドラマや、洋画等、ゲームでの声優を行っていました。

最新の記事

Webディレクター育成講座

900人が受講をし、28年のキャリアを学べる『Webディレクター育成講座』
*/