Quotations from Ibn al-Qayyim

• بسم الله الرحمن الرحيم translates to "In the name of God, the Most Gracious, the Most Merciful".
• "إن للمحن أجاال وأعمار كأعمار أبن أدم البد وأن تنتهى" translates to "Indeed, trials have terms and ages like the ages of the sons of Adam; they must come to an end".
• Ibn al-Qayyim said that trials have defined ends, just like the lifespans of people, and will eventually cease.
• "أي شئ تتجاوزه بالمنطق .. لا ترجع له بالعاطفه" translates to: "Anything you overcome with logic, don't go back to it with emotion."

Ergonomics in Web Design

• Aesthetics can easily become the focus when designing or redesigning a website.
• Website ergonomics is defined as a website's capacity to effectively meet the needs of users and provide a comfortable browsing experience.
• Ergonomics aims to address the wide range of visitor profiles.
• Ergonomic design ensures something meets the needs of its user and is easy to use.
• Ergonomic website design means the user can easily navigate and use the site.
• Competing websites are only a few clicks away in today's digital landscape.

Key Considerations for Website Design

• It is important how much visitors like a page at first glance and whether browsing is worthwhile.
• An ergonomic website is transparent, enabling users to easily find what they need without difficulty.
• User time is the main currency on the web so avoid wasting visitor's time.

Main Rules of Web Ergonomics

• Use a clear visual hierarchy: menus and links should be visible, with logical connections between elements.
• Stick to web conventions instead of trying to be too revolutionary at the expense of transparency.
• Divide the website into visually and structurally distinct parts for transparency.
• Minimize noise by avoiding unnecessary visual or structural elements that distract.

Design Criteria for a Website

• Crucial elements that determine website design: user expectations, acquired behaviors, user's ability to adapt, and browsing speed.
• Website display can vary based on the browser and display resolution as well as the equipment.
• Website ergonomics should accommodate the least experienced users, since not all visitors are tech experts.

Human Characteristics According to Ergonomics

• Psychological research shows humans have aptitudes and limitations.
• Ergonomics uses these psychological elements to create a comfortable and effective interface.
• The aim of ergonomics is to take advantage of these psychological elements to implement an interface that is effective and comfortable for the user.
• According to the "human processor" model, humans use their sensory system (touch, sight, hearing, smell, taste), memories, cognitive system (brain), and motor system/language to perceive their environment and plan/execute actions.
• Sight is the most developed sense, accounting for about 50% of brain activity.

Sensory Memory

• Visual perception is critical for user interfaces.
• Sensory memory stores sensory information processing stimuli for about 250 ms.
• Short-term (working) memory has limited storage.
• Humans can process about 7 plus or minus 2 chunks of information simultaneously based on a 1956 study published by George Miller also known as the "Magical number seven."
• Long-term memory has unlimited storage capacity.

Types of Memory and Learning

• The three types of memory are closely related.
• Environments stimulating the senses aid short-term learning.
• "Learning by doing" effectively stimulates senses.
• Multimedia environments help children quickly adapt to interfaces.
• Repetition transfers information from short-term to long-term memory.
• Long-term memorization uses association, conceptually linking new and existing information.

Action Theory

• User Central System Design, Donald A. Norman, 1986 is the action theory for modeling human actions/reactions. This theory is based on two concepts:
  • Humans devise simple models to define their behavior
  • Humans break their actions up into a 6-step process:
    • Setting a goal: a mental representation of a state to be achieved
    • Formulating an intention: the decision to achieve the set objective
    • Devising an action plan: the sequence of actions to be taken
    • Carrying out the action plan: activating the motor system
    • Perceiving the state of the system: describing with psychological variables the perception of how the organization has changed
    • Evaluation of the achieved state in comparison to the originally set goals.

Goals and Achievement

• Complex goals are divided into sub-goals until achievable.
• Sub-goals translate into actions.
• Action theory defines distances defining the gap between the user-defined goal and fulfillment:
  • Execution distance is the gap between the goal and system state.
  • Evaluation distance is the gap between the system state and goal.
• Assessing distances helps users judge the effort needed to align mental representation with goals.
• Designers leverage these behavioral/learning factors for ergonomic interfaces by designers.
  • Designers create ergonomic man-machine interfaces in which lists have fewer than 7 items and the use of colors, signs, and symbols that tie the elements of an interface together help the user to adapt to it.
  • Short messages facilitate memorization.
  • The interface reflects the system state, using appropriate alert messages.

Additional Website Design Criteria

• Soberness means an uncluttered website will reinforce an organization's credibility.
• Overloaded sites lead to bad user experience.
• Animated images are not recommended, and are best reserved for important messages because they attract the user's eye.
• Legibility means that written information is harder to read on screen than on paper (25% more reading time) should be taken into account. Thus the text should be sufficiently spaced out, and the text should be structured by paragraphs and titles at different levels in order to facilitate reading.
• The widely followed "three-click rule" stipulates that all information must be accessible in less than 3 clicks: Ease when browsing involves The visitor must be able to locate where he is on the website at all times, the logo must be in the same spot on all the pages, a uniform graphic charter must be applied to all of the pages, and a site map may be an excellent way to help the visitor to know where he is.
• Website must offer easy return to homepage/main headings.
• Avoid intro and splash pages to prevent annoyance.
• The page's URL must be visible to help users know their location on the site.
• Website information must be qualified via including the date of the last update and the name of the author.
• Elements for browsing must have consistent location and presentation across the site.
• Pages should load quickly because most Internet users will not wait more than 15 seconds for loading, as the speed of the websiteLoading speed depends on visitor's connection, page and image size, and webserver capabilities.
• Optimize image size with appropriate formats/colors, keeping images below 30-40 kb each unless high resolution is user-initiated.
• Images should not be resized.
• Interactive websites should have various hypertext links. These links can give visitors multiple paths that they can take as they like, place enough links between pages but not be too many.
• Information should be segmented, using catch lines that link to the article.
• It is a good idea to have everything set up to make communication with visitors easier via make communication with visitors easier, gather their impressions and requests, At a minimum, it must be easy for visitors to contact someone, either by email or contact form.
• Adaptability enables user personalization, it describes the possibility to personalize a website through user intervention via using scalable Text should should preferrably not use fonts whose sizes are not expressed in absolute value.
• Accessibility means the website is accessible to a variety of users including the visually-impaired via following the guidelines for simple accessibility.
• Interoperability with W3C helps accessibility with different software.
• HTML should replace flash to be read via text.
• Content should be accessible even without style sheets.
• Contrast should exist between backgrounds and text.
• Provide captions to replace images.
• Color choice includes accommodating the color-blind.
• Font size must be modifiable/legible.
• Analyze design by criteria using both mobile and laptop to see variation.