UPDATE: pages have changed since original post. See my post below for more information.
------------
OK, I'm making this web site for a summer job, so it actually matters. So I'm asking for your opinions. Its purpose is to market the company's software to healthcare providers.
Please ignore any technical issues that you might encounter; the design is in the works and there are still some issues with scripts/preloading/etc. Right now it only works reliably in IE 6 or Mozilla; IE 5 users may have some trouble. This will all be fixed.
I need your honest opinions on the design itself, and, preferably, specific suggestions as to what can be done to improve it. Keep in mind that the top left will not be text, but will be an image, and all images/content on the page will be changed before launch.
Read the rest of this only after looking at the pages and getting your own initial impression.
The things that look to me like they need the most improvement are (a) the header area (looks too bland, maybe too separate from the rest of the design), (b) the presentation of the menu (too blue? too many lines? not well connected to the rest of the design?), and (c) the general appearance right hand side of the content template page (content2.html). What do you think about those parts? Or anything else that you noticed?
Please give me honest opinions with as many specific suggestions as possible. It's important that I make this design as good as I can. Thanks!
[This message has been edited by Slime (edited 06-04-2003).]
From: 100101010011 <-- right about here Insane since: Mar 2000
posted 05-31-2003 04:05
Alright I like the layout of the pages I think it's really clean.
A couple of things. For some reason the front page seems like it slides to the right. For some reason though it doesn't, it seem like it should scroll horizontally. It might just be placement of the thumbnail image in the right column.
On both pages I'd add something on the bottom and extend the left column all the way down and perhaps connect the left column to the top and/or bottom just to bring it all together a bit.
the leftnav is keen and the only thing I can really get my head around without knowing how much content is going to be displayed. I hate liquid sites that have minimal content so I wonder what it will in fact look like.
I agree that the leftnav area should be extended, at least to the bottom.
The three content panels on the front look like you were experimenting with placements of the content/headline/thumb and they *all* look kinda gimpy in my opinion, most likely a result of the justified text is such a small width, that leaves a lot of big holes in unpredictable places.
One last thing I could pick on is the huge image in the mainimage divif my monitor resolution was small I would feel cheated on the wait for that to download =)
It's really kinda disjointed and all need to be pulled together but you've shown in a very early stage here, that's not fair maaaan. Hard to make suggestions without sounding like the whole page is being done over.
I'd like to see the leftnav div get to the bottom of the browser =D that's a headache.
[EDIT] something I see in your javascript regarding the IE6 CSS rollovers (which are still a little blinkee in my IE6, the +/- graphics on rollover) has me curious, could you point me to some reading on the problem you're talking about? I've been wondering about strange CSS rollover behaviours myself, kinda laggy on certain machines, I just thought it was too much open at once on said machine...
[This message has been edited by JKMabry (edited 05-31-2003).]
"For some reason the front page seems like it slides to the right."
Not sure exactly what you mean, but JK was right that I was experimenting with the 3 columns. Maybe it'll be fixed when I finalize a layout for them.
"On both pages I'd add something on the bottom and extend the left column all the way down and perhaps connect the left column to the top and/or bottom just to bring it all together a bit."
Yes... I'll think about that. More on the left column in a minute.
"The three content panels on the front look like you were experimenting with placements of the content/headline/thumb and they *all* look kinda gimpy in my opinion, most likely a result of the justified text is such a small width, that leaves a lot of big holes in unpredictable places."
Yeah, I'll ditch the justified text, at least in the headers.
"One last thing I could pick on is the huge image in the mainimage divif my monitor resolution was small I would feel cheated on the wait for that to download =)"
It'll probably be smaller in the final version, with the CSS property background-repeat:no-repeat.
"I'd like to see the leftnav div get to the bottom of the browser =D that's a headache."
Yes, it is. The problem with that is that CSS doesn't support height:100% intuitively. In fact, I've spent lots of time on this sort of thing before, and concluded that I can't acheive that simple effect with CSS - at least not the way I have the page structured right now. However, I may be able to *fake* the 100% height with background images, and I may attempt that. Actually, background images may prove useful when I attempt to bring the separate elements together. Honestly, I wasn't planning on bringing them together much more than they currently are, but I'll reconsider and try to come up with a way to do it.
The 100% height thing cannot be done without a table, I just scrapped a 3 column layout that tried this using absolutely positioned divs with 100% heights but 100% apparently means the broswer live space. If you have a lot of content in column 3 so's you get a scrollbar, you scroll and the other 2 divs stop were the *initial* live area was. I was even using background images as you suggested, no workie. It's a bugger. I say that only to inspire you to struggle to find a solution =), eh, and honestly to save you some time cuz I don't think it can be done. I know you're a purist but I wouldn't blame you for using a 3 col table skeleton, it's accessible and cross browser (I kinda felt like the devil in the desert with Jesus sayin that).
Flesh it out man so we can have a better idea of what you're going for. The header graphic at left would be a big start towards getting the jist of it.
OK, I've made some changes. The sidebar now extends 100% vertically (or, at least, looks like it does), and there's a footer. It still only works reliably in IE 6/Mozilla/Opera 7. The image at the top of the index page is a temporary stock photo preview.
I ended up using a very simple table for a skeleton, since it just made many things a lot easier.
Looks a ton better already and you've hardly done a thing, well, visibly speaking. It's really cool when such small adjustments make such big differences. I think that stock photo had a lot to do with it too.
The menu is nice and smoth now too, no flashing +/- buttons no more. Did you tweak or is it happenstance?
The grey bar at the right on the content pages is now the new focus of my discomfort, grrrr box.
i don't like how the p id footer comes into the blue bar on the left, nosiree =[
I'd still like to see those 3 content blocks on the front page have some kind of layout convention between the 3 of them, maybe headline on top, image right under, left aligned, text wrapping around the photo. Just same for all 3, or some kind of order.
a stronger contrast for the links at the top on hover would be good.
A unification in borders on elements I'm thinking might be another good thing to tie stuff together, 1px black and 3px dark blue fight
copyright instead of copywrite is gooder
Looks good for now, can't wait to see this thing "Title Goes Here Only this will be an image" gone =)
Hey, that image in the middle column on the front page looks familar :P
Heh, anyways, I'm loving the way you structured the menu with lists, really slick work. Although, since there are only three main topic areas for the site navigation it might be better to have the first three already expanded. The less clicks the user had to make to reach the content and the less time they have to spend looking through the menu the better.
The visual style of the menu is nice, but I think a different colour for the mouseOver highlight would be good; something with a little contrast. Speaking of contrast, I think the white 1px borders around the menu's are too contrasting. Seeing as the page background is white and the menu's are a very dark blue, having lots of strong contrasting white lines makes it look quite busy. If you tone doen the lines to the point that the different menu items are still obviously sectioned off from one another but only just, it should look a lot more cohesive and a lot cleaner.
The copyright statement at the bottom of the page seems out of place. The copyright text is 1px think grey text but the border on the box is 2px black. Again, evening these up a bit and having less contrast between the box's background colour and the border colour will make things look a lot cleaner. I'm also not a fan of the copyright box overlapping the menu area ? which also makes it look a little out of place.
Why did you use red for the links?
I only ask because I can't see where the red ties in with anything else.
Back to the menu; the little + and - buttons look kinda out of place. The graident / 3d-ish look of the buttons really doesn't suit the menu. A solid filled colour would probably work better.
The text in the content area could use a little more line height. Also, don't be afraid to play around with bigger margins, they look a tad cramped at the moment, but that could change once you add a little extra line height. Maybe even using a base grey text colour instead of the black on white.
Overall I think it's a great job, just a little too contrasting in parts. Have a play with the border colours and background colours. Dropping the contrast on certain elements could really clean things up IMHO. For example, the grey lines seperating the columns of text on the front page; nice, low-contrast, open, clean. Although I'm not a fan of the indented first line thing, but that's probably just me.
Err... My apologies if the review is kinda scattered. I'm running on 32 hours no sleep at the moment. =)
OK, new version up. I made a lot of small changes that make it look a *lot* better, in my opinion. I'm still not completely satisfied with it, so please continue to give reviews.
"The menu is nice and smoth now too, no flashing +/- buttons no more. Did you tweak or is it happenstance?"
I changed from CSS background images to actual image tags. However, there's still a preloading problem on slow connections, and I can't figure out why.
"The grey bar at the right on the content pages is now the new focus of my discomfort, grrrr box."
I've changed that slightly, but I think it's worse now.
"i don't like how the p id footer comes into the blue bar on the left, nosiree =["
Changed.
"I'd still like to see those 3 content blocks on the front page have some kind of layout convention between the 3 of them, maybe headline on top, image right under, left aligned, text wrapping around the photo. Just same for all 3, or some kind of order."
Done. What do you think?
"a stronger contrast for the links at the top on hover would be good."
Slightly changed.
"A unification in borders on elements I'm thinking might be another good thing to tie stuff together, 1px black and 3px dark blue fight"
Yes, that was one of the main issues which I think I've fixed now.
"copyright instead of copywrite is gooder"
Oops, heh =)
"Looks good for now, can't wait to see this thing 'Title Goes Here Only this will be an image' gone =)"
That'll probably be there for a while, mainly because my company isn't 100% sure what they want to call the site yet! Heh =)
"Hey, that image in the middle column on the front page looks familar :P"
I don't know what you're talking about.
"since there are only three main topic areas for the site navigation it might be better to have the first three already expanded. The less clicks the user had to make to reach the content and the less time they have to spend looking through the menu the better."
The menu has been shortened since I removed all company-related info before uploading. The real thing has seven top-level menu items, and that might be changed later on.
"The visual style of the menu is nice, but I think a different colour for the mouseOver highlight would be good; something with a little contrast. Speaking of contrast, I think the white 1px borders around the menu's are too contrasting. ...."
Well, I've changed the colors all around, and I'm not sure if it's better or worse now. Let me know what you think. One problem I'm having is making the onhover colors work with the background/border colors around the list elements.
"The copyright statement at the bottom of the page seems out of place...."
Changed.
"Why did you use red for the links?"
Inspired by a competitor's site. Now that the stock photo has changed (it will be randomly rotated in the final version, probably), the links match something. Note that it's only the "more" links which are red, other links will be blue. Do you think that's a bad idea?
"Back to the menu; the little + and - buttons look kinda out of place. The graident / 3d-ish look of the buttons really doesn't suit the menu. A solid filled colour would probably work better."
Good idea, changed.
"The text in the content area could use a little more line height. Also, don't be afraid to play around with bigger margins, they look a tad cramped at the moment, but that could change once you add a little extra line height. Maybe even using a base grey text colour instead of the black on white."
I'll play around with these ideas.
"Err... My apologies if the review is kinda scattered. I'm running on 32 hours no sleep at the moment. =)"
I looked at this earlier this morning from home and it was looking much better
However, I'm at uni now look at it through various different browsers on Mac OS X and well... it ain't fairing too well. The only browser that nails it 100% is Mozilla, the rest fail in varing degrees from slightly askew to downright dismal.
I can't upload image to my server from this machine but I'll email you a bunch of screen captures of the site in various browsers so check your email. Subject: Hospital Analtics - Mac Browsers. Just give me about 20 - 30 minuites to get all the screen caps togther, I'm still a little slow moving around a mac.
I won't include screenshots for Mozilla because it looks just dandy in that browser but I did test it in:
IE 5.1
Opera 6.0 <- They won't let me install 7.0, sorry =(
Safari version 1.0 beta (v60) <- Whatever that means. Just copied it from the about info box. =)
Although the DHTML menu works just fine in all of the above save Opera 6, who has a major heart attack trying to render those pages.
Anyways, appart from the Mac issues, it's looking mighty fine indeed.
oh yeah, bless you, cohesion, no more floating boxes =D
Looks great man, really, came a long way.
The browser issues, on a PC here it does well in everything, sorta. IE and Opera 7 are near perfect. Opera 7 I can't see a flaw, IE6 is off by one pixel in lining up tyhe vertical blue line at right. In Mozilla 1 and Netscape 7 it fares almost as well but your "we don't have a catch phrase" catch phrase is sliding under the nav and search thing to varying degrees.
FRONT
The only thing bothering me anymore aside from the browser issues is the borders. I like the right side of the screen but the left and bottom variations, dkblue/lightblue/dkblue on the menu, and thicker blue/grey/grey across the bottom are still seeming out of place.
CONTENT
The long horizontal image on the content page is also a bit of a bugger and the form input buttons gotta change color!
Arrggg!!! IE 5 is crashing my web mail left right and centre. But I'm in a bit of a rush, have a meeting in 10 min's.... I've burnt the images to CD, I'll mail them to you when I get home.
Thanks for the screenshots, Drac. I've made a few changes and reuploaded:
- The header image is in place. I've redone the header styles, and I hope that should fix it up in some of the mac browsers, including the position of the catch phrase. Let me know what you think of the new header image.
- Lightened text on the index page. (Did I overdo it? Sometimes it's hard to tell with my LCD screen.)
- Turned the three columns into a simple table. This should hopefully fix some of the column-footer overlapping that was present in many of the mac screenshots.
- The image along the top of the content page has changed. It should look a little bit better now. Let me know what your opinions are.
I'm still having problems with the little + and - images preloading. (Specifically, when you click on a menu item, the - image doesn't appear immediately.) I can't figure out why for the life of me; I've never had problems with image preloads before.
I'm also still unsatisfied with the small column on the right of the content on the content page. If you have any suggestions, please let me know.
Drac, I hope I'm not asking too much, but it'd be great if you could see how the page does in those browsers again. I'm not too hopeful about Opera 6 (especially since that's outdated now), but I'd like for it to work in the other browsers.
Oh, sorry Slime. I've been a little busy lately. Althought, now that I'm finished for the semester I won't be heading back out to the campus for at least a week and I don't have a Mac at home.
Maybe you could drop an email to one of the other inmates that have access to a Mac... Jeni/Steve/Cyoung to name a few. Unless you don't mind waiting a little while till I can get back on a Mac again (about a week).
Oh and the site is looking great. The header looks very nice. As for the small column to the right of the content page, maybe defining it with a different backgorund colour instead of a border would help. Appart form that, the only things I can really pick at now are the colours in general. I think some of the shades of blue are a little conflicting (not monocromatic enough), but maybe that's just me.
By the sounds of it, your deadline is drawing near so, best of luck with it (I'm sure the client will love it) and again, I'm sorry I can't provide any Mac feedback at the moment.
I don't have time to critique right now Slime but
Mac OSX Ie 5.2 looks great.
The farthest right column breaks in safari however and the photo and "more..." go over the top of the line to their right for some reason.
posted 05-31-2003 03:42
