Ergonomics in Web Design

• ﷽

Wisdom

• "Indeed, trials have dates and lifespans like the lives of the sons of Adam, and they must come to an end." - Ibn al-Qayyim
• "Anything you overcome logically, never return to revisit emotionally."

Ergonomics in Web Design

• Ergonomics in website design focuses on the site's ability to effectively meet user needs and provide a comfortable browsing experience.
• A key challenge in ergonomics is accommodating diverse user profiles.

What is Ergonomic Web Design?

• If something is ergonomic, it’s designed to meet the user's needs and make something easier to use
• Ergonomic web design allows the user to easily handle the website.
• Since competing websites are just a few clicks away, users will quickly leave a site that isn't user-friendly.

Importance of a User-Friendly Website

• It is important to make sure that visitors will like a webpage at first glance and find it worth browsing.
• An ergonomic website is transparent, so users can easily find what they need without needing to learn how to use the site.
• It is always important to never waste the visitor valuable time

Jakob Nielsen Quote

• "Web is the industry of attention, where the main currency is the user's time."

Main Rules of Web Ergonomics

• Use a clear visual hierarchy so the most important elements (menus, links, etc.) are visible and logically connected.
• Adhere to web conventions to create a page.
• Avoid being overly innovative if it compromises transparency.
• Structure the website into distinct parts which makes it visually and structurally transparent.
• Minimize unnecessary visual or structural elements to avoid distracting from the main content and making the site harder to use.

Design Criteria for Websites

• User expectations include the different information user's are looking for and their graphical demands
• User habits consist of acquired behaviours
• User age descibes the user's speed when browsing as well as their ability to adapt
• Equipment such as varying website displays between browsers/resolutions is importatnt
• Level of knowledge which states the website must be designed for the least experienced user

Human Characteristics and Ergonomics

• Ergonomics take advantage of psychological elements to implement an effective and comfortable interface for the user
• According to the "human processor" model, people perceive the environment through:
• Sensory system (touch, sight, hearing, smell, taste)
• Memories
• Cognitive system (brain)
• Motor system and language
• Sight is the most developed sense, while taste and smell are poorly developed.
• Visual perception accounts for about 50% of brain activity and is crucial for user interfaces.
• Psychology defines three memory types:
• Sensory memory that stores sensory information for about 250 ms.
• Short-term or working memory with limited storage capacity
• Long-term memory that permanently stores an indefinite amount of information.

Memory Processing

• Humans can simultaneously process approximately 7 mnemes (± two).
• Stimulation of the senses, such as "learning by doing" can improve short-term learning
• Repetition helps transfer information from short-term to long-term memory.
• Association aids long-term memorization.

Action Theory

• User Central System Design, Donald A. Norman.
• It models the actions and reactions of humans
• It is based on two concepts:
• Humans use simple models to define their behavior
• Humans break their actions into a 6-step process:
• Setting a goal as a mental representation
• Formulating an intention to achieve the set objective
• Devising an action plan
• Activating the motor system to carry out the action plan
• Perceiving the state of the system with different psychological variables
• Evaluating the achieved state against the originally set goals.
• An initial complex goal is divided into successive sub-goals until achievable
• The sub-goal is translated into an action, which leads to a new goal being defined
• The action theory also defines two distances to characterize the gap between a user defined goal and its fulfillment:
• The execution distance which represents the gap between the goal/state of the system
• The evaluation distance which represents the gap between the state of the system and the goal

Ergonomic Design Considerations

• Evaluate distance which allows the user to judge the effort required to make a mental representation correspond with the set goal
• Take advantage of behavioral learning mechanisms for ergonomic man-machine interfaces
• A list of items should be comprised of less than 7 items
• Use colors, signs, and symbols

Interface

• Shorter messages assist memorization
• Interface must accurately reflect the system state, and should have suitable alerts.

Web Design Criteria

• Simplicity utilizes an uncluttered website that reinforces credibilty
• Animated images should be reserved for strong messages only
• Legibility requires clear text that is spaced out and uses paragraphs and titles for reading
• Information should be accessible within 3 clicks, according to the three click rule
• Location allows visitors to locate where they are
• Uniform graphic charters must be applied to the pages so users know they are on the same website
• The website must allow users to return to the homepage with one simple click
• Navigation bars can be used so users can brows without going back to the homepage and there should not be splash screens or intro pages
• Page URLs must always be visible and easily returned to that page
• Information such as date of last update and name of authour must be present as a means of qualification
• Must have the same presentation from one page to another
• Loading time must be short
• Image size should be optimised to allow ≤ 15 seconds load time
• Don't resize images
• Place enough links between pages to assist interactivity as well as hypertext links
• Segment information to make things easier, or to pique curiosity
• Use catch lines that hypertext link to the rest of the article
• Make it easy for visitors to contact the website either by Email or contact form
• Adaptability enables a website to personalise interventions
• A website's text should not include fonts whose sizes are not expressed in absolute value
• font resizing can be used to resize the font

Accessibility

It means the ability for a website to be assessed universally:

• Aims to include partially sighted and visually handicapped people
• Respect for standards helps interoperability and accessibility of the W3C recommendations
• HTML should be used instead of flash
• Use caption or replace images
• Colors should be identifiable to color blind people
• Accessibility without style sheets
• Contrats between background color and text
• Fonts needs to be legible.

Presentation

• To analyse a website by opening the web once by mobile an once by laptop to notice the difference criteria and sub-criteria