Well Designed Websites

We’ve all used websites that just don’t make sense.

A great example is BuzzFeed where the site is so busy, you don’t know where to look:

 

 

It can be difficult as a user to navigate if we as designers don’t make the process super simple and draw the eye. What do I mean by “draw the eye”? I mean, that we need to know what our goal is on the site. Do I want them to click on a button to signup for a newsletter? Then make sure their eye is pulled to the button. In the example above, do I want them to read the story? Because my eye is pulled to the hot pink banner and then the article. But we also need to think about the screen size. This screen shot was taken on my large monitor. How would it look on my phone? What ads would be popping up to distract me? Do I want them to see all the ads or something else?

Here’s one example I came across the other day.

Women Who Code just launched a feature to create a profile on their site. I thought it was a great idea so I figured, why not?

When I went to create a profile, I noticed this:

 

 

 

If my profile is “private and only visible to and WWCode HQ” then what’s the purpose of a profile?

Why am I being asked to create this?

What value is in it for me?

 

Let’s say I go with it and decide I want to edit my profile. Building forms that are intuitive and simple to navigate should be easy, yet many companies get it wrong. This form looks nice, matches the brand and has all the essential information they determine is valuable. But something isn’t right. Can you spot it?

The form is long and there are a lot of questions that I’m not clear why they want to know. Noticed how much details I skipped!

When I got to the bottom though, I stumbled a bit. I was done with the form, but couldn’t figure how how to save.

Oh, the Save Profile button was anchored to the bottom. Take a look again.

 

 

 

 

Which means that as I’m completing the form, the Save Profile button easy for me to see when I first start and can save whenever I’m ready.

At the bottom however, I found myself wanting to click on the square box that said Portland for my location. I thought it was a button!

They both look like buttons to me.

 

So what would I do to “fix” this? I think the simplest solution is to just take the border off the Portland box. By removing the border, I can clearly still see the x which signifies to me that I can remove this selection.

There is value in having the Save Profile button anchored to the bottom. As I mentioned before, it’s great if I just want to make a quick change and not scroll through the whole page.

To solve this, I would probably add a Save Profile button at the bottom of the form. This might also mean that once my view has reached the footer (and in return the new Save Profile button) the one that is anchored is no longer needed so I would hide it.

This seems to make so much more sense to me. What do you think?