【モード×デザインお題】モード切り替えに失敗しているUIをデザインし直そう！

モードの切り替えに失敗しているUIを改善しよう！

何がダメなのか？を解説する動画です。
これを元にUI改善にトライしてみてください

次の動画で解説をしていきます💡

‍

お題トライ用のFigmaデータ

コピペして自分の手元で使ってください。

ダメUIのFigmaデータ
https://www.figma.com/file/2E4c39iMHdkT2f7xpFz5zP/%E7%84%A1%E6%96%99%2F%2F%22%E4%BD%BF%E3%81%84%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AE%E7%A7%98%E5%AF%86-%E3%80%8E3%E3%81%A4%E3%81%AE%E5%9F%BA%E6%9C%AC%E6%A7%8B%E9%80%A0%E3%80%8F%2F-%E3%82%8F%E3%81%8B%E3%82%8A%E3%82%84%E3%81%99%E3%81%84UI%E3%81%AB%E3%81%AF6%E3%81%A4%E3%81%AE%E6%8C%87%E6%A8%99%E3%81%8C%E3%81%82%E3%82%8B%E3%82%88-%2F?type=design&node-id=8%3A38722&mode=design&t=990PQPOHXuGdTkKt-1

‍

‍

1 : 概要

この動画では、UIデザインの改善方法について解説しています。まず、フォルダ作成時のUIフローに2つの問題点があることを指摘しています。1つ目は、「作成する」ボタンを押してもまだ選択作業が必要なこと。2つ目は、「選択しよう」という画面で実際にはまだ選択できないことです。その後、これらの問題を解決するために、モーダルウィンドウの基本的な使い方と、モードの切り替えに関する注意点について説明しています。複数のモードを使うのはややこしくなるため、1つのモードでまとめ上げることがユーザビリティの観点から望ましいことを強調しています。

‍

2 : 動画で得られること

• フォルダ作成時のUIフローを見直し、ユーザーが求めている操作内容を明確にする
• モーダルウィンドウの基本パターンを理解し、適切な場面で活用する
• モードの切り替えは必要最小限に留め、1つのモードで処理をまとめることを心がける

‍

3 : コンテンツ内容

フォルダ作成時のUIフローの問題点

フォルダ作成のUIフローには2つの問題がある。1つ目は「作成する」ボタンを押してもまだ選択作業が必要なこと。2つ目は「選択しよう」という画面で実際にはまだ選択できないこと。

モーダルウィンドウの使い方

モーダルウィンドウは、質問に対してYES/NOなどを選択するためのUI。タイトルと選択肢から構成されるのが基本形。

モードの切り替えに関する注意点

モード中に別のモードを開始するのはややこしくなる可能性がある。1つのモードで処理をまとめ上げる方が望ましい。