What type of GUIs do you like?

[teejee2008]

Design 1

http://teejee2008.files.wordpress.com/2009/10/layout-1.jpg?w=383&h=440

Design 2

http://teejee2008.files.wordpress.com/2009/10/layout-2.jpg?w=367&h=214

Both these mockups are for a program that I'm making. I'm confused about which of these two to use.

Design 1

* Easier to use, more organized
* You cannot type values directly, you have to use slider
* Information is spread out over more items

Design 2

* Simple and direct
* More compact
* Information is concentrated in a smaller region

Which of these 2 designs do you like and why ?

[Kurtnoise]

If you look at any video conversion program like MeGUI, XRecode, etc both of these designs are equally common. MeGUI is more of the second type while XRecode is of the first type.
That's not entirely true...

http://uppix.net/d/8/b/62bb56d62e905912e1f8e00f8d899.png (http://uppix.net/d/8/b/62bb56d62e905912e1f8e00f8d899.html)

:p

Personally, I prefer the first one...


and stop to copy MeGUI design. It's not a model...

[teejee2008]

@Kurtnoise

Oops.. I didn't notice. The audio dialogs are different from the video dialogs.
I know its not a model. I just wanted an opinion.

Thanks. I think I'll stick with the first one.

[unclepete]

What about photoshp style, with both a slider and a text field?

http://i33.tinypic.com/n345eg.jpg

[Kurtnoise]

In the picture above, the labels [(Bitrate xx kbps) & (Quality q=yy)] are updated accordingly to the sliders values...

[stax76]

and stop to copy MeGUI design. It's not a model...

Everybody copies more or less for some or other reason, it often makes sense, after all Doom9 designed a lot things in MeGUI after GordianKnot.

A slider don't necessarily has a high usability, actually the usability in most slider designs is bad, many n00bs don't even know most sliders support arrow keys so they will have a hard time to adjust a particular value if the slider has too many steps. There are slider controls that support Ctrl for big steps which is often not implemented and unlikely a n00b to find out unless there are tooltips. Because of that many avoid sliders or at least combine them with a text control, be it numeric, combo or text.

For such a bitrate I would probably use a slider with 16 as steps and add a numeric up down for direct input and 1 steps and a label to give a hint about the resulting quality.

[Kurtnoise]

I don't care about newbies support...It's a personal point of view here as asked by teejee2008.



edit: Megui has nothing in common with GK except bitrate calculator code...

[stax76]

I care about all users, there are other things designed after GordianKnot btw. and also VirtualDub.

[Kurtnoise]

but that's not the question asked by teejee2008...:rolleyes:




btw, if you care about all users, you cannot have the same settings/designs/references/(put_your_preferred_word_here) for newbies & advanced people at the same place.

[teejee2008]

@stax76

Usually people put sliders to improve the look of a program rather than to improve usability, but in some cases it can be useful. For example some users may not know if increasing a particular value will increase quality or lower it. So putting a slider with labels can be helpful in such a case. An alternative would be to put tool tips everywhere. Also like you said most people don't realize that they can use the keyboard arrow keys to set the slider to a specific value. That's why they have such a hard time using it. For example I didn't know that we could use the Control key also. I'm learning it now. (By the way the Ctrl key doesn't work with any application that I tried! I think you need to code it separately or use a custom slider that supports it).

I'll put a text box so that people can type a specific value if they want to (image below). Moving the slider will update the text box and typing in the text box will update the slider.

Thanks everybody.

http://teejee2008.files.wordpress.com/2009/10/layout-3.jpg?w=386&h=421

[ricardo.santos]

From the user prespective i dont see any reason for a slider on audio settings, just put a box and we will write the value. simple, quick and effective.

take a look at the minicoder gui here in the forum...simple yet fully functional...have you seen the awesome log function of minicoder, i as a user find this important as they can learn which program does what and which syntax was used...this is one of most underestimated function: "show users how it is done"...functional and educational.

my 2 cents

http://i38.tinypic.com/1y7aj6.jpg

[stax76]

For example some users may not know if increasing a particular value will increase quality or lower it. So putting a slider with labels can be helpful in such a case.

I agree it's good to show a labels with hints, it can be done for any control, I'm using a numeric up down for the x264 crf value and show a hint with following code:


Private Sub nudQP_ValueChanged() Handles nudQP.ValueChanged
Dim value = CInt(nudQP.Value)

Dim s = ""

Select Case value
Case Is > 26
s = "bad quality, very small filesize"
Case Is > 23
s = "OK quality, small filesize"
Case 23
s = "balanced"
Case 22, 21
s = "good quality, large filesize"
Case 20
s = "very good quality, very large filesize"
Case 19
s = "extremely good quality, huge filesize"
Case Is < 19
s = "best quality, extremely huge filesize"
End Select

lQPHint.Text = "(" + s + ")"
End Sub


I think you need to code it separately or use a custom slider that supports it).

