Jump to content
Sign in to follow this  
HazMatt

Is this layout ugly or not?

Recommended Posts

I just had my purchaser freak out on me after changing his layouts around... frown.gif

I changed the navigation buttons around, but he also hated the color. I'm just wondering what you guys think - I know it's not exactly pretty, but I wouldn't say it's downright ugly.

As you can see from the screenshot, I use different colors for the main databases. It's not designed to be pretty, but functional.

ugly_or_not.gif

Share this post


Link to post
Share on other sites

just showed to a collegue of me. Layout was OK with him - he is colorblind. I'd rather shake hands with your purchaser, sorry. grin.gif

----------------

Don't ask silly questions unless you like silly answers.

Share this post


Link to post
Share on other sites

The layout is good, but the color choice is poor. There is not enough of a visual cue as to what are buttons and what is just design elements.

Could also be the choice of brown and beige, not typcial of computer interfaces and thus it is a bit unsettling.

Share this post


Link to post
Share on other sites

I'm afraid this thing about color is a subjective thing. I personally adhere to the minimalist school, which can best be summed up as "Use the least amount of contrast and color necessary for functionality."

On the other hand, one of our chief skills as a species is the ability to quickly recognize objects by color, shape and placement. This occurs even on a subconscious level. So different colors on buttons is not a bad idea. You will find yourself going to the correct one even before you read the text.

The other factor is the data itself. Too much color and contrast in the rest of the interface gives the feeling that it is confusing, and makes it more difficult to quickly understand the data, which is the primary objective.

The whole art of layout design is to blend these somewhat contradictory concepts into a harmonious whole.

For example, on your layout. If the customer objects to the somewhat garish colors of the buttons, you could achieve much the same end by two methods. You could tone down the differences in color. The one button that stands out is the pink Parts button. It does not match the other colors, which might be seen (or rationalized as) "autumn" colors.

Same thing on the rows; the Edit button should be green (even bright or light green), not pink. I like to associate Edit with the color green for some reason; in any case it should be consistent throughout all the files.

A more minimalist method would be to keep the color, but only for the text, making the buttons themselves all the same color, say a lighter color of beige than the general background. In that case they would probably be non-rounded, embossed, with a brownish line.

Another possible problem is the rounded pink current row and part number. You could go for a lighter shade of the background beige. If you use a rounded rectangle, with a not-rounded one inside it, the margins should appear centered, with enough space so they don't clash.

The buttons at the far left bottom would benefit from a tiny bit of contrast. They don't show enough. Perhaps a slightly darker shade than the general background beige.

The text size of the labels on the tabs at top could stand to be bigger, say 10 instead of 9. And I don't know if you want it this way, but the general convention is to have the active tab be seamless with the background, with no line. It looks fine, but the line is unnecessary and a little odd. You could use a "dummy" line the same color as the background to hide the seam.

Share this post


Link to post
Share on other sites

Too many colors are distracting, not functional. Pick a color, and use shades of it sparingly. Personally, I don't mind the brown, but if the client's not UPS, they might disagree. Can't go wrong with gray/blue, it's corporate.

I'd make the buttons into tabs. Tabs are one of the best UI discoveries ever. They're instantly understandable. Tabs kick ass.

Also, less is more. Get rid of extraneous labels like "Databases" and "Functions." Does your user care about that? A label like "Print," on the other hand, makes sense because there you have a group of items, and using the label means you don't have to use the word on every button in the group. In the same vein, does your user care that it's a "portal" row? Just say "row." Avoid developer jargon.

The general layout is nice. That column of buttons is ugly. Hey, you asked!

Share this post


Link to post
Share on other sites

Agree that Brown/Beige isn't a big success story with Interface design. I personally experienced that.

I really hate the left part of the layout, don't square fields labels (in the portal), align rows and headers limits, use a continuous row -line in the portal for the blank part of it....

Now, what I really like in a User Interface is a Standard Layout for all Layouts. What yours would be in List Mode ?

Just forgot to say...I would never dare clicking in the tiny pink button in the portal row grin.gif

Are we constructive enough wink.gif

Share this post


Link to post
Share on other sites

Try this template to personalize your color theme (taken from layoutmode.com; no more available, unfortunately)

Share this post


Link to post
Share on other sites

Hi Larson,

I guess you aren't going to get any ataboys out of this group.

smile.gif

I just posted a sample file in "Samples" area that you can use to test different color schemes. It is also adaptable, and can be incorporated into your own files with a little work.

Lee

Share this post


Link to post
Share on other sites

Hey all, thanks for the criticism; it was constructive. smile.gif

I know a lot of my colors are ugly, especially the pink one! I also realize that a lot of my colors are pretty contrasty and harsh, but that was established early on. I guess it's something we're used to, but that solution that mse posted looks pretty sweet! (I was wondering if there was something like that out there.)

