Design proposals for future ML interface

[nanomad]

Since we are talking about menus anyway
- I'd move Audio next to Movie and make it Green too. (Green: functions working in one mode only)

[Arthur]

Should I create a topic to discuss this design?
There is still a lot to do and a lot to tweak. I think this is not the best topic to discuss this, shall we create a topic somewhere else?

[a1ex]

I can split the topic and move the second half to Development. Can you suggest a title and a splitting point? (from the post with first screenshots maybe?)

[Arthur]

I think you can name it "Creating a new UI design proposal" or something like this.

I've added all the info in the first post, this way users who are entering the topic for the first time can see the wall of text information right away.

Also, I want to make it clear that I'm completely open to suggestions and I want people to suggest any changes they think might be necessary.

Now I'm setting up my Virtual Machine, I'm going to help nanomad on some things for the 1100D port, after I get ML running on my camera, I'll take a better look at ML screens, right now I only know the main screens, so I'll look at it and make some mock-ups for each of the menus and submenus screens later.

[a1ex]

Great summary - I'm sure this will end up with a very nice design - both attractive and practical.

Aside from design, there's a very difficult problem: what's the best way to organize the menus? Some good ideas were suggested here: http://www.magiclantern.fm/forum/index.php?topic=1130.msg1796#msg1796

And another remark is about icons - they appeared for the purpose of showing quickly what's enabled and what not, from a glance. Now there are probably more icons than there should be, there also submenus... so there's a lot of room for improvement in this area.

[Arthur]

Maybe we can design some new icons, and put them at the right side, instead of the left, we can design different icons, since we're limited on colors, maybe we can change their shape instead of their colors.

For instance: for an action that can be ran, we can place an arrow at the right, when enabled it will be the same color as the menu selecion, when disabled, it could be grayed out.

We can also use symbols like stars, circles, squares... and maybe even more specific icons.

Where can I see a resume of all the icons meanings in ML?

[scrax]

A good design is not always flashy, sometimes just plain colors without any kind of fancy gradients and gloss will look good.

can't agree more (you have just found a fan) and your proposal so far are really interesting.

I don't like the gradient under the menu title, maybe better pure black.
Is the black line under it that was good before when grey, now it is too "large".
Maybe with a 1px or 2px only black line on the gradient?

[a1ex]

