ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo
Mozamel ¡°jawad¡±
Contents:
? Information about HCI and UI.
? How to get HCI goals.
? Effective Interface.
? Schneiderman theory
? Norman¡¯s 7 Principles (1988)
INTRODUCTON
Human computer interaction [HCI] is a discipline
concerned with the study, design, construction and
implementation of human-centric interactive computer
systems
User interface (UI) can be defined as a medium through
which the user and the computer interact with each other. UI
interactions are different with different systems.
How to get HCI goals:
? Safely
? Effectively
? Efficiently
? Enjoyably
10 TOP PRINCIPLES OF EFFECTIVE WEB DESIGN
1 PURPOSE
? Good web design always caters to the needs of the user.
? Each page of your website needs to have a clear purpose
? Are your web visitors looking for information, entertainment,
some type of interaction?
2 COMMUNICATION
? People on the web tend to want information quickly,
? make your information easy to read and digest
? Some effective tactics to include in your web design include:
? headlines and sub headlines,
? using bullet
3 LOAD TIME
? Everybody hates a website that takes ages to load.
To make page load times more effective include:
? Optimizing image sizes (size and scale)
? Combining code into a central CSS or JavaScript file
4 TYPEFACES
* Sans Serif fonts such as Arial and
Verdana are easier to read online
* Font size for reading easily online is 16px
5 COLOURS
? Using contrasting colors for the text and background.
? Will make reading easier on the eye.
? Vibrant colors create emotion and should be used sparingly.
? White space/ negative space is very effective.
6 IMAGES
? A picture can speak a thousand words.
? Choosing the right images for your website.
? Videos and graphics can be more effective at communicating than even the
most well written piece of text.
7 NAVIGATION
? Navigation is about how easy it is for people to take action and move around your website.
? designing clickable buttons
8 GRID BASED LAYOUTS
? Placing content randomly on your web page appearance that is messy.
? Grid based layouts arrange content into sections.
? which leads to a better looking website design.
Have Details
9 ¡°F¡± PATTERN DESIGN
* Effectively designed websites will work
with a reader¡¯s natural behavior and
display information in order of
importance (left to right, and top to bottom).
10 MOBILE FRIENDLY
* It is now commonplace to access websites from multiple devices.
* It is important to consider:
** Are your website is mobile friendly.
** Are your website is not mobile friendly.
* You can either rebuild it in a responsive layout.
How to choose colors?
1 - Use a natural palette of colors.
? Unnatural colors, such as bright green, blue or red usually cause eye fatigue.
2 - Have knowledge of the impact of your website color choices on other
cultures
? Red is the color of good luck and celebration in China but a color of
mourning in South Africa
? Yellow is sacred and auspicious in China and India, but the color of
mourning in Egypt
? Green is associated with wealth and prestige in Saudi Arabia but
traditionally a forbidden color in Indonesia In Belgium
3 - Create a strong contrast between a page's background and its text.
4 - Select an average of 3 different colors.
? Four or five is ok; more than:
? inconsistency, cause an eye sore
5 - Be sure to take into account people with visual disabilities.
? Make sure that the message of your site reaches such people as well
? Old vs. Young People
? People of different ages have different reactions to colors.
? Men vs. Women
? People also have preferences according to their gender.
? Thus, men tend to prefer blue and orange to red and yellow,
? while women prefer red to blue and yellow to orange. Also, remember that it has been
proven that women are able to perceive more colors than men;
? I have recently encountered a very interesting study which revealed that blue is the
favorite color of 57% of men and of 35% of women, so pay attention.
6. Find the best website colors to attract your target market
? Different colors appeal to different markets.
? Men tend to prefer different colors to women,
? children prefer brighter and simpler block colors to adults,
? teenagers have their own preferences, some are appropriate to
corporate businesses, some to beauty shops, some to gift shops
and some to fast food outlets.
? People in tropical countries prefer brighter and warmer colors
? People in countries with cooler climates prefer cooler colors
? Young children prefer bright primary and secondary colors
? Well educated people prefer tertiary colors and more
sophisticated
Remember to:
Schneiderman theory:
? Time to learn
? Speed of performance
? Rate of errors
? Retention over time
? Subjective satisfaction
Norman¡¯s 7 Principles (1988):
1. Use both knowledge in the world and knowledge in the
head.
2. Simplify the structure of tasks.
3. Make things visible.
4. Get the mappings right.
5. Exploit the power of constraints, both natural and artificial.
6. Design for error.
7. When all else fails, standardize
The End

More Related Content

HCI presentaton

  • 2. Contents: ? Information about HCI and UI. ? How to get HCI goals. ? Effective Interface. ? Schneiderman theory ? Norman¡¯s 7 Principles (1988)
  • 3. INTRODUCTON Human computer interaction [HCI] is a discipline concerned with the study, design, construction and implementation of human-centric interactive computer systems User interface (UI) can be defined as a medium through which the user and the computer interact with each other. UI interactions are different with different systems.
  • 4. How to get HCI goals: ? Safely ? Effectively ? Efficiently ? Enjoyably
  • 5. 10 TOP PRINCIPLES OF EFFECTIVE WEB DESIGN
  • 6. 1 PURPOSE ? Good web design always caters to the needs of the user. ? Each page of your website needs to have a clear purpose ? Are your web visitors looking for information, entertainment, some type of interaction? 2 COMMUNICATION ? People on the web tend to want information quickly, ? make your information easy to read and digest ? Some effective tactics to include in your web design include: ? headlines and sub headlines, ? using bullet 3 LOAD TIME ? Everybody hates a website that takes ages to load. To make page load times more effective include: ? Optimizing image sizes (size and scale) ? Combining code into a central CSS or JavaScript file
  • 7. 4 TYPEFACES * Sans Serif fonts such as Arial and Verdana are easier to read online * Font size for reading easily online is 16px
  • 8. 5 COLOURS ? Using contrasting colors for the text and background. ? Will make reading easier on the eye. ? Vibrant colors create emotion and should be used sparingly. ? White space/ negative space is very effective. 6 IMAGES ? A picture can speak a thousand words. ? Choosing the right images for your website. ? Videos and graphics can be more effective at communicating than even the most well written piece of text. 7 NAVIGATION ? Navigation is about how easy it is for people to take action and move around your website. ? designing clickable buttons 8 GRID BASED LAYOUTS ? Placing content randomly on your web page appearance that is messy. ? Grid based layouts arrange content into sections. ? which leads to a better looking website design. Have Details
  • 9. 9 ¡°F¡± PATTERN DESIGN * Effectively designed websites will work with a reader¡¯s natural behavior and display information in order of importance (left to right, and top to bottom).
  • 10. 10 MOBILE FRIENDLY * It is now commonplace to access websites from multiple devices. * It is important to consider: ** Are your website is mobile friendly. ** Are your website is not mobile friendly. * You can either rebuild it in a responsive layout.
  • 11. How to choose colors? 1 - Use a natural palette of colors. ? Unnatural colors, such as bright green, blue or red usually cause eye fatigue. 2 - Have knowledge of the impact of your website color choices on other cultures ? Red is the color of good luck and celebration in China but a color of mourning in South Africa ? Yellow is sacred and auspicious in China and India, but the color of mourning in Egypt ? Green is associated with wealth and prestige in Saudi Arabia but traditionally a forbidden color in Indonesia In Belgium 3 - Create a strong contrast between a page's background and its text.
  • 12. 4 - Select an average of 3 different colors. ? Four or five is ok; more than: ? inconsistency, cause an eye sore 5 - Be sure to take into account people with visual disabilities. ? Make sure that the message of your site reaches such people as well ? Old vs. Young People ? People of different ages have different reactions to colors. ? Men vs. Women ? People also have preferences according to their gender. ? Thus, men tend to prefer blue and orange to red and yellow, ? while women prefer red to blue and yellow to orange. Also, remember that it has been proven that women are able to perceive more colors than men; ? I have recently encountered a very interesting study which revealed that blue is the favorite color of 57% of men and of 35% of women, so pay attention.
  • 13. 6. Find the best website colors to attract your target market ? Different colors appeal to different markets. ? Men tend to prefer different colors to women, ? children prefer brighter and simpler block colors to adults, ? teenagers have their own preferences, some are appropriate to corporate businesses, some to beauty shops, some to gift shops and some to fast food outlets. ? People in tropical countries prefer brighter and warmer colors ? People in countries with cooler climates prefer cooler colors ? Young children prefer bright primary and secondary colors ? Well educated people prefer tertiary colors and more sophisticated
  • 15. Schneiderman theory: ? Time to learn ? Speed of performance ? Rate of errors ? Retention over time ? Subjective satisfaction
  • 16. Norman¡¯s 7 Principles (1988): 1. Use both knowledge in the world and knowledge in the head. 2. Simplify the structure of tasks. 3. Make things visible. 4. Get the mappings right. 5. Exploit the power of constraints, both natural and artificial. 6. Design for error. 7. When all else fails, standardize