We Like Big Buttons & We Cannot Lie: User-Friendly Design Tweaks for Your WordPress Website

Posted on Updated on

At 9:15am on 4/28/2018, I attended We Like Big Buttons & We Cannot Lie: User-Friendly Design Tweaks for Your WordPress Website, Presented by Andrea (Andi) Ferguson of AndiSites in Chapel Hill, at the 2018 Raleigh Wordcamp Convention in the Engineering Building I of North Carolina State University in Raleigh, NC.

We Like Big Buttons & We Cannot Lie: User-Friendly Design Tweaks for Your WordPress Website

Whether you’re designing a new website or updating an old one, user-friendliness is key. Large fonts, big buttons, and strategic color motifs make calls to action obvious.

Help users take the actions you want them to. Help website users be happy. Happy website users convert to happy customers. Happy customers help your business thrive.

Keep It Intuitive

Websites should be user friendly to keep sites intuitive. Remove frictions

“Don’t make me think “Steve Krug

A very short, user friendly book. Lots of photos and an easy read. There is an updated book as well as “rocketsurgery made easy”. People don’t want to think and suss things out. make them happy to like more and communicate more.

3 Easy Tweaks

  1. color tweaks
  2. call to action tweaks
  3. font tweaks

How to watch paint dry. It doesn’t matter for the content, applies to all websites. What is it you really want? On this page, download the e-book. True, everything is interesting. So GET THE GUIDE will be importatn

Color Tweaks

color is emotional. it gives us looks and feels, and color attracts. Our big, beautiful monitors can show it all. In bird world, the boys get the colors to attract the ladies. Ladies protect, so they need to be not noticed.

see color emotion guide graphic

There are also other reasons- facebook is blue becasue founder is color blind. It does matter on the site.

Slides will be online

Start with one color

use one color and be consistent. that way when one color is shown, we know that we should be doing something. so how to come up with that? start with a color logo. The logo is at the top and sets the page.

our logo is big, but non-colored. So, we are freed. Images are the next step here. We see color and lots of variety. consider starting here and using the steps as a way to begin. Powder blue here is nice, but does not call us enough. We see orange in the dress and paint, let’s use that!

Find accessible color.

http://colorsafe.co

Allows us to see the colors against the backgrounds. You can begin with default options and generate a color palette. We choose orange, and a red-orange #ff4500. Red is the first color we see as babies, and the first color received to those recovering with brain injuries. When we return to the site…

color change slide

Applying the color to the click button, the links, and the navigation bar. Everywhere you see the orange you have a job to do.

tools

  1. coolors.co/app generate palettes
  2. http://www.canva.com/color-palette  create palettes
  3. color.adobe.com enter colors and rules of creating color materials

Calls To Action Tweaks

these are essential to convert customers. Consider the Hot Now sign at Krispy Kreme. The website will show you where stores are but also which ones are Hot Now. We want to be that enticing.

Why size matters

57 pixel touch target is the suggestion, but 72 pixel touch target is the minimum size to search. Google touch target smashing magazine. Thumbs are bigger than fingers, and your website should be thumb-accurate. the point is not the size as much as the idea- make thing bigger than you think they need to be.

4 Rules of Easy-to-Click Calls to Action

  1. Make it Big
  2. Make it Bright
  3. Give it Room
  4. Make it Obvious

Change the button text on any item. Submit isn’t bad, but if you have the opportunity to label the button with exactly what will happen, that’s the goal

Font Tweaks

Typography Tweaks are essential for professionality and in websites to ensure that sites are quick, easy to understand, and accessible to viewers.

  1. Choose two fonts: heading and body
  2. Make body text big enough for older eyes and smaller screens
  3. Make headings noticeably bigger than body text
  4. Keep case consistent

Keep your items, even your tags in the same case. Things in different cases are inconsistent. Any “hey, that’s weird” thinking keeps viewers from engaging fully in your site. You may tell your client “Trust me, this is what you need”, but you have to deal with that.

Fun With Fonts

  1. http://www.myfonts.com/whatthefont this can identify fonts in a logo, or get close with font matching suggestions
  2. http://fontpair.com this has great google font pairings that you can use
  3. https://fonts.google.com 877 font families that you can easily use without download.

