User Interface Design


Published on

Published in: Business, Technology
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

User Interface Design

  1. 1. User Interface Design
  2. 2. What is it? <ul><li>Interface design is the process of creating an interaction between the computer and humans. </li></ul><ul><li>It is a way of allowing humans to communicate with computers and computers to communicate with humans. </li></ul>
  3. 3. What is it? <ul><li>Interface design is achieved through the screen, mouse, keyboard, touchpads etc. </li></ul>
  4. 4. Why is it Important? <ul><li>Makes software easier to use. </li></ul><ul><li>The better the interface, the less help people will need. </li></ul><ul><li>More users will want to use the software. </li></ul><ul><ul><li>An application that is difficult to use won’t be used. </li></ul></ul>
  5. 5. Interface Design History <ul><li>Initially computers communicated through flashing lights and mechanical switches. </li></ul><ul><li>Then it was through printing devices such as punched cards. </li></ul><ul><li>Then came video screens - but they were limited to text only. </li></ul><ul><li>Now there is a Graphical User Interface (GUI) such as Windows </li></ul>
  6. 6. Usability Problems <ul><li>To whom the interface is targeted? </li></ul><ul><li>Which tasks the application should support? </li></ul><ul><li>What are the requirements of the user and the surroundings? </li></ul><ul><li>How fast the user can learn to use the interface? </li></ul>
  7. 7. Usability Problems <ul><li>What kinds of mistakes occur and how the user corrects them? </li></ul><ul><li>How tiring is the use of the interface to the user? </li></ul><ul><li>What are the requirements of hardware? </li></ul>
  8. 8. Good User Interface Design <ul><li>1. Be consistent </li></ul><ul><li>Put buttons in consistent places </li></ul><ul><li>Use a consistent colour scheme </li></ul><ul><li>Use the same wording in messages </li></ul><ul><li>2. Set a Standard </li></ul><ul><li>To maintain consistency a standards sheet or template should be used. </li></ul><ul><li>This should contain information on fonts, backgrounds and graphic formats </li></ul>
  9. 9. Good User Interface Design <ul><li>3. Help </li></ul><ul><li>Provide help screens and/or menus to assist both novice and expert users. </li></ul><ul><li>4. How To .. </li></ul><ul><li>A precise and clear explanation on how the program works should be available. </li></ul>
  10. 10. Good User Interface Design <ul><li>5. Clear Navigation </li></ul><ul><li>Put buttons in consistent places </li></ul><ul><li>Use a consistent colour scheme </li></ul><ul><li>Use the same wording in messages </li></ul><ul><li>6. Navigation within the Screen </li></ul><ul><li>People read left to right and top to bottom - so information should be organised in a similar manner. </li></ul>
  11. 11. Good User Interface Design <ul><li>7. Use Colour </li></ul><ul><li>Be careful not to overuse colour. </li></ul><ul><li>Don’t use bright colours in the background - so that everyhting else is lost. </li></ul><ul><li>8. White Space is OK </li></ul><ul><li>Try and avoid overcrowding on the screen by leaving plenty of ‘white space’ between objects and controls. </li></ul>
  12. 12. Good User Interface Design <ul><li>9. Interface Objects </li></ul><ul><li>Objects used on screen should look and behave exactly like the ‘real’ objects they represent. </li></ul><ul><li>10. Consider the User </li></ul><ul><li>Cater to a particular group </li></ul><ul><ul><li>Readers - read text </li></ul></ul><ul><ul><li>Viewers - entertainment </li></ul></ul><ul><ul><li>Users - functionality </li></ul></ul>
  13. 13. Good User Interface Design <ul><li>DON’T </li></ul><ul><li>Squeeze in too much text on one screen </li></ul><ul><li>USE ALL CAPITAL LETTERS </li></ul><ul><li>Use fonts that aren’t generally available </li></ul><ul><li>Assume the user knows what to do . </li></ul><ul><li>Place important information at the top or bottom of the screen </li></ul>
  14. 14. UI Questions <ul><li>Does the design simplify the user’s task </li></ul><ul><li>Is it clear what actions are currently possible </li></ul><ul><li>Is there clear, understandable and relevant feedback </li></ul><ul><li>Is the information arranged into logical chunks </li></ul>?
  15. 15. Colour <ul><li>Be consistent! </li></ul><ul><li>Don’t change the meaning of a colour in the middle of the document. </li></ul><ul><li>The use of color should relate to normal expectations: hot - red , cold - blue . </li></ul><ul><li>The result should be aesthetically pleasant. </li></ul>
  16. 16. What makes a Good Interface? <ul><li>It’s invisible! </li></ul><ul><li>It’s predictable </li></ul><ul><li>It’s easy to learn </li></ul><ul><li>It’s flexible </li></ul><ul><li>It’s easy to recover from errors </li></ul><ul><li>People like it! </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.