This website requires JavaScript to deliver the best possible experience.



Accessible design is to create a good experience that reaches people with and without disabilities.

David Benyon, in his book Designing Interactive Systems, mentioned the reasons that people can’t use an inaccessible product:
  • Physical—e.g., someone does not have the strength to operate a control or cannot read the instructions.
  • Conceptual—e.g., someone does not understand the user instructions or has a different mental model.
  • Economic—e.g., someone cannot afford the product.
  • Cultural—e.g., someone does not understand a metaphor that is used as the basis of the product interaction.
  • Social—e.g., someone is not part of a social group with whom he/she can interact, or does not understand social conventions once in a group.

Accessibility and usability

Accessibility improves usability for everyone.

There are limiting situations people without disabilities face such as opening web on a mobile phone when visual distractions are everywhere in bright sunlight or dark room, in a quiet or noisy environment.

Accessibility and inclusive design:

Requirements for accessibility also are useful for people and situations that refers to inclusive design. For example, accessibility also is useful for:

  • People who are not fluent in the language
  • People using older technologies
  • New and infrequent users
  • Mobile users

Best practices


Responsive design adjusts its content to any container laptop, PC, tablet or mobile phone.

Responsivene web design

Benefits of responsive design:

  • Decrease page load time
  • Simplify product maintenance and content management
  • With single code-base, you can enhance product’s performance and usability.

Waiting times

People usually do not like to wait. Waiting times are not happy times for most of us.  

According to a study by Forrester Research, almost half of consumers expect a site to load in two seconds—and if it takes longer than three, 40% left.

If we want to accelerate loading time we will have to lose features enriching user experience. So the solution is to make waiting time less boring and more fun and efficient.


It’s unavoidable that users will make mistakes, that’s the reason why we need error messages.  Error messages affect user experience in several ways, error messages can be frustrating or vague.

Common mistakes:

1- Ambiguity

Error messages should define the problem in a clear way, avoid vague messages.


2- Using blaming/condensing language

 Try not to make user panic or make them think of the problem as it’s worse than it is. Also, don’t make them feel dummy like it’s their fault.

Blaming/condensing language

3- Poor placement error message

Error messages should be positioned so that they can be clear to the user what to do to fix that error.

The following example is better than placing it all at the top, but it’s still pretty bad because you can’t tell where the actual error was (e.g. ‘name cannot be empty’ is between first and last name, making it ambiguous):

Error message
Netflix is guilty of displaying error messages above the form and only highlighting the error fields red. As she said, “the error could be missed or the fields hard to locate”.
Poor placement
Google has some design best practices documentation on this. Read up.

4- Unclear expectations

Error messages should give users a solid next step.

A superior error messages take the opportunity to educate the user on how to fix it. Look at how great MailChimp is at suggesting a solution to the problem:

Error messages

Error messages can be considered as a good opportunity to enhance user experience.

To right efficient error message, we need:

  • Clear text message
  • Right placement
  • Good visual design

Clear text messages
1. The error message should be clear
Error message
2. The error message should be helpful
Error message
3. The error message should be specific to the situation
Error message
4. The error message should be polite
Error message
5. Use humor if it’s appropriate
Error message

The right place for error messages

Good error messages can be seen when it’s needed.

Error message

The right visual design for the error message

To make error messages clearly visible we can use contrast in text colors so the user can easily notice and read the message.

Error message

Completed actions

Feedback is the reaction that happens after a user has taken an action. It communicates the results of any interaction a user took in order to ensure the action was successfully done or there is something wrong has occurred.

Some guidelines when designing UI feedback in your design:

  • Users hate waiting, give immediate and quick feedback.
  • Be specific about the feedback message.
  • The feedback message should be noticeable and to draw the user’s attention.

Completed actions
Photo Credit: Mailchimp


Content is user experience. It is all the images, videos and text you are evolving into your project (Website or Mobile app). Content is all the elements attached in your design from the Calls to action (CTA) passing by text to the images and videos that will impress user’s interaction and engagement.

As a result, content is a significant factor that will affect your business goals. By content, you also can answer to users’ questions that would spin in their minds while navigating your project.

Content and user experience

Content is the first thing to connect between user and product (website or mobile app) it’s the first comparison factor between different websites make visitor complete his journey through your website or choose to leave it in the first second.

Content and design

Content is the main rule to build the website’s user interface, it’s the main hub other design elements revolve around.

Some guidelines when evolving content into your design:

  • Make it context relevant.
  • It must be useful and strategic.
  • make it readable, understandable and easy to scan.

Photo Credit: UX Magazine

Language and Context

Language and Context

The biggest and the clearest mistakes UX designers or engineers in websites is to build two versions of the website one in original language Arabic for example and another into another language.


Chapter: 6