What Makes A Great Website
Great websites don't happen by accident. Let's look into what makes a website great: from its looks, functionality, and user experience.
Domain name and URL
First, let's look into the difference between domain name and URL. Domain name is what people type to get to your website. For example, wikipedia.org is a domain name.
A URL is a specific page within a domain. https://en.wikipedia.org/wiki/Paper_size is an example of a URL.
What makes a good domain name
A good domain name is:
- Short
- Memorable
- Does not include underscores and numbers
- Reflects the brand
Try the phone test:
Call up your friends and tell them about the domain name of the new website you are making. If you have to explain or spell it out, it might be good to consider another domain name.
What domain extension should you use?
The domain extension is the dot-something part of a domain name. .com and .org are some of the most common domain extensions. Domain extensions can also reflect a website's country base, such as .au and .uk.
There is a trend for new websites to use extensions that reflect their field. Some common examples are .club, .shop, .film, and .science.
.com is an ideal extension for a business because it is what most users are accustomed to typing. But there is a growing trend for alternative domain names. For example, personal websites use the .me extension. .cat is a funky extension for businesses that specialize on anything related for our feline housemates.
What makes a good URL?
Each URL should reflect what a web page contains.
coolbrews.beer/menu/specialty-ale immediately shows that:
- You are clicking on an item in a brewery's menu.
- That item is an ale.
Mobile-friendly design
In 2016, more people have been using phones than desktop computers. In 2019, almost half of all website traffic worldwide come from mobile phones.
This shift in user behavior encourages a mobile-first approach to website design.
A mobile website is a great way to:
Give mobile users access to your brands without the need to install an app.
Hook customers into your brand. If they like your brand enough, they will be happy to download your mobile app.
Loading speed
Mobile network speed is not as fast as broadband speed. So it is can be a challenge to meet Google's recommended page load time of two seconds.
Load time is a key factor in customer experience, as outlined by Google's web vitals.
These are a few things that you can try to make your website load faster:
Minify CSS and Javascript files. Use cache. Use images in next-gen formats such as JPEG 2000, JPEG XR, and WebP. Limit the plugins you use.
Do note that some of these speed-optimization techniques may affect how your website works on certain browsers.
Do you have an existing website that you want to test? Try Google's PageSpeed insight.
CTAs at the best spots
A CTA (call-to-action) is a phrase that encourages website visitors to perform the action that you want them to do. For example, if you own a property rental website, phrases like Check availability and Book now should be placed where users don't need to look for them.
What makes a good CTA?
The actions are clear:
BookSign upDownloadSubscribeCreative, compelling, with a clear action:
Send me specials nowTry 30 days freeUpgrade and save
Payment gateway
A payment gateway allows a customer to process payment on your website itself. To set up a payment gateway, you will need the services of a payment gateway merchant.
Paypal, Stripe, and Sageway are examples of payment gateway merchants.
Platforms such as Shopify and Squarespace give you tools to set up a payment gateway. The availability of merchants depends on the country you are in.
Setting up a payment system on your own is easy and secure if you have the right technical skills. If you want to ensure that your customer's transactions are secure, it makes sense to hire the help of a custom software development company.
Great information architecture
Information architecture is organizing content in a clear and logical way. It is often represented in a diagram, which represents the steps a user takes to get to a page or complete a task.
Your goal is to make good architecture, so that you can help people find what they are looking for.
Author and UX expert Dan Brown laid out eight principles of information architecture in this article, published in 2010:
Principle of Objects. Each type of content has its own attributes and behaviors.
On the homepage of an e-commerce website, it is common for content to follow this hierarchy:
Navigation, with links to product categories and a search bar, sits at the top. It helps people find where everything is on the website.
Products take the middle space. This section presents what people will find most valuable.
Below products you may find links to helpful content, in the form of blog posts or guides. These posts inform users on how to make the most of the products sold on a site.
For example, a homepage for a flower shop may contain links to aftercare for calla lilies. This type of content serves two purposes:
- Engage customers; and
- Increase visibility on search results.
Links to Careers, About us, Terms and Conditions, social media accounts etc. occupy the bottom space. This section helps you know more about a company.
Principle of Choices. This principle follows Hicks Law: The fewer choices a user has to make, the faster they can make a decision.
Avoid competing choices when presenting options.
Choices are not there to make users think -- they are there to help users make decisions fast.
Consider the following example from online coffeeshop Mistobox. The navigation choices are few and are laid out the way a coffee enthusiast will categorize coffee.
Principle of Growth. A website should be designed so that it is easy to add more content in the feature. Consider this example by Neben Norman Group:
The website information is structured based on the company's main services. Each service is categorized so that if a new service is added later on, it can be placed in a sub-category.
Principle of Front Doors. Your homepage is the front door. But many of your visitors will come through a side door. It is a good practice to let visitors know where they are and what else they can do in your website.
Consider this menu page from Pinza:
If a customer arrives at the site through the menu page, they immediately know:
- Where to find vegetarian pizzas, salads, and drinks
- How to order online or by the phone
- Where to look for the location and hours of their physical stores
- How to find information about franchising
Principle of Disclosure. Progressive disclosure means giving just enough information that a website visitor needs so they can decide where they want to go next.
For example, software development website will have categories of its services at the home page navigation bar. Each item in the navigation bar leads to a web page that gives the details for each specific service.
This principle also dictates that a website should arrange information in a funnel-like structure.
Principle of Exemplars. Our brains categorize information based on an example item in that category. Let's see this at work at the homepage of outdoor products store trekkinn.com:
On that page, a photo represents each product category:
- The photo reinforces the text that describes each category.
- It gives a site visitor reassurance that they are clicking on the correct category.
Moreover, each image is clickable to make navigation faster.
Principle of Multiple Classification. Website visitors will have more than one way of categorizing products.
For example, a shoe website categorizes products based on audience category: Men, Women, Youth, Kids, Toddler, Baby.
You can also find the same products under different categories: Hiking, Running, Climbing, Casual, and so on.
Categories used to boost sales also exist: Offers, New Arrivals, On Sale.
The key takeaway is to design a website so that there is more than one way to discover something.
Principle of Focused Navigation. A navigation menu should be simple. Give different priorities to different navigation tools. Let's see this principle at work in the website of the Department of Energy.
The navigation highlights the main sections: Science and Innovation, Energy Economy, and Security and Safety. The subsections are revealed only when a section is hovered over.
Links to social media accounts are displayed but are given less prominence compared to the main navigation panel.
Navigation does not have to cover everything that your site has to offer (See Principle of Disclosure). Instead, it should focus on the most important information a user should discover.
Great content
Content is both visuals and words.
Here's a quote from [Basecamp's description of a great product designer][0]:
You understand that copywriting is design. The words matter as much as the pixels. Great visuals with weak words are poor designs. You should care about how things are phrased as much as you care about how they look.
Scannable content
Website visitors do not read text: they browse them. To allow readers to get information at a glance, breakdown written content into:
Headings Subheadings Bullet points Short sentences Short paragraphs
[Hemingway app][1] is a great tool to check on your site's readability.
Secure
Security builds trust. A security breach can cause you to lose customers that you may not get back. It will also affect your brand reputation and SEO ranking.
These are some things you can do to secure your website:
Install an SSL Certificate
An SSL certificate encrypts data between your website and its visitors. It is a must-have for business websites, especially for eCommerce sites. Installing an SSL certificate is also beneficial to your site's SEO.
When a website is secured by an SSL certificate, the prefix http is changed to https. The extra s stands for secure.
Enable Support HSTS
A Support HSTS (HTTP Strict Transport Security) automatically serves an https version of your site when a user types http. This prevents a browser from sending an unsecure version of your site.
Update your site
If you are running your website on a platform like WordPress, make the effort to install periodic updates. These updates may contain security patches.
Use secure plugins
Plugins can give you an uncanny ability to customize your website. But they are also a common source of security vulnerability. Verify the developer of a plugin before installing it to your site.
Design is more than just user interface. Our CTO can walk you through some fundmental design concepts for your website or web app. Beauty should meet functionality.