I guess I'm not going to change too much after all this, especially since my boss likes it the way it is...

Ugo asked how my layouts would look in layout mode; I'll post an ugly pink example for y'all! smile.gif As you can see from the attachment, the database navigation disappears, but the layout navigation (on the top) stays put.

And somebody was wondering if I was left-handed... No, I'm right-handed - were you thinking that because I stacked all the stuff on the left side? I did that because FileMaker layouts are built from the left to the right (easier to manage.)

Again, thanks for all the feedback! If you have any more design tips to give, please let me know - it's probably too much work at this point in the game to make big changes, but I'd still like to learn new techniques.

list_vs_form_view.gif

Share this post


Link to post
Share on other sites

Yup! Actually, I once put a picture of Barbie on one of my layouts as a joke... We all had a good laugh! laugh.gif

Share this post


Link to post
Share on other sites

I agree on the color selections...rainbows???/

there is a BIG difference between "catching an eye" and "poking an eye"

...sorry but your colors do the latter; other than that...layout is nice and easy to navigate-- assuming that the tabbed look is replicated throughout the layouts

ALL the best!

smile.gif

Share this post


Link to post
Share on other sites

Maybe the pink layout could be inventory for PeptoBismol?

You get a gold star for creativity and fashion confidence. I beleive the left-hand comment was referring to your tendancy towards creativity.

Granted, most interfaces are toned down greys and shades of blue... boring... but if you have users that have to stare at the thing all day long, it's easier on thier eyes. I know if I was able to be that creative (brown & pink) I'd probably end up with workmans comp claims since the users eyses woudl eventually pop out!

A lot of my work has been for call-centers and such where users sit for 12 hours straight staring at the screen, I *have* to make my boring. If your users aren't blind by not, what the hell, go for it, you some sorta style!

Share this post


Link to post
Share on other sites

Why are you going back and picking at something that died a natural death in July last year?

Share this post


Link to post
Share on other sites

Bahh... old threads are fine to resurrect I think. As long as it's still relevant. smile.gif

But to answer any lingering questions, no I'm not left-handed, but I have been known to put Christmas lights up on the exterior of my truck and drive it around in December. smile.gif

Not too much has changed with my color scheme; the only thing I can remember regarding my motives for choosing these colors were to NOT do FileMaker Inc examples' color scheme. Somebody suggested keeping contrasting elements way down, but to me, it was tough to even pick out the text on the page, let alone know where to click.

Dunno, it continues to work for us, and nobody complains. smile.gif

Share this post


Link to post
Share on other sites

I agree that it's the colors that are mostly the problem. Pink and brown are probably best avoided. Who was it that invented tabs, anyhow?

--Tripod

Share this post


Link to post
Share on other sites

I used to be a photographer. Often, 'less is more' was the adage used for dramatic effect and pleasing design. Depends, obvously. In this case, there are too many colors, as well as poor combinations of them. Brown and pink, for example.

On a positive note, this ought to be fairly easy to fix.

FileMaker Version: Dev 7

Platform: Mac OS X Panther

Share this post


Link to post
Share on other sites

You might consider reading Apple's Human Interface Guidelines. Even if you don't wish to follow the guidelines per se, you'll still find it beneficial as you create your unique interface. The rules they've laid out are the product of extensive user interface experience and serve as excellent foundational knowledge for any interface development project.

http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/index.html

Share this post


Link to post
Share on other sites

SOK. I was just testing out my new login, avatar, etc... Now that I know you aren't really going to change anything though, I'll sleep OK tonight... ???-)

FileMaker Version: Dev 7

Platform: Mac OS X Panther

Share this post


Link to post
Share on other sites

I have had colorblind people tell me that my color schemes are garrish, wink.gif so I am the last person to comment on anyone else's. Having said that, here is a cool link to a color scheme chart. I'll probably take this chart along the next time I go clothes shopping (2008 or so)

Thanks to JCD1 for providing the link....

http://www.cs.brown.edu/cgi-bin/colorcomb

Share this post


Link to post
Share on other sites

As I have mentioned in previous post. Apple, and MS have spent tones of cash into UI. Why reinvent the wheel? If you have seen Apples osX it is simple: White, Grey, and Blue. That is it, you do not need anymore that is all the eye can handle (lift what you can). The real trick is the organization of your layouts. and set standards, equal space things, no more then two fonts, keep your headings on one line. Try to avoid floating buttons, set a standard maybe a heading bar with the buttons for that section in there. Beside web you have a button 'Visit', you could reduce this to by underlining the word 'website' and make that the button. (people are use to clicking underlined words now.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.