縁の下のUIデザイン―少しの工夫で大きな改善!

第8回 動きによる楽しさの演出―コンテンツの変化,操作へのフィードバック

この記事を読むのに必要な時間:およそ 2 分

UIデザインのクオリティを高める目的は,ユーザーにとっての使い勝手を良くするためだと思います。しかしUIデザインのクオリティは,使い勝手だけでなくさまざまな部分に影響があります。

中でも,ユーザーが受け取る「印象」は,サービスにとって大切な要素です。特に「このサービスは楽しそうだな」⁠このサービスを使っているとワクワクするな」と感じてもらわなければいけないことは多いと思います。

しかし,サービスを作る過程において,⁠わかりやすいか,使いやすいか」と比べると,⁠楽しいか」という観点はなかなか意識されないと感じます。楽しいという感覚は,相対的に考えることや数値で置き換えることが難しい観点なのかもしれませんが,大切な要素です。

デザインの工夫により「楽しさ」をより上昇させるための方法はいくつもあります。⁠色」⁠フォント」⁠文章の体裁」⁠レイアウト」などさまざまです。今回は,その中でも「動き」について紹介します。

ユーザーがサービスを使う中で,いろいろなコンテンツを見たり操作したりすることで,動きによる楽しさを実感します。サービス全体からすると小さなことかもしれませんが,ユーザーの気持ちに働きかける効果は大きなものになると考えます。

変化があるコンテンツ

ユーザー数,アイテム数,価格など変動する要素を用いることで,サービスの盛り上がりを通して楽しさを表現できます。また,そのサービスがユーザー投稿型であれば,それを利用することで賑わいを演出でき,楽しさが表現できます。

図1は,ナビゲーション中心のUIに対して少しずつ変化を付けた例です。

図1 情報の変化と楽しさの変化

図1 情報の変化と楽しさの変化

(a)はナビゲーションしかありません。自分の求める情報にアクセスしやすいという点では効率的かもしれませんが,ユーザーが毎日訪れても変化を感じることはできません。

(b)はナビゲーションだけだった情報に日々変化する来園数を出したパターンです。数字が出たことでナビゲーションの位置が下がってしまいましたが,変化があり生きているサービスに感じられます。

(c)はさらに,毎日更新される「今日の見どころ」を出しています。あえて毎日変化する日付を入れることによって,アクティブな印象を与えています。しかし,ナビゲーションの位置自体は下がってしまったため,次の画面にいくアクセス経路としてのUIという観点では不便になったとも言えます。

こういった場合,ホーム画面には更新される情報を優先し,固定された項目は画面上部にハンバーガーメニューで表示させることが増えています。

テーマで投資ができるサービスFOLIOでは,トップページにここ1年間の株価の変動数値が出ています図2)⁠エンターテイメントとしての数字表現ではありませんが,株という真面目なテーマに数字という変動感を入ることが見る人にとっての楽しさにつながっていると感じます。

図2 FOLIOのスマートフォン用Web

図2 FOLIOのスマートフォン用Web

コスメ・美容の総合サイト@cosmeのiPhoneアプリでは,クチコミ数が画面上部に表示されます図3)⁠

図3 @cosmeのiPhoneアプリ

図3 @cosmeのiPhoneアプリ

クチコミ自体が画面に表示されていなくても,数値の上昇がユーザーに伝わることによって,サービスが賑わっている感を演出できると考えます。

著者プロフィール

池田拓司(いけだたくじ)

デザイナー。多摩美術大学を卒業後,ニフティ株式会社,株式会社はてなを経て,2012年にクックパッド株式会社に入社。2013年デザイン部長,2014年ユーザーファースト推進部長・執行役。Sassを使ったUIフレームワークの構築,Webアプリケーションなどサービス全体の設計,ユーザーのほうを向いたデザインやサービス開発の組織づくりにも努める。2017年4月に独立し,Design & Life inc.を設立。インターネットサービスをはじめとするさまざまなデザイン業,およびサービス開発などに取り組んでいる。

Design & Life inc.:http://designandlife.co.jp/

コメント

コメントの記入