キャラ・スタイル変更UIを考える

[shigobu]

内容

先日、ツイッターでヒホ氏と議論になった内容である。
https://twitter.com/shigobu/status/1458689872185544707
要約すると、
キャラ・スタイル変更UIは、コンテキストメニューみたいな見た目だが、子要素を持つ親要素をクリックすると、UIが閉じて確定してしまう。この動作は一般的なコンテキストメニューの動作と異なった動作で、使いづらさを感じた。
しかし、UIの動作をコンテキストメニューの動作へ変更すると、デフォルトスタイルの存在意義が薄くなってしまう。
最終的に、親も選べて子も選べるUIがあれば嬉しいということになりました。

そこで、２つほどUIの提案をさせていただきたいです。

UI案その１

スタイル持ちキャラ要素を２段表示にして、上はデフォルトタイルが選択されて閉じる。
下は、子要素のスタイルリストを展開し、UIは閉じない。

UI案その２

スタイル持ちキャラ要素を左右に分割し、左を押すとデフォルトスタイルが選択されて閉じる。
右を押すと、子要素のスタイルリストを展開し、UIは閉じない。

他のアプリでの採用例

UI案その１は、おそらく他のアプリでは見られないUIだと思われる。
強いて言うなら、Microsoft Officeの製品で見られるリボンのボタンに似たUIがある。

UI案その２は、同じくMicrosoft OfficeのPowerPointのコンテキストメニューで見られる。

Pros 良くなる点

スタイル変更がしやすくなる。

Cons 悪くなる点

思いつかない。

実現方法

不明

VOICEVOXのバージョン

0.8.2

OSの種類/ディストリ/バージョン

Windows 10 Home 20H2

その他

個人的には、案その２を推します。

[Hiroshiba]

issueありがとうございます！

UIの見た目ですが、小さめな文字を表示しなくてもOKだから「その２」が良さそうに感じました。

prosとconsの認識が僕と違っていそうなのでちょっと認識合わせたいです。
スタイル変更は今のままでもやりやすい一方、勘違いが起こるというのが課題かなと思います。
なのでprosはたぶん「コンテキストメニューだと思って誤クリックすることを失くせる」かなと思います。
そして提案の方法だとconsも１つあって、スタイルを選ぶ際のクリック数が増加します。
なので構図がまた、UIのわかりやすさ VS 編集の手間になりそうです。

編集の手間を増やすことなくUIをわかりやすくする方法があれば最高なんですよね･･･
「その２」のUIで、親をホバーしたときに勝手にスタイルメニューが開かれ、「▶」を押すと閉じる、とするのとかどうでしょう。

今見たら「その２」で紹介されているwordのUIって今のVOICEVOXのUIと殆ど変わらないかも。
UIの見た目が今とほとんど変わらなくて、▶とテキストボタンが分離されていたらそもそも勘違いは起こらない・・・？

[shigobu]

そして提案の方法だとconsも１つあって、スタイルを選ぶ際のクリック数が増加します。

「▶」のマウスホバーでもスタイルメニューを展開するようにすれば、クリック数は増えません。
そして、マウスの動きも現在のVOICEVOXでのスタイル選択時の動きとほとんど変わりません。

UIの見た目が今とほとんど変わらなくて、▶とテキストボタンが分離されていたらそもそも勘違いは起こらない・・・？

そうですね。

親要素のボタンを「キャラ名」と「▶」に分離し、キャラ名にマウスを乗せるとキャラ名だけハイライトし、「▶」にマウスを乗せると「▶」だけがハイライトしてスタイルメニューが展開される。スタイルメニューが展開される前に「▶」をクリックしても、スタイルメニューが展開されるだけ。
「キャラ名」をクリックすると、そのキャラのデフォルトスタイルが選択される。
というような動作が良いと思います。

このような動作をするのが、PowerPointのコンテキストメニューです。

[Hiroshiba]

なるそど！！
▶︎にマウスカーソルを合わせるのがちょっと大変かもです。
まあスタイル変更を高頻度で行いたいことは少なそうだし、許される…？