週末デザインディグ #002 | Pocket

週末デザインディグ #002は Pocketさんです！！いいなと思った記事やWEBサイトを１クリックで保存できる便利な「あとで読む」サービスです🙌

↑自分の保存している記事が丸見えで少し恥ずかしいですが、TOPページ(保存記事一覧)はこんな感じ！

いいなと思ったUX/UI

1. サイドメニューのアイコンがとてもわかりやすい

↑メニュータイトルとアイコンの関連性が抜群なおかげで翻訳をする前にメニュー名を想起しやすいです。

↑こちらは比較用のTwitter UIです。サービスのコンセプトが違うため単純比較はできないですが、ExploreやListsはこのアイコンだけだと遷移先の予測がしづらい気がします。。

2. サイドメニューの選択済み(Selected)UIが良い

↑「サイドメニューを目立たせたくないし、強い色は使いたくない」時でも、このSelected Stateであれば「選択されてる感」を出しつつ、サイドバーの主張を抑えることができます！

3. 豊富なモード

↑テーマは「Light,Dark,Sepia」、リストデザイン「アイキャッチ(小)付リスト,アイキャッチ(中)付リスト,カラム」のそれぞれ三つを自由に選択することができます！

↑ちなみにSepiaはこんな感じ。Clubhouseを彷彿とさせるような色味ですね。お目目に優しい👀

うーんと思ったUX/UI

1. 言語切り替えがどこにあるのかわかりづらい

↑今回のnoteを書くまでまで言語切り替えがどこにあるかわからず、英語表記で利用していたのですが、なんと「保存記事一覧の最下部のフッター部分」にのみありました...

「フッターにしか言語切り替えがない」というそもそもは一旦置いておいて、「もっと見る」ボタンがないこともユーザーがこの機能にたどり着けなくなっている大きな要因です。

スクロールすると保存した記事が自動で表示されていきます。そのため大量に記事を保存しているユーザーは全ての記事を表示させ終わるまでフッターにたどり着くことができません😅

2. ヘッダーメニューに表示すべきでない機能がある

↑赤枠の部分、左から「保存記事を検索、新しい記事を追加、保存記事を一括編集」の3種類の機能がこの部分に設置されています。

「昇降順切り替えのアイコン」は保存記事一覧のすぐ上に表示させることで、「機能とコンテンツの関連性」を担保できています。

しかし、前述した3種類の機能は、ヘッダーメニューに設置されてしまっているため「機能とコンテンツの関連性」が遠ざかってしまい、「どんな機能なのか」が推測しづらくなっています。「昇降順切り替えのアイコン」の隣に置くべきでしょう。