Menu
Blog design isn’t only about appearances; it includes how users interact with the content and the other elements in your blog. In today’s article, I talk about user interface design, why we as bloggers should pay attention, and then we take a look at the 7 principles of user interface design that you can keep in mind when designing your blog.
Imagine going into a website and seeing something like this:
You’d click the Close button so fast, your visit probably won’t even register.
In today’s competitive blogging environment, the real challenge is to stand out, not only in terms of how valuable your content is, but how appealing and presentable this content is and how easy your content is to access. This is where a good user interface design comes in.
There are core user interface principles that you can apply to your website design to ensure a great user interface design that presents your content and takes users through your website in the simplest, easiest way possible. This affects user experience, which is a factor in deciding whether your readers stay to read your content and even go back.
In today’s blog post, we’re going to discuss the 7 principles of user interface design for you to keep in mind when you’re finalizing your blog design.
User interface is the way a user interacts with a website or application, and user interface design is the process of creating interfaces with a focus on presentation and style.
It may seem frivolous or minor in the scheme of things. After all, the substance of your blog (i.e., your content) should be more important than the appearance (i.e., your website design).
But your users’ experience also matters. It decides whether your users stay on the site to consume your content or bounce off to go to another website. It also decides whether your users go back to your website or never go back.
As a blogger, you’ll need to focus on designing your website so that your readers will find it functional, efficient, and smooth-running. The less your readers consciously think about scrolling through your content and navigating your website, the more they’ll immerse themselves in your actual content.
User autonomy refers to the amount of control your user has when interacting with your website.
When you force them to do a certain action before they can access the content they want, or display a popup page that you can’t get around, or they don’t know what’s happening in the background, it’s not a good user experience. It’s human nature to want to feel in control of themselves as well as their environment.
On the other hand, you don’t want to give users too much freedom. Users like making choices for themselves, but they don’t like doing extra work if they can avoid it. Take advantage of default actions and information that the majority of users would have reasonable knowledge so that you still have some semblance of control.
For a simple example, if you have a contact page on your website, instead of making them type out different ways to contact them back, create a dropdown with the options “Email,” “Phone,” and “Other.”
Being straightforward in both your content and design will go a long way.
Providing direct ways to accomplish whatever your reader wants to accomplish should be a top consideration when designing your website.
For instance, if they want to search for anything within your website, they should be able to do it in a single click. If they’re in deep on your website, they should be able to go back to your homepage in one click as well. Posting comments, sharing content, and going to a related blog post should also be doable in a click as well.
At any place in your website, the following should be perfectly clear to the user: what page you came from, which page you’re on, what actions you can take, and what will happen when you take action.
Your readers spend most of their time on other sites. As a result, their knowledge when they come on your website is a combination of their experiences on other websites. Anything that they’re used to doing on other sites will be ingrained in them.
If you deviate in any significant way from what users are used to, the lack of consistency makes it difficult for them to concentrate on your content, gets them frustrated, and turns them off.
By contrast, when your website feels familiar, readers will feel more comfortable staying on your website and looking around to see what you have to offer.
For instance, when you’re displaying links to other posts in your own website or other websites, the usual behavior is to display these links in blue, or any other color that’s distinct from the rest of the text. If you merely underline the text, the typical user won’t understand it as a link.
Aside from being consistent with the functionalities of other applications, your interface elements also need to maintain consistency throughout your website.
That is, if you’re using a particular font, layout, color scheme, icon set, and other interface elements, make sure that ALL of the blog posts and pages in your website use the same elements. Otherwise, you may have a scenario where your user clicks on an internal link, only to encounter a page that doesn’t look the same and they’re left wondering if they’re still on your website.
One way to ensure consistency is to organize your user interface in a predictable structure. Here are some ways of implementing a structure on your website:
Define a distinct visual hierarchy. The most important elements on a page should be bigger and bolder, while the less important ones should be progressively smaller.
Align all elements in a coherent manner, preferably a grid. You’ll want to direct your readers’ eyes on a clear path such that they’re not confused which elements they should be looking at first and where they should be looking at next.
Group related elements together. Users’ eyes automatically associate elements that are in close proximity. Use this to visually demonstrate relationships between elements.
Use a consistent color scheme and font typeface combinations throughout the website. Using different color schemes for pages around your website will only result in confusion. When your readers encounter a page on your website that looks different from any page they’ve seen before, they’ll understandably be confused.
The effect of different fonts may be less pronounced, but still there, nonetheless. Ensure that these noticeable elements are consistent throughout your website.
Let’s make it clear: users will make mistakes on your website.
Your interface needs to be able to “forgive” your users’ actions; that is, your user interface has to allow them to undo and redo their actions to reduce the impact of their mistakes. Allow cancelation and editing functions when applicable.
Also, your input fields such as text boxes and phone numbers should prevent errors from user inputs so that you don’t need to display error messages, saving them time.
For instance, when your text box only accepts 200 characters, limit their input to just that, so they don’t submit it only to get an error message that they’ve exceeded the allowed number of characters. If you’re asking for a phone number, restrict the field to 10 numbers for local and 14 numbers for international ones.
In addition, before proceeding with a major action like posting or deleting a comment, or a similar undoable major action, it’s advisable to have a confirmation message pop up just to make sure they didn’t just click the button by mistake. You can also add the capability to undo actions.
Being lenient on your users isn’t pandering; it’s to enable them to slowly learn from their mistakes and become more confident using your website.
Imagine telling someone to do a certain task and never knowing if that task will ever be done. Or imagine you’re the one told to do a certain task and never knowing whether you completed the task, let alone if you did a good job.
This is how important feedback is in daily communication, and your website is no exception.
When there’s no feedback, your users are left wondering: Did your website actually catch that mouse click, or was it busy with something else and it ignored the click? Did the item get added to their cart? Did the request go through?
Feedback for your users’ actions serves to make them aware of the current status of your website (e.g., if it’s loading, working on a process, etc.) to allow them to decide which action they want to do next.
Design your website so that your users are consistently and instantly informed of background actions as well as any results or progress of actions they initiated. This makes users aware that there is something is happening in the system.
Both positive and negative feedback should be present on your website. When users do a positive action, or if their action was a success, let them know through an affirmative confirmation message. On the contrary, when they do something incorrect or interrupt a process, they also need to know through a clear, informative error message.
Feedback becomes a little bit more complicated when your users need to go through a series of steps to accomplish a goal.
An example of this is online shopping. Users have to place an item in their cart, check out, input their payment method, billing and shipping address/es, and double-check the information before they place the order. Make sure that you provide feedback for every step of a multi-step process.
As much as you don’t want a beautiful user interface that’s unusable, you also don’t want a functional user interface that’s an eyesore.
It’s called user interface design, after all. You want both substance and form in your website.
Here are some aesthetic considerations to keep in mind during the design phase.
Choose your color scheme thoughtfully. You can strategically use color to evoke emotion, convey messages, and emphasize important elements.
Color schemes can be complicated to fully discuss, but it’s generally wise to use a 3-color scheme: 2 coordinating colors plus 1 contrast color. A contrast color is one that’s strikingly different from the background color you’re using, and is used to highlight important elements or text.
Consider your niche as well as color psychology to learn what subconscious message and feelings you want to evoke in your users. For instance, if you’re blogging about eco-friendly, zero-waste living, you might want to look at green and brown hues, for the earth. If you’re blogging about workouts and exercise, you might want to look at red hues to inspire action.
Some useful websites that can help you choose the right color scheme for your website as well as your contrast color are Adobe Color CC, Sphere: Color Theory Visualizer, and Paletton.
Pay attention to your typography. The fonts you select can make a huge difference in whether your users are able to easily consume your content and understand it.
The usual type of font used in webpages is what’s called sans serif, which is preferred over serif fonts because sans serif fonts are generally more legible and readable on screens. Below is a comparison of two commonly used serif and sans serif fonts.
Despite this, some websites use serif fonts, specifically for headings and subheadings, as they lend an air of importance to the text, similar to the effect of serif fonts on newspaper headlines.
Select your icons carefully. Icons are elements that serve as visual cues to direct readers to important parts of the page, represent an action, or as substitutes to buttons, as well as to add to the visual appeal of a page.
When shopping around for icons, first ensure that they go well with your color scheme. For instance, icons in simple black and white lend a classic, elegant look while going with almost any color scheme. You can also have custom icons made by a graphic designer so that they follow your color scheme, though this will cost you.
See to it as well that the icons you use describe exactly what their functions or fields are. Using symbols that don’t exactly represent their function may be hip and cool, but it’s going to be confusing for your users.
For instance, conventionally, a clickable house-shaped icon will take you to the homepage, a clickable magnifying glass icon will take you to the search bar, while a non-clickable letter icon beside a text box is asking you to input your email address.
Use beautiful images. Your content is the meat of your blog, but images catch the eye and adds to the appeal of the page.
Whether you’re selecting a header image for your homepage or a featured image for your blog post, use high-resolution images that goes well with your color scheme, and most importantly, reflects the essence of the content in that page.
Inserting images within the text is also advisable, but don’t insert them gratuitously; images should serve a purpose, such as add another dimension to the written content or break up the monotony of a wall of text.
Design an interface that looks great in all devices. When designing your website, it’s best to use a responsive theme so that your website remains viewable in other devices, such as smartphones and tablets. Make sure you periodically check how your website is displayed in other devices while you’re designing.
“Keep it simple.”
Easier said than done, isn’t it?
A simple user interface design that allows users to achieve what they want to achieve in the most straightforward way possible. When the user interface is designed around user goals, the less complex it’s likely to be.
For instance, the main goal of most of your users who visit your blog is to read your articles. Examples of secondary goals are commenting, sharing your content, and signing up for your mailing list.
Here are some ways to apply simplicity to your user interface design.
Reduce visual clutter. It’s tempting to cram as much information as you can in a page, but it’s going to be counterproductive. Any extra element in a page competes with the important information that you want your readers to see and makes it fade into the background.
Emphasize the one or two important elements or actions on the page that you want users to focus on.
For instance, SmartBlogger’s homepage directs users’ attention to the orange button, which links to a sign up page for a webinar. All the other actions are only secondary to the main action and are relegated to the periphery.
Notice how there aren’t any unnecessary information on the homepage to take your attention away from the main action. There’s the call to action, additional information, and a hero image.
The websites where SmartBlogger has been previously featured in are also there, but they’re almost faded into the background, indicating that they’re just additional information and that they aren’t essential.
Apply progressive disclosure when you can. Progressive disclosure is a technique that involves showing the user only the minimum data required for them to proceed.
In case of the SmartBlogger homepage, the only visible action is the button, aside from the navigation bar. Scrolling down reveals more information, but only a limited amount is visible at a time.
It’s not just compelling content that will make your reader stay; the design of your website is a major factor as well. If your website isn’t readable, has too many distractions, or hard to navigate, your website is driving your users away.
Hopefully these principles help you design your website for maximum user satisfaction.
A peculiar characteristic of great user interface design is that it goes unnoticed by the users you designed it for.
It may feel like a waste of time to polish your user interface design when your users won’t even notice it.
But the goal of user interface design is not just to prettify your website. The main goal is to have your users can focus on their own objective on your website and not have to think about your interface.
It is not enough that your website works; as we’ve extensively discussed, how easily your readers can use your website and do what they set out to do is also critical to the success of your website.
So aside from testing the basic functions of your website, also test your navigation, scrolling, and going from one function to the next if users can do it smoothly and with minimal interruptions or distractions.
Did you follow these principles when you were designing your blog? Did this article inspire you to redesign your blog? Share your thoughts in the comments!
JoAnne is your average, everyday, sane stay-at-home mom who believes in the power of the internet to make dreams come true. She has an insatiable appetite for chocolate, as well as all things internet marketing. She keeps up with the latest trends in blogging, affiliate marketing, e-commerce, and more.
