Welcome to WebmasterWorld Guest from 54.164.198.240

Forum Moderators: ergophobe

Message Too Old, No Replies

Your Site Layout Might Be Killing Your User Engagement

     
5:55 pm on Oct 13, 2015 (gmt 0)

Administrator from GB 

WebmasterWorld Administrator engine is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month Best Post Of The Month

joined:May 9, 2000
posts:25718
votes: 820


There's a great piece published on one of WebmasterWorld's Administrators, rogerd's Neuromarketing site, on site layouts, and performance.

It discusses vertical vs. horizontal layouts [neurosciencemarketing.com], and the performance expectations. Heat maps prove how a trendy layout may just kill a site, even if it looks great. Not only that, but perception can make a difference. This piece is really worthwhile reading, imho.

In short, don't make it difficult for site visitors, but if you want to find out why, read the article.

It's that much tougher to win an audience, so once you've got them you want to maximize retention.

Have you used any of these ideas when you last designed, or are just about to redesign your site?
6:23 pm on Oct 13, 2015 (gmt 0)

Moderator This Forum

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 25, 2002
posts:8627
votes: 273


Just shared that article with two other people.

I think the main takeaway should not be that horizontal layouts are bad. What I've been seeing a lot lately is sites with no scroll cues. You think you're seeing the whole page. As people go to a responsive design, it's quite common at some screen sizes for there to be no clue that the page continues. I've been looking at this a lot lately and could post a bunch of examples.

But to answer the question, in a recent ongoing redesign, we're not using the ideas (horizontal vs vertical), but are using testing from an early stage. Designers often have a gut feel, but testing doesn't always bear that out.

- heatmapping
- click mapping
- tree testing (testing nav structure without a site in early IA phases)
- live user testing
- first click testing (tasks where the user interacts with a static image/wireframe and you measure first click success)

All of these reveal surprises... Interesting stuff. Give me a week for things to calm down and then I should start writing down some thoughts
8:16 pm on Oct 13, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member ken_b is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 5, 2001
posts:5855
votes: 103


Thanks for posting this. I've been pondering this issue a bit lately and this added some useful info to consider.

Somewhat related is RWD and the users/viewers choice of landscape vs portrait view on a smart phone, etc. Add these together and the need for careful layout design becomes more critical.
2:11 am on Oct 14, 2015 (gmt 0)

Senior Member from FR 

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Feb 15, 2004
posts:7139
votes: 410


Obvious, is obvious..

I note that her first "vertical design", "the old-fashioned vertical page layout (as shown on left)" isn't "the old fashioned way" at all..it is however the way Pinterest used to base their page designs..

The "vertical design" shown lower down ( and later used again in the "heat map" )..is nothing like the first "example"used as "the old fashioned" vertical page layout..The "heat mapped" vertical page layout..is a three column with two side bars ( ads and additional nav type sidebars ), which strongly delineated from the centre "content" column ( which itself has multiple "horizontal dividers" )..

What it, and the other Pinterest type vertical layout do have in common is, as ergophobe rightly says.."scroll clues"..
whereas the "horizontal " version shown does not have them ..

The rest of the article is IMO "padding", with diagrams..and a smattering of blindingly obvious things that any competent web designer has known, and used in design of web pages, for well over a decade, if not two..

Might be "news" to those just beginning web design, but it isn't a "revelation"..nor an "insight"..more of a "the pope is catholic" and "bears defecate in the woods"..

Next up will be someone writing about their insight for making "flared jeans" ..and "tie dye tees"..

Btw..the "vertical design" translated into a responsive design and displayed on a phone..will have just as many "horizontal problems" as to "no scroll clues" as the horizontal one, unless the text is carefully edited so as to leave no sentences ending on a horizontal line when viewed on a phone, unless the "story" is obviously unfinished and so requires one to scroll down to get to the end..

It is amazing how few people do not realise what a scroll bar is for , ( why one "happens" ), even on a desk top machine..on a phone or a tablet the "scrolling device" can be almost invisible..so content should never be a "perfect fit" for the "view port"..or the average user will indeed think that what they see at first glance is all there is..

But that is web design 101..not an insight..as are many other things..including those mentioned by ergophobe in the "list" above..
( not taking a dig there ergophobe :) I know that you have an interest in the "whys", and apply what you know ..

..But to me, anyone who doesn't realise these things should not be designing websites, and certainly not taking anyone's money for designing websites..

But then it is like SEO, many hang out the SEO shingle, precious few actually know the first thing about it, and still fewer can prove it with their own site's ranking in SERPs, no matter how gifted they may claim to be )..the pathway for anyone wanting to make a better website, gain more converting traffic, please their users, is a learning curved one, and the way is fraught and slippery with snake oil and the words of false gurus..

The average website user is not too bright ( 50% of all people have below average IQs )..make it all obvious for them, lead them to where you want them to go, and if you are not sure of what they are going to do, watch them, with no prompting, and then fix what was not obvious enough for them..only confuse them if you are certain it will be of benefit to you..like Google do with adwords and SERPs..most users do not know that some of the things on the page are ads..especially not the ads that are above or below the SERP organic content ..

Which is precisely the effect that Google designed into their SERPs..
6:59 am on Oct 14, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:8765
votes: 704


Interesting article. Thanks for sharing.

