Web Roast: Mashable.com - The Social Media Guide

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.

see notes. :)

The whole design is simple, clean and readable! Which is your most important target right? But you can make it more nicer and attractive to the visitors!

1. Expand the Nav Menu 100% background width
2. Re-arrange the logo, facebook, and search zone
3. Loose that uppercase where is not necessary like Top Stories zone

Bottom line is: I find the design way to cluttered and with to scarce information (news) on the first page (only 3 articles visible ?!?).

I would design the page around the user making it easy for him to find stuff, not around page-loads. I know you're making money out of advertising, but this is not the way.

I understand the concept of the "top stories" area but it currently has the exact opposite effect it is intended to. When you present the user with that many links, they will read exactly none. What about making the top stories an animated feed, like twitter's "trending topics". Movement suggests "live". Your wordmark / masthead is well placed.

Some Brainstorming

• Not sure what the deal with bing is (under contract?).

• First google add under menu could be justified with the content

• your top 6 could be made top 10 so that it is brought down the same position as the 3rd news story. Possibly adding visual representation of how popular the news story is. Top stories should almost be above the trending stories. As they say in marketing 101, target areas of interest first. Meaning top stories are already proven to be popular, therefore, you should show them first.

• You may have outgrown the "social media guide" strap, and may want to look at something that doesn't sound so niche. For new users, it sounds like you only cover facebook / twitter etc.

• What about combining the number of retweets / fb shares / diggs in to one unit called "popularity" or something. A story could then receive "badges" based on how fast it trended, how much it has trended, and how long it has trended for.

• I would also look at bringing some game mechanics to user comments, giving points for commenting, retweeting, and sharing.

Try separating different visual zones with color hints, for example pastel colored, thick frames.

I am in favour of fat footers, but this seems a bit too much.

Have you tried making the top stories zone horizontal, right after the pagination?

There is something wrong in the newsletter zone, it seems to have too much focus and commands.

Surely I would rule out the social commands from the story preview, no one shares an article without fully reading it first, wouldn't he?

Have you considered separating sections by color? For example the Entertainment section is yellow, the Business section is red, the Tech section is green, the Apple section is grey, the social media section is Facebook-blue and so on.

You could even substitute the "Top and today" and "All stories" with a single horizontal, scrolling carousel.

The overall design lacks both negative space and visual rest; try bigger imagery, navigate online newspapers for hints.

I have been following Mashable on Twitter for a while but always thought that for such a large website, their website looked at times very amatuer.

Now the footer area, large as it is, works fine the way it is, not much you would look at changing in that area.

Header

• Put your logo on the top left, looks completely out of place in the middle.
• Mashable on facebook?? Any need for that to be the first thing people see on your website? I know its a social networking website as such, but come on, thants ramming it in your face. If people want to follow you on facebook and Twitter etc they will find the subscription part on the right fairly easily.
• The menu I would make a little larger, as for me it kind of blends in with everything rather than standing out as a menu.
• Advert underneath the menu, why not put that top right, and bring your search on to a larger menu bar?

Content

• Let it breathe a little more, add some more spacing on the content, it all just kind of merges into one on the website.
• The share options again are right in your face, I would prfere they were actually kept to the main article rather than being slapped in to the article introductions. Although the faceBook share options is subtle and works well.
• Top 6 today? Not even sure why the number 6? Seems like a random number picked out of thin air, go with 5 or 10 here, possibly 10 just to bring it down closer in-line with the content on the left.

Mashable has great content and I think at times they are too interested in the exposure of the content rather than the actual content itself, that it makes the website seem very crowded and disorganised.

Whilst I can see there is an underlying structure to the page in the usual header, sidebar and main content, each area feels like it's content is 'floating' and not anchored within each section. This has the result of making it harder to make sense of the page at first glance.

Taken individuallly each area (header, content, adverts, navigation, footer ) is incredibly busy in itself and because each area isn't separated clearly from each other by use of lines or panels, they are effectively visually merging together.

Additionally there are so many instances of social icons being used over the page all at different sizes, widths and formats that these are also over complicating the design.

In a beautifully clean design, the use of panels or lines to separate content should be unecessary because the visual structure comes through careful use of typography and clean placing of elements

I have made some design notes on each area but overall in brief:

Header The facebook icon on the left is fighting with the logo. Also the navigation at the top is distracting from the main horizontal navigation. They're not separated enough or of different enough sizes for the hierarchy to be immediately apparent.

POSSIBLE SOLUTION: The addition of more horizontal white space and moving the logo to the left whilst keeping all social icons together on the right should help. Ideally the top line navigation could move to the footer to clean up the header.