Sometimes searching in google fonts on your own is the warmest, snuggliest rabbithole you can every find yourself in. Google fonts can grant access to many fonts with just a minor bit of code. Theme options allow google font usage now. Take the extra step in the theme options and find the font dropdown. Its worth your time.

Google fonts can also be downloaded to your computer to use in your print branding as well.

APPLY TYPE PHOTO

All we’ve done is change type. By raising the nav size, we have visibility. by using the heading fonts, we have a cooler, curvier text font, and its applied all over the site consistentyly

FROM THIS

TO THIS

This will not assure that people are more excited about watching paint dry, but they’ll like it more

This site is live at http://howtowatchpaintdry.com and the ebook is about best practices

 

Q&A

Black backgrounds and white text? Federation for the Blind tell us that white type on black background  is good. Users find this to be tiring.

Color Wheels, how can I use them? nature is a great way. Though you may not be the best person to discuss that, the decision for color use and how should be a big conversation. Colors which replicate the logo is great. Those off will seem jarring at least a little. Color is subjective, but there are rules. Look to where the eye lands first. Make time to change the colors, but in the end, keep it simple. Consider lighter color for hover (20% opaque)

Popup Calls to Action- What’s your thought? The ones which appear at the bottom. The ones which block the sites are annoying, everyone hates them- except clients. Bars which show up, and slide ins for the corners (bloom by elegant themes) are surprisingly effective. They can be triggered at 60%. The chat boxes are pretty effective and can be called to stop those from leaving the site.

Chunking information by color? The old website for one client was info heavy. By using color systems to enhance existing sites, the journey through the sites has colors

Client wants something but it won’t work? Translate what the client says into design language. Funnel them into making a choice. Keep reinforcing at all times. Never say “what do you think” because they have to say something wrong. Keep the review team small. Remind them that the site isn’t for them, but for their customers. come armed with data. I love that the Aqua t-shirt from 7th grade resonates with YOU, but for the client audience range, this really resonates:… The more info you can provide, the stronger your position. Say “that sounds like personal preference”. Know why you’ve done everything you’ve done.

Body copy: Serif or Sans Serif ? Now that monitors are better, we can have a print-like experience on the web. We see the same research out there. Its long established that body copy on the web should be sans. If using serif, make sure your line-height (1.6em) or leading should be spread out far enough, and line width? Man, we could geek out on that all day. Traditional knowledge still applies. What’s the brand? Is it important and to what degree. What does the audience like? There is a ton of emotion in typography. Talk with your designer.If the client is snooty, be snooty.

Justification? Trends fly all over the place. Don’t center your type or I will cut you. When in doubt left justify.

Premium fonts vs. Google fonts or other free fonts. We have some that purchase them, but google fonts are free. Locally installed fonts do not show always. Google is free with fonts available anywhere. SOme clients have strict standards, such as NCSU. Anything in-house must use Univers. There is a commitment, and you could be in for a yearly fee, and the fonts could easily go away.

Body size? 16px is the standard for modern design body size, and you can adjust from there. Scale up from that point. It used to be 12 but people weren’t looking on their phones. What font looks good at 90 characters? Make a choice and stick to it. Just adding color and changing the font make a difference.

Can we cache fonts? You’re querying google, and its not slow. However, the fonts are loaded at the browser level, not the server level. If you’re finding that the websites hanging, it could be several scripts are using the same ram

Ghost buttons? unused. you can still use one as a 2nd call to action, but keep the main one at all times.

Andrea Ferguson

Andrea (Andi) Ferguson is Founder & President of AndiSites Inc., an award-winning web design and development firm based in Chapel Hill, NC. AndiSites specializes in WordPress, including design, development, support, and maintenance. With 20+ years’ experience in project management, 12 years’ experience in corporate communications, and 10 years’ experience in web design and development, Andi knows what it takes to give clients an effective website–while they enjoy the process. Andi is a WordPress expert who loves sharing knowledge; bringing technology down to earth; and making the web a friendlier, more open, more welcoming place. Andi is also a film/TV actress (as Andrea Powell) and avid world traveler with husband/writer Paul, sweet dog Teddy, and rebellious bunny Dusty.

Advertisements