Interface Design and UX Thread - How our App Looks

[Rik]

The programme is going to have some sort of a look.
Whether it has colour and which ones, will probably be up to the programmers. They know best what will work with what they are trying to design.

So. As non-programmers, we are just trying to come up with ideas that might appeal.
As well as having a bit of enjoyment.
Participation is for individuals to decide.

[pauland]

Whether it has colour and which ones, will probably be up to the programmers. They know best what will work with what they are trying to design.

Absolutely the wrong answer, I would say (as a programmer).

The design Aesthetic is not a programmer skill. UX design is a design skill.

Programmers make things work, designers decide how they look.

I say that as a programmer that dabbles in design.

As a programmer I made some User Interfaces that I cringe at today.

[Rik]

That's good then.
I'll continue to come up with colourful ideas until they say stop.

But, as a programmer, your design skills must have improved over the years? No?

[pauland]

But, as a programmer, your design skills must have improved over the years? No?

I would say so, but others might think differently!

The designers work best when they understand what is involved in skinning controls. I have been involved with skinning controls and it's often achieved by supplying bitmaps to replace the default control appearance. I have no experience of the technologies being used in this project.

[angelize]

I have some ideas on modifying the hexagon on/off buttons and I'll have a look at some more colour schemes when I have time. I've been using a program that Gary has mentioned several times on the forums called GenoPal to come up with harmonious colours for my UI designs.

[Cloud]

I realise that I am coming very late to this discussion and that I am rarely here and my posts on this particular part of the forum are even rarer, in fact they may be non existent. Anyway, my two pennies worth is that firstly design by committee almost never works out right, secondly looking with an almost 'outsider's eye the one which really jumps out and is more contemporary is the one by rik. I believe that anything which is used to create art should be as simple as possible and his flat design is not only on trend (which really does not matter that much in this context) but is easy on the eye, and is straight forward. A tool should be simple and I for one am not one for 3d styles for such things, who cares what michelangelo's chisel looked like oe leonardo's brush.

[gracehjs]

From my investigation - the GUI should be designed by a graphic artist and I believe we can separate the code from the GUI enough that we can show several working prototypes. So, keep on discussing.

[EricB]

Reading through the forum and viewing the UI designs, it appears to me that most of the designs (other then the Gear) seem to be based on a "tabbed" UI. While this is not wrong/bad, there are other alternatives that can be used to group the "settings".

I have created 4 UI mock-ups that show other ways that the settings can be grouped.

These mock-ups are not intended to be graphically wonderful (although I tried to make them so that nobody's eyes would bleed), but rather, just to show other ways of grouping, and to throw out a few more possibilities that you guys can run with if you wish.

I purposefully used white and light blue colors (the light blue seemed less harsh to my eyes) and Open Sans font (I think that is what is used on the Logo and what someone suggested as a good font) on all of the mock-ups so that they had a consistent look, but would hopefully keep the focus on the features of UI and/or grouping options, rather than the color/color scheme and icons/graphics.

The images, graphics, icons, and fonts are intended to be place-holders in the mock-up only.

The icons do follow the look and feel of the new "Windows 8" and mobile apps and are available free from Syncfusion in the "Metro Studio 2" icon utility.
(http://www.syncfusion.com/downloads/metrostudio)

The "checkboxes" are just some icons I was using to work with changing the checkbox styles, and I didn't want to take the time to change them back to the default checkboxes, so please ignore the images that I used.

The "sliders" and "scrollbars" are just the standard controls and have not been stylized in any way - I just wanted to give an idea of types of options controls that were available.

I apologize to the person (mindseye, I believe) whose logo I butchered (I realize that it did not scale well), and also for cutting out the "X" and shrinking it to use as the "XaRT" icon in the mock-ups.

Keeping all of the above in mind, the mock-up images are:
1. Horizontal Expander (2 images) - shown Collapsed and with the "General" group expanded.
When a group is Expanded, any other expanded group is collapsed

2. Vertical Expander (2 images) - shown Collapsed and with the "General" group expanded.
When a group is Expanded, any currently expanded group is Collapsed

3. Using icons in a "toolbar" type fashion. When the user clicks on an icon, settings for the group related to the icon (General, Sizes, etc.) are shown.
In the image, the "General" settings are shown.

4. Page Navigation style that uses a "Previous" and "Next" type of navigation to move between groups.
In the image, the "General" settings are shown.
On this one I also added a "Quick Edit" with the icons at the bottom so that a person could easily get to the settings they want to change.


I am graphically challenged, so maybe from a graphics point of view this is not correct, but my thought is that the first item to nail down is the type of UI that is desired (tabbed, expander, icons, previous/next, etc.).
Then while the primary UI is being worked on, the focus can move on to control styles (checkboxes, sliders, scrollbars, etc.), then icons and images, and then finally decide on the colors/color schemes.
I realize that the colors of the logo, icons and other graphics are closely related, but I believe that if we start on the primary UI design first, I can get started on it, and the other items can be worked on while the primary UI is being built and that these items can be incorporated when they are decided upon.
If there is some reason you believe this order of operations will not work, please let me know.

Eric

[EricB]

Barbara,
If the UI is designed with localization enabled, is there someone who can provide the translations for the settings and their descriptions?

Eric

[EricB]

Paul,
There are definite drawbacks to using bitmap images as controls, the biggest being that when the application is resized, the bitmap may become "fuzzy" and hard to read. I am looking into how to do skinning in WPF right now, but since most of what I am seeing in this thread revolves more around color schemes than the look of the controls, I think that allowing the user to change color schemes would be more beneficial.

Eric