[UX-WEEK 1] Preferences dialogs

[thp]

Welcome to the first iteration (a test drive so to speak) of the Maemo User Experience Week! We want to concentrate on one part of our apps' UIs every week, and we start out with preferences dialogs. See the original idea post (http://talk.maemo.org/showpost.php?p=604054&postcount=77) for background information.

The vote (http://talk.maemo.org/showthread.php?t=49686) is closed now (after just one day, but a trial run should be done as early as possible, and it's Sunday already).

This means that we are concentrating on preferences dialogs this week:


Post screenshots of the preferences dialogs of all apps and widgets you have installed
Describe the behaviour of the dialog, especially unclear elements
Show the UI to your friends and tell them to interact with it and note any questions or errors
Also note things and settings there were well implemented and work well.


Based on this, we can then work on improvement concepts. Please also contact the developers of affected applications so they can chime in in the discussion :)

What do we expect as a result of this week?


A list of best practices for preferences dialog design on Maemo 5
Example screenshots of good dialogs (and why they are good)
Example screenshots of bad dialogs (and why they are bad + improvement suggestions)
Developers of affected apps contacted and provided with mock-ups, patches, .ui files, etc..


(We will probably create a Wiki page for the results at some point, but until we have figured out exactly how the process works, just start getting productive in this thread! :))

[Vaskinn]

Well I don't know if it qualifies as a "preferences dialog" but there is one glaring example of poor ui design that's annoyed me repeatedly, and that's in use in several places in the standard ui. This is a case of "looks good but gets in the way of getting the job done"

I'm talking about the time picker. Quick way to see this is to add a new alarm, and set the time. Do this and you're presented with two lists one with 24 and one with 60 items. Yes it looks good, but it's nowhere near as effficient as an numeric keypad and a text field would be.

Further problems with the time picker:
- There is also no wraparound in the list so you can't go from 00 minutes to 59. Meaning when it suggests x:00 but I want x:50 i'll have to scroll past 50 entries in a list.
- No keyboard input.

Lesson learned:
When making the user pick from a list, if the list is long then consider alternatives.

[lwa]

I personally love the time picker and think it is one of the better examples of maemo ux.

a form box would be annoying... first i have to open they keyboard, then activate function lock then type it all in. the current set-up is fluid and fits in with my previous interactions with the device until that point (touch to navigate to the option from menu)

As for OP. I'll think more on it and post when I get home from work

Agreed though that keyboard shortcuts inbuilt could be useful because it increases the way people can interact with the menu...

[thp]

