24 replies to this topic

[etisa]

Hello there,

I'm the type of person who's between a programmer (because I enjoy it) and a designer (because I have a sense for it).

I've been designing various websites in the past years and while they've been far from the ugly 90's type of sites, they've never been as “polished”, or cool or “wow” as designers' sites out there.

Some people have zero sense for design, I have some that lets me realise when a design is good or bad. But in either cases I don't know why it's good or bad. It's only recently that I realised that the thing I was missing was design theory, the rules of aesthetics. I tried to use some of them (golden number, 2/3, contrast, alignment, complementary colours) in the site below, but I'm not totally satisfied with the result, especially with the menu's appearance, the header and also the “immersion” (I wanted to get rid of the flatness). N.B. the logo is fake just like the text, but is similar to the real one.

In brief: what can I do to give a nice polished look to this site ?

The live site. (best viewed not in IE)

[RisaBB]

Hello Etisa,

I think the design is pretty nice and professional looking. I think it is polished looking. As far as striving to have a site that is cool or evokes a wow, I don't know how important that is. I guess it depends what the site is about. I think the sites of the biggest companies out there - like Home Depot, Amazon, Spiegel, Macys, Barnes and Noble, Target, Bed Bath Beyond, and I can list 50 more, are professional, but I don't think they are especially cool, or wow-like.

I think a nice, clean design is more important.

Re: your design below - you have navigation on the left, right, and top. That seems a bit much to me. There a space in the yellow nav buttons on the top, which interrupts the flow. Line spacing and margins and point size are important to me. I'd increase the left and right margin, increase the line spacing a bit more, and maybe make the point size one smaller. I like all these features at http://outspokenmedia.com/. I think that font is corbel or calibri. The white space is great there.

Risa

[jocelyn]

I think the only thing that looks weird is the buttons around the page... top and right. It's not the buttons, themselves, even if I would have left a little gap between them. It's the center justification, and because all words have different lengths, they look kind of crooked. Try switching to a left justification to see... smaller font, or a different one. Beside that... it's great.

Edited by jocelyn, 09 October 2011 - 10:55 PM.

[fisicx]

If it's just a portal for the game then simple is better. This means you only need the necessary links to access the game, configuration and so on.

I'd also suggest that the portal should mimic the layout/imagery of the game. At the moment it looks pretty boring and the very complicated navigation is offputting.

Get rid of the scroll bars. A page scroll is far easier to use with a game controller. Note the scroll bar on the main content doesn't even work for me.

Once you have the content in place then you can really tell if the layout is going to work. At the moment it's just a placeholder so not easy to tell if it's effective or not.

[etisa]

What I wanted to do with the menu was to separate it into sections corresponding to who are the visitors and what they want. The site is for owners of a particular video game, the left top menu is for those who haven't bought it yet, the top left (≠ left top) is for those who just got the game, the top right menu is for the regular players and the right top menu is for the website's regulars.
Because it's a fan site it has a lot more content than the official site and it can't all fit above the main content, and as the tabs are tabs, they must be attached to the content, that's why I put them on the sides - but I'm thinking of making only top and bottom tabs.
I made them equal width to maintain their aspect ratio (golden number), unequal width seems really weird to me, I don't remember seeing it anywhere except maybe where there's only text and no background or border.

I'd also suggest that the portal should mimic the layout/imagery of the game. At the moment it looks pretty boring

I thought of adding a background image. Other than that I don't see what I could add, actually this was my question…

Get rid of the scroll bars. A page scroll is far easier to use with a game controller. Note the scroll bar on the main content doesn't even work for me.

An attached scroll bar is the only way to access content when the element has a height or a top and bottom (it was a page scroll before).
It doesn't work for you except if you click on the lower part of the bar or use the mouse scroll, correct ? I'm looking for a fix.

[fisicx]

The navigation is how YOU perceive it should be used. This is often very different to how visitors use a site. Why not make it very simple:

Home | Existing Players | New Players | Forum/blog | Help and FAQ | Contact

Each of the links will take the visitor to 'their' page.

I still don't understand why you have to use the scrolling system. Why not just make the whole page scroll down. If the lefthand navigation is a real problem then rework the navigation so scrolling isn't required. This is where the real skill of the designer comes into play: producing a layour that works for all users across all browser/OS configurations.

As to the background - look at the game portal and replicate. This way there will be a seamless transition from website to the game login.

Check the page width as well, on a low resolution screen or when the window isn't full sized most of the content gets chopped.

[etisa]

Why not make it very simple:

Each of the links will take the visitor to 'their' page.

That's a very arbitrary decision. Visitors will probably want to access each section. Plus it adds an unnecessary and unclear extra level to the site's structure.

