A couple of weeks ago, I wrote about the importance of creating a great UX (user experience). And after I got about halfway through that piece, I realized I’d gotten the cart afore the horse by not delving into the UI (user interface). So we’re gonna back the train up a bit and look at the basics of creating a proper UI today.

Imagine you’re hunting for a new home and you’ve found the perfect neighborhood. Generally, the next cut is that thing called ‘curb appeal.’ I think it’s a GGO that if you don’t like the look of the outside of a house (UI), you’re not gonna open the door to see what’s inside and find out what treats lie in store to make this the home for you (UX).

But with real estate, there’s a wildcard that we don’t have with websites – the realtor. Someone to tell us the outside’s not so great, but you should see the inside. No Timmy, we only get one shot. If our UI doesn’t entice our visitors to open the door, it’s pretty much over before it begins.

Drawing the eye

As I mentioned in UX, the user experience largely appeals to our emotional selves. The UI, on the other hand, speaks more to our logical side. There aren’t a whole bunch of layers nor honeycombs nor upwards of nine psychological principles to take into account. Nope. The UI is a lot more straightforward. It’s all about curb appeal.

And again, every time you sit at your computer or pick up your phone or tablet, you are quietly bombarded with multiple interfaces. Everything from the keyboard to your mouse, to your ‘swipe’ settings, to your desktop to every application and app you open. Today, we only care about websites and our interactions with them.

What makes a good UI then? I dunno Timmy. Well, I thought I knew. The more I read, the more confounded I become. Studying on such things alters my reality in unnatural ways and makes my head hurt. So I’m gonna stick with what I know. And we’re not going to examine the 32 design elements that at least one person finds relevant. This is more of a 35,000-foot view.

As I’m wont to do, my first suggestion is to keep things simple.

Avoid clutter. Nobody wants to feel like they’re looking into the junk drawer at their parent’s house. Most people like order, at least to a degree. They don’t want to have to rummage around through a bunch of dead batteries, shoestrings, bits of twine, broken screwdrivers and old keys that fit nothing to find a charging cable for their phone.

First impressions

Of course, simplicity starts at the top. Logo on the left. Yeah, I know some think that positioning is staid and stuffy. Fact of the matter is that while you may think that, it works. Overwhelmingly, studies show that a left logo is way more likely to be recalled than a logo sitting on the right. Appears that’s what we’re accustomed to seeing. But if you wanna buck that trend, have at it. As far as centering a logo, I think it’s okay for mobile devices as things get responsive, but until the burger menu shows up, I’m disinclined to let a logo drift to the middle.

Remember too that your logo is a key navigational tool that lets users return to the homepage quickly and easily. Given that, this is one case where the “left” convention might be a good one to follow.

While we’re on the topic of navigation, let’s try and keep that simple and clean as well. I shared my thoughts regarding menus a few weeks ago, and I encourage you to give that piece a quick look. If you take a couple of minutes to read it, once again, you’ll see a common theme.

Hand-in-hand with the navigation up there at the top is the search field. Where should it go? It can go in the top left or top right. Apparently, it works equally well in either location. And this is where I get confused. The same people who told us to put our LOGO in top left are saying it’s okay to put the search box there. So what is it oh great gurus? By the process of elimination, I’m goin’ on record to say it’s gonna have to live in the top right section. So there.

The smart money also says that it should be a field and not just a link like the little magnifying glass I opted to use on this site. Smart money be damned! I broke the rules for a reason. To avoid clutter. Sometimes you gotta give something to get something else. And I stand by my decision. Pffffbbbtttt smart money. So maybe do as I say and not as I do on that one Timmy.

Showing your artistic side

Of course, another big piece of the UI is your choice of colors. You can pick any of 16 million. Wooohooo! I’ve heard old-timers talk of “web safe” colors. All 216 of them. Of course, in tech years, that was like the WWW’s Pleistocene Epoch Timmy – seen through the eyes of creatures like Netscape, AOL and IE. I’m told if you tried to escape from that woefully small palette, things began to get weird and you were likely to get a dreadful case of the dithers.

