Website critique

[martyd777]

I’ve been assigned to code out a view unique one page site that I’m concerned may not be user friendly. I’m wondering how I can carry the project out so that it is most user friendly. It’s not completely finished, but it’s close. The website is a one page scroll. What I’m looking for is constructive feedback on how I can improve user-friendliness. When It’s all said and done, it’ll utilize media queries to cater to different screen sizes. Again, how can I maximize user friendliness? Thoughts?

Here is a link to the site:
http://www.llt-group.com/clients/cambell-campaigns/server/

Thanks in advance.

[The_Mechanic]

Hey @martyd777 overall your design is so good. nice work :-) something i’ve noticed in your design that according to a simple user
1. your website is start from the bottom side. (that is not good i know because of your design it suits from start to bottom but a simple user can’t understand it.)
2. your popup design when it’ll visible the text readability is not good. (you have to reduce the opacity for popup)
3. am notice that when i go to campaign school section popup visible but it will come up on the main section text. (here i would like to say that what if this pop up visible just below the section text)

this little things i’ve noticed and also all the suggestion are from my view. any way thanks and let me know if you have any question

[martyd777]

The_Mechanic,

Thank you for the feedback. I think we share some similar concern. I too am worried about the readability of various content blocks. I’m not sure if you’ve noticed, but when you scroll over the very bottom of the screen, a navigation menu pops up. I want this menu hidden, mostly, but I need to ensure that the user knows to hover over this section. How do you suggest I do that? Anybody?

[JohnMac4]

I like the design, the graphics are interesting. However, I think you’re going to find that you are going to have lots of problems with users interacting with the site. You have a unique idea, but it may not be best suited for this.

I know this is older, but I still like #8 in Jakob Nielsen’s “Top 10 Mistakes in Web Design”.

[Jakob Nielsen’s “Top 10 Mistakes in Web Design”](http://www.nngroup.com/articles/top-10-mistakes-web-design/ “Jakob Nielen’s “Top 10 Mistakes in Web Design””)

You’re sort of breaking the conventional mold people are accustomed to seeing on a web page. To quote, “This means that they form their expectations for your site based on what’s commonly done on most other sites. If you deviate, your site will be harder to use and users will leave.”

Otherwise, graphically, I think you have a nice idea going here.

[jkinney768]

I agree that users will have problems interacting with the site. The design just seems to lack some structure and the people/links seem randomly scattered. I think with a site like this, you need to guide the user more as opposed to have them searching and guessing what things may do.

For the navigation, maybe you can have some sort of static tab that when you hover or click on it, it reveals itself? It took me a solid 30 seconds to even realize there was a navigation and then another few to figure out how to keep it on the screen.

[Baerspective]

brilliant. i personally would add a button with an upward pointing arrow with a label TOP. that way users know what to do. the only thing i would change: transparency of the pop-out . make it a bit less transparent. the text is a bit hard to read when its right on top of Title underneath. also a bit distracting as my eye constantly gets drawn to it. perhaps if you do not want to change transparency, maybe make the background titles more transparent when windows are popped open. oh nearly forgot, i wouldn’t have noticed the pop-up bar on mouse over on bottom had u not mentioned it in your post. that may need some hinting for user
it is real genius…..

[tannercampbell]

Honestly? AWESOME. Well done. Some critiques:

1. The crowd of people look like a bush. I’d do something to define that a bit more.
2. Manually scrolling up the page might be obnoxious to some … maybe some “climb” or theme matching buttons for moving between levels?
3. I love that it also jumps left and right! However, your jumps from left back to center (from politics for example) send to too far to the right.

Other than those things, I’m super impressed, very excellent!

Also, awesome use of my name. :)

[jurotek]

Good idea and has potential but poorly executed. Here’s why.

1. Usability: Enough said about that above.
2. RWD: Anything below 980px browser view-port size, relevant content start to disappear left and right. The reason for that is, that you give your elements width absolute dimensions. Give it relative dimensions and let it re-size itself to browser view port size. Then give it desired width again at your break points.
Don’t give your elements height. Let the content determine the height of the div and give it overflow hidden or auto on containers which hold floated elements to clear the floats instead using height.
3. HTML5: Read up on it, cause you don’t have a good understanding what they are, what they’re used for and how they are used to set up a document outline to represent semantic structure. At the present, the document outline in your html page is not understandable. Good example is the misuse of the section element.

[martyd777]

@Baerspective, thank you for your feedback. I’m definitely going to add arrows for navigational purposes, good idea. Also, I’ve heard twice the content boxes are too transparent, so I’ll definitely turn it up. Thanks.

@tannercampbell, I’ve fixed the bug you’ve mentioned (the sending you too far to the right). Also, I added a bit of jQuery to lock up scrolling. I’m planning on going a step further and hiding the window scrollbar. The idea is to eliminate scrolling completely, as to disallow the user from breaking the site.

@jurotek. I think I’ll take up your advice and remove the set heights on the floated divs. With respect to HTML5, I’ve located the following opinion on uses for sections, “The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.” Most of the sections deployed in my design do, in fact, contain headers. Also, the term ‘generic’ suggests that sections aren’t subject to a particular use, but can be used broadly. I also don’t claim to be an expert on HTML5.

All: As I mentioned above, I plan on hiding the window scroll bar. How do you suggest I do that without using overflow:hidden;?

[jurotek]

overflow-x:hidden; overflow-y:hidden;

[martyd777]

So, I’ve made some significant changes to the site, and I’m wondering if your thoughts have changed. The changes made mostly address user experience, which is what I’m worried about. Take a look:

http://www.llt-group.com/clients/cambell-campaigns/server/

[NghiQuach]

not a big change but something that bugged me enough for me to mention.
I think better off putting the elevator behind the “We Build Victories” sign, and when user clicks up arrow then it can start going up.
Also maybe a darker color for the arrows as I didn’t know it was on initial opening one page that went upwards.
I only saw this effect when i clicked on experts (not all buttons have hover effect). Then i noticed the arrows and used them.

Overall I think its an amazing piece and just trying to help UI part of it with telling you the problems I had.

[martyd777]

@NghiQuach, thanks for the comments. Yes, as it stands, not all nav buttons have the hover effect, that is yet to come. You’ve made mention of the elevator, which, at this point, is where my concern lies. I had thoughts of placing the elevator behind the building, but I’m not sure if the client will go for that.

[JoshWhite]

Oh, and on the crowd, to make it look a little more natural, you might want to do something like this:

http://boundlessdm.com/dev/crowd.jpg

That eliminates the weird “blobby” feeling the crowd gives you now. Then in the dark area have your 4 “What we do statements” reversed white on the dark background then your menu would be below that.

[martyd777]

@joshWhite: Awesome suggestions! I particularly like what you did with the crowd, and the idea behind it. Secondly, I would have to agree with you about the back buttons. I’ve noticed a trend, and it’s that the user is inclined to use the same button to scroll back right as they did left. Thanks for the thoughtful response. Gotta’ love this forum!

[Author]

Posts