Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add: +ボタン非表示機能を追加 #1375

Merged

Conversation

shm11C3
Copy link
Contributor

@shm11C3 shm11C3 commented Jul 6, 2023

内容

  • +ボタン非表示オプションを追加しました

変更内容

  • 設定画面に テキスト追加ボタンの表示 のオプション追加
    • このオプションはデフォルトで true になっています
    • 設定をオフにすることで+ボタンを非表示にすることができます
    • 非表示設定ではなく表示設定とした理由は、設定する上での分かりやすさを考慮したためです
  • 設定時のショートカットを案内するダイアログを追加
    • 非表示設定に変更する際にダイアログが表示されます
    • 変更を維持 押下で変更を確定
    • 元に戻す 押下で変更がキャンセルされる(表示設定に戻る)
    • ダイアログの外側を押下した際にはダイアログは閉じない(意図せぬキャンセルを防ぐため)

関連 Issue

close #1359

スクリーンショット・動画など

実装後キャプチャ

エディタ画面

スクリーンショット 2023-07-11 211710

設定画面

スクリーンショット 2023-07-07 020523

設定時のショートカット案内ダイアログ

image

その他

@Hiroshiba
Copy link
Member

Hiroshiba commented Jul 7, 2023

PRありがとうございます!!!
いろいろと配慮いただき嬉しいです!!

ラベル表示ですが、情報量と必要とする人に比べて、メイン画面での表示面積がちょっと大きいかなという雰囲気を感じました・・・! 🙇


代案を考えてみたのですが、どれが良いのかかなり迷っています・・・・・。
以下のどれかとかどうでしょうか。。。

  1. ラベル表示をなくして設定でのツールチップで案内
    • 見逃す人もいそう
    • 右下ボタンはいらないけどマウスで追加したいという需要はあるかも
  2. ラベル表示をなくし、ツールバーのカスタマイズに追加して、設定のツールチップで案内
    • ツールバーに表示するボタンはカスタマイズすることができます
    • 1つ書き出しが参考になるかも
    • 見逃す人は多いかも
  3. ラベル表示をなくして、テキスト欄ごとの+ボタンとして実装する
    • テキスト欄の右にある消去ボタンの左側に置く感じを想像してます
    • テキストラ右にある+ボタンを押した時にどういう挙動にするかをしてみないと分からないので若干イマイチですが、これしか思いつかず・・・・。
  4. このまま一旦マージして、他の箇所のUIと見比べて最終調整する
    • 機能として取り込み、本リリースまでにメンテナ側で調整する形です
    • UXに興味がない場合プルリクでの議論が大変だと思います、その時はこちらで!

個人的には・・・・・・まあ3かな~と思っています。。
(4でもぜんぜん大丈夫です!!)

@shm11C3
Copy link
Contributor Author

shm11C3 commented Jul 7, 2023

@Hiroshiba
コメントありがとうございます!
入れ違いになってしまったのですが、作業途中だった設定オフ時のダイアログを追加しました。
二度手間になってしまって申し訳ないですがご確認いただけると...🙏

ラベル表示についてですが、確かに情報量が増えてしまって微妙な感じはしますね。
先ほど追加したダイアログは見逃しにくい仕様にしてみたのですが、それでもショートカットを忘れた場合などを考慮する必要があると思っています。

3の案は自分も考えていましたが、テキスト欄の幅が狭くなってしまうのが懸念点ではあります。
テキスト欄の幅を維持しつつ3を実現する方法として以下の案はどうでしょうか?

  • 1 削除ボタンを廃止。deleteキー、もしくは未入力状態でのバックスペースで削除
  • 2 テキスト入力状態では追加ボタンを表示、未入力状態では削除ボタンを表示

上記の案では、テキスト欄をまとめて追加/削除が難しくなるため、現在のUIに使い慣れたユーザは慣れるまで使いにくくなってしまうかもしれません...

@shm11C3 shm11C3 marked this pull request as ready for review July 7, 2023 20:20
@shm11C3 shm11C3 requested a review from a team as a code owner July 7, 2023 20:20
@shm11C3 shm11C3 requested review from y-chan and removed request for a team July 7, 2023 20:20
@shm11C3 shm11C3 marked this pull request as draft July 8, 2023 13:02
@Hiroshiba
Copy link
Member

Hiroshiba commented Jul 9, 2023

試してみました!
設定後に案内ではなく、設定前にダイアログで案内する形、良い感じに思います!! もとに戻せるの優しいです。

