Modal dialogs in Stoffi

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Click Tools -> Generate playlist
2. Click on Stoffi's main window
3.

What should have happened?
The generate playlist dialog box should remain in front of Stoffi.

What happened instead?
The dialog is hidden behind Stoffi.

Can you give us any additional information that could be useful in fixing
this bug?

What release of Stoffi are you using (Xia or Shang)?
Zhou

If you are using alpha or beta, please state which:
Beta Three

Original issue reported on code.google.com by wic...@gmail.com on 20 Apr 2012 at 7:27

[GoogleCodeExporter]

I generally dislike modal dialogs. Should we really make the "Generate 
playlist" dialog modal? As I see it we should only go modal when Stoffi can't 
or shouldn't be used while the dialog is open (like "do you want to quit?") and 
avoid when Stoffi can be used while the dialog is open (like "properties" and 
"generate playlist").

The key is to keep non-modal dialogs in the taskbar so the users know that 
there's a dialog open and switch to it.

Thoughts?

Original comment by ephracis on 20 Apr 2012 at 8:30

[GoogleCodeExporter]

I am not a fan of dialog boxes, period. For example, why can Add-ons in Firefox 
be baked into the main window, but Options is a dialog?

In all honesty, if it was me developing Stoffi, I would not have a single 
dialog box whatsoever, anywhere, for any purpose :) I understand the Save 
Settings popup, but that is more a necessary evil than anything else.

I find it confusing that the Generate Playlist dialog can be lost behind 
Stoffi. First of all, I don't understand the purpose of it in the first place, 
and secondly, why would I want to open it and then continue to be able to 
interact with Stoffi?

Modal at least forces you to get on with why you opened the dialog in the first 
place. Open it, do what you need to do, then close it. 

It also break convention within Stoffi itself. The equaliser is modal, but 
generate playlist is not.

My ideal would be to kill both of those dialogs and bake both of them into the 
main window directly.

Original comment by wic...@gmail.com on 20 Apr 2012 at 8:48

[GoogleCodeExporter]

I think it would be hard to bake in dialogs such as save/open, generate 
playlist, the equalizer, etc.

I think we should instead make the equalizer and as many dialogs as possible 
non-modal. Many users want dialogs to be non-modal. Think about the following 
scenario:

You open the equalizer or any other dialog and start fiddling around. While you 
are doing so the song changes to something really bad. You switch back to 
Stoffi, change to a better song, and continue fiddling.

If the dialog was modal you either had to listen to the bad song while 
finishing fiddling, or quit the fiddling, change song and then start from 
scratch.

I think it's a pretty clear case. The benefit of making the dialogs non-modal 
are clear. The disadvantage, like your scenario, can be avoided by not clicking 
on Stoffi while the dialog is open. Even if you do so by mistake it is quickly 
fixed by just switching back, no work lost.

Original comment by ephracis on 20 Apr 2012 at 8:56

[GoogleCodeExporter]

I don't think so:

Equaliser - Add as a panel inside Preferences.
Generate Playlist - Stoffi already has all the functionality that this dialog 
provides, that is why I don't understand it's purpose. Therefore, remove it :)
Dialogs that interact with Windows - Here I concede, keep them as dialogs, but 
the only reason I say that is so that you don't have to reinvent the wheel.

Your example can already be done with the Equaliser dialog. It stays in front, 
but you can still interact with Stoffi playback controls.

If you are going to keep the dialogs, then is it possible to make them all act 
in the same way?

Import/Export - in front + can't interact with Stoffi
Equaliser - in front + can interact with Stoffi <-- my ideal if dialogs remain.
Generate Playlist - in front/behind + can interact with Stoffi

My feeling is non-modal will cause more confusion than benefit. I guess we 
shall see if this is an issue with our users. For me, it is an issue. So, we 
already have one user with an issue :)

Original comment by wic...@gmail.com on 20 Apr 2012 at 9:11

[GoogleCodeExporter]

Where do you propose we put the equalizer? Should it be an item on the left 
hand that says "Equalizer" with a whole section dedicated to just this or 
should we put it in "General"?

The playlist generator does actually add some very nice functionality. Say you 
want to burn a CD to use in your car, or you want to export some music to your 
MP3 player. Also, assume you want a random selection of song. So now you open 
up the playlist generator, set the maximum number of songs, where to select, 
and it will randomly select songs for you.

