TikTokの登録フローを観察する

画像1

今回はTikTokの登録フローを観察して、見た目的なこと、体験的なことをつらつらと書いていこうと思います

単純に有名アプリの登録フローを見るだけでも、自分のアプリのベンチマークなどに使えると思うので、適宜役立ててもらえると嬉しいです!


登録手段の選択

画像3

モーダル式のビューで、スクロールで選ばせる感じ。

スクロールするとタイトルがヘッダーに収まって、ちゃんとスペースを作っているのが流石と思う。

ただスクロールができることに気づきにくいかな‥‥。

次のボタンの頭だけが微妙に見えてるから、かろうじてわかったけどちょっとインパクトに薄い‥‥

全ての機種に対応するわけには行かないだろうけど、次があるとわかるような頭の出し方をデバイスの高さに応じて変えるって必要な作業なのかもしれない。

まぁここにそんなに労力を注ぐ必要があるかどうかは不明だけど‥‥


いざという時のヘルプ

フローとは少し外れるが、右上に常に「?」アイコンが出ていて、これをタップすると「トラブルシューティング」のページが出る

画像3

押すと毎回ローディングが走るので、都度WebからJSONデータでも引っ張ってきているのだろうか?

ともあれ、すぐに問題を解決できるように近くにヘルプを置くのは理にかなっていると思う。

ただ一つわかりにくい点があるとすれば、詳細画面が全体的に薄すぎて操作ができるのかできないのかわかりにくい見た目になっている

画像4

なんとこの「はい」「いいえ」押せるんだぜ‥‥?

「問題は解決しましたか?」も薄いし、ボタンも薄いし、押したら押したで特に確認もなしにいきなり「フィードバックありがとうございます!」だからちょっと驚く。

あと細かいけど「いいえ」の方の画像途切れてないか?

顔文字で直感性を高めているのかもしれないけど、それをやるくらいなら素直に「青と赤」とかの色で染めた方がわかりやすい気がしてならない‥‥


誕生日

画像5

元のフローに戻ります。今回は「Emailで登録」を選択してこの画面に移動しました。

非活性→入力→活性のわかりやすいパターン。

選択肢の範囲は1900/01/01〜2019/12/31まで。(2020/1/31現在)


大体は王道だけど、ちょっとわからないのは入力時にフォームに出てくるクリアボタン

これってメールアドレスみたいな「バックスペース連打しないと間違い直せない系」ではないから、クリアボタンの必要性はないのでないかな?と思う。

まぁもしかしたらテキストフォームコンポーネントを使いまわしているだけかもしれないし、大した問題ではないと思う。


電話・メール

画像6

こちらもよくある感じの切り替えタイプ。デフォルトは電話。

私はメールアドレスの方から進みましたが、実際に「次へ」を押してみるまで「正しいフォーマットか」の判定はされませんでした


ちなみに登録済みにEmailで「次へ」を押すと、以下の画面に遷移されました

画像10


便利だと思ったのは、電話のプレフィックス番号選択画面

タップすると国一覧が出てくるけど、右側に「あいうえお」のインデックスが貼ってあります

画像7

これあった方がスクロールの手間が省けて最高ですよね!

ただちょっと残念なのは、このヘッダーがちょいと窮屈に感じるところ‥‥(国または‥‥の上下のpaddingとか特に)

この前の画面が余白が広々としてた分、こっちが狭いとちょっと「一貫性」に欠ける気がしてしまいます

加えてボタンの色を「タップできること」を示すためにピンク色に染めてもいいような気もします。

ここら辺はリデザイン案件として後から考えます。


パスワード

画像13

特に言及なし


名前入力

画像11

デフォルトで「Emailの@前」が入力されていて、加えてキーボードが出てました。

ここでは入力した名前がユニークである必要があるので、入力と同時に「ユニーク判定する」仕組みがあります

画像12

名前が被っていた場合に「代わりのおすすめ」がキーボードの候補に出てくれるのが嬉しい

ただ惜しむらくは、このテキストフォームには今までフォームに存在していた「一旦クリアする」ボタンがないことでしょうか。

こういう場面でこそ、「一旦全部の文字を消したい!」と思う時があると思うのは‥‥私だけか?


そしてアプリ本編へ

画像12

ここまでお疲れ様でした!🎉

振り返れば「年齢」「メールアドレス(電話)」「パスワード」「名前」と必要最低限でしたね。

やっぱりこれくらいの方がシンプルで素敵な気がします。


フォームのアクティブ・非アクティブ・エラー

画像8

こちらは参考までに

このフローで体感できるHuman Interface Guideline

Modality

国際電話の選択モーダルで私が感じた違和感です。

モーダルだからとはいえ、ちょっと「ずれ」が見えると、場合によっては世界観が壊れてしまいます。

Coordinate the modal view appearance with your app. For example, when a modal view includes a navigation bar, it should use the same appearance as the navigation bar in your app.
モーダルビューの外観をアプリと調整します。たとえば、モーダルビューにナビゲーションバーが含まれる場合、アプリのナビゲーションバーと同じ外観を使用する必要があります。

Data Entry

名前入力のユニーク判定とかはこれが適用されてたけど、メールアドレスのフォーマットチェックには適用されてなかった

Dynamically validate field values. It’s frustrating when you have to go back and correct mistakes after filling out a lengthy form. Whenever possible, check field values immediately after entry so users can correct them right away.
フィールド値を動的に検証します。長いフォームに記入した後に戻って間違いを修正しなければならない場合、イライラします。可能な限り、入力後すぐにフィールド値を確認して、ユーザーがすぐに修正できるようにします。

Color

インタラクティブな操作(タップ)ができるところは、基本的に同じ色を使うことや、操作可能と不可能の場所の色を一緒にしないことなど

Avoid using the same color for interactive and noninteractive elements. If interactive and noninteractive elements have the same color, it’s hard for people to know where to tap.
インタラクティブ要素と非インタラクティブ要素に同じ色を使用しないでください。インタラクティブな要素と非インタラクティブな要素の色が同じである場合、タップする場所を知るのは困難です。


おわりに

今回はTikTokの登録フローだけやりました!

いずれは中身の機能に関するUXもやっていきたいなと思います!

この記事が気に入ったらサポートをしてみませんか?