Me, old school (ie, PRINT, and these days that is to VIEWPORT) and that has never failed. As for users too dumb to scroll down I have no worries, either for my content or them clicking on an ad. Website was not built for idiots. :) (take that to the bank if you just think about it)

There is something to be said for the horizontal layout... cinema style like a motion picture, and will generally fail for the webmaster because the motion picture kiddies viewing are waiting for the next "frame" while eating popcorn (ie, too jaded to click a button/scroll)

Code as a book, or magazine, and get results. Code for motion pictures and get Hollowood (sic) failures. Code too damn many columns and get hoo hah and bounce. Makes no difference how much krap can be put on a page if your reader backs out from the NOISE of text, distractions, and other intrusions on CONTENT.

Nice article which entirely misses the point of communication. And asserts mystical scientific type heat maps for something that just isn't COMMUNICATION.

Dang it, kiddies: K.I.S.S. remains the best method.

And these days that is VIEWPORT and RWD. And if you are inclined to 3rd part ad servicing, those should be inline with the commentary, tasteful, but IN IT (clearly marked of course). Works on desktops, tablets and mobile.

Take another look at that article. Everything shown is in COLUMNS and then you tell me how that fits on a phone.

Obvious rant off.
8:40 am on Oct 14, 2015 (gmt 0)

Administrator from GB 

WebmasterWorld Administrator engine is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month Best Post Of The Month

joined:May 9, 2000
posts:25718
votes: 820


Let's not assume everyone in the last ten or twenty years knows everything about design, so this article is useful to remind all of us that the contemporary designs that are trendy now may not be helping a site's traffic and user engagement. Importantly, youngsters coming into this business will not have the experience and knowledge of some of those posting here.

It reminds me of when Flash sites were all the rage with designers. They sold Flash sites really hard, and the web developers had to follow the trend. Those in SEO knew the challenges of making a Flash site work in search. Flash soon became an add-on for sites, rather than the site itself, and the the fad was soon over. Horizontal sites may just be a fad, but by educating those involved it'll help improve the outlook for all those involved.

We can all learn from this research every day, imho.
2:56 pm on Oct 14, 2015 (gmt 0)

Moderator This Forum

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 25, 2002
posts:8627
votes: 273


As for users too dumb to scroll down


As for users too dumb and lazy to scroll down and find my Buy button, I've got no use for 'em.... Oh wait, they have no use for me. I'm out of business.

As for users who couldn't care less that I moved that Buy button up above the fold, but who like the big, full-width image more and would rather scroll down for the buy button, Bah! No use for them. Oh wait, they have have no use for me. Now I'm out of business. [OK, the effects were minor, but in fact, getting the obvious clickable button above the fold actually dropped CTR and conversions on the page in question]

make it all obvious for them, lead them to where you want them to go


Yes, yes. Absolutely. But unless you do testing and research you don't know whether you are making it obvious or not. It may seem obvious to you, but one thing I've learned is that those of us who are up to our eyeballs in this stuff think, see and use websites differently.

One example. We recruited from two pools of users and segmented
- Pool 1 - random users recruited by a usability service
- Pool 2 - actual customers

Results? Markedly different click patterns, heat maps, scroll maps. Not surprisingly, the typical users recruited randomly to take tests on a usability site think and act a lot like me. Customers... less so.

I remember years ago working for months on a site and honing and honing the interface to be simple, straightforward and obvious. Finally, it was almost ready for the world, but first some live user testing, starting with my wife. I beamed with pride as I had her open the starting page, flush with the excitement of her amazement at her brilliant husband and his awesome, usable, clear, obvious site.

It took me five seconds to realize the whole thing was an utter failure. She opened the page and immediately... did nothing. Stared. Baffled. I could tell her first thought wasn't "Cool!" it was "Huh? What do I do here?"

Since then I've realized that you (or a designer) can tell yourself over and over how obvious something is and how only the dumbest users wouldn't see it right off, but until you do some testing, you're really just guessing.
3:06 pm on Oct 14, 2015 (gmt 0)

Moderator This Forum

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 25, 2002
posts:8627
votes: 273


PS - not trying to pick on you tangor - I know you're tracking key metrics. I'm just making the more general point that we're all in our own heads until we make an effort to get outside them.

And while on the subject

>>not taking a dig there ergophobe

Go ahead and dig. I don't offend easily and I'm glad for the discussion. I've been deep in testing and thinking about usability lately, but haven't gotten around to posting much here. But if you call BS on my BS, it might force me to share a bit more ;-)

Everything shown is in COLUMNS and then you tell me how that fits on a phone


Each column goes full width and stacks. That would be the default behavior in Bootstrap or Foundation. Of course, it commonly results in an awful user experience because the material that's in the righthand column at the top and nicely above the fold is now 13 swipes down and all but invisible.... but that's another problem.
3:47 pm on Oct 14, 2015 (gmt 0)

Senior Member from FR 

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Feb 15, 2004
posts:7139
votes: 410


Not calling BS on your BS ;) due to you not having posted any BS..:)

But the article whilst not being BS..is a little "wow look at what I've discovered all by myself" whilst rehashing what has been known since before the web..

I make sure never to lose the dumb users..Kind of like riding a motor cycle...you stay alive by regarding all the other road users as dumb", and so anticipate their dangerous moves..Dangerous in the sense of websites being that they cannot find what you want them to, do not do what you want them to..

