Design proposals for future ML interface

Started by Arthur, July 03, 2012, 01:06:59 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Arthur

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:

Alternative top menu


Also has been proposed that each menu category have its own color, similar to how Canon's firmware is separated in color coded categories:



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.



Some notes to keep in mind while creating the design:


  • * Many users will be working with their cameras outdoors, in bright sunlight. So it is important to have a lot of contrast.
  • * We're currently limited to the colors in Canon's palette (above), so for now gradients and other effects can not be done.
  • * It's a good idea to keep the design resembling the camera's original menus, this way ML feel more like it is part of the camera itself.
  • * Fancy effects, gradients (currently only possible in greyscale) and animations are nice, but sluggish menus are not. A camera is not a phone, it is a work tool used by both amateurs and professionals, so it must be simple and fast.
  • * It is good to keep the design and layout uncluttered.
  • * It is not possible to use antialiasing in text. Also the text must remain crispy, in order to be more readable on small screens.
  • * The text must be relatively big, so it is possible to read it properly, also some cameras, like EOS 1100D and EOS 5D classic have low resolution screens, so small texts are impossible to read.

Feel free to suggest changes, this design is by no means definitive.
We'll be working on top of suggestions to improve this design.
EOS 1100D | EF-S 15-55mm f/3.5-5.6 IS II (Kit lens)

a1ex

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

so grayscale gradients are possible.

Arthur

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.
EOS 1100D | EF-S 15-55mm f/3.5-5.6 IS II (Kit lens)

a1ex

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.

Arthur

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.
EOS 1100D | EF-S 15-55mm f/3.5-5.6 IS II (Kit lens)

a1ex

Calling Canon's ChangeColorPalette is not safe (causes ERR70 if called at the wrong time).

Arthur

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.
EOS 1100D | EF-S 15-55mm f/3.5-5.6 IS II (Kit lens)

a1ex

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).

Arthur

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.
EOS 1100D | EF-S 15-55mm f/3.5-5.6 IS II (Kit lens)

a1ex

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.

Arthur

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.
EOS 1100D | EF-S 15-55mm f/3.5-5.6 IS II (Kit lens)

a1ex

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).

Arthur

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:

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:


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:

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.
EOS 1100D | EF-S 15-55mm f/3.5-5.6 IS II (Kit lens)

nanomad

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"

EOS 1100D | EOS 650 (No, I didn't forget the D) | Ye Olde Canon EF Lenses ('87): 50 f/1.8 - 28 f/2.8 - 70-210 f/4 | EF-S 18-55 f/3.5-5.6 | Metz 36 AF-5

Arthur

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.
EOS 1100D | EF-S 15-55mm f/3.5-5.6 IS II (Kit lens)

a1ex

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.

Arthur

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:
EOS 1100D | EF-S 15-55mm f/3.5-5.6 IS II (Kit lens)

nanomad

We should keep the highlighted top menu entry white. Other than that, good job.

Nope, it looks terrible
EOS 1100D | EOS 650 (No, I didn't forget the D) | Ye Olde Canon EF Lenses ('87): 50 f/1.8 - 28 f/2.8 - 70-210 f/4 | EF-S 18-55 f/3.5-5.6 | Metz 36 AF-5

Arthur

EOS 1100D | EF-S 15-55mm f/3.5-5.6 IS II (Kit lens)

nanomad

Just forget what I've said, really. The previous version is fine
EOS 1100D | EOS 650 (No, I didn't forget the D) | Ye Olde Canon EF Lenses ('87): 50 f/1.8 - 28 f/2.8 - 70-210 f/4 | EF-S 18-55 f/3.5-5.6 | Metz 36 AF-5

Arthur

Would it be possible to do different colors for each cagetory? like in the original?
EOS 1100D | EF-S 15-55mm f/3.5-5.6 IS II (Kit lens)

a1ex

Technically possible, no problems about that.

What colors do you suggest?

Arthur

Using the default palette we've got these 4 to choose from:
EOS 1100D | EF-S 15-55mm f/3.5-5.6 IS II (Kit lens)

a1ex

I like the light blue and green ones. Red could be reserved for debug menu :)

Arthur

How about:

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


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.
EOS 1100D | EF-S 15-55mm f/3.5-5.6 IS II (Kit lens)