Magic Lantern Forum

Developing Magic Lantern => General Development => Topic started by: Arthur on July 03, 2012, 01:06:59 PM

Title: Design proposals for future ML interface
Post by: Arthur on July 03, 2012, 01:06:59 PM
Design proposals for future ML interface

Note: these proposals are not for the next release, so don't be afraid of suggesting major changes.

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

What ML GUI needs are some tweaks and better colors, and a better font.

I'll be helping with the EOS 1100D port, and I'll be working on a font to make text more readable at 1100D's low resolution display. At the same time I'll play around with a more round font, similar to the one in Canon's firmware to see if it looks better.

Currently this is the design we're working on:
(http://i.imgur.com/Tc8eb.png)
Alternative top menu
(http://i.imgur.com/u83DU.png)

Also has been proposed that each menu category have its own color, similar to how Canon's firmware is separated in color coded categories:
(http://i.imgur.com/wRtSY.png)

(http://i.imgur.com/i3qJI.png)
Note: We don't have to necessarily color the icons each with the color of its category, we can just change the base color when the category is changed. This is for illustration purposes only.

Separate each category as the following:

Blue: Audio, Expo, LiveView
Green: Movie, Shoot, Focus
Yellow: Prefs, Display
Red: Debug, Info

Also could be separated like this: (suggestion by nanomad)

Blue: Expo, LiveView
Green: Audio, Movie, Shoot, Focus
Yellow: Prefs, Display
Red: Debug, Info

So they are categorized as:
Blue: (General shoot/movie settings)
Green: (Mode specific settings)
Yellow: (Magic lantern settings)
Red:  (Debug information and tools)

About the colors:
Currently we're limited to Canon's palette. It is possible to change it, however, it requires some hacks, and causes a flickering bug in the menu sometimes, so it is better if we use only these colors.

(http://i.imgur.com/NLDmD.png)

Some notes to keep in mind while creating the design:


Feel free to suggest changes, this design is by no means definitive.
We'll be working on top of suggestions to improve this design.
Title: Re: Design proposals for future ML interface
Post by: a1ex on July 03, 2012, 01:17:47 PM
There is already a proportional font used by ML - the one for menu headers.

Switching to proportional requires refactoring more than half of menu entries - not quite straightforward. But if the design is worth it, we may consider it for 2.4 or 2.5. But for now we'll leave it unchanged.

This is the color palette that can be used - actually only the first 80 entries:

http://magiclantern.wikia.com/wiki/File:Palette.jpg (http://magiclantern.wikia.com/wiki/File:Palette.jpg)

so grayscale gradients are possible.
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 03, 2012, 01:32:28 PM
Isn't this Canon's palette? Why only the first 80 entries can be used?

Edit: Ok, I've seen why.

I think there is a canon function to change the palette, judging by what I've seen here, it is called when entering menus, this will load this palette to the memory... the palette address is always the same? if it is it might be safe to write to it and restore the value later... maybe...

Modifying the palette in realtime was a common practice in the 16bit/32bit video game consoles, I see canon does the same here.
Title: Re: Design proposals for future ML interface
Post by: a1ex on July 03, 2012, 01:39:33 PM
The other entries are camera- and dialog-specific, and I prefer not to change them. It is possible, but it requires a few ugly hacks which I'd rather avoid.
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 03, 2012, 01:45:12 PM
Any chances of finding the actual function canon uses to change the palette?

Maybe their way of changing the palette are similar to the ugly hacks you're talking about, and they simply write the palette to that area when they need to change it.
Title: Re: Design proposals for future ML interface
Post by: a1ex on July 03, 2012, 01:56:14 PM
Calling Canon's ChangeColorPalette is not safe (causes ERR70 if called at the wrong time).
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 03, 2012, 02:02:01 PM
I see...
So it could also give ERR70 if you try to change it in realtime... probably would trigger some kind of error check.

Without being able to change the palette or ensure that it uses at least the same palette as the original menus use, the only option would be a grayscale design (not bad really, but kind of limited).

At least we have 42 different shades of gray.
Title: Re: Design proposals for future ML interface
Post by: a1ex on July 03, 2012, 02:09:08 PM
The first 80 entries are always the same (in all cameras, all modes used by ML). So, grayscale is only required if we want to use gradients (which you said it's optional).
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 03, 2012, 02:15:17 PM
Yeah, but the color palette is really limited, at first I though changing the palette was quite trivial, also I though it would be possible to use the same palette Canon use on their menus.

It is be possible to make a better look using gray scale plus the colors available but it is quite a challenge.
Title: Re: Design proposals for future ML interface
Post by: a1ex on July 03, 2012, 02:46:36 PM
In this case, I'd say this: you can come up with a design that requires max 255 colors (as one of them has to be transparent), and if it's worth the effort, I think I'll be able to implement it in the next few months. There are no restrictions about what colors are used. There will be a ugly flicker when you change the palette (because ML menu sits on the top of some Canon menu, and you can often see both of them figthing on redraws) - that's the main technical issue.

Semitransparent entries seem possible too, though I don't fully understand how to setup them.

Some of the previous work on this: http://groups.google.com/group/ml-devel/browse_thread/thread/d1e273de2490f5e5 (http://groups.google.com/group/ml-devel/browse_thread/thread/d1e273de2490f5e5).
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 03, 2012, 03:38:22 PM
This proposal was quite nice, but also would require a major overhaul. That yellow color kinds of screams "Nikon" for some reason.

I'll try to come up with some tests.

Also if there is anyone else with experience in design and want to help me, PM me. This way we can come up with something really good and worthy of the time to implement it.
Title: Re: Design proposals for future ML interface
Post by: a1ex on July 03, 2012, 03:41:35 PM
Two problems I see with that design:
- tiny font: it looks OK on large screen, but probably too small on camera.
- displaying all possible choices is not always easy (and feels cluttered IMO).
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 03, 2012, 04:03:39 PM
That's the same I though, the text is too small, it would be too hard to read on a camera like the 5Dc and 1100D.
Also he used an anti-aliased text, which is possible but not feasible.

I'll make something on top of that design, together with the original ML menu.

Edit:
Here's a test, based off that previous proposal:
(http://i.imgur.com/1F5i2.png)
Yellow and dark shades of gray really go well together...

I didn't put any anti-aliasing on the text so it looks closer to what is feasible, here's a downscaled version, that's how it will (probably) look in the camera itself:
(http://i.imgur.com/YZu3L.png)

Of course, this is just a test though, I'll try to improve it, so I want some feedback, and then I can work on it and do something that's both useable, not cluttered, and good looking.

Edit #2:
(http://i.imgur.com/GO1jd.png)
Darkened the right side a bit to make a contrast with the selected option.
Also looks very good with green instead of yellow.
Red is also an option.
Title: Re: Design proposals for future ML interface
Post by: nanomad on July 03, 2012, 05:16:14 PM
I know it may sound wierd, but can't we keep the stock Canon "inverted look"? I think it's better if we are aiming for "integration"

(http://i.imgur.com/S5e6i.png)
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 03, 2012, 05:25:45 PM
That's also an option, and was what I first though of.
When the menu changes too much it looks "alien".
I also like how Canon changes the color schematic based on the menu category.
Title: Re: Design proposals for future ML interface
Post by: a1ex on July 03, 2012, 05:28:58 PM
Another thing to keep in mind. Many users are working outside in full sunlight - a strong contrast is needed so they can read the menu. Light gray on dark gray may not be that easy to read in difficult conditions.

The darkened gray may be useful to suggest edit mode - when you only change one option, not navigate around.
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 03, 2012, 05:36:31 PM
I completely forgot about this! Yeah it would be terrible, it already is with canon's original menu sometimes.

I've modified it some more, I also added a gradient at the top bar:
(http://i.imgur.com/Tc8eb.png)
Title: Re: Design proposals for future ML interface
Post by: nanomad on July 03, 2012, 05:40:32 PM
We should keep the highlighted top menu entry white. Other than that, good job.

Nope, it looks terrible
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 03, 2012, 05:47:43 PM
Like this?
(http://i.imgur.com/fXk66.png)

(http://i.imgur.com/u83DU.png)
Title: Re: Design proposals for future ML interface
Post by: nanomad on July 03, 2012, 05:51:41 PM
Just forget what I've said, really. The previous version is fine
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 03, 2012, 06:00:48 PM
Would it be possible to do different colors for each cagetory? like in the original?
Title: Re: Design proposals for future ML interface
Post by: a1ex on July 03, 2012, 06:03:20 PM
Technically possible, no problems about that.

What colors do you suggest?
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 03, 2012, 06:07:36 PM
Using the default palette we've got these 4 to choose from:
(http://i.imgur.com/wRtSY.png)
Title: Re: Design proposals for future ML interface
Post by: a1ex on July 03, 2012, 06:11:03 PM
I like the light blue and green ones. Red could be reserved for debug menu :)
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 03, 2012, 06:16:14 PM
How about:

Blue: Audio, Expo, LiveView
Green: Movie, Shoot, Focus
Yellow: Prefs, Display
Red: Debug, Info

(http://i.imgur.com/i3qJI.png)
Somewhat like this...

Note: We don't need to color the icons, this is just to show which color each one of them would be.
Title: Re: Design proposals for future ML interface
Post by: nanomad on July 03, 2012, 06:31:37 PM
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)
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 03, 2012, 08:56:59 PM
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?
Title: Re: Design proposals for future ML interface
Post by: a1ex on July 03, 2012, 09:02:51 PM
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?)
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 03, 2012, 10:30:08 PM
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.
Title: Re: Design proposals for future ML interface
Post by: a1ex on July 03, 2012, 10:34:57 PM
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.
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 03, 2012, 10:51:09 PM
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?
Title: Re: Design proposals for future ML interface
Post by: scrax on July 03, 2012, 10:53:12 PM
Quote from: CarvalhoArthur on July 03, 2012, 01:06:59 PM
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?
Title: Re: Design proposals for future ML interface
Post by: a1ex on July 03, 2012, 11:05:32 PM
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...
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 03, 2012, 11:09:21 PM
Like this?
(http://i.imgur.com/Cg9Ct.png)

The reason I've put the gradient there was to simulate the icons in the original firmware:
(http://i.imgur.com/S5e6i.png)

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.

Quote from: a1ex on July 03, 2012, 11:05:32 PM
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?
Title: Re: Design proposals for future ML interface
Post by: scrax on July 04, 2012, 06:52:58 AM
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.
Title: Re: Design proposals for future ML interface
Post by: KarateBrot on July 04, 2012, 07:37:37 AM
(http://i.imgur.com/1F5i2.png)

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
Title: Re: Design proposals for future ML interface
Post by: mSpider on July 04, 2012, 11:48:56 PM
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.
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 05, 2012, 12:14:41 AM
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:
(http://i.imgur.com/7hI1r.jpg)
(http://i.imgur.com/1QnP3.jpg)
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).
Title: Re: Design proposals for future ML interface
Post by: mSpider on July 05, 2012, 12:20:48 AM
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....
Title: Re: Design proposals for future ML interface
Post by: KarateBrot on July 05, 2012, 12:31:57 AM
i love the idea of some skins you can choose from. that'd be perfect
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 05, 2012, 12:45:59 AM
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.
Title: Re: Design proposals for future ML interface
Post by: ilguercio on July 05, 2012, 01:08:38 AM
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.
Title: Re: Design proposals for future ML interface
Post by: scrax on July 05, 2012, 01:32:20 AM
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  8)


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.
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 05, 2012, 01:50:05 AM
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.
Title: Re: Design proposals for future ML interface
Post by: scrax on July 05, 2012, 02:06:28 AM
i don't get what you mean with inverted look?
do you mean this?
http://magiclantern.wikia.com/wiki/File:PhotoDisp-600D.png (http://magiclantern.wikia.com/wiki/File:PhotoDisp-600D.png)
or the black under white text for selected items?
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 05, 2012, 02:13:36 AM
No actually I'm talking about the menu highlight
(http://i.imgur.com/S5e6i.png)

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...
(http://i.imgur.com/8hz69.png)
(http://i.imgur.com/S5e6i.png)
(http://i.imgur.com/Cg9Ct.png)
You can see which elements where taken from who here.
Also it is good to compare them side by side.
Title: Re: Design proposals for future ML interface
Post by: coutts on July 05, 2012, 04:37:27 AM
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! :)
Title: Re: Design proposals for future ML interface
Post by: mSpider on July 05, 2012, 11:58:23 AM
Yeah, no.
The original ML menus look much cooler.
Title: Re: Design proposals for future ML interface
Post by: bart on July 05, 2012, 11:58:57 AM
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.



Title: Re: Design proposals for future ML interface
Post by: Malcolm Debono on July 05, 2012, 12:42:38 PM
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.
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 05, 2012, 02:55:52 PM
12 items will make it too tight and scaling down the text will affect the visibility on some cameras.
I was able to squeeze 10 items in.

The image to the left is the same layout, just slightly resized, and has a larger text, the one to the right has smaller text, and is slightly more spacious.
(http://i.imgur.com/EFHE4.png)(http://i.imgur.com/ynzsX.png)
I still have to check the readability for that one to the right.

I think that, alternatively we could keep 8 items per tab, but add scrolling to the menu.
We could put the most used, and most important first, and put the extras and less commonly used functions to the bottom.

Here's a preview of how it will look at my camera:
(http://i.imgur.com/Q01ni.jpg)
Still very readable.
I had to cut off the top bar on  this one so it would show in the correct size in the camera.

Quote from: b4rt on July 05, 2012, 11:58:57 AM
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.
You say the same blue as the current ML selection? I've tried using the same blue as the current ML highlight color around the black square, but that color makes it hard to see, it has to be a bright color that that is not white in order to be really visible.

About the icons, I'm planing on trying to put them somewhere, either the left or right side, also I'm thinking about redesigning them, so they would match the layout, instead of using colors to indicate the states, I'm thinking about using shapes and other symbols to make it easy to understand without breaking the design.

Also it might be possible to use a combination of colors and shapes too, but I think that its better to decide the basic layout first, this way its easier to design and fit the icons later.

I also think that the idea of wizards are really good.

And yeah, I'll be a problem where there are lots of entries...
(http://i.imgur.com/f43Sd.png)
But I guess we can either change the entries or maybe add scrolling to the menus.
Title: Re: Design proposals for future ML interface
Post by: ilguercio on July 05, 2012, 09:44:50 PM
I like this style very much, Arthur.
The current layout isn't bad but this is a bit more catchy :)
Title: Re: Design proposals for future ML interface
Post by: bart on July 05, 2012, 11:36:45 PM
Hi Arthur,

I made a magiclantern.fm style variant. With dither gradient on top.

(http://www.magiclantern.fm/images/menuprop.png)
(http://www.magiclantern.fm/images/menuprop2.png)
Title: Re: Design proposals for future ML interface
Post by: nanomad on July 05, 2012, 11:55:25 PM
The "magiclantern.fm" edition sure has less eyestrain if used at nighttime, and that's I thing that I'd like to see
Title: Re: Design proposals for future ML interface
Post by: Malcolm Debono on July 06, 2012, 12:16:44 AM
Nice! Really like Bart's first design.

Would it be possible to have some sort of scroll indicator on the side to indicate that there are more menu items further down?
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 06, 2012, 12:28:02 AM
Hey Bart,

I didn't think of using dithering! I had forgotten this could be done, nice!

I also think that the first one is better too, that grayish green is pretty close to white, I think that a more saturated color looks best there.

nanomad,
That's why it is a good reason to have a color scheme selector of sorts.

Malcom,
Yes, I think it is definitely possible. It might be just bar with a gray or some other color, and a square to indicate the current position.
Canon's firmware also got one, if you go to the Custom menu, My Function List, there will be a scrollbar to the right, we could do  something similar.
Title: Re: Design proposals for future ML interface
Post by: a1ex on July 06, 2012, 12:33:26 AM
Scrollbars have a disadvantage though: you don't see everything that's available in that menu, at a glance.
Title: Re: Design proposals for future ML interface
Post by: Arthur on July 06, 2012, 12:37:22 AM
That's why we can push the less used functions to the bottom, and let the important ones to be seen at glance.
With this design we have 10 items, 2 less than the original, so we can leave the two less used of each category there.
Title: Re: Design proposals for future ML interface
Post by: scrax on July 06, 2012, 01:15:55 AM
We can already hide items this could be used to have only used item
Title: Re: Design proposals for future ML interface
Post by: bart on July 06, 2012, 09:35:33 AM
Quote from: Arthur on July 06, 2012, 12:28:02 AM
Hey Bart,

I didn't think of using dithering! I had forgotten this could be done, nice!
I also think that the first one is better too, that grayish green is pretty close to white, I think that a more saturated color looks best there.

I did the dithering by making a gradient in photoshop from black to one of the blues in the palette. then switch to indexed color and select 10 colors there. Photoshop will take care of the dither pattern then.

I switched from bright yellow to this green to make the item draw less attention. The yellow is a real eye catcher (maybe because I like yellow). So if we put in yellow then I suggest to use it for the menu items. Maybe contrast is less but I can't keep my eye from yellow items.

EDIT There is something wrong with the font in the 10 item menu. With the 8 item menu both the menu items and help text are rendered very nice with symmetrical O's. While in the 10 item menu both the menu items and help text don't have symmetrical O's. So maybe the font renders better at certain sizes. With a little experimenting you can pick the ideal sizes for the font and build a menu out of those.
Title: Re: Design proposals for future ML interface
Post by: calypsob on July 08, 2012, 04:19:54 AM
I personally think the new GUI looks brilliant.  Magic lantern gets me so excited I could shake a baby.
Title: Re: Design proposals for future ML interface
Post by: scrax on July 10, 2012, 10:34:42 PM
Quote from: b4rt on July 05, 2012, 11:36:45 PM
(http://www.magiclantern.fm/images/menuprop.png)

I like this color scheme, I think the blue border of selected item could be the same of what it is now (if already isn't). the gradient is great but icons are a little too grayish (maybe just on my screen).

Also if you want, can you try to invert the gradient in the icon only (but keeping selected menu like now) to see how it looks?


WOW I've made a crop mark of it and it's great! In PLAY mode you can see it in full screen.
Title: Re: Design proposals for future ML interface
Post by: druckgott on July 15, 2012, 06:05:22 PM
Are there any news?

Whith new disign ML will be much more perfekt as it is already
Title: Re: Design proposals for future ML interface
Post by: scrax on July 24, 2012, 10:25:05 PM
I like bart suggestion, just added a scrollbar and MLlogo:
(https://dl.dropbox.com/u/123918/MagicLantern/menuprop.png)
Title: Re: Design proposals for future ML interface
Post by: ilguercio on July 25, 2012, 11:26:05 AM
The scrollbar is a bit odd, i would rather have an arrow pointing down if we are at the very top of the list, pointing up if at the very bottom and both if in the middle of it.
Title: Re: Design proposals for future ML interface
Post by: Michael Zöller on July 25, 2012, 01:25:15 PM
Thanks guys. Great ideas in this thread! A few things on my mind.

I think a scrollbar is better, because it really helps one to know where in the list one is (as opposed to just arrows). I don't think the hovering one is the best option, though.
One thing I'd love to see is that when one changes values (in either main or sub-menus) and there are several values to choose from (like mic source setting) that a list is displayed so that one can instantly see the options instead of toggling through the list.
I too think that color schemes are the one way to make everyone happy.
Title: Re: Design proposals for future ML interface
Post by: a1ex on July 25, 2012, 01:28:59 PM
Agree with value list, but not sure what's the best way to show them.

I don't like scrollbars - you don't see what's on the other half of the screen. An important element of current menu design was to be able to see at a glance what's enabled and what not.
Title: Re: Design proposals for future ML interface
Post by: KarateBrot on July 25, 2012, 01:32:01 PM
Yeah I agree with Alex about the visibility.
Title: Re: Design proposals for future ML interface
Post by: Michael Zöller on July 25, 2012, 01:38:28 PM
About scrollbars. I totally agree with a1ex that getting all items on one screen would be perfect. I just have a feeling that the functionality of ml will only increase with every release. Fitting all options into menus and submenus might prove to get difficult.

And a rather heretic question: Why have two menus (canon and ml) anyway? I have not made up my mind yet, but sometimes I think "why do I even have to use the canon menu besides the ml one?". This would obviously increase the item count even more. So to put it in a more friendly way: Wouldn't users prefer to set all relevant settings from only one place?
Title: Re: Design proposals for future ML interface
Post by: a1ex on July 25, 2012, 01:41:02 PM
Then... how do you integrate them?
Title: Re: Design proposals for future ML interface
Post by: Michael Zöller on July 25, 2012, 01:46:21 PM
Good question... :) Just trying the get all relevant aspects into the discussion. I'm sure we will find a way.

But the more I think about it... having to switch between both menus during a shoot can be a bit challenging during the heat of the battle. It just does not feel very intuitive. I can see that from where ML came from it made sense to see it as an addon, but now that I use it on my professional shoots I feel that one place where I control everything from makes more sense.
Title: Re: Design proposals for future ML interface
Post by: alfatreze on July 25, 2012, 06:04:13 PM
It's really nice to see this topic being brought up again. Also I had never seen that thread about my screens A1ex  :P.

With all the development ML has been through, and only broadening it's possible scope with all the possibilities still ahead (ahem DIGIC Registers), this effort really should be about first and foremost making the UI flexible, robust and easily expandable, and only second about color, contrast, gradients and icons.

I made my first versions bases on an idea of making the functions more visible, which did result in some extra clutter. Can't really say it was a very involved effort or that there was much feedback :). Although it did please me to see my integrated help suggestion making it in and improved upon.

I believe the best way to go would be to create a core UI development group with a few people. This way we can work faster, more focused, and without posting every little detail (but keep info flowing and gathering feedback from the community).
With this setup the best way would be to work with wireframes of the UI, exploring well the menu mechanics and flexibility of the system. This should include the menus, different camera res, even help system (moving away from the IMG based one).
After this the focus could then be on color, technical issues with fonts, themes (low/high contrast at least) and polishing.

Let me know what you think of this, I will contribute to the effort no matter what the outcome of the development may be - Now let me just find and dust of those old files...

Furthermore I have to thank all the ML developers, testers and contributors for the amazing tool we now have.
Although I really have used it little in the past 8 months (proud father of a very energetic 4 month old girl) I'm eager to see it developing further and improving in every step of the way. As much as I am to exploring it further and producing some amazing images with it.

PS: I really see no issue with the menu being different from the standard Canon menus, for me it's all about function and we don't need any kind of artificial limitation in trying to look similar or even having that as a start point.
I would also make the case that the menu changes a bit in every camera ML supports, particularly the older ones (can we get a few screens from each as reference!).
Furthermore, I don't really think that the fact of it being different distracts in any way, you just know you are in ML :) (where the good stuff happens).
Title: Re: Design proposals for future ML interface
Post by: jplxpto on July 29, 2012, 10:16:35 PM
Might be a good idea to have a dynamic menu which would be presented the last user-selected options.
This way we could have a menu that is automatically adjusted to each of us, without additional configuration.

It seems you an idea of implementing feasible and useful?
Title: Re: Design proposals for future ML interface
Post by: a1ex on July 29, 2012, 10:24:58 PM
It was discussed roughly one year ago, but the main argument against it was that users prefer to get used to some fixed order of menu items, rather than having it changed all the time.
Title: Re: Design proposals for future ML interface
Post by: jplxpto on July 29, 2012, 10:30:41 PM
I understand your argument. Probably I would be the first to feel it.

I really enjoyed this thread, do not think it a priority to improve the graphical interface, but can make its use more attractive to many users.

I appreciate your answers.
Title: Re: Design proposals for future ML interface
Post by: screamer on July 30, 2012, 12:46:41 AM
hey guys, i like a lot this thread, and i find the new design proposal very interesting, especially the latest versions. And as i undersstood there's the problem of space. and i agree with alex about scrollbars, it's more functional to have all visible. So, what about using more than one menu for dividing features? that is what canon does in it's menu. So we can have 2 or 3 menu about shooting, 2 or 3 about video and so on. So one can divide the features in 2 or 3 or whathever you want windows. And, at this point, should be interesting that the upper menu, the main one with all the tabs, has the arrows to indicate that there are others menu on the right, or on the left if you are at the end of menu... i don't know if i was able to explain well because of my poor english.
Anyway, using this kind of way, should be interesting to use the color for the categories, so for example all the "photos related" tabs are green, all the "movie related" tabs are blue and so on.

Here is an example of what i mean. i really don't have though much about the colors to use, it's only an example:
(http://www.bcaa.it/ml_multi.jpg)

Anyway, adding multiple tabs for the same category should be very useful in future, when the ml feauters will grow up so much to stay in the space that have now :)
Title: Re: Design proposals for future ML interface
Post by: pteraser on July 31, 2012, 05:08:16 PM
I really like this new interface.

The last post by screamer makes total sense. I wouldn't like to see the scroll bar.

I guess you should include this design in the new 2.4 if that's possible.

:)

Diogo
Title: Re: Design proposals for future ML interface
Post by: Malcolm Debono on July 31, 2012, 05:19:23 PM
+1 for screamer's latest design. Besides, even the Canon menu follows that system, so it should make sense to new users as well.
Title: Re: Design proposals for future ML interface
Post by: alfatreze on July 31, 2012, 07:51:10 PM
My biggest problem with this option is that it would create a large amount of tabs, hiding a fair number from view.

Learning to use a different menu system is an irrelevant issue when you are trying to use a robust and complex tool like ML. The biggest value for the user would be in organization, clarity and workflow, never in similarity to "the other menu".
Title: Re: Design proposals for future ML interface
Post by: Alia5 on August 01, 2012, 01:46:57 AM
What about something like this?

(http://img42.imageshack.us/img42/6625/mldesing0.png)

(http://img716.imageshack.us/img716/9436/mldesing1.png)



This way we could see a lot of things at once and wouldn't need any scrollbars or tabs ;)
Maybe we could also make the text a bit smaller, i dont know how it would look on the camera itself...
Title: Re: Design proposals for future ML interface
Post by: screamer on August 01, 2012, 02:06:16 AM
I've started this post before that Alia5 posted his one. So before sending it i say, yeah, you idea of splitting the screen is fantastic, and really interesting. I see only 2 problems in that. The first is that some voices require space, else you risk to don't understand it. But probably it's not a big deal, because changing some words, decreasing a little bit the font dimension... could work.
The second problem is that this is a "short and middle term" solution. I mean, before or later, the space will end again. with a some kind of pages you can expand it how you want. But this problem too is only ipotetic, and i don't know how many more magic features the magic developers team can invent :DD

Anyway, here is the post i was writing before seeing your post (that i like ;)))

I understand and agree your point, alfatreze.
But consider that, with the actual features in magic lantern, my proposal of menu will be monotab in the most of cases. It's only about future expandibility. I mean, quite all the things that now can stay in a single tab probably would stay in a single tab in this new interface too. But what about when ml will have dozen of new features? there will become a time where the amount of space will not be enough.
Anyway in these days a though about another idea for having more space (inspired by the menu of my tv :PP). Of course the concept of dividing macrocategories in colors is always valid, if you like it. but in this proposal i didn't done.

I think we could use the upper horizontal menu with the single icons for the macrocategories (like now). And we can add a second menu, but vertical, with the "pages" of the category, like in this image:
(http://www.bcaa.it/ml_multi2.jpg)
A big disadvantage of this way is that you must do one more click every time, and i love the way you can jump thru the features in the actual magic lantern. so i don't know if i like it, probably i prefer the previous proposal.
And i add to that proposal a feature. The user should decide the order of the pages. I mean, i imagine a upper menu longer than the space available, because you must move a lot in horizontal to find for example the "focus" tabs. but maybe i use a lot tha feature and i want to put it in first position. Or for example i use a lot the features in the first page of "movie", but i don't use never the second page, so i can put it at the end of the menu.
In this way every user can have a default order (probably should be useful a "restore to default" button :)) but can change it for better fitting his use of ml, that is a goal that in part is already well accomplished with the hide feature, i think ;))

Last tought about the proposal of the image in this post. For who has 2 wheels on camera, like 60d or upper, the navigation should be very easy and useful, using a wheel for the horizontal upper menu and the other one for the vertical left menu. and the direction keys for moving in the voices of menu. But for who has a canon with only a wheel, the interface navigation become more difficult, because moving thru menu with the arrow keys means 1 more clik for going to select the feature you want, and 1 more click to exit and go in other tab.

what do you think about it?
Title: Re: Design proposals for future ML interface
Post by: ilguercio on August 01, 2012, 02:10:44 AM
One should have the complete menu and one custom menu for the most used functions.
A bit like hiding the submenus you don't use, this menu will contain like 10 functions you have to change often.
Title: Re: Design proposals for future ML interface
Post by: screamer on August 01, 2012, 02:28:54 AM
Agree totally with ilguerio. The easiest thing to implement, and in my opionion the most powerful way to manage a crescent complexity of features, would be to mix the "easy/advanced" switch of the old version, with the new hide function. So one can have a shortcut to switch between ML full, or ML with only what i use often.
I'm not a developer or a programmer, but think it is easy to store the 2 version of menu (with hided thing, with all) and put a voice in menu for fast switching the 2 versions...
and of course that voice in the menu should'nt be hideable :PPP

Title: Re: Design proposals for future ML interface
Post by: Alia5 on August 01, 2012, 02:36:45 AM
Quote from: screamer on August 01, 2012, 02:06:16 AM
I've started this post before that Alia5 posted his one. So before sending it i say, yeah, you idea of splitting the screen is fantastic, and really interesting. I see only 2 problems in that. The first is that some voices require space, else you risk to don't understand it. But probably it's not a big deal, because changing some words, decreasing a little bit the font dimension...

Maybe the text could also be scrolled, i think...
Also you could take too long settings into one line ;)

And seeing it again the text has to be a lot smaller.

I'll try to get another idea of how to manage it smart and see a lot of things completely at once...

Quote from: ilguercio on August 01, 2012, 02:10:44 AM
One should have the complete menu and one custom menu for the most used functions.
A bit like hiding the submenus you don't use, this menu will contain like 10 functions you have to change often.

I like this idea, but my problem with this is that you might forget some features or that you don't see new features if a lot are included in a new version...
Title: Design proposals for future ML interface
Post by: alfatreze on August 01, 2012, 09:35:39 AM
In regard to the vertical tabs, it's an easy solution for the problem, not sure if the best one, but it works well. Never scrolling I would say, as it decreases predictability. And for the user that is paramount - predictability and coherence. That's why dynamic menus are a no-no (there was a reason they existed in, and were cut out of office).

As for customization I see it working in either of 2 ways (or both). The first would be the easiest way possible, while using ML the user can use a shortcut to set the selected function to his "favorites" menu, and on a second time edit that menu to change options, position of features, etc. the classic menu would be unchangeable. The second option would be for the more advanced user, where he could edit a config file and go in depth with every function and change every point in the menu, from the number of tabs, tab names, every function and sub-menu. They could also be probably saved as profiles.
This would cater for both the average user wanting a quick cleanup, and building it slowly. As well as for the advanced user that want a really tight menu, more geared up for production. Studio shot, filmmaking, etc. users could even share their configs (auto export menu function with screenshots would be a plus here).
Title: Re: Design proposals for future ML interface
Post by: he56ys5ysu7w4 on August 01, 2012, 10:10:51 AM
The "advanced menu" option together with the possibility to hide never/seldom used items is great.

Haven't read the hole thread but hope that in the process of changing the colors that you also look at the logical build and nomenclature/terminology of the menu.

Thank you for your hard work!!
Title: Re: Design proposals for future ML interface
Post by: Novosibirets on August 01, 2012, 06:50:09 PM
You can try it in this style.

(http://cs5150.vk.me/u16007354/doc/1a03c2afead5/mld2_1.jpg)

(http://cs5150.vk.me/u16007354/doc/8e5fdf0eb7c5/mld2_2.jpg)
Title: Re: Design proposals for future ML interface
Post by: Kromofone on August 01, 2012, 10:48:17 PM
Personally, I don't like the last one. It just looks like...I don't know...too ''DVD Video Menu'' like. It's good to look at but for me, it wouldn't be of much use and it wouldn't be practical and easy to use. Maybe if ever there were made youtube interactive video tutorials about Magic Lantern, this one would be perfect for it!
Title: Design proposals for future ML interface
Post by: alfatreze on August 02, 2012, 01:22:49 AM
I like the style, but here unlike most times when designing something were we need white space and balance, we actually need the most possible density while remaining clear, structured and achieving good hierarchy.

I also have to investigate, for projected light, as is a screen, what actually is the most easy to read, black on white or white on black, it also might have an impact on battery life, it should be tested,

Here's some snippets and links:

"People with astigmatism (aproximately 50% of the population) find it harder to read white text on black than black text on white. Part of this has to do with light levels: with a bright display (white background) the iris closes a bit more, decreasing the effect of the "deformed" lens; with a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye."

"When reversing colour out, eg white text on black, make sure you increase the leading, tracking and decrease your font-weight. This applies to all widths of Measure. White text on a black background is a higher contrast to the opposite, so the letterforms need to be wider apart, lighter in weight and have more space between the lines."

"...the most readable color combination is black text on white background; overall, there is a stronger preference for any combination containing black. The two least readable combinations were red on green and fuchsia on blue. White on blue and red on yellow were ranked fairly high, while green on yellow and white on fuchsia were ranked fairly low. All others fell somewhere between these extremes.

Also, in every color combination surveyed, the darker text on a lighter background was rated more readable than its inverse (e.g. blue text on white background ranked higher then white text on blue background)."

"In any event, the white on blue contrast provides especially good contrast in low brightness environments. And, as William told me, this was very useful when refresh rates were slower (i.e., less than 60 Hz). The white on blue contrast in such situations reduced perceived flicker."

"I'm not (particularly) disabled in my sight (other than being 51 years of age), and yet when I get to a site I need to, or strongly want to, read that is white on black — I use CTRL A (the PC keycode for highlight all) to turn the text into dark blue on white (my user settings). That allows me to read the text.
{shrug} It works for me. I wish the 'trend' of light text on dark backgrounds would hurry up and pass by though."



http://www.visualexpert.com/FAQ/Part6/cfaqPart6.html (http://www.visualexpert.com/FAQ/Part6/cfaqPart6.html)

http://www.joedolson.com/articles/2006/08/on-the-readability-of-inverted-color-schemes/ (http://www.joedolson.com/articles/2006/08/on-the-readability-of-inverted-color-schemes/)

http://www.writer2001.com/colwebcontrast.htm (http://www.writer2001.com/colwebcontrast.htm)



Title: Re: Design proposals for future ML interface
Post by: KarateBrot on August 02, 2012, 09:38:54 AM
Novosibirets what font did you use for your images?
Title: Re: Design proposals for future ML interface
Post by: Novosibirets on August 02, 2012, 02:27:25 PM
Quote from: KarateBrot on August 02, 2012, 09:38:54 AM
Novosibirets what font did you use for your images?
PT Sans Narrow (http://www.google.com/webfonts/specimen/PT+Sans+Narrow)
Title: Re: Design proposals for future ML interface
Post by: davekatague on August 05, 2012, 12:45:12 PM
(http://i.imgur.com/O3jst.jpg)

What would people think of doing it this way? :)
Title: Re: Design proposals for future ML interface
Post by: ilguercio on August 05, 2012, 12:50:01 PM
As i said, i like it but i don't know if it can be made this way.
Previous layouts are good but they do remember too much the standard menu from Canon so thumbs up for your design.
Title: Re: Design proposals for future ML interface
Post by: Michael Zöller on August 05, 2012, 02:59:55 PM
I really like it, please go on with your design tests and keep us updated.
Title: Re: Design proposals for future ML interface
Post by: Novosibirets on August 05, 2012, 05:26:11 PM
Especially for the Magic Lantern, I painted these icons. I tried to make them intuitive and simple. With your permission, I will continue experimenting.
P.S. Sorry my bad English.

(http://cs5153.vk.me/u16007354/doc/08ee7a1b2b75/mld3_icons1.jpg)

(http://cs5153.vk.me/u16007354/doc/b5be23288f69/mld3_1.jpg)

(http://cs5153.vk.me/u16007354/doc/fccf75a9bbc1/mld3_2.jpg)

EXPOSURE (includes Expo), FOCUS (includes Focus), PHOTO (includes Shoot), VIDEO (includes Movie),  AUDIO, LIVE VIEW (includes Overlay, Display, Prefs), MAGIC LANTERN (includes Debug, Help).
Title: Re: Design proposals for future ML interface
Post by: scrax on August 05, 2012, 05:40:52 PM
Quote from: Novosibirets on August 05, 2012, 05:26:11 PM
Especially for the Magic Lantern, I painted these icons. I tried to make them intuitive and simple. With your permission, I will continue experimenting.
P.S. Sorry my bad English.

EXPOSURE (includes Expo), FOCUS (includes Focus), PHOTO (includes Shoot), VIDEO (includes Movie),  AUDIO, LIVE VIEW (includes Overlay, Display, Prefs), MAGIC LANTERN (includes Debug, Help).

I like them but at first I was thinkin that AUDIO icon was a magnify lens instead of a mic, can you try something like a speaker instead or add a grid on the mic head?
Title: Re: Design proposals for future ML interface
Post by: Novosibirets on August 05, 2012, 05:52:35 PM
Quote from: scrax on August 05, 2012, 05:40:52 PMor add a grid on the mic head?

~?

(http://cs5153.vk.me/u16007354/doc/9a544a0760d8/mld3_icons1_audio2.jpg)
Title: Re: Design proposals for future ML interface
Post by: scrax on August 05, 2012, 06:13:27 PM
yess
;)
Title: Re: Design proposals for future ML interface
Post by: Kromofone on August 05, 2012, 11:15:45 PM
The last two designs are very good, but the menu design that davekatague did, is the best!!! It's the most promising one, and I would really recommend if that one was used in the future versions of Magic Lantern! Maybe we could integrate like different style menu options, that we could install a different menu, if we would want to.
Title: Re: Design proposals for future ML interface
Post by: 3pointedit on August 06, 2012, 09:31:57 AM
I like the font and layout from davekatague too, but this doesnt adress the scrolling or multiple items issue.

One thing I hate about (old) chdk was the far to long scrolling menu.

Icons are often geographically challenged.
That is, shapes represent different things depending upon where people come from. The current icons are clear but not as modern looking as Canon's. But i find Novosibirets icons to be to delicate (thin) to easily recognise on a camera screen. But top marks for coolness  ;)

I really like the gradient at the top of the Canon menu, ML gradients seem not as strong (contrasty?). While ML should have a distinct look, I guess it should still seem like it runs on Canon gear. Apple has certain design standards that you must adhere to so that all software looks like Apple software, perhaps there are some design ques that could be incorporated just for environment and familiarity sake?

Great work BTW, this is very important work.
Title: Re: Design proposals for future ML interface
Post by: Novosibirets on August 06, 2012, 04:47:27 PM
I continue to experiment. Something has updated, something painted.

(http://cs5153.vk.me/u16007354/doc/5a5b2492c297/magic_lantern_design1_logo1.jpg)

(http://cs5153.vk.me/u16007354/doc/304dce819a00/magic_lantern_design1_icons1.jpg)

(http://cs5153.vk.me/u16007354/doc/17f0cd8ff848/magic_lantern_design1_icons1d.jpg)

(http://cs5153.vk.me/u16007354/doc/7be1bc6e5bef/magic_lantern_design1_menu1.jpg)

(http://cs5153.vk.me/u16007354/doc/db6bd14ad768/magic_lantern_design1_display1.jpg)

I used the font family of Segoe UI. If the font you like, I'm willing to sponsor the purchase of its license.
Title: Re: Design proposals for future ML interface
Post by: Kromofone on August 06, 2012, 05:14:24 PM
Oh my god, I love your design and your design skills, Novosibirets! I'm definitely up for this design! So simple yet so effective, perfect! :D Maybe in the future, custom ML themes will be implemented in Magic lantern and we could use this design! :)
Title: Re: Design proposals for future ML interface
Post by: davekatague on August 06, 2012, 05:45:02 PM
Thanks for your feedback guys, I'll post up another draft which'll further work on the scrolling problem.

I have full permission from the typographic design of the typeface "Orbitron" as i already asked for permission for its use :)
Title: Re: Design proposals for future ML interface
Post by: Malcolm Debono on August 06, 2012, 06:01:16 PM
Both designs look amazing! Great work guys!

What I really like in Novosibirets's design is that it's very minimalistic and has just the right level of details. I don't know why, but this interface kind of makes the whole thing look more professional. I would prefer to have the values after the function though (easier to find the right item you're looking for). The spacing between menu items makes it quite easy to read, and would be great when coupled with item hiding (using menu key as in current version). Would also be great to have the details outside the 2.35:1 area since the black part is unused, to have more of the picture visible.
Title: Re: Design proposals for future ML interface
Post by: Kromofone on August 06, 2012, 06:17:45 PM
My thoughts exactly, Malcolm!
Title: Re: Design proposals for future ML interface
Post by: 3pointedit on August 07, 2012, 12:44:28 AM
Novosibirets, how would you account for the extra menu items? Some pages are very full. Would your elegant design accommodate them or would they be paged/scrolled? Could you do a mock up of the worst offending screen?
Title: Re: Design proposals for future ML interface
Post by: Novosibirets on August 07, 2012, 07:19:36 PM
Once again I apologize for my terrible English. Unfortunately some of your suggestions, I understand the difficulties.


Quote from: KromofoneMaybe in the future, custom ML themes will be implemented in Magic lantern and we could use this design!
I used to think that the MLS should be one style, but recognizable. But because each of us there is his notion of convenience, the ability to change the style would be relevant!


Quote from: Malcolm DebonoI would prefer to have the values after the function though




Quote from: Malcolm DebonoWould also be great to have the details outside the 2.35:1 area since the black part is unused, to have more of the picture visible.




Quote from: Malcolm Debonoand would be great when coupled with item hiding (using menu key as in current version)
I'm afraid I do not understand this sentence, sorry. It would be great to by pressing the MENU button is something hidden?


Quote from: 3pointeditNovosibirets, how would you account for the extra menu items? Some pages are very full. Would your elegant design accommodate them or would they be paged/scrolled?
If the current size of icons and font, there is a place to put a few sections. But the task to unify sections. Each section can contain an unlimited number of functions. The transition between the sections is the same way as in the current version. But I have another idea.


Quote from: 3pointeditCould you do a mock up of the worst offending screen?
Sorry, bad understood your last sentence. Make a concept of what?


Thank you all, I hope some of my concepts inspire you.
Title: Re: Design proposals for future ML interface
Post by: Malcolm Debono on August 07, 2012, 08:27:00 PM
That looks great!

One of the new features available in ML 2.3 is hiding menu items, which is very useful for hiding unused or set & forget menu items. This would make the menu look cleaner since only the relevant items are shown, which the user selects.

I think what 3pointedit meant is to show how the menu with the most items would look like, however I think that doesn't make sense since there's already a scroll bar (so extra menu items are beneath).
Title: Re: Design proposals for future ML interface
Post by: Kromofone on August 07, 2012, 10:09:04 PM
I went on and experimented a bit, so I hope you could find this useful! I took some pictures of his design on a PC screen (Sorry for the false white balance and the bad pixel density, don't have much of good PC atm), and you could upload them to your camera to see the design! The pictures weren't changed in any way, just uploaded to the internet as normal files, so they should work on the Canon DSLR cameras, but if they don't, I've made this reply useless and I'm sorry in that case, so please someone test it out!

Pictures:
- Clean/Sharp pictures showing the pixel density:
       http://www.sendspace.com/file/2q2o4j
       http://www.sendspace.com/file/ysggxg
- Blurry pictures, so that you can see the interface on the camera easier:
       http://www.sendspace.com/file/pi38j6
       http://www.sendspace.com/file/7308ap

Again, sorry but just trying to help, if anyone has any other suggestions on how to add custom (non Canon DSLR captuerd) pictures on Canon DSLR's, message me privately!
Title: Re: Design proposals for future ML interface
Post by: scrax on August 07, 2012, 10:34:40 PM
@Kromofone: you can make cropmarks, because you need to use the same palette

@Novosibirets: Do you have time to make a vertical preview of this, please?
http://cs6237.userapi.com/u16007354/docs/df67f99b3a1e/magic_lantern_design1_menu1_2.jpg (http://cs6237.userapi.com/u16007354/docs/df67f99b3a1e/magic_lantern_design1_menu1_2.jpg)

I think that with this menu layout and an auto rotate menu feat. it could be nice to try (but maybe it's a disaster to use with autorotation)
Title: Re: Design proposals for future ML interface
Post by: Kromofone on August 07, 2012, 10:45:22 PM
@skrax: hmm I will try to convert them, but how could I view the full picture/cropmark (any cropmark preview feature, I could have missed?)?
I was once able to view different pictures on the camera, when I accidently threw them onto the card.

Never mind, found a solution. Just tell me how many colors can cropmarks have.
Title: Re: Design proposals for future ML interface
Post by: scrax on August 07, 2012, 11:16:56 PM
Quote from: Kromofone on August 07, 2012, 10:45:22 PM
@skrax: hmm I will try to convert them, but how could I view the full picture/cropmark (any cropmark preview feature, I could have missed?)?
I was once able to view different pictures on the camera, when I accidently threw them onto the card.

Never mind, found a solution. Just tell me how many colors can cropmarks have.
open a cropmarks with photoshop or your editor it will have the right palette already, edit that and then save it as described here (http://magiclantern.wikia.com/wiki/Cropmarks). If on windows there is another post here in the forum for how to do the same.
Title: Re: Design proposals for future ML interface
Post by: Kromofone on August 08, 2012, 12:45:27 AM
@skrax: Alright thanks, will look into it!

As for Novosibirets's design, when possible and when ML could be ported to 650D, this design could be used for the touchscreen version of Magic Lantern, since it's easier to read, simpler, and ''easier to press via finger'', if I may say it like that!
Title: Re: Design proposals for future ML interface
Post by: Novosibirets on August 08, 2012, 12:50:33 PM
Quote from: scrax
Do you have time to make a vertical preview of this, please?
I think that with this menu layout and an auto rotate menu feat. it could be nice to try (but maybe it's a disaster to use with autorotation)
Auto rotate menu? Maybe I do not understand it, but ... so?

   


Quote from: Kromofonetouchscreen version of Magic Lantern
Indeed, this design is best suited primarily to the touch screen! But in this case, it is necessary to increase the design elements yet.
Title: Re: Design proposals for future ML interface
Post by: scrax on August 08, 2012, 01:14:43 PM
like on smartphones when you turn the screen the text turn so to stay horizontal.
So the icon will need just to turn 90° but stay on the long edge (so to keep them all visible), that way more options can be show.

Name of menu can stay on top in vertical layout?
Title: Re: Design proposals for future ML interface
Post by: Novosibirets on August 08, 2012, 01:57:08 PM
Quote from: scrax on August 08, 2012, 01:14:43 PM
like on smartphones when you turn the screen the text turn so to stay horizontal.
So the icon will need just to turn 90° but stay on the long edge (so to keep them all visible), that way more options can be show.

Name of menu can stay on top in vertical layout?
? :)

(http://cs6237.vk.me/u16007354/doc/f4045d5d02e7/magic_lantern_design1_menu1_2V2S.jpg)    (http://cs6237.vk.me/u16007354/doc/d5cd47106675/magic_lantern_design1_menu1_2V3S.jpg)    (http://cs6237.vk.me/u16007354/doc/cfd5cebf9973/magic_lantern_design1_menu1_2V4S.jpg)
Title: Re: Design proposals for future ML interface
Post by: Kromofone on August 08, 2012, 02:48:05 PM
@skrax: Are you planning on modifying Magic lantern to this style for your own (personal) use?
Title: Re: Design proposals for future ML interface
Post by: iamtehlolrus on August 09, 2012, 12:51:34 AM
(http://i.imgur.com/ebAsq.png)

Whipped something up in Photoshop.  It's inspired by Arthur's design, but it's a bit darker and more minimalistic.  I'm working on other menus and the LiveView UI at the moment.
Title: Re: Design proposals for future ML interface
Post by: KarateBrot on August 09, 2012, 05:31:38 PM
That's cool! I really like your design iamtehlolrus. The only thing that bugs me is that the green line is only at the bottom. Sometimes asymmetrical things just drive me crazy :D
Title: Re: Design proposals for future ML interface
Post by: Malcolm Debono on August 09, 2012, 05:39:27 PM
We really need a way to choose different UIs with all these amazing designs  :D
Title: Re: Design proposals for future ML interface
Post by: hd1roam on August 09, 2012, 06:13:48 PM
Is there any way to implement font size choice for these menus and LV display?

I realize it will change what can be seen on a single screen (next page prompt or scrolling ok with me), but as we humans age the harder it gets to see the ML tiny font display on an already dim LV display. I've increased the brightness for daylight viewing, it helps little.

Thanks!
Title: Re: Design proposals for future ML interface
Post by: Kromofone on August 09, 2012, 07:08:14 PM
Quote from: Malcolm Debono on August 09, 2012, 05:39:27 PM
We really need a way to choose different UIs with all these amazing designs  :D

Maybe the ML developers (yourself included of course) could figure out a way to ''install'' different themes for magic lantern.
Maybe a unified program that would ''link all the commands to the appropriate theme position/location of a command (some kind of a string-connection way if you know what I'm trying to say''.
Title: Re: Design proposals for future ML interface
Post by: Novosibirets on August 09, 2012, 07:14:37 PM
horizontal and vertical mode (auto rotate)

(http://twovk.com/f/magic_lantern_design_5_1_h.jpg)

(http://twovk.com/f/magic_lantern_design_5_1_v.jpg)



pressing button hides all unnecessary, and remains only the user menu

(http://twovk.com/f/magic_lantern_design_5_2_h.jpg)

(http://twovk.com/f/magic_lantern_design_5_2_v.jpg)



touch

(http://twovk.com/f/magic_lantern_design_5_c2.jpg)

(http://twovk.com/f/magic_lantern_design_5_c1.jpg)
Title: Re: Design proposals for future ML interface
Post by: hd1roam on August 09, 2012, 07:53:33 PM
Quote from: hd1roam on August 09, 2012, 06:13:48 PM
Is there any way to implement font size choice for these menus and LV display?

I realize it will change what can be seen on a single screen (next page prompt or scrolling ok with me), but as we humans age the harder it gets to see the ML tiny font display on an already dim LV display. I've increased the brightness for daylight viewing, it helps little.

Thanks!

Forgive me, reading backwards in the thread it looks like most of my post could get accommodated.
I still didn't notice where LV might get a font choice. Is this possible?
Title: Re: Design proposals for future ML interface
Post by: SDX on August 28, 2012, 05:25:34 PM
I just want to point out this thread http://www.magiclantern.fm/forum/index.php?topic=1918.0

Its for discussion of a implementation of a theme-system in ML. That includes the design of a theme-file, application for creation of design and implementation on MLs side. Would be nice if some of the designers would check out the current design of the theme-file and point out things that are missing currently.
Title: Re: Design proposals for future ML interface
Post by: unity2k on September 25, 2012, 05:34:06 AM
Is this thread still alive? Or has the idea of a new interface been lost to the abyss?
Title: Re: Design proposals for future ML interface
Post by: Kromofone on September 25, 2012, 07:13:52 AM
Nah, I don't think so. I just think it has been delayed/frozen for now until the team starts working on a new official release and if so, there is still a lot to consider with this topic and a lot of time has to be put to make this possible.
Title: Re: Design proposals for future ML interface
Post by: kainpower on October 30, 2012, 01:08:07 PM
I like the style of Arthur. Is canon style, is better integrated and professional. The font is clear and elegant. 
Title: Re: Design proposals for future ML interface
Post by: rednax on November 03, 2012, 01:38:25 AM
Quote from: kainpower on October 30, 2012, 01:08:07 PM
I like the style of Arthur. Is canon style, is better integrated and professional. The font is clear and elegant.

i think the same thing, great work. i hope the next Ml have this style
Title: Re: Design proposals for future ML interface
Post by: nudibranch on January 26, 2013, 10:08:29 AM
Quote from: rednax on November 03, 2012, 01:38:25 AM
i think the same thing, great work. i hope the next Ml have this style
Yes i do like the Arthur's menu very much also, it's simple well integrated and we know also that we are not on the Canon menu (if you use the same icon we can make a mistake)
In scuba diving we have a very well known acronym => "KISS" witch stand for Keep It Simple Stupid (to be sure to not make a mistake)
The Arthur design is just perfect : Hight contrast, well integrated, nice font (easy to read), and KISS with reference about the "old" menu (like the icons) so nobody will be lost, and new people to ML will understand it immediately
Title: Re: Design proposals for future ML interface
Post by: xNiNELiVES on May 26, 2013, 08:50:12 AM
I'm curious why is there settings to change ISO, Aperture, Shutter Speed, WB, Etc. when it is already available in the Canon Quick Menu. Isn't it redundant? Or am I missing something...
Title: Re: Design proposals for future ML interface
Post by: Audionut on May 26, 2013, 09:23:50 AM
Quote from: xNiNELiVES on May 26, 2013, 08:50:12 AM
I'm curious why is there settings to change ISO, Aperture, Shutter Speed, WB, Etc. when it is already available in the Canon Quick Menu. Isn't it redundant? Or am I missing something...

http://www.magiclantern.fm/documentation
Title: Re: Design proposals for future ML interface
Post by: Malcolm Debono on May 26, 2013, 09:26:32 AM
Quote from: xNiNELiVES on May 26, 2013, 08:50:12 AM
I'm curious why is there settings to change ISO, Aperture, Shutter Speed, WB, Etc. when it is already available in the Canon Quick Menu. Isn't it redundant? Or am I missing something...

Because ML offers more control, for example when it comes to WB you can open the submenu and modify loads of stuff (auto WB, magenta/green balance, etc.) and the ISO menu item also makes intermediate ISO values (such as 160, 320...) possible for bodies that don't have it. Besides, it's handy to have everything grouped together  :)
Title: Re: Design proposals for future ML interface
Post by: xNiNELiVES on May 26, 2013, 07:13:41 PM
Quote from: Malcolm Debono on May 26, 2013, 09:26:32 AM
Because ML offers more control, for example when it comes to WB you can open the submenu and modify loads of stuff (auto WB, magenta/green balance, etc.) and the ISO menu item also makes intermediate ISO values (such as 160, 320...) possible for bodies that don't have it. Besides, it's handy to have everything grouped together  :)

thanks
Title: Re: Design proposals for future ML interface
Post by: Novosibirets on June 02, 2013, 09:04:15 PM
I want to draw attention to a numbered menu structure. This numbering can be useful for creating training videos. Another advantage of such a structure that the lists can be very roomy.

(http://twovk.com/f/magic_lantern_design_6_1.jpg)

(http://twovk.com/f/magic_lantern_design_6_2.jpg)

(http://twovk.com/f/magic_lantern_design_6_3.jpg)

(http://twovk.com/f/magic_lantern_design_6_4.jpg)
Title: Re: Design proposals for future ML interface
Post by: skotopes on June 03, 2013, 11:15:59 AM
It would be nice to have a big card info screen
(http://i.imgur.com/v8yGAcp.jpg)
Title: Re: Design proposals for future ML interface
Post by: darkstarr on June 05, 2013, 12:11:19 AM
Quote from: iamtehlolrus on August 09, 2012, 12:51:34 AM
(http://i.imgur.com/ebAsq.png)

Whipped something up in Photoshop.  It's inspired by Arthur's design, but it's a bit darker and more minimalistic.  I'm working on other menus and the LiveView UI at the moment.

this is very nice! i dig i dig
Title: Re: Design proposals for future ML interface
Post by: slang on June 22, 2013, 01:36:59 PM
Quote from: Novosibirets on June 02, 2013, 09:04:15 PM
I want to draw attention to a numbered menu structure. This numbering can be useful for creating training videos. Another advantage of such a structure that the lists can be very roomy.

(http://twovk.com/f/magic_lantern_design_6_1.jpg)

(http://twovk.com/f/magic_lantern_design_6_2.jpg)

(http://twovk.com/f/magic_lantern_design_6_3.jpg)

(http://twovk.com/f/magic_lantern_design_6_4.jpg)

This one is awesone!! not just redesign of the old stuff but completly new idea and workflow. good job!
Title: Re: Design proposals for future ML interface
Post by: druckgott on July 19, 2013, 08:43:12 PM
there are any news about the designe?
Title: Re: Design proposals for future ML interface
Post by: robschii on July 21, 2013, 10:00:35 PM
this is cool. please make it real
Title: Re: Design proposals for future ML interface
Post by: ed.jenner on August 15, 2013, 01:05:10 AM
I'd just like to add my 2c to the original post and the KISS principle.  Personally I don't care if it looks like the current Canon menu or even a Nikon menu - simple as possible, easy to read and effective.   I know it's tempting to get fancy, by the yellow, while not inspiring, looks easiest to read to me.

'cool' should not IMO be a consideration.

Even with the current menu moving the top icons around would be good (audio next to movie, exposure, shoot and focus next to each other, display and overlay next to each other etc..
Title: Re: Design proposals for future ML interface
Post by: Marsu42 on August 16, 2013, 07:05:19 AM
Quote from: kainpower on October 30, 2012, 01:08:07 PM
I like the style of Arthur. Is canon style, is better integrated and professional. The font is clear and elegant.

+1 ... I've written this before in this thread, but again: Everything that makes ml look more like Canon imho is a good idea to attract new users and blend ml with Canon... I'm not so sure about the 2 row style of 5d3/1dx, but the "simple" old-school style of the 6d.