I envision that in the future one could specify size or length instead of 
number of tracks if preferred.

If one were to do this right now in Stoffi the "random" part of the process 
means you have to sit, hold ctrl down, close your eyes, scroll up and down a 
few times, click, repeat. Not very awesome.

As for the in front/behind vs interact with Stoffi it's pretty weird to 
introduce some sort of "half-modal" mode where the dialog insists to obscure 
the view of Stoffi but still let you click and interact with it. As far as I 
know this behaviour does not exist on any platform. I think we should go for 
the two options which most users are familiar with: modal and non-modal. Either 
you have to deal with the dialog now, or you can keep it open in the background 
while playing around in Stoffi.

Again, I agree that dialogs should be kept to a minimum, but we need balance. 
We can't go too extreme on this. We can't stuff too much stuff away and bloat 
the settings because we want to avoid dialogs. In that case we are just trading 
one usability problem for another.

Here's my proposal for a "dialog policy":
1. Keep to a minimum.
2. Dialogs not triggered by user's direct action requires presence of extreme 
errors, possibly risk of bodily harm or loss of life.
3. Avoid modal if possible.

I think I've done a pretty good job on eliminating most "surprise" dialogs 
(like the much-hated upgrade-dialogs at startup).

If you search for modal dialogs on Google you will find a lot of bashing. Even 
on Wikipedia (http://en.wikipedia.org/wiki/Dialog_box#Application_modal) 
there's a quote saying: "Modal dialogs are generally regarded as bad design 
solutions by usability practitioners".

I am actually planning on introducing our first (and last) surprise dialog 
which will show up once: when the user starts Stoffi for the first time. This 
dialog will take care of file associations. Why a dialog? Because a, the 
current setup project I use, which is part of the standard .NET library, only 
allows us to associate Stoffi with file extensions that are not already 
occupied (which .mp3, .pls, etc will most probably be) and b, since I plan on 
making a portable version of Stoffi and I thus I need Stoffi to be able to do 
this stuff and not rely only on the installer.

Original comment by ephracis on 20 Apr 2012 at 9:31

• Changed title: Dialogs in Stoffi

[GoogleCodeExporter]

Oh, and I changed the topic since this seem to mostly be a discussions about 
dialogs in general.

As such, I propose the first dialogs to go in the next version (Qin) should be 
the rename dialogs (keyboard shortcut profiles and equalizer profiles) and go 
for in-place editing instead, just like playlists.

Original comment by ephracis on 20 Apr 2012 at 9:34

• Added labels: Type-Other
• Removed labels: Type-Defect

[GoogleCodeExporter]

Equaliser: My suggestion is on the left hand, in it's own dedicated section.

I know modal dialogs are bashed, but the way you have done the Equaliser now is 
a good compromise.

Playlist generator: Oh, really? I would not have guessed the purpose was to do 
that. Unfortunately, CDs, MP3s and such depend on filesize, not number of 
tracks. I have one track that is 700MB, or 1 track that is 1MB. So right now, 
like I mentioned before, I don't see the point. If you want to fill an MP3, 
perform a search, ctrl+a to see the size, adjust the search until the tracks 
are the right total size, copy, done. Or create a playlist from multiple search 
and do the same. If it selects tracks randomly, do you really want your baroque 
mixed with spoken word and lumped together with electronica? No thanks, I 
prefer more control than that. 

Regarding the dialog policy: Please make all the dialogs the same. Then this 
can become a defect report which can be actioned.

You have done a good job regarding the dialogs, that is why I am encouraging 
you to carry on, go further :)

File associations: surely you can call the necessary screen from the control 
panel, instead of having the rely on .NET or something else?

Control Panel\Programs\Default Programs\Set Associations

Portable version: Fantastic news!

In-place editing: Great idea!

Original comment by wic...@gmail.com on 20 Apr 2012 at 10:03

[GoogleCodeExporter]

Generator: Well, it was a feature request so I added it. I will refine it 
further down the line but at least some people will find use for it. If you 
don't, then I won't force you. :)

