Software Web app interface - feedback please!

Editing interface for something I'm building, what do you think of at least the general appearance? Any thoughts for improvement? I know the selected title area is a bit barren (to say the least) but the others have a bit more stuff in them.

I'm not a designer by any means, but after screwing around for a while this is what I have and I'm reasonably happy with it - I think the gradients helped tremendously. I definitely want to avoid anything too flashy, but the right side even on tabs with quite a bit more content are still hideously plain. I think from a usability standpoint it's pretty solid (at least by its intended audience) but any feedback would be great.

Photobucket's cropper made it a bit wonky in a couple places, but you get the idea at least. The background on the body tab is the hover state, the cursor just never shows up in screenshots.



Thanks!

 

I've always been a fan of more contemporary designs. But then again my profession is related to contemporary designs. So in that light, your interface feels very 90s to me. I'm not sure what the purpose of your site is for or who would be using it, but there are ways to create cleaner websites. You might want to look into font color/size hierarchy. I'm not sure what you mean by plain, but you might want to look at these following websites. The navigation should be clean and supportive of the content IMO, not the other way around.

Sample 1
Sample 2
Sample 3

I'm also not a fan of gradients, they cheapen the feel for me unless of course its a very subtle gradient where you don't really notice it but you can tell there is a color change.

I don't know if "Body" is a subset of "Title" but the way you have it colored sure does make it look that way. It is a bit confusing from that point of view.

 

From a design stand point akpoly pretty much said it.
I think it is very simple and straight up. Not pretty but not fugly either.

From a usability standpoint I would say it is okay but I believe you could combine design and usability bettter and improve on both by skipping the gradient and use color differentiation instead.

It is very "boxy" but I reckon it's based on your needs and desires with the design. What you'll want to do is use colors and shapes to differentiate the different areas of function and importance.

 

Those, while nice sites, are not at all what I'm looking for in a design. This is for the back-end of a system, not the forward-facing part of things, so any fancy flash or javascript visual effects just make things more complicated, harder to maintain, and use more bandwidth.

As I said in the description, body is showing the hover state for the left-hand tabs, but obviously that doesn't come across as clearly in a screenshot.

I don't particularly love the gradients either, but they looked a lot better than any color combinations I was able to come up with. I've never once managed to get a combination that I was happy with from any of those color-picking tools (Adobe Kuler for example) but if you have any better suggestions I'd love to hear them.

 

I think you missed the point of those samples, I never pointed to those sites for the flash application. It was more of an example of ways to style your navigation. Study the way they used font color/size hierarchy in combination with markers that show active tab vs non-active or hovered tabs.

 

I know it's not really relevant to the original question, but I do have a complaint about the flash elements in the examples provided by akpoly. There is almost nothing on the internet which I hate more than flash-based websites. They destroy my context menu options, remove my ability to use tabbed browsing efficiently, and load and run more slowly than necessary. The only things on the internet which I hate more are YouTube comments and TXT-speak.

 

Also, veering from the OP, I must say flash most certainly is not suitable for every website. BUT, with that said, it depends on your user base and content. The websites I listed are all design oriented, so their client/user base will for the most part, have fairly competent computers/internet connections. In addition to the fact that flash offers a more fluid user experience (sorry its not very good for you), it generally gives the user a better impression because of it. And I only used those examples to show minimalist but yet very designed menu systems.

I don't know what context menu options are (I'm going to assume the menu that pops up from the right mouse click). Also I'm not sure how flash websites remove your ability to tab browse as I will usually have a dozen or so flash sites open at the same time in the same browser with either IE or Firexfox. Perhaps you have issues with websites that open a new window instead. And there are html based sites that do that as well. I can point you to a few if you'd like. While I agree flash sites can load slowly (that is up to the coder to optimize it so load times are minimal), it shouldn't run slow even with 10 year old computers.

 

I quite agree. It's good for games and embedding videos, and nothing else. If you're using it to design a website, then learn how to use HTML, CSS, and JS properly. I may suck at creating my own designs, but I've never thought for a moment that I wouldn't be able to put one in place w/out flash.