Let me kick this off with easyplayer (http://maemo.org/packages/view/easyplayer/) - a very nice file-based music player that I have installed recently. Attached you will find two screenshots of the preferences window. Some remarks (please feel free to comment on these):


"Preferences" here is a window, not a dialog (should be a dialog to fit with the rest of Maemo?)
"Use big buttons" does nothing or at least nothing obvious - maybe change the text to better describe what it does
The "Stop playing after:" and "Display remaining time until timeout" belong together somehow - they should be grouped visually (e.g. a header "Timeout" for both buttons and remove the "until timeout" from the "Display remaining time" button)
The buttons are thumb sized - i know of other preferences dialogs that have finger-sized buttons; ideally, to create a "balanced look", preferences dialog should have the same button sizes (exceptions should be justified)
Is it really necessary to have a text input field for the "Stop playing after" selector? There are 6 elements in this list (5 min, 10 min, 20 min, 30 min, 60 min and never) and the list displays 4 elements at the moment, without the entry field 5 elements are visible
Often there are choices where the user can select some interval or "never" - should this "never be placed at the beginning or the end of the list? Here, "never" is the last element, other apps place "never" where 0 would be placed (I personally prefer to have "never" sit where 0 would be placed. i.e. *before* all other items)

[klausr]

Let me kick this off with easyplayer (http://maemo.org/packages/view/easyplayer/) - a very nice file-based music player that I have installed recently.

Thank you! Since I'm the developer of EasyPlayer I'll have to say that EasyPlayer is WIP and ideas for improvements are very welcome. I'll mostly concentrate on the program code itself, and so there is of course room for usability improvements. I have to admit that my time is limited (job and family, an old house in need of repair :), so don't expect that everything will happen quick.

"Preferences" here is a window, not a dialog (should be a dialog to fit with the rest of Maemo?)

Well, I am used to C and embedded development, so Python and gtk+ are just things I am learning. So I did the preferences dialog the first way I found. I just didn't notice that most other programs do this in an dialog. I'll put this on the ToDo list - if this is really that important...[1]

"Use big buttons" does nothing or at least nothing obvious - maybe change the text to better describe what it does


and

The buttons are thumb sized - i know of other preferences dialogs that have finger-sized buttons; ideally, to create a "balanced look", preferences dialog should have the same button sizes (exceptions should be justified)

belong together. If you set "use big buttons", the buttens are thumb sized after an restart. Try it! But I want to remove that entry anyway and replace it with a switch to choose a more simpler UI - just three big buttons (Prev, Play/Pause, Next), a big progress bar and maybe a smaller TreeView widget containing the audio files.


The "Stop playing after:" and "Display remaining time until timeout" belong together somehow - they should be grouped visually (e.g. a header "Timeout" for both buttons and remove the "until timeout" from the "Display remaining time" button)


This could be done easily.

Is it really necessary to have a text input field for the "Stop playing after" selector? There are 6 elements in this list (5 min, 10 min, 20 min, 30 min, 60 min and never) and the list displays 4 elements at the moment, without the entry field 5 elements are visible

Same here as for [1]. Did it the first way I found...

Often there are choices where the user can select some interval or "never" - should this "never be placed at the beginning or the end of the list? Here, "never" is the last element, other apps place "never" where 0 would be placed (I personally prefer to have "never" sit where 0 would be placed. i.e. *before* all other items)


Well, I think that's very personal. I really don't care about that and changing this would be very easy, but will make old preferences entries faulty. Indeed, you can get around this by manipulating the code...

Besides that I recommend to send me an email if you have some kind of improvements - I really don't read everything at talk.maemo.org - I normally prefer the mailing list. I wouldn't have seen this threat if Thomas haven't send me an email.

Yours, -Klaus

[mikec]

I wanted to post this up from nclock as I struggled with many hours to make it look nice. In the end I decided to use radio buttons inside a GroupBox with custom graphics that keeps the N900 black bue and white look.

I think devs also need help on making the most of Qt as some of the clever things are not always obvious.

I'm not very happy with the stock Qt File Dialog, which a lot of people will use, and would like thoughts on that.

I am very happy to take thoughts and improvements.

http://farm5.static.flickr.com/4015/4512085912_58e5aa5f82_o.png

[pelago]

Often there are choices where the user can select some interval or "never" - should this "never be placed at the beginning or the end of the list? Here, "never" is the last element, other apps place "never" where 0 would be placed (I personally prefer to have "never" sit where 0 would be placed. i.e. *before* all other items)


I agree with most of what you (thp) said, apart from this last item. In this instance, when defining a timeout, I think Never fits more logically at the bottom of the list, as it is "further away" than 60 minutes.

I attach a screenshot from the Gnome Power Management preferences, where you'll see that they also put Never at the end on a similar thing that is defining a timeout.

Incidentally, from that Gnome screenshot, it would be nice to see text like that appear in easyplayer too, i.e. "20 minutes" instead of "20 min" and "1 hour" instead of "60 min".

[pelago]

Some general comments:

Most built-in Nokia apps, if they have such a menu item, use the word "Settings" in their menu, apart from Web which uses "Options" (although that has a "Settings" item within it!). None of the built-in apps use the word "Preferences".

It is worth reading the style guide documents: Fremantle Master Layout Guide (http://www.forum.nokia.com/info/sw.nokia.com/id/e778ba1f-2507-4672-be45-798359a3aea7/Fremantle_Master_Layout_Guide.html), Hildon 2.2 UI Style Guide (http://www.forum.nokia.com/info/sw.nokia.com/id/eb8a68ba-6225-4d84-ba8f-a00e4a05ff6f/Hildon_2_2_UI_Style_Guide.html) and Hildon 2.2 Widget UI Specification (http://www.forum.nokia.com/info/sw.nokia.com/id/019c2b31-3777-49a0-9257-970d79580756/Hildon_2_2_Widget_UI_Specification.html), as they mention some useful things.

For example, dialogues containing one item should have a "Done" button. Dialogues containing multiple items should have a "Save" button. "OK" and "Cancel" should not be used. Clicking outside the dialogue should be used to cancel (i.e. not save) changes.

[thp]

I agree with most of what you (thp) said, apart from this last item. In this instance, when defining a timeout, I think Never fits more logically at the bottom of the list, as it is "further away" than 60 minutes.

Ok, that makes sense. I don't really care at which position it is, but it should be the same across the platform. That's one "rule" we want to find out that we can then put on a Wiki page for developers to follow, which hopefully results in a more consistent and usable UI :)

I'll have to fix this in the gPodder preferences dialog then, attached a screenshot of the current selector dialog - the "never" in this case is called "manually", as checking for new episodes can be done manually (by clicking a button) or at a selected interval. Question: Should this be named "never", too? ("Check for new episodes - never" does not really sound good to me, as it's not "never" but "only when I click the button").

Incidentally, from that Gnome screenshot, it would be nice to see text like that appear in easyplayer too, i.e. "20 minutes" instead of "20 min" and "1 hour" instead of "60 min".

Very well spotted! I haven't thought about that. I guess we should add this as "best practice" too ("If time amounts are to be selected, use '1 minute', '2 minutes' and '1 hour', etc.. as wording" or something like that).

[pelago]

Conboy
Please see attached screenshot of Settings dialogue from Conboy (http://conboy.garage.maemo.org/) 0.6.3.

My opinions:

No Save button - tapping above the dialogue saves, which is incorrect Maemo 5 style
Instead of a tickbox for "Use automatic portrait mode", it would be nice to see a choice of Landscape, Portrait, Automatic, as some other apps offer.
Instead of the "Use custom colors" tickbox and the colours below being ungreyed out when ticking the box, maybe the tickbox should be a button instead (called just "Colors") which brings up a further dialogue to select the colours. The greyed-out colours look a bit messy at the moment.
The list of backends (just one item at the moment, XML Storage Backend) could be hidden behind a "Backends" button or similar. At the moment, it is not obvious that the bottom-right spanner and (i) icons refer to the XML Storage Backend as opposed to the entire app.

[pelago]

Ok, that makes sense. I don't really care at which position it is, but it should be the same across the platform. That's one "rule" we want to find out that we can then put on a Wiki page for developers to follow, which hopefully results in a more consistent and usable UI :)

I'll have to fix this in the gPodder preferences dialog then, attached a screenshot of the current selector dialog - the "never" in this case is called "manually", as checking for new episodes can be done manually (by clicking a button) or at a selected interval. Question: Should this be named "never", too? ("Check for new episodes - never" does not really sound good to me, as it's not "never" but "only when I click the button").