Main Content area - I realize this is probably dynamically generated in terms of stories but the widow of 'Failure' really sticks out to me. - The space to the right of the google image is very tight and not consistent with the space to the right of the pictures in the stories below it. - The social icons aren't integrating well on the main story compared to the other stories. They are all differing widths, heights etc so are hard elements to work with. In order to make them feel cohesive it would be nice if you could ditch the dig icon and just have the two facebook/tweet icons the same as the rest of the stories on the page. If you can't drop the dig icon then simply ranging the logos and aligning them to the right will help create a strong right horizontal line running through the page. - The area to the bottom of the news stories I actually think is working well. It feels cohesive and structured and the balance of typography is working well.

Side panel - The top and today is working well although the numbers are huge and fighting with the headlines on the left. Personally I'd make the subhead larger so it's clearer to see at first glance of the page and make the numbers 1-6 slightly smaller. The borders between the images feel a bit messy - I think simple lines running between each story should be sufficient - it looks like lines and borders around the images too which makes it look a bit more messy. - The top box call to action again feels like it could be clearer and more simple. The sign up headline is tiny whilst the social icons take over. I realize this is all about linking to the social networks but it's more important to be clear on what each section is about first before the user is given an option to like it. So THIS IS NEWS big and 'I like this' smaller. SIGN UP FOR MASHABLE big and 'Mashable I like' smaller. - Still on the top sign up box. I'm not sure but am questioning if it is necessary to repeat the twitter icon here? Maybe it is but I'd prefer to see clearer icons in a panel along the top right horizontally above the main navigation so to link to facebook, digg, twitter etc all in one place nice and clear at the top. - Is it possible to put the top and today panel above the big number advert box? As a user of the site, I'd find this more useful higher up the page and I find the numbers are so grabbing of my attention that I almost miss the box beneath it at the moment.

I did delve deeper into the rest of the site and found a lot of areas felt in need of more design attention such as the About Us page - more horizontal space needed between each person and just nice simple horizontal rules would help structure the page a bit more.

I like the change of colour on each section area across things like tech, video, dev& design etc. But why do you have all three icons for digg, twitter and facebook on the tiny iPhone stories when on the rest of the site, it's just twitter and facebook apart from on the main story. Consistency I think would be good for these.

If any of these comments don't make perfect sense or you need clarification on anything then please don't hesitate to ask me.

I hope this helps.

I check Mashable 3-4 times a day as they post updates pretty often. One thing that I hate is that Mashable is awfully slow to load a page. If you scroll down too fast when you first load a page it's very sluggish. I think there's too much javascript going on in there. This website has a lot of content but too much white, there's no clear clean separation between the elements.

• First of all I would add a light grey background behing this right column to separate it from the rest of the site. There's a lot of things going on in this right column and it's overwhelming to me.

• The facebook share and retweet and digg widgets next to each articles are way too big and draw too much attention. Moving them underneath the authors name would be enough I think.

  • I would also alternate the color behind the article's list when you are on the home page, like a very light pastel color. First article with a color, the second without, third with etc... zebra style.

Perhaps characteristically of this "the bleeding edge"genre you get pelted with so much stuff so quickly I want to run away .

Obviously professionally put together and managed I would think it somewhat of a nightmare juggling the colors and shapes of the "power brands" and "words of the day".

That being said I would only ask a thinning out of the onslaught and an appreciation of techy crowd that likes things a little simpler and easier on the head.

I wonder as well at the possibility of blending some of the color toward the main stories where one has control of site elements (as in I appreciate you cant change the colors of the brands you are featuring but you can bend your site palette.) Also for my own taste to much stuff "below the fold" im never going down there ....not ever.

In reviewing the websites of the big players in the online space I believe that a different stance needs to be taken in reviewing the websites of startups, portfolios or any other lesser known websites. I feel that it would be silly for me to start second guessing some of the decisions made with the design of Mashable. Making tweaks and recommendations to such a website would only be possible with the backing of solid data obtained from multivariate testing or other forms of usability testing. Instead, I will take a bit more of a philosophical approach to my review.

It is without question that Mashable is one of the leading authorities, not just in social news but in the online industry as a whole.

So when you are number one in a particular space what responsibilities do you have? What duties does the community expect you to carry out? One thing that is taken as a given is that the number one is expected to be the market shaper, that is, the force that defines how the other guys play the game. So has Mashable been shaping the online industry or simply following the models already defined by the other titans in this space? I personally think that the latter is the case.

