このエントリーをはてなブックマークに追加

Design UI UX

DailyUIシリーズの第7回です。
前回はこちら
 
第7回のお題は「Settings」。設定画面です。  
私は自称UXプログラマーなので仕様とユーザー体験にフォーカスして調査&手書きでUIを作っていきます。
流れは下記です。

では、やっていきましょう。
 

設定画面が必要な理由

なにかを設定する必要がユーザーにあるから。

 
例えば、通知機能。
あるユーザーにとっては通知して欲しいが、通知しなくても良いと思っているユーザーもいる。 こういう機能がある場合は設定画面が必要になる。機能を作るときに特定のユーザーにとっては不要だったり、体験を損ねるかもしれないとなったときにユーザーが設定できるように設定画面の必要性が出てくる。
 

設定画面がいらないサービスを考えてみる。
ユーザー登録無しで利用できるサービスだったら、設定画面自体はないかもしれない。基本的には設定したデータがユーザーデータに紐づく可能性が高いので。 設定画面がない大規模サービスなんてないんじゃ…

設定画面に必要な要素 

設定が必要なサービス=会員登録が必要なサービスと仮定すると、
ログイン情報の変更(メールアドレス、パスワード)

 
SNSログインとかが可能であれば、SNSログインとか。
それ以外だと、メール配信や通知機能、プロフィール情報の変更機能かなー。

理想の設定画面における体験とは?

設定がとても楽なこと。
色々設定できるのであれば、階層が分かりやすいこと。
 

通知オンオフがチェックとか、タッチで設定できなきゃきついし、入力があるならできる限り補助があって欲しい。設定できるのは良いが、階層がめちゃくちゃだとかなりきつい。 ユーザー側はどこで設定できるのか分からないために、離脱 or サービスへの問い合わせが増え、ユーザーサポートは設定できる場所の説明に苦戦する。 そして、機能が追加されるたびに設定画面が複雑化し、最終的に設定画面をすべて作り直すことになる。(作り直してくれるならまだマシ笑

色々なサービスのユーザープロフィールを調査してみた

Webサービス中心に調べてみました。

【調査対象】
Twitter, Linkedin, Instagram, Facebook, Pinterest, Pixiv, Google検索, Netflix, Youtube, niconico, Amazon, メルカリ, ZOZOTOWN, はてな, Medium, Note, Qiita, Devto, Reddit, DMM, PornHub, Xvideos, GitHub, Paypal, Green, Wantedly, Filmarks

複雑なサービスの設定画面すっごい。
これだけのデータをまともに表示しようとするのかなりつらいってぐらいの量を構造化して設計していて、Amazonとかの設定画面リニューアルしてとか言われたら、ほんときつい笑

 
調査前は「設定」というボタンかメニュー名があるものだと思っていたが、実際はアカウント情報やプロフィールに集約されていて、サービスによって違うのがちょっとした学びになった。 これはサービスによって設定情報が少なかったりしたら、プロフィール編集に設定も入っているで問題ないという判断なんだと思う。

 
設定の大項目をどう設計しているかという点でいくつかに分けることができた。

  • ヘッダー型
    Hatena, note, Pixiv, Reddit
    個人的にあまりメリットを感じられていないが、横幅が狭められるのと、大項目から大項目へ移動しないんだったら、良いのかもしれない。

 
hatena
 

  • サイドメニュー型
    devto, DMM, Facebook, Filmarks, GitHub, Google検索, Green, メルカリ, Qiita, Twitter, Wantedly, Youtube, ZOZOTOWN 多そうだなと思っていたが、圧倒的だった。個人的には慣れていてとてもわかりやすい気がする。設定項目が多ければ多いほど、階層型みたいな形で表示できるのでユーザーは理解しやすいと思う。デメリットは、横幅を取ってしまうことと項目の粒度を考えるのが結構大変そう。

devto
 

  • ヘッダー・サイドメニュー複合型
    Linkedin
    とてもめずらしい。その他にも際どいのはあるが、きれいに複合型になっているのはほぼ無さそう。サイドメニューあるのに、ヘッダーいらなくね?という気持ちはある。  

Linkedin

  • メニュー無し(項目名+詳細のみ)
    Medium, Netflix
    これはこれですごい。Netflixは項目が少ないのでわかるのだが、Mediumは項目数結構あるのに、サイドメニュー作らず1ページ。全体的にシンプルだし、ブログ読む人達だからそれで良いのかもしれない。  
    Medium ※ この下がとても長いので、ぜひ見てみてください
     
  • その他
    Amazon, Instagram, niconico, PayPal, PornHub, Xvideos
    Amazonはね、Amazonだからね、仕方ないねって感じ。
    その他のやつは大概カラムが多かったり、押すと開くみたいなメニューだった。

Amazon

 

基本的には、設定数が少ないのであればメニュー無しで、多くなってきたらサイドメニューを導入するでWebは良い気がする。 今回はあえて考えていないが、これがモバイルも考慮すると結構難易度が上がるなぁという感じ。

 

私が考えた最強のユーザープロフィール

おまけです。
前回と同じですが、映画のサントラサービスの設定ページをイメージしてみました。
気をつけた点は下記。

  • シンプル
  • SNSなのでNotificationを入れた

手書きで設定画面作るのなかなか厳しい。画面的な問題で。実際に作るときはもっと悩みそう・・・。
 
DailyUI007
 

レビューお待ちしております!

色々ご意見いただけると嬉しいです。こんな例もあったとかあれば教えてください!

次は第8回です。
(書いたらリンク載せます)

このエントリーをはてなブックマークに追加

© 2018, Udayan28