Mme Leosghost isn't "dumb" by any means, but doesn't navigate a site like you or I or tangor would..I watch her use other people's websites and think.." they would get a rude awakening if they saw this, they never thought about the fact that their users are not webdesigners, or if they did, they "helped" their "testers", rather than stayed quiet and just watched"..

Ah , yes ..selected testers.."recruited" ..so self selected slightly more web savvy than your average bear eh..and a long way from real customers in the way that they engage websites..

A major problem that many do not think of..what is the age range and ability ( or disabilities ) of their target user(s)..sites have to be designed with that in mind.."one size does not fit all"..

No good making the text too small or with insufficient contrast, and saying to oneself, they can always zoom ( most of them will have no idea how to zoom ) and will simply leave as they cannot read it..Of course if you want them to leave via clicking on a carefully placed ad that is another matter..one can "herd" users, again Google is particularly good at it..

More than 6 swipes down, and they are already losing interest..and have forgotten where the nav was..or won't swipe up to find it..use fixed navbars..and don't assume that everyone knows what the menu hamburger is for..many have no idea what it's function is..
4:21 pm on Oct 14, 2015 (gmt 0)

Moderator This Forum

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 25, 2002
posts:8627
votes: 273


rehashing what has been known since before the web


There's a lot of that out there. I have a friend who has been a full-time graphic designer/artist for 45 years (plus four years of design school). It's amazing how much she's known for 40 years that people have recently discovered ;-)

>>age range and ability

I just was asked to provide feedback on a completely unusable app for me, at 52 years old. Failed basic accessibility tests (low contrast, tiny fonts). I went to the About Us page on the company website and instantly understood. They probably hadn't tested it on anyone over 40. To their credit, they took the feedback to heart and within a month had a wonderfully usable, easy-on-the-eye app that I can use without glasses and in challenging light.

>>don't assume that everyone knows what the menu hamburger is for

Now you are trying to get me mad aren't you? :-)

[webmasterworld.com...] (Supporters Forum)

[edited by: ergophobe at 9:07 pm (utc) on Oct 14, 2015]

8:55 pm on Oct 14, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15304
votes: 703


No good making the text too small or with insufficient contrast, and saying to oneself, they can always zoom ( most of them will have no idea how to zoom )

I know exactly how to zoom ... but why the ### should I have to? If a website is willfully set to an unreadable size, that's on them, not on me.

Not long ago I met a site with white-on-black body text. I went to the computer's Accessibility function to reverse display ... but only because the content was that important to me. The other 99.9%, I'd have closed the tab on the spot.

What struck me about the "horizontal" and "vertical" views in the originally linked article was just how much dead space there was in both versions. In effect there are two desktops: your computer's own (behind the browser window), and then the site's (behind the content). And no, it isn't because a site designed for mobiles had to be visually dumbed-down for larger monitors. It's because, for most purposes, browser windows are already wider than they need to be. (Go to web-sites-that-youknowwhat dot com, pull up Year's Worst, and you'll find hilarious and/or appalling examples of what happens when you fill a page with content, not just top to bottom but right to left.)

https://www.webmasterworld.com/supporters/4771422.htm
Oi! That wasn't nice. (Saying "link to restricted forum" is one of those ordinary-human-decency things, like saying "132MB download" next to a PDF clicklink.)

:: memo to self: remember for future reference that auto-linking won't happen if there is no content between [ quote ] tag and beginning of URL. Happy accident in this case ::
9:10 pm on Oct 14, 2015 (gmt 0)

Moderator This Forum

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 25, 2002
posts:8627
votes: 273


>>Oi! That wasn't nice

Updated. I wasn't paying attention. In essence, it's a thread about using the collapsed menu pattern (i.e. need to hover over "Menu" or icon or combo to see choices) on desktop.

Pro: everyone knows it because they're used to mobile
Con: not everyone is on mobile but more importantly, the mobile pattern only exists because of limited screen real estate. By adopting that pattern on the desktop, you place similar expectations on desktop users as on mobile and we all know that mobile conversions are much lower.
5:21 pm on Oct 15, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member ogletree is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 14, 2003
posts: 4315
votes: 41


Reminds me of the concept from years ago "Ugly sites sell". I have spent many years arguing with people about website design. It is very hard to get the idea out of their head that a good looking site is what they need. People have a hard time understanding what a website is really for. It is not a magazine. People go to websites to accomplish something. Just because the owner likes the site and his friends like the site does not mean it is a good site. People do not like to hang out on websites unless your constantly updating the site wit new quality content that they want to read. They want to get there and get what they need.
5:39 pm on Oct 15, 2015 (gmt 0)

Senior Member from FR 

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Feb 15, 2004
posts:7139
votes: 410


:) I remember about 8 years or so ago here, I got a sticky mail asking me to take a look at someone's site ( insurance business I seem to remember ), asking If I could see any ways to improve it, the owner mentioned in his initial sticky that he got 7 million unique IP addresses per month going to it..I looked..it was fugly..really fugly..I told him don't change a thing, you don't fix what ain't broken..His conversions were great..But someone , a designer ( not me, but I am a designer, degree and all ) had told him it didn't look "modern"..I told him that many designers are idiots, and should be ignored..some should probably be taken outside and put down ( out of our misery ) behind the outhouse..
8:49 pm on Oct 15, 2015 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 9, 2004
posts:137
votes: 13


