Interface Design and UX Thread - How our App Looks

[Barbara B]

I offer this skin as a conversation/design starter.

Please feel free to adapt or evolve this design or say, "Rubbish - here's how it should look" (but don't say it too loud OK? ) and then submit your own design. There are many ways to skin Grace's standard form and it will be fun to see how this thread evolves with each new contribution.

The way I see my design working is that you click on the gear teeth (which are actually tabs) and then the center panel changes to display that tabs options.

The user can tell what tab they are on, by the large title at the top, which changes depending on which tab you've selected. The submit or close button could be at the bottom of the circle or a smaller gear could mesh with the larger gear and contain the OK Cancel stuff.

Instead of check boxes I've used On Off toggles.



I've also included the file.
Xart-UX-BBouton.web

[Gare]

Wow. This is what you did a 3 in the morning?

I'm impressed!

Moreover, I like it. It breaks from the mold and actually harkens back a little to the fun that the ArtRage and Anarchy designers used to design into the KPT stuff. I think this design deserves to be passed around and riffed upon.

Part of "Functional" is "Fun", right?

-g

[gracehjs]

Being a very lazy programmer, the first thing I thought was Ï like it", the second was "how on earth would I implement it!".

[Gare]

Whatever we can do to help, Grace, say it.

Because this design is really growing on me, and I'd like to take some time today to polish and mutate it a little.

Think of the general reaction when this think flies! It would be one of your crowned jewels as a programmer!

-g

[StevenWWinters]

I like concept and since XaRT is for a very cool graphics app it would be way cool if the UI for XaRT was likewise visually appealing.

I think the coders can focus on functionality at first while the artists develop presentation concepts. The two can marry up down the road as it's a work-in-progress anyway.

I had an idea of using a gear in the letters a and/or R in XaRT, but since I'm artistically and time challenged I'll leave it to others to consider...

I also like the checkmark in the X of XaRT logo/icon concept.

Fun stuff...

[Gare]

The two can be mutually exclusive in their use and yet be tied together. We have some very talented artists here and I know it can be done (I'm just too lazy to help!).

No, the gear as a graphic for the UX and the checkmark as an icon can be unified, relationship-wise, trust it. Use of color, or geometry, it's do-able.

We can own this, at least as concept goes, and it's top drawer as far as I'm concerned. It can be a re-statement of the skeuomorphic that Apple and other designers are walking away from

Whatever the trend is, you buck it, and thus become either ahead of or behind the current trend!

-g

[gracehjs]

Just to elaborate on the coding part. We will be using C# in the .NET framework. Think of it as a big tool box. So, to create a form I tell C# make me a form and I get what looks like any other windows app. I then go into the toolbox and drag a menu onto the form and fill in a few blanks. I want tabbed forms, I drag a tabbed form from the toolbox onto my page. Now, what Barbara has proposed is very nice, but it isn't in my toolbox. So, I am not sure if it is feasible. As an analogy, how would you implement those tabs as links in Xara Web Designer?

[StevenWWinters]

... So, I am not sure if it is feasible...

It's feasible. It may take some time to develop, but C# and the .net environment, like most programming environments, have many objects including images, buttons with images, etc. Those object can have code triggered by events, just like the standard checkbox, textbox, dropdown list, etc. Point is, there are ways.

However, I agree that it's important to first focus on developing a functioning / working model and then add the "bells and whistles".

Also, being an open source project, there could theoretically be forks that could provide different "skins", should anyone want to take it that far...

[Barbara B]

Hi Grace,

If I were doing this as a web page, I'd either make the gear tabs absolutely placed buttons or I'd make them Image map hot spots. Probably use the image map.

The 10 forms/tab contents could be in an CSS image/contact slider that was controlled by the tabs, or they could be in a z-index stack whose viability was toggled on or off by the button/gear tabs.

Or, I'd hunt around and find a nice script to bring the forms in using javascript or such. This is a demo of a script I found with a quick Google search, and I'd probably not use this one, but it generally shows the idea. http://coboldinosaur.com/pages/round-slide-show.html I wouldn't use an iris though, I'd use fade in or such.

The design is basically 2 layered squares with the roundness coming from alpha channel masking.

[wizard509]

Barbara that is a very good design. I hope Gracehjs can figure out how to implement it.