Button UX design

I think half of the buttons that are used these days as the main call-to-action on a web page don’t invite me to click.

You could and should test button design. But with all due respect, sometimes you don’t have to test to figure out what the best practice is. Button design has changed a lot over the past decade, right? The current trend seems to be to blend a button into the design. Yeah, that will make it stand out.

button UX design - creating awesome buttons

Note that not every button is a designated call-to-action. Sometimes you just need a button, like in your comment form. Nevertheless, that button should look like a button! In this post, I’ll discuss five types of buttons and give you my opinion as a full-time web surfer on these.

Default buttons

I found a really nice article on how to style buttons for your 2004 website. I think default buttons should be just that. Ancient, old, and in a museum. Not on your website. I hesitate when I have to fill out a form that has that old styling. It makes you wonder whether the form is safe and your data won’t be collected by Nigerian princes with loads of leftover lolly. It’s default, it’s a button, but come on, you can do much better than that.

Flat buttons

Flat buttons are like colored squares or rectangles with words on them. It might be a banner or could just be emphasized words. I know flat design is very popular and a lot of you designers out there like the button that fits the design, and stands out by color. I think we’re going to look back on this 10 years from now and wonder why we used these. Not saying flat buttons are wrong per se, but I like my buttons to look like buttons:

Design of flat buttons

The first one (top left) is the flat button that looks like a banner. I even used 234×60 pixels -remember that banner size? The top right one is a slight improvement. Rounded corners make it look a tad bit more like a button. The bottom left one is even better: a raised button. The shading indicates that it is possible to click. And for conversion reasons, I’ve added some additional trust to the last one. This probably works when it’s the main call-to-action on your website, but is unnecessary for form buttons. I’d rather add a nice testimonial below these form buttons to enhance trust.

Ghost buttons

In the post I did last week, these were mentioned related to ghost banners. Ghost buttons seem to be the no-go button for UX designers at the moment, and I understand why. UXMag has some great examples of ghost buttons. I especially like the Integra example, as that website actually looks impressive, almost game-like. Here’s a still:

Ghost buttons on Integra Real Estate showreel

Feel free to click to that website for an impression, but the bottom line is that there is this showreel of moving images behind the focused text on the homepage, making that ghost button ‘Showreel’ indeed look like it is telling you what is going on. You’re looking at a showreel. I think that isn’t a bad practice, to tell people what they’re looking at, but it is actually a button. It starts sound and more video. All looks awesome, except for that one tiny ghost button…

One-state buttons

There’s a second element that is important here. It’s not so much about how the initial button looks like for the visitor, but it’s about hovering a button and finding that nothing changes. Is it a button, or perhaps not. Now I have to click to find out if that thing that looks like a button is actually a button. Hm. People tend to hesitate before clicking and using one-state buttons without a designed hover-state will only make them hesitate more.

Adding a hover-state can be as simple as underlining the words on your button, or changing the background color. Or both.

The best buttons

There is a nice, simple round-up of button best practices on Blogs.adobe.com that I’d like to combine with the one on DesignExcellent:

  1. Make it look like a button (size, shape, color).
  2. Add a clear message of what happens after the click.
  3. Mind the order and position of buttons.

Bonus link: How button color contrast guides users to action.

The first item in the list above summarizes my point: a button is a button. Not so much a design element. Button UX design is about recognition and clarity.

While writing this post, it struck me that we don’t follow some of these best practices to the letter on this website as well. That varies from links that look like ghost buttons to buttons that look like quotes, like this one:

There is always room for improvement. When you would review your own buttons (or have us do that as a part of our site reviews), start with the ones that matter most, like the buy button on your product page or the subscribe button for your newsletter. And keep in mind that not everything is a button or should look like it.

Feel free to share your opinion.

Yoast.com: redesigned

As you can see, our redesign is now live! This summer we worked hard to complete it and we’re extremely proud of the result. Of course, we changed our design for a reason. Years ago, Yoast.com was “just” a blog, now it’s much more and our new design reflects all the sides of our business better. As soon as you enter our homepage you can see we do a lot more than just write informative blog posts. Watch my video below to learn more about the most important changes and why they happened:

New site structure

This redesign didn’t just change the design and visual appearance of our site. Our site structure got a complete overhaul as well. This is most obvious in our menu. You can find two new items in our top navigation: Academy and Software.

Academy

We’ve already announced Yoast Academy, so if you’re a regular reader, this shouldn’t come as a surprise. This is the section where you can find our eBooks and courses (the first of which will be launched October 12!).