This new fad, which to me resembles very much the old designer fad of all flash sites, which also resemble dreamweaver etc sites, has absolutely dumbfounded me since I started to see it appear.

As far as I can tell, the basic rules are this:

1. make the font sizes so large that they are good fits for the near blind or mentally handicapped. And small children, aged 3-8 years old. What's that you say, your demographic does not include those groups? Well, all the better, you get bonus points then!

2. place very large margins between each block of text.

3. expand the header to occupy as much above the fold screen space as possible. The more room you take, the more points you get. Also, it's good if that header contains almost nothing of information value. Remove the navigation from it if possible. Shoot for a minimum of 50% average above fold, bonus points for greater percent used.

4. totally eliminate anything that even remotely resembles adult level information density, in fact, the less information density you create, the better the page is (in the designers mind).

5. remove anything that even remotely resembles clean, easy to use navigation

6. increase the amount of scroll/clicks required to access information. The more you increase these, the better the design is. That's 'modern'.

7. make sure to put blocky images next to or around the big text. The less information value the image imparts to the text/cell, the better. cyclingnews.com and netflix did this extremely well. Remember, if you can make the user scroll more, you are doing a good job, and there is no better way to do that then filling the page with images, ideally at least one per article or item. Again, and particularly relevant re WebmasterWorld, the notion of optimizing pages, decreasing page load times, very important for mobile today, out the window. Best to have as many elements as possible in each page, for worst performance.

8. make the page load as slowly as humanly possible. 7 is very helpful towards this goal, but the below mentioned abuse of as many js framework/libraries, and css libraries, as possible cannot be discounted. This is particularly valuable on mobile, since, it's already a given that formerly good practices like using explicit image sizing so the page can build without redoing itself jerkily as each set of images loads, makes it almost impossible to use these on mobile devices. This latter is particularly amusing in light of google's latest attempt to make mobile pages load faster, abc or whatever it's called. Clearly google is psychotic, since they are on the one hand telling devs to make pages slow, resource intensive, and inefficient, but on the other, trying to get them to load instantly be inventing yet another web language or whatever abc is. Plus of course, their own page speed insights tool, which tells you fairly clearly not to do any of these things.

Nice to haves are certainly:

1. use as much terrible bloated js as you can. Bonus points for using cludgy heavy slow and particularly with mobile, battery draining js frameworks.

2. make the design for the developer/designer, NOT the end user. This is a critical requirement actually, from what I can see.

3. major extra credit for making a page that should be straight server generated html, easily read by googlebot, into purely js generated, for no good reason at all except that all the developer knows is js. You'll note how similar this result is to the previous all flash sites. It's particularly important to make sure that pages that have no reason to be dynamically generated by ajax calls or whatever be done that way anyway. Because, you know, well, you can.

4. Serious bonus points for showing a pure white page for people who surf with noscript type extensions, not even a noscript tag anywhere on the page.

5. further extra credit for placing so much white space around h1-h6 tags that they occupy 20 to 30% of the view screen on a desktop. Google does this in their responsive web dev section, for example, so follow that example to get full credit for making your site suck as badly as humanly possible.

6. Also, make sure to never host most of your key js and css libraries on your own servers, always use remote 3rd party sources, linked to directly, to increase the odds of even slower page loads. Again, violation of every page speed optimization principle known. That way, when various versions of these come into conflict, you will have no idea how to fix it, and the client has to pay for the site repair. While not strictly required, this is a popular way to earn bonus points when you are striving to worsen page speed and performance.

I've followed a few sites that did this switch, and without exception, the users HATED the upgrade (sic, how can you call a severe reduction in usability an upgrade). Big sites in their niches I've seen do this, with howls of outrage from their users: chowhound, they just did it, cyclingnews.com, they did it last year. Both of those were owned by larger web property holding companies, and the decisions were clearly made by idiots who had no clue, ie, the ceo assigned to run that particular site/property.

Other sites I've seen massively drop the information density of their pages - this drop is particularly idiotic when you cater to smart users, and when you had excellent mobile and desktop versions of the site already, like bloomberg did - all now require far more action/scroll to get only a fraction of the information you could get before with a quick scan of the above the fold content.

I've been debating starting a thread trying to figure out where this total idiocy started, and who propagated it, and continues to, maybe this is the thread?

The main site I do does not do this, and our users, who also, like bloomberg users, tend towards the more educated side of the market, consistently and spontaneously email us telling us how good our site is, and how much the like it. That's because I've consistently refused to target the layout to a set of people that I honestly do not believe actually even exists.

For a while I figured, ok, the clunky boxy chunky information poor sites at least are good on mobile devices? but sadly, no, a good desktop site, if properly responsive, continues to be a good mobile site, that's because you don't need to do endless scrolling to get to the content you want.

I realized this was becoming an increasingly severe issue when I saw google in their responsive web developer section use the same idiotic methods, that is, massive white spaces, huge headers, massive fonts. And this is for developers! you know, people who read and have to analyze a lot of data very quickly? When I saw google promoting this garbage I knew there was a real problem out there.

Leosghost I believe spots a few problems with the source article, particularly with the awful example of a vertical site, but even that example shows that even such a bad version of a vertical site worked better than the horizontal, but that's really a no dugh, webmaster world of all places should never have been surprised by this, this is where I learned about the basics of usability, jacob nielson, you know, all that stuff about sites being easy to use, easy to access information, etc?