I still don't understand why you have to use the scrolling system. Why not just make the whole page scroll down.

Because… when elements have a defined height or top and bottom and a content longer than them, the only way to access it is via an attached scroll bar. (if you've got a miracle solution show me a demo).
Look on this very forum, when you write a post there's a sidebar with tons of smilies. The scrolling is horizontal but if it was vertical, it wouldn't make sense to extend the side bar to the whole page just to use the page's scrolling, that's not how the layout or the semantic is designed.
Why don't you like scroll bars on the page ? they're ugly ? I find they fit well in my design.
On my site I need the sidebar to be visible at all time, the only solution is an attached scrollbar.

Check the page width as well, on a low resolution screen or when the window isn't full sized most of the content gets chopped.

I don't think the width is a problem, the most common resolution is 1024x768 (soon 1366x768) and I guess most modern sites use a >800 width if not the common 960 (970 for me).
Among my visitors only 11% are below 970px, I don't think they should dictate the layout.
I could place the sidebar to the right so that they don't have to scroll horizontally, but while it seems more natural I never been fond of it. Plus I believe that a TOC belongs to the left in left to right reading.

The only problem is that I reduced the window's width and discovered that the horizontal bar scrolls but not the page ! :-\

If the Windows ones are Windows phones then they are all phones and tablets.

800x800	Windows
800x600	Windows
800x480	Android
800x390	Android
800x285	Android
800x1360	Android
800x1200	Android
800x1199	Android
768x1024	Windows
768x1024	iPad
768x1024	(not set)
640x480	Windows
533x219	Android
480x800	Windows
480x762	Android
320x480	iPod
320x480	iPhone
320x396	iPod
320x396	iPhone
320x240	Android

[fisicx]

You misunderstand my points.

It's not important what you think or consider to be a good layout. All that matters is meeting the needs of the visitor to the site.

Whilst your clever navigation might alleviate a perceived problem with different levels of visitor, most will expect to see something much simpler.

You thread title indicate that this is a gaming portal. If this is the case then that's all you need to provide. Every extra link in the navigation means access slows as the visitor has to work out which one they need.

I'm not even sure what it is you mean by elements with defined heights. When you read the threads on this forum and visit every single gaming site they all use page scrolling. Try to access and use your solution on an ipad or use game controller or webtv and you will understand why the internal scrolling is pants.

Until you have done some user testing with the user of the game in question you won'y know if your layout is going to be any good. You may find that 90% of the navigation is redundant.

It's not what you like or what I like, it the gamer that matters.

[etisa]

I forgot to mention in my previous post that the game being a computer game, the site will be accessed via computers.
The only other device that I have is a trackpad and I can scroll fine with 2 fingers. I can imagine that game controllers and webtv don't have ways to scroll but that smartphones and tablets do. Do they ?
I don't see what's the difference between page and element scroll bars, you just need to be above the content that is going to scroll.

Once the site is open I will record user actions and try to find out any problem. Until then I can only imagine what the user experience will be like.

Edited by etisa, 10 October 2011 - 01:25 PM.

[AbleReach]

Once the site is open I will record user actions and try to find out any problem. Until then I can only imagine what the user experience will be like.

Not quite. You're already getting an idea of user reaction here, though you are disagreeing with us quite a bit.

If this is a new domain, it can take months or even years to get enough traffic to draw statistically relevant conclusions about user actions. Do you really want to wait before making improvements? Trot it out with "faux" users (us and others!) and soak up all of the information you can get. User testing doesn't have to happen after the site is live. You can do it now. You should do it now.

I think that the points about all those navigation tabs are well taken. I like it as a decorative design element, but I think you're going to lose people who are looking for navigation. users will make snap decisions about if they've found what they want on your page. Seconds, as in five or ten, ten being a lot, then they're out of there. If and only if they already think they know they'll find what they want, a few will hang around hunt, but it won't be a hunt to figure out what you're about.

Users will scroll if they need to, but it will be for their own reasons. If they have to use scroll bars because your site is awkward to use, you will lose them.

[tam]

It's hard to say about the menu, without knowing what the items are. I would be hesitant about having too many menu items rotated as it makes things that much harder to read. A few sites use them for things like a link to twitter but I wouldn't use them for main navigation options. The grouping is a little puzzling - is the one that fell off the left hand side, on it's own or part of the other three on the left.

I agree about the scrolling - I want to use the native scroll bars not inset ones. Also the scroll bars don't work for me if I try to click and drag only using my scroll button/arrow keys. You might look at using CSS to fix the menus in place and just allow the content to scroll as normal.

I don't like the brownish yellow for the tab, it's kinda an icky colour.

The content section formatting looks good though. Black text on white is a good choice for readibility and you've kept the line length readible.

[cre8pc]

Once the site is open I will record user actions and try to find out any problem. Until then I can only imagine what the user experience will be like.

Why wait? If you plan on marketing your new site, you may want to seriously consider making sure it works and meets user expectations before rollout.

What are your site requirements? Are you going to earn revenue from it? If so, it has to be usable. As a UX person, I can tell you it will not pass web site usability or search engine optimization standards.

Human behavior on the web is studied at great depth. We know what people do and all the things that confuse and frustrate them. Multiple navigation schemes are a problem, especially when inside a site. Navigation has to be forward momentum oriented, which your's is, but also offer a sense of place inside the site, a way backwards from any level (no browser back button), and cross linking from hub to hub, or level to level.

Have you tested your site for color contrasts? It will not pass in critical areas such as navigation. In chrome, the main content scollbar is not functioning. Your site has to work in all major browsers and Opera, if your users are in Europe.

A polished look these days comes from using CSS3 and even HTML5. This is how designers are making some amazing new designs without relying on tables and images.

With today's monitors you can go as wide as fixed 970 width but I suggest flex width for content, not fixed. In testing, we don't even test for 800 resolution anymore. We do, however, test for mobile and tablets if the site requirements include their usage. Your content is squished into a small place...would love to see you use more real estate for it.

Another thing...if you want people to stay on site and relax, warmer colors are called for. If your target is mostly male, you can get away with bolder colors but avoid red (both genders dislike it) and browns. What you want is for people to not feel tension while browsing.

[etisa]

quote tag is broken, dunno why.

[quote](AbleReach:) I agree about the scrolling - I want to use the native scroll bars not inset ones. [/quote]
And why is that ? To me it looks purely like a mental barrier. I myself didn't like the idea, but I must admit that they fit just fine.
I use element scrolling because:
I want the men to be visible at all time, this to me is the way navigation should be done (why the hell scroll down and back up to reach the menu), yet nobody seems to do it.
Fixed menu and page scrolling mean that the content is going to scroll behind header and footer. This creates 3 problems: 1) bookmarks (#) are offset and id="" are positioned behind the header 2) content cannot be controlled and content is hidden by the footer 3) you can't have a content top and bottom such as my inner box shadow.

I cannot test before launch because I'm very late on schedule and launch is imminent.
I am very confident on the site's success because 1) it has a single competitor 2) lots of exclusive content 3) a good number of visitors considering it still haven't launched 4) a very god number of subscribers to the newsletter from people who know little about it or the site. 5) this is not the kind of site that you find in google and leave if it doesn't answer you, it's a companion website.

