IT114 MIDTERM REVIEWER.pdf

IT 114 MIDTERM EXAM REVIEWER Lesson 1.2: INTERFACE Interfaces types: Command Line Interfaces - Early interfaces required the user to type in commands Graphical User Interface - opening new possibilities for users to interact with a system - Xerox Star interface led to the birth...

IT 114 MIDTERM EXAM REVIEWER Lesson 1.2: INTERFACE Interfaces types: Command Line Interfaces - Early interfaces required the user to type in commands Graphical User Interface - opening new possibilities for users to interact with a system - Xerox Star interface led to the birth of GUI Multimedia - combines different media within a single interface, namely, graphics, text, video, sound, and animation. Virtual Reality - computer-generated graphical simulations to create “the illusion of participation in a synthetic environment. Website Design - develop sites that are not only usable but also aesthetically pleasing. Mobile Devices – become pervasive, with people increasingly using them in all aspects of their everyday and working lives. Appliances - include machines for everyday use in the home Voice User Interfaces – involves a person talking with a spoken language app. Pen-Based Devices - enable people to write, draw, select, and move objects on an interface using light pens. Touchscreens - used in walk-up kiosks such as ticket machines or museum guides, ATMs, and cash registers Gesture-Based System - involve moving arms and hands to communicate Haptic Interfaces - provide tactile feedback, by applying vibration and forces to the person. Multimodal Interface - intended to enrich user experiences by multiplying the way information is experienced and controlled at the interface Shareable Interfaces - designed for more than one person to use, typically provide multiple inputs  Tangible Interfaces - use sensor-based interaction, where physical objects, such as bricks, balls, and cubes Augmented Reality – an overnight success with the arrival of Pokémon Go in 2016 and AR works by superimposing digital elements. Wearables - broad category of devices that are worn on the body. Robots and Drones - play an important role as part of manufacturing assembly lines. Brain-Computer Interfaces - provide a communication pathway between a person’s brain waves and an external device. Smart Interfaces - The motivation for many new technologies is to make them smart. Natural user interface (NUI) - allow people to interact with a computer in the same way that they interact with the physical world—using their voice, hands, and bodies. - enable users to speak to machines, stroke their surfaces, gesture at them in the air, dance on mats that detect feet movements, smile at them to get a reaction, and so on. ---------------------------------------------------------------------------------------------------- Lesson 1.3: GOOD AND POOR DESIGN Voice Mail System - It is infuriating. - It is confusing. - It is inefficient, requiring you to carry out a number of steps for basic tasks. - It is difficult to use. The Marble Answering Machine - created by Durrell Bishop while he was a student at the Royal College of Art in London (described by Crampton Smith, 1995). - It is aesthetically pleasing and enjoyable to use. - It requires only one-step actions to perform core tasks. - It is a simple but elegant design.  - It offers less functionality and allows anyone to listen to any of the messages. The Remote Control - find it difficult to locate the right ones - frustrating for those who need to put on their reading glasses each time to read the buttons. The Universal Remote Control - Simply touch one icon and the Harmony remote will power on all the necessary components Large, color icons and backlit buttons ensure an entirely new. What Is the Best Way to Interact with a Smart TV? - An alternative is to use voice control. - Smart speakers Internet of Things (IoT) – means that many products and sensors can be connected to each other via the Internet, which enables them to talk to each other. - Popular household IoT-enabled products include smart heating and lighting and home security systems where users can change the controls from an app on their phone or check out who is knocking on their door via a doorbell webcam. ---------------------------------------------------------------------------------------------------- Lesson 2.1: BASIC INTERACTION TASKS Command language (or command entry) - earliest form of interaction style and is still being used, though mainly on Linux/Unix operating systems. - used by (usually) expert users who type in commands. - places a considerable cognitive burden on the user in that the interaction style relies on recall as opposed to recognition memory. Advantages and disadvantages: Advantages  - Flexible. - Appeals to expert users. - Supports creation of user-defined "scripts" or macros. Disadvantages - Retention of commands is generally very poor. - Learnability of commands is very poor. - Error rates are high. Form filling - (also called "fill in the blanks") was aimed at a different set of users than command language, namely non-experts’ users. Advantages and disadvantages: Advantages - Simplifies data entry. - Shortens learning in that the fields are predefined and need only be 'recognized'. Disadvantages - Consumes screen space. - Usually sets the scene for rigid formalization of the business processes. Menu selection - set of options displayed on the screen where the selection and execution of one (or more) of the options results in a state change of the interface (Paap and Roske-Hofstrand, 1989, as cited in Preece et al. 1994). Advantages and disadvantages: Advantages - Ideal for novice or intermittent users. - Structures decision making. - Can appeal to expert users if display and selection mechanisms are rapid and if appropriate "shortcuts" are implemented.  Disadvantages - Too many menus may lead to information overload or complexity of discouraging proportions. - May be slow for frequent users. Direct manipulation - central theme in interface design and is treated in a separate encyclopedia entry. - introduced by Ben Shneiderman in his keynote address at the NYU Symposium on User Interfaces (Shneiderman 1982) and more explicitly in Shneiderman (1983). - Characteristics: - Visibility of the object of interest. - Rapid, reversible, incremental actions. Advantages and disadvantages: Advantages - Visually presents task concepts. - Easy to learn. - Errors can be avoided more easily. Disadvantages - May be more difficult to program. - Not suitable for small graphic displays. - Spatial and visual representation is not always preferable. ---------------------------------------------------------------------------------------------------- Lesson 2.2: D E S I G N, PROTOTYPING, AND CONSTRUCTION Two aspects to designs: Conceptual part – focuses on the idea of a product. Concrete aspect - focuses on the details of the design. DESIGNING - practical and creative activity with the aim of developing a product that helps its users achieve their goals. User-centered design rests on three principles: - early focus on users and tasks - empirical measurement - iterative design Some Practical Issues in Designing: Who are the users? What do we mean by needs? How do you generate alternative designs? How do you choose among alternatives? - Before you can begin to establish requirements, you must understand who the users are and what their goals are in using the product. - Looking at others’ designs and involving other people in design provides useful inspiration – key to effective design. PROTOTYPING - often said that users can’t tell you what they want, but when they see something and get to use it, they soon know what they don’t want. - Prototype - manifestation of a design that allows stakeholders to interact with it and to explore its suitability. - a paper-based outline of a display, a collection of wires and ready-made components, an electronic picture, a video simulation. - Donald Schön (1983) described the activity of building prototypes encourages reflection in design Why Prototype? - Prototypes are useful when discussing or evaluating ideas with stakeholders; they are a communication device among team members and an effective way for designers to explore design ideas. LOW-FIDELITY PROTOTYPING - does not look very much like the final product, nor does it provide the same functionality. Ex: Storyboarding - Often used in conjunction with scenarios. Consists of a series of sketches showing how a user might progress through a task using the product under development. Sketching - often relies on hand-drawn sketches. Sketching is not about drawing. Rather, it is about design. Prototyping with Index Cards - Using index cards (small pieces of cardboard about 3 × 5 inches) is a successful and simple way to prototype an interaction. Wizard of Oz - assumes that you have a software-based prototype. The user interacts with the software as though interacting with the product. HIGH-FIDELITY PROTOTYPING - looks more like the final product and usually provides more functionality than a low-fidelity prototype. Ex: - a prototype of a software system developed in Python or other executable language is higher fidelity than a paper-based mock-up. Compromises in Prototyping: the intention is to produce something quickly to test an aspect of the product Youn-Kiung Lim et al. (2008) - suggest an anatomy of prototyping that structures the different aspects of a prototype and what it aims to achieve. 3 key principles in their view of the anatomy of prototypes: Fundamental prototyping principle: Prototyping is an activity with the purpose of creating a manifestation that, in its simplest form, filters the qualities Economic principle of prototyping: The best prototype is one that, in the simplest and the most efficient way. Anatomy of prototypes: Prototypes are filters that traverse a design space and are manifestations of design ideas that concretize and externalize conceptual ideas. High-Fidelity VS Low-Fidelity Prototypes —--------------------------------------------------------------------------------------------------------- Lesson 3.1 OVERVIEW OF INTERACTION DESIGN Interactive Design - Designing interactive products to support the way people communicate and interact in their everyday and working lives. - Creating user experiences that enhance and augment the way people work, communicate, and interact. The Components of Interaction Design:  1. Understanding the User - A main reason for having a better understanding of people in the contexts in which they live, work, and learn is that it can help designers understand how to design interactive products that provide good user experiences or match a user’s needs. - Understanding individual differences can also help designers - Learning more about people and what they do can also reveal incorrect assumptions. - Being aware of cultural differences is also an important concern for interaction design - Understand in detail how people act and interact with one another 2. User Experience Goals - The user experience refers to how a product behaves and is used by people in the real world. - It as encompassing “all aspects of the end user’s interaction with the company, its services, and its products.” - It includes their overall impression of how good it is to use, right down to the sensual effect small details have on them The iPOD Phenomena - Apple’s classic (and subsequent) generations of portable music players, called iPods, including the iPod Touch, Nano, and Shuffle, released during the early 2000s were a phenomenal success. 3. Usability Goals - Usability refers to ensuring that interactive products are easy to learn, effective to use, and enjoyable from the user’s perspective. 6 Goals: Effective to use (Effectiveness) - is a general goal, and it refers to how good a product is at doing what it is supposed to do. Question: Is the product capable of allowing people to learn, carry out their work efficiently, access the information that they need, or buy the goods that they want? Efficient to use (Efficiency) - refers to the way a product supports users in carrying out their tasks. Question: Once users have learned how to use a product to carry out their tasks, can they sustain a high level of productivity? Safe to use (Safety) - involves protecting the user from dangerous conditions and undesirable situations. Question: What is the range of errors that are possible using the product, and what measures are there to permit users to recover easily from them? Having good utility (Utility) - refers to the extent to which the product provides the right kind of functionality so that users can do what they need or want to do. Question: Does the product provide an appropriate set of functions that will enable users to carry out all of their tasks in the way they want to do them?? Easy to learn (Learnability) - refers to how easy a system is to learn to use. Question: Is it possible for the user to work out how to use the product by exploring the interface and trying certain actions? How hard will it be to learn the whole set of functions in this way?? Easy to remember how to use (Memorability) - refers to how easy a product is to remember how to use, once learned. Question: What types of interface support have been provided to help users remember how to carry out tasks, especially for products and operations they use infrequently 4. Design Principles - used by interaction designers to aid their thinking when designing for the user experience. - generalizable abstractions intended to orient designers toward thinking about different aspects of their designs.  Ex: 1. Feedback: Products should be designed to provide adequate feedback to the users that informs them about what has already been done. 2. Findability (Morville, 2005): the degree to which a particular object is easy to discover or locate—be it navigating a website, moving through a building, or finding the delete image option on a digital camera. 3. Navigability - Is it obvious what to do and where to go in an interface; are the menus structured in a way that allows the user to move smoothly through them to reach the option they want? PRINCIPLES 1: VISIBILITY - The more visible functions are, the more likely it is that users will be able to know what to do next. PRINCIPLES 2: FEEDBACK - involves sending back information about what action has been done and what has been accomplished, allowing the person to continue with the activity. PRINCIPLES 3: CONSTRAINTS - refers to determining ways of restricting the kinds of user inter action that can take place at a given moment. PRINCIPLES 4: CONSISTENCY - designing interfaces to have similar operations and use similar elements for achieving similar tasks. PRINCIPLES 5: AFFORDANCE - an attribute of an object that allows people to know how to use it. For example, a mouse button invites pushing (in so doing, activating clicking). At a simple level, to afford means “to give a clue”’(Norman, 1988). —--------------------------------------------------------------------------------------------------------- Lesson 3.2 INTERACTION DESIGN IN PRACTICE: UX Deliverables Elements of User Experience: - Garrett’s 5 Elements of User Experience - Much like an iceberg, visual design is only the surface of user experience. Underneath, there is so much more including skeleton, structure, scope and strategy. These layers are by no means standalone, and influence each other. Strategy – User’s Needs and Project Objectives “If I had an hour to solve a problem I'd spend 55 minutes thinking about the problem and five minutes thinking about solutions.” — Albert Einstein By building (and reading) personas, storyboards and customer journey maps, you can get a better understanding about why you are designing, and for whom. 1. PERSONA - a fictional character which the designers build as a sort of user stereotype. It represents the typical users, their goals, motivations, frustrations and skills. 2. STORYBOARD - an idea borrowed from the movie industry. It essentially consists of a comic strip, outlining the user’s actions and circumstances under which these are performed. - helps visualize the users’ actions and also the environment in which they take place. 3. CUSTOMER JOURNEY MAP - a diagram that represents the steps (i.e., the process) taken by a user to meet a specific goal. By laying  the process out along a timeline, designers can understand the changes in the user’s context, and their motivations, problems and needs along the way. Scope – Features and Content Requirements - UX designers are asked to design certain features or work around pre-defined requirements. - A more experienced designers are involved in conversations about what those features and requirements might be. - Brainstorming sessions 1. BRAINSTORMING - a process whereby a team of designers generates ideas about how to address the issues and opportunities identified in the user research phase. USER RESEARCH - refers to the data collection and analysis activities necessary to characterize the users, their tasks, and the context of use. - Field studies and ethnography are often used in these investigations, but agile development works in short “timeboxes” of activity. - Sticky notes are incredibly useful in brainstorming sessions. Designers write down all of their ideas — one idea per sticky note. Sticky notes enable the team to move ideas around, grouping ideas into themes in real time while discussing them. 2. CONTENT STRATEGY - practice and process of ensuring that content is written, published, edited, repurposed and archived at the right time, and for the appropriate audience. - Important for a product that is content-heavy, such as an online magazine. Structure – Information Architecture and Interaction Design - The information architecture is analogous to the blueprint of a house. Larger UX teams might have specialist information architects and interaction designers, while in smaller teams, UX designers will likely perform these roles. - Use sitemaps and user flows. - Information architecture (IA) is the discipline of making information findable and understandable. 1. SITEMAPS - Like physical maps, they help users find their way through a website. - show hierarchy and navigation structure of a website or an application. Ex: 2. USER FLOWS - also known as a task flow diagram is a simple chart outlining the steps that a user has to take with your product or service in order to meet a goal. Ex:  Skeleton – Interface Design - User interface (UI) design is the process designers use to build interfaces in software or computerized devices, focusing on looks or style. 1. WIREFRAMES - Just as a sculptor creates a wireframe before slapping on clay to craft a statue, an interface designer too creates a wireframe before adding in the details. Wireframes are the first interface-related deliverables in the UX design process and are just a step away from the surface layer and visual design. They are the first tangible elements of the proposed ideas or solutions. - Good wireframing is the skill of creating lean layouts so your team and stakeholders can quickly determine if concepts are worth developing. 2. PROTOTYPES - simulation of the product or solution you want to build. It is an early version of a product or feature with which people can interact. - Low-Fidelity Prototypes - omits any visual design details and serves as a rough guide to allow designers to get a feel of how and where they should place content. - start as hand-drawn sketches - High-Fidelity Prototypes - step up from a low-fidelity prototype. They are often called pixel-perfect prototypes because they try to show all the visual and typographic design details of a product, as it would be shown on a real screen. - Information can refer to text, as well as audio-visual elements, such as animated gifs, explainer videos and voice-overs. Surface – Visual Design - the last detail added to a product. This is because the visuals (and sounds) depend on all the decisions taken beneath the surface.  1. MOCKUPS - Even though mockups look like screenshots from a completed, real app, they are little more than images. Unfortunately, many clients seem to believe that at this stage, you must be really close to actually finishing the whole project. - fully polished visual designs sometimes rendered in realistic devices that include branding, colors, images and typography. 2. DESIGN SYSTEMS - a library of reusable components and guidelines that people within a company can combine into interfaces and interactions. —------------------------------------------------------------------------------------------------- Lesson 4.1: Advanced HCI Evaluation Evaluation - is integral to the design process. It involves collecting and analyzing data about users’ or potential users’ experiences when interacting with a design artifact. - Focuses on both the usability of the system and on the user’s experiences when interacting with it. A central goal of evaluation is to improve the artifact’s design THE WHY, WHAT, WHERE, AND WHEN OF EVALUATION WHY EVALUATE? - User experience involves all aspects of the user’s interaction with the product. - Nowadays users expect much more than just a usable system - well-designed products sell well WHAT TO EVALUATE - What to evaluate ranges from low-tech prototypes to complete systems, from a particular screen function to the whole workflow, and from aesthetic design to safety features. WHERE TO EVALUATE - Where evaluation takes place depends on what is being evaluated. - Some characteristics, such as web accessibility, are generally evaluated in a lab because it provides the control necessary to investigate systematically whether all of the requirements are met. WHEN TO EVALUATE - The stage in the product lifecycle when evaluation takes place depends on the type of product and the development process being followed. - When evaluations are conducted during design to check that a product continues to meet users’ needs, they are known as formative evaluations. - Evaluations that are carried out to assess the success of a finished product are known as summative evaluations. TYPES OF EVALUATION THREE BROAD CATEGORIES: 1. Controlled settings directly involving users (examples are usability labs and research labs): Users’ activities are controlled to test hypotheses and measure or observe certain behaviors. - The main methods are usability testing and experiments. Involving Users: - Experiments and user tests are designed to control what users do, when they do it, and for how long. - Usability Testing 2. Natural settings involving users (examples are online communities and products that are used in public places): There is little or no control of users’ activities to determine how the product would be used in the real world. - The main method used is field studies (for example in-the-wild studies).  Involving Users: - The goal of field studies is to evaluate products with users in their natural settings. Field studies are used primarily to: - Help identify opportunities for new technology - Establish the requirements for a new design 3. Any settings not directly involving users: Consultants and researchers critique, predict, and model aspects of the interface to identify the most obvious usability problems. - The range of methods includes inspections, heuristics, walk-throughs, models, and analytics. Involving Users: - Evaluations that take place without involving users are conducted in settings where the researcher has to imagine or model how an interface is likely to be used. SELECTING AND COMBINING METHODS - The three broad categories identified previously provide a general framework to guide the selection of evaluation methods. —------------------------------------------------------------------------------------------------- Lesson 4.2: Evaluation of Interactive System Design Evaluation Process - By evaluation involves reviewing, trying out or testing a design idea, a piece of software, a product or a service to discover whether it meets some criteria. - These criteria will the guidelines for good design namely that the system is learnable, effective and efficient, etc. Purpose of Evaluation 1. Obtaining feedback to inform early design concepts. 2. Deciding between different design options  3. Checking for usability problems 4. Assessing the usability of a finished product 5. involving people in the design process Two Major Classification of Evaluation 1. Expert-based methods - involves a usability expert, or an interaction designer, reviewing some form of envisioned version of a design. - This can be done with a usability testing for expert to look at the system and try using it. - Getting real people to use your design in the design process. - Experts will pick up common problems based on their experience, and will identify factors that might otherwise interfere with an evaluation by non-experts. Ex: 1. Heuristic Evaluation - refers to a number of methods in which a person trained in HCI and interaction design examines a proposed design to see how it measures up against a list of principles, guidelines or ‘heuristics’ for good design. Process: 1. Several people with expertise in interactive systems design should review the interface. 2. Each expert notes the problems and the relevant heuristic, and suggests a solution where possible. 3. Evaluators work independently and then combine results. 4. Evaluators may need to work through any training materials and be briefed by the design team about the functionality. 2. Usability Engineering - It is a quick review of the design against this triad (learnability, effectiveness, satisfaction) can produce reasonably useful results. - This approach to evaluation was pioneered by Jakob Nielsen (1993)  - It is now used for any ‘quick and dirty’ approach to evaluation where the aim is to get useful, informed feedback as soon as possible. 3. Cognitive Walkthrough - is a rigorous paper-based technique for checking through the detailed design and logic of steps in an interaction. - Originally developed by Lewis et al. (1990) for applications where people browse and explore information. - based on well-established theory rather than the trial and error or a heuristically based approach. - A complete description of the interface to the system - hierarchical task analysis (HTA). - screen designs, and the correct sequence of actions for achieving the scenario tasks - The ‘cognitive jogthrough’ (Rowley and Rhoades, 1992) - video records (rather than conventional minutes) are made of walkthrough meetings, annotated to indicate significant items of interest, design suggestions are permitted, and low-level actions are aggregated wherever possible. - The ‘streamlined cognitive walkthrough’ (Spencer, 2000) - designer defensiveness is defused by engendering a problem-solving ethos, and the process is streamlined by not documenting problem-free steps and by combining the four original questions into two. 2. Participant methods - involves recruiting people to use an envisioned version of a system these people should be representative of the people at whom the system is aimed (sometimes called ‘end- users’). Participant-based Evaluation - Participant evaluation aims to involve some real people in the evaluation in various degrees of cooperation.  - The methods range from designers sitting with participants as they work through a system to leaving people alone with the technology Ex: 1. Cooperative Evaluation - Andrew Monk and colleagues (Monk et al., 1993) at the University of York (UK) developed cooperative evaluation as a means of maximizing the data gathered from a simple testing session. - The technique is ‘cooperative’ because participants are not passive subjects but work as co-evaluators. 2. Participatory Heuristic Evaluation - The developers of participatory heuristic evaluation (Muller et al., 1998) claim that it extends the power of heuristic evaluation without adding greatly to the effort required. - just as for the expert version, but the participants are involved as ‘work-domain experts’ alongside usability experts and must be briefed about what is required. 3. Co-discovery - The term ‘co-discovery’ originates from Kemp and van Gelderen (1996). - a naturalistic, informal technique that is particularly good for capturing first impressions. - The standard approach of watching individual people interacting with the technology, and possibly ‘thinking aloud’ as they do so. 4. Controlled Experiments - are appropriate where the designer is interested in particular features of a design, perhaps comparing one design to another to see which is better. - A controlled experiment will often result in some quantitative data: the measures of the dependent values. Metrics and Measures - Some common usability metrics and ways in which they can be measured, adapted from the list provided in the usability standard ISO 9241 part 11 and using the usability definition of ‘effectiveness, efficiency and satisfaction’ adopted in the standard. Metrics - are helpful in evaluating many types of applications, from small mobile communication devices to office systems. Common Usability Metrics People - The most important people in evaluation are the people who will use the system. - characteristics of these people, and represented these in the form of personas. - skills relating to input and output devices, experience, education, training and physical and cognitive capabilities. - Nielsen’s recommended sample of 3-5 participants has been accepted wisdom in usability practice for over a decade. The Test Plan and Task Specification Aims of the test session Practical details, including where and when it will be conducted Numbers and types of participant Tasks to be performed, with a definition of successful completion. —------------------------------------------------------------------------------------------------- Lesson 5.1: VISUAL INTERFACE DESIGN User Interface - the interaction of people with devices - includes the crucial characteristics - physically, perceptually or conceptually. Physical Design - pressing buttons, touching a screen, moving a mouse - People interact physically through other senses, notably sound and touch. Perceptual Design - People interact with a system through what they can see, hear and touch. - The visual aspects of interface design will help people see and notice things on a screen. - Buttons - need to be big enough to see and they need to be labeled in a way that is understandable for people. - Instructions need to be given so people know what they are expected to do. - Displays of large amounts of information need to be carefully considered so that people can see the relationships Conceptual Design - People interact with systems and devices through knowing what they can do and knowing how they can do it.  - People employ a ‘mental model’ of what the device is and how it works. - People need to know that certain commands exist that will allow them to do things. - certain data - way to particular pieces - details of things, see an overview of things and focus on particular areas. The Skill of a User Interface Designer Interface design - is about creating an experience that enables people to make the best use of the system being designed. Graphic User Interfaces - found on every personal computer, on smartphones, on touchscreen displays and so on. Direct Manipulation - is one where objects - usually graphical objects on a screen - are directly manipulated with a pointing device. - Ben Shneiderman at the University of Maryland coined the term ‘direct manipulation’ in 1982. - 1. Continuous representation of the object of interest. - 2. Physical actions or labelled button presses instead of complex syntax. - 3 Rapid incremental reversible operations whose impact on the object of interest is immediately visible. WIMPs - stands for windows, icons, menus and pointers. Windows - means of sharing a device’s graphical display resources - workstation’s screen Icons - an image or symbol used to represent a file, folder, application - used to represent features and functions on everything from software applications  - Icons first appeared on the Xerox Star (Box 12.2) and became an important research issue in the 1980s and early 1990s 3 principal types of representation: Metaphor - relies on people transferring knowledge from one domain and applying it to another. - cut and paste Direct mapping - simplest technique in the design of icons - printer Convention - refers to a more or less arbitrary design of an icon in the first instance - save - representation of a floppy disk. Horton’s Icon Checklist - William Horton (of William Horton Consulting, Inc.) has produced a detailed checklist (1991) designed to help the icon designer avoid a whole raft of common mistakes. Menus - list of commands or options - A menu-driven interfaces are used by many applications of interactive systems to organize and store the commands that are available. - When creating menus, commands should be grouped into menu topics, which are a list of menu items. - Hierarchical menus are also called cascading menus. In a cascading menu, the sub-menu appears to cascade out when a choice is made from the higher-level menu. - A pop-up menu is distinguished from a standard menu in that it is not attached to a menu bar in a fixed location - The make-up of contextual menus varies according to the context (hence their name) from which they are invoked. Pointers - the mouse is the most widespread, but fingers are also used, as is the stylus. - The final part of the WIMP interface  - Remote pointers include the Wii wand and other infra-red pointers, for example for doing presentations. Interface Design Guidelines Style guides - provide a range of advice to the interface developer. - exist for the different kinds of windowing systems available and are occasionally written by specific software. - Grouping of elements and controls is also important. - Try to group information logically according to function or relationship. - The same applies to information: fields for name and address are generally grouped together, as they are closely related. Radio Buttons - to allow people to make exclusive choices Checkboxes - used to display individual settings that can be switched (checked) on and off. Toolbars - collection of buttons grouped according to function (in this respect they are conceptually identical to menus). - The buttons are represented as icons to give a clue as to their function. - Passing the mouse pointer over an icon will usually trigger the associated ‘tool tip’, which is a short textual label describing the function of the button. List Boxes - an accurately named widget as it is a box in which files and options are listed. - as lists (with more or less detail) - as icons or as thumbnails (little pictures of the files’ contents). Sliders - a widget that can return analogue values: rather than setting, say, the volume to 7 on a scale of 10, people can drag a slider to a position three-quarters of the way along a scale. Form Fill - an interface style that is particularly popular with Web applications. - used to gather information such as name and address a very typical example of a form fill interface. - best used when structured information is required. Wizards - name given to a style of interaction that leads people by the metaphorical hand (or pointer) step-by-step through a series of questions and answers, picklists and other kinds of widgets to achieve a task. - In MS Windows wizards are used to install hardware and applications. This style of interaction is widely used by all windowing systems. Psychological Principles and Interface Design Cooper et al. (2007) argues that visual interface design is a central component of interaction design as it combines graphic design, industrial design and visual information design. - Designers need to know about graphic design, - Designs should have a clear and consistent style. - Cooper recommends developing a grid system, such as wireframe, to help to structure and group objects at the interface. Guidelines from Perception A number of ‘laws’ of perception that have been developed by the ‘gestalt’ school of perception. Perception research also provides other fundamental aspects of people’s abilities that should be considered when designing visual interfaces. 1. Using proximity to organize buttons - One of the Gestalt principles of perception is the observation that objects appearing close together 2. Using similarity to organize files - A second Gestalt law is that of similarity. 3. Using continuity to connect disconnected elements - A third Gestalt law is continuity. Disconnected elements are often seen to be part of a continuous whole.  4. Closure - This particular law refers to the fact that it has been found that closed objects are easier to perceive than those that are open. - Ex: Finder application Principles from Memory and Attention 1. Short-term (or working) memory - George Miller (1956) found that short-term memory is limited to only 7 ±2 ‘chunks’ of information. - suggest that menus should be restricted to about seven items, or Web navigation bars should be seven items. 2. Chunking - process of grouping information into larger, more meaningful units, thus minimizing the demands on working memory. - Ex: the grouping of meaningful elements of a task into one place (or dialogue) 3. Timeliness - Memories, particularly those in short-term or working memory, are surprisingly short-lived, and even in ideal conditions they will persist for only 30 seconds. - So, it is essential to make important information presented persist. 4. Recall and recognition Recall - is the process whereby individuals actively search their memories to retrieve a particular piece of information. Recognition - involves searching your memory and then deciding whether the piece of information matches what you have in your memory store. - generally easier and quicker than recall. 5. Designing for Memory - Example of designing for memory and embodies a whole series of design principles reflecting good design practice. - The palette has been designed to use recognition rather than recall. The drop-down menus for style, name and size remove the need to recall the names - The palette has been organized into four chunks - font, alignment and spacing, borders and shading, and document - The use of meaningful associations: B stands for bold, for italic. 6. Thumbnails - The recent use of thumbnails is another example of how recognition is more effective than recall. - Ex: My Pictures of a computer running the Windows 7. Picklist - have two clear advantages over simply asking someone to recall a specific name, or any other piece of data. 8. Designing with color - Color is very important to us. To describe someone as being colorless is to say that they are without character or interest. - Aaron Marcus’s excellent book Graphic Design for Electronic Documents and User Interfaces (Marcus,1992) provides the following rules. 9. Error avoidance design guidelines - The following design guidelines have been drawn from Reason and Norman’s design principles for minimizing error: - Use knowledge both in the world and in the head in order to promote a good conceptual model of the system; - Simplify the structure of tasks so as to minimize the load upon vulnerable cognitive processes such as working memory, planning or problem solving. - Make both the execution and the evaluation sides of an action visible. - Visibility in regard to the former allows users to know what is possible and how things should 10. Error message design guidelines  - Take care with the wording and presentation of alerts and error messages. - Avoid using threatening or alarming language in messages - Do not use double negatives as they can be ambiguous. - Use specific, constructive words in error messages - Make the system ‘take the blame’ for errors User Experience Guidelines for iOS applications —------------------------------------------------------------------------------------------------- Lesson 5.2: DESIGNING WEBSITES Website - One of the most likely things that interactive system designers will design - Albert Badre (2002) identifies four main genres of websites: News, Shopping, Information and Entertainment. - effective, learnable and accommodating. Important aspect for designing a website: information architecture information design navigation design. Website Design - needs to follow sound design principles and will include the development of personas, scenarios and a clear design language. Website Content Website Development 1. know who is going to use the site and what they are going to use it for. 2. well focused with clear objectives. 3. develop personas of the people who will use the website and how to move around a website become important; navigation is a central concern. 4. Using meaningful URLs - Jesse James Garrett (Garrett, 2003) conceptualizes the development of a website in terms of five elements: Strategy - The bottom layer is the ‘strategy plane concerned with understanding the overall objective of the website  - concerned with business goals, the organization’s brand and a market analysis. Scope - where the emphasis is on functionality (what the site will let people do) and on content (the information the site will hold). - The result -> prioritized set of requirements. Structure - covers information architecture but also includes specifying the interaction design. - The key feature here is to establish a clear conceptual model. Skeleton - The ‘skeleton’ plane is concerned with: 1. information design, 2. navigation design 3. interface design. - A key technique for bringing all these elements together is the ‘wireframe’. Surface - concerned with the aesthetics of the site and with ensuring that good design guidelines are followed. - Consistency and appropriateness of the presentation are critical here. - The visual design - Ex: links  Style sheets - An effective way of achieving this consistency. - Just as the wireframe specifies the structure, so the style sheet specifies the visual language used. World Wide Web Consortium (W3C) - promoted the use of style sheets on the Web since the Consortium was founded in 1994. - responsible for developing the CSS Information Architecture of the Website Information architecture - concerned with how the content is classified and organized. Information architecture - concerned with understanding the structure and organization of the content of the site. Information architecture for websites is to do with: how the content of the site is organized and described: how to organize the content (i.e. create a taxonomy), how to label the items and categories, how to describe the content in the site and how to present the architecture to users and to other designers. Classification Schemes - crucial to how easy it is to retrieve an instance of an object. - Nathan Shedroff (2001) suggests that there are seven organizational schemes: alphabets, locations, time, continuums (i.e. using some rating scale to rank instances), numbers, categories and randomness. 1. Alphabetical - very common organizational scheme, of course, and is exploited in all manner of information artifacts such as phone books, book stores and directories of all kinds.  2. Chronological organization - is suitable for historical archives, diaries and calendars, and event or TV guides 3. Geographical organization - suits travel subjects, social and political issues and regional organizations such as wine sites, local foods, etc. 4. Organization by topic or subject - is another popular way to structure information, but here it is important to prototype the names of topics with the potential users of a site. 5. Task organization structures - the website by particular activities that people may want to do (‘Buy ticket’; ‘Contact us’). 6. Audience - is another popular structuring method. This can be very effective when there are a few well-defined types of user. 7. Hybrid schemes - can be (and often are) used to mix these types of organization together. Faceted Classification - Any website can be described in terms of three key features: its dimensions, the facets (or attributes) of those dimensions and the values that these facets can take. - The dimensions come from the ontology - the major concepts in the site. - travel site - has dimensions of cars, flights, hotels and so on that serve as titles for the tabs along the top. Organizational Structure - A hierarchical structure (also sometimes called a ‘tree’, although it is an upside-down tree) arranges the pages with a single root at the top and a number of branches under neath, each of which has several sub-branches. - Ex: Music website - Networks are structures in which the same item may be linked into several different hierarchies. - Organizing pages into a sequence is ideal for dealing with a straightforward task structure Meta data - means data about data and in the case of websites this means data about the content of the site. - increasingly important with the ubiquitous use of tags. - used by search engines Vocabularies - A taxonomy is a classification scheme. There are many different types that serve many different purposes. One of the most famous is the Dewey Decimal Classification that is used to classify books in libraries. Navigation design for Website - The design of navigation mechanisms is the second main pillar of information architecture. Brinck et al. (2002) - Memorization (‘use distinctive landmarks and orientation cues’). Along with Morville and Rosenfeld (2006) they identify three key features of a good navigation design for websites: labeling, navigation support and searching mechanisms. Labelling - Labels are used for internal and external links, headings and subheadings, titles and related areas. Not all labels are text and iconic labels can be very useful if the context and design are clear. Navigation Support - It is common to have a navigation bar across the top of a site that points to the main, top-level categories. This is often called the global navigation bar. - Global navigation is provided by the tabbed bar across the top and covers the whole site. It is supplemented by a navigation bar that drops down when clicked (on the right- hand side). Searching - One of the significant features of the Web as an information space is that many sites support searching. - Search engines can be bought; the better ones are quite expensive but are also effective. - There are two main problems with searching a website. The first is knowing exactly what sort of documents the search engine is  searching. The second is how to express combinations of search criteria. Web Analytics Website Evaluation