A few weeks ago, I went to my first proper WordCamp, in London. I went as a designer, and I wasn’t expecting to learn very much, but spoiler warning: I was wrong. In this post, I will explain why going to a WordCamp is worthwhile as a designer, why WordPress needs more designers, and how designers reading this can start applying their skills to the WordPress design right now.

Wordcamps are not just for programmers and bloggers

You may have noticed I said ‘proper WordCamp’ in the opening, because technically my first one was WordCamp NL last year, but I’m not counting that one since I only went because Yoast had a booth there. And back in 2016, I didn’t think I had much business being at a WordCamp neither. Not because I thought I knew everything, but precisely the opposite; I hardly used WordPress. I wasn’t writing content, I just used it to upload comics I had drawn. Terms like conversion rate and cornerstone content didn’t mean much to me. It all seemed very technical. And especially the thought of contributing to the core of WordPress seemed very daunting (even writing my own theme took me ages). But WCLDN17 proved that I was wrong about all these things. 

For good SEO, you need a good user experience. Learn about UX & Conversion! »

UX & Conversion from a holistic SEO perspective$ 19 - Buy now » Info

There has never been a better time for design to shine

Almost a year after WCNL16, I became the UX designer at Yoast. I still didn’t know all the intricacies of WordPress, but I was using it a lot more, making sure our stuff integrated well and looked good. So maybe I could get some value out of a WordCamp this time around? I wasn’t sure yet. But off I went to WCLDN17.

Looking at the schedule, there were a lot more talks about design and UX than I had expected; Crispin Read talked about the value of testing and hard data over opinions; Sarah Semark talked about how modern web design all looks the same (and why); Graham Armfield talked about how some simple design measures can make sure your site is accessible to almost everyone; and Dave Walker‘s talk was especially interesting to me, because he’s also an illustrator using WordPress. It was clear that design was coming to the forefront, and rightly so.

This was all good info for me to apply at Yoast, but that I could be of value to WordPress was an unexpected discovery during Contributor Day.

WordPress needs designers too

Contributor Day is meant to focus the attention of everyone at a Wordcamp towards improving WordPress in some way. Naturally, I sat down at the Design table, and there I met Tammie Lister. She is a UX designer at Automattic – that’s the company behind WordPress.com, Akismet, Gravatar, WooCommerce, and Simplenote (which I drafted this in!). She was easy to talk to, and very enthusiastic about design. But more importantly, she had prepared a few simple tasks for us to tackle that day. It made my entrance into the whole WordPress ecosystem pretty smooth.

My chosen task was to make a mockup for the mobile image editor; Something had gone really wrong in there, lots of overlapping panels and redundant buttons. By simply designing a fix in Photoshop, I helped move this problem closer towards being solved.

In doing so, I started to understand why Tammie kept wishing that more designers would start to look at WordPress itself. There are many design issues like this hanging around, waiting for a designer to solve them. Doing so may not seem like a big contribution, but WordPress is used by nearly 80 million sites – that’s almost 30% of the web. So whatever you end up doing, it’s guaranteed that at least a few people are going to be happy with it.

And I can understand why designers maybe don’t flock to this calling. Getting started can seem daunting – I was a prime example of this mindset. If that’s you too, then read on, I’ve outlined three simple steps to get you started.

Ways a designer can start improving WordPress

If you use WordPress and like designing interfaces, these are some quick ways to combine those two passions:

1. Go to a Contributor Day.

This may seem like a big first step, but I promise you it’s not. You’ll get set up way faster than you would at home by yourself, there are tons of people who can help, and everyone is super nice. I would have never known where to begin if it wasn’t for Tammy’s guidance. There are tons of WordCamps all around the world, so guaranteed that there is one near you and within your budget. If not, perhaps you’re lucky like me and your company works with WordPress, get them to send you out to one!

2. Join the design channel in the WordPress Slack.

