Interaction Design Basics Lecture 6 PDF

Interaction Design Basics Lec (6) Dania Mohamed Ahmed  Introduction Interaction design is a multifaceted field that emphasizes not just the creation of interfaces or physical devices, but a comprehensive understanding of how these e...

Interaction Design Basics Lec (6) Dania Mohamed Ahmed  Introduction Interaction design is a multifaceted field that emphasizes not just the creation of interfaces or physical devices, but a comprehensive understanding of how these elements fit into the broader context of users' workflows and experiences. It’s about crafting seamless interactions that integrate well with users’ needs and existing tools. Sometimes, interaction designers may find that no additional system is needed at all; instead, they may propose innovative ways to use existing tools more effectively. This holistic approach ensures that designs align with user needs, enhance usability, and empower users to achieve their goals efficiently and intuitively.  What is Design? A simple definition is: achieving goals within constraints To focus us on certain things: ⁃ Goals What is the purpose of the design we intend to produce? Who is it for? Why do they want it? For example, if we are designing a wireless personal movie player, we may think about young affluent users wanting to watch the latest movies whilst on the move and download free copies, and perhaps wanting to share the experience with a few friends. ⁃ Constraints What materials must we use? What standards must we adopt? How much can it cost? How much time do we have to develop it? Are there health and safety issues? In the case of the personal movie player: does it have to withstand rain? Must we use existing video standards to download movies? Do we need to build in copyright protection?  Interaction Design Basics Design: what it is, interventions, goals, constraints The design process: what happens when Users: who they are, what they are like … Scenarios: rich stories of design Navigation: finding your way around a system Iteration and prototypes: never get it right first time!  Golden rule of design Understand your materials 1. Understand computers Limitations, capacities, tools, platforms 2. Understand people Psychological, social aspects Human error And their interaction …  The process of design Here we will take a simplified view of five main phases plus an iteration loop, focussed on the design of interaction  Steps … 1. Requirements (what is there and what is wanted …) The first stage is establishing what exactly is needed. It is usually necessary to find out what is currently happening as a precursor to this. There are many techniques used for this in HCI: interviewing people, videotaping them, looking at the documents and objects that they work with, and observing them directly. 2. Analysis (ordering and understanding) The results of the observation and interview need to be ordered in some way to identify key issues and communicate them with the later stages of the design 3. Design (what to do and how to decide) This is all about design, but there is a central stage when you move from what you want, to how to do it. There are numerous rules, guidelines and design principles that can be used to help with this and Chapter 7 discusses these in detail; whilst Chapter 10 looks at how to design taking into account many different kinds of user. We need to record our design choices in some way and there are various notations and methods to do this, including those used to record the existing situation.  Steps … 4. Iteration and prototyping (getting it right … and finding what is needed!) The passage underscores the iterative nature of design due to the complexity of human behavior. It emphasizes the importance of evaluating designs to identify strengths and areas for improvement, with Chapter 9 detailing various evaluation techniques. While initial evaluations can use paper designs, true user feedback often requires prototyping—creating early system versions for testing with actual users. This iterative process is essential in user interface design to refine and enhance usability effectively. 5. Implementation and deployment (making it and getting it out there) Finally, when we are happy with our design, we need to create it and deploy it. This will involve writing code, perhaps making hardware, writing documentation and manuals – everything that goes into a real system that can be given to others.  User Focus Over time many people are affected directly or indirectly by a system and these people are called stakeholders. Obviously, tracing the tenuous links between people could go on for ever and you need to draw boundaries as to whom you should consider. This depends very much on the nature of the systems being designed, but largely requires plain common sense.So, how do you get to know your users?  Who are they?  Probably not like you!  Talk to them.  Watch them.  Use your imagination.  User Focus  Who are they? To design effective software or websites, it's crucial to understand your users by identifying their demographics and skill levels. This insight may change as you gain more context about the system. For products with diverse audiences, like word processors or general websites, it’s more practical to focus on multiple specific users with varied needs and goals rather than a single "generic user." This approach leads to design decisions that better address the diverse expectations of your user base.  Probably not like you! Designers frequently project their own perspectives onto their designs, assuming their preferences and skills are universal, which can introduce biases. The predominance of male developers can exacerbate this issue. Research shows that women often have greater empathetic skills, highlighting the importance of including diverse viewpoints. To address a broad range of user needs effectively, designers should actively seek and incorporate diverse perspectives.  User Focus  Talk to them. To understand users effectively, engage with them directly through methods like structured interviews and open discussions, or involve them in the design process. This approach offers valuable insights into their needs and work context, leading to better designs and fostering user investment. When users are involved, they are more likely to support and use the system actively. Involvement also reveals how things work beyond official policies, highlighting the importance of building trust to gain honest insights. Understanding these user perspectives can significantly improve both the design process and the system's success in real-world use.  User Focus  Watch them. Although what people tell you is of the utmost importance, it is not the whole story. It is important to watch what people do as well as hear what they say. This may involve sitting and taking notes of how they spend a day, watching particular activities, using a video camera or tape recorder. It can be done in an informal manner or using developed methods.  Use your imagination. When involving many users directly in the design process is impractical due to constraints like cost, time, or a large user base, designers can still create effective designs by using personas. Personas are detailed profiles of fictional individuals representing key characteristics of the core user group. This strategy helps design teams focus on user needs and behaviors, ensuring that designs align closely with their intended audience even without direct user involvement.  Scenarios Scenarios are detailed stories of user interactions with a system, serving as a flexible and powerful design tool. They help designers visualize potential problems and ensure the design aligns with user intentions by describing specific interactions, such as pressing the wrong button. Scenarios are a resource that can be used and reused throughout the design process: helping us see what is wanted, suggesting how users will deal with the potential design, checking that proposed implementations will work, and generating test cases for final evaluation.  Scenarios Scenarios can: 1. Enhance Communication: Provide concrete examples to improve understanding among designers, clients, and users, reducing misunderstandings. 2. Validate Models: Compare scenarios with formal design representations to refine ideas and meet requirements. 3. Express Dynamics: Illustrate how a system behaves over time and in various contexts, offering a comprehensive view of its performance and usability. While linear scenarios are easy to grasp and useful for storytelling, they may not capture the complexity of real interactions, which often involve multiple choices and paths. Despite their limitations, scenarios are valuable throughout the design process for visualizing needs, checking implementations, and generating test cases.  Navigation Design local structure – single screen global structure – whole site  levels In design, the focus extends beyond just computer systems or devices to include broader socio-technical interventions. As design progresses, attention shifts to the tangible results of these efforts. For example, using a word processor involves multiple layers of interaction: 1. Widgets: The design and labeling of widgets and menu items guide users on how to perform specific tasks. 2. Screens or Windows: Users navigate through screens and windows to find and understand the layout of controls and buttons. 3. Navigation: Users need to understand the effects of their actions and stay aware of their position within the application. 4. Environment: The word processor interacts with documents on local or remote storage, and users manage actions like cut and paste within a dynamic digital context. In essence, these layers collectively influence how effectively users interact with the software.  Levels of interaction You can see similar levels in other types of application and device, as Table shows. There are differences; for example, in the web we have less control of how people enter a site and on a physical device we have the same layout of buttons and displays no matter what the internal state (although we may treat them differently). PC application Website Physical device Widgets Form elements, tags and links Control (Buttons, dials, lights, displays) Screen design Page design Physical layout Navigation design Site structure Main modes of device Other apps and operating The web, browser, external The real world! system links  Think About Structure This section focuses on screen design, particularly navigation design, examining how main screens or modes are interconnected and how they fit into the broader environment. To effectively structure an application, designers should first understand its actual use by considering: Who will use the application? How do they perceive it? What tasks will they perform with it? Addressing these questions helps create intuitive navigation and screen layouts that meet user needs and enhance usability. The next step involves thinking about structure, which includes: 1. Local Structure: The organization and layout within individual screens or pages. 2. Global Structure: The overall organization of the site or application and the movement between screens. This approach ensures that both the individual screens and the overall system are well-structured to support user interaction.  Local structure Interaction in design often centers on goal-seeking behavior, where users have a general idea of their objectives and some understanding of the system. Ideally, with perfect knowledge, users would navigate directly to their goals through the shortest path. However, due to incomplete information or uncertainties, users often take more indirect routes. The key to effective user interaction is not just the efficiency of reaching a goal but also the ability to evaluate progress at each step. Designers should focus on creating interfaces that provide clear feedback and intuitive navigation cues. This helps users assess their progress and adjust their actions, leading to a more satisfying and effective user experience.  Local structure goal start To do this goal seeking, each state of the system or each screen needs to give the user enough knowledge of what to do to get closer to their goal.To get you started, here are four things to look for when looking at a single web page, screen or state of a device:  knowing where you are  knowing what you can do  knowing where you are going – or what will happen  knowing where you’ve been – or what you’ve done  Local structure Screen, web page, or device displays should clearly indicate the user's current position within the system. Features like "bread crumbs" at the top of a website help users understand their location within the site. It's also important for users to know which elements are interactive, such as buttons or links, as some pages may obscure which images are clickable versus decorative. Standard practices like underlined links help clarify which text is clickable. Additionally, users need to know the outcome of their interactions, such as what will happen when they click a button. In cases where actions have immediate effects, it’s helpful if the system provides an easy way to undo actions. This is especially crucial in systems with slow response times, where the "try it and see" approach can be frustrating. Clear indications of interactivity and feedback mechanisms improve user experience by reducing uncertainty and enhancing navigation.  where you are – breadcrumbs top level category sub-category web site this page live links to higher levels  Local structure After performing a major action, users need confirmation of what has happened, as most do not have perfect knowledge of the system's internal state or external factors that could affect it. Feedback is essential for users to understand the outcome of their actions. Additionally, in information systems, it is important to help users track their navigation history to avoid feeling disoriented or "lost in hyperspace." Features like history systems and "back" buttons in web browsers assist users by keeping a record of recently visited pages and helping them navigate their information space effectively.  Global structure– hierarchical organization The structure of an application involves organizing how different screens, pages, or states are interconnected, often using a hierarchical approach based on functional boundaries, user roles, or system modules. This hierarchy groups related elements into logical structures, which can shape the design and implementation of menus or navigation systems. For example, a hierarchical breakdown of a messaging system can guide both the design and navigation of the application. Establishing these hierarchies helps create intuitive pathways for users, simplifying navigation and improving the overall user experience by offering clear, logical routes to various functionalities or content areas. Global structure– hierarchical organization Figure below illustrates a hierarchical breakdown of a messaging system, which can aid in both design and actual implementation. This structure might directly influence the menu layout of a desktop application or the navigation structure of a website.  Global structure – dialog Global structure in dialog design involves organizing and connecting different dialogs within a software application or system to ensure clarity and efficiency. This framework includes the arrangement of dialog boxes, windows, or screens to facilitate user interactions. Beyond hierarchical links, detailed interactions—like editing or deleting records—follow a specific flow that isn’t strictly hierarchical. In Human-Computer Interaction (HCI), the term “dialog” describes these patterns of user-system interactions. To fully describe a system, it’s essential to account for various paths and loops within it. A network diagram can be a useful tool here, showing principal states or screens connected with arrows. This diagram can illustrate:  How different elements are connected  The sequence of events  Branches and loops  Task-oriented interactions, rather than just hierarchical structure.  Network of screens/states The network diagram illustrates the main screens involved in adding or deleting a user from the messaging system. Arrows indicate the general flow between these states. From the main screen, users can navigate to either the ‘remove user’ screen or the ‘add user’ screen, typically via buttons or links (details of which are left to detailed screen design). After using the ‘add user’ screen, the system returns directly to the main screen. However, following the ‘remove user’ screen, users encounter an additional confirmation screen.  Screen Design and Layout We have talked about the different elements that make up interactive applications, but not about how we put them together. A single screen image often has to present information clearly and also act as the locus for interacting with the system. This is a complex area, involving some of the psychological understanding as well as aspects of graphical design. The basic principles at the screen level reflect those in other areas of interaction design:  Ask: What is the user doing?  Think: What information is required? What comparisons may the user need to make? In what order are things likely to be needed?  Design: Form follows function: let the required interactions drive the layout.  Tools for layout We have many visual tools available to help us suggest to the user appropriate ways to read and interact with a screen or device: 1. Grouping and structure 2. Order of groups and items 3. Decoration 4. Alignment 5. White space  Grouping and structure If things logically belong together, then we should normally physically group them together. This may involve multiple levels of structure. For example, in Figure below, we can see a potential design for an ordering screen. Notice how the details for billing and delivery are grouped together spatially; also note how they are separated from the list of items actually ordered by a line as well as spatially. This reflects the following logical structure: Order: Administrative information Billing details Delivery details Order information Order line 1 Order line 2... Grouping and structure  Order of groups and items When designing user interfaces, it's essential to align the layout with the natural flow users expect. For instance, in a checkout process, users typically start with billing details, move to delivery details, and then review their order, which matches their mental model. For data entry forms or dialog boxes, setting the tab order to match this natural flow improves usability by allowing users to navigate efficiently with the tab key, reducing cognitive effort. In cases where critical steps need to be highlighted, such as entering credit card details, designers should enforce a specific sequence to ensure essential information is not overlooked. Designing interfaces that follow users' natural behavior and provide intuitive navigation results in a user-friendly and efficient experience, facilitating a smooth interaction from start to finish.  Decoration Again looking at the previous Figure, we can see how the design uses boxes and a separating line to make the grouping clear. Other decorative features like font style, and text or background colors can be used to emphasize groupings. Look at the microwave control panel in Figure. See how the buttons differ in using the foreground and background colors (green and gold) so that groups are associated with one another. See also how the buttons are laid out to separate them into groups of similar function. use boxes to group logical items use fonts for emphasis, headings ABCDEFGHIJKLM NOPQRSTUVWXYZ  Alignment In list design, alignment significantly affects readability and usability. Text items, such as names or descriptions, are best aligned to the left for easier reading. Conversely, numbers, including integers and decimals, should align to the right to help users quickly interpret numerical value. Managing lists with items like names can be challenging. In below Figure (i), a list sorted by surname only can make it difficult to locate specific individuals. To enhance usability, lists should be structured into columns, as shown in (ii), or consider reversing the order of forename and surname as depicted in (iii). This adjustment simplifies searching and improves the overall user experience. Alignment  Alignment When designing multiple-column lists. wide text columns can result in large gaps between columns, making it difficult for the eye to scan across rows (i). To mitigate this issue, several visual techniques can be employed: 1. Leaders (ii): Lines of dots can be used to connect related items across columns, aiding visual continuity. 2. Soft Tone Grays or Colors (iii): Applying subtle background colors or shading behind rows or columns can help differentiate and organize information. 3. Alternative Alignment (iv): Occasionally, right-aligning text items may be appropriate, particularly for numerical data, to facilitate quick scanning. However, this should be balanced with the need for easy retrieval of information like names, which are often not sorted in lists. Alignment  White space In design, the space between elements, known as counter in typography or negative space in painting, is crucial for balance and composition. Artists and typographers emphasize this space as much as the foreground elements. For instance, in painting, negative space around figures influences the composition's balance, while in typography, harmonious spacing within and between letters achieves visual balance. When designing screens or layouts, focusing on negative space rather than just the content can offer insights into the overall composition. Disconnected elements, when evaluated through their surrounding space, may reveal design issues. A useful technique is to slightly blur the screen by squinting to shift focus from content details and assess the broader layout structure. This helps ensure coherence and clarity, enhancing visual communication and user experience. White space  White space Space serves multiple functions in design, as illustrated in Figure. Firstly, it can delineate and separate blocks of content, such as paragraphs or sections in a report, enhancing readability and structure (i). Secondly, space can be employed to create more intricate layouts. In example (ii), there are four main areas (ABC, D, E, and F), with ABC further divided into A alone and B+C together, demonstrating hierarchical structuring through spatial arrangement. Thirdly, space can be utilized for emphasis and highlighting purposes, as seen in example (iii). This technique is commonly utilized in magazines to draw attention to specific quotes or graphics, enhancing visual hierarchy and guiding reader focus. The strategic use of space in design is crucial in organizing content, creating visual interest, and emphasizing key elements within a layout or composition.  physical controls Grouping of items type of food time to cook  physical controls grouping of items order of items 1) type of heating 2) temperature 1 3) time to cook 4) start 2 3 4  physical controls grouping of items order of items decoration different colours for different functions lines around related buttons (temp up/down)  physical controls grouping of items order of items decoration alignment centred text in buttons ? easy to scan ?  physical controls grouping of items order of items decoration alignment white space gaps to aid grouping  User action and control Entering Information Knowing What To Do Affordances  Entering Information A screen includes not only information for the user but also areas for input and option selection. Layout principles for data presentation also apply to data entry fields. Alignment remains crucial, and issues such as jagged text entry boxes due to varying field label lengths can be addressed by using right-justified text for labels or placing labels above and to the left of their corresponding fields in graphical interfaces. A logical and clear layout is essential for both presenting and entering information. Considering that users typically read from left to right and top to bottom (depending on their language), screens should be designed to present items in a logical sequence that aligns with the task, facilitating a smoother user experience.  Knowing what to do Screen elements can be passive (providing information) or active (requiring user interaction). Clearly distinguishing between these types is vital to avoid confusion. Platform and company style guides standardize the appearance of buttons and menus, aiding recognition. However, visual consistency alone is insufficient; clear labels and icons are crucial for usability. Established standards can help with common actions like saving or deleting, but for system-specific functions (e.g., a 'bold' button), it's important to specify whether the button indicates the current state or the action to be performed.  Affordances In multimedia applications, particularly those with unconventional designs, users may find it challenging to interact with elements if their functions are not clear. The concept of affordance suggests that the design of objects should intuitively indicate their use, such as a handle suggesting a pulling action. To make interactions intuitive, designers can either replicate real-world objects or emulate their essential features, but should avoid using real-world objects in ways that contradict their usual functions. Affordances are also shaped by users' backgrounds and cultural contexts. Experienced users recognize certain icons as clickable due to learned behavior, while novices might not. Similarly, while seasoned users understand that double-clicking is a common action to activate something, beginners might find it confusing, as double- clicking often deactivates physical buttons in the real world  Appropriate appearance Presenting Information Aesthetics And Utility Colour And 3D Localisation & Internationalisation  Presenting information The presentation of information on a screen depends on the type of information (e.g., text, numbers, maps, tables), the available technology (e.g., character display, graphics, virtual reality), and the purpose of its use. For example, an alphabetic file listing is useful for looking up specific files but can make it hard to find recently updated files. Conversely, sorting by date helps find recent updates but makes locating a specific file challenging. Interactive systems offer an advantage by allowing users to choose among different representations, making it possible to meet various goals and enhance information accessibility. name size chap10 12 chap5 16 chap1 17 chap14 22 chap20 27 chap8 32 … …  Aesthetics And Utility A visually appealing interface is not always functional. While aesthetics can boost user satisfaction and productivity, they should not undermine usability. For instance, decorative backgrounds in posters and multimedia systems can compromise text readability if they are too complex or have high contrast. Despite their visual appeal, such designs can be impractical and difficult to use, highlighting the need to balance aesthetics with functionality.  Colour And 3D Many interfaces suffer from poor color usage and overuse of 3D effects. Limited monitor color ranges and designers' overenthusiasm often lead to distracting and visually overwhelming interfaces. Excessive color can be problematic, especially for color-blind users, making text potentially unreadable. Therefore, color should be used sparingly and primarily to support other design elements rather than as the main method of conveying information. Additionally, the use of 3D effects can complicate text and numerical readability. While 3D can be effective for displaying physical objects and certain graphs, text in perspective often becomes hard to read, presenting a significant usability challenge.  Localisation & Internationalisation Internationalization (i18n) involves designing software to be easily adapted for various languages and regions without major changes. This includes using Unicode for text encoding, separating text from code, and supporting diverse character sets and cultural norms. Localization (l10n) is the process of adapting software to a specific language, region, or cultural context after internationalization. It includes translating text, adjusting date and number formats, and modifying cultural references to make the software feel native to the target audience. Together, internationalization and localization ensure that software is both usable across different languages and culturally relevant for a global audience.  Iteration and Prototyping Iterative design is crucial in interaction design due to the complexity of human situations and the limitations of initial designs. This approach involves refining designs through multiple cycles, starting with basic concepts like paper designs and storyboards, and progressing to advanced tools such as physical mockups or software prototypes. Prototypes are evaluated continuously through formative assessment to identify areas for improvement, rather than waiting until the end for a final evaluation. Real user feedback is essential for enhancing usability and addressing issues. Evaluation often reveals faults that lead to redesign cycles, involving further prototyping and refinement. Although iteration and prototyping are widely recognized as best practices, challenges in prototyping are sometimes overlooked. Addressing these challenges is important for effective design iterations that enhance user experience and system functionality. Role of prototyping  Pitfalls Of Prototyping moving little by little … but to where two things you need for prototyping methods to work: 1. need a good starting point 2. need to understand what is wrong