Icon meanings:
- green/dark gray: on/off
- play-like icon: action (like.. take a screenshot)
- volume-like icon: numeric quantity (like ISO)
- dice icon: a finite set of choices (something that can't be disabled, you just choose from a list)
- red X: actively disable something that it's normally in Canon firmware (e.g. 5x zoom)
- rectangle around the icon: that item has submenu
- variable-size green dot: some quantity that suggests size (like magic zoom size)
- red dot: warning message (you need to enable something else to use this)
- a few less-used others like RGB/Luma, named colors...

[Arthur]

Like this?


The reason I've put the gradient there was to simulate the icons in the original firmware:


We're completely limited on colors right now, so I decided to put it at the background of the top bar to give this feeling.

a1ex,
Ok, I'll try to think of something, can I double post this time (so you'll know I've finished them)? I'll make some icons and post here so people can do their suggestions.

Icon meanings:
- green/dark gray: on/off
- play-like icon: action (like.. take a screenshot)
- volume-like icon: numeric quantity (like ISO)
- dice icon: a finite set of choices (something that can't be disabled, you just choose from a list)
- red X: actively disable something that it's normally in Canon firmware (e.g. 5x zoom)
- rectangle around the icon: that item has submenu
- variable-size green dot: some quantity that suggests size (like magic zoom size)
- red dot: warning message (you need to enable something else to use this)
- a few less-used others like RGB/Luma, named colors...

While I was designing some icons on Photoshop, it decided to crash on me, so I'll make a description of my ideas:

Actions: Play-like icon, color (same as the menu highlight) when active, grayed out when inactive.

Numeric quantity/slider?: Volume-like icon, dark gray, menu highlight color indicating amount/volume.

Warning message (dependent on some other option): A grayed out circle with a X or / inside, and at the side maybe a "!" icon. Like this > (/)!

Switch (on/off): menu highlight color circle when on, grayed out when off. Alternativelly we might use a star or a tick.

Entry has a sub-menu: we can either put a small white play-like arrow on top, or bottom of the icon itself.

The other I didn't think of yet, any suggestions?

[scrax]

Yess, before it was making the top bar smaller.

I'll try to post some idea but will have to install photoshop cause i'm on a clean system for testing MLTools.

[KarateBrot]

Until now I like this version the most

IMO the top bar does look nicer without a gradient because you can really see the separation to the rest of the menu items. The same thing applies to the bottom bar with the help messages. it's separated from the menu items. the contrast is very good as well.

But i don't like the idea of a multi-colored menu. it looks a bit like a toy in my opinion. that's what i don't like about the canon menu as well. keeping constant colors makes it look a bit more "professional" i think. but of course it's just my opinion and it would not be the end of the world if the menu gets multiple colors

[mSpider]

These menus look like garbage compared to the cool looking menus ML already has.
Try not to overthink this--ML rocks the way it is.

[Arthur]

So it's two votes against the gradient top bar.

The reason I though of separating in colors was just so it would look something more native to the camera.

Another option would be to create a setting that allows you to select the color you want, similar to a "skin" but allows you to choose one of the 4 available colors. It should be quite straightforward to code, but this would be a new feature for ML, so we have to ask Alex to implement it.

I've put a picture of the design in my camera, I wanted to take a look how it would look like in it:


The text is completely readable, even the small description below, even on my 1100D low resolution LCD, even though the camera slightly squashed it to it would fit the preview area.

By the way, if anyone want to preview how the design would look in their cameras, you can save the preview image as JPEG, and name it as: IMG_[4 digits].JPG, and put it inside your memory card (using a card reader).

[mSpider]

Looking "native with the camer" is exactly what is wrong with it.
It looks like the canon stuff--whiich looks AMATUER compared to the cool high tech look of ML....

[KarateBrot]

i love the idea of some skins you can choose from. that'd be perfect

[Arthur]

mSpider, this menu is mostly ML original menu, with a different font and some dark gray squares so it doesn't look completely plain.
Also the text is bigger to it is easier to read, both for people with bad sight and for people who use cameras like EOS 1100D and the EOS 5D classic.

NOT changing the design and keeping it as is also an option, after all, this is a proposal, its not something definitive.

I think that if you really want ML to keep the old design. You can start ask for people to support against changing, so it would be more fair.

Because if everyone really prefers the original design, there is no reason to change it.

[ilguercio]

I second the opinion that ML shouldn't look too similar to Canon menu.
But, it wouldn't be bad if it had its own personal look.
I like your suggestions, Arthur, now let's see what are the other opinions about them.

[scrax]

I think that for the skin there is already something but a bit more intrusive (maybe can be restricted to menu only with an option), check
Color scheme in the Display menu.
I like that function, cause is making ML and CANON menu the same monochromatic color (added a green option in my fork...).

For preview the layout you can make a cropmark too i believe.

--------------------------

IMHO in this proposal readability is key improvement in this area, bigger and better suited fonts could make it more pleasing to use, like also a better designed layout can do. So the debate is not about how it looks but how it's readable, we are talking about getting it more suited for other ports.
So if now it has already a cool high tech look after being improved it will chill our processor too 


And since we are still suggesting thing to discuss and I'll think about making it skinnable maybe, I don't know if we can have a bmp with all the graphics needed for the menu with fixed size and color palette like for crop marks? The font can be fixed, the with a template file user can make the graphics they want.

If a user skinnable option is not possible i'll suggest to keep a layout like canon menu but with some subtle differences that will make it looks better and better readable, like the direction we are now is really good for a start.

By the way right now we have menu with 12 items, on the mockup we can have 8 so there will be the need of more menu/submenu or a scrollable menu items list.

[Arthur]

I think scrolling would not be hard to implement, since it won't require any animation, just some kind of offset when drawing the menu entries I believe, and then add that little scrollbar to indicate where the user currently is.

I think that user skinning might be a little more difficult, I think that Alex is generating most of this in realtime, for instance, I believe a plain, single color square is way faster to draw than a bitmap. My idea would be to simply allow the user to choose a color scheme from ML menu, with 4 options: Blue, Green, Yellow and Red.

Canon's "inverted look" is kind of a must for a menu like this. It is the best contrast you can get. Currently on ML the highlighted option is dark blue with white text. Canon's inverted look is black on white text, you can't get more contrast than that. Plus the bright color outline makes it easy to see what is selected, and it doesn't get in the way of readability.

[scrax]

i don't get what you mean with inverted look?
do you mean this?
http://magiclantern.wikia.com/wiki/File:PhotoDisp-600D.png
or the black under white text for selected items?

[Arthur]

No actually I'm talking about the menu highlight


That's how nanomad described it, and since I don't have a better name I've decided to call it that. Does this have any specific names or  maybe a less confusing one?

I guess that it applies to the overall look too.

Here's the original ML menu, below it, the Canon menu, and below the mockup for the next ML menu...



You can see which elements where taken from who here.
Also it is good to compare them side by side.

[coutts]

well, count the 5dc out for any change like this (there's only 16 colors total in the 5dc).

looks cool though, make it happen!

[mSpider]

Yeah, no.
The original ML menus look much cooler.

[bart]

I think the design of Arthur has potential. I see improvements in a proportional and condensed font used and the thoughts about contrast in the field.
But have some issues with space for just 8 items instead of 12 in the current ML design. The Expo menu is currently has 8 items so that fits nicely, but most other menu's hold closer to 12 items.
We have 10 tabs and way over 100 things to set.

Before we get to a new design I think we need to discuss the best way to setup the menus in general.
What design can hold over 100 functions and can maintain easy overview over operational settings. While set-once options could be in logical preferences. Maybe if we put all operational items in the main tab and make a small icon bottom right to open preferences related to the subject. And that can be a scrolling menu with all the preference in one list.

I have some thought about adding some task driven menus much like wizards or forms. So if you are in the field and think this situation requires a timelapse. Then you run the timelapse wizard. Example tasks are: timelapse, hdr video, rack focus, focus stack etc. These forms have all the settings in one page to complete the task. This mean some feature could appear on more of these forms. But that doesn't matter. You just have all the tools needed to complete the task in one place without irrelevant options.

Finally I want to ask Arthur to make a menu design with current ML layout but with proportional condensed font. Like the size you use for item help. And maybe try to adapt the selection bar with the black inner bar inside the blue for even more contrast. But keep the icons left. I think that would make it look better.

[Malcolm Debono]

I like both designs (both current and the one proposed above), however the one being proposed makes it look more like something which is part of the camera, which encourages new users since they see a familiar interface.

I also like the idea of wizards with grouped settings that Bart proposed. Since some settings are used by multiple features, it's impossible to have everything grouped together in the current interface, so it makes sense.