Good website design tips -six guidelines

A good experience for your visitors -website design tips!

Good website design don’t need to be as complicated as it sounds. Even if you use WordPress templates there are some guidelines to bear in mind. You can almost always change things by customizing your template and style. Most templates are created to follow conventions for websites and that is a good thing. I will tell you more about that later on in this post.

To help you get a design that supports usability I will describe 6 guidelines to be taken into account. I have chosen to mention factors that influence the readability and also how to design your page to support users to understand and find things on your website.

good website design

Readability guidelines

Headlines
Use headlines that guide your readers. The headline should give a hint about the content. It also will be easier for your readers to find what they are trying to find on your website.

Descriptive link names

Descriptive link names are exactly what it sounds like. The links, like the headlines should guide your readers. It’s not fun to click on a link that just says “click here”. It better to say what it’s all about, like “read more in
this post about website usability”.

Support scanning

Most people don’t read the content of a webpage. They scan it. That means they look for words, images or phrases that interest them. If they find out what they are looking for they will probably find out more and stay for a while. I do this all the time. It makes it a lot easier to find what I look for and I can “read” a lot of content in a short time. If the content supports scanning…

Use colors wisely

Colors are wonderful and make us happy, or? When it comes to readability there are some simple rules: light text on dark background or the other way around. You get the highest readability when writing black text on white background. It might sound boring to know that but it will help your readers to read your content!

Page design guidelines

Signs and clues

Use signs and clues to guide your readers in your site. Ensure that it’s obvious what is clickable and what is not. You can find out when you do usability testing. You can compare with a city, where street signs tell you where to go and helps you get your way. It’s the same on a website. Signs should be easy to find and the meaning should be clear. Like “comment here” or “follow future posts” and also that buttons look like buttons (things you can click on) and also that links looks like links. Use categories to help your readers to find relevant content.

Conventions

Conventions are called that for a reason. When you are using a computer, for example, you expect the keyboard to look in a certain way and the same goes for the mouses and screen. There are conventions for websites too:

  • Logo in the upper left corner.
  • Titel on the top of the page.
  • Navigation (menu) mainly across the top of the page or to the left (or right).
  • Content to the right.
  • Hamburger icon is often used for menus in mobile sites or apps.
  • Here is also clues important: a shopping chart looks like chopping chart. A trash can like a trash can and so on.
  • Fields for address and other information, comments and so on looks similar on most sites.
  • Buttons should look like buttons and links like links (underscore and often blue).
  • Links should change when you hover over them with your mouse pointer.

These are some things I think you should not change, people are used to it and if it’s radically different they might not know what to do and leave your website.

I hope this is helpful for you! Most of the templates have the navigation guidelines in mind. But in some cases you can do a lot of changes, do it wisely and your readers will love it:-)

Do you know more things that are important to have a good design on a website? Please leave a comment below!

Share This:

What is User Experience?

User Experience is everything” (Don Norman)

We experience things all the time. When we work, eat, celebrate Holidays, spend time with our kids and also when someone close passed away etc.

In a time when more and more time is spent online we have begun talking about what users experience. Today we use tablets, smart phones and computers a lot and it will result in higher demands on usability and experience.

user experience

The term is greater than “just” usability, it includes everything you experience when using something (a site, a system, a phone): and is affected by the usability, user interface, design, and graphics. A site with excellent usability is fantastic but it will not give warranties that the users stay on the site. We really don’t read the content when we are looking for something, we scan it. If the keywords or graphics don’t appeal to us or if the usability is bad we will leave.

The most used function in the web browser is the back button? I think this tells us something about User Experience, right?

Videotime

Here are some wise words from a wise man that worked with design that fit humans for many years, Don Norman:

 

Don Norman -The design of everyday things

Don Norman is kind of a “guru” for designers. I can definitely recommend this amazing book, written by him:

