1 / 20

User-Centered Webs I te /Software Development

User-Centered Webs I te /Software Development. By Birol Özkaya. Goals of Human Computer Interaction. To develop or improve the followings in computerized systems: Safety - "safety of users", "safety of data", or both Utility - services that the system provides

antoineg
Download Presentation

User-Centered Webs I te /Software Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. User-Centered WebsIte/Software Development By BirolÖzkaya

  2. Goals of Human Computer Interaction To develop or improve the followings in computerized systems: • Safety - "safety of users", "safety of data", or both • Utility - services that the system provides • Effectiveness - user’s ability to accomplish a desired goal • Efficiency - how quickly users can accomplish their goals • Usability - ease of learning and ease of use • Appeal - how well users like the system

  3. Content Organization Major component of the design phase for a website or software is organizing its contents. Organizational Schemes: • Alphabetical • Chronological • Geographical • Topical • Task-Oriented • Audience-Specific • Hybrid (combination of multiple organizational schemes)

  4. Alphabetical Organizational Scheme

  5. Chronological Organizational Scheme

  6. Geographical Organizational Scheme

  7. Topical Organizational Scheme

  8. Task-Oriented Organizational Scheme

  9. Audience-Specific Organizational Scheme

  10. Hybrid Organizational Scheme (Combination of Topical and Alphabetical)

  11. Visual Organization Good appearance of a webpage or user-interface creates a good first impression and invites confidence. Four principles of visual organization: • Proximity - Group related items close together; Separate unrelated items • Alignment - Place related items along an imaginary line • Consistency - Make related items coherent and uniform (e.g. same size for the buttons, same location for the links on each webpage) • Contrast - Make different items look different by changing its size, style, color, etc. (e.g. use large and bold lettering for titles)

  12. Four principles of visual organization : Proximity, Alignment, Consistency, Contrast

  13. Text Text delivers the most widely understood (accurate and detailed) meaning to the greatest number of people. Typeface “serif” – angular edges (looks good on paper) Typeface“sans serif” – without angular edges (looks good on monitor) Typeface“script” – looks like handwriting (looks good on paper) Serif Fonts:Times New Roman, Georgia,… Sans Serif Fonts:Arial, Comic Sans, Verdana,… Script Fonts:Vlademir, , Edwardian,…

  14. Text Kerning is the spacing between character pairs Av Av Tr Tr Tracking is the spacing between characters Tighter TrackLooser Track Leading (pronounced “ledding” is the spacing between lines Tighter Leading Tighter Leading Looser Leading Looser Leading

  15. Choosing Text • For small type, use the most legible font available. Can you read me? 10-point Arial font Can you read me? 10-point Vlademir font • In text blocks, adjust the leading for the most pleasing line spacing. Too tightly packed lines are difficult to read. • In large-size headlines, adjust the tracking and kerning for the most pleasing character spacing. Don’t use big gaps between large letters. KEYBOARDING KEYBOARDING

  16. Choosing Text • Experiment different font colors on different background colors. Try reverse type pairs. Use the same size of background area. Good choices: Bad choices:

  17. Choosing Text • If you are going to use center alignment, keep the number of lines to minimum (3 lines or less) and use very long lines alternating with short lines Good choice: (lines differ in length) Department of Computer Graphics and Animation Bad choice: (each line is almost the same length) Department of Computer Graphics and Animation

  18. Choosing Text • Pick appropriate fonts to deliver the type of the message properly. e.g. for feminine, masculine, technical, formal, comic type of messages

  19. Try to learn about your users ! The more you learn about your users and their work, the more likely it is that you will develop a user-friendly website or software. Consider: • Age • Education • Cultural Differences • Physical Differences , etc. ….. of your users !

  20. That’s All Folks  Thanks for Listening and Good Luck !!!

More Related