I assume that with tabbed browsing you mean that you can't often go around and, for example, open up a dozen different products in new tabs to bounce between them with a flash site. I think that more comes down to how the flash was implemented, but that also drives me insane. There's a time and a place for Flash, but the complete website is NOT it.

Anyways, akpoly, I think those interfaces and navigation systems are good for public-facing sites, but again this is the back-end system for content authoring. Each tab has equal significance to the content author, even if they each will contain different amounts of content. And while I don't particularly like the hover state I've created (I think that of the three gradients I have it's by far the worst-looking; the other two I'd call satisfactory for what I'm doing at least), there's definitely something going on to let people know that it's clickable.

As a non-designer, I'd be happy to look into specific suggestions, but look into "font colors/size hierarchy" really doesn't help me at all as it's simply way too vague. I can implement designs in minutes if I have something to work with (the only reason I got as far as I did was from Twitter's general layout), but I'm completely useless at finding colors that harmonize and all of that artistic stuff.

 

Not sure about the location of the "save" and "publish" buttons or their appearance.
For me (personally), it'd make more sense to have them in the editing area itself.
Other than that, i presume the "title" tab on the left is the selected one.
The guys are right - it looks a bit like anything below "title" is subset of the title tab. i'd probably try to solve this by trying to move the text on the active tab to the right a bit... say 5-10px...
Other than that, i'd probably make the hover effect a bit more subtle... maybe jsut overlay it a bit with a lighter colour...

That all being said, i normally tend to find it pretty hard to work with red and black in general...

 

I'm curious if you would be willing to invest some time in a horizontal navigation layout scheme. It wouldn't be any different than tabbed browsing in Firefox or IE and much easier to navigate. What you are showing is a flowing color scheme from tab to body but it looks odd. If it were a horizontal tab doing the same, it would look more natural.

Font sizes - The active tab may have a larger font, say 12. Whereas the inactive tabs have a smaller font, say 10. Or when you hover, the font changes color. So inactive tabs front color is black, hover it turns white rather than the background of the button changing color. Its a much more optimal way to html.

Here are some css samples for you to borrow color schemes/ideas from. Study them. I mean, I can tell you what to do, or I can show you ways to do things. I prefer the latter, it engages your mind and makes you a better global citizen. This may sound like a no-brainer, but look at their font sizes/colors. Do they change? Are they different when hovering/inactive/active? And note the differences and strategies these designers implemented and then you can think of ways to either use what they did or come up with your own.

Typechart
Kyan
1024
Sarmiento

And I must say, just because its backend doesn't mean it can't be pretty. Nice employee lounges make for happier employees is my stance.

 

Normally I would go with a horizontal nav setup, my reason for going with vertical is that I plan to expand funcionality over time and it's usually easier to accomodate 30px vertical than 125px horizontal. I'll look at the samples shortly, I'm on my iPhone right now and it's hardly ideal for checking out hover states. Thanks for the feedback though, I agree about increasing the active font size and will play around with that.

I certainly want to make an attractive admin area, I just don't want to mess around with sifr or pngs for fancy fonts, for example. I'll definitely be using js for positive feedback in a number of places, among other things.

 

Just wondering - found this theme at ThemeForest. Pretty cheap and follows the same general design as what I'm looking for, though quite a bit more attractive IMO.

Any reason I shouldn't go with that? There's certainly no designer's pride issue - I could do the CSS for that very quickly and I know my place in the design world (looking on from the sidelines). I expect I'll still need to do something nice with the buttons (publish and save in the above, though more will probably show up down the road) but that's relatively easy to deal with.

 

That theme looks a bit better, even though it seems the tabs (on the left) aren't collapsible... that'd be something that could be added later on (jQUery Cheesecake)
looks pretty neat though... very trendy and "web 2.0".

 

Well, yours looks a lot nicer than what I give my users...

 

Oooh, shiny. What's with all the tramps? Did they steal your stylesheet

 

Yeah....

Spoiler

i suck balls at design/css