Chapter 2: Understanding and Conceptualizing Interaction PDF

CHAPTER II Understanding and Conceptualizing Interaction Prepared by Mark Anthony A. Gioketo Objectives 1. Explain what is meant by the problem space; 2. Explain how to conceptualize interaction; 3. Describe what a conceptual model is and how to begin to formulate one; 4. Discuss the use of interf...

CHAPTER II Understanding and Conceptualizing Interaction Prepared by Mark Anthony A. Gioketo Objectives 1. Explain what is meant by the problem space; 2. Explain how to conceptualize interaction; 3. Describe what a conceptual model is and how to begin to formulate one; 4. Discuss the use of interface metaphors as part of a conceptual model; 5. Outline the core interaction types for informing the development of a conceptual model; and 6. Introduce paradigms, visions, theories, models, and frameworks in forming interaction design. 2 Conceptualizing design As part of a design project, generating ideas, it is essential to conceptualize them in definitions of what the product proposed will do. This is sometimes referred to as developing a proof of concept. 3 Conceptualizing design It is important to be clear about the underlying assumptions and claims when starting a design project. We mean taking something for granted by an assumption that needs further investigation; individuals now want an entertainment and navigation system in their cars, for example. By a claim, when it is still open to question, we mean declaring something to be true. 4 Conceptualizing design For example, it is perfectly safe to have a multimodal style of interaction to control this system, one that involves talking or gesturing while driving. Taking notes and then trying to justify and support your assumptions and claims can reflect those that are vague or wanting. In so doing, it is possible to modify badly constructed design ideas. 5 Conceptualizing design This step includes identifying human activities and interactions that are problematic in many projects and working out how they could be improved by supporting them with a various set of functions. In others, it can be more speculative, requiring thinking about how to design an engaging, non-existent user experience. 6 Proof of concept pertains to conceptualizing what the proposed product will do. Example: Imagine you're designing a new voice assistant for smart homes. Your POC could be a simple prototype that: Allows users to interact with a virtual assistant using voice commands. Responds to basic commands like "turn on the lights" or "play music." Visualizes the interaction with simple animations or text feedback. This POC doesn't require a full-fledged smart home system, but it allows you to test the user experience of interacting with the voice assistant. You can gather feedback on the clarity of commands, the responsiveness of the assistant, and the overall ease of use. Conceptualizing design is important to examine vague ideas and assumptions regarding the advantages of a particular type product or service in terms of its feasibility. It also answers the question if your design can be realistically be develop with the current tools, machineries and with the kind of technology we have. Conceptualization of design also, looks into the effectiveness The steps in conceptualizing a design is to: ▰ First formulate all the possible assumptions and claims with the new design you are planning to propose. ▰ Look into facts and details of your design, such as what can they do and what are their limitations, then defend how the user would overcome the limitations of the product. 9 The steps in conceptualizing a design is to: ▰ For inevitable concepts that are hard to articulate or describe into words, you must also highlight the details of your design that seemed too vague or unrealistic for reasons that there is no existing design like your yet or weighing factors if your design can be put into reality with the current technology and equipment’s we now have. Also, included in this is the person’s activities and interactivities that could be problematic for your proposed design 10 The steps in conceptualizing a design is to: ▰ Once you have identified the problems, it’s now time to iteratively plan out “how the design ideas might be improved” 11 What is an assumption? 12 “Assumption refers to taking something for granted when it needs further investigation 13 For example, Most people prefer to watch TV while driving ( this is only your assumption) 14 What is a claim? 15 “A claim tells that even if it is still up for question, one already asserts that something is true example 16 Example: “a multimodal style of interaction for controlling GPS — one that involves speaking while driving — is safe.” Jotting down and then trying to justify and support your assumptions and claims can outline those that are vague or wanting. In so doing, it is possible to modify badly constructed design ideas. It allows the design team as a whole to see multiple perspectives on the problem space and thus reveal contrasting and problematic ones by explaining people's assumptions and claims about why they think something might be a good idea (or not). 17 Activity: How else will cyborg wait staff be capable of speaking to customers to improve their understanding? 18 What is the problem being addressed? The benefits: Through talking with them, the robot can take instructions and entertain customers. For diverse customers, such as restless kids or fussy eaters, the robot could also make recommendations, that purely based on assumptions. Now, the real problem we need to address is how difficult it is to find a waiter who can fill in the hospitality of a person over a robot wait staff. 19 In supporting your assumptions, the initial phases of a design project, numerous unknowns have to be considered or addressed. Such as where do ideas come from, what inspired such idea and is there any solid proof research or even at least a theory that would back up the idea? Remember that “During the early ideation process one must ask questions, reconsider assumptions, and articulate concerns” 20 Now, that we have defined the problem being addressed and had come up with assumptions, we can now look into the framework for analyzing the problem space. These frameworks refers to a series of questions that the designer can use as a guide. Such questions are: Does an existing product or user experience have complications? Enumerate what are those complications. 21  Why do you think this problem exist in the first place? How wiould you overcome such complications, in your proposed design? How would you know your suggested design ideas support, alter, or extend current ways of doing things if you are designing for a new user experience? 22 Activity Give an assumption and claim about the 3D TV? 23 Assumptions and claims: one must analyze first, how realistic your proposed design is. Sample answer: There's no current hurdle to address, since the proposed design is about a new way to experience TV. An assumption would be that customers would not mind the changes because 3D TV has enhanced clarity and added detail on the color While a claim would be, people do not really mind if the new product is costly since they can now watch their favourite shows and movies in 3D 24 Benefits of conceptualizing Orientation - It allows design teams to ask particular questions on how to perceive the conceptual model. Open-minded - Discourages design teams from focusing narrowly at an early stage Common ground - Enables design teams to create a set of rules commonly agreed to each and everyone in the team 25 From problem space to design space A design space can be informed by a thorough understanding of a problem space. Also, indicates, which sort of interface, behavior, functionality to provide. But before getting into a conclusion one must look into developing a conceptual model. 26 Conceptual model A model is a simplified description of a system or process that helps describe how it works. In this section, we look at a particular kind of model used in interaction design intended to articulate the problem and design space—the conceptual model. In a later section, we describe more generally how models have been developed to explain phenomena in human computer interaction. 27 Conceptual model 1. “a high-level description of how a system is organized and operate”s - Jeff Johnson and Austin Henderson (2002) page 6 2. A conceptual model enables: “designers to straighten out their thinking before they start laying out their widgets” - Jeff Johnson and Austin Henderson (2002) page 28 3. “Provides a working strategy and framework of general concepts and their interrelations” 28 Here’s a conceptual model for an Online Store, represented using an Enhanced Entity-Relationship (EER) model: Entities and Attributes 1. Customer (CustomerID, Name, Email, Phone, Address, PaymentInfo) ▰ A customer can place multiple orders. 2. Order (OrderID, OrderDate, Status, TotalAmount) ▰ An order is placed by one customer but can contain multiple products. 3. Product (ProductID, Name, Description, Price, StockQuantity, CategoryID) ▰ A product belongs to a category and can be part of multiple orders. 29 4. Category (CategoryID, CategoryName, Description) ▰ Categories help organize products (e.g., Electronics, Clothing). 5. OrderDetails (OrderID, ProductID, Quantity, Subtotal) ▰ Represents the many-to-many relationship between Order and Product (includes quantity and subtotal). 6. Payment (PaymentID, OrderID, PaymentMethod, PaymentStatus, TransactionDate) ▰ Payments are linked to orders and store transaction details. 7. Shipping (ShippingID, OrderID, ShippingAddress, ShippingDate, TrackingNumber, Status) ▰ Tracks order delivery details. 30 8. Admin (AdminID, Name, Email, Role) ▰ Manages products, orders, and customers. Relationships 1. Customer places Order (1:M) 2. Order contains Products (M:M) → Resolved via OrderDetails 3. Product belongs to Category (M:1) 4. Order has Payment (1:1) 5. Order has Shipping (1:1) 6. Admin manages Products and Orders (M:M) 31 The First steps in formulating a conceptual model according to Johnson and Henderson, are the following: 1.What will the users be doing when carrying out their tasks? 2.How will the system support these? 3.What kind of interface metaphor, if any, will be appropriate? 32 4.What kinds of interaction modes and styles to use? 5.Always keep in mind when making design decisions how the user will understand the underlying conceptual model 33 A conceptual model offers a working strategy in a nutshell and a framework of general concepts and their interrelationships. The following are the core components: 1.Metaphors and analogies aims to tell people how to recognize what a product is being used for and also how to use it for an activity. (for example browsing and bookmarking). 34 2.The concepts to which people are exposed through the product, They create and manipulate task- domain objects, their attributes, and the operations that can be performed on them, (such as saving, revisiting, and organizing). 3.The relationships between those concepts (for instance, whether one object contains another). 35 4.The mappings between the concepts and the user experience the product is designed to support or invoke a design (for example, one can revisit a page through looking at a list of visited sites, most- frequently visited, or saved websites). 36 The user experience is determined by how the different metaphors, concepts, and their relationships are organized. The design team can discuss the merits of offering various methods by explaining these and how they support the main concepts, such as saving, revisiting, categorizing, reorganizing, and mapping them to the task domain. They also can start to approach whether a new general metaphor that combines the activities of browsing, searching, and revisiting may be preferable. 37 This in turn can lead the design team to articulate the types of relationships, such as containership, between them. What is the best way to sort and revisit saved pages, for instance, and how many and what container types must be used (e.g. folders, bars, or panes)? For other functions of the web browser, both present and new, the same enumeration of concepts can be repeated. In doing so, the design team can systematically begin to work out what will be the easiest and most efficient and memorable way to support users while browsing the Internet. 38 The few that seem evident and straightforward are often the best conceptual models; that is, the operations they support are intuitive to use. Applications can, however, sometimes end up being based on overly complex conceptual models, particularly if they are the result of a series of enhancements, where the original conceptual model is added to more and more functions and ways of doing something. Although tech firms often provide footage online what new features are included in an upgrade, users may not pay much attention to them or completely skip them. 39 In addition, many individuals prefer to adhere to the techniques they have always used and recognized and, not remarkably, become upset when they find that one or more has been removed or altered. For instance, many users were unhappy when Facebook rolled out its revised newsfeed a few years ago, as evidenced by their tweets and posts, favoring the old GUI they had gotten used to. Therefore, a challenge for software companies is how best to introduce new features they have added to an upgrade and explain their presumed advantages to users, while also justifying why others have been removed. 40 Actually, most interface apps are based on well-established conceptual models. For example, when the majority of online shopping websites are based at a shopping mall, a conceptual model based on the core aspects of the customer experience. These include the placement in a shopping cart or basket of items that a customer wants to buy and proceeding to checkout when they are ready to make the purchase. 41 Along with many other aspects of a user experience, collections of patterns are now readily available to help design the interface for these core transactional processes, meaning interaction designers do not have to start from scratch every time they design or redesign an application. 42 It is uncommon for completely new conceptual models to arise that change the way everyday and work operations are performed at an interface. The three main classics are included in this category: the desktop (developed in the late 1970s by Xerox), the digital spreadsheet (developed in the late 1970s by Dan Bricklin and Bob Frankston), and the World Wide Web (developed by Tim Berners Lee in the early 1980s). All these innovations have made what was previously restricted to a few qualified individuals accessible to all, while significantly expanding what is feasible. 43 The graphical desktop dramatically altered the performance of office tasks (including creating, editing, and printing documents). It was considerably more difficult to perform these tasks using the computers prevalent at the time, having to learn and use a command language (such as DOS or UNIX). 44 Digital spreadsheets made bookkeeping highly efficient and easier to achieve, making it possible to perform a variety of new computations simply by filling in interactive boxes. The World Wide Web has enabled anyone to remotely browse a network of data. Ever since, new ways of reading documents and books online have been introduced by e-readers and digital authoring tools, supporting associated activities such as annotation, highlighting, linking, commenting, copying, and tracking. 45 Many other types of activities, such as searching for news, weather, sports, and financial information, as well as banking, shopping, and learning online, among other tasks, have also been made easier by the web. Importantly, all of these conceptual models were based on familiar activities. 46 The best conceptual models are often those that appear: ▰ Obvious and simple ▰ The operations they support are intuitive to use Example: the concept of online stores like shopee 47 Explanation -> Actually, most interface apps are based on well-established conceptual models. For example, when the number of internet shopping websites are based at a shopping mall, a conceptual model based on the core aspects of the customer experience. Which included the placement in a shopping cart or basket of items that a customer wants to buy and proceeding to checkout when they are ready to create the acquisition. 48 Types of Conceptual Model Metaphor Concept Model Metaphors is a central component of a conceptual model. They provide a framework which is comparable to aspects of a familiar entity (or entities) in some way, but they have their own behaviors and properties as well. More precisely, as part of the user interface, such as the desktop metaphor, an interface metaphor is one that is instantiated in some way. 49 The metaphor welcomes comparisons between a mechanical engine that has several working components and the daily activity of trying to find something in different places. In addition to those belonging to an engine which searches, the functions supported by a search engine also include other features, such as listing and prioritizing the search queries. These actions are also done in somewhat diverse situations from how a mechanical machine works or how a human being can browse for paperbacks on a given subject in a library. 50 Consequently, the resemblances that are indicated by the use of the term search engine are at a general level. They are intended to conjure up the spirit of the information finding process, allowing the user to link these to fewer familiar aspects of the presented functionality. 51 1.Interface metaphors - The interface was developed to be akin to a physical entity, but it has features of its own. Interface metaphors can also be based on activities, objects, or a byproduct of both. It manipulates the familiar knowledge of users to help them understand the unknown. The concept of the unaccustomed activity is conjured up, allowing users to leverage this to comprehend more elements of the unfamiliar feature. Example: desktop metaphor, and web portals 52 Examples of interface metaphors: Conceptualizing what users are doing For instance, surfing the Web A conceptual model instantiated at the interface For example, the desktop metaphor Visualizing an operation For instance, an icon of a shopping cart into which the user places items (apps like Shopee, Lazada, Zalora) 53 2.The card metaphor – considered to be the very popular UI because of its familiar form and its characteristics to be easily flicked through, ordered and themed. “It structures content into meaningful chunks (similar to how paragraphs are used to chunk a set of related sentences into distinct sections)”. 54 Benefits of interface metaphors Makes learning new systems easier Helps users understand the underlying conceptual model Can be very innovative and enable the realm of computers and their applications to be made more accessible to a greater diversity of users 55 Problems with interface metaphors Break conventional and cultural rules For instance, recycle bin placed on desktop Can constrain designers in the way that they conceptualize a problem space Conflicts with design principles Forces users to understand only the system in terms of the metaphor 56  Designers can inadvertently use bad existing designs and transfer the bad parts over Limits designers‘ imagination in coming up with new conceptual models 57 Interaction Types In terms of the interaction types that will underlie the user experience, another way to conceptualize the design space is. In essence, these are the ways in which an individual interacts with a product or application. Originally, four main types were identified: instruction, conversation, manipulation and exploration (Preece et al., 2002). Christopher Lueg et al. (2019) have since proposed a fifth type that we have added to ours, which they call responding. For example, when Netflix pauses a person's viewing to ask them whether they'd like to continue watching, this refers to proactive systems that initiate a request in situations to which a user can respond. 58  Instructing: Where users issue a system with instructions. This can be expressed in a variety of ways, including typing commands, choosing options from menus in a Windows environment or on a multitouch screen, speaking aloud commands, gesturing, pressing buttons, or using a function key combination. Conversing: Where users do have software dialog. Users could even speak through an interface or type questions that are answered by the system via text or speech output. Interacting with a system as if a conversation were being held 59  Manipulating: Where users in a virtual or physical space interact with objects by manipulating them (for instance, opening, holding, closing, and placing). Users could even develop their familiar understanding of how to communicate with objects. 60  Exploring: Where users navigate through a physical space or a virtual environment. 3D worlds and augmented and virtual reality systems include virtual environments. By physically moving around, they allow users to hone their familiar knowledge. Smart rooms and ambient environments include physical spaces that use sensor-based technologies, allowing people to capitalize on familiarity as well. 61  Responding: Where the interaction is initiated by the system and the user decides whether to react. For instance, proactive technology based on mobile locations can alert individuals to areas of interest. They could choose to look at or ignore the data popping up on their phone. 62 Difference between interaction types and interface styles Interaction type: Interaction type: is regarded as a definition as to what the user does when interacting with a system, such as teaching, talking, browsing, or responding to the style of the interface. While Interface style: The kind of interface used, such as command, menu-based, gesture, or voice, to support interaction 63 Examples of Interface styles Command Speech Data-entry Form fill-in Query Graphical Web Pen Augmented reality Gesture 64 Paradigm - In terms of shared assumptions, concepts, values, and practices, a paradigm refers to a general approach adopted by a community of researchers and designers to carry out their work. Inspiration for a conceptual model General approach adopted by a community for carrying out research  Shared assumptions, concepts, values, and practices  For example, desktop, ubiquitous computing, in the wild 65 Vision - Vision is a future state that shapes interaction design research and development, often depicted in the form of a movie or narrative. Theory - It is a well-founded description of some part of a phenomenon; The theory of processing information, for instance, describes how well the mind, or some aspect of it, is supposed to function. A model is a simplified representation of some aspect of human- computer interaction intended to facilitate the prediction and evaluation of alternative designs by designers. The framework is a set of interrelated concepts and/or a set of defined queries intended to inform a specific field (e.g. collaborative 66 THANKS! 67