-
NAVIGATION
The trade-off between page length (scrolling) and in-between pages navigation can be improved. I suggest limiting number of featured stories to 10 per page;
Great treatment of hyperlinks - they are self-evident and in most cases consistent. However the section links in the beginning of each story (e.g. Business in green) have poor affordance. They don't look like links. Their role is not very clear. If you need to mention the section the story belongs to I would find another placement for it, e.g. above the photo thumbnail;
All buttons and links on a page have hover effects except facebook buttons (green retweet and blue f-share);
Links in the navigation are cramped and difficult to read. Icons are not needed there. They are not canonic and they add to the clutter. Instead increase the contrast (darker text) for the links;
Link labeled " More Subscription Options" takes to the page with social media. The label "social media" instead of "more subscription options" would be more descriptive.
PRESENTATION
The story titles are obvious and scannable. The text size and text font of stories are relatively easy to read. However I would prefer a bigger font size (about 1px larger) or Verdana as a font which has higher x-height and for that matter is easier to read;
In overall page is very difficult to scan. Because of the complex and dense content it is of a high importance to religiously follow the grid structure with strong alignment points. I see the grid there but it's not being followed consistently. There is no visual content grouping either.
Focus on the content - stories. The flashing ads are very disruptive for the user experience flow. Best practices recommend placing them in the right column. Keep them all consistently there and together. That includes the top center ad. It breaks the grid (centered, not aligned) and breaks the flow of the page;
Group content into visual groups. One group - top header with navigation, another group - right column, and so on. Use clues such as dividers for columns and background color to define groups. For example: light grey background color for the right column, more saturated colors for the top header and navigation. Contrast is a key here;
-Color-coding for different sections is great tool to help users orient themselves. However, because the lack of the contrast the color coding here barely serves its purpose. It has to be much more stronger to have noticeable effect;
I thought it would be nice to have "top stories" menu more prominent. It seems to be an item that would be used often.
I took liberty to make a rough sketch. Hope it demonstrates what i am talking about.
-
-
Vita Levchenko commented:Great idea Emma! I would prefer to have all adverts in one area- right column, including the horizontal banner, providing it is re-formated. But you are right, there might be the reason why it has to stay on top. In that case it is clean solution to put it right on top, above the rest of the page....anywhere where it would stay out of the way :-)
-
-
Joel Glovier commented:Love that mockup. The header is much more engaging, you removed the top advertisement, and it visually rewards users with a larger screen width. Perfect!
-
Ionut Resetar commented:Fantastic review, the mockup is like 300% better than the live website. It has structure and the elements on the page can be focused individually because of the good white space usage.
Mashable.com Homepage
-
1
move this ad unit after the trending story
serve reader 1st then present ads.
-
2
move up
since the top spot is vacated. move whole sidebar + trending story up.
-
3
swap logo with join mashable
people read from left to right. Brand before anything. put logo then the call to action. it will have a side effect of the Logo talking directly to reader making it more effective. also the nav bar is left aligned. so its a bit jarring.
-
4
move this to the right
-
5
if possible
have the fb like within the article. how can the reader like a summary? the share buttons are social proof enough to drive readers into the article.
-
6
make this into a grid
turn this into a grid of thumbnails. you can fit 16-24 in there. have a div show the story when they hover it. click to go into article.
-
7
color code this
color code this. the site is color varied enough thats its a design fit.
-
8
All social in one place
All social icons (retweet, fb share, digg, comments, fb like) should be in one place
-
9
Two columns to have complete headlines
All headlines are trunked with this 3 column approach. Maybe try a 2 column approach
-
10
Date at front
There's no need for bullet points if dates are at the front of the line. This is especially more useful since s.o. can scan the dates.
-
11
One story large
There are only 3 stories on the whole page with headline and intro text. Maybe have one story for each section enlarged as well
-
12
Facebook Icon
as this is already down in the footer, it seems odd that you would want it up here next the logo, it also seems unbalanced being so square compared with the rest of the icons in the footer
-
13
This nav menu
this would be better incorporated into the main nav, that's my opinion, as to me it feels like it's squashing the site name and logo
-
14
I would move this down under the header
at the moment there's too much going on.
-
15
Love it
don't change it
-
16
can you make it hideable?
-
17
another one?
-
18
and again
-
19
see these are nice and round
not like the one at the top
-
20
due to the size of the pages
wouldn't it be better to be top 10?
-
21
different styles
there seems to be no continuity in the icons
-
22
Nav Menu 100% width background
I will make the Nav Menu background to stretch 100% in width and a much more contrast to the active nav: darker blue
-
23
Nav Menu 100% width background
I will make the Nav Menu background to stretch 100% in width and a much more contrast to the active nav: darker blue
-
24
Nav Menu 100% width background
I will make the Nav Menu background to stretch 100% in width and a much more contrast to the active nav: darker blue
-
25
Logo to the Left
Why don't you move the Logo to the left and the facebook to the right after the search zone, and then the search zone goes from the right to the middle, and make it a little bit larger the text input
-
26
Google ads...dammm I am blind to them :)
To be honest me, I am blind to the google ads, and I am sure most of the people are, but I think is okay since you don't have to many options here :)
-
27
The Sidebar is OKAY
The Sidebar is okay, I just miss the category view also here, maybe make it collapse with an "+" you know...
-
28
Top Stories...to much uppercase
Why do you use that much uppercase? It's really hard to read, it's like a title which goes on and on and never stops, that my first impression! Use only the title uppercase and the description normal... and gray color not the same blue, it's confusing
-
29
Number of social media items
The number of social media items on the page is just insane. It's cluttering the interface with so many choices I don't know where to click anymore.
-
30
Why is this here
Is this related to search?
-
31
The main menu
Is to small and cluttered. The icons help a bit but it's still a text soup. Consider drop down menus, tabs like yahoo, or something else to un-clutter this area.
-
32
Top menu
Some of these buttons could be in the footer or many menu. The most annoying problem with this design is the amount of choices available.
-
33
Social area
This is nicely done.
-
34
Social networking buttons
If this is the main page, why would you need these here? Usually I read the article before I share it or Digg it ... so the place for these would be in the full length article page.
-
35
Top stories
This is bad. Most users will never read this small text, they will skip this area completely.
-
36
News Layout
I would consider another layout for news in which you could fit more top stories in without the user having to reload the page. See Yahoo or other news sites. They don't make you reload the page.
-
37
News Layout
I would consider another layout for news in which you could fit more top stories in without the user having to reload the page. See Yahoo or other news sites. They don't make you reload the page.
-
38
Partners
This is OK. Dimmed logos.
-
39
Footer
The footer looks like a filler with no interesting or worthwhile content.
-
40
page-top menu items
Spread these links out the full width of the 960 pixels, make them a much darker shade, and give the whole bg div a light blue hue. And make the bg repeat the whole screen width (repeat-x).
-
41
Not impressed by "Bing search"
I'm sure Microsoft pays a nice chunk of change for this so my comments really don't matter. But IMO I would rather see an unbranded search field as a user. When I see the branding my mind connects that with a browsers search field, which is often branded, and I think "search the web" not "search this site". So I typically don't use search fields on sites when the field is branded with a search engine that is unrelated to the site.
-
42
Put twitter here also, or instead
This is a good call, I'm sure. But Twitter should probably be here too, or instead. I bet more of the audience uses twitter to engage with Mashable type content than facebook. Facebook seems to be used (at least in my circles) more for personal connection than getting outside content. Or, seeing as how the footer states there are over 400K RSS subscribers, why not make this the RSS feed icon?
-
43
Repeat-x
Why not take up the whole screen width here? Keep the container for the content, but let the background take up the whole screen width.
-
44
Can you say "Fugly"?
-
45
Perfect.
This is very appropriate, and nicely done (both the email signup and the social media links). However, I think the facebook link in the header is confusing and deterring from engaging with this element by separating the social media links.
-
46
Nice choice of colors sitewide
And great use of color against white, with neutral gray tones
-
47
Populating content
Like how on the actual site content populates here as you scroll down the page.
-
48
Actual site has a ton of sidebar stuff.
Is all the sidebar stuff on the actual site necessary? And so much advertising. I know you gotta pay the bills, but man!
-
49
Very useful. Like this piece.
-
50
Like how these partners are listed, but not obnoxious.
Take the hint elsewhere!
-
51
Good but unnoticable.
Consider changing "About Mashable" to a slightly larger font-size and color to blue or darker gray to stand out. This is maybe a little too hidden to me.
-
52
Good. Nice touch on having stats listed.
Really like the sketch - it does work much better moving the main logo to the left and making everything cleaner and more cohesive in structure.
The only thing missing is the big horizontal banner advert which I'm imagining has to stay on. I think putting it right at the top as they do at www.shortlist.com do for their main banner would be the cleanest solution.