![見出し画像](https://assets.st-note.com/production/uploads/images/110466199/rectangle_large_type_2_0efc66022f9d4d9867d560f62fc69cfc.png?width=1200)
Photo by
naotanu
ジュニアUIデザイナーが、noteを分析してみた[検索結果編]
前回の検索画面分析に引き続き、今回は検索結果画面について見ていきます。
「記事」
![](https://assets.st-note.com/img/1688990504474-5Iu9kgcy1K.jpg?width=1200)
検索バーの下にSecondary tabを配置するのはガイドラインに即した基本設計
検索時の情報階層分けとしてよく使われる。複数選択を意図しない場合は、ChipsではなくTabsの方が適しているのかも。
![](https://assets.st-note.com/img/1688990626580-MegqetZHrS.png?width=1200)
検索結果のUIリスト内について
![](https://assets.st-note.com/img/1688990737284-dqPadn1OIu.png?width=1200)
検索結果に出てくる情報は、おおよそ読者の興味に近い内容が表示される。
なので、詳細画面に行く際のギャップを防ぐために情報を配置する必要がある。
その際の観点として、5W(when/where/who/what/why)とどんなアクションを取ると満足度向上するかを考えるとMECEに考えれるかも。
「マガジン」「クリエイター」
フォローボタンの位置が名前の横にある理由
![](https://assets.st-note.com/img/1688990868746-4Wq9xugKao.png?width=1200)
目線の流れ的に「アカウント名」「説明文」の後である1番下にフォローボタンを配置した方が良さそう。しかし、そのデメリットとして高さが増してしまうので閲覧性が低くなることが挙げられる。
また、クリエイター対してのフォローなので、クリエイターのアカウント名が配置されてるところの付近に配置するのも違和感はない。よって、アカウント名の横でも問題なしという感じかなぁ。
以上が、noteの検索結果画面の分析になりました。次回は詳細画面の分析をしていきます!