アイキャッチ_note

【UI観察】 Pinterestはなぜ気持ちいいのか?

こんにちは。がくさかい(@s678g10)です。
現在、都内の大学で電子工学を学びながら、個人でアプリを開発したり、デザインしたり、まあなんか色々作ってる大学生です。最近はUIについて勉強しています。

ユーザーインターフェースのデザインを勉強中のペーペーが書いている記事ですので、つよいUIデザイナーの方々、是非是非FBをいただけると僕はとてもとても喜びます・・・・!

さて、本題

僕はiPhoneを使っていて「気持ちいい」と感じるアプリとそうでないアプリがあると思うのですが、その「気持ちいい」を生み出す要因を知りたい(自分でも作りたい)のでまずは山ほどあると思われるその要素たちを言語化して整理みようかなと思いこのnoteを書いております。

今回は僕が使っていて気持ちいいと感じた「Pinterest」についてのUI観察、およびそこから感じた「UIの透明性」についての考察を行って行きたいと思います。早速いきましょう!

ホーム画面について

どうやってもお尻に目がいってしまうホーム画面のスクショ


ホーム画面はピン一覧画面になっています。観察した結果は以下です。

・ピンをタップするとピン詳細画面に遷移
・テキストフィールドをタップするとテキスト検索画面へ遷移
・ピンの横幅は全て同じ。ピンの画像は横縦比を保ちそれに合わせて縦幅が決められている。(縦幅は限界値がありそれより長いものは見切られる)
スクロールバーが無い
スクロール時に新しいピンの読み込みがかなり早い段階で行われている
画面を下方向に一定量スクロールすると、検索バー・タブバーが上下に逃げて消える(上方向にスクロールすると、また表示される)
・検索バー・タブバーが消えた状態で一定時間画面を触らないとタブバーが出現

いきなりかよ!!と思われるかもしれませんが、この「ピン一覧画面」はPinterestをPinterestたらしめる画面だと思います。

このピン一覧画面は無限にスクロールすることができます。これは最下部にたどり着く前に自動でピンの読み込みが行われ、新しいピンがどんどん出てくるという機能で実現されています。(かなり早いスピードで下までスクロールするとインジゲータが見えますが、普通に使う分にはまず出会いません)


他のアプリの近しい機能に「もっと読み込む」というボタンでの読み込みや最下部までたどり着いてから自動読み込みといった機能があると思います。

いろんなところでのローディングのUI
(googleはアプリじゃないけど許してちょんまげ)


しかし、Pinterestのローディングは体験としてそれらとは似て非なるものだと思います。なぜなら
コンテンツを読み込んでいる状態がまずユーザーに知らされないからです。

つまり、ユーザーの注意の所在がコンテンツから剥がされません

いつの間にか」読み込みが行われている。これはユーザー側の意識に登ってこないという点において「透明」であると言えます。

さらに、コンテンツの「区切り」が感じられないので没入感がかなり変わってくると思います。
Pinterestはこの「区切り」を感じさせないためのデザインをかなり意識していて

・スクロールバーが無い
・ピンのローディングを感じさせない(無限スクロール)
・ピンの大きさ(縦幅)のばらつきで必ずちょびっと見えてるピンが出てる

これらは全て、区切りを無くすデザインとして機能していると思います。

さらに、一定量のスクロールで検索バー・タブバーが上下に逃げることで本当に画面内がピン一覧のみになるというのも相まって、コンテンツへの没入感はかなり高いものになっていると感じました。

コンテンツへの没入感を高めるというのは逆に言えばUIの透明性が高くなっているということであるのかなと僕は思います。

あるシステムにおいて必要な入力/出力の数(複雑性)は変わらないという「複雑性保存の法則」の中で、操作性を上げる解決策としては必要な入力をユーザー側からシステム側に移すという方法があります。
今回はユーザーのスクロールという必ず行うであろうアクションをトリガーに次のピンを自動で読み込むようになっているので、入力の量自体は変わっていないのですが操作としては少なくなっている(=透明性が上がっている)のだと思いました。う〜ん、セクシィだ・・・。

ピン詳細画面について

ピンの詳細画面

この画面においても、ビジュアル的なルール等の観察は置いておいて機能的に気持ちよさを出していると思った部分においてのみ書きます。

このピンの詳細画面の最下部には「似ているピン」というセクションがあります。ここがめちゃおもろいのですが、このセクション部分まで行くとナビゲーションバーの表示が自動的に以下の様に変わります。

まじかよPinterest......!!!

そして、上図のように画面構成・機能としてはピン詳細画面の前の「ピン一覧画面」と同じになります。このピン一覧画面もホーム画面のトップと同様に無限にスクロールすることができます。

なにがめちゃおもろいのか?


実際に画面遷移をしている訳では無いのですが事実上の遷移・ページ目的の変換が行われている点だと思います。
ピンの詳細を知る目的の画面にいたのが、いつの間にかピンを探すという目的の、そしてとても見覚えのあるピン一覧画面にすり替わっています。(すり替わっている表現が正しいかは分からないですが.......笑)

こうして、自分にアイデアをくれるピンを探す無限の旅がはじまります。
Pinterestのアプリは基本はこのサイクルです。
どこにいっても、必ずピン一覧→ピン詳細→ピン一覧....... というサイクルに入ります。

いつの間にか」というのとても重要で、この画面も遷移という明示的なアクションをユーザー側が起こさなくてもページの目的が「いつの間にか」変わっている・元のピン一覧(実際には違うが構成は同じ)に戻っていると点において、透明感のあるUIであると感じました。

アプリの目的は1つ(余談)

