Perhaps you have heard the quote “technology is the stuff that does not work”. For website design, this means aiming for an effortless user experience. In a sense, the website itself disappears. The visitor can then focus on what they want to do or learn.
From the start we wanted to provide an excellent user experience when people came to the TalkIT website. This means a site that is attractive, simple and easy to use. Messages are concise. Layout is standardised. Distractions are minimised.
- You may like: Profile: Bath-based IT training company Talk-IT
Website navigation is implemented via menus, buttons and links. These can have short but relevant labels. We worked on the layout of the e-learning pages. For example, the C#.Net course provides accessible videos, images and code downloads.
The functionality of the registration and payment processes is crucial. This can be a bit sticky on some sites. Our aim is to provide an intuitive workflow through this.
As we work on the site, we want to know what visitors think. As changes are made their effect is monitored. Google Analytics shows the detailed behaviour of visitors to the site. This indicates if changes have been successful.
The site TalkIT is actually implemented in WordPress. This includes a number of customised plug-ins. We create content with the WordPress CMS using HTML and CSS. The tools for creating content work well. But we have had some delays customising the plug-ins.
5 important rules in good website design
To guide the design processes take a look at some contemporary web design principles. These draw from the rich field of Human Computer Interface (HCI). There is a lot of good stuff on the web about this. I particularly like the articles in www.useit.com. Here is my summary of the principles.
Forgiveness
I really like this one. It allows visitors to explore without committing. They can cancel or back out of any process they have initiated. For example, visitors can look at the topics in the C# course before purchasing it.
Progressive disclosure
Visitors are told just what they need to know at any stage. But if they want to know more they can easily find it out. For example, the FAQs page was getting very long as questions and answers were added. Now it shows only the questions. There is less to read. But visitors can click a question to reveal its answer.
Make it easy
Visitors do not want to learn yet another system. In essence they are saying “Don’t make me think too much.” Visitors will not have to work to engage with the site itself.
Familiarity
Visitors want to become familiar with a process they use often. They want to know where they are in the process. Standardising the look of pages and page elements helps this. For example, the online tutorials have a standard look that includes labs, downloads and videos. When visitors buy a tutorial they know what they are getting.
Visitor experience
Most visitors have many years experience of using the internet. They bring expectations based on this experience, to every new site they visit. A good design takes advantage of these facts. For example, you can launch online tutorials directly from the Home page. We assumed that most visitors will know about e-learning and are ready to start.
Pictures More Than Words
Brain research shows that we recall pictures much more than words. Being aware of this, the site contains many visual elements, including photos, logos and memes. Photos are selected to enrich the text in the blogs.
Colour is an important part of the experience. Many interfaces employ a limited colour palette. The TalkIT site includes greens, greys plus black and white. Important buttons have an orange background. This is a clear call to action.
The online tutorials contain diagrams to illustrate concepts. We currently publish courses in six languages. The border colour of images changes for each course. For example images in the C# course have a green background. This makes the images livelier, but also helps the visitor recognise which course they are working with.
I am a landscape painter with a strong visual imagination. So I have always been interested in using images to communicate information effectively.
Navigating the site
The site grew in complexity as courses and e-learning were added. But we still wanted visitors to find stuff quickly and easily. For example, if they want to find a specific C# tutorial, they can filter all the tutorials to find this. Then open the tutorial in just one click.
Website navigation is typically implemented via menus, buttons and links. Short but significant labels guide the visitor. Descriptions and error messages are kept concise but friendly. The Home page communicates what the site is really about. But there are also relevant landing pages for social media posts.
Visitors know what is being offered as they move through the site. For example, when they subscribe to a C# course, they first see its product page. This shows the topics included in the course, plus an introductory video. They can then decide if they want to go ahead.
David Ringsell is the founder of software training company Talk-IT. You can see more from David at the Talk-IT website or by following Talk-IT on Twitter: @NowTalkIT.
- You may like: Creating a website – To DIY or not to DIY
