Main menu design proposal

[stevefal]

I would like to propose the following improvement to the main menu layout and icons:



Problems with the current design:
1) Items shift horizontally during navigation due to incorporated text label. This causes eye-hand targeting errors because the target moves.
2) Non-uniform icons and padding is messy
3) Icons unrefined

Benefits of proposed design:
1) Upper left label identifies current page consistently and in the traditional location
2) Icons don't move
3) Cleaner, more uniform icons (these can still be improved).
4) Greater contrast between selected and non-selected items

I am not up to speed in either modifying or building ML, but if someone is interested in working with me, I will provide all the necessary resources and metrics required to integrate this approach.

I am also not familiar with the organization of the project and how code is reused across camera models. I hope to use ML with my Canon 5d mkIII. If I have to choose one model to target, that would be the one.

For your reference, here is the current design in the same mode:



Feedback and collaborators welcome.

[hotcoolhot]

+1, Voted UP

[a1ex]

So, the changes would be:
1) move the menu title to the left and the icons to the right
2) dim the non-selected icons

These screenshots are quite old, you can get newer ones with Debug->Screenshot or from http://wiki.magiclantern.fm/userguide .

The icons are special characters from Canon fonts. I would suggest re-designing them from scratch, to avoid copyright issues.

See also http://www.magiclantern.fm/forum/index.php?topic=1185.0 .

[stevefal]

I'm willing to create original icons if there is a reasonable chance of using them. So some questions:

1) I only have a 5D MkIII, which I assume does not have all tabs available yet. Can you point out a listing of the full set of icons and titles? I believe this is the 10 shown under 'Magic Lantern Menu' in the user guide.
2) Are different icon sizes required for different camera resolutions? Please provide those parameters, and tell me what leeway I have, if any.
3) Would dimming of icons be implemented via a rendering transform, or would I provide 'selected' and 'non-selected' sets of icons?
4) Are the proportionally spaced title fonts implemented as bitmaps?

[a1ex]

2) The logical menu screen size is 720x480; for lower-res displays, the backend takes care of it.

3) It's just channging the text color. The palette has 80 safe colors, just like Cropmarks (see http://magiclantern.wikia.com/wiki/Cropmarks ).

4) They are Canon fonts, see http://magiclantern.wikia.com/wiki/Fonts

[a1ex]

Just push a rough implementation of this proposal (without new icons).



I'm not sure whether it's an improvement or not, because, to see the current selection, you need to look both at the left side (for the text) and at the right side (for the icon). But I'm getting used to it.

[SDX]

I also want to point out this thread: http://www.magiclantern.fm/forum/index.php?topic=1918.0

The discussion has changed a bit since it started, but there should be some relevant thoughts about the current design and its problems as well as possible solutions in there.

[stevefal]

2) The logical menu screen size is 720x480; for lower-res displays, the backend takes care of it.

3) It's just channging the text color. The palette has 80 safe colors, just like Cropmarks (see http://magiclantern.wikia.com/wiki/Cropmarks ).

Sorry, I'm not understanding. Are you saying that the icons will be scaled automatically (with artifacts) for different display sizes? Are the Canon font-based icons bitmaps or vectors?

It's not clear to me what format I need to provide. My sketch's current bitmap cell size is 46x42 pixels (WxH). Should I provide:

- 10 bitmaps or 1 btimap strip with 10 offsets
- PNG ok?
- Black on white? white on black? transparency?
- selected and unselected versions?

Sorry for all the questions. Since I don't know how this would be implemented, I need specific requirements.

[wolf]

Looks better this way - a good improvement in usability and good idea IMHO.

[scrax]

Looks better this way - a good improvement in usability and good idea IMHO.

agree

@Alex:
How to remove the blue box background for selected icon?
I want to check the difference since i think it could be cleaner without it (and red icon instead of white when in edit menu mode).
EDIT: Found how to make it, and I like it more with only the text and icon changing from white (or red) when selected, without blue background.

Examples:

[a1ex]

It's not clear to me what format I need to provide. My sketch's current bitmap cell size is 46x42 pixels (WxH). Should I provide:

Don't worry about the format, I'll probably hardcode it just like the fonts. A bitmap should be alright (white on black or whatever is easier).

[scrax]

Don't worry about the format, I'll probably hardcode it just like the fonts. A bitmap should be alright (white on black or whatever is easier).

Do you do that manually or there is a way to convert a bmp to code automatically?The icon design part is slow and card slot consuming, since I'm compiling and testing each change to check if it's good or if it needs something more.

[a1ex]

Trammell has some code to convert ML fonts to Canon font format (the one used by current icons), so it shouldn't be too hard. Need to decipher those scripts.

[stevefal]

I'm starting this icon project now. I'll be creating a set of 10 bitmaps in 24-bit .png format, white on black.

If you are currently unhappy with how any menu is identified semantically, now is the time to bring it up. I won't be scrutinizing organization of the menu system - I'll just be looking at each current menu title, and confirm by its contents:

audio - mic
expo - +/-
overlay - cropmarks/histo or TDB
movie - vid/movie cam side
shoot - cam front, maybe glint on lens
focus - focus screen/pattern, maybe eyecup surround
display - cam back, maybe glint on display
prefs - heart or TBD
debug - gear or TBD
help - question mark

Note the semantic overlap between overlay and display. I intend to use camera back symbol for Display, since that is a broader topic, as evidenced by the fact that overlay can be turned on/off from within it.

[scrax]

to me gear looks more used for prefs,
debug can have a bug with "slash bar" on it? maybe?
heart could be good for ML MyMenu

[a1ex]

Yep.

For "my menu" we could just use a star, seems a bit more familiar to me. My menu is also similar to browser bookmarks, which also use a star icon.

[scrax]

right, a star is perfect

[stevefal]

Will you want to remove the blue background highlight as previously suggested? This will change how I size and frame the icons.

Based on the code, it looks like icons are evenly spread when there are fewer to display. If this is the case, I think that removing the blue highlight will be problematic as there will be no visual cue to indicate the boundaries of "selectable" regions.

An alternate approach is to revise the spacing code that so icons are always spaced the same, and, say, right-justifying the block of them. If you do this and eliminate the blue highlight, I would tighten up the horizontal spacing relative to what I currently have.

Here's my current set:

[stevefal]

Here is another highlight treatment using a tab metaphor. The benefit is a stronger visual connection between the selected item and its corresponding page:

[meeok]

Here is another highlight treatment using a tab metaphor. The benefit is a stronger visual connection between the selected item and its corresponding page:
...

Nice. With the tab you don't need a blue background and I think a black and white background colour scheme is more professional.

Still think the icons themselves need colour though.

[nanomad]

* nanomad likes it

About colors: I find them distracting since the color doesn't provide any additional information, but maybe we can figure a way to have them either B/W or colored using a menu option

[3pointedit]

Canon groups menu tabs by color, is it sensible to classify linked tabs by color group? That is make the icon/name/frame line same color?

[meeok]

* nanomad likes it

About colors: I find them distracting since the color doesn't provide any additional information, but maybe we can figure a way to have them either B/W or colored using a menu option

Fair enough. I think we should forget about the menu option. Either use one consistent theme or find someone with the time to implement a fully themed GUI.

RE: Implementation. Are the icons hard coded in c? (please tell me there is a script for this). or from a bmp?

[a1ex]

Hope I've got the tab design right.

[stevefal]

The tab looks right.