I could tell you to go to make.wordpress.org/design, but to be honest that site could use a UX update itself. No, I feel like it’s better just to get in touch with the people on the frontlines of WordPress design on Slack. Slack is a chat app, and you can join the WordPress team on there by going to this page. And when you’re in, simply introduce yourself in the design channel and ask how you can help, and somebody will get you started.

3. If you’re not a designer…

…show a passionate designer some of the issues on this list. Hopefully, there’s a good chance they’ll get triggered to fix these little design problems. Sometimes even just posting feedback is enough to get the ball rolling again. Together with this article, I’m sure they can take it from there.

Bonus: Submit design tickets

If your own projects are keeping you busy enough (and I can relate), here’s a really simple way you can still help out: for every weird design issue you encounter, just make a ticket on the site I linked above. Leave the work to others, but at least let them know what they should fix. You’re helping them out, and when they fix it they’re helping you out. Everybody’s happy.

So if all this has motivated you to contribute your design expertise to WordPress: great! I hope to see you at a WordCamp or on Slack someday. Together, we can make WordPress even better, for everyone.

Photo by the talented Pradeep Singh.

Read more: ‘WordPress Core Contributions’ »

The Parrot Place Kerikeri

This site is for a thriving wife-and-husband business in Kerikeri, http://theparrotplace.co.nz, a bird park and breeding centre also selling pet products online.

Their WordPress-driven site had been using an outdated e-commerce system. Urban Legend converted it to the now-standard WooCommerce, which streamlines product management for the site owner, and vastly improves site useability for visitors.

We designed and coded the new theme, which went live in June 2016, based on the business’ colour motifs and logo.

Have you ever monitored the viewing pattern of people visiting your website? This is the pattern in which people view, in this case, websites. There are a lot of ideas about this out there. Now I’m wondering: is there one ‘right’ pattern? Can we somehow turn all the results of research about this into one optimized website? In other words: is there one pattern we should follow when designing our product and landing pages? Unfortunately, it seems there isn’t one ‘golden rule’ for this. These kinds of patterns are subject to culture and education. Most probably the patterns are also vastly different for languages that are read from right to left. And of course, it could be different for men and women as well.

That doesn’t mean studying the behavior of your visitors isn’t interesting. Your target audience might be a specific group, consisting of people that follow one of these patterns. Which means you can optimize for them.

Optimize your site for search & social media and keep it optimized with Yoast SEO Premium »

Yoast SEO: the #1 WordPress SEO plugin Info

Viewing patterns

There are numerous patterns out there. The aim of this post is to shed some light on these and help you recognize them. The most important ones we found, or what I feel are the most common ones, are these three:

  • The F-Pattern
  • The Gutenberg Diagram
  • The Z-pattern

The F-pattern

This is probably the one most people know. As the name already infers, the F-pattern suggests that people’s viewing pattern of a website is similar to the shape of an F:

Viewing patterns: The F-Pattern

Image source: nngroup.com

Users will view the top content of a page horizontally first. After this, their view will go down the page, and they’ll view another part horizontally. However, this area of horizontal viewing will usually be smaller than the top viewing area. Users will end up just ‘scanning’ the left side of the page’s content (best shown in the middle screenshot).

Now this F-Pattern is very different from the next two viewing patterns. It focuses mainly on the left reading line of a site, whereas in the Gutenberg Diagram and Z-Pattern the user ‘finishes’ at the lower right corner of a page.

The Gutenberg Diagram

The Gutenberg Diagram suggests that people are subject to a ‘reading gravity’ that goes directly from the top left of a page to the bottom right:

Viewing patterns: Gutenberg Diagram

Based upon the image found on vanseodesign.com

Users will start at the top left of a page, and end at the bottom right of a page. However, they don’t do this by viewing everything: the Gutenberg Diagram suggests that users go there in a straight line, almost just scanning the page.

To make things more complicated, the ‘Axis of Orientation’ is from left to right, making the top right area more likely to be noticed, and therefore stronger, than the bottom left.

The Z-pattern

