Calling all UI Designers for new Basic Skin

[krys]

I would just go look at the current menu, and draw what you are talking about and let us see it maybe your thinking of something that we are not. Or maybe your drawing will inspire a whole new direction of thinking.
FWIW, Thom seems to have more experience with this system than just about anyone on here, so if he is against something there is usually a very good reason.

[tschak909]

Keep in mind fellas, this is for the standard shipped skin.

I do not see how a pie menu will be able to scale to the possibilities of handling menui items.. not the least of which, the entire Array code would have to be rewritten to support it.

If someone wants to do it.. fine...

If someone wants to pursue pie menus for a secondary skin... fine...

but i'm not going to ship a skin that will cause people to scratch their heads the first few moments of using it.

Argument over.

-Thom

[digilifellc]

Point taken. Just trying to think up a possible solution that could span over several devices in a single shot. Thanks for the feedback.

[digilifellc]

Back to the original point, are we talking about theming, or something else? The examples that have been shown here all seem to have the same basic framework--left to right menu succession distinguished by different colors for each "function path". Are we designing buttons shapes? Different progression layouts? New icons? Color themes? Button arrangements and groups?

Basically, what do we want this new UI to do differently that it doesn't do (or do well) now?

[tschak909]

Phase 1, basic bitmap replacement. Try to make something more appealing that we can ship quickly.

Phase 2, re-think deficiencies in the layout of the basic skin, along with a new set of bitmaps to create a totally new Basic skin.

Phase 3.... ongoing.


We need to design for all of the variations currently in use:

* Normal Horizontal 3:4 (tablets and the like, aka UI1 in the OSD variety)
* PDA 4:3 (vertically oriented UI1 for portrait oriented PDAs)
* Mobile Phone (skin for mobile phone use)
* V2 Normal Horizontal 16:9 (aka UI2)
* SmallUI for Cisco 7970 - a variation of Normal Horizontal 3:4 for very small displays.

-Thom

[logrus]

Sorry to come a bit out of the blue here, but from what I understand of the UI it's currently using bitmap images which are placed around the screen according to some kind of system. These bitmaps are prescaled to the size of the screen when installed or when a UI rebuild is requested.

Now if I've understood that correctly and also understood other comments correctly then it would seem that there are some issues with this approach as bitmaps can get distorted when f.ex. downscaling.

I appreciate that this is the way it works and that redoing it is not an option, however, would it be possible to make it take SVG images instead as these should rescale better? Scaling of svg images should be faster, give more accurate results and I imagine it would not require an extensive rewriting of the code.

Comments?

[totallymaxed]

@krys: Good catch. That could be a problem if the icons aren't big enough. In the same breath, if they are big enough, successions will only be able to go so deep before the screen boundaries are hit.

@jimmejames: That's exactly what I envision for touchpanels. Something a little different for OSDs.

@tschak909: You don't think this interface is usable? Why isn't it (more than "I don't like it")?

Its a bit like the UI to a car... you know steering wheel, gear shift, pedals etc etc.... in the early days of the Car everyone tried all kinds of different 'UI's'.... but over time the Car's UI became pretty standard. This was important because enabled end to have more choice (ie all cars have pretty much the same 'UI'... so changing 'platform' was easy... from Ford to Chrysler say). Car manufacturers also gained from this standardisation but could still innovate around this norm.

We need to approach LinuxMCE UI's like this too in my opinion... yes lets innovate for sure... but also lets make sure that users can understand and feel 'familiar' with the UI's we develop too.

Happy New Year!

Andrew

[Zaerc]

Using vector graphics instead of bitmaps sounds like a very good idea, but I reckon it won't be implemented anytime soon.  And in all honesty I have no idea what amount of effort that would take, still an interesting idea for the long run.

[tschak909]

simplest solution would literally be using something like librsvg, and rendering out to an ARGB buffer that is passed back to Orbiter.

-Thom

[itspac]

Phase 1, basic bitmap replacement. Try to make something more appealing that we can ship quickly.

Phase 2, re-think deficiencies in the layout of the basic skin, along with a new set of bitmaps to create a totally new Basic skin.

Phase 3.... ongoing.