If you have some hours to spend on a book about design, this is the one! It begins with some examples of bad design and the frustration it creates. The book is not just about websites and apps. Its about every day things we use and. It’s also about Human Computer Interaction and contains examples of bad design that makes you feel frustrated. When I read the book I exactly know what he means! One example is how Stove controls are placed according to the burners they belong to. It’s not that clear on all stoves witch control goes to which burner. This is a case of bad mapping, which also is the case on many websites. Navigation or buttons is placed where the user has no idea what they do. This might create a negative experience because the user gets frustrated.

The rest of the book are about humans, psychological factors, and how to create things that don’t create frustration when used. He goes through seven design principles, that he is rather famous for: affordances, signifiers, mapping, feedback, conceptual models, discoverability and constraints. The purpose is to connect design with humans and their abilities and needs.

So what do you think? Is there a possible connection between “the real world” and the “online world” when it comes to design principles? Please give your opinion in the comments field below.

Share This:

How to design a good user experience?

Tips for improved user experience when designing a site or system

User experience or UX is today in every company’s vocabulary. And everyone wants to create great UX, of course. Is it easy done? How are you aware if the user experience is good?

There are some important aspects if you want to give your users a great experience on your site. But there are no exact rules or “perfect process” to do so. Experiences are individual and to create an experience for other people (our users), we have to look at our site from the users point of view.

We often have a tendency to look for the perfect process, the process that will fix all problems. We tend to concentrate on the process. When we work with UX, we need to focus on the people, our users. Our sites and systems should be designed to solve problems, not create additional problems.

This might sound obvious, but how do we succeed if experiences are unique? It’s not possible to satisfy everyone, is it? You just have to start with your goal and your market: who are your customers/users? You can do a great deal for a great user experience and it all starts with your users.

To find out about what your users need or expect from your site you need feedback from them. When you design a site or system or maybe make improvements, as soon as you have something to test or show make prototypes! You can use online tools like:

All tools above have pricing plans but you can try them for free. I prefer InvisionApp, but all tools above are rather easy to use.

I do prototypes to get feedback on many things: navigation, layout, functionality, how the site “feels” and so on. You can make several prototypes to check different things. If the goal is to get feedback on navigation and functionality it might be enough with handmade sketches, you do not have to make perfect drawings of all details for that. You save time and can move on developing extra things for your site.

I know it can be hard to take time for prototyping but I have worked in web projects and system development projects where we have spent numerous hours correcting things when the project is done. Things that our clients weren’t satisfied with. It has ended up as an expensive experience for us and some irritation of the clients. With an iterative design and development process you can avoid this and get closer the expectations when it be the time to deliver.

If you do your own website, I think you can save time and have more returning users if you ask for feedback before you publish your site for the first time. It might be feedback on your design (layout), market or usability. I written about usability testing on this site in an earlier post, read more in the post “usability testing on your blog“.

Usability is important for the user experience, so is beginning with the users and to work with continuous improvements.

Share This:

Are there any good reasons not to do usability testing?

Are there reasons for not doing usability testing? If you have been reading other posts on this site I think you might answer no. There can be several occasions when you should not do usability tests.

Of course you should do usability testing, but think twice about what and how to test, it takes time and you engage other people.

Be sure to test the things you need to test, with focus on improving the user experience:)

I will go through four reasons that is important to take into account before you decide to do a usability test. Your intention is to test the right things, right? And you does not have all the time in the world to spend on testing? You don’t even have a lot of users that are willing to do a lot of testing? If that is the case, I like to point to some factors you should take into account before you begin testing.

  1. Don’t perform tests to get  confirmation on things you already knew, it’s waste of time. Sounds obvious but it’s not unusual.
  2. Be clear about what you wan’t to test. Testing everything on the site gives few answers on a lot of questions. It’s better to do several smaller tests, with focus on different parts or functions on the site. It gives more concrete input for improvements.
  3. It’s great to hear what users think about your colours and photos but it might be more important to focus on the process of completing a purchase and other functions on the site. Visual impression is important to but it should not be the only thing you test and get feedback on. Build your test on core functions on your site, things that “is the business” on your site.
  4. How do you know that your improvements work if you don’t test them?