I think we should go for non-modal. But we still need to have the "An update is 
being processed, are you sure you want to quit?". As I see it, we either make 
all modal or we mix them. If we make every dialog modal.. well, you know about 
the bashing. There's tons of reason to not make every dialog modal. I don't 
think mixed modes are confusing enough. We have, for example, some fields in 
tracks which are editable and some which are not. It is not confusing; it makes 
sense to have it that way. I feel the same way about dialogs. It makes sense 
that some are modal and most are not.

Associations: I think it should be presented to users the first time they start 
the application, instead of being "hidden" in the control panel. Most users 
don't even know that this part exist. Most users don't wander to deep into the 
control panel anyway. It's something for us geeks (which is pretty unfortunate 
actually but that's a totally different story).

Original comment by ephracis on 20 Apr 2012 at 10:11

[GoogleCodeExporter]

But if we put the equalizer there shouldn't we put the playlist generator there 
as well?

What happens when I implement the tag-fixing tools which will introduce the 
ability to let Stoffi do automatic cleaning of ID3 tags such as capitalizing, 
parsing folder and filename, looking up fingerprint of track on MusicBrainz, 
checking wikipedia/last.fm/etc for guessing genre, etc. Surely this will need a 
dialog, presenting the parameters before users run the tool.

Not very keen on putting the equalizer in settings. Perhaps later if we find 
that we have other, similar settings which could be bundled with equalizer. 
Like extending our plugins to allow for audio manipulation and just having the 
equalizer be a plugin whose settings will reside in our control panel.

Original comment by ephracis on 20 Apr 2012 at 10:19

[GoogleCodeExporter]

Generator: A feature request for random number of tracks? Alrighty then :)

Dialogs: I understand your points. Carry on. There is a place for modal and 
non-modal.

Associations: I mean, programatically call that screen, where it has already 
been filtered for music file types. I have seen another music application do 
this, that is why I know it is possible. The application does not set the 
associations itself, it simply calls that screen when the user wants to change 
an association.

Original comment by wic...@gmail.com on 20 Apr 2012 at 10:23

[GoogleCodeExporter]

But if we put the equalizer there shouldn't we put the playlist generator there 
as well? Yes! Let's think about how to do that in a way that makes sense.

All your points about ID3 tags etc. sound like the perfect use scenario to have 
a panel dedicated to that task.

An equaliser is a setting, it is a preference, not so?

Original comment by wic...@gmail.com on 20 Apr 2012 at 10:31

[GoogleCodeExporter]

It was actually a feature request for burning CDs with random tracks from a 
certain playlist. :)