The redesign means we now have two different kinds of blogs, as I mentioned in the video: we have an SEO Blog (which is where 90% of our old content lives)  and a Dev Blog. The SEO blog will be a part of the Academy section. This blog will be the blog where we write our “usual” blog posts about Usability and Conversion, General SEO, Analytics etc.

Software

This is a new top-section that houses sub sections like our WordPress Plugins page. Since we’ll also have a Drupal module (and probably others ;) ) and are not focusing solely WordPress anymore, this has changed to Software. Here you can find all our WordPress plugins and our Drupal module.

Alongside our modules and plugins, this is also the place where you can find the new Dev Blog. This is a blog where you’ll be seeing a lot of Omar, Rarst and others. It’ll be much more technical, we’ve moved some of our recent posts, like the recent API breaking changes post, into that blog.

No more publications

In the redesign, we’ve removed our Publications section. We’ve concluded that our articles (such as our WordPress SEO article), were nothing more than must-read blog posts. And that’s exactly what we’ve made them, in order to improve the structure and logic of our site. This new “class” of must read articles will appear at certain sections and pages within the site.

New functionality

There’s one bit of new functionality that I wanted to highlight, especially because it’s been requested so many times:

Yoast shopping cart

We now have a functioning shopping cart on yoast.com! This means that you’re able to add products to your cart, continue browsing and easily find your way back to complete your purchase.

New artwork

And last, but most certainly not least, we have new artwork. Most of you have probably already seen screenshots of what to expect, but as of today you can admire Erwin’s work live. We have several huge illustrations, like on our homepage, software page and academy page. We also have icons for each of our plugins now. You’ll see more and more new images and icons appear in the coming months. This artwork replaces our avatars, or mostly, my own avatar that was shown in various shapes through the site. Yoast is much more than just me now, employing 30+ people. We felt showing my head on every page was no longer an accurate reflection of who we are, hence this change.

No more WordPress themes

This new design also lacks a particular menu item: we no longer sell WordPress themes. Our themes were never a big part of our business, and we’ve decided we should focus elsewhere. Everyone who has bought a theme and needs support will of course get support for the coming years.

Have fun exploring!

That’s all we have to tell you. Make yourselves at home and start exploring the new site. Have fun!

 

This post first appeared as Yoast.com: redesigned on Yoast. Whoopity Doo!

The evolution of Yoast avatars & we’re doing a redesign!

Pin it
Over the years, our avatars have evolved quite a bit. Paul Madden created the first avatar, back in 2007. A few years later, I asked Erwin to improve upon it and he ran off with them. He created many, many avatars. First of me, later on of the entire, rapidly growing, team. Below is an infographic highlighting that history, about which we’ll talk more at YoastCon.

Yoast redesign

At YoastCon, we’ll also talk about the next step of the yoast.com design that Mijke and Erwin have been working on. The avatars will stay, but they won’t be as prominent. Now that Marieke, Thijs, Michiel and the rest of the team are all so important for the growth of Yoast and it’s obvious that it’s not just my work, it’s time to take my head out of the header. At YoastCon, either live or through the livestream, you can see us unveil the next iteration of our site design!

For now, enjoy the infographic Erwin and Mijke created:

The evolution of Yoast Avatars in an infographic

The Evolution of Yoast

2007-2010

In the early days of Joost’s consulting career Paul Madden creates his first avatar. Joost quickly learns it makes people recognize him in discussion threads. The avatar turns out to be a perfect personal branding tool.

2010-2011

In 2010, Joost starts his own company: Yoast. The company focuses on website optimization.

Joost asks Erwin Brouwer to update the original design by Paul Madden and expand upon it. More and more avatars make their way into Joost’s presentations, replacing stock imagery.

Yoast.com changes in 2010 as well. The new design is a lot cleaner and removes the windmill and with it, the first iteration of the Joost avatar.

2012

2012 is a hallmark year for Yoast in many ways. Joost hires Michiel in the beginning of the year. Several other people follow at the end of 2012, Mijke, Joost’s brother Thijs and illustrator Erwin.

In August of 2012 another new site design launches, featuring avatars in the header on every page.

2015

Yoast grows from a single person to a team of 21 in early 2015.

Every team member gets a personal avatar. The avatar style keeps developing and the process of making them gets more streamlined by the day. The latest avatars are more rounded and detailed in comparison to the first series.

The making of Yoast

Erwin makes all avatars in Adobe Illustrator, making them easy to scale. Every avatar has several layers to make adjustments possible and easy to do. The final artwork is then saved as an optimized png-file to make them easy to load.

