What Are The Key Elements Of A Good Website?

There’s Nothing More Cringy Than Writing LIT All Over Your Website To Attract New Clients

Courtesy of Deep Bhattacharyya — FIT3175 Monash University Notes — Week 10

Netscape Navigator — One of the first web browsers

When the internet began, there was a guy called Ted Nelson. He was a Computer scientist who coined lots of terms during that era, including hypertext. Initially, the internet was not standardized. GeoCities was a clusterfuckingmess of websites looking for the next round of venture capital funding to write news about Kim Jon Un.

• Websites were overly hyperlinked, and users had no fucking clue where they were (no breadcrums)
• The websites had tonnes of flashy distractions trying to sell bullshit you were never going to buy in the first place

Cognitive Inertia and Cognitive Lazyness

• Cognitive Inertia — is the user following links or paths deep into the website to get the information that they need
• Cognitive Lazyess — user is lazy and keeps clicking next recommended video, they are lost and have no idea what the fuck they are doing.

We obviously want to push the user into the former camp, and avoid the latter with all our power.

I’ve Done Software Design, Is Web Design The Same?

You won’t have too much trouble transitioning, depending on what software you were creating. There are quite a few design differences between software design and web design.

Layout

On the web, we give up some control since we cant use full hardware/software capabilities. We must also make sure that our code runs on all devices. Working on mobile and desktop means that there is no way to dictate where every pixel will be placed because it needs to work for all form factors.

Navigation

User controls the navigation. They can arrive from a range of locations and we cannot rely on a homepage to direct them correctly anymore. They can also navigate away at any time.

From a user perspective, the “web” as a whole is the same and websites are expected to follow similar conventions. Hence the behaviour and layout of the page should be similar cross browser and between prominent websites

Behaviour of buttons:

There is a contrasting way that web browsers use the back button.

• Back goes back a page on web whereas in software, it is used for undoing last action,
• Web browsers also use tabs vs. whereas windows are used on the desktop.

Viewports

• When building for mobile, the viewport must be accounted for since the website must look different on each device
• You should rescale images for mobiles and desktop.
• Setting initial-scale=1 in HTML in web browser viewport tag takes care of mobile and high dpi displays
• A Note About Google’s Virtual viewport — so the navbar doesn’t zoom in with the rest of the screen

Before the virtual viewport, the Navbar zooms in to the top left as we zoom the content to the top right. This does not occur after the virtual viewport has been installed.

Key Elements — Pay Attention!

We need our websites to follow some crucial rules so that it can be consistent with the rest of the web. There are three facets of web design:

• Information architecture — layout of information should be easy to access
• Navigation design — useful for interacting with information
• Graphic Design — visual presentation of information

There Are Some Key Pages You Should Include In Every Website

The Home page is a fantastic way to catch the viewer’s attention. There must be a one sentence tagline to sum up the product or business and position the reader’s attention. Here are some other considerations:

• Write a Title tag: XYZ Bookstore: Home Page — This helps the user know the site and page that they are on.
• Group all corporate information (contact details, opening hours etc)
• Emphasise high priority tasks
• Include a search box
• Show screenshots/examples of the product or service — Include reviews for bonus points!

After the homepage, you will also need to abide by some design guidelines on the interior pages:

• The inside page should contain less intro/navigational information than the homepage.
• Simplified, but similar design philosophy to homepage
• Important content “Above the fold” — User should be able to see the value before they start scrolling
• No big blocks of text — use subtitles, bullets, highlighting, no jargon

Additionally, a web page will also need navigation to guide users on their quest to find the information that they desire, conside having:

• Global Navbar
• Embedded links
• Breadcrums (Shopping list > Cart > Checkout)
• A Site map (especially useful for Search Engine Optimisation)
• A table of contents
• Button to go back to top/homepage/previous page

The Top Mistakes People Make

Although making a good website is not rocket science, there are many pitfalls, which could cause considerable damage to a site’s reputation. Consider:

• Unexpected content location (Giving information weird names that no-one in their right mind will find)
• Competing links and categories

• Islands of information — no connection between different parts of site
• Repeated links

• No hidden fees — have a easily accessible pricing tab
• Provide a way to get back to main site from a subsite
• Poor search results
• Flawed filtering algorithms
• Don’t overwhelm users with info

Although this list is not exhaustive, it definitely covers the main pitfalls new websites fall into, while trying to please all their users.