Personal insights and learnings on designing portals and verticals.
This screenshot is an 'unpublished' design of one of the major Belgian newssites.
I tend to write long posts on topics I want to cover thoroughly. But I know some people don't like that, or have the time to read them. So I'd like to start with a small wrap of my most important remarks on designing newssites, portals and verticals.
• minimalism tends to swamp your content when the ads are strong, noisy and colorful.
• design within 950x600, in other words: don't make people scroll horizontally, the dimensions of most used monitors are still at 1024x768
• don't let elements of the main navigation menu disappear under the fold. Yes the fold is still considered at 600px from the top (see previous topic)
• visually guide people to the most important features, don't unisex all buttons for the sake of consistency. They need this guidance.
• where's the interaction? Few portals are equipped with features to make good articles rise to the homepage. Most available features are only included in footers of the full stories, not the short ones. I want to browse and favorite quickly and read full stories later.
• give advertisers value for investments. Don't bury the adspace under the fold or blankly out of the design, it looks shitty and people won't click it. i hate banners too but they raise money to both parties.
• big images are nice but don't let them suck up all the space on your homepage. Give larger versions of the image on secondary pages.
• don't swamp the navigation with subsections! (but of course, that's a remarks for the editors, not the designers)
• to me everything need to be pixelperfect, yes, so don't ever use Helvetica as a screenfont, thanks.
Why this post?
Recently GVA en HBVL renewed their websites. GVA and HBVL are two local newspapers by a publishing house called Concentra. Now, a renowned Belgian blogger, reveals an unpublished screenshot of the redesign of a major Belgian website called 'De Standaard Online'. Though nowadays I'm mostly occupied thinking out e-strategies and broader advertising campaigns, I'm still very intrigued by usability, design and information architecture as to me these should be hand in hand with the ideas of communication concepts.
I fell in love with usability reading "Don't make me think". Grew mature with understanding usability by working on the architecture of a major vertical called Hebbes.be. I structured and designed the portal, under guidance of Jonathan Detavernier, when I worked at Snow by LG&F.
Full throttle and review on all major Belgian newssites.
GVA en HBVL renewed their websites.
I never read either one of these papers but the agency I work for creates direct mailing and interactive promotion campaigns to push new readers into buying these papers, so naturally the redesign caught my attention. The redesign was done by Netlash. Ever since the launch my fingers had been itching to post an article on this topic but due to a lack of time I hadn't so far. During the first week of launch the website had a link labeled "we would like to hear about your feedback on the redesign of this website". Unfortunately the space for posting that feedback was restricted to 300 characters. And for some reason I'm unable to find that link again now, guess they must have buried it.
Although GVA and HBVL are two newspapers targeting a local crowd still they look almost exactly the same, why is that? In my opinion they should take a clear visual distance from each other. Antwerp is not Limburg! Talking to a different audience must result in a different design. I understand the papers want to relate to one another but still the skin should be visually differentiated. The images used for the major article are far to big. Using an image as wide as 515px is literally killing all other content and it brings no extra value to the overall look at all. The font was too tiny but they've solved that, thanks to reader feedback I guess.
Also, the portfolio image of Netlash shows that the original design was intended to split the center column passing the fold. Above the fold the main article would be accompanied with a series of less important but pushed articles on the right. Passing the fold, or below the fold, the articles would spread and use the entire width of the center column without using a decent divider to split from that fold, resulting in an unclear usage of the images in the articles below the fold. Because of this the images of the articles below the fold could be mistaken as from other articles. Luckily this has been altered in the currently used design.
I also tend to as myself why the skyscraper is out of sight when I'm browsing my 1024x768 monitor. Why they've introduced a huge IMU (466x466) further down, splitting the content like a hellraiser. And why there is no focus on the local news as this is their proposition. Or have they changed being a newspaper by the people, for the people and with the people?
'De Standaard Online' alpha.
Yesterday Michel Vuijlsteke posted a screenshot of an unpublished design of 'De Standaard Online'. 'De Standaard' is a major Belgian newspaper, Michel Vuijlsteke a consultant (information architect) at Namahn. I recall being contacted by Patrick, for participating on this redesign, somewhere between August and September of 2007. Patrick had great plans on redesigning and restructuring the newspapers their company, Corelio, was publishing. Since Corelio has launched 24.be. 24.be supposed to be an aggregator of newscontent based on NetVibes. I heard recently that the plug was pulled, and thus 24.be no longer gets pushed. It never ever really got off. Now, about 18 months after I first heard of the planned redesign of 'De Standaard Online' a first design is on a loose. I kinda doubt the strength of this so called alpha version considering the time invested researching and designing this vertical. But hey, these things can take a long time to get up off their feet within an organization the size of Corelio. It just crossed my mind that this post could as well be a deliberate leak just to get some feedback from the designer-groundswell.
Michel Vuijlsteke argues that this design proposal looks like a "NYTimes Light". I feel him in this statement but still I'd like to give the designer of this so called "alpha" some credit. Though I miss the skyscraper and the leaderboard being pasted in, I like the way the navigation is build up from the top down. Not using a vertical column but few horizontal rows that guide your through, nifty. This is not quite the case over at NYTimes, which uses that vertical column to stash some topics that might just be very important to me. Of course all credit should be going to the NYTimes, who have no doubt heavily influenced lots of media-companies on what approach to choose for marketing their papers well. Next to that it must be admitted that NYTimes keeps trying to innovate in many ways.
Why do I miss the 3-ad (= combination of a skyscraper, leaderboard and imu on one page) here? Not because I'm in advertising or because I love banners, no, not at all. I just know they might prove to be very important as they can generate a good income for the publishers, plus they add up to the value of bringing the information online instead of jealously keeping it away from the internet. The advantage NYTimes has is of course the fact that the banner-ads on their home-page are valued higher which results in a smaller size banner that still pays off. In Belgium we have to plaster the place with 3-ads to pull of some conversion. Yes, we all agree that it looks horrible but until further notice we're in for large size banner-ads.
Anyway the alpha definitely overrules the old one. The old one is too orange to me. Displays a horrible vertical navigation that is way to bulky And it doesn't give me enough articles to scan at the same time. I hate scrolling remember.
In my opinion every journalist should have it's own blog under the flagship of it's publisher. this way they can push their articles individually and create specific value for readers and advertisers, that is if you are especially interested in a certain style of writing or a kind of niche news — specific topics.
So @mvuijlst, @bartvanbelle, @talkingheads and @Pietel ... What's your opinion on De Standaard Online Alpha design?
- I would like to see some guidance by color.
- The 'most read', 'most recommended' and 'most recent' is a plus no doubt. certainly the significant space it gets on a 'topshelf'.
- I'd use more smaller inserts of some articles to enrich the provided content above the fold. For example I'd skip the U2 picture and put two article links there.
- I'd add sharing and bookmarking options on the articles of the homepage.
- I'd make it more visually clear that the 2 vertical navigation bars under the logo relate to one another.
- I'd push my search up to the top of the page creating extra space where the search is now.
- I'd use clear dividers separating the articles from one another.
- I'd label the pushed articles clearly so I know in what section they belong if I scan the homepage briefly.
- I'd try to experiment with mashup-widgets to get live-feeds, tweets or streams from my editors and journalists to the homepage, or a subsection.
- Would be nice if the 3-ad would match the entity of the content and design, and not be 'on-top' or outside of it.
'De Morgen' by far.
To me 'De Morgen' should be awarded for being the best serving online newssource in Belgium when it comes down to design, usability and interactivity.
The articles are clearly labeled on topic. One blink of an eye can tell me whether the article is on "economie" or "binnenland", should be expanded in my opinion but they're there. Also, the stream of recently posted articles has received a clearly important and readable spot within the entity of the content. Maybe the pushed article's image is too large but it doesn't quite bother me here because a lot of the other content shows. Too bad I have to scroll horizontally to get a full view of content and ads when I'm surfing 1024x768. They use a sharing button like most newssites nowadays but they nicely keep the other features tied to each other in the footer of the article. 'De Standaard Online' for example uses their sharing button in the footer and other features next to he header. I tend to find that a bit confusing. Just fyi: 'De Morgen' uses the AddThis for sharing, others like 'De Standaard Online' use AddToAny. They're basically the same. The horizontal navigation is a plus to me.
HLN: big as in butt ugly.
I tend to skip the review on HLN but I can't. Why can't I? It is simply the biggest one around. Not in size of course, but in traffic volume. I recall HLN being the biggest newspaper, and news site, in terms of readers, for a long time. Before that it must have been Skynet or MSN, but in my opinion they cheated a bit by installing their page as the default homepage upon installation of Belgacom or Windows.
HLN, you can't be running high with excitement, or into good taste if you like the design they used to skin they're content. No doubt the ugliest portal template I've ever seen for a 'vortal' with nationwide usage.
It is wrong. Top down wrong. The colors, the crispness, the structure, the architecture (maybe not quite, as people tend to find their ways in), the loudness of shouting out the news loud and clear, is wrong. But who am I to judge the design of a newssite that attracts most readers in Belgium. Dear Persgroep, don't be mad at me, please :)
In stead of going on and on about how I hate the HLN design let me point to a Norwegian newsportal.
SOL.no is the biggest news website in Norway. Their site, at first, looks as horrible as HLN but in fact isn't quite so. As a matter of fact, to me it is a very slick portal giving you instant access to many articles touching a broad range of topics. The reader is immediately introduced to plenty of info without scrolling AND the ads are nicely incorporated by the unity of the content. Advertisers are offered a wide myriad of possibilities for advertising and marketing their communication concepts, products or brands there without having to push away the information that actually attracts the reader. Win win I would say. By the way their style sheets are set to overflow:hidden so there is no horizontal scrolling for users on monitors smaller then 1024x768. A role model.
Sol.no got renowned for their banner campaign that struck like a meteorite at the Cannes Festival in 2008. The concept is as simple as it’s ingenious: the banner content changes continuously, thanks to an especially created program. A copywriter, whose task is to animate the banner, writes or draws on a pad and the information is transferred to the banner on the screen, exactly as it is and in real time. You can imagine displaying a banner with live feedback on the current content of the site you are browsing tends to catch your attention and will get rewarded by your click.
BBC for you and me.
The modular system of the BBC newsportal is my all-time favorite amongst the newssites. It is open to participation, suits my needs if I really want it to, and feels very intuitive to every profile of reader. Of course they didn't have to struggle pasting in a 3-ad and they haven't managed to entirely remodel the content into this system. The homepage links to the old grid of the BBC newsportal.
Of course I would be a dork for excluding this very nice papervision designed example by MSNBC, Spectra.