I'm fairly certain that one main cause of this is a sort of dropaway in the skills of html and css, on two sides, one, programmers who could never be bothered to learn css and html (you know the ones, because they are too simple and easy, lol), and on the other, the same group that went to wysiwyg type dreamweaver and flash sites, designers, who could never actually learn programming or how to work with code. Both groups appear to have adopted css/js frameworks/libraries as the solution to this issue, that's all I can think of an explanation, this is so clearly a fad, done for bad reasons, that it simply cannot be explained without those being at least major contributing factors.

The rise of wordpress 'sites', which really are in general just the new version of the gui built brochure site, except made out of endless streams of modules, libraries, extensions, etc, all of which will inevitably fail on the next version update of something or other, ie, these are throwaway sites.

But that does not explain real sites like bloomberg doing this, what I have grown interested in determining is just what the decision process is internally when a formerly not just good, but great, site, decides to make itself bad.

The recent chowhound was particularly revealing because you got to see in all its shining glory the idiocy of those middle management types making decisions to show how bold and visionary they are, and that the users should really grow to appreciate this and not be so critical, that was roughly the response of the chowhound cbs properties ceo, for example. This while a user based platform was hemoraging users due to all the stupid faddish decisions made, all of which reduced usability, made the performance inferior, and gutted the very essence of what made the site popular in the first place.

There I could easily see the process, the ceo sees other sites go this route, some cheap outsourced web development sales guy hooks into him, the ceo decides to make a splash by taking a bold innovative decision that just happens to copy everyone else, use the same tools as everyone else, annoy users like most other sites that do this, and so on, so in that case, it was obvious.

After doing a large mobilizing of one of our main sites, I quickly realized all that nonsense about these new frameworks and design degradations had NOTHING to do with mobile friendly or not friendly, but they most certainly had a lot to do with technical incompetence, and wanting to churn results out very fast, at a low price. Same exact thing I've seen now for 15 plus years from web 'designers', as they pursue their non stop effort to never actually learn how to do web work, and use fast cheap hacks instead.

I see site after site ruin itself this way, netfliix did it a while ago too, it went from clean and fairly well organized to cludgy, slow, and heavily information poor, same as everyone else, chunky, boxy, image rich endless flowing pages, fed by i assume some react or angular js junk. I actually don't even know how it could be used on mobile anylonger since it takes forever to find anything on a desktop.

But so it goes, I guess these web fads will always be here, the best one can say is, at least this new fad is better than all flash sites...

google in the meantime seems to have decided our site is not just good, but an authority site... in fact, for a key widget search term, if you search that term, our site is used for the official google top of rankings definition, you know, like wikipedia, etc? So we are feeling pretty solid about our decisions not to fall into this incompetence driven fad. stickiness, way up, site interaction, way up, rankings, way up, you name it, it's up. Same for company revenue. But I make sure to forward to the boss every time I see new story of user outrage at site redoes, like chowhound, just to make sure he's aware that this type of change is NEVER done for the end user's benefit.

[edited by: lizardx at 9:50 pm (utc) on Oct 15, 2015]

9:10 pm on Oct 15, 2015 (gmt 0)

Senior Member from FR 

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Feb 15, 2004
posts:7139
votes: 410


You forgot the BBC..le Point..and even El Reg..

They all fell for it..

Magnificent post / rant :) ..Nice to see you again :)

You'll need sites to use bigger type though....one day..:-p
9:32 pm on Oct 15, 2015 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 9, 2004
posts:137
votes: 13


hi leosghost. I just listed the ones that have really struck me as having gone from great, well done, to inferior, cludgy, and apparently designed by and for the mentally handicapped. While I think this is a very noble idea, unfortunately I really don't think that group uses these sites. But they can, if they want, now.

El reg, yeah, but they aren't as bad as most, they did their redo I think a bit before this new fad, so it's still got some standards. Certainly doesn't benefit from the flowing boxes layout, no site does, since information density, that's the key. I did some rough math and realized that when cyclingnews.com did their switch, information density was dropped by about, at least, 10x, and really, it's much worse, because users simply will not scroll endlessly in hopes of finding an article they don't know is there. Which is a key point. I know for the sites that have done this, my page views on those sites is down by at least 80%, some even more, closer to 95%, and that is something that even the bad example that starts this thread showed was the norm. Think if that starting layout had been an actually good information rich layout! you'd be talking probably about a 95% reduction in user engagement.

However, I haven't had a lot of time to post, we're too busy succeeding for me to spend much time on WebmasterWorld, lol. But I did notice that we had switched up to authority status recently, which took a LOT of work, that's quality work, quality content, a lot of thinking and testing, always with the two pronged users and search engines should both be pleased, but because stickiness is such a key factor, engaging the users, well... that's a pretty good idea. A few days ago I was doing some unrelated research on some search terms, and I suddenly realized that it was not a matter of finding which (our) industry leaders (multibillion dollar companies), government, edu, press, sites mentioned us in the last year, it was actually harder to find any that did not.

Browsers all have a min font size, in fact, often layout issues are exposed because some older users point out errors due to that font setting, errors in the layout that is.