I hope you found some value in this post and that it is useful for you when you wish to improve the usability on your site. You should do usability tests, but not for the reasons above. You can read more about usability testing here.

If you have some ideas of your own to complement this list, please leave a comment below. I look forward to get your input:)

Share This:

Usability testing on your blog

On your request: usability testing for bloggers

A lot of comments have discussed usability testing on a blog site and I will try to help you with it in this post.

Why should you do that on your blog? A lot of people who commented on my posts are writing about their own blogs and about usability. I think it’s important to consider usability for any site that has visitors!

I mentioned in earlier posts that it’s important to know your users (and readers). On a blog, your readers are also users and have needs.

They visit you blog for a purpose, they are looking for an answer or to find tips about something. When they arrive, they should not have to look for the information they need.

This sounds great, doesn’t it?

Many of you might see usability testing as a huge process that will take time and effort. A blog often has few pages: Home, About, blog posts, contact and maybe some pages to showcase products you sell (photos, art and so on). A visitor comes to look for information on a certain topic.

I think you will be prepared to meet your users if you consider the five factors for usability I described in an earlier post:

  • Discover
  • Placement
  • Clarity
  • Clues
  • Feedback

These factors all relate to each other and are all part of the site’s usability. These are the basics and I’m going to explain them a bit and how you should consider them as related to your site.

First of all, is your content easy to find on the site? Is there a way to contact you and to subscribe?

Navigation should be easy to find and it should be obvious which objects are for navigation. Functions and objects that relate to each other should be placed close to one other. For example, share buttons and the content they are supposed to share.

It’s important that the people who visit your site get clues about what’s going to happen when they navigate or click on something.

How to find out?

Of course, you can look at these factors yourself. But it might be important that you know a lot about your site.

It’s not a big deal to do a usability test for you site. I recommend you to start with the people you know, but they should not be familiar with your site!

Ask friends and family members to do a usability test for you.

How to perform the usability testing?

To start, set up some tasks. They must be things that you think users want to do on your site. For example:

1) Find a specific answer to a question.

2) Find a specific blog post about carrot diets

3) Find a photo that have a “seascape”

4) Follow you on Twitter

5) Share a post

Begin the test

First, let your test person begin by looking around your site. Ask him/her to “think aloud,” which means to say what they think (for example: “where are the share buttons”).

You can check if navigation is easy to discover and if related functions are placed close to each other.

Is it obvious what different functions do or how you get to different pages?

If your users are going to order something or leave the site, are they given information about it?

Observe what he/she is doing and saying and take notes.

When they are finished looking around, head over to the tasks you prepared.

Observe again and take notes. I usually ask the test person if it’s OK to make a video recording of the test session. That makes it a lot easier to get everything. You can go back as many times as you like:)

The test should not take a long time, I think that “Guerilla usability testing” might work as well if you prepare yourself with a laptop and goes to the local café, if you feel comfortable with it!

Why should I do this?

I think the answer is because it favors your readers/users. We are all closest to ourselves and I know that you will be surprised when you see another person using your site. It’s common to think: “why is he or she doing that?” “Can’t they see how it should be done?”

And that is why you should do it! Returning visitors will be familiar with your site, but new visitors might leave if they don’t figure out how to do what they intended to.

I hope this is useful for you. Please feel free to ask questions below:)

Share This:

Involve users through the design phase

Steps to involve users from the start

I think it might be interesting for you to follow a design project where the focus is on how to involve users to create better usability.

Right now I’m working at an IT-company and I’m also a full-time  student in my second year. I study (as you might have guessed) usability, digital design and user experience design. And during my workdays I’m a project manager handling IT-development projects. Which is a great way to apply my knowledge in real life.

Here I will introduce you to a project from school. We have just started and the goal is to make a user centered design (UCD) process. The users are going to be involved through the whole process.

How do you find the users’ needs? We had to focus on an area where people have an interest or hobby that takes a lot of their time and the goal is to design a mobile application.

My target group is people who are interested in Harry Potter (Potterheads ).