Never did this but I guess there are some basic properties exposed to the form designer.

I'll put a text box so that people can type a specific value if they want to (image below). Moving the slider will update the text box and typing in the text box will update the slider.

For numeric input a NumericUpDown control might be even better, can be used for direct input like a TextBox but has a lot extra functionality, take a look at the properties exposed to the form designer.

[teejee2008]

@ricardo.santos

I've seen the miniencoder gui. Its a pretty good program - simple and direct. But I think using a slider will improve usability for most people (atleast for new users). That's why I was confused between the two designs. Anyway its just a matter of preference. I'm going with the slider-based design.

[ricardo.santos]

...But I think using a slider will improve usability for most people (atleast for new users)...

can you explain how? if tey're newbies it really doesnt matter, a slider or a box wont matter as they dont know what it is....and here is where docs and tooltips come in.

without being harsh arent you "clouded" for saying this or that is better for newbies because you're far from being one? :)

[teejee2008]

@stax76

Never did this but I guess there are some basic properties exposed to the form designer.
I think you need to code it separately. The arrow keys work automatically if InterceptArrowKeys is set to True in the designer, but for Ctrl keys there's no such option.

For numeric input a NumericUpDown control might be even better, can be used for direct input like a TextBox but has a lot extra functionality, take a look at the properties exposed to the form designer.
Yes, a NumericUpDown control will be a better option.

[Midzuki]

Whichever type of GUI you choose, please consider these two things:

>>> do not create windows wider that 800 pixels or/and higher than 600 pixels — not everybody uses 1024x768, either because the fonts don't look great above 800x600, or because they simply don't have large monitors; a code that detects the current video resolution and generates a properly-sized window should not be regarded as "bloatware", because it's not; ;)

>>> please don't use the .NET framework — not everybody uses Windows Vista or higher, and not every XP user thinks that those huge downloads are worth the required HDD space. Differently from what Microsoft wants everybody to believe, newer not always means faster and better.

Just my $1.99.

[Kurtnoise]

Whichever type of GUI you choose, please consider these two things:

>>> do not create windows wider that 800 pixels or/and higher than 600 pixels — not everybody uses 1024x768, either because the fonts don't look great above 800x600, or because they simply don't have large monitors; a code that detects the current video resolution and generates a properly-sized window should not be regarded as "bloatware", because it's not; ;)

>>> please don't use the .NET framework — not everybody uses Windows Vista or higher, and not every XP user thinks that those huge downloads are worth the required HDD space. Differently from what Microsoft wants everybody to believe, newer not always means faster and better.

Obviously, you don't know what you're talking about...

[teejee2008]

@ricardo.santos

can you explain how? if tey're newbies it really doesnt matter, a slider or a box wont matter as they dont know what it is....and here is where docs and tooltips come in.