Don't get me wrong, I think that Mashable is an amazing website, unrivaled in delivering the latest in social news. However this is exactly my point, it is the actual stories which Mashable delivers which makes it such a world renowned site. Their delivery of the stories and the features on the website is no different to dozens of other well known online blogs. They are clearly following a model which works and for that nobody can criticize them. However, I feel that their position as industry leaders should give them the duty to be more innovative with what they do with their site such that they shape the way the online news industry makes progress.

OK, so I think Mashable has a great design. Honestly. The worst part about it are the ads. But that's what they rely on to be able to offer content, so it's always a huge trade of on commercial blog/news sites design-wise.

But I could say as a point of criticism that Mashable could really demand a certain standard of quality from their advertisements (and I'm sure they do).

Fusion ads are a perfect example of this. I see a Fusion ad on a site and I intentionally check it out because a) it's visually pleasing, and b) it's likely something relevant and interesting to me.

Ads like the Google places ad shown in the screen shot here, however, push my eyes away from them, no matter how relevant they are just because they are ugly. Also, as a matter of philosophy and practice - I HATE seeing ads right at the top of a site. It is just so obnoxious. Not even just as a designer, but as a content consumer.

I think they do minimal design very well. I am personally partial to the shades of blue and gray they use, so I like those tones and the little design elements which are mostly good use of border and bg-color.

One pretty big thing I would change, other than how the ads are displayed, is that the site doesn't make good use of screen width to "reward" users with wider screens. There are no horizontally repeating elements that make the screen more appealing when you have a monitor that is over 21" or so. Which - I would guess - a significant portion of their audience has (screen res upwards of 1440 px and higher).

I think that's actually a mistake from a psychological standpoint. When I go to a site that looks great or even better when the window it maximized, it encourages me to allow that window full use of my screen real estate. However, if I go to a site that has just complete empty space beyond their 960px container, I have no reason to keep my browser maximized and may allow other windows to compete with it on the screen for real estate.

So the rest of my thoughts I'm attaching as notes, just minor critiques and compliments.

Again, overall I think Mashable is a nicely designed site, other than how it handles advertising. Many things to like though as well.

The design is good, however the information load maybe to thin. There could be more expaned news in the "Top stories the last 7 days" section. Especially if someone wants to understand all headlines.

The rest of the feedback is in the notes.

Hi Andrew

It's quite an honor to given the opportunity to add feedback on such an amazing site that gets so many visitors a month.

None the less there are few things that jump out, when I look at this site, I'll use the notes section, as it is easier.

I like this site it's easy to navigate and very informative, however from a design point of view there's a few inconsistencies...

Good Luck!

I would not center that header, I think it would look better on the left.

umm my quick observations:

header part

logo to the left instead of the center. top menu does not make sense in that top center place at all.. and probably take top stories to be a visible link with a catchy banner ( image) , contact us goes above the quick search or even in the footer.

facebook logo relocated to the right content column or social networks area.

the horizontal menu needs a redesign.

color code categories, so you can brand your display and others will follow ;)

Good usability, but a little confusing at first sight

Excellent site, I like everything from the category icons to the post excerpt loops ("all stories). Here are some of my comments:

1. Social Media Block: Would it be worthwhile giving Twitter a little more prominence alongside the facebook stuff?
2. I find the right column starting with the mini stories and going down quite confusing, maybe in part because it's not separated from the main content much (i.e. diff bg, etc.). It'd be nice to get some consolidation there too, but I understand some of the widgets are already branded and delivered "as is", but would still be nice to split from main content.
3. Mashable Partners at the bottom doesn't have enough contrast on my screen, barely legible (esp. concentric).

There's not much else to say, it presents news, delivers in a great structure and is easy to scan (at least the left column).

Good luck with the site!

Cheers

Noel

I always think it is audacious to be really simple in a logo - and I LOVE IT! Generally i do like the design. There feel to me to be too many hues of blue (4 at first glance including the facebook logo). Some notes:

1. There is so much room being taken up to explain how to follow mashable. Make it simple. Put the Facebook, twitter and RSS logo all in a row, don't explain what they are. The F, Twitter bird and rss are famous enought o explain themselves. Get rid of "mashable on facebook join us" I'd also shrink the Email address box a tiny bit, get rid of the title "sign up for mash..." and the button tells me what i get: updates. We all know how and why. Save your space.

I like the menu a lot. Ithink you took a lot of stuff and put it one space. I also do like the little icons - makes it a bit more personable than just a bunch of words. That is for now. Great start.