Web Page Design

Web Design – The Bigger Picture

Web design is a ever changing and complex subject. Over 10 years ago when we were designing websites there was no need to even consider how a website would look on a mobile phone with a 50mm wide screen. Web Designers and developers have to consider both how the website looks (visual appearance) and how the website works (functional design). With multiple attributes to take into account, the process of web page design can be tricky. To help understand the issues we have prepared 3 articles for you.

In this article, we’ll focus on the main principles, simple efficient rules, and approaches that will help you create a great user experience for your website. We’ll start at big picture level with global things, like how to define the structure of the website (user flows). Looking at what to consider during individual web page design, also covering other essential aspects of design, such as mobile considerations and testing

Visual and functional design of web links

Links are a key element in web navigation. Their visual and functional design has a direct impact on usability.

Follow a few rules with these interactive elements:

• Recognise the difference between internal and external links. Users expect different behaviour for internal and external links. All internal links should open in the same tab so that visitors can use the “back” button.
• Change the colour of visited links. When visited links don’t change colour, users could unintentionally revisit the same pages multiple times.
• Double-check all links. It’s frustrating to arrive at a 404-error page. Use tools like Broken Link Checker to find any broken links on your WordPress website.

“Back” button in a browser

The “back” button is perhaps the most used button in the browser,

Therefore make sure the “back” button works according to user expectations. When a user follows a link on a page and then clicks the “back” button, they expect to return to the same spot on the original page.

Avoid situations in which clicking “back” brings the user to the top of the initial page, instead of where they left off, especially on long pages.

Breadcrumbs ( Great on Chicken, Superb for Navigation)

Breadcrumbs are a set of contextual links that function as a navigation aid on websites. It’s a secondary navigation scheme that usually shows the user’s location on a website.

Some important points for your websites breadcrumbs:

• Don’t use breadcrumbs as a replacement for primary navigation. Visitors should use the main menu to navigate; breadcrumbs should only support the visitors in that. When visitors rely on breadcrumbs as a primary method of navigation, rather than an extra feature, it is a clear indication of poor navigation design.
• Separate each level clearly. Use arrowheads as separators, not slashes e.g. Home>>Services>>Website Design>> WordPress Websites. A forward slash (/) can easily clash with product categories on e-commerce websites. If you’re going to use the forward slash, ensure that no product category will ever have a slash:

Onsite Search – making it super simple to get to specific site content

Some visitors come to a website looking for a specific item. Since they know what they want, they probably won’t use the navigation options to find it. The “Search” feature will act as a shortcut in this case. Visitors should be able to type text in a search box, submit their search query, and find the page they’re looking for. This is really important if you have a large website containing multiple pages of unique but similar content e.g. Wrightfield where they have numerous conveyor systems

Take these few basic rules into account when designing the search box:

Put the search box where users expect to find it research by A. Dawn Shaikh and Keisi Lenz, shows the expected location is the top left or top right of every page on a website.

• Use a magnifying glass icon to draw attention to the area. The magnifying glass icon has a universal meaning—most users are familiar with it.
• Size the input box appropriately. Making the input field too short is a common mistake. Of course, users can type a long query into a short field, but only a portion of the text will be visible at a time, which isn’t great for usability. In fact, when a search box is too short, visitors tend to use short, imprecise queries, because longer queries can be hard and inconvenient to read.  90% of queries will be accommodated by a 27-character input field
• Put the search box on every page. Show the search box on every page so that users can access it regardless of where they are on the website.

Designing individual web pages

Once you have reviewed user flow, it’s time to design the individual web pages. Key web page design guidelines are summarised below

Content strategy

When it comes to web page design, the most important thing is to design around the page’s objectives. Content strategy which refers to planning, creating, and managing content on your website helps with the activity. Every web page should be designed with the objective of achieving its own goal / objective. For example this could be informing visitors about a product / service, feature or benefit or encouraging them to convert / take action. Once you understand the goal of the page, only then should you work on the design or write the content.

Some practical tips to consider with your web page content strategy:

• Avoid information overload. Too much information on a page can easily overwhelm visitors. A simple ways to minimise information overload include is Chunking. This involves breaking content into smaller chunks to help users understand and process it better. A checkout form is a perfect example of this. Display, at most, five to seven input fields at a time and break down the checkout process into easy steps.
• Avoid jargon and industry-specific terms. Each unknown term or phrase that appears on the page will make it that much harder for visitors to understand the information. A safe bet is to write for all reading levels and pick words that are clearly and easily understandable to everyone.
• Minimise long sentences. Write in small, scannable segments. If possible sentences should be 20 words or fewer. For WordPress sites a plug in called Yoast has some great functionality allowing you to analyse readability.
• AVOID CAPITALISING ALL LETTTERS. All-caps dramatically reduces the speed of reading, so its best to avoid all caps for paragraphs, form labels, errors, and notifications. All-caps text is fine for acronyms and logos.

Page structure

With page structure there are no one-size-fits-all rules. A properly structured page will help visitors find each user interface element.

Below are a few web page design guidelines that will help you create a solid structure:

• Make it predictable. Look at your competitors’ websites, identify common design patterns, and align with user expectations by using design patterns that are familiar to your target audience.
• Use a layout grid. A layout grid divides a page into major regions and defines the relationships between elements in terms of size and position. With the help of a grid, combining different parts of a page in a cohesive layout becomes much easier.
• Use a low-fidelity wireframe to analyse / structure essential elements. Wireframing is a process that can help as part of the design process. Before building the page with real elements, create a wireframe, analyse it, and remove anything that isn’t absolutely necessary.

Visual hierarchy – the importance of scanning

Good visual hierarchy can significantly improve page scan ability. People are more likely to quickly scan a web page than to read everything there. Therefore, it’s a good idea to optimise your web page design for fast scanning.

You can help visitors find what they need with a good visual hierarchy, which refers to the arrangement or presentation of elements on a web page in a way that indicates their importance (that is, where their eyes should focus first, second, etc.).

• Use natural scanning patterns to match where people look when they’re viewing a page.
  • The F-shaped pattern and the Z-shaped pattern are two natural scanning patterns that can help you to set the right path for the visitor’s eyes.
  • The F pattern is better for text-heavy pages, such as articles and search results
  • The Z pattern is good for pages that aren’t text-oriented.
• Visually prioritize important elements. Make important elements, such as key content or your primary call-to-action buttons, the focal points so that visitors see them right away.

Scrolling behaviour

A persistent myth among web designers is that people don’t scroll. To be clear: everybody scrolls, and people start to scroll almost instantly as they land on a new page. Put your most important information at the top of the page

Knowing about scrolling means you can improve the user’s experience with these tips:

• Encourage users to scroll. Despite the fact that people usually start scrolling as soon as the page loads, content at the top of the page is still very important. Put your most compelling content at the top:
• Answer the visitor’s question, “What’s this page all about?” An excellent introduction sets the context for the content
• Good imagery can accompany text and help visitors better understand the idea or topic, so use engaging relevant imagery.
• Orient your users. When you create lengthy pages, keep in mind that visitors still require a sense of orientation (of their current location) and a sense of navigation (other possible paths).
• Long pages can make navigation problematic for users; if the top navigation bar loses visibility when the user scrolls down, they will have to scroll all the way back up when they’re deep within the page. The obvious solution to this is a sticky menu that shows the current location and that remains on screen in a consistent area at all times.