↑
Top 

week 3

Principles of website design

Assignment 1 Out
You will be able to find this assignment on Moodle or Onenote

Key Principles Of Good Website Usability

1. Availability and Accessibility

Let’s start with a basic, yet central aspect of usability: the availability and accessibility of your site. If people try to access your website and it doesn’t work — for whatever reason –your website becomes worthless.

Here are a few of the basics of availability and accessibility,

• Server uptime – It’s important to ensure your visitors don’t get an error trying to load your site. Invest in good hosting.
• Broken links – Double check that there are no dead links on your site.  Nothing sends a visitor back to Google search results faster than a 404 page.
• Mobile responsiveness –  Make sure your site can handle different screen sizes and slow connections.

2. Clarity

You could say the core of usability is clarity.

If you distract or confuse your visitors, they will either need more time to find what they came for, or they might forget their initial goal altogether. Either way, they will not experience your website as user-friendly and chances are that they leave dissatisfied and with no intention of coming back.

Visitors come to your site with certain goals in mind. It is your job to help them reach these goals as quickly as possible. If you can manage to do that, your visitors will be pleased and you have laid the groundwork for a positive experience.

A clear and usable design can be achieved through:

• Simplicity – Focus on what’s important. If you don’t distract your visitors they will be more likely to do what you want them to do.
• Familiarity – Stick to what people already know. There is nothing wrong with looking at other sites for inspiration. 
• Consistency – Don’t get cute.  Create a consistent experience across your entire website to keep your visitors mind at ease.
• Guidance – Take your visitors by the hand. Don’t expect your visitors to explore your site all on their own. Instead, guide them through your site and show them what you have to offer. 
• Direct feedback – Feedback is essential to any interaction. The moment people interact with your site, make sure to offer an indication of success or failure of their actions. 
• Good information architecture – Understand your visitors’ mental models and how they would expect you to structure the content on your site. 

3. Learnability

Learnability is another important aspect of usability.

It should be your goal to design intuitive interfaces — interfaces that don’t require instructions, or even a long process of trial and error to figure them out. Key to intuitive design is to make use of what people already know, or create something new that is easy to learn.

By now, people are familiar with a lot of design concepts used on the web. By using these concepts consistently, you meet your visitors’ expectations. This way, you help them reach their goals more quickly. As human beings, we like patterns and recognition, which is why we are better at handling familiar situations rather than unfamiliar ones.

If you use new concepts in your design, make sure to use them consistently and give people a hand during the initial learning phase. For example, you can offer additional information, or instructions the first time they use your site or product. Keep it simple and visual to help people remember new concepts.

 

4. Credibility

Credibility is a crucial aspect of any website.

Even if people find the content they are looking for, if they don’t trust you, that content is worthless. Your website could cause site visitors to be sceptical about your business in any number of ways including whether or not you really exist, your reputation, or the quality of your content.

It is important that people know you are a real company with real people. Offer a clear “About Us” page together with your contact details and if possible a physical address.

Of course, your content also plays an important role in the perceived trustworthiness of your site. Make sure you are honest and precise about your content. Avoid mistakes, such as incorrect grammar or misspellings. Don’t be modest about your expertise. If you are an expert in your field, make sure people know it. For example, you can show third-party testimonials, work references, or the number of your social media followers to win your visitors over.

5. Relevancy

Last but not least, relevance contributes to good website usability.

It is not enough that your website is clear, your content must also be relevant. Again, it is essential that you know your users and why they visit your site.

Start with defining who your users are. Second, talk to them to find out what their goals are when visiting your site. Third, define user scenarios that demonstrate in which situation people visit your site to find what kind of content. Any design decision that you make should result in a more user-friendly website for your users.

whitespace - A common issue in design and implementation of web pages and sites, site layout,

Read the following article on Paul Boag's blog where he argues his points in relation to Whitespace as a positive, Identify at least 5 points of interest from within his blog that you can use in your assessment discussions later.Pauls blog link

Sites that have ill-considered layouts that have the potential to confuse! 

1. Lings Cars
2. Penny Juice
3. Arngren.net/
4. 007 Museum
5. http://art.yale.edu/

The list above are but a few of poorly considered sites, 

Using the list above identify what you find to be poor about the whitespace within them, you should use screenshots to support your explanations.

 

Principles of Accessibility

• Perceivable - Available through sight, hearing, or touch.
• Operable - Compatible with keyboard or mouse.
• Understandable - User-friendly, easy to comprehend.
• Robust - Works across browsers, assistive technologies, mobile devices, old devices/browsers, etc. Follows standards.

Provide appropriate alternative text

• Every non-text element needs a text alternative (alt text) that provides an equivalent to the image content.
• Alt text should present the content and function, not necessarily a description, of an image.
• If an image has no relevant content or function, is decorative, or the alternative text is provided in the nearby text, then the image should have an empty alternative text value (alt="").

  •  

• If an image is a link (or hotspot), the alt text must describe the link’s function.
• Avoid words like "picture of," "image of," or "link to."
• Use the fewest number of words necessary.

Spacing

Spacing on a website will enable content to present itself clearly. The use of space on any website should be carefully considered as this may lead users to expect something to appear or assume that something is missing. When done correctly, certian spacing may lead to an aesthetically pleasing site that makes the user experience a pleasurable one. A good case study to use is Google, their site has worked efficiently due to its clear design, this meant that users didn't get bogged down with "noise" content that was not of interest.

Use google and other search engines and evaluate them for their efficiency, design and functionality.

Navigation

A navigation bar on any site needs to ensure that users get to the location that is presented, however, it needs to be clear that the navigation bar is, actually the navigation bar and not a list or set of images that make assumptions on user knowledge. In most cases navigation bars are located in the left-hand side of the screen or at the top, however, this may be different to Arabic users that present text that reads in the opposite direction to most western languages.

Typography

Using the video below answer the following questions.
PART 1 - (Stop after 4:12)
1. When and where was the first movable type used/created?
2. What was the first mass-produced text?
3. Who is listed as the creator of the first true roman font face?
4. Name 3 of the 8 developers of typographic faces.
Extention - Research the term Reformation 

PART 2
1.Tolbert Lanston created what?
2. Who used them?
3. What was replacing mechanical hot press type?
4. What was the new name of typeface?

 

 

Create your own font, using the following link Create your own font fill in the document like the example below and then follow the instructions as per the site.

Once you have created your own handwritten font, try using a website called Glyphr to create a more impressive font.

Typography is used in situations where users may have educational learning difficulties. Research dyslexia and the suggested font that supports these users.

Typography enhances the readability of information on a web page, yet — quite ironically — it also helps users avoid reading. This is the true and "most humane purpose" of design. Mind blown?

Smashing Magazine Covers principles Typography

alignment,

There are many sites that push the envelope of normal alignment, in most sites content and elements are contained within the center of the page, this can be challenged with the use of websites that adopt technologies such as "Parallax" these can be located all around the page and can move the user right to left and up and down.

Find 5 parallax websites that you think are the best. What makes them good?

 

consistency/intuitiveness

The art of any successful site enables the users to move around it without questioning "how do I get to a point in the site"? "where am I!" and more importantly "why am I here"! Consistency throughout a site will allow the users to feel like they are still in/on your site and haven't been navigated away to some spam site that is making money out of you or opening up your computer to all kinds of nasty's.

accuracy

To achieve a successful website, developers, and owners, need to ensure that the content found on the site are accurate. This links to things like spelling and grammar, to regularly updated content on the site. The issue of updating content on a regular basis is of paramount importance, these updates and changes will provide opportunities for the site to move up through internet search engines.

 

content

Content on the site needs to offer variety to ensure that visitors are engaged and interested. This also requires the content to be considered for its relevance and importance to the page areas that it exists on. Any content that is used and referred to should comply with any legislation and legal constraints.

media

Using the correct type of media is key to a successful website, carefully chosen assets compliment content and enhance the site. However user experience must be considered at all time, visitors to the site may use equipment that not be able to fully realise the experience. Key factors such as internet speed, client and server hardware and most importantly the file types and sizes used.

What are the average speeds of the average user on the internet? Compare these against your own connections.

Research what is the average monitor, and monitor size?

The development of a website requires the developer to deal with a number of considerations when dealing with their client. User experience, User access and client demands.

Simplicity

Simplicity is an art within web design, there are many principles that developers can adopt. One such key principle is the Occums Rasor methodology. This principle refers to the saying, less is more. The principle of Occam's razor is attributed to William of Ockham (c. 1285 - 1348), an English theologian, logician, and Franciscan friar. The element of keeping the content and layout of the site to a simple level removes confusion and misunderstanding that can happen. A classic example of this principle in action is Google landing page.

 

Golden Ratio

Other principles that should be considered is the golden ratio, this is proven to be naturally occurring in almost everything in our world and relates to beauty. The below animation provides some detail on its implementation and presence.

Whilst you watch the video answer the following
1. Who found that the pentagram was mathematical?
2. What did the Greeks admire?
3. How many times can it repeat itself?
4. What Greek building uses the golden rectangle?
 

Research into the golden ratio, find out its numerical value. Provide examples where this has been applied.

Research the Alexa Traffic Rank service. How does this service rank pages? 

 

Last Updated
2024-03-11 11:30:12

---

Links to Learning Outcomes		Links to Assessment criteria
A.P1 Compare the principles of website design used in two websites, including their suitability for the intended audience and intended purpose. A.M1 Analyse how the principles of website design are used to produce creative, high-performance websites that meet client requirements. A.D1 Evaluate how the principles of website design are used to produce creative, high-performance websites that meet client requirements		A.P1 Compare the principles of website design used in two websites, including their suitability for the intended audience and intended purpose. A.M1 Analyse how the principles of website design are used to produce creative, high-performance websites that meet client requirements. A.D1 Evaluate how the principles of website design are used to produce creative, high-performance websites that meet client requirements

---

English and Maths Coverage

---

Stretch and Challenge

---

Homework

---

How 2's Coverage

---

Equality and Diversity Calendar

Files that support this week

---

Democracy: | Rule of Law: | Mutual Respect: | Individual Liberty: | Acceptance of Difference: | College Values:

Week 2←
PrevWeek 3←
PrevWeek 4←
Prev→
Next→
Next