This post first appeared as The evolution of Yoast avatars & we’re doing a redesign! on Yoast. Whoopity Doo!

Headings and why you should use them

This is a republish: we’ve made some minor changes to it. We decided to republish it, because this post and its content are still applicable and important now.

This post just had to be written. Somehow we have a chapter about Headings in all (!) our site reviews. Usually the website owner can’t change a single thing about the heading setup of the website, as he is unwilling or just lacks the knowledge to change the theme of the website. But headings do matter.

There are two ways headings can structure your content. In classic HTML, there would be 1 H1 tag on each page, maybe a couple of H2’s etc and these would all combine to form an outline of the entire document.

In HTML5, each sectioning tag (for instance <section> and <article>) starts again with an H1. This was done to make it easier to combine several components onto one page and still have a valid outline. It makes sense from a clearly theoretical perspective, but it’s lots harder to understand and we generally recommend against using it. This article explains what’s “wrong” with it.

Structuring the entire page

In the case of HTML4, it seems logical to use one H1 per page, of course being the main title of that page. In most cases, that’s not your brand name or website name (on your homepage it probably is, and that’s fine). On this page on yoast.com, it’s “Headings and why you should use them”. That is what this content is about. I’m not going to talk about Yoast here, so no need to make that the H1, right? Here’s what Matt Cutts has to say about it:

On a category page that H1 would be the category name and on a product page the product name. It’s not that hard, indeed. That is why we still recommend using the H1 this way.

H2 is for subheadings of that H1. Use it to divide content into scannable blocks; both Google and your visitor will like it. H3 is for subheadings of that H2, preferably. Sometimes I use H3 for blocks that should be H2, but just don’t hold that much information for the visitor, like the closing heading on this post, where I will ask you to comment on my statements – perhaps you don’t agree and we could have a nice discussion about that ;-)

I want to emphasize that this all isn’t new. Over the last six or seven, maybe even more years, not much has changed in the way we recommend using headers.

Without headings, it is all Chinese

Without headings, it is all Chinese

What I dislike most, is when people use headings to style certain elements of a website. “Call us at 0123456789″ and use H1 to style the phone number. Your web designer knows better than that. Have him add a class to your CSS file for that. Even Google’s SEO Starter Guide mentions this. Second, when people just squeeze an entire paragraph in an H2 or H3. That happens more often than you think. Sales pages or landing pages love that practice. We don’t.

Look what headings we found in the attic

Have you used any H4s, H5s or H6s lately? Alright, using an H4 could be useful if your text is longer than a 1,000 words and you want to add an extra layer in the page structure. And the H4 could be used for sidebar or footer headings that don’t include that keyword you want to rank for, but any other use of these headings seems unnecessary. Funny thing is that a lot of themes just did not pay that much attention to these headings as well, sometimes making H5 text smaller than paragraph text.

You should style them to make them look more important than regular text, but don’t overdo this. These headings are extras, I think. Used in the early days of the internet, but more and more useless these days. I wouldn’t mind if we would get rid of at least H5 and H6 altogether, to be honest. Using three, four headings at most is structure enough for me.

Headings and SEO

You are going to ask this: what value do headings have for SEO? Well, we feel that the value is less than it was, but headings still help Google to grasp the main topics of a long post. As mentioned, Google might scan your post as well and why not make that as easy as possible?

There are other things like great content and schema.org markup that will help your rankings more than a great heading structure, but in the end, using a nice heading structure isn’t that hard and helps your visitors as well. So please, at least use a heading structure and the way we described it above is easy enough for everyone to use.

What are your  thoughts on headings?

As promised: we are really looking forward to your thoughts on headings. They should be in any theme, but to what extent? Drop your 2 cents in the comments!

This post first appeared as Headings and why you should use them on Yoast. Whoopity Doo!

Easinet

This site is for a Whangarei ISP which contracts Urban Legend web to provide website development and design.

The aim was for an effective, fast-loading, and simple design, as befitted the state of browsers at the time, and an emphasis on content.

It uses a flash animation on the landing page, and contains copies of newspaper articles for new computer users.

Hello !

You’re reading this, which means that Urban Legend web has re-launched its site.

This occasionally-updated page will feature;

  • tips and tricks for non-specialist website content managers – i.e. those who want to update their own sites. Most of these will be to do with WordPress. This site itself, and some clients’ sites, are built on the WordPress engine, so it makes sense for the above-named tips to lean toward working with WordPress.
  • news snippets related to the web and web design
  • occasional pointers to interesting sites, and observations.

Check back here for updates.