よく言われているアプリの目的は1つに絞るべきという話がありますが、観察していてPinterestはこれを体現できていると感じました。AppStoreのPinterestのPR文言は以下の通りです。

「無限」に見つかる、アイデア探しツール

PinterestのUI観察をしていく上で、この目的のための画面構成・機能を持っているとひしひしと感じました。
このようにアプリでユーザーに与えたいUXをしっかりと目的にすえて、そこから機能要件を抽出し、シンプルにアプリに落とし込む....というのは頭では分かっていつつもなかなか難しいものだと思います。(自分も個人でリリースしたアプリを作りながら感じました.....南無。)

と同時に、逆にユーザーに何をさせたいのかを使っていて感じ取れるアプリは使っている側も分かりやすく気持ちの良いものになると思いますし、目的をブラさずにUIに落とし込めているアプリなので訓練としてのUI観察にはもってこいのアプリなのかなと思ったりしました。

余談おわり。

テキスト検索画面について

テキスト検索画面
(ガチの余談ですが、僕の磯山さやかのボードはピンの数が世界一多いと思います。全世界の磯山好きのみなさんこれからもよろしくお願いします。)

テキスト検索画面への遷移はホーム画面の検索バーにある、テキストフィールドのタップによって行われます。
ここで、テキストフィールドにテキストを打ち込み、検索文章を確定すると検索というアクションを起こさなくても、まずリアルタイムで(正確にはテキストの確定で)関連する検索ワード・ボード・ユーザーが表示されます。

その後、検索テキストの確定後に変化するキーボードの検索ボタンか、表示されている関連の検索ワード・ユーザー・ボードのタップによって検索結果の画面(ピン一覧画面)への遷移が行われます。

これについてはInstagram Twitter などを見てもわかるのですが、モバイルのアプリはだいたいこの作りになってますね・・・・。

検索画面の例(左: Twitter, 右: Instagram)

おすすめのアイデアのタグについては、タグをタップすると自動的に現在の検索ワードの後に追加、さらに検索された結果の画面に遷移します。

おすすめのアイデア
(左の画面のタグを押すと右の画面になる)


この画面における気持ちよさを生み出している点ですが、「検索」というアクションを行うボタンが隠蔽されている点だと思います。

こういったデザインはタグやそれに関するボード/ユーザーというオブジェクトの選択に検索の実行というアクションを包括させている点でユーザーの操作が一つ少なく(透明性が高く)なっているのかなとか思いました。


気持ちよさはUIの透明性より生まれる

コンテンツの価値をユーザーに伝えるためのインターフェースを作るという点において、UIはあくまで「脇役」だということを忘れてはいけないと感じました。「主役」はあくまでコンテンツで、いかにその良さをユーザーに伝えるのかということを考えた時、気持ちよく・心地よい透明なインターフェースでコンテンツが与えたい体験を伝えるというのが正しい方向性だと思いました。
HIGでも同じことを言っていますね....先人は偉大です。。。。。

そして、いかにUI に「透明性」を出すか?ということを考えた時に、ユーザー側の入力をいかにシステム側に移せるかユーザーが必ず行うアクションにいかにトリガーを溶け込ませるか、という点を考えると良いかもしれないと感じました。

必要なアクションにトリガーを溶け込ませている例としては、


・AirPodsの起動(蓋を開ける→AirPodsの起動)
・iphoneのロック解除(ボタンを押してロック解除を開始→ボタンに指を乗せて指紋認証)
・iphoneの「持ち上げるとスリープ解除」機能
・ブックアプリ(iOS12 beta)のセミモーダル(ダイアログ?)の下スクロールによるセミモーダルからの完全遷移
・スクロールオフセット0での挙動(今日のApp,Twitterの画像 etc...)

とかがあると思っています。これらは綺麗に、そしてセクシーに溶け込んでてすぎょい・・・・と思います。(そして、やっぱappleすげーや)
これらについてもまた考えてみます。

まとめ

21の夏、僕は透明なUIのセクシーさを知った。

今回のPinterestのUI観察では、気持ちよさを生み出す要素として「UIの透明性」があるという部分についてのみ書きました。
気持ちよさを生み出す要素はこれだけでは無いと思うのですが、これからUIデザインを行う上で今回の要素は常に頭の中に入れておくべきだなと感じました。
これからも心地よく、気持ちいいユーザーインターフェースを生み出す要素を見つけて、自分のUIデザインの根拠にしていけたらなと思います。

ここまで読んでくださった方、ありがとうございました。
一応これで初noteの投稿はおわり!!!乱文失礼!!!

ここは違うんじゃない?とか、こういうのもあるよ!とか、是非是非FBをもらえるととても勉強になるので嬉しいです!! それでは。


ps.僕がデザインから実装まで行って初リリースした「MeTime」というアプリがあるので、もしよかったら使ってみてください!(結構手探りで作ってしまい、まだ原型なのですが改修を行うにあたってもっと根拠のあるデザインを行いたい・UIの根本的なところを知りたいと思い現在勉強しているのです・・・・。笑)

appStoreはこちら

UIのこととかブツブツ呟いてるTwitterはこちら



この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

【スキ占い】小吉!!
93

がくさかい

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
6つ のマガジンに含まれています

コメント2件

仕事でUIデザイナーをしているものです
面白い記事をありがとうございました。

僕もPinterestが好きでよく使ってるのですが、
「気の向くままに探索できる感」が凄まじいですよね。

その秘密に迫る考察に触れられた気がして面白かったです。
いっくんさんFBありがとうございます!!僕もPinterestはものすごい気持ちよさがあると思っていて、いっくんさんのおっしゃられてる感覚がまさに!という感じでした笑
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。