Hm, interesting. I have actually already designed the dialog which I am pretty 
proud of (it's very easy and intuitive). Not sure if this screen is very easy 
for beginners to grasp. It means they will have to manually set the 
associations themselves. And do it one by one.

My dialog is a task dialog. It presents the user with three choices (go for 
default, don't set association, and set them manually). The first two options 
will just close the dialog (and do some stuff in the background in case of 
going for default of course) while the third option will give the user the 
ability to manually check which files Stoffi should associate itself with. All 
associations are grouped into two groups: tracks and playlists. It also has a 
"YouTube" option which means it can open links like "youtube://blah" making it 
possible to integrate with our website more.

Original comment by ephracis on 20 Apr 2012 at 10:36

[GoogleCodeExporter]

Equalizer and playlist generator. What group should they be in?

Where should that panel go? Like a side-panel? Could work. I plan on adding a 
side panel for YouTube showing similar videos and comment for currently 
selected track. 

However, a "ID3 tag cleanup tool" would not be sensitive to selection, which 
will work very different from side panels in Windows Explorer and my proposed 
YouTube side panel. Or perhaps you have some other kind of panel in mind?

Yes, the equalizer is a setting, but a, it will be a total waste of whitespace 
to have a group just for that one; b, all other music players I've used have 
dialogs for the equalizer so that's what I'm used to at least and c, I plan on 
extending our plugins to support audio manipulation which mean we can move the 
equalizer into a plugin instead, essentially moving its settings with it.

Original comment by ephracis on 20 Apr 2012 at 10:41

[GoogleCodeExporter]

Generator: I see! That would work, if it showed the file size. Right now, it 
still has to be tweaked in a secondary playlist, but at least the random part 
is sorted.

Associations: Clearly, your dialog takes care of more things than the Control 
Panel can do, so carry on with your own solution.

What group should they go in:
I think a better way would be to create a preview pane panel, as found in 
explorer. Then the playlist generator could display in that area, along with 
all sorts of other tasks. The user would be able to use the task and see the 
results on the files at the same time.

Generate a playlist and have the result display in the Music Library 
immediately, without the need for creating a second playlist.

The equaliser could be another task shown in the same preview pane. the user 
could make adjustments or simply keep the equaliser open all the time and still 
have full access to Stoffi without blocking the interface.

You could then open that side panel up for plugin development.

In this way, we don't have to add these two dialogs to Preferences taking your 
points into consideration.

ID3: It could work in the side panel. Perform a search as normal, then open the 
ID3 preview pane, select a setting and have it perform that setting on the 
current selection.

Original comment by wic...@gmail.com on 20 Apr 2012 at 11:02

[GoogleCodeExporter]

By preview pane you mean the side panel in Explorer right?

So this is what we'll get:

If the user views YouTube the panel will show similar tracks to the one 
selected as well as associated comments (with the ability to add a comment as 
well).

If not, then the playlist generator, equalizer, ID3 cleaning tool and perhaps 
plugin-created stuff will be shown here?

As a side not: I think the guy who requested this feature only have files of 
small, similar size, because he said he knew that X files would fit. But for 
the rest of us, with files of very varying file sizes, even in the same 
playlist, an option to specify size will be added in Qin.

Original comment by ephracis on 20 Apr 2012 at 11:09

[GoogleCodeExporter]

That sounds right. The panel on the right hand side of Explorer that shows an 
image preview if the panel is active and an image has been selected.

Yes, that is the idea. We could have icons for each task or a text button next 
to the help question mark icon. Then when the user clicks an icon or button, 
the side panel loads with that service or task.

The Youtube side panel task would load by default if the youtube panel is 
loaded. 

The side panel would display if the user activates it. It would not activate by 
default.

Original comment by wic...@gmail.com on 20 Apr 2012 at 11:22

[GoogleCodeExporter]

Two questions:

1: How do we overcome the problem that in the YouTube case the panel is 
dependent on selection while in the other case it is static?

2: What if the user views a playlist containing a YouTube track. What if s/he 
selects that track? What should be visible?

Original comment by ephracis on 20 Apr 2012 at 11:27

[GoogleCodeExporter]

1. Explorer displays a default icon if nothing is selected. We could have a 
default video icon display until the user does something. Another way is to 
load front page content into the side panel to help the user get started. If 
you allow the user to log in via their Google account, you could load their 
latest subscribed videos into the side panel. Think along those lines. 

You could do all three: If the user is offline but clicks on the Youtube panel, 
then display an icon. It the user is not logged in, show front-page content. If 
the user is logged in, show customised content.

2. If not in the Youtube panel, such as being in a playlist, the user needs to 
click on the task they want. Therefore, if the equaliser is selected and a 
Youtube track is selected, nothing happens. If the user clicks the Youtube 
service icon/button, only then does the task change to the Youtube side panel 
task.

Original comment by wic...@gmail.com on 20 Apr 2012 at 11:43

[GoogleCodeExporter]

I don't get it. Should the equalizer, playlist generator, ID3 cleaner and 
plugin controls disappear when a YouTube track is selected inside a playlist? 
Or should they be displayed along with the YouTube similar tracks and comments?

I don't think we should add the ability to login with a Google account in the 
YouTube panel. Instead we should keep our Stoffi Service login and use that 
instead, since it already support Google account linking among others. It makes 
it easier for both us and the users to have a single account system instead of 
using different accounts in different places in the application.

Original comment by ephracis on 21 Apr 2012 at 5:35

[GoogleCodeExporter]

I think I need names for the UI elements in Stoffi. Then I would call each part 
by the correct name :)

The way I see it is as follows: The side panel can wear many hats. It can wear 
a Youtube hat. Then it takes that hat off and wears an ID3 tag tool hat, or a 
equaliser hat, or any other hat. Hence, we can open this area up for external 
plugins. Hence, the side panel only does one task at a time. The full side 
panel is dedicated to one task only at a time.

Go to Explorer and hover over the icon second from the right next to help. The 
tooltip reads "Show the preview pane". I am suggesting we add that icon. We can 
extend it by making it into a drop-down icon. If the user selects the 
drop-down, we can lists all the tasks or "hats" that the side panel can 
perform. So the user clicks on an entry called ID3 editor and the side panel 
opens and reveals the ID3 editor only. The user can click the same "Preview 
Pane" drop-down and choose Playlist Generator and the side panel will load the 
playlist generator "hat" or task or whatever the correct name is.

With that in mind, to answer your questions:

1. On the left hand side, if the user clicks Music -> Youtube: If the user is 
here, the side panel would automatically wear the Youtube hat.

Therefore, we now have three new states for the Youtube side panel to consider:
1.1 The user is offline: Let the panel show an icon and maybe some text to let 
them know they are offline and maybe a link for them to log into their Stoffi 
account. To see what I mean, open Explorer and open the side panel and select 
Libraries -> Documents. It shows an icon only. Now inside Stoffi, we could also 
show an icon, but also more. 

1.2 The user is online but not logged into Stoffi: The side panel could load 
content in the same way as the youtube homepage loads content. It just shows 
what is trending right now.

1.3 The user is online and logged into their stoffi account: Is it possible to 
access their Youtube subscription, so that we could load their newest videos in 
the side panel?

So all of the above talks about when they have just clicked on Music -> Youtube.

Now, if they click on a video, the side panel can update to show related videos 
or comments etc.

2. On the left-hand side, if the user clicks Music -> Files: If the user is 
here, or inside a playlist, the side panel would not automatically do anything, 
if the user clicks on a Youtube video.

If I have Side Panel -> Equaliser open and I click on a Youtube video, nothing 
happens. It continues to show the Equaliser. If the user wants to see related 
videos, then they would click Side Panel -> Youtube, so that the side panel 
would switch hats from the Equaliser and replace it with the Youtube hat. 

Re. Login: Yes, that is what I meant. Login with their Stoffi details, but what 
I hoped was that we could access their Youtube newest videos, because they used 
their Google account credentials to login to Stoffi.

Original comment by wic...@gmail.com on 21 Apr 2012 at 8:55

[GoogleCodeExporter]

I think that's the one!

We use the same button as in Explorer but we do it like the "Change your view." 
button right next to the left of it; we give it an arrow button which shows a 
menu (without a slider, though) which shows the different "hats". If the user 
presses the button (not the arrow) it will only toggle the visibility of the 
sidebar.

This makes it easy to slowly introduce this feature as well. We can start by 
doing the YouTube "hat" (which I have already begun work on, actually) and then 
add more and more "hats" later on. Such as a bookmark manager, meta data 
cleaner, move the equalizer in there, and so on.

I think we should call it something other than "hats" though. The panel should 
be called the "Side pane"; everything else is called "X pane", and the word 
"preview" doesn't fit our feature set really. I do not have any good 
suggestions for the different "hats" though. "Views" feel strange, besides it 
will be used for the "Change your view." button I want to copy from Explorer 
later on as well. "Tools" isn't right either as the YouTube one isn't really a 
tool.

Maybe we could just refer to it as the "Equalizer side pane" or the "YouTube 
side pane" when we discuss it?

I'm creating a new ticket for dealing with the side pane. This ticket should be 
viewed as a discussion on modal/non-modal dialogs, as the original text 
describes it.

See issue #306 for further discussions.

Original comment by ephracis on 21 Apr 2012 at 9:31

• Changed title: Modal dialogs in Stoffi
• Changed state: Fixed

[GoogleCodeExporter]

And this is not fixed. I will, for Zhou, make all but the closing dialogs 
non-modal.

Original comment by ephracis on 21 Apr 2012 at 9:32

• Changed state: Accepted
• Added labels: Milestone-Zhou, Type-Enhancement
• Removed labels: Type-Other

[GoogleCodeExporter]

Great! Looking forward to you implementing this!

My only intention with the word "hat" was to clearly convey that the side pane 
only does one task at a time. You only wear one hat at a time.

I think the word Pane works perfectly.

Equaliser Pane <-- This is by name only. We refer to it by this name. 

In the drop-down, we simply label it: Equaliser.

Original comment by wic...@gmail.com on 21 Apr 2012 at 9:40

[GoogleCodeExporter]

This issue was closed by revision r1030.

Original comment by christof...@stoffiplayer.com on 21 Apr 2012 at 8:18

• Changed state: Fixed