Mashable Redesign: What Draws Attention?

Mashable made a fresh start of the new year by launching a redesign. The intention of which was to put more focus on the stories, remove clutter, and to divide the content into sections. Most readers responded positively. But our team wanted to answer a more targeted question: What are the most attention-grabbing changes in Mashable's new design? In this article we analyze user feedback and exhibit our results.

Mashable made a fresh start of the new year by launching a redesign. The intention of this was to put more focus on the stories, remove clutter, and to divide the content into sections (Home, Social MediaMobile, Web Video, Entertainment, Business, Tech, and Jobs). In the past week more than 150 people commented on the blog post about the new design.

Heatmap: What draws your attention?

Click-heat maps show user response to page areas.

Most reactions on Mashable seem to be positive about the new look and feel: “Fresh & clean;” “I like the sections;” “It’s more professional;” and “It’s clean and Simple.” But our team wanted to answer a more targeted question: What are the most attention-grabbing changes of Mashable’s new design? User responses to this question (as it relates to a highly-trafficked blog) can help us understand more universal design principles. We asked 60 social media-savvy participants for their feedback.

Three questions: attention, like, and dislike

We used Twitter to ask readers for their feedback on the new Mashable design. Around 60 participants answered three simple questions: Click on the things that draw your attention the most; Click on the things you like on this page; and Click on the things you don’t like on this page. The first question should provide us (solicited) data about which parts of the new design are the most important attention grabbers. The other two questions provide insight in the attitude of participants: what their opinions are of specific parts of the page. We use the visual feedback on the three questions to highlight some interesting elements of the new design:

  1. Header

    Mashable previously used lists and news channels to organize their content. In the redesign, Mashable introduced eight channels: Home, Social Media, Mobile, Web Video, Entertainment, Business, Tech, and Jobs. Each channel has been divided into multiple subchannels. Users in our test commented that the selected menu items lacked contrast and that the entire header looked cluttered because of the use of just one color. The advertisement of ‘Stream API’ in this particular screenshot could be easily mistaken for a native Mashable element and draws a lot of attention. Probably no big surprise, but 6 out of 10 participants disliked the advertisement in the page header.

    Header: What draws your attention?

    What draws your attention?

    Header: What draws your attention?

    What do you like?

    Header: What draws your attention?

    What do you dislike?

  2. Trending story

    In Mashable’s redesign, a prominent spot on the homepage is now reserved for a featured story. Each channel features a trending story as an attention grabber. Almost 75% of all participants in our test reported that the first post grabbed their attention the most. 50% of all participants clicked the headline of the first post, and 30% reported that the attached imagery grabbed their attention. The Twitter Retweet and Facebook Share buttons helped users as well, as they reported: “[it’s] nice to see if others like a story“.

    Trending Story: What draws your attention?

    What draws your attention?

    Trending Story: What draws your attention?

    What do you like?

    Trending Story: What draws your attention?

    What do you dislike?

  3. Subscription options

    Mashable’s Twitter account has more than 2.2 million followers, their RSS feed about 350k subscribers, and their Facebook Fan page over 100k fans (with +80k of those joining in less than a week!). Converting 2.5 million monthly-unique visitors into as many subscribers as possible could be one of the most important goals for Mashable. The options to follow @mashable, join the Facebook group, and to subscribe to the RSS feed or newsletter attract attention and are liked by participants. More than 50% of all participants reported that the subscription options caught their eyes.

    Subscription options: What draws your attention?

    What draws your attention?

    Subscription options: What draws your attention?

    What do you like?

    Subscription options: What draws your attention?

    What do you dislike?

The social media guide?

Mashable defines itself as the social media guide, and with good reason. I personally think that Mashable did a great job with their redesign. They focused on their content and removed clutter. Restructuring their tremendous amount of content into different categories could help them to grow their network bigger and better target their audience. Finding an older story in the archives is unfortunately still a difficult task. Mashable’s toolbox to build and maintain their community has been succesfully integrated in their new design, grabbing attention and being liked.

But that’s just my opinion; what do you think?

About the Author

Paul Veugen

Paul Veugen is a user experience optimizer, entrepreneur, and digital media addict. He is the founder of Usabilla, an online service to collect feedback on webpages, concepts, sketches, or any other image. He has been working as a user experience designer for 10 years and frequently shares his knowledge on automated remote testing.

Related Articles

20 Comments

  • Dr. Pete Reply

    Interesting stuff, Paul. Nice to see a concrete example of how some of these tools can be put to work. Of course, sometimes what people say they dislike is a bit misleading. We all claim to dislike ads, but then somebody still clicks on them :)

  • Paul Veugen Reply

    Thanks Peter! You’re right about the pitfalls for self reported data. Most of our clients combine behavioral & attitudinal data (if possible).

  • Tanya Ahmed Reply

    Having participated in giving feedback via twitter it was interesting to see the results.

  • Alice Reply

    Great observations! Btw, good pick on the tool. I’ve also used it and got some interesting facts.

  • Pete Cashmore Reply

    Paul,

    Really interesting data – thanks for doing this!

    –Pete

  • Ben Reply

    I use clicktale to show me my visitors journey through my site. There are heatmaps of all sorts, real time videos and all sorts of aggregate behaviour analysis to keep me busy!

  • KayRoseDesign Reply

    I have to say that the re-design is much better than the old design.

    I’m just not sure on the nav so much, it seems a bit out of place to me. Overall the site is less clutered in my opinion :)

  • Konstantin Reply

    Yeah, I like their new layout better. Oh and you forgot to mention that it was done by the guys at nclud.com ;)

    Cheers,
    ~ K.

  • Konstantin Reply

    Wow, did Pete actually reply to this? ^_^ Or is it a fake ;)

  • Paul Veugen Reply

    @All thanks for your comments.

    @Pete Contact me if you would like to take a look at the entire case. I can share all data.

  • Cerno Reply

    Not a fan of the navigation being sandwiched between two banner ads – very busy and distracting. I guess there’s a money model behind that…Other than that it seems to follow a traditional wordpress layout – nothing really mind blowing, very sluggish experience…

  • Paras Chopra Reply

    Hi Paul,

    Were participants randomly chosen from the traffic? How do you go about recruiting participants for such a study?

    Thanks
    Paras Chopra

  • Paul Veugen Reply

    Hi Paras,
    In this case we invited participants on Twitter and asked participants to tweet about the test as well.
    In most cases I would suggest to recruit participants on your website, via Facebook / Twitter, or by mail. But it depends on the goal of your research and your test.

  • vijayakumar Reply

    You are a good observer. I especially liked the subscription options on the sidebar. The way icons highlight is really cool.

  • jasir javaz Reply

    On Mashable’s site, in their post pages (not the home page), there’s a floating widget to the left of the content that descends as you scroll down below the fold, but doesn’t ascend above a certain point.

    I’d love to replicate this, but their site is so clogged with code that I’m having a really hard time parsing apart the (javascript) scripting that’s controlling this.

    Thoughts or any help identifying the moving parts?

    http://csscreator.com/files/screenshot_22.jpg

    • Diana Freedman Reply

      @jasir, I am also trying to figure out how to replicate this. If you’ve figured it out, PLEASE email me at ustandoutblog AT gmail DOT com. Thanks!!

  • Jago Reply

    I am also interested in finding out how to make that vertical menu descend!

  • jasir javaz Reply

    @Diana Freedman
    @Jago
    @Michael Aulia

    Now i am using digg digg plugin. But there is no floating option. I asked to change the digg digg team like mashable. But They also cant change it in to tat form. Anyone who knows please reveal the secrets behind that.

Leave a Comment on This Article