データ画面は、ユーザーがアップしたpythonファイルに、アニメーションやグラフのデータを付与したgifファイルを生成するための画面であると理解しています。
・最終的なユーザーのアクションであるボタンを画面最下部に配置、ボタンラベルは、ボタンを押したあとの挙動がわかりやすいように「書き出し」に変更。(「書き出し」ボタンは同様の理由で全画面において、最下部に配置)
・右側の値設定のエリアは、操作性を重視しタブ切り替えではなく一覧しやすいようにすべての項目を表示しています。(アニメーション、グラフ共に設定するケースが多いのでは、という仮説のもと)
・設定の必要がない場合は、右側にあるチェックボックスを外します。
・いただいた資料上では、アニメーションやグラフのデータをファイルに付与するには「決定」ボタンを押下する仕様ですが、右側のエリアでユーザーが値を入力すると付与される仕様の方が好ましいと考えています。
・アニメーションとグラフデータのプロパティを個別で設定する形式ではなく、一つの設定として扱う想定で整理とデザインをしています。
グラフ画面です。
複数ファイルのデータを一つのグラフにまとめ、グラフの表示設定をする画面と理解しています。
こちらの画面は「データ」タブの表示中のイメージです。
・大きく変更しているのはグラフデータのエリア(資料中、中央のテーブル、デザインは左側のエリア)。ファイルの概要は常に表示されている必要はないのではという仮説と画面内の空間を有効活用するため、左側のエリアに集約。ファイル概要はファイル名を押下で展開される想定。
・右側の値設定エリアは項目を整理し、「データ」、「軸」、「凡例・罫線」の3つのタブに変更
・ユーザーがファイルを追加するのと同じタイミングで、中央のグラフにも値が表示される仕様のほうが好ましいと考え、「プロット」ボタンはありません。
グラフ画面で「軸」の設定表示の画面です。
グラフ画面で「凡例・罫線」の設定表示の画面です。
・「書き出し」ボタンを押下すると、ファイルの書き出し処理が実行されます。ボタンは「中止」ボタンに変わり、青色のプログレスバーが表示されます。
報告書画面で「テキスト」の設定表示の画面です。
・中央の報告書のスライドの中で、対象となるオブジェクトを選択すると、選択されたオブジェクトにフォーカスがあたり、右側の設定エリアが選択対象に応じて切り替わる想定です。(ユーザーが切り替えする必要がない)
報告書画面で「画像」の設定表示の画面です。
画像挿入後、画像を選択中のイメージです。
メンバーからのコメント
はじめまして。
貴社のPOSTFLOWのUIデザイン案を提案させていただきます。
チュートリアルや動画を確認した上で、画面の整理、デザインをしておりますが、詳細な仕様や利用フローなど、実際のものとギャップがあるとは存じますが、ご理解いただければ幸いです。
通常ですと、製品や利用するユーザーについてヒアリングさせていただいた上でデザインをしております。
提案を採用いただけましたら追加でヒアリング〜デザインまでのご支援も可能ですので、お気軽にお声掛けいただければと存じます。