Now, with 16 million colors at your disposal, you’re probably only gonna use like six or seven. Yet another pyrrhic victory for graphic designers. A couple three from the primary and secondary colors spec’d out in the branding document, and maybe an accent color here or there.

If you’re feeling a little frisky and want to go rogue and come up with something completely outside the company’s color scheme, you’re on your own bucko. Pretty sure someone is gonna step on your hand before it goes too far. Using corporate colors reinforces the brand, and that’s a pretty big deal.

And it segues me nicely into this paragraph where I’m gonna talk about the UI and consistency. Which brings me back to however many of those 32 design elements that you decide to use in your design. The ones that I said I wasn’t gonna examine. Not individually anyway. No matter how you set the tone, be consistent using the elements of your choosing.

A button on one page should look like every other button that has the same function on every other page. CTA prompts should be conveniently and consistently placed. Accordions should look and act the same wherever they appear. If you use supplemental sidebar navigation, make darn sure it stays put and shows up in the same spot on every page. To the pixel. Do my OCD proud.

Oh. And then there’s the devil’s playground. Carousels, galleries, testimonials, sliders and such. They are truly something to be reckoned with when it comes to keeping navigation dots and arrows in a fixed position where our users can readily and routinely click things to move backwards and forwards. Suffice it to say when the content of those beasts differs in length, breadth or depth, there’s gonna be a lot of CSS come into play. From a developer’s perspective, not so much fun.

And what about the concept of “above the fold” you ask? While there’s some debate as to whether this is still a thing as 2023 is just around the corner, I’m going with yes, it’s still a thing. Here again, curb appeal. If you can’t grab your guests’ attention pretty quickly, they’re liable as not to jet. Nobody wants that. Although it’s not always possible to get your best content all above the fold, give it your best shot. Seems people are easily distracted. Get their attention.

Words are part of the design, too

On to typography, typefaces and fonts. Think of typography as the grandparent, typefaces as the parents, and fonts as the kids.

Typography is the overall appearance you create using leading, kerning and spacing employing specific typefaces like Helvetica or Merriweather. Fonts are variations of the typeface – specifically weight, size and styling. All working together to set a style that I truly believe can make or break your site.

I absolutely love this part of the UI. Choosing the right typeface can be a challenge, but for me, it’s a blast. While there are thousands of them out there, one or two will usually jump right out at me when I’m working on a design. Then working with them is just plain fun. Of course, we don’t always get to play in the typeface sandbox because that branding document I mentioned earlier probably dictates which typefaces are permissible. Although if you’re persuasive enough, you can sometimes make the case that the web is different and draconian rules need not apply.

So what about serif versus sans serif? I used to be a proponent of using a serif typeface for body copy. Serifs were created for a reason – to guide the eye from letter to letter. But everyone told me that using serifs for the body copy makes a site looked dated. To me it matters the typeface used, but Timmy, I’ve learned to pick my battles. And for me, this one is just not worth the fight.

And we also have options concerning the alignment of paragraphs. Left, right or justified. Probably 90% of the time left-aligned is gonna be the best bet. There are occasions when right-aligned works nicely as well. If you’re insistent on justifying your content, well, we simply can’t be friends anymore because friends don’t let friends justify text.

For heads and subheads, the sky is open as far as I’m concerned. Whatever works and fits your overall design. Unless there’s a branding doc. Wuf. Or you’re thinking about using Comic Sans. At that point, we’ll question everything you’ve ever done and petition the courts to revoke whatever font licenses you might possess.

Don’t break the flow

Last, but certainly not least is the overall layout of your pages. And all the things I’ve said about every other thing in this piece matter. Consistency, lack of clutter and just keeping things well-organized in a logical flow. And despite what some pundits are proclaiming, I don’t think horizontal scrolling is a trend anyone in their right mind should adopt. They claim it has its place. But it flies in the face of everything I hold dear, so no, not in my backyard.

We want to make it easy for our guests to get from A to B and beyond. We don’t want to distract them. We want to gently lead them to our intended destination.

All that being said, I truly believe following these guidelines will pay dividends. People will spend time on your site and enjoy the time they spend. And that will likely lead to conversions. There is no great UX without a great UI to get the ball rolling.

Welcome to your new home Timmy.