I recently also started the painful process of mobilizing some of my personal sites, project homes, etc, and was really astounded how truly little css is required to do that, assuming you have some clue how html works, of course... Other things that astounded me, which I found testing the google mobile friendly tools, was just how easy it is on a mobile device to click regular links, ie, the notion you need massive boxes to click, that's pure and utter BS, again, only if you are severely handicapped do you need that, normal humans do not require a huge space, just big enough for a finger, our fingers, after all, were created by the need to do very fine manipulations.

Every component of this new fad to me shows total cluelessness when it comes to usability fundamentals, html/css fundamentals, and page load speed issues. It's the antithesis of everything we used to talk about and focus on here at WebmasterWorld, and that to me points only to one thing: web designers.

My ongoing suggestions to client is to ignore this fad, and benefit as users feel welcomed and not insulted, as they find it easy to locate all our offerings, to access them, to find more information, better information, in a way that does not treat them like imbeciles. And mobile friendly too!

I had long assumed, before I even got a smartphone, that this clunky layout style had some actual mobile benefit, but after seeing hte non joys of endless scrolling to access things I did not know were there in the first place, I realized, this fad is bad for everything, except I think kindergartners, maybe first and second graders, that's the last time I've seen that size font, big pictures, etc, you know, beginner picture reading books for small children?

[edited by: lizardx at 9:54 pm (utc) on Oct 15, 2015]

9:40 pm on Oct 15, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15304
votes: 703


make the font sizes so large that they are good fits for the near blind or mentally handicapped

I want to see those sites. All I ever find is sites forced to an unreadably small font size. (Hello? Designers? The browser has a default size setting. Your site's reader will use it if the site doesn't override it. There is no need to force a size at all. If your site will only "work" if each text area is some exact size, then that, again, is the site's failure, not mine.)

I do not perfectly understand what large type has to do with the reader's mental acuity.
10:02 pm on Oct 15, 2015 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 9, 2004
posts:137
votes: 13


Oh, lol, you're talking about the other extreme, those are the off gray backgrounded siites and gray scale font colors, with tiny fonts, those are usually but not always created on osx/apple systems, which have a different gamma than linux/windows, which creates a murky, washed out appearance when viewed on non apple devices. In my opinion, anyone who wants to be taken seriously but who uses gray on gray fonts... well, sorry, but not going to happen.

You haven't been looking at the current internet it's fairly clear. if you haven't noticed this chunky blocky trend by now. I listed a few examples. So did leosghost. github is also a prominent violator. Compare github with googlecode.com for example. WebmasterWorld doesn't like links outbound, or name drops, so I didn't, but it's easy to find this stuff. Very few sites use that impossible to read tiny font in grayscales anymore, it's usually just developer personal sites, designer sites, etc. That's a dying fad, thankfully. Solution: ctrl + + for increasing font size, web developer toolbar, disable page colors option. That group will never have a clue, I tend to just leave their sites, they don't deserve the page view imo.

By the way, I just noticed that google apparently clamped down on this, and now has a more reasonable layout for its web developer section, and it even includes things like a left nav bar!

Open up a children's book, then open up a real book made for adults. Also a book made for teenagers. That's what font sizes say about the reader. The more words there are per line/page, the better the readers' reading skills. This is generally related to mental accuity. Don't fall into the pc trap of thinking that pointing out the obvious is somehow disrespectful to group x or y. You'll in this experiment note a few things: childrens books have big fonts, lots of white spaces, and big pictures. Adult books have very dense information.

The group you are commenting on of course plagues us all, that's those clueless designers developers who use massive apple screens, with incredibly high resolutions, and apple gamma color settings. Those are not a new thing, that's as old as apple osx users I believe, though of course, the higher resolution their screens, the worse the problem is. I tend to skip those sites.

I'm talking about major commercial sites. Though both fads are easy to find, but the new technologies make the big and clunky more likely than the tiny and gray backgrounded.
10:45 pm on Oct 15, 2015 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 9, 2004
posts:137
votes: 13


[neurosciencemarketing.com...]

I can't resist posting this link again, to the source article. Notice the light gray fonts? 10 to 1 that looks good on a mac screen. Hint: if you want to be taken seriously as a web resource, make your pages easy to read and navigate. Never rely on it looking good on a mac, without making sure it looks just as good on a pc, or any non apple device. Black or near black is a good font color, grays, very dangerous. So we have someone telling us what works and does not work, yet they do not feel the need to make their own page easy to read. Serious loss of credibility. Open a book, notice that in general, fonts are black, against white. That's not an accident, it's called contrast. Read up on it, before writing articles about page usability.
11:02 pm on Oct 15, 2015 (gmt 0)

Moderator This Forum

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 25, 2002
posts:8627
votes: 273


Epic post lizardX!

>>1. make the font sizes so large that they are good fits for the near blind or mentally handicapped.

I get your point,but I would say there are so many site with awful typography that I just leave. A lot of people who learned design on the web learned nothing about typography and their sites are unreadable (and I think it's hard to really get typography right).

Anyway, I bet Ogletree has some thoughts on your point #1

But I *do* know what you're talking about. It's not that hard to have media queries that bump up the font size when the visitor is on a small screen instead of inflicting giant type on desktop users or minuscule type on phone users.
11:10 pm on Oct 15, 2015 (gmt 0)

Senior Member from FR 

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Feb 15, 2004
posts:7139
votes: 410


I get your point,but I would say there are so many site with awful typography that I just leave. A lot of people who learned design on the web learned nothing about typography and their sites are unreadable (and I think it's hard to really get typography right).

[xkcd.com...]
enjoy ;)
11:33 pm on Oct 15, 2015 (gmt 0)

Senior Member from FR 

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Feb 15, 2004
posts:7139
votes: 410


The lady appears to be a serial rehasher of the "old knowledge"..
[neurosciencemarketing.com...]

With again a number of "things that one shouldn't do with a web page" IMO, in another article rehashing old knowledge, not always accurately, about what she thinks one should do..this time as related to ecommerce pages..with some very "dodgy" recommendations..

She also forgot the "try to to give them more than six choices, it will only confuse them and result in lower sales as they go "tharn" and then abandon the page or the cart" ..

I'm in the wrong line of work.."Web psychologist" is apparently a lucrative way of selling antique cords and hawsers..
2:25 am on Oct 16, 2015 (gmt 0)

Senior Member from FR 

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Feb 15, 2004
posts:7139
votes: 410


My typo ..should have read.."try not to give them more than six choices, it will only confuse them and result in lower sales as they go "tharn" and then abandon the page or the cart"
2:47 am on Oct 16, 2015 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 9, 2004
posts:137
votes: 13


I stopped paying attention to web fonts years ago. If I want users to read and use the site, I use, usually, arial, sans-serif and call it a day. Good size, not too big, not too small, you know, like goldilocks? Monitors just don't do a good job with fancy fonts. Wasting time on fonts is something designers like to do unless you stop them. Same with font colors, high contrast is readable, weak contrast is bad, and ONLY makes designers happy, nobody else likes weak gray fonts.

For a slightly different feel, I might use verdana or something. Or a monotype for my geek friends. But really, monitors suck compared to print, fancy fonts are and always have been a waste of time in my opinion, on web pages. Now, in print, real books, it really matters, and I actually care about that quality. But on webpages, no. No user will ever leave you page because he doesn't like your fonts unless your fonts are hard to read, look stupid (comic sans anyone), are light gray, etc. But that's off topic I think for this thread. All I know is I stopped thinking about them years ago, sure, a graphic logo, go crazy, whatever, but for html? nobody cares.

To me any focus on fonts beyond asking: is this clearly readable to anyone on any device, without insulting them by presenting them with grade school level font sizes forcing endless scrolls to reach the content you presumably actually want someone to read, or making the fonts so small that if you are not already blind, you will soon be if you try to read them, is a poor use of web developer time.

Focusing on features and content, now, that's a good idea. Working on content, page quality, data flow, navigation clarify, conversion analysis, programming, site speed, backend server reliability, etc, that's where you make a difference. We've run through hosting companies that loved knocking our site offline because of their technical incompetence, attachment to the script kiddie virus cpanel (which is the worst single thing I've ever seen or used on a technical level, nothing makes a clean relliable *nix server into a failing unrelaible ball of junk faster than cpanel in my experience, nothing is even remotely close), insistence on using clouds, then losing control, now we stopped all that nonsense, and use pro hosting with no kiddie tools, now our users get to see our site every day, day in and day out. Now, that matters. Fonts? not so much.

Usability? User feedback? All the way, how can anyone be so stupid as to ignore this? Which is my initial question, how does this happen? Who does this? Is this something that corporations are now doing in the same way they all got microsoft stuff? But if so, why do you see so many others do it?

"I'm in the wrong line of work.."Web psychologist" is apparently a lucrative way of selling antique cords and hawsers.."

We've churned through 'consultants' and I have been vastly amused to learn that really, there is no such thing as a web expert, for the simple reason that if you actually were one, you'd have a successful site and be making a cr@pload of money. Conversion consultants, hah hah don't make me laugh, we tried that, the best promised 10, 15% improvement, we're now looking at approaching 500-1000% improvement by becoming our own experts, in house, testing, analysis, standard deviations, a/b testing, you name it, we do it, all the hard boring stuff. Seo 'experts', don't make me laugh. Sure, we had gone down that route, ended up losing almost every site, permanently, that's not a mistake we'll make again. I now pay no attention to google beyond the very basics, like the mobile updates, etc, and things that webmaster tools whines about. Email marketing, same thing, if you were any good at it, you'd be rich, it's really not complicated. Now the grunt workers like me, we just make the stuff run, that's nothing special, as long as you do a good job it's fine, but it's not generally something that will make you rich.

Now, I could ask why my message in edit mode lines up in one word per line....
3:14 am on Oct 16, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:8765
votes: 704


@lizardx, check your my webmasterworld profile and set your edit preferences. :)

As for the rest, great comments, though I tend toward serif fonts, not sans serif for readability concerns (think book/body text). BOTH however, do work on the web quite well.

As relates this thread and the op exhibit, as I said above, complicated just complicates things. As ergophobe noted re: my "columns" comment RWD screws with that on smaller viewports.

We each seek good solutions. Ultimately, it really does depend on the content to be displayed, and the best way to display it.

As for the "large fonts" and "chunky images" I suppose someone, some where, was working on a small screen smart phone and kept hitting the wrong "link". :) In that regard I do pad some things for mobile... but only by a smidge, after all, you do want the CONTENT to be visible!
3:30 am on Oct 16, 2015 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 9, 2004
posts:137
votes: 13


My first love was bookman old style, heh. I still like it, but for paying work, we keep it clean and simple.

I also pad stuff slightly for mobile, but usually just enough to make it validate for google mobile tester, or if it's obviously too close, for my feeling for the site.

But you nailed: you want the content to be visible.

In some of the sites I mentioned, they went from, on desktop, a single view screen, all above fold, showing you ALL the current news, in one look, and if you went down 2, 3 screens, really all the news totally, to the bottom, to being so long you can no longer really even count how many screens you have to scroll to get to the end.

I had strongly resisted mobile until google forced my hand, but what really astounded me when I started dealing with it was how TERRIBLE the allegedly mobile friendly chunky stuff is and was. Not just slightly bad, but almost unusable. Whereas if they had just modified their original layouts and made them flow a touch better (note: this requires actually knowing css and html), they could have given mobile users as noted, at least 10x more information per screen. So that chunky thing is NOT for mobile users. I'm still trying to figure out exactly who it's for, as noted, if I had a seriously handicapped child, I'd appreciate a site made for him/her doing that, no question. And if the site was for grade schoolers, again, wonderful, they don't have coordination worked out yet, it's hard for them to get all that digital dexterity we take for granted.

columns are complicated, that's true, and I haven't found a great solution to that issue yet, though honestly, the way mobile real resolutions (the working px of display, not the px density, that is), are going, we're getting closer to the old 800x600 layouts all the time. In fact, I just had to tweak a feature because someone in the office testing it had a new device that actually had > 600px working resolution, which I had not expected from a mobile phone yet. At 750 or 800px, you can give two columns without any problem, so the column issue may actually end up vanishing in a few years as screens get bigger, though I'm not sure how much a screen can expand and still be a phone, I think they are close to that limit. But almost all tablets, except tiny ones, can be given desktop html/css, no problem at all. If wanted, give a bit more padding around links to make more touch friendly, but that stuff isn't rocket science, just takes some trial and error.

But the horizontal layouts? I hope to see them die in my time, that's like going back all the way to pre gui web, in my opinion, it's the biggest single reversion I've seen in the internet so far, unless you count flash sites.

"We each seek good solutions. Ultimately, it really does depend on the content to be displayed, and the best way to display it. "

What has struck me is that the best solution is NOT in fact being sought after, I believe what I'm seeing is a combination of libraries and frameworks that are a pain to modify, that actually create that clunky default look and feel. For example, when netflix went from their information rich layout on desktop to their clunky image junk, everything was harder to find and use. Nothing improved at all. Maybe, on tablets, where swipes scroll, maybe, but I dont' see any real benefit since before you had a lot more information per screen, ergo, no need to scroll endlessly.

I've found that really there is little difference between mobile and desktop in terms of what makes a good usable layout, sure, navigation works a bit differently, spacing is a bit different, but I haven't found much that required breaking the internet as we know it. There's nothing good about say, boxes that have an image and a link/blurb, that take forever to load and are hard to scan, nobody benefits that I can see. Unless people are actually getting more stupid, which is possible, I won't discount that, but it would be sad if true.
4:21 am on Oct 16, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:8765
votes: 704


There is a strange beauty in the return to 320px (early phone screens) as I was there when CRTs with that resolution were the best there was. Then 640, then 800 (which was really grand in my opinion, just enough real estate to do serious work, but not so large it became unreadable), then 1024, which most of us limited to 800. Then, BOOM, all these "wide" displays and resolutions out the whazoo and WEB MASTERS (or their developers) went nutz.

We then ended up with horizontal scrolling sites while the 800px screens still existed (and 640, too) and went through all those complaints. But this is just history... and is history repeating itself.

During that time we suffered table layout (whew! glad that is gone!) until CSS rescued HTML and made margins make sense again. But too few use CSS to constrain veiwport and thus ended up with fugly sites with text blocks too long to comfortably read.

Recent years RWD philosophy has rescued us again, but dang it, WEB DEVS still want to use all the real estate (without testing for it). How many do you know on desktop actually use the full screen (besides me, I'm half blind, not your normal user, and define my browser fonts and size.... currently using Bitstream Cooper LT as my font, which is a shade between Times Roman and Bookman Old Style, prior to that was using Bitstream Century Old Style, but that lacked too many UTF8 characters)? That's why I have several machines. One I use for myself, one or three I use to test what others see. But in all cases, for me, it is the CONTENT which is important. The user has to be able to see it and read it comfortably. In that regard I have been coding "mobile" almost since day one of the web. Why? PRINT. If web devs can put that one mantra into the brain web sites would improve over night.

Not likely to happen soon, but we do seem, over the years, to get there, or close to there, with each of the "fads".

Meanwhile, unless a webmaster has a burning need for any JS just do the Nancy Reagan: JUST SAY NO.
6:52 am on Oct 16, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15304
votes: 703


I use, usually, arial, sans-serif and call it a day

Interesting. So you don't care about the humans who are trying to read your text, and whose eyes and brains will rapidly get tired of sans-serif? Tough luck, if they don't like it they can leave? Your content must be amazingly interesting and important.
3:43 pm on Oct 16, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member ken_b is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 5, 2001
posts:5855
votes: 103


What font is this site using?
This 59 message thread spans 2 pages: 59