Yes the site will earn me money. I could read all the books I have gathered but I'm already behind schedule. And above all, this project was not planned at all, I was going to work on something completely different.

[quote](cre8pc:)I can tell you it will not pass web site usability [/quote]
What are they ? have a list somewhere ?
[quote="cre8pc"or search engine optimization standards. [/quote]
This I want to know why. I consider that I know SEO rather well and I don't see what I could have forgotten to do or done wrong.

[quote](cre8pc:)Have you tested your site for color contrasts? It will not pass in critical areas such as navigation.[/quote]
The FF extension to analyse contrast is not compatible anymore so no, but I have switched my screen to grayscale and the contrast is strong enough everywhere.


The target audience is 100% male and blue color is like the manufacturer's mark. I chose orange (warm) for interactive element. I think it balances well.


I'm thinking of asking a couple of users to test the site with me. We'll get on Skype and I'll watch their screen and listen to them but won't interact with them until they are done browsing. Is this appropriate ?
I'm also looking for a free online service that let the user annotate my site very easily, possibly without registering.

Edited by etisa, 10 October 2011 - 09:30 PM.

[fisicx]

And why is that ? To me it looks purely like a mental barrier. I myself didn't like the idea, but I must admit that they fit just fine.
I use element scrolling because:
I want the men to be visible at all time, this to me is the way navigation should be done (why the hell scroll down and back up to reach the menu), yet nobody seems to do it.
Fixed menu and page scrolling mean that the content is going to scroll behind header and footer. This creates 3 problems: 1) bookmarks (#) are offset and id="" are positioned behind the header 2) content cannot be controlled and content is hidden by the footer 3) you can't have a content top and bottom such as my inner box shadow.

Everything in your quote relates to how YOU want things to be. It is not how everybody else likes to use a website. The concept of fixed height content disappeared when frames were junked.

The fact that the content is unique and there are no competitors is irrelevant. If people don't like the interface then they will leave no matter how good the game.

Because you are being so defensive I get the feeling you will find any excuse to keep the current layout instead of exploring the different options.

[Dr.Marie]

I was going to give my thoughts on the page, but so far what I've seen is that a bunch of people have taken the time to give great advice and then the OP has disagreed with it.

Hey etisa, the people who are responding to you here are VERY good at knowing what works on the web. You're really blessed to have them give their input!

[etisa]

I don't listen to people blindly.
You need to convince me that my earlier decisions were wrong, without that it's what you think VS what I think.

[fisicx]

Many people have tested many layouts over the years. All sorts of navigation systems have been trialled along with fixed sized elements.

If your idea was usable and accessible them you would see it on a number of websites. The fact that you don't means variants have been market tested and proven to be unworkable. Traditional navigation systems are the most effective because people are used to them. Change established systems and people react badly. Internal scrolling doesn't work because the normal controls don't function: page up/down keys, scrolls wheels and so on become redundant which means people have to move outside their comfort zone and that unnerves them.

The only way to find out if users like the site is to test it. If you launch and it fails then the potential gamers will never return. It would be far better to delay the launch and do some proper testing to make sure everything works.

Submit the site to fivesecondtest.com and get some unbiased responses

Edited by fisicx, 11 October 2011 - 09:02 AM.

[etisa]

The fact that you don't means variants have been market tested and proven to be unworkable.

I don't trust majority, I don't think most sites have it right. Even the biggest sites fail miserably at some things. Seems like the only well web designed sites are those about usability designed by usability experts.
If all computer manufacturers had it right, then all computers would be Macintoshes, don't you think ? :-D

Internal scrolling doesn't work because the normal controls don't function: page up/down keys, scrolls wheels and so on become redundant which means people have to move outside their comfort zone and that unnerves them.

I tried with keys and it works, you just need to select the element, surely I can give it focus automatically so that no extra action is required. You haven't answered me on how smartphones and tablets can't do elements scrolling. By redundant you mean that there will be a scroll bar for the page in addition of one for the element ? well no there won't be one for the page because I control the height and everything is accessible within 600px.

While there might be a disadvantage to fixed layout, you fail to see the advantage: the user gets site and page navigation visible at all time !


5 seconds is simply too short to find out if this is the right site or not. But thx I'm gonna use it now on what I already have.


I have criticized the game developer for not making the game perfect before release and you ask the same from me, but I realise that if I launch too early I'll lose much less customers than if I don't launch :-D cause customers wants things when they want them and later they don't want them anymore.

Edited by etisa, 11 October 2011 - 10:15 AM.

[tam]

I tried with keys and it works, you just need to select the element, surely I can give it focus automatically so that no extra action is required. You haven't answered me on how smartphones and tablets can't do elements scrolling. By redundant you mean that there will be a scroll bar for the page in addition of one for the element ? well no there won't be one for the page because I control the height and everything is accessible within 600px.

Where did you get the 600px from? I'm using a large netbook/small laptop (screen size 11.2") and the bottom of your left menu is cut off by the footer. I have absolutely no way to access the last few menu options.

The content scrollbar doesn't work (FF6.0.2) - so I can't view the end of that either.


You want fact, not opinion?

To conform with Web Content Accessibility Guidelines 1.0, foreground and background color combinations should provide sufficient contrast when viewed by someone with low vision or colour blindness, or when viewed on a black and white screen.

To determine if the contrast is sufficient, they provide the following formula:

((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

Brightness difference should be greater then 125 and the color difference greater then 500.

You background is #001665 and menu link color is: #c37b00. This gives you a brightness of 106 and a colour difference of 397. Which does not mean the guidelines.

Unfortunately, it's not just about what you like. You also have a moral and legal obligation to meet accessibility laws.


I, and I'm sure other here, could give you a wealth of usability studies to back up our opinions but it's not our job to do the research for you. You asked us for opinions, we gave you areas to focus attention on to save you time. If you don't want to or don't have the time for making any changes then I'm not really sure what you expected to achieve by asking us for our opinions.

[etisa]

Where did you get the 600px from? I'm using a large netbook/small laptop (screen size 11.2") and the bottom of your left menu is cut off by the footer. I have absolutely no way to access the last few menu options.

For a 1024x768 screen the space available for the page is ≈1005x585. From memory I thought it was 600, at 600px the footer hides the sidebar by ≈5px, I can fix that.

The content scrollbar doesn't work (FF6.0.2) - so I can't view the end of that either.

You've all said that. From my tests it totally works except if you try to grab it near the right menu. It's fixed locally.


By the way, none of you answered my initial question. Probably this was the wrong place to post.