I would like to propose the following improvement to the main menu layout and icons:
(http://i.imgur.com/TBbpR.jpg)
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:
(http://i.imgur.com/bTYfp.jpg)
Feedback and collaborators welcome.
+1, Voted UP
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 .
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?
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
Just push a rough implementation of this proposal (without new icons).
(http://a1ex.magiclantern.fm/bleeding-edge/newmenu.png)
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.
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.
Quote from: a1ex on December 24, 2012, 09:36:35 AM
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.
Looks better this way - a good improvement in usability and good idea IMHO.
Quote from: wolf on December 25, 2012, 05:17:53 PM
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:
(http://images.wikia.com/magiclantern/images/0/04/Custom_Mode_Setup.png)
(http://images.wikia.com/magiclantern/images/8/84/Menu_edit_mode.png)
Quote from: stevefal on December 24, 2012, 09:33:21 PM
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).
Quote from: a1ex on January 04, 2013, 08:42:27 PM
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.
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.
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.
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
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.
right, a star is perfect
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:
(http://i.imgur.com/pHkb8.png)
Here is another highlight treatment using a tab metaphor. The benefit is a stronger visual connection between the selected item and its corresponding page:
(http://i.imgur.com/RCdWp.png)
Quote from: stevefal on January 05, 2013, 07:07:55 AM
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.
/me 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
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?
Quote from: nanomad on January 05, 2013, 10:36:37 AM
/me 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?
Hope I've got the tab design right.
(http://a1ex.magiclantern.fm/bleeding-edge/tabbed.png)
The tab looks right.
Nice icons.
But why using a different movie icon, the old one is like the Canon icon on the wheel and it is very clear that this means movie mode? Also the the old audio icon seems to me more comprehensible when seeing it the first time.
Quote from: 3pointedit on January 05, 2013, 01:55:19 PM
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?
If that gonna be added i'll suggest to colorize the tab line/border only, so to keep it simple
I will create a vidcam icon for movie mode. Thanks for the feedback.
Quote from: wolf on January 05, 2013, 05:34:22 PM
Nice icons.
But why using a different movie icon, the old one is like the Canon icon on the wheel and it is very clear that this means movie mode? Also the the old audio icon seems to me more comprehensible when seeing it the first time.
Agree, movie icon is nice, but changing it will not match the one printed on mode dial and so would be less immediate (canon users already knows the actual one)
Quote from: a1ex on January 04, 2013, 08:56:05 PM
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.
I think would be nice to have a file with all the icons used so to call then from various part of ML, for example K icon is written twice in my fork actually, since it should appear in WB dialog and in info screen.
I've revised the movie icon to match the original concept:
(http://i.imgur.com/FQJh8.png)
I don't think that this set is any more clear than the current icons. Too cartoonish.
Actually, after some thoughts there are a couple of icons I don't like in this new set
- microphone /audio settings is not recognizable
- the debug menu icon looks like the settings icon (gear). I prefer the crossed bug icon someone suggested before:
Quote from: scrax on January 05, 2013, 01:07:06 AM
to me gear looks more used for prefs,
debug can have a bug with "slash bar" on it?
I've revised Audio (coarser grill) and Shoot (smaller lens).
(http://i.imgur.com/gLw1E.png)
tabbed menu is great, and also I like more the new Shoot icon. Overlay is not really immediate to me, maybe too much used to what is now...
I've posted this alternate for feedback. This one has a more retro mic for Audio, and a wrench for Debug. I can't bring myself to use a literal insect - some metaphors go too far!
I personally prefer the modern mic, especially with the coarser grill, but there have been a couple comments against the previous version, so something else to consider.
I also improved the geometry of the overlay icon. I have not posted a new isolated set, and I won't until things settle.
(http://i.imgur.com/ockkm.png)
Implemented tab interface looks good.
Off by a pixel though. http://img525.imageshack.us/img525/7413/vram1.png
QuoteI have not posted a new isolated set
The screenshot is enough for me to extract the icons, no need for the extra work to update the zip.
The "retro" mic is much more obvious, the modern one looks more like a cup of ice cream to me :)
Expo icon looks perfect.
Overlay icon isn't very obvious, maybe a histogram?
Camera icons: OK.
Focus icon: I like it.
Display icon: causes confusion with the old icon.
Checkmark: not sure what menu is it.
Wrench: that's for Prefs, right?
Question mark: OK, although I like the "i" symbol better.
I'll try to come up with a script that extracts the icons from the sample screenshot and encodes them for including in ML.
Quote from: a1ex on January 06, 2013, 12:58:38 PM
The screenshot is enough for me to extract the icons, no need for the extra work to update the zip.
The "retro" mic is much more obvious, the modern one looks more like a cup of ice cream to me :)
Expo icon looks perfect.
Overlay icon isn't very obvious, maybe a histogram?
Camera icons: OK.
Focus icon: I like it.
Display icon: causes confusion with the old icon.
Checkmark: not sure what menu is it.
Wrench: that's for Prefs, right?
Question mark: OK, although I like the "i" symbol better.
I'll try to come up with a script that extracts the icons from the sample screenshot and encodes them for including in ML.
Checkmark was debug, I suppose wrench is intended to be used for debug, and gear for pref.
The script will be great.
With the isolated set of icons, I can be sure that the icon is positioned horizontally where I intend it within the 46x42 frame. Also, the files are named, which should eliminate confusion about usage. It's no trouble at all, so I'll continue making them unless you absolutely know you won't use them or look at them.
- Retro mic settled
- Expo settled
- I'll upload a histogram next
- Movie settled
- Shoot settled
- Focus settled
- There is implicit overlap/confusion between Overlay and Display. Even if this new Display icon resembles the old Overlay icon, I think this is the right approach - it is literally the camera's display. Users adapt quickly, especially if symbols are intuitively well-reasoned.
- Checkmark is preferences. I will upload a gear for feedback.
- Wrench was Debug. Will you consider calling this "Utilities"? Debug is not a user term, and this menu contains functions beyond debugging.
- I actually prefer an enclosed "i" symbol as well, but can't get past that it literally means "info" or "information". Consider calling this menu "Info"? Then the hardware button, title and icon would be consistent.
- Star = My Menu settled
I've put time into refining and balancing this set. Every icon is revised to sit better within the group. Note that each symbol is placed pixel-precisely within its 46x42 (WxH) bitmap. Also note that some symbols are not perfectly centered within the bitmap. This is either by design or necessary due to math.
(http://i.imgur.com/Z1lxl.png)
Icon | Menu | Status | Note |
mic | Audio | settled | |
+/- | Expo | settled | |
histogram | Overlay | feedback | |
movie camera | Movie | settled | |
camera front | Shoot | settled | |
focus indicators | Focus | settled | |
camera back | Display | feedback | a1ex had reservation but I am promoting this |
check mark | Prefs | feedback | |
wrench | Debug | feedback | I propose that this menu is renamed to "Util" or "Utilities" |
"i" | Help | feedback | I propose that this menu is renamed to "Info" |
star | MyMenu | settled | |
Element | Color |
unselected icon | 75,75,75 |
selected icon | 255,255,255 |
menu background | 20,20,20 |
tab outline | 75,75,75 |
histogram Overlay:
can you make it start from the upper left corner? it looks like mountains :)
check mark:
could be misunderstood. maybe there is an alternative
else:
very good work!
thanks!
Do you mean a histogram showing crushed blacks?
What we've gotten last few days looks really good. ML is looking sharp.
The histogram looks much nicer than the crop marks. I agree that the check mark isn't very clear.
| Icon | Menu | Status | Note |
| mic | Audio | settled | I like this old mic |
| +/- | Expo | settled | This is perfect |
| histogram | Overlay | feedback | Histogram better than cropmark, maybe a screen border too? |
| movie camera | Movie | settled | A friend of mine once asked me why that icon has only 2 leg, not sure if it needs 3, other opinions? |
| camera front | Shoot | settled | Agree |
| focus indicators | Focus | settled | Really nice, what about a border here to, like the one on the focus point selection button? |
| camera back | Display | feedback | I think that even if a bit out of contest the monitor display was more clear*, but also I like this new one too, so i'm for it, once used it will fit better. |
| wrench | Prefs | feedback | Wrench could be good, since it's used also by canon |
| check mark | Debug | feedback | this is not clear to me, what about an unhappy/broken camera? |
| "i" | Help | feedback | Agree to rename to "Info" |
| star | MyMenu | settled | Good how ti is now. |
actual icon is more clear also because before that menu was called LiveV(iew) and so it has the same icon that canon use for LV, what about calling it Screen?
Quote from: scrax on January 06, 2013, 11:21:00 PM
| wrench | Debug | feedback | Wrench could be good, since it's used also by canon, but i'll keep Prefs as name |
Not sure what you mean by "keep Prefs as name".
Quote from: stevefal on January 06, 2013, 11:38:16 PM
Not sure what you mean by "keep Prefs as name".
Oh no, I'm already confusing them :)
Wrench for me means preferences, customization. So i see it good for Prefs
Unhappy camera for Debug instead of checkmark
edited previous post
Quote from: stevefal on January 06, 2013, 08:39:58 PM
Do you mean a histogram showing crushed blacks?
yes, else you would see mountains, but no histogram :)
I've revised Prefs and Debug based on feedback.
(http://i.imgur.com/m0U4c.png)
Icon | Menu | Status | Note |
mic | Audio | settled | |
+/- | Expo | settled | |
histogram | Overlay | feedback | |
movie camera | Movie | settled | |
camera front | Shoot | settled | |
focus indicators | Focus | settled | |
camera back | Display | settled | a1ex, please chime in if you feel strongly |
wrench | Prefs | feedback | |
0s &1s | Debug | feedback | |
"i" | Help | feedback | I propose that this menu is renamed to "Info" |
star | MyMenu | settled | |
@scraz regarding borders - I try to avoid borders for a few reasons: 1) symbol size - the border occupies space that can otherwise be used for a larger symbol; 2) redundancy - to the extent that symbols are bordered, the symbols become the only discriminating factor, at which point the borders are not helping; 3) uniqueness - borders give symbols the same silhouette, which makes them less differentiated; 4) visual simplicity - remember that when selected, the icon is bordered by the tab.
Quote from: stevefal on January 07, 2013, 05:34:26 PM
@scraz regarding borders - I try to avoid borders for a few reasons: 1) symbol size - the border occupies space that can otherwise be used for a larger symbol; 2) redundancy - to the extent that symbols are bordered, the symbols become the only discriminating factor, at which point the borders are not helping; 3) uniqueness - borders give symbols the same silhouette, which makes them less differentiated; 4) visual simplicity - remember that when selected, the icon is bordered by the tab.
You are right, for focus point border is not useful but the camera screen has it so the border is a part of the symbol, maybe border is not the correct word in that case, a thin screen edge around the overlay maybe?
Since overlay are drawn on screen I think it would help not confusing the histogram with mountains.
Quote from: scrax on January 08, 2013, 12:19:15 AM
Since overlay are drawn on screen I think it would help not confusing the histogram with mountains.
To be clear, and to separate the question of border from the histogram design; are you saying that you yourself confused the histogram with mountains?
Quote from: stevefal on January 08, 2013, 12:42:26 AM
To be clear, and to separate the question of border from the histogram design; are you saying that you yourself confused the histogram with mountains?
mountains were the first thing I though before histogram, maybe because they go up too narrow, or maybe just because I'm living in a mountain region.
Thanks. Unless I agree myself, I generally wait for a trend before acting on feedback. Otherwise it's easy to get randomized.
The problem with histograms is that they look like mountains. I purposefully made skinny peaks because that's something that mountains don't usually do.
With respect to a border, I think that if a symbol looks like mountains, with a border it will look like a picture of mountains. That said, I have several bordered versions in my private iterations so I'll look again.
G3gg0 suggested crushing blacks or whites, but unless they are heavily crushed, it could just look like cropped mountains. And I didn't think that showing heavy crushing was the right condition to model in this context. The icon should model desirable exposure, I think.
I will focus on the histogram itself and try to make it look less mountain-like. Inspiration: https://www.google.com/search?&site=imghp&tbm=isch&q=photoshop+histogram (https://www.google.com/search?&site=imghp&tbm=isch&q=photoshop+histogram):
Thanks for the feedback!
About the overlay icon, just my two cents:
I think zebras identifies very well the idea of overlay options, so why not a diagonal pattern like this?
(http://i.imgur.com/E5sDN.png)
This is a sort of idea I was having, show the main thing we have in Overlay (used previous screenshot, not in the correct place):
(https://dl.dropbox.com/u/123918/MagicLantern/card-icon/overlay1.png)
or this a rough attempt at how I was thinking the "pictured mountains" ;)
(https://dl.dropbox.com/u/123918/MagicLantern/card-icon/overlay2.png)
by the way debug is good like now, I like the idea
Here is a new histogram, taken from an actual histogram. I can see that a deep valley and some bias towards black or white addresses the mountain effect.
(http://i.imgur.com/yeSz8.png)
The symbol with several small glyphs are too small to be discerned, especially at actual display size. I originally had some like that (even bigger) but the detail is too fine for this scheme.
I like the zebra stripe concept too, but a distinctive silhouette is ultimately more easily identified than a pattern alone. If this overcomes the mountain effect (and I think it does), then this should be a popular solution, since the histogram has been favorable overall.
Hi, stevefal.
tinypng.org service can reduce your icons by 30%
(http://www.e1.ru/fun/photo/view_pic.php/p/61bdbd243a9efedae63cd41b64ce5cbf/view.pic)
Well, it's kinda pointless since we don't use PNG in ML anyway ;)
Any takers for implementing the new custom ML icons?
(http://i.imgur.com/yeSz8.png)
Quote from: stevefal on January 22, 2013, 02:30:07 AM
Any takers for implementing the new custom ML icons? This set is posted at http://popspring.com/mldrop/icons7.zip.
I suppose Alex is working on the script to convert them from bmp to MLcode
Seems to work. You can edit the png files, then run make-icons.py, then recompile.
https://bitbucket.org/hudson/magic-lantern/commits/2bc81082585d
The new icons take 2.1K of RAM. Not that bad IMO.
Am I correct that none of these changes (or other recent changes) would propagate to the the 5DIII build automatically? I assume that the alpha III build is a one-off.
It's just that I'd like to see the menu icons in action before deciding I'm satisfied with them. I don't have another compatible camera.
If you compile the code yourself, you can try them right now.
Here's a screenshot:
(http://a1ex.magiclantern.fm/bleeding-edge/newicons.png)
Quote from: a1ex on January 23, 2013, 04:09:46 PM
Seems to work. You can edit the png files, then run make-icons.py, then recompile.
https://bitbucket.org/hudson/magic-lantern/commits/2bc81082585d
The new icons take 2.1K of RAM. Not that bad IMO.
I'll take a look since with Greg we are using icons for dialog options, it could be a good way to learn how to implement them in a proper way since I'm not sure if right now is good even if it works good.
I think that there should be a way to have a file with all the used icons in ML (probably ico.c) and from our code call them when we need, like it's for consts.
And what about 5DC now it can use the same icons as other builds,no?
EDIT: After a first look is not what I was expecting, need to check more how it's working. I
remember that on the mailing list there was a discussion about using canon font and icons, is there a file like consts with the GUI icons, since those will be perfect for showing the dialog options we add. So far we wrote them from scratch but they are not pixel perfect, having the same that we have in photo info screen would be better.found it.
For adding a new icon, check this changeset: https://bitbucket.org/hudson/magic-lantern/commits/53cc09038f3d
I wasn't aware of the Scripts page. I'll make a new icon for it.
I added a new Scripts icon, and improved the rather ratty Info icon.
(http://i.imgur.com/Rlaejoi.png)
The new info icon is really better than before.
Can I ask if you have the time to think about a Custo-Modes icon for a feat. under development?
This is a screenshot of what I did so far (without bitmap only a circle cut with a square):
(http://images.wikia.com/magiclantern/images/d/d7/Dialog_Quality.png)
The icon is actually showing the III c-mode, they are 5 total.
C-1
C-2
C-3
C-4
C-5
for now I'm showing them with some bars
| | | | | | | | | |
| | | | | | |
| | | | | | | | | |
more info about the feat here: http://www.magiclantern.fm/forum/index.php?topic=4002.msg24532;topicseen#msg24532
I replied at http://www.magiclantern.fm/forum/index.php?topic=4002.msg24532;topicseen#msg24532
Hello. My two small suggestions. :)
(http://www.e1.ru/fun/photo/view_pic.php/p/4494aeba2c1f7a50e6504ab39f51cc60/view.pic)
Interesting thinking. Keep in mind that the camera display is much smaller than these images on a computer.