ショートカットを忘れた場合

あー・・・たしかに・・・・・。
+ボタンを非表示にした場合でも、追加用ボタンをUI上に表示するのは重要そうですね・・・。

3の案は自分も考えていましたが、テキスト欄の幅が狭くなってしまうのが懸念点ではあります。

なるほどです!!
まあでも幅が狭くなるのは確かに問題ですが、幅が狭くなるのはマウスホバーしている間だけなので、そこまで使い勝手は変わらなさそうかなと想像しています!

ただ、新たに気づいた点として、テキスト欄を追加のするためにテキスト欄をマウスホバーしないといけないというのは、直感的にわかりにくいかもなんですよね・・・・・・・ 😇


別案として、+ボタンを小さくするのを考えてみました。。消去ボタンとかぶらなければいいはず。
↓ちょっと画像として作ってみましたが、なんだかんだ被るし微妙そう。。

image


どうしようかとても悩ましいですね・・・・・・。

仮に迷子になっちゃう人が現れても、たぶん+ボタンがいらないと思っている人よりは少ない気がしています。
悩んでいる間立ち止まってしまうのも申し訳ないので、提案としては、とりあえず非表示設定オプションと変更前のショートカットキーダイアログ案内の2つを実装してみるのはどうでしょう・・・?
それで一旦マージしてさらに良いアイデアが思いついたら実装してみる、とか!

@shm11C3
Copy link
Contributor Author

shm11C3 commented Jul 11, 2023

@Hiroshiba
なるほどです、コメントありがとうございます!

入力時の案内はどうするか悩ましいですね…
確かに迷子になってしまう可能性は設定時に減らせるため、そこまで考慮しなくて良い気がしてきました。

一旦提案頂いたように、非表示設定オプションとダイアログ案内を実装した状態でPR出します!

@shm11C3 shm11C3 marked this pull request as ready for review July 11, 2023 13:40
@shm11C3
Copy link
Contributor Author

shm11C3 commented Jul 11, 2023

draft外しました。レビューお願いします🙇‍♂️

@Hiroshiba Hiroshiba requested review from Hiroshiba and removed request for y-chan July 12, 2023 14:57
Copy link
Member

@Hiroshiba Hiroshiba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTMです!!!

UXとしてどのように案内するべきかどうかちょっとまだ迷っています。
もしかしたら後々文面とかを変えさせていただくかもです!

追加ボタンを非表示にしている時のいい感じの動作に関しては、もしいい方法が思いつけば教えていただけるとすごく助かります 🙇

Comment on lines 965 to 974
ok: {
flat: true,
label: "変更を維持",
textColor: "primary",
},
cancel: {
flat: true,
label: "元に戻す",
textColor: "display",
},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

通常テーマだとprimary文字が結構見づらいので、サンプリングレート変更確認のときに合わせてdisplayが良さそうかもです。
あとOK・キャンセルで聞けるものはソフトウェア全体としてこういうユーザー体験になりつつあるので、変えさせてもらいます!
2つともこちらでちょっと調整しちゃいます!

Comment on lines 956 to 962
if (showAddAudioItemButton) {
return;
}

// 設定をオフにする場合はヒントを表示
$q.dialog({
title: "エディタの+ボタンを非表示にする",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(ちょっとうるさいことを言っちゃいますが。。)
早期リターンされてますね!

ここでやりたいことは「設定をオフにする場合はダイアログを表示」で、この早期リターンは「設定がオンの場合は早期リターン」になっており、実装から意図が直感できない形になっています。
他の人が見ると読み間違う可能性があるので、ここは素直にif文にすると意図が伝わりやすいかもとか思いました!
(好みかもしれません。。)

こちらでちょっと改修したいと思います!

@Hiroshiba
Copy link
Member

問題ないと思うのでマージします!

いろいろUXに関して議論しつつ、丁寧にプルリクエストを進行して頂けてとても助かりました!!!!
他にも色々課題はあるので、またもしご興味があるものがとかあればコメントやクリリクエストお待ちしております!!!

優先度:中ラベル
https://github.com/VOICEVOX/voicevox/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%E5%84%AA%E5%85%88%E5%BA%A6%EF%BC%9A%E4%B8%AD

@Hiroshiba Hiroshiba merged commit 47e59ec into VOICEVOX:main Jul 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

+ボタンを消すオプションを作る
2 participants