読者です 読者をやめる 読者になる 読者になる

No Web Service No Life

クラウドソーシングサービス「ランサーズ」のプロデューサーです。Webサービスや構成要素(UIや技術)について書いています。

色々なWebサービスのヘッダーデザインまとめ

Webサービス UI

色々なWebサービスのヘッダーデザインについてまとめ、分類してみました。
分類の主軸は、アクティビティアイコンがどこに配置されているかです。
アクティビティアイコンとは、Facebookでいいねが押されたりメッセージが来たりした時に、赤い数字で通知してくれるアレのことを指しています。

アクティビティとプロフィールアイコンがセットで右側

よく見る配置であり、個人的には一番しっくりくる位置です。

Hatena

f:id:kkino0927:20130810173817p:plain


KICKSTARTER

f:id:kkino0927:20130810173806p:plain


nanapi

f:id:kkino0927:20130810173807p:plain


Qiita

f:id:kkino0927:20130810173819p:plain


airbnb

f:id:kkino0927:20130810173820p:plain


Gidsy

f:id:kkino0927:20130810173803p:plain

Fancy

アクティブアイコン画像がユニーク。プロフアイコン隣のギザギザしているやつです。
f:id:kkino0927:20130913171023p:plain


アクティビティアイコンの位置が左側

少数派ですが、Facebookで使い慣れているからか、特に違和感はないです。

Retty

f:id:kkino0927:20130810175222p:plain


Sumally

f:id:kkino0927:20130810173812p:plain


コーヒーミーティング

f:id:kkino0927:20130810173818p:plain

コーヒーミーティングは提示方法が変わっていて、多くのサービスがアイコンをクリックするとポップアップで内容が提示されるのに対して、画面が右にスライドして、左サイドに通知内容が提示されます。
f:id:kkino0927:20130810173808p:plain


ココナラ

メッセージのみですが、ロゴの横に提示されています。プロフィールアイコンと離れているのが珍しい配置です。
f:id:kkino0927:20130810173816p:plain



アクティビティアイコンの位置が真ん中

珍しいデザインです。開いた時のポップアップが画面の中心にかぶるので、少し見にくいかもしれません。

pixiv

f:id:kkino0927:20130810175616p:plain


fiverr

f:id:kkino0927:20130810175628p:plain


プロフィールメニューの内容

多くのサービスで、プロフィール画像+ニックネームという形でプロフィールメニューへの導線が設置されています。内容もほとんど統一されており、以下を含んでおけば、今日のWebサービスの使い勝手としては親和性が高くいいと思います。

  • マイページ/プロフィール
  • プロフィール編集
  • アカウント設定(メール受け取るかなど)
  • ヘルプ
  • ログアウト

サービス固有のアクションが追加されていることも多く、Wantedlyであれば応募履歴、airbnbであれば旅行履歴が追加されています。
f:id:kkino0927:20130810173815p:plain


その他

プルダウンがあるメニューとないメニュー

Rettyのヘッダーメニューでは、マウスオーバーでプルダウンがでるものとでないものがあります。でるものは「アカウント▼」のように、▼でプルダウンがあることを提示しています。逆に、プルダウンがないメニューは、個別のアイコンをメニュー名の頭に置いています。
f:id:kkino0927:20130810180926p:plain

アクティビティアイコンクリック時の挙動

ほとんどのサービスが、ポップアップで最新数件の内容を表示してくれますが、airbnbやGidsyは、クリックするとすぐにメッセージ画面等に遷移してしまうので、ビミョーかなと思いました。。。ポップアップ内に「もっと見る」といったリンクを設置し、必要に応じてページ遷移が発生するつくりだとユーザとしてはありがたいです。

未読数の提示方法

数字のみでダイレクトに提示するサービスと、アイコンの上に数字をオーバレイするサービスとがあります。前者はWantedlyやQiita、後者はFacebook等があります。
個人的にはアイコンパターンの方が好きです。数字ドーンだとデザイン的に浮いている感じを受けます。



Facebookの実装で当たり前となったアクティビティ通知。ヘッダー内の要素も増えてきて色々と悩みますが、世の中に広く出回っている = ユーザが慣れ親しんでいるパターンがいくつかあるので、参考になると思います。

広告を非表示にする

最新のWebサービス・スマホアプリの情報が毎日メールで受信できるキュレーションサービス『Service Safari』を運営しています。
エンジニアを募集していますので、ご興味のある方はFacebookやTwitterからご連絡ください。