With a slider I can simply put two labels saying "smaller file size" and "better quality" on either end of the slider and anybody can understand the use of that option. With a NumericUpDown or textbox I'll have to put a tool tip or some other message. Its also easier to drag a slider than to click on the tiny up-down buttons of a NumericUpDown box or type a value in a textbox.

without being harsh arent you "clouded" for saying this or that is better for newbies because you're far from being one?

I'm simply giving my opinion. I may be wrong.

[teejee2008]

@Midzuki

do not create windows wider that 800 pixels or/and higher than 600 pixels — not everybody uses 1024x768, either because the fonts don't look great above 800x600, or because they simply don't have large monitors; a code that detects the current video resolution and generates a properly-sized window should not be regarded as "bloatware", because it's not;

Keeping the form size to 800x600 is a very good suggestion. I always try to keep the form size under 800x600.

>>> please don't use the .NET framework — not everybody uses Windows Vista or higher, and not every XP user thinks that those huge downloads are worth the required HDD space. Differently from what Microsoft wants everybody to believe, newer not always means faster and better.

The rate at which .NET is developing, one day all windows applications will be running on it. You will have to install it sooner or later. Why are you so against .NET?

[ricardo.santos]

With a NumericUpDown or textbox I'll have to put a tool tip or some other message. Its also easier to drag a slider than to click on the tiny up-down buttons of a NumericUpDown box or type a value in a textbox..

tiny narrow sliders...they dont have to be small tiny boxes.... with silders if i by mistake touch the mouse wheel it changes the value without me noticing it

its up to you at the end of the day... i personally would like to see a option to show what is happening and what is doing what so that newbies can learn

[Midzuki]

The rate at which .NET is developing, one day all windows applications will be running on it.

I wouldn't dare to be so "prophetic". You see, not everybody is easily convinced by marketeers. Windows itself does not and cannot run on top of any type of the .NET thing, to begin with.

You will have to install it sooner or later.

Not on my beloved 1.5GHz Pentium-4, without support for a SATA HDD.

Why are you so against .NET?

If you have to ask, then you're not ready to know. :devil:

<!-- End of Off-Topic Discussion -->

[Midzuki]

>>> please don't use the .NET framework — not everybody uses Windows Vista or higher, and not every XP user thinks that those huge downloads are worth the required HDD space. Differently from what Microsoft wants everybody to believe, newer not always means faster and better.
Obviously, you don't know what you're talking about

:rolleyes: :p :)

[stax76]

I think you need to code it separately.

In .NET which wraps the native Win32 control you can do something like:

TrackBar1.Minimum = 0
TrackBar1.Maximum = 512
TrackBar1.LargeChange = 16
TrackBar1.TickFrequency = 16

Left/Right key changes 1 step and page up/down key changes 16 steps, without tooltip fewest people will find out. LargeChange don't seem to work with mouse combined with modifier key or wheel indeed so would need some custom code. If you consider some need a TrackBar, a NumericUpDown, a Label etc. it should be considered to do a custom control, fortunately it's very easy to do with .NET.

do not create windows wider that 800 pixels or/and higher than 600 pixels

I try at least to some degree to support users with any background and hardware, some authors here state only support experts or huge LCD displays for instance, everybody is free to support whatever of course, users still having interest in such a limited application can of course make a feature request, if enough people request a certain feature changes are higher that it will be supported.

please don't use the .NET framework — not everybody uses Windows Vista or higher, and not every XP user thinks that those huge downloads are worth the required HDD space. Differently from what Microsoft wants everybody to believe, newer not always means faster and better.

I recommend VB.NET with .NET 3.0 for small applications to run on Vista out of the box and the latest and greatest .NET version using client profile if possible for large applications.

The rate at which .NET is developing, one day all windows applications will be running on it.

For some type of application you will always need a lower level language or a mix of higher and lower level languages, there will always be different languages and platforms, some focus on productivity others on portability others on performance, backward compatibility etc.