WebのUIについて考えてみる

最近、UIに関しての記事やLTを見かけることが多くなりました。みなさんの知見が素晴らしく、とても勉強になっています。

ただ、アプリのUIに関しての内容が多かったので、WebのUIについて少し考えてみました。
※ここでWebと表記しているものは、スマホのブラウザ上で閲覧、操作するWebサイト(ECや予約サイトなど)を指しています。

私自身、Webを中心にECや価格比較、サロン予約サイトなどのグロース、立ち上げを経験してきました。(Webが9割ですね...)
その中で、アプリとは違う視点が必要だなと感じてきたのでまとめてみました。

もちろんデザインの原理・原則的なものは共通だと思いますので、他の方々の記事やLTなどを参考にしていただけば。

コンテキスト

まず、一番の違いはここではないでしょうか。
アプリの場合、「サービスを知って興味を持ち、インストールしてアプリを立ち上げ、ホーム画面が表示される」といった感じですよね。

対してWebは、到達への経路が多岐に及びます。
・気になったキーワードを検索
・広告に興味をもってクリック
・SNSでシェアされたURLをクリック
など、他にもたくさんの経路が存在します。

ここで重要なってくるのが、
「サービス自体を認識している場合が少ない」
「ランディング先が多様である」
ことです。

例えば、家族で旅行する際に「子連れok 箱根 旅行」と検索したとしましょう。

検索結果はどうでしょうか。
予約サイトもあれば、メディアサイトも出てきます。

この時、サービス名を丁寧に見てクリックするでしょうか。
おそらくタイトルに惹かれたものをクリックしますよね。
広告なども同様に、クリエイティブに惹かれている場合が多く、サービス自体を認識している場合は少ないかもしれません。

その場合、どのタイミングでユーザーにサービスを認知をしてもらうかが重要になってきます。
(ランディングのタイミングなのかCVに近いタイミングなのかなど)
アプリの場合は、どのアプリを使うか意識して立ち上げている場合がほとんどなのでスタート時点でかなりの違いですよね。

また、期待値とコンテンツの不一致や、他の情報も見たいといった場合に、ユーザーは容易に離脱します。
これは意外と重要な気がしていて、検索結果 > サイトA > 検索結果>サイトBみたいな流れの中では、自サービスの閲覧コストが他と比べて高くなりすぎないよう注意が必要です。
(サイト単体の良し悪しだけでなく、流れの中でどう見えているか)

機能に関しても、他サイトのほとんどが実装している場合などは、決して使いやすいものではなくても「そういうもの」だといった頭がはたらく事を意識したほうがよいでしょう。
(悪いUIでも他がやってるなら習えといった意味ではないです)

ブラウザもアプリ

次にアプリとしての「ブラウザ」を意識することです。
ここではみなさんが良く使っているであろう、スマホのsafariとchromeを指しています。
ブラウザアプリはWebを表示する空箱のような感じがするかもしれませんが、操作する上で重要な機能とナビゲーションが設置されています。

safariとchromeでは、タブバーのメニューが若干違うところが興味深いですね。

私自身がポイントだと感じているのは「ブラウザバック」の使用です。
みなさんWebで閲覧している時、ブラウザバックを使っていますか？
おそらく意識せずに多用している方が多いのではないでしょうか。

ユーザーテストなどをしていると、その使用頻度にとても驚きます。
サイトごとのナビゲーションを使用するよりも、馴染みのあるブラウザバックで行き来する方がよっぽど早くて楽なのでしょう。

たまに上下にメニューが固定されたサイトを見ますが、地獄ですね。。
メニューやCTAを下部固定しているサービスも良く見かけますが、ブラウザのタブバーとコンフリクトしないような設計が必要です。

アプリのように操作性から考えて、下部に設置したい気持ちはわかるのですが、Webとして本当にそこに必要か考える必要があると思います。
ブラウザバックだけである程度行き来できる低階層の設計は重要な気がします。

その他にも、別タブでページを表示する際には注意が必要です。
他サイトの遷移時に使用している場合でよく見かけますが、稀に自サービス内でも別タブを立ち上げるサービスを見かけます。
(一覧ページからの詳細ページを立ち上げる場合など)

私自身、別タブが大の苦手です。
PCであればすぐに削除して戻れるのですが、スマホの場合だとタブ一覧の表示に切り替えて、元のサイトに移動やら削除をしなければなりません。
ブラウザバックであれば1クリックもしくは1スワイプで済んだアクションです。

気づいたら無数のタブが開いていたなんて事ありますよね。
chromeの「すべて閉じる」が実装された時は相当テンションあがりましたw

別タブを安易に使用する事は、ユーザーにストレスを与えてる可能性もあるので必要性を検討しましょう。

遷移の速度

ここもアプリとは大きく違う点ですね。
ネットワークの進歩や、AWS・PWAなどによって昔に比べて、はるかに速くなりましたが、体感的にストレスを感じるサービスはまだまだ多いですよね。

技術的な改善はもちろん大事なのですが、やはり不用意なページ遷移をさせない設計が大事だと思っています。

たまにダンジョンのようなサイトを見かけますが、情報を整理すれば3階層ぐらいで収まりそうなのがほとんどです。(お役所系は多いですよね...)

私が関わってきたサービスだと、構成はほぼこんな感じで収まります。
-----
トップ > カテゴリトップ > 一覧 > 詳細 > カート
-----
一覧 <-> 詳細間の無駄な移動を減らす事が重要だと思っています。
「より詳しく見たい」のと「詳細を見ないとわからない」というのは全く別の事なので、いかに後者の遷移を減らせるかが重要です。
と言っても、一覧での情報過多には注意が必要です。
一つ一つの閲覧ストレスから結果的にビュースルー数が減ってしまう恐れがあります。
出会うべき詳細ページへ辿り着く前にユーザーを疲弊させないようにしましょう。

UIが煩雑になりがち

最後は、少し管理的な問題です。
ある程度規模感が出てきたサイトでよく見かけるのが、ページごとで異なるUIです。いわゆる「秘伝のタレ」現象ですね。

個人的な印象ですが、アプリに比べWebのUIデザインの方が「設計」といった観点で緩い組織が多い気がします。

サービスによっては気軽にHTML/CSSを触れてしまうので、
属人的にデザインが広がってしまう場合もありますよね。
たまに「!important」だらけのCSSを見ますが、ゾッとします。

これはWebの開発/運用の性質上、仕方の無い問題なのかもしれません。
ただ、一度「秘伝のタレ」に陥ったサイト(ある程度の規模)をリデザインするの容易ではありません。

例えば楽天市場。トップ > カテゴリ > サブカテゴリの順です。
さらに商品詳細はご存知の通りです。。
これで違和感を感じなければUIデザインを今すぐやめましょうw
パッと見るだけでそうとう根が深そうですね。

この辺は、社内の歴史や文化に依存する場合が多いので、
大規模なWebのリデザインを実施したデザイナーさんの記事を期待します。

まとめ

今回は「アプリとの違い」という視点で書きましたが、WebのUI設計はSEOやAdなどマーケティング施策と密接につながってます。(アプリとは違う意味で)
アプリよりもWebの方が「刹那的」といった感じですかね。
Webの特性を意識したUIデザインの話でした。

※追記
OOUI的に見るとアプリの場合は、コレクションビューからシングルビューへの切り替えが単一のスクリーンでおなわれる。
一方Webはビューの切り替えには基本的にページ遷移が必要。