We need to be careful about defining "rules" and then applying them in the wrong place. There may be a difference being choosing a timeout and choosing a frequency (e.g. an update frequency).

A timeout should certainly have items getting longer as you go down the list with "Never" at the bottom as it is the longest timeout. However, a list of frequencies may need some further thought - it is not necessarily the same as a timeout. I actually quite like Manually at the top of the list in gPodder...

[Vaskinn]

a form box would be annoying... first i have to open they keyboard, then activate function lock then type it all in.


There are already ui elements that take only numbers, and so switch automatically so no need to press the function lock. So a similar method for time wouldn't be too different.

I'm thinking I'd like something along the lines of:
- If the keyboard is open you can start typing directly into the field. No need to press for numeric input.
- If keyboard is closed display numeric keypad on screen (instead of list). Another option could be up/down arrows for each digit.

[thp]

Any other settings/preferences dialogs of third party apps? Please feel free to post screenshots and discuss the current layout, content and functionality.

[pelago]

Leafpad
Please see attached screenshot of Settings dialogue from Leafpad (http://maemo.org/downloads/product/Maemo5/leafpad/) v0.8.17le-0maemo1.

My opinions:

Dialogue title bar is called Settings, but menu action says Preferences (as previously mentioned, most Nokia apps use the word Settings)
The buttons are too tall
I don't know if there is an official style-guide recommendation on this already, but I believe most Nokia apps use sentence case rules for capitalisation, e.g. "Word wrap" instead of "Word Wrap", "Line numbers" instead of "Line Numbers"
The Font button could show (in differently-coloured text) the name and size etc. of the selected font
There is a Save button, which is good, but if you click outside the dialogue, that also seems to save, so there is no Cancel action available

[pelago]

grsync
Please see attached screenshots of Settings dialogue from grsync (http://maemo.org/downloads/product/Maemo5/grsync/) 1.0.0-maemo2.

My opinions:

Dialogue title bar is "Grsync preferences", menu action is Preferences (as previously mentioned, most Nokia apps use the word Settings. I've also noticed that most Nokia apps use just the word Settings in the dialogue title bar, not "Notes setting", "Calendar settings" etc.)
Cancel and OK buttons, which are not Maemo 5 style
I think "Rsync executable" setting can be removed completely (when would any normal user ned to change that?)
If you scroll down the settings dialogue, then close and re-open it, the scroll position is remembered, but I think Maemo 5 style is to scroll to the top when re-opening a dialogue the second time, even if you had scrolled down previously.

[pelago]

gPodder
Please see attached screenshots of Preferences dialogue from gPodder (http://gpodder.org/) 2.4.

My opinions - main dialogue:

Should be called Settings as previously discussed
No Save button - clicking outside the dialogue saves, which is not Maemo 5 style
"Check for new episodes", all items start with a lower-case letter, e.g. "manually" instead of "Manually". I think upper-case initial letter would look better, like on the other settings ("Automatic", "Show episode list").
Not obvious that you need to keep gPodder running for the automatic feed updates to work.
I have no idea with "Enable feed update heuristics" means!
"Helper applications" should maybe say "Player applications", unless other types of helper apps will appear in later versions
At least on my device, I am allowed to pick between Media Player and MPlayer for video files, but I don't have mplayer installed. I don't know if similar is true for audio files if Panucci isn't installed. I don't think it should show apps that aren't installed, or should at least grey them out so the user cannot pick them. Or, allow the user to pick a non-installed app, and get an explanation of what the app is and instructions on how to install it.

my.gPodder.org settings dialogue:

No Save button again
In general, this dialogue isn't clear to a new user. What is my.gPodder.org? Maybe this should be a wizard with some introductory text. It would be good if we could create accounts directly from the UI rather than having to go to a website
"Select device" button brings up yellow box error "Error getting list, NotFound"
Device type defaults to Desktop, should be Mobile phone
Device type should be the proper type of Maemo 5 selector, not a dropdown list