We need to design for all of the variations currently in use:

* Normal Horizontal 3:4 (tablets and the like, aka UI1 in the OSD variety)
* PDA 4:3 (vertically oriented UI1 for portrait oriented PDAs)
* Mobile Phone (skin for mobile phone use)
* V2 Normal Horizontal 16:9 (aka UI2)
* SmallUI for Cisco 7970 - a variation of Normal Horizontal 3:4 for very small displays.

-Thom

Thom, I can understand your desire for step one, but I feel that unless the bitmap replacements are going to be used in step two, you are losing some effort. I do agree that all variants could should be redone, but I would think you would want to figure out the most used variant and start from there.

I liked the simplified main screen with sub screens for media and security etc. The same buttons could be used for a current ui1 remodel and the new layout.


example.

los93sol's  http://imagebin.ca/view/oQyhAo.html

and

rages'  http://digilander.libero.it/rages2/immagini/provaUI1.png

can be achieved with the same images,

[tschak909]

I'm perfectly willing to have the first step thrown away, because it is merely a learning step for all of us. If we try to make universal graphics for everything to transition between phase 1 and phase 2, I believe we will be bogged down in minutiae.

For me, it is most important that Basic, at any stage, to be something that can be polished and shipped.. and it's far too easy with the approach you suggest, to have something that by phase 2, just looks slapped together.

You would have to do some serious convincing to make me change my mind on this one. Pictures talk loud.. working concepts talk loudest.

-Thom

[itspac]

Im not good with graphics, so here is the start of my concept.

First is the main screen. It provides buttons for the major catagories.

Media - static image uses goto screen to go to newly created media screen which shows all the dynamic buttons under that catagory
Lights - static image uses goto screen to go to newly created lights screen which shows all the dynamic buttons under that catagory
Phone - static image uses goto screen to go to newly created phone screen which shows all the dynamic buttons under that catagory
Climate - static image uses goto screen to go to newly created climate screen which shows all the dynamic buttons under that catagory
Security - static image uses goto screen to go to newly created security screen which shows all the dynamic buttons under that catagory
Adavnce - static image uses goto screen to got to screen with options that are not considered major catagory above, computing, power, adavnced options, etc

now playing moved to larger area, when you click, touch the now playing it takes you to remote for what is playing, or nowhere if no media playing.
room and user button possibly sleep button and clock also. Larger buttons make it easier to use for smaller stouch screen devices, imaginges intstead of the lettering i have will make the screen look better and smoother. adding the extra screen adds more clicks yes, but gives you the option to get more on the menu screens for the catagory as below.

http://www.dremagic.com/LMCE/conceptmain.png

example media menu.

has as many dynamic buttons as decided needed and more to go to similar screen with additional options as needed. dynamic buttons take you to media grid.
nowplaying functions same as main menu above.
room, user, sleep and clock as designated.

http://www.dremagic.com/LMCE/conceptmediamenu.png


Thats a start to what is on my mind. using the correct sizing in HADesigner the same button images can be used, in a simple image replacement and not clutter you up on details of the button or look slapped together. Main buttons that use symbols and images (like the ones i pointed out) will make the main menu feel more consistant and easy to use.

planning and organizing prevents the ui from looking slapped together, not the images you use.

If that sounds like a start i will make a progession of more screens down the media line like the grid, remote, etc. If not, let me know and ill let it die for this thread.

[los93sol]

It just occurred to me that a huge problem with making a graphically appealing skin is that scenarios generated will not have icons, they will show up as text labels on buttons.  This brings me back to my layout posted on the first page...it's the only feasible way to accomodate and accounts for an unlimited number of scenarios...

[tschak909]

But scenarios should have a space for icons _because_ the web admin has a place to upload an icon for any user generated scenario.

-Thom

[itspac]

It just occurred to me that a huge problem with making a graphically appealing skin is that scenarios generated will not have icons, they will show up as text labels on buttons.  This brings me back to my layout posted on the first page...it's the only feasible way to accomodate and accounts for an unlimited number of scenarios...

I upload images for my scenarios via web admin. I like that feature just wish the pics were beiiger on smaller orbiters