Design basics of human interfaceDr. Yan LiuDepartment of Biomedical, Industrial and Human Factors EngineeringWright State University2What is Design Achieving Goals within Constraints Goals: the purposes of the design Who is it for? Why do they want it? e.g. Suppose you are designing a wireless personal movie player, you may think about young affluent users wanting to watch the latest movie while on the move and perhaps wanting to share the experience with friends Constraints Material, cost, time, regulation, etc. Trade-off Choose which goals or constraints can be relaxed so that others can be met e.g. You may find that an eye-mounted video display, similar to those used in virtual reality, would give the most stable images while walking along. This, however, would not allow you to share the images with friends3The Golden Rule of Design Understanding the Materials A chair with a steel frame and a chair with a wooden frame are quite different. Often the steel frames are tabular or thin L or H section steel, whereas wooden chairs have thick solid legs. Why? What would happen if a wooden chair were made using the design for a metal one and vice versa? For HCI, the Materials are Human and Computer. Therefore, We Must Understand humans Psychological and social aspects, human error, etc. Understand computers  Limitations, capacities, tools, platforms, etc. Understand their interaction4To Err is Human More often than not accidents are inherent in poor design or installation of the human interfaces Bad interfaces are error-prone to use Bad interfaces cost money and lives It is the Nature of Humans to Make Mistakes Humans are not infallible consistent creatures Systems should be designed to reduce the likelihood of those mistakes and to minimize the consequences when mistakes happen The Core of Interaction Design  Put the user first Keep the user in the center Remember the user at the end5Cockpit Control Panels of B-17 Bombers in WWII It was cheaper and faster to design and build the panels using a series of closely spaced toggle switches. Unfortunately, two of these adjacent switches were the flaps and the landing gear. When they were initially deployed, it was not uncommon for a just-landed and taxiing B-17 to suddenly belly-flop onto the concrete when the pilot mistakenly hit the landing gear toggle instead of the one for the flaps.6Scenarios Scenario-Based Design (Carroll, 1995) Useful in situations when there is no detailed conception of exactly which work activities should be supported and in which way the system should be designed Scenarios Concrete stories about people’s activities in using the system e.g. Go to Wright State Wings website by typing its URL, enter user name, enter password, click Login button …. Presented with plain text descriptions, or supplemented with storyboards e.g. Sketches, simulated screen shots, etc.7Scenarios (Cont’d) Simple Yet the Most Flexible and Powerful Design Representation Understand users’ needs and the context the user is operating in What can they see? What can they do? What are they thinking? Communicate with others Concrete examples of use are far easier to share than abstract ideas Validate other models A detailed scenario can be played against various more formal representations Express dynamics Envision how the system behaves rather than merely a sense of what the system would look like8Scenarios (Cont’d) Linearity of Scenarios Each scenario represents a single path among all the potential interactions Pros Life and time are linear Easy to understand linear stories and narratives Cons No alternatives  Real interactions that have choices can not be demonstrated Miss unintended actions by users Use several scenarios9Navigation Design Navigation  The ability to find one’s way around an application (e.g. website) Think about structure Local structure  Structure of one screen or page Global structure Structure of entire application, movement between screens or pages Wider still Relationships between different applications10Local Structure Go-Seeking Behavior Users have some idea of what they are after and a partial model of the system, and meander through the system to try to get closer to their goals System needs to give the users enough knowledge to help them get closer to their goalsStartGoal11Local Structure (Cont’d) Four Design Rules Users should know where they are The page or screen should make clear where the users are in terms of the interaction or state of the system e.g. Some web pages show “breadcrumbs” at the top of the screen, the path of the titles which indicate where the page is in the entire website Users should know what they can do What can be pressed or clicked to go somewhere or do something Users should know where they are going (or what will happen) Where they will be taken after clicking a button or a link Icons that are not self-explanatory should always be accompanied by labels or at the very least tooltips or some similar techniques Users should know where they have been (or what they have done) The system should give feedback or confirmation of what the users have done e.g. Most web browsers offer a history system and also a “back” button that keeps a list of recently visited pages12websitetop level categorysub-categorythis pagelive linksto higher levels“Breadcrumbs” Showing Path Through the Website Hierarchy13Global Structure (Cont’d) Overall Structure of An Application The way how various screens, pages or device states link together Hierarchy Organization Usually by functions of system elements, but can also by roles, user types, modules, etc.The systeminfo and help management messagesadd user remove userFunctional Hierarchy of a Messaging System14Global Structure (Cont’d) Hierarchy Organization (Cont.) Detailed knowledge of the intended user is essential Different people may have different internal structures for their knowledge and may use different vocabulary It is not good to create a hierarchy that the designer understands but not the users Deep hierarchies are difficult to navigate It is better to have broad top-level categories or to present just a few levels of menu on one screen or web page15Global Structure