Module 2nd USER INTERFACE DESIGN (15CS832) - VTU
Download as PPTX, PDF3 likes3,390 views
The document outlines a 14 step process for user interface design. Step 1 involves understanding the user through identifying their level of knowledge, tasks, psychological and physical characteristics. Important human characteristics for design discussed include perception, memory, visual acuity, foveal/peripheral vision, and information processing. Design must consider these characteristics to develop interfaces that are usable and allow users to perform skills efficiently.
Module 2nd USER INTERFACE DESIGN (15CS832) - VTU
- 1. The User Interface Design Process
- 2. 14 Steps for UI Development • Step 1: Know Your User or Client. • Step 2: Understand the Business Function • Step 3: Understand the Principles of Good Screen Design. • Step 4: Develop System Menus and Navigation Schemes. • Step 5: Select the Proper Kinds of Windows. • Step 6: Select the Proper Device-Based Controls. • Step 7: Choose the Proper Screen-Based Controls. • Step 8: Write Clear Text and Messages.
- 3. • Step 9: Provide Effective Feedback and Guidance and Assistance • Step 10: Provide Effective Internationalization and Accessibility. • Step 11: Create Meaningful Graphics, Icons, and Images. • Step 12: Choose the Proper Colors. • Step 13: Organize and Layout Windows and Pages. • Step 14: Test, Test, and Retest.
- 4. The User Interface Design Process – Part2 • Obstacles and Pitfalls in the Development Path • Designing for People: The Five Commandments • Usability • Common Usability Problems • Some Practical Measures of Usability • Some Objective Measures of Usability • The Design Team
- 5. Obstacles and Pitfalls in the Development Path • Nobody ever gets it right the first time.
- 6. • Development is chock-full of surprises. • filled to its limit
- 7. • Good design requires living in a sea of changes
- 8. • Making contracts to ignore change will never eliminate the need for change.
- 9. • Even if you have made the best system humanly possible, people will still make mistakes when using it.
- 10. • Designers need good tools.
- 11. • You must have behavioral design goals like performance design goals.
- 12. Common pitfalls
- 13. Designing for People: The Five Commandments • Gain a complete understanding of users and their tasks. • A wide gap in technical abilities, goals, and attitudes often exists between users and developers • A failure to understand the differences will doom a product or system to failure. • Solicit early and ongoing user involvement. • Involving the users in design from the beginning provides a direct conduit to the knowledge they possess about jobs, tasks, and needs. • not status or position.
- 14. Designing for People: The Five Commandments • Perform rapid prototyping and testing • Modify and iterate the design as much as necessary • Integrate the design of all the system components.
- 15. Usability • Shackel (1991) simply defined usability as “the capability to be used by humans easily and effectively, where, easily = to a specified level of subjective assessment, effectively = to a specified level of human performance.”
- 17. Common Usability Problems (GUI) • Ambiguous menus and icons. • Languages that permit only single-direction movement through a system. • Input and direct manipulation limits. • Highlighting and selection limitations. • Unclear step sequences. • More steps to manage the interface than to perform tasks. • Complex linkage between and within applications • Inadequate feedback and confirmation. • Lack of system anticipation and intelligence. • Inadequate error messages, help, tutorials, and documentation.
- 18. Common Usability Problems (WebUI) • Visual clutter. A lack of “white space,” • Impaired information readability • Incomprehensible components • Annoying distractions • Confusing navigation • Inefficient navigation • Inefficient operations • Excessive or inefficient page scrolling • Information overload.
- 19. Common Usability Problems (WebUI) • Design inconsistency • Outdated information • Stale design caused by emulation of printed documents and past systems.
- 20. Some Objective Measures of Usability
- 21. The Design Team
- 22. Step 1-Know Your User or Client • Understand how people interact with computers • Understand the human characteristics important in design • Identify the user’s level of knowledge and experience • Identify the characteristics of the user’s tasks and jobs • Identify the user’s psychological characteristics • Identify the user’s physical characteristics • Employ recommended methods for gaining understanding of users.
- 26. Important Human Characteristics in Design • Perception is our awareness and understanding of the elements and objects of our environment through the physical sensation of our various senses. • Perception is influenced in part by experience. • We classify stimuli based on models stored in our memories and in this way achieve understanding.
- 27. Important Human Characteristics in Design • Other Perceptual Characteristics include: • Proximity • we see objects as belonging together if they are near each other in space. • Similarity • We see objects as belonging together if they share a common visual property, such as color, size, shape, brightness, or orientation.
- 28. Important Human Characteristics in Design • Other Perceptual… • Matching Patterns • We respond similarly to the same shape in different sizes (i.e. the letters of the alphabet) • Succinctness • We see an object as having some perfect or simple shape because perfection or simplicity is easier to remember
- 29. Important Human Characteristics in Design • Other Perceptual… • Closure • Our perception is synthetic; it establishes meaningful wholes. If something does not close itself; we see it closed anyway. • Unity • Objects that form closed shapes are perceived as a group
- 30. Important Human Characteristics in Design • Other Perceptual… • Continuity • Shortened lines may be automatically extended • Balance • We desire stabilization or equilibrium in our viewing environment. Vertical, Horizontal and right angles are the most visually satisfying and easiest to look at.
- 31. Important Human Characteristics in Design • Other Perceptual… • Expectancies • Sometimes we perceive no what is there, but what we expect to be there. • Signals vs. Noise • Stimuli are called signals. (important) • Those that are not important or unwanted are called noise.
- 32. Important Human Characteristics in Design • Memory • The short-term memory limit is generally viewed as 7±2 “chunks” of information. • Knowledge, experience, and familiarity govern the size and complexity of the chuncks that can be recalled. • Short-memory last 15 to 30 seconds. • Long-term memory is thought to be unlimited. • Human active vocabulary (2,000 – 3,000 words) • Passive vocabulary (about 100,000) • Our power of recognition is much greater than our power of recall.
- 33. Important Human Characteristics in Design • Visual Acuity • The capacity of the eye to resolve details is called visual acuity. • Visual acuity is halved at a distance of 2.5 degrees from the point of eye fixation. • A five degree diameter circle centered around and eye fixation character on a display has been recommended as the area near that character.
- 34. Important Human Characteristics in Design • Visual Acuity • Assuming that the average viewing distance of a display screen is 19 inches, the size of the area on the screen of optimum visual acuity is 1.67 inches. 19”
- 35. Important Human Characteristics in Design • Visual Acuity • Assuming “average” character sizes and character and line spacing, the number of characters on a screen falling within the visual acuity circle is 88, with 15 characters being contained on the widest line. 3213123 54321212345 6543211123456 765432101234567 6543211123456 54321212345 3213123
- 36. Important Human Characteristics in Design • Foveal and Peripheral Vision • Foveal vision is used to focus directly on something • Peripheral vision senses anything in the area surrounding where we are looking • Provides clues to where the eye should go next • Foveal and Peripheral vision have a cooperative and competitive nature.
- 37. Important Human Characteristics in Design • Foveal and Peripheral Vision • Mori & Hayashi experimentally evaluated the effect of windows in both foveal and peripheral vision. • Performance of a foveal window deteriorates when there are peripheral windows. • Performance degradation is even greater if the information in the peripheral is dynamic.
- 38. Important Human Characteristics in Design • Sensory Storage • Is a buffer where automatic processing of information collected from our senses takes place. • “Cocktail party effect” (someone says your name in a party and you hear it… • Habituation.
- 39. Important Human Characteristics in Design • Information Processing • Higher level (slow, sequential) • Our first exposure to screens • Lower level (work in parallel) • Subsequent screens… • We look rather than see • We perceive rather than see • Visual distinctiveness in screen design is very important to process in the lower level
- 40. Important Human Characteristics in Design • Mental Model • A mental model is simply an internal representation of a person’s current understanding of something. • As a result of our experiences and culture we develop mental models of things and people we interact with. • The key to forming mental models is design consistency
- 41. Important Human Characteristics in Design • Learning • People prefer to be active, to explore, and to use a trial and error approach • People are very sensitive even to minor changes (Shift-Ins; Ctrl-C ) • The perception of having to learn a lot of information is enough to keep people from using the system. • Be consistent in your design • Allow skills acquired in one situation to be used in another somewhat like it.
- 42. Important Human Characteristics in Design • Skill • The goal of human performance is to perform skillfully. • Economy of effort is achieved by establishing a work pace that represents optimum efficiency. • It is accomplished by increasing mastery of the system through such things as progressive learning shortcuts, increased speed, and easier access to information or data. • Lower-order skills tend to become routine and may drop out of consciousness. • Screen design must permit development of increasingly skillful performance.
- 43. Important Human Characteristics in Design • Individual Differences • Tailor applications to the specific needs of people with varying and changing learning or skill level.
- 44. Important Human Characteristics in Design • Knowledge/Experience • Computer Literacy • System Experience • App. Experience • Task Experience • Education • Reading Level • Typing Skill • Native Language
- 45. Important Human Characteristics in Design • Job/Task • Type of System Use (Mandatory or Discretionary) • Frequency of Use • Turnover Rate • Task Importance • Task Structure (repetitiveness) • Primary Training • Job Category (Executive, Secretary, Clerk)
- 46. Important Human Characteristics in Design • Psychological Characteristics • Attitude (positive, neutral, negative) • Motivation (Low-High, Interest or Fear) • Cognitive Style (Concrete/Abstract, Analytic or Intuitive)
- 47. Important Human Characteristics in Design • Physical Characteristics • Gender • Age • Handedness • Physical Handicaps
- 48. Gaining Understanding of Users • Visit customer locations • Talk with users/direct contact • Observe users working (tasks, problems) • Videotape users working • Have users think aloud as they work • Try the job yourself • Use surveys/questionnaires (bigger sample) • Establish testable behavioral target goals • Involve user in the design process (avoid resistance to change)
- 49. Gaining Understanding of Users • Performance vs. Preference • Optimize preferences with performance • Where optimization is impossible, implement the feature that provides the best performance.
- 52. Step 2-Understand the Business Function
- 54. Business Definition and Requirements Analysis
- 56. Direct Methods - Individual Face-to-Face Interview
- 57. Telephone Interview or Survey • It must have structure and be well planned. • Arranging the interview in advance allows the user to prepare for it. • Telephone interviews are less expensive and less invasive than personal interviews.
- 59. Facilitated Team Workshop • less formal. • A common technique used in system requirements determination for many years, it is now being replaced (at least in name) by focus groups. • Team workshops have had the potential to provide much useful information. Like focus groups, they do require a great deal of time to organize and run.
- 60. Observational Field Study • Observation provides good insight into tasks being performed, the working environment and conditions, the social environment, and working practices. It is more objective, natural, and realistic
- 61. Requirements Prototyping • A demonstration model, or very early prototype, is presented to users for their comments concerning functionality.
- 63. Usability Laboratory Testing Card Sorting for Web Sites
- 65. Requirements Collection Guidelines • Establish 4 to 6 Different Developer-User Links • Provide the Most Reliance on Direct Links
- 66. Determining Basic Business Functions
- 67. Understanding the User’s Mental Model
- 68. Understanding the User’s Mental Model • A goal of task analysis, • goal of understanding the user, • A mental model is an internal representation of a person’s current conceptualization and understanding of something. • Mental models are gradually developed in order to understand • Mental models enable a person to predict the actions necessary to do things if the actions have been forgotten or have not yet been encountered.
- 69. Performing a Task Analysis -User activities are precisely described in a task analysis. -Task analysis involves breaking down the user’s activities to the individual task level. -interrelationships between people, objects, and actions, and the user’s conceptual frameworks. -The output of a task analysis is a complete description of all user tasks and interactions.
- 70. Developing Conceptual Models • The output of the task analysis is the creation, by the designer, of a conceptual model for the user interface. • A conceptual model is based on the user’s mental model. • mental models are influenced by a person’s experiences • The goal of the designer is to facilitate for the user the development of useful mental model of the system.
- 71. Guidelines for Designing Conceptual Models
- 72. Reflect the user’s mental model, not the designer’s • A user will have different expectations and levels of knowledge than the designer. So, the mental models of the user and designer will be different. • The user is concerned with the task to be performed, the business objectives that must be fulfilled.
- 73. Draw physical analogies or present metaphors • Replicate what is familiar and well known. • The success of graphical systems • A metaphor, to be effective, must be widely applicable within an interface • Metaphors that are only partially or occasionally applicable
- 74. Comply with expectancies, habits, routines, and stereotypes • Create a system that builds on knowledge, habits, routines, and expectancies that already exist. • Use familiar associations, avoiding the new and unfamiliar. With color, for example, accepted meanings for red, yellow, and green are already well established. • Use words and symbols in their customary ways. Replicate the language of the user, and create icons reflecting already known images.
- 75. Provide action-response compatibility • All system responses should be compatible with the actions that elicit them. Names of commands, for example, should reflect the actions that will occur. • The organization of keys in documentation or help screens should reflect the ordering that actually exists on the keyboard.
- 76. Make invisible parts of the system visible. • Systems are composed of parts and processes, • many of which are invisible to the user. In creating a mental model, a person must make a hypothesis about what is invisible and how it relates to what is visible. • New users of a system often make erroneous or incomplete assumptions about what is invisible and develop a faulty mental model. • As more experience is gained, their mental models evolve to become more accurate and complete.
- 77. Provide Proper and Correct Feedback • Provide a continuous indication of status • Provide visible results of actions • Display actions in progress. • Present as much context information as possible • Provide clear, constructive, and correct error messages
- 78. Avoid the unnecessary or irrelevant • Never display irrelevant information on the screen. • People may try to interpret it and integrate it into their mental models, thereby creating a false one. • Irrelevant information might be unneeded data fields, screen controls, system status codes, or error message numbers. If potentially misleading information cannot be avoided, point this out to the user.
- 79. Provide design consistency • . Design consistency reduces the number of concepts to be learned. Inconsistency requires the mastery of multiple models. • If an occasional inconsistency cannot be avoided, explain it to the user. For example, if an error is caused by a user action that is inconsistent with other similar actions, • explain in the error message that this condition exists. • This will prevent the user from falsely assuming that the model he or she has been operating under is incorrect
- 80. Provide documentation and a help system that will reinforce the conceptual model • Consistencies and metaphors should be explicitly described in the user documentation. • This will assist a person in learning the system. • Do not rely on the people to uncover consistencies and metaphors themselves. The help system should offer advice aimed at improving mental models.
- 81. Promote the development of both novice and expert mental models. • Novices and experts are likely to bring to bear different mental models when using a system. • It will be easier for novices to form an initial system mental model if they are protected from the full complexity of a system. • Employ levels of functionality that can be revealed through progressive disclosure.
- 84. Design Standards or Style Guides
- 85. Value of Standards and Guidelines
- 86. Business System Interface Standards and Guidelines • International Standards Organization (ISO),
- 87. Business System Interface Standards and Guidelines
- 88. Web Guidelines and Style Guides • World Wide Web Consortium (2001).
- 90. System Training and Documentation Needs • Training • Documentation