1
/
5

超UX向上理論(XD・Figmaで制作)


各箇所に【ポイント】見出しが表示されて解説がございます。

そこにUXを向上させる訳を書いています。

ーーーーー

●YouTubeの検索後の画面の改善(Figma)

【ポイント】

・検索ワードの「×」をクリックで個別に消せる

・「ワード履歴」クリックで過去に入力したワードを呼び起こし、クリックで検索窓に足せる。

・左サイドの絞り込みボタンは画面追従なので現行のように「フィルタ」を

押すために画面最上部に帰らなくてよい。

・検索実行ボタンが大きいためUX向上

・検索で表示された動画にも「×」があり、おすすめにも検索にも表示できないようにできる。

(視聴済みの動画が何度も出て来るストレスを軽減しUXを上げます。設定から「×」で消した動画を表示し、再視聴も可能です。「×」を取り消すことも可能です。)

ーーーーー

●MIXIニューストップ画面の改善(Figma)

【ポイント】

・「コミュニティ」の列はMIXIのサービス各種で、大カテゴリです。

現行は左上のハンバーガータブをクリックしないと大カテゴリが表示されないため

MIXIの他サービスに気付きづらいです。(初見ユーザーに対して)

「エンタメ」の列がニュースに対する中カテゴリです。

画面左サイドはユーザーが設定した絞り込み情報です。

「台風の情報は除外したい」

「何日以内のものだけ表示したい」などユーザー

希望に合わせて表示できます。

画面左下の空きスペースに「ピックアップ」「新着ニュース」などのボタンを表示し、

別の絞り込みをできるようにします。

ーーーーーー

●アプリでUXを上げる方法(XD)

フロー3
21 Screens, Published on Jul 25, 2022 10:27 GMT
https://xd.adobe.com/view/80c32c36-ade2-4b37-b158-978040a69d4c-d590/

UX向上理論を一部紹介しています。




ーーーーー

●indeedアプリのUI改善(XD、インストールした日から作ったデビュー作)

フロー1
24 Screens, Last modified on Mar 28, 2022 08:27 GMT
https://xd.adobe.com/view/680d2754-822a-4708-89c4-1f957d88ec63-3d5e/screen/82e43b0d-4e3d-476c-842e-9cc396191cae?fullscreen


【トップ画面のポイント】

・「リモート」が可能かは気になりますので

グリーンの塗られた範囲で週に何日リモート勤務可能かを表現しています。

すべてグリーンで塗られるとフルリモートです。

気になる点が一瞬でわかるとUXは上がります。


・「NEW」を目立たせています。これで見た事のない募集を

分かりやすくしています。(UX向上)


・給与、応募条件もクリック前に知りたいです。

なので表面に簡易表示し、ユーザーの時間を節約してあげます。(UX向上)

・「ブロック」ボタンを押せば2度とその募集が表示されなくなります。

求職中にずっと気になっているのですが、もう応募しない募集が

ずっと何度も表示されてストレスを感じます。

そういった点に手を差し伸べてUXを向上させます。

【履歴画面のポイント】(フッターボタンで移動します)


・検索のワード履歴を表示しています。

検索後に何件応募し、うち何件落選したかも分かります。

それにより、その手の応募の手ごたえを理解できます。


【メール画面のポイント】


メールの文章を読まずに端的に落選か、メッセージを返信すべきかが

表面的にわかるようになっています。

「メッセージ着信」とあれば返信が必要です。

見落としがないように見やすくしてあり、UXが上がります。

運営からのお知らせ、スカウトメールは分かりやすく

すぐに気付けるようなデザインになっており、

ユーザー寄り添っています。


ーーーーー

●カウカモアプリのUI改善(XD)

フロー4
57 Screens, Published on Aug 03, 2022 08:45 GMT
https://xd.adobe.com/view/5f9828fd-545b-482d-9777-0409e657dd8a-0acb/


【トップ画面のポイント】

・現行のアプリはトップ画面からすべての画面に移動できず、

移動先に移動用ボタンがあり、迷子になります。

「あの画面に行きたい」が

簡単にできない事があります。

そこで15個のボタンを使ってトップ画面からすべての画面に移動できるように

情報整理してあります。

特に重要な行き先はイラスト付きの

大ボタンにして画面中央に5つ並べました。

イラストがあるのでイメージが付きやすくなりました。


フッターのボタンは良く押すボタンで、片手操作を可能にし、

UXを向上させています。

ヘッダーはあまり押さない「見る系ボタン」です。


【フッターの「新規ボタン」を押した後の画面のポイント】


・画面右上に閲覧済の物件を再表示するかのスイッチがあります。

こういったアプリは大量の情報を見るため、一度見た情報は

「お気に入り」していない限りは非表示にしてもらえると

ありがたいです。

そうすればユーザーの物件探しの時間が短縮され、

選ばれるアプリになります。


・「予算」

ユーザーの予算内におさまっているかを一瞬で理解できるゲージを表示しました。

グリーンがいっぱいに表示されれば予算ギリギリです。


・「公開日から〇日」=物件鮮度を表現しています。

・物件画像下の「2000万円」=物件の値段

・「人気上位5位」=お気に入りなどされて人気の物件であり、のんびりできないという意味です。


・「スコア上位15%」=ユーザーが前もって入力済の好みの物件条件に合致しているほど

%は少なくなります。端的に「あなたの好みですよ」をユーザーに伝えています。

・「105m²」=部屋の広さです(ユーザーに重要視する点を4つまで選べ、選んでいると

このあたり(画面下部)に表示されます。

・フッターの「消し」=もうこの物件は表示

しなくなります。

・「ジャンプ」=押すとブックマーク済の移動先ページの

ボタンが複数表示され、簡単に移動できます。(例・マイページ)


ーーーーーー

【0ベースで作った漫画ビューワーと漫画アップローダー】


●ビューワー(コマフォーカス機能でスマホでも漫画が大きく表示される)

↓「スパイファミリーの画像をタップで仕様表示されます」

フロー6
41 Screens, Last modified on Jul 26, 2022 01:09 GMT
https://xd.adobe.com/view/4874abcd-c856-4753-9eab-e671e7aae8d9-1d27/screen/1d67a768-7ad7-431b-8ad3-a50b9f0c1022/


●アップローダー

フロー8
32 Screens, Last modified on Jul 25, 2022 10:27 GMT
https://xd.adobe.com/view/b7e91e4a-0c83-417a-861d-a049fa030312-e2ba/screen/e2b81f25-2769-42b3-8ca7-0ff608f2a11d/


Like 長谷川 敦's Story
Let 長谷川 敦's company know you're interested in their content