Let's avoid designing like this | Hacker News Reader

Let's avoid designing like this

newhive.com

L E T ' S A L L F I X T H I S P R O B L E M B Y U S I N G O V E R S I Z E D F O N T S S O T H A T T H E R E A P P E A R S T O B E M O R E C O N T E N T.

(seems like I can't change font size in the comments, spaces and caps will have to do)

I thought you were just nitpicking, but then I tried to change the font size on TFA and was unable to. Cmd-minus and Cmd-plus in Chrome on OSX does nothing to the body text, just changes the size of the logos and social buttons. What's up with that? I don't think I've ever seen something like that before, is it some CSS gone bad or something worse?

It's a responsive layout. Change the window size, and the font size changes with it.

You're right, that's really strange though. It looks crappy on my phone, the font size is too small there, but it's too large on the desktop.

Poorly implemented here, though a sound concept when done correctly.

Information Architects (the creators of iA writer) shared an interesting post [1] on responsive typography that you may find interesting. One rational for having smaller text on small viewports, in addition to saving space, is to adjust for the distance that most readers view content on their phones from. We tend to hold our phones closer to our eyes, sit farther from our desktops, and hold tablets some distance in the middle. Having smaller text on a phone therefore accommodates that. Trent Walton wrote a useful post on the subject as well [2].

1. http://informationarchitects.net/blog/responsive-typography-... 2. http://trentwalton.com/2012/06/19/fluid-type

The purpose of this site is to maximize the time users spend looking at the content. The problem lies in that you think the content is the article, when it fact it is the ads. Once you take this into consideration, this is an excellent layout.

But the question is - would I look at more ads if I read more content? right now I am reading 1 article, looking at all the content. but they have the opportunity to have me read 5 articles, thus looking at more ads overall. In fact, the current layout is so bad, I don't even read all the articles that I land on from HN, simply because I get too frustrated with so much ads.

I agree with you. If I see a lot of ads, I'll simply leave. By then maybe I'm not their target audience. I have visited Forbes many times from HN but never noticed ads because I either use AdBlock on my laptop or send article to Readability!

But if they want more impressions, they should let us read content first. If I like the content, I'll surely follow their recommendations for sharing and ads.

You're right to ask the question. But (a) the site isn't optimized for you, and (b) Forbes is trying to make money. So your blog post comes across as (I'm sorry to say) naive.

If you want to find out these kinds of answers for yourself, try running an advertising-supported website for a few months — it could be genuinely interesting.

I completely understand that Forbes is trying to make money and I hope they do. I assure you that I don't expect to read content for free, even if it's free. However, I believe that by encouraging me to read more of their content, in ways that would actually keep me on their site, overall would increase the number of ads that I get to see. Right now I came and I left because I was so put off by the clutter, but like I said at the end of the post, whenever I visit qz.com , I always read a lot more because I don't feel interrupted. If Forbes gave me more content and fewer ads, I would read more and would thereby see more ads. Maybe I am just not in the target audience, since I very very rarely click on the ads.

I don't know qz.com's financials, but the ad:content ratio of a profitable publication is normally a lot higher than what they have. Which suggests they're either strategically de-prioritizing advertising for the short term in order to build up audience, or they are struggling to sell space.

In the long-term, I would expect that for you to continue to enjoy quality content on qz.com, you'll probably be disappointed by an increasing amount of advertising. Whether it's in-between scrolling articles, or in the form of advertorial, or a banner at the top of the screen, it will come :( Such is the way of the world.

But then you look at Daily Mail[0] and see they do nearly the opposite of Forbes. They have a lot more content than they have ads, and they are profitable.

0: http://www.dailymail.co.uk

The real joke here is: how much of the content on Forbes.com is "real" or interesting (and not merely sensationalism or rehashing others' articles)?

I realize this is a bit meta, but the article ends with praise for qz.com - a site which doesn't load at all unless I disable Ghostery and allow third party cookies.

By meta, I mean it speaks to this, also on the front page of HN today (and also all about advertising) : http://yro.slashdot.org/story/13/02/23/2126246/firefox-will-...

There are plenty of studies that show users typically ignore anything that looks like an ad, google "ad blindness". Those ads on the right looks like the typical online banner ad, distracting. Even if you're designing for high ad viewership this is the wrong way to design it. If you buy ads like these you're spending your ad money poorly. These types of bad ad design has lead to a move to so called "native ads", you can google that too, which is really just a return to the traditional offline method of advertising. Traditional offline publishers could overlay their content with ads but they don't because they know people will hate it. Granted it is a lot easy to ignore/block internet advertising, but it is illogical to make things worse with this sort of disdainful design. "Native ads" is really just a buzz word, people like John Gruber of Daring Fireball have capitalize on traditional advertising for years. His rss feed sponsorship is just like a radio show sponsorship where the host/dj of the broadcast reads an ad to it's listeners. Think about it, Daring Fireball makes more money from rss sponsorship then it makes from banner ads. Companies buy the feed sponsorship because it works.

" I am not going to share something until I have read the article - put all the social nonsense deeper down"

Dude, your site has comments and sharing at the top.

A Forbes article has to sound really interesting for me to deal with their website just to read it. They also break the back button and screw up my history. They really are a shining beacon of user abuse and should be known as an example of what not to do.

[edit] I'd like to add a question to the author of this post. What have you done to my zoom? Your text is gigantic and won't become non-gigantic. It's terrible.

He doesn't put the article's photo in green, but photos for articles are very important. So much so that studies have shown you are better putting the photo above the title. He may be a techie who prefers words, but that's not the site's target audience. He may even say he prefers words, but still be more attracted to an article with an image at the top sharing space with the text.

If you actually want to, you know, read the article, you can run this in the console once the page loads:

a = $("#abovefold").find("> .fleft"); a.parents().andSelf().siblings().add(a.find("hgroup, h1, .contains_vestpocket").siblings()).add(a.find(".vestpocket, .controls")).remove(); a.css("width", 900).css("margin", "0 auto");

Gets rid of all the crap.

How do you skip the ad that invariably shows up when you try to access the article?

Hmm, I don't see any ads, even with adblock turned off, once I run that line.

I meant that, even with Adblock, you usually have to sit through a full-page ad with the "continue to site" link

I recall reading that shorter columns of text help people to read faster and raise fact-retention, because it brings the entire body of a line into a single eyespan. Even without speed reading skills, you can typically read thinly columned text quickly.

I'm not sure if that has anything to do with why a site would choose this layout style, and there's clearly a lot of extra cruft that just distracts from the content. Probably enough to obliterate the gains.

But I wouldn't be surprised to find out that some consultant or designer or developer told them thin columns of text had upsides.

Sometimes the extra cruft goes too far: head to http://www.forbes.com/home_usa/ and you'll notice a video in the right column automatically starts playing with the audio on (assuming you don't have AdBlock blocking it).

This isn't about the article, but I would like to point out that New Hive is really a _fantastic_ publishing platform. There's just an immense amount of creative content on it. It reminds me of what I like to think were the glory days of the Web: you know, when people were on GeoCities crafting pages about their DIY electric car or whatever. It seems like today everyone is feeding what they ate for lunch into some reverse-chronological blogging system and calling it a post. Call me old-fashioned...

I haven't signed up for New Hive, I've just watched the video. I'm not sure if it suits the purpose of a blog well. Are there templates available? Otherwise, it'd be annoying to have to 'design' your page everytime you post a new page. Also, everything is positioned in absolute, which totally breaks the flow of a regular HTML page.

I'm obviously talking from a outsider's point of view, considering I haven't used it yet. I'm just wondering how it'd feel like for a regular publisher, posting content on a regular basis.

Anyway, the interface for setting up a quick design seems more suited for 'landing' pages, where the layout is almost as important as the content.

It really looks great though. I like the creative results this kind of interface yields.

Let's also not design sites that disable scrolling with middle-click.

I hate to be "That Guy", but I can't say I like the fact that I can't reduce fontsize with crtl+zoom.

Tangent: Can anyone who knows more about javascript tell me why so many websites disable default features? I mean, isn't that, like, more work?

If you pull up the web inspector, this site actually dynamically changes the font-size property of the body text when you zoom in/out to maintain the same size. It's very bizarre, I don't understand the intentions of the designer at all.

It's probably related to having it adapt to the screen size - changing the size of your window also changes the text. Again, don't understand the intentions of that either.

A (clueless about he web) designer creates a bealtiful page design with gorgeous picture and plenty of different fonts. Then, a manager (clueless about the web) likes it and aproves the site, and it falls on a developer's desk to actualy create such a site.

Take a second look at the Forbes site, and think about how you would create that design. I can think of two ways, one of them requires some insight, and the other one requires reimplementing every functionality of the browser (or living them out).

Should we avoid pages that need special javascript functions to scroll?

I'm glad I'm not the only one who is bothered by layouts like this, I found that it's rarely discussed.

(Also this was funny to me because I also made a screenshot on a forbes link earlier, but haven't had much to say - https://news.ycombinator.com/item?id=4960590)

One of the things we like to think about in ux design is how we can design at the intersection of user goals and business goals. In this case the business model is to drive a high volume of impressions to a broad audience. Therefore this is a viable ux, since the business goal is to drive volume, not engagement. A site like qz is going to have to command a much higher cpm and as a result will need to focus on retaining high value users as opposed to just driving high volume impressions.

A great analogue to this is in eCommerce sites. Compare the number of products presented on an amazon product page to the number presented on Barney's New York or net a porter. Amazon moves higher volume of product, and generates more revenue, but does that mean they present the best ux for shopping? Certainly not, but that's not their focus, nor is it Forbes's priority to provide the best possible ux for readers.

This is an attitude that treats users like cattle.

It would be a mistake to assume that readers are all the news sites optimize for. Don't forget that they get readers to get impressions, and impressions to get ad dollars.

By increasing the real estate focused on creating more clicks, they increase the chances they can get somebody's attention, send them to a new page, and thus create another impression, and more money generated.

It's the same reason that news sites will have a "Top 10" article with images and divide the content up into essentially 10 sections you have to keep hitting Next to see more on. More page loads = more impressions = more $$. Simple

Additionally, pages rank higher for SEO in SERPS when they have social proof that the content is engaging. So yes, the social sharing is necessary.

So while I agree your comments on how to optimize purely for readers are valid, you may be forgetting to take other things into account.

Well, that's the mobile version of the site, so there are going to be some constraints. The non mobile has much more breathing room. Also, I'm not sure why the image is in red as it's contextual if not relevant. It's not an advertisement.

Just to clarify, this is not a mobile version. This is desktop version zoomed in, so I could see better.

It's the media selector set to mobile sizes, so for responsive design, that is the equivalent.

The floating social buttons and banners on this article's page are possibly worse than Forbes' layout. On the iPad they take up significant screen real estate

Maybe this guy should take his own advice...

http://i.imgur.com/ieNUA5Vl.png

Personally I prefer having the tweet button at the top even if I need to go through the content of the article before reading it. I'm willing to bet that more articles are shared with the share button at the top rather than bottom.

Similarly, I spend a lot less time scrolling through Mashable headlines after their redesign. Ick..

Forbes isn't crafted by UX designers for reading pleasure, it's mangled by SEO experts to optimize user-hostile metrics for better placement in the Google.

It's not a permanent solution but I use Evernote Clearly to get rid of all non-content related material and it also highlights and save in Evernote.

The website linked is satire right?

any reason why the font is 38px?

Reply on news.ycombinator.com