Like the F-pattern, the name of the Z-pattern already gives away its meaning. It suggests that people view a website’s content in the shape of a Z. The pattern is also known as the inverted S-pattern:

Viewing patterns: The Z-Pattern

This viewing pattern presents a more engaged reading path. People viewing a website like this will see every part of the website. The start and the endpoints are the same as in the Gutenberg Diagram, but the top right and bottom left will not be disregarded as easily.

Nick Babich has written a clear post on UX Planet about this Z-Pattern you should read.

Other viewing patterns

There are several others, but for the sake of keeping this post readable, we’ll only mention them. They all have great similarities with one of the patterns explained above. There’s the Golden Triangle Pattern, which is very similar to the F-pattern. And there’s the Zig Zag Pattern, which is basically just a lot of Z-patterns underneath each other. This is usually a viewing pattern for the most engaged form of reading: people searching for something specific.

Learn how to structure your site well with our Site structure training! »

Site structure training Info

Structure and hierarchy

There are a lot of patterns and a lot of ideas of how people are viewing websites. But what can we learn from all of them?

We’re inclined to believe that the way people view a page is dictated by the structure and hierarchy of that page they’re viewing, as well as personal preference. This idea has been around for ages. In fact, Researchers concluded the same in 2004, saying:

The present research confirmed previous work in that individual characteristics of the viewer as well as the stimuli both contribute to viewers’ eye movement behavior.

So, viewing patterns could mean something when people are viewing a website that lacks a clear hierarchy. But as soon as you add focus and hierarchy to your website, people will start following that hierarchy. Several other researchers all reported similar findings.

The ‘structure’ of a page is made clear by the ‘viewing heatmaps’, as we’ve seen with the F-pattern. A lot of these studies focused on search result pages, which are already content heavy on the left side. So people will obviously view the left side of those pages more. However, if you add a ‘heavy’ or large object, whether textual or visual, to the right side, people’s eyes will almost certainly be drawn to that. So, how you’ve structured the design of your page will direct how people view your page.

In our post about image SEO, I mentioned that images should be aligned to the right, or should be full-width, to maintain the left reading line. This makes perfect sense if your visitors follow this F-Pattern. By the way, in all patterns, images can be directives for that viewing pattern, as also highlighted in this post: Visually direct and captivate your visitors.

Similarities

All these patterns are, in their basis, very similar. So similar, in fact, that UX Movement reviewed the Gutenberg Diagram without discussing the axis of orientation, which makes it a clear Z-pattern.

The patterns have different names, but you can’t ignore the fact that they all start in the top left. And from the top left, they move to the right. This is either the top right or bottom right. We shouldn’t need research to know that, because most people in the western world read from left to right. There is a reason your favorite webshop’s titles and buy buttons follow that viewing pattern!

What should we do with this information?

My advice to you is to have a clear structure on your pages, with a clear hierarchy. Don’t let yourself get distracted too much by specific viewing patterns, and definitely don’t read too much into them.

The best way to go is probably to have some people, who are representative of your website’s visitors, work their way around your site. This will give you far more insight than generic patterns and/or studies like the ones mentioned above. Every website is different; every audience has its own characteristics. Find out what practices fit your website!

Read more: ‘About headlines and taglines’ »

The post Demystifying Viewing Patterns appeared first on Yoast.

This portfolio site is for multi-disciplinary designer Elisa Cachero, and shows her design work in textiles, art direction, print & web design, and event planning.

It uses the WordPress engine with the popular portfolio theme Autofocuspro . Urban Legend web was contracted via wpquestions.com to update that theme so that;

  • the front page displays in the way usually used for category pages
  • the number of posts shown beneath the feature image on the home page is limited
  • copyright information can be included on single post pages which use the JQuery image slider
  • the default ‘next’ and ‘previous’ post arrows on the front page are hidden
  • show front-page post titles only on mouse hover

Via the wpqestions.com site, I’ve now worked on a number of WordPress autofocuspro installations, and invite further queries relating to that theme.