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制作会社のWebディレクター兼代表取締役。 1994年にインターネットに出会い、1996年、学生4名でのWeb制作事業をはじめ、Web黎明期から多くの大手企業のサイト制作・開発に携わる。 2000年から2005年までは不動産検索サイト「LIFULL HOME"S」を運営する株式会社LIFULL、2005年から2009年までは都内のWeb制作会社の取締役として参画し、2010年に株式会社サービシンクを立ち上げ、代表を務める。 現在もWebディレクターとして現場でのPMを行う。 経験案件規模は直請けで10万円〜3億円。 過去900人以上が受講している「Webディレクター育成講座」は2000年より開催し今年で25年目。 2020年よりWebクリエイターへの情報提供のためのPodcast「Webディレクションやってますラジオ」を毎週金曜23時に配信中。 不動産テック協会 理事 2023年慶應義塾大学大学院経営管理研究科(MBA)取得

@yakumo

関連記事

この記事のハッシュタグ #UserInterface から関連する記事を表示しています。

関連記事

同じカテゴリー「プロデュース」の新着記事を表示しています。

マーケティング視点から見る無料保険のドアノック商材

2026年05月04日

マーケティング視点から見る無料保険のドアノック商材

What I consider to be the best thing about buying Vision Pro!

2024年11月29日

What I consider to be the best thing about buying Vision Pro!

ぬいぐるを使ったアイデア写真はどのように生まれるのか?

2022年03月28日

ぬいぐるを使ったアイデア写真はどのように生まれるのか?

「Webディレクションやってます:blog」リニューアルしました。

2015年04月04日

「Webディレクションやってます:blog」リニューアルしました。

画面上での注意喚起を促す文面の表示の仕方について。

2013年06月15日

画面上での注意喚起を促す文面の表示の仕方について。

NAVERまとめのオロナミンCのバナーがすごい!

2013年06月03日

NAVERまとめのオロナミンCのバナーがすごい!