To find out more about what they do, I met some Potterheads and asked them, not what they expected from an app, but what they like to do. They list these activities:

  • Reading and discussing the Harry Potter books
  • Watching the movies
  • Writing their own stories about Harry Potter (fan fiction)
  • Visiting events and places where the movies took place
  • They like games about Harry Potter
  • They try to live a Harry Potter lifestyle

I have also visited a huge number of communities and blogs about Harry Potter to learn more.

I created a mind map that helped me to organize the activities.  As you see, it does not have to be fancy or take a lot of time to create.

From this, I created three “personas.” Personas are representations of your key users. They are suposed to help me focus on the target group through the design process. Read more here.

I ended up with a PACT-analysis, which means describing the People in the target group, the Activities they like to perform, the Contexts where activities take place and what this requires from the Technology.

The last  two thing to do in this start up phase was to:

  1. Describe the purpose: to support Potterheads in their activities and help them get larger communities with a focus on genuineness and the experience
  2. Describe the goal: design a mobile application that encourages interaction and helps Potterheads to meet, discuss and play games.

This is where I am right now in the design process. I will continue my travel and I hope you will be a part of it. Please share you thoughts and tips below.

Share This:

Example: Guerilla usability testing

Usability testing at  a cafe

Boris Masis, Google Developer Relations Program Manager gave a ”show and tell” about “Guerilla Testing with Usability Cafe,”  an example that shows that user testing does not have to be a time consuming activity. And you will save time in you project by performing usability testing, and as I said in my last post, the earlier you do the usability test, the better (click here to read the whole post).

He mention in the clip below that it’s important to offer the test persons a small treat.

An interesting take away from this video is that you can find up to 85 percent of usability problems by observing five  people who use an app. It might not work the same way with a more complicated systems.  What do you think? If it is a system that performs a lot of different tasks, I think it could take more than five people to test it and more time, but when it comes to an app, I think this is fun to watch and that its a good point.
Enjoy some usability testing out in the wild 🙂

 

Share This:

Usability testing -an important part of the process

How to perform usability testing?

When you design a new website or a new system, the user should be “on your mind” all the time. You might ask: when is the right time to do a usability test? To get the best usability possible, it’s important to test as soon as possible. It’s much harder to make changes after a site or system is in use. You can perform simple tests early in the process, test on prototypes!

With a prototype, you can test navigation, placement, layout, clarity, feedback and so on, even if you haven’t started to code 🙂 I will write more about prototyping in a later post.

There are some important things to have in mind if you are going to do a usability test:

  1. Test with users! Sounds obvious, but it’s easy to take a member from the team. One “real” user is better than not testing at all. Testing on your team might be better than not testing, but they probably know a lot about the site/system and that knowledge influences their ability to discover usability issues.
  2. Create realistic tasks for the test. Let the user go through all or some of the tasks, depending of what you need to test.
  3. While the user is testing, sit beside him/her and observe what he/she does during the test. You will not remember it afterwards! Every detail is worth noting, if the user has problems finding a button or function, write it down!
  4. “Thinking aloud” means that the user speaks  their thoughts during the test. This gives even more information than “just” observing what he/she does.
  5. If the user permits it, the best way to take notes is to make a video recording of the test session. You can go back later, as many times as you like. This is a valuable source of information through the whole development process, not only during design.

In a real project, there might not be more then one test. Users have other things to do, of course. But make a plan about what you are going to test. Be sure to test the things you want to test 🙂

Share This:

How common is usability problems?

Usability problems, anyone?

This is my first post on this blog. I’d like to start by asking you a question…

Have you or someone you know had problems using a system, a web site, a mobile app or something similar? If you have, I’d be happy if you could share some of your experiences in the comments section below this post!

It would be a great start for this blog, which will offer you tips on better usability. It’s  important to set your requirements when ordering a new system or web site. It’s also important if you work for an IT-company (as I do, myself) to to look at the user’s end. It’s a great competitive advantage to offer your clients solutions for problems they need to solve in their everyday work.

Share This: