Beginner Web Design Mistakes | Hacker News Reader

Beginner Web Design Mistakes

blog.teamtreehouse.com

49 pointsnickpettit41 comments

> Modals and Pop-Ups - You’ve seen this before. You click on a link to a news article or a blog post, and a gigantic modal pop-up window covers the content. This makes absolutely no sense.

The first thing that popped into my head was Twitter, when you click on @someone and get a popup instead of just going to their full feed.

I actually kind of like that feature (if you can call it that). There are times when I am scanning through the feed and I see something interesting retweeted. I don't want to lose my place, but I am curious to see quickly who the person is that initially made the tweet. The popup is a quick way to do that without having to open another window or lose your place.

That's what the back button is for. I will take you back to where you were before you clicked a link, including scroll down the page to the correct position.

Unfortunately, it doesn't work with infinite scroll pages or other stateful types of sites.

Infinite scrolling is another thing that should be avoided.

Sites like Discourse allow for back button navigation on their infinite scrolls.

Unfortunately on Twitter and other infinite scroll pages the back button doesn't take you back to where you were exactly. The position gets thrown off based on the new tweets in the timeline.

Not on Twitter it won't, because when you hit "back", there's 65 new tweets at the top of your timeline, so your position is not the same.

And that brings us to another annoying thing newbie webdevelopers do. Infinitely scrolling webpages. Hate them. Breaks all my old habits with back-buttons, or leaving a webpage open in the browser for the next day to continue reading.

Let's be fair: it's a thing newbie (or newbie-minded) product designers ask for, which the web developers then implement.

A 'sign up for our newsletter' modal pop-up when the user first arrives on a website is not a 'beginner web design mistake' for one simple reason that even websites made by beginners can't ignore: They really work. People sign up in droves. Many people have tested it. It's annoying as hell, but the fact is beginner website designers should learn to make effective websites that work for businesses, not just pretty ones.

This comment needs an asterisk that I'm going to provide.

* Your results may vary. Actual numbers largely depend on how the popup is implemented (when it shows up, how often it shows up, etc). And even in the cases where you get increased sign ups, studies have shown that those who sign up via a popup have considerably lower engagement metrics, indicating that they signed up by mistake or they signed up because they thought they had to (note that a sign up, in-and-of itself is just a vanity metric with no meaning if it doesn't lead to increased engagement).

Our data scientist at Treehouse actually tested this extensively, but it's such a complex issue (lots of qualitative/anecdotal/branding evidence that's difficult to measure) that the results are still inconclusive. Basically, it helped us and hurt us in different ways, but the long term effects seemed bad enough that we stopped.

If after extensive research the worst you can say is that "results are still inconclusive," it is hardly a "beginner web mistake" on par with bad navigation.

I think the reason you included modal forms in your article is the same reason people are posting in this thread about them: you personally don't like them.

I would say that "substituting your opinion for testing" actually is a beginner web design mistake.

> I think the reason you included modal forms in your article is the same reason people are posting in this thread about them: you personally don't like them.

People not liking them is a form of qualitative data. That's the feedback we received from enough people to decide that it was damaging our brand long-term.

Ayup. And it's also a great flag that your content likely sucks, and I really don't want to examine your site.

Seriously, if I get a modal popup, that is the last time I go to a site. If I happen to get one twice, the site goes into the blocklist.

They work on clueless and naive people.

If that's the audience you're after, cool.

That audience is some huge percentage of the internet userbase, because some huge percentage of people are "clueless and naive." So people who want to just make money off a widely read website would do well to do what works. Just like how in the mobile gaming space irritating pay-to-play/in-app-purchase driven "games" are the money makers, and people who make games in order to make a lot of money should probably make a game like that.

Well, everyone has to make their own ethical choices.

Personally, I don't need the karma of annoying the customers, regardless of how much it may seem to work in the short term. I mean, you might as well be Zynga if you're going to do that.

No company survives in the long term by annoying and/or abusing their customers.

Don't be a drama queen. Just because you "think" something doesn't work doesn't mean it doesn't at all.

I know it doesn't work with me.

Also, whether it "works" or not is completely orthogonal to whether it is ethical. Reading: it matters.

This is simply not true. Sure, you'll get signups from people aren't actually in your target market (clueless and naive), but at the margin you'll also get signups from people are intelligent and high value prospects that wouldn't have otherwise signed up if you weren't aggressive about offering it.

To deny the potential value of x by categorically defining all the people who you think would respond to x is ignorance at best and most likely just hubris.

You'll lose the people who click the back button the second one of those gets in their face and never return.

Hubris? Sure, if you want to call it that.

Personally, I think that expecting a person to sign up for your site based on no evidence whatsoever is pretty damned hubristic. The message I get is "WE ARE SOOOOO FULL OF TEH AWESUM THAT YOU WILL WANT TO GET SPAMMED BY US DAY AND NIGHT!"

Yeah, good luck with that.

Note that I wouldn't mind nearly as much if the site was clever enough to noticed that I'd looked at 15-20 pages (or whatever) and THEN asked me if I wanted to sign up. But it's never that way. It's always right on the front page, before you can even SEE what's on the site.

There's not a chance in hell that I'll sign up for something like that.

A related blog post - http://socialtriggers.com/annoying-popups/

This article is a good example of content created only for the sake of SEO.

Not really. Treehouse is a learn-to-code training tool for beginners. A blog post about typical beginner mistakes is pretty relevant to the Treehouse audience.

Definitely +1 for both "Thinking Too Far Outside the Box" and "Mysterious and Complex Navigation." I experience way too much of each on a regular basis. A message I try to drill home is "people don't come to websites to be wowed, they come to either learn about something or buy something."

Just out of curiosity are there more options than that? I don't think I'd lump Imgur or Tumblr into either of those categories.

Edit: entertainment. Thought of it on my own...

Web Design Mistake: maybe don't use a 794,03 KB image on the top of your article?

Web Design Mistake: Display no more than 9 lines of text to your visitors because you managed to fill the rest of the screen with a persistent bar at the top, a persistent SOSOCIAL bar on the side and your clickbait links on the other side: http://i.imgur.com/ruiBvN3.png

Yeah, cause a 480px vertical on a desktop design is completely relevant to modern web development. /s

Protip: you don't have to snark every. single. article. Lay off it already.

Clicky the (x) to remove the "persistant" top bar.

Try the mobile version. After it's loaded (huge image?) it seems reasonable. But that huge image make me wonder what other beasties lurk in the page.

Two of the five "mistakes" aren't always mistakes. Popups often work really well, as pointed out in another comment by onion2k. Long-form sales pages (i.e. walls of text) also really work in many contexts. Sure you want to execute both of them well, but the basic ideas aren't necessarily mistakes.

Two others strike me as not really an issue or too vague to know whether it was an issue. Do beginner web designers really never use any padding and just cram everything next to each other, pixel by pixel? Can't say I've seen it. And are they really thinking too far outside the box? What would this even entail?

I'll give them navigation issue, but I can't say they offered much insight for beginners to actually work from and improve their navigation.

If the page is for something I want to read, then a wall of text is perfect.

If the page is not something I want to read, then there should be less writing, but also why are we having a disagreement about what's on your webpage if I don't want to read your content in the first place?

If you're looking for a well-rounded education along these lines, two books I'd recommend checking out are "Don't Make Me Think" and "The Non-Designer's Design Book."

"Every beginner web designer and developer has done this one (myself included). They feel compelled to fill the page with interesting information and stuff for people to look at and click on."

Great point.

When you design a site, you should already have a solid idea of where you're trying to get a user to go and then use strategies to lead them there. Overdoing the front page with buttons and modals and shiny things that move doesn't help in that regard.

Probably the first and most valuable lesson in design.

This works fine if you don't have a marketing team to answer to or a CEO who's sister has just got 3/4 of the way through her JQuery class at JC and "has some ideas".

Also, this blog post comes from the perspective of a single use website. Treehouse, build a website. AirBNB, rent a pad, etc.. There are corporate websites out there with multiples of sub-companies and 100s of different product offerings all competing for space.

Putting up a full screen image and a button that says "Get Started!" is the easy stuff and isn't what I would consider the definitive example of good web design.

Interaction is no substitute for information.

-- Me

I agree. The fullscreen background image, 10 words, and call to action button don't make me want to sign up for your product. If I can't find details about your product within a few seconds, I'm gone.

Yes, content first web design is good web design, not superfluous decoration.

I'll add "menu navigation that relies on mouseover".

Reply on news.ycombinator.com