User Interface


Published on

Looking at the user interface form HCI and technical point of view. and a short review over colors.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

User Interface

  1. 1.
  2. 2. USER INTERFACE<br />Mohammad hoseinmajdi,Imangorjidouz,Abolfazlghalenoi,Mostafaalinaghi pour<br />
  3. 3. THE ART OF<br />COLOR<br />
  4. 4. COLOR WHEEL<br />
  5. 5.
  6. 6. RED COLOR<br />WARM COLOR<br />RASING BLOOD PRESURE<br />FIRE<br />WARFARE<br />DEVIL<br />CUPID<br />GOOD LOCK<br />VIOLENCE<br />RESPIRATION RATE<br />ANGER<br />IMPORTANT<br />DANGER<br />The dark shades of red in this design give a powerful and elegant feel to the site<br />
  7. 7. ORANGE COLOR<br />VIBRANT<br />ENERGETIC COLOR<br />FRUIT<br />EARTH<br />AUTUMN<br />MORE FRIENDLY<br />MOVEMENT IN GENERAL<br />CHANGING SEASON<br />IMPORTANT<br />The bright orange box draws attention to its contents<br />
  8. 8. YELLOW COLOR<br />SUNSHINE<br />HAPPINESS<br />HOPE<br />HUGE VIEW<br />MORE FRIENDLY<br />FATE<br />LOOK ANTIQUE<br />COWARD<br />yellow used here really stands out against the lower-value black and gray<br />
  9. 9. GREEN COLOR<br />CALM<br />ENERGETIC<br />STABLE<br />GROWTH<br />DOWN TO EARTH<br />AFFLUENCE<br />LACK OF EXPERIENCE<br />BEGINING<br />The bright green header of this site gives it a very natural and vibrant feeling<br />
  10. 10. BLUE COLOR<br />CALMNESS<br />SADNESS<br />STABLE<br />RELIGIOUS<br />RESPONSIBILITY<br />STRONG<br />PEACE<br />EXCELLENCE<br />The light, muted blue of this site gives a very relaxed and calm impression<br />
  11. 11. PURPLE COLOR<br />IMAGINATION<br />ROYALTY<br />CREATIVITY<br />ROMANTIC<br />MOURNING<br />ROMANCE<br />SPRING<br />LUXURY<br />appropriate for the Asprey luxury goods brand<br />
  12. 12. BLACK COLOR<br />STRONGEST NATURAL COLOR<br />POWER<br />ELEGANCE<br />FORMALITY<br />MOURNING<br />SENCE OF MODERN<br />DEATH<br />EVIL<br />The black here, mixed with dark grays and lime green, and an overall grungy theme, adds to the edginess of the design<br />
  13. 13. WHITE COLOR<br />WEDDING<br />PURITY<br />GOODNESS<br />PARADISE<br />FUTURE<br />MINIMALIST DESIGN<br />DEATH<br />HEALTH<br />White combined with gray gives a soft and clean feeling to this design<br />
  14. 14. GRAY COLOR<br />MOODY<br />COOL<br />DEPRESSING<br />MODERN<br />COMPLEXITY<br />COLOR OF MOURNING<br />COMMON FOR BACKGROUND<br />PROFESSIONALISM<br />The cooler gray on this site gives a modern, sophisticated feel to the site<br />
  15. 15. COMPARISON OF UIs<br />VS<br />iOS<br />Android<br />
  16. 16. HOME SCREEN<br />
  17. 17. NOTIFICATION<br />
  18. 18. MULTITOUCH<br />
  19. 19. MULTI TASKING<br />
  20. 20. BEST OF THE CLASSICS<br />Trial and Error<br />Works for small systems<br />Systematic approach<br />
  21. 21. USABILITY<br />Some systems are easy to use<br />Others are a nightmare<br />For example<br />The difference between old and new text processors<br />
  22. 22. USER INTERFACE<br />The part of the system that you see<br />Human-computer interaction<br />The interaction takes place through the UI<br />User interfaces vs. technical interfaces<br />
  23. 23. DESIGN OF UI<br />In principle, it is easy to make a UI<br />Many systems have adequate functionality, but they may not be easy to use<br />The interaction takes place through the UI<br />If we insist that the system shall also be easy to use, the design process becomes so hard<br />
  24. 24. WHAT IS USABILITY ?<br />Programmers give different definitions<br /><ul><li>The user’s experience
  25. 25. Can he find out how to use it?
  26. 26. Does it make his work easy?</li></ul>Functionality and easy of use form usability<br />The essential<br />
  27. 27. USABILITY FACTORS<br />Fit for use (or functionality)<br />Ease of learning<br />Task efficiency<br />Ease of remembering<br />Subjective satisfaction<br />Understandability<br />
  28. 28. IMPORTANCE OF USABILITY<br />Who is responsible for usability?<br />It was the user’s department<br />This is slowly changing<br />Why is usability more important now than earlier?<br />
  29. 29. WHY USABILITY IS HARD?<br />Classical approach<br />Task analysis <br />Early prototype<br />Usability test<br />
  30. 30. PROTOTYPES OF UIs<br />Hand-drawn mock-up<br />Tool-drawn mock-up<br />Screen prototype<br />Function prototype<br />
  31. 31. THE BEST PROTOTYPES<br />Usability testing (finding the usability problems)<br />Changing the design<br />Defining what to program<br />Discussing solutions with users <br />
  32. 32. REFRENCES<br />User Interface Design<br />SorenLauesen - 2005<br />Jeff Johnson - 2010<br />Designing with theMind in Mind<br />User Interface Design<br />Wikipedia<br />The art of color<br />Johannes Itten - 1974<br />Color Theory for Designer<br />Smashing Magazine<br />A primer of visual literacy<br />Donis a. Dondis - 1973<br /><br />