Design proposals for future ML interface

[screamer]

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:


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

[pteraser]

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

[Malcolm Debono]

+1 for screamer's latest design. Besides, even the Canon menu follows that system, so it should make sense to new users as well.

[alfatreze]

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

[Alia5]

What about something like this?







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

[screamer]

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:

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?

[ilguercio]

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.

[screamer]

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

[Alia5]

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

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

[alfatreze]

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

[he56ys5ysu7w4]

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!!

[Novosibirets]

You can try it in this style.

[Kromofone]

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!

[alfatreze]

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.joedolson.com/articles/2006/08/on-the-readability-of-inverted-color-schemes/

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

[KarateBrot]

Novosibirets what font did you use for your images?

[Novosibirets]

Novosibirets what font did you use for your images?

PT Sans Narrow

[davekatague]

What would people think of doing it this way?

[ilguercio]

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.

[Michael Zöller]

I really like it, please go on with your design tests and keep us updated.

[Novosibirets]

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

[scrax]

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?

[Novosibirets]

or add a grid on the mic head?

~?

[scrax]

yess

[Kromofone]

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.

[3pointedit]

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.