Website Ergonomics & Design

Website Ergonomics

• Refers to a website's capability to effectively cater to user needs and ensure a comfortable browsing experience.
• The primary challenge in ergonomics is addressing the wide range of visitor profiles.

Ergonomic Design Interpretation

• Something ergonomic is designed to meet the user's needs.
• For a website, this design allows users to handle it easily.
• Competition among websites implies users can switch sites quickly if dissatisfied.

Website Appeal

• It's vital for visitors to like a page at first glance.
• It is important to consider how much the page will be worth for the user to browse.

Website Design

• An ergonomic website design is transparent.
• It allows users to find content easily, without needing to learn the site.
• Time should not be wasted for visitors.
• The internet is the industry of attention, where the main currency is the user’s time.

Core Web Ergonomics Principles

• Use a clear visual hierarchy to ensure key elements like menus and links are visible.
• Establish visual connections between related elements.
• Adhere to web conventions to maintain transparency; avoid pioneering designs that sacrifice clarity.
• Divide the site into visually and structurally defined parts to enhance transparency.
• Minimize unnecessary visual and structural elements or content to avoid distracting from the website's core purpose.

Design Considerations

• User expectations, the information visitors seek and their graphic preferences both have to be taken into account.
• User habits, acquired behavior is another factor to consider.
• User age is another factor to consider to measure adaptability and browsing speed.
• Equipment being used is another factor, website display varies across devices and resolutions are different.
• The level of knowledge held by user is also crucial, cater to those less experience.

Human Characteristics in Ergonomics

• Ergonomics uses psychological elements to make interfaces effective and comfortable.
• The "human processor" model explains how humans perceive their environment.
• Sensory system accounts for 5 senses: touch, sight, hearing, smell, and taste
• The impact of visual perception accounts for around 50% of brain activity making it key for user interface transmission.
• Memory is a crucial factor.
• Cognitive System (brain) comes into play.
• Actions use the motor system and language.

Memory Types

• Sensory memory stores sensory information (stimuli processing) for about 250 ms.
• Short-term memory (or working memory) stores limited information.
• Long-term memory can store an unlimited amount of information indefinitely.
• In 1956, George Miller's study showed that humans can simultaneously process 7 mnemes (± two).
• The three types of memory are closely linked.
• Multisensory surroundings enhance short term learning.
• Repetition moves info from short to long term memory.

Action Theory by Donald A. Norman

• Models human actions and reactions.
• It consists of humans devising simple models.
• This splits actions into 6-step process.
• Setting a goal is a mental representation of state to achieve.
• Formulating an intention is the decision to achieve the goal.
• Devising an action plan relates to the sequence of actions required.
• Carrying out the action plan leads to activating the motor system.
• Perceiving the state of the system involves describing psychological variables to measure the organism change.
• Evaluation checks the achieved state against goals.
• Complex goals break into sub-goals.
• Sub-goals become actions that defines a new goal.
• The distances between user defined goals are: execution distance and evaluation distance.
• Execution distance is the gap between the goal and the state in system in the descending branch.
• Evaluation distance is the gap between the state of the system and goal in ascending order branch.

Ergonomic Design Objectives

• A list of items should contain no more than 7 items.
• Colors, signs, and symbols create cohesion in the interface.
• Short messages aid memorization.
• Interface alerts must accurately reflect the system state.

Ergonomic Design Criteria

• Soberness through simplicity maintains credibility.
• Animated images are not encouraged, reserve them for strong messages.
• Legibility is achieved through the use of short screens, plain language.
• Legibility also aims to maintain spacing, structuring using paragraphs and titles to facilitate reading.

Usability

• When browsing, it is important to ensure all information is easy to reach.
• Accessibility of all information in less than 3 clicks, according to the "three-click rule".
• Ensure visitors can locate themselves in the website using the same spot, the same type and uniform graphic style.
• The website should let users return to the homepage with one click, from every page.
• Avoid intro pages.

Website URLs

• Pages URL must be clear and visible.

Website Information

• The information must be qualified and include the date of last update and name of editor.
• Do not use attention grabbing homepages if the other pages it leads to are under construction.
• Use the same browsing elements in a consistent location on a page.

Website Speed

• Loading time should be quick because users do not wait for longer than 15 seconds for page to load.
• It depends on visitors connection, the page size and the web server capabilities.
• Keep optimized image size possible be using a well adopted format and few colours.
• Avoid images that are not resized.

Interactivity

• Offer easy contact, and allow for visitors to give impression and make requests for website adaptations.
• Allow users to have options on where to go via hypertext links.
• Designers must place enough links between pages while avoiding reading difficulties with over linking.
• Segment the page with headers, a catch line and hyerplinks to give more information.

Adaptability

• Offers customizabilty based on user preference.
• Text uses scalable formats so users can modify the font size.

Accessibility

• Means the ability for a website to be universally accessed.
• Accommodate all users: visually impaired, partially sighted etc.
• Follow rules to accommodate to greater number of people independent of their software, hardware configuration or or their handicaps.
• The way that clients use different software plays another key role.
• Transparency makes them readable and accessible.
• HTML should be used instead of Flash, to ensure transparency.

Text and Colour

• Graphic illustrations help the visual.
• Captions explain images.
• Using alternative(alt) tags help with visual impairments and it allows them to understand the page by reading.
• Colour schemes accommodate colour blinded users and distinguish other colours.
• Style sheets ensure information is accessible.
• Use enough contrast between background and text to help partially sighted read.
• Ensure the font sizes are adaptable so they don't tire readers eyes.

Evaluation Advice

• Check a websites criteria by opening it on a mobile and latop device.
• This will show deference criteria.