Human Computer Interaction

Low Fidelity

A prototype that is maybe made out of cardboard or cheap materials not fully functional but good for testings. You start with low-fi and build your way up to high-fi through testings and interviews.

Memorability

After a period of not using the app, how easy is it to re-establish proficiency? Do they remember what to do or do they have to learn it all over again? (apps can have high memorability but low learnability. it can take people a while to learn what to do. but when they finally do, they will probably remember how to use it. Can measure also in time but also if they were able to succeed.

Human Centered Design

is the process of ensuring that people's needs are met, that the resulting product is understandable and usable, that it accomplishes the desired tasks, and that the experience of use is positive and enjoyable.

designed manipulatives

learning about abstract structures of dynamic behaviour, mathematics, probability behaviour and more can be enhanced and encouraged through the use of tangible interfaces which allow hands on modeling, simulating and analogizing of these abstract concepts.

HCD as a continuous iterative process

Assume and Validate We cant test peoples behaviour without giving them something to use: We start with assumptions & testing We have an assumption (e.g. a new helmet is going to help students learn better); then we test it out and build a prototype. We develop a prototype that is based on the assumptions. Then we test it - e.g. we see if students who wore the helmet vs. students who didnt wear the helmet learned better. This is the iterations process -its a cycle of innovation - constantly innovate, create assumptions, built prototypes, and test them. Iterative Vs. Linear Observation -design research vs. market research. -observe the right users and looks for problems to solve Idea generation - quality vs. quantity Prototyping -Wizard of Oz - you dont develop any new technology; you use humans as computers to try and act out as computers. -Low-high fidelity Testing -user testing, think aloud, landing pages (its a cheap way to test new ideas)

Nielsen's 5 usability goals:

LEMERS: Learnability, Efficiency, Memorability, Errors, Satisfaction

The four eras of computing

Mainframe era (1960's-1980s) , Personal Computer Era (1980s-2000), The mobility era (2000s), Today IoT

Isii et al. (2012) "Radical Atoms"

Materials that can change form and appearance dynamically. Dynamic changes of physical form can be reflected in digital states, and vice versa. Human-material interaction, or Material User Interface (MUI)

Sal-Futuristic Scenario

"Sal's scenario": a hypothetical story where Sal can, for instance, program her alarm to ask her if she wants coffee, to which she answers yes or no, and then it's ready for when she comes into the kitchen, or read a newspaper, take a pen, highlight a quote she likes and that immediately sends it via email to her office.Sal awakens: she smells coffee. A few minutes ago her alarm clock, alerted by her restless rolling before waking, had quietly asked "coffee?", and she had mumbled "yes." "Yes" and "no" are the only words it knows.

When to test?

-Multiple studies, all throughout the design process -Studies should be fast and cheap -Before you have a design: test the competitors -Test paper prototype of your design -Users' natural environment -Refine your design, iterate from low fidelity to high fidelity -Expert review, established usability guidelines -Final design - A/B subtle changes -Once a week - starting as early as possible; don't fear confidentiality because there will always be ten people that have the same idea as you - if you're not faster than them, you will lose. -The best results come from testing no more than 5 users and running as many small tests as you can

User Testing

-Representative users- who will you test? -Need to be relevantly equipped (INsta àphotographs, smartphone etc.) -Ask them to perform representative tasks (Task-based) -Observe: what they do, success vs. challenges, failure -Think aloud Important guidelines for user testing: -Let them solve problems by themselves, do not help -Observe what they do, not what they say (but encourage them to talk) -usability testing evaluates their actions

Affordances

-The relationships between a physical object and a person -The way an object conveys the possible actions(s) -Determined by the qualities of the object & the abilities of the person ex: A chair affords sitting Perceived affordance= for the digital world example youtube and the upload button no strong affordances just a button and it says upload on it. the button itself is a perceive affordance because a button is supposed to be clicked but what will happen when the button is clicked is the mystery so you need a signifier.

Bill Buxton 3 phases of UX

1. It works- Occurred with the first computers in 70s-80s and it was a huge challenge to create a digital device that was able to perform even the simplest computation. They were not easy to use but for the experts that used them "it worked". 2.It flows- Happened when the 2007 first iPhone came out. Digital devices became much easier to use and they connect to the internet, you could easily install new apps, and perform many services. 3. They work together- 2016 era of digital devices that communicate with each other by sending information to one another. Smart house smart devices etc.

5 Principles of Interaction or Design Guidelines-Don Norman

1.Affordances 2.Signifiers 3.Mappings 4.Feedback 5.Conceptual models He developed the guideline to make the interaction easier and better. A good conceptual model/metaphor Yet take into consideration differences in cultures A clear and visible mapping Affordances/Signifiers/Feedback Pleasure/Delight in the user experience

High Fidelity

A prototype that is high quality, all details, works perfectly.

Mainframe era (1960's-1980s)

Computer only receives data by the insertion of physical cards, later on this advanced to text-based coding. Computers were not friendly and not everybody knew how to use them. They were for scientists, universities, etc. Computers weren't able to do much. This was a time where there was 1 computer for many users, and there was no personal interaction with the technology. there was no computer or mouse. people also had to memorize the UI.

The Design Challenge

Designers try hard to determine people's real needs and to fulfill them, whereas marketing is concerned with determining what people will actually buy. The division among companies usually makes it hard for a designer to design properly needs everyone to be on the same page.

User Experience

Designing interactive products to support the way people communicate and interact in their everyday and working lives (Sharp, Rogers and Preece, 2007) Focuses on interaction of people and products The design of spaces for human communication and interaction (Winograd, 1997) Refers to space in the human point of view, rather than architectural point of view How a product behaves How a product is used by people in the real world One cannot design a user experience, only design for a user experience

Fitzmaurice et al. (1995) "Graspable User Interfaces" GUI

Graspable User Interface is a physical handle to a virtual function, where the physical handle controls specific functional tasks. GUIs are very much in the foreground and are either done sequentially (Time-multiplexed) or simultaneously (Space- multiplexed). They leverage human lifelong experience in the physical world and try to implement it in the GUIs. The "Bricks" example in the tangible bits paper demonstrates two-hand collaboration, making the interaction intuitive and space-multiplexed (the user can perform tasks simultaneously on the interface).

Friedrich Froebel

He laid the foundation for modern education based on the recognition that children have unique needs and capabilities. He created the concept of the "kindergarten" and coined the word, which soon entered the English language as well. Consequently, he developed toys known as "Froebel gifts", which allowed children to learn about real world structures emphasizing on the child's creativity. The toys allowed children to experiment with colour, shapes and geometry, learning by instructions and through copying and imitating. The focus was based on "construction and design". Examples of Froebel's gifts are building blocks with which children can build towers, bridges or any sort of structures.

Signifiers

How do we discover, or perceive the affordances of an object? Should be used when the affordance isn't clear enough When the affordances are invisible, the signifiers communicate where the action should take place: sign/label or the perceived affordance itself (handle, path on grass)

Learnability

How easy is it for first time users to accomplish basic tasks? When they have their first interaction with the app, are they able to see basic things from the features that the app provides?

Errors

How many errors do users make, how severe are these errors, and how easily can they recover from the errors? Error recovery is very important, how easily can they go back to fix their error. A good solution would be using humor in your interface example Apple using the shaking error message.

Satisfaction

How pleasant is it to use the design? User experience - were they engaged, will they recommend it etc. Can measure by the body language of the user, or asking users but usually there is bias so ask open ended questions. if they answer yes or no try to direct them.

Time Multiplexed

How users are able to perform only one task after another in certain aspects. For example, while using you computer mouse, you can only do 1 thing at a time, one thing after another. clicking on safari, then typing in google, then clicking on what you want, etc.

Conceptual Models

How we mentally simulate the operation when we see the object/design. A simple explanation about how something works. (Doesn't have to be accurate as long as it's useful) Ex:"Folders on computers" or the "paper bin" are conceptual models enabling the user to understand how to interact with the technology. There is no real paper bin in our computers however the designer integrated this conceptual model, which we know from our everyday life, to explain and simplify the process.

Don Norman

In order to create a successful design, it is crucial to follow specific guidelines. Don Norman discusses the various aspects regarding product design and user experience. When mentioning "discoverability", Norman refers to the discovery and the possibilities of an object. What actions are possible as well as how and when they can be performed. The "understanding" refers to the practical engagement with the object. Such as "how is the product supposed to be used", "what do all the different controls and settings mean".

Human Error

Indicates that the user is never wrong. If a user misuses a product or fails to succeed, according to this principle, it is not the user who is to blame, but the machine and the designer. Designers are supposed to predict possible errors a user might come across and accordingly design a recovery which lets the user ease back into the process or at least explain what went wrong and how to solve the issue.

Invisible vs. transparent technology

Invisible technologies, are not visible to the naked eye, and cannot be seen even if one actively looks for it, such as electricity. Transparent technologies, means we get so used to the presence of certain technologies in our lives that we don't actively engage with it anymore and it fades into the background (Ovens, TVs, Fridges etc.). For example: most technologies wake us up with sound, but if they woke us up using touch or temperature adjustments, they might be more transparent and soothing. Imagine if technologies focus on sleep patterns - they could wake us up peacefully.

Good Design

No labels needed Products/experiences should be: Understandable, usable, delightful, enjoyable Not only usable: -Aesthetics -"Quality of interaction"/ delight -Emotional impact on the user -"Look and feel"

Efficiency

Once users have learned the design, how quickly can they perform tasks. How quick are they able to perform these tasks? Does it take them a while? Do they get frustrated? if they do, it is likely that they will make mistakes in the future.Time and cognitive resources(can I do it while doing another task) are a way to measure efficiency.

Personal Computer Era (1980s-2000)

Personal computer revolution (one computer per person) Macintosh was released in 1984 The mouse was revolutionary because I no longer have to only type. It's intuitive, it's visual so it's very simple to understand and it's instant responsive. The invention of the operating system (Windows metaphor -digital office- started to dominate) Alan Kay Terminology was taken from the real world, and immersed into the computer world in order to make it user-friendly and easily understandable (ie. "Desktop" "folders" "files" "trash" "recycle bin") The shift from text coding language to graphic and visual user experience. Apple Knowledge Navigator - 1986 (concept video) Personal digital assistant (it's shown much more accurate than it is today)

Human Computer Interaction

Researches the design and use of computer technology, focused on the interfaces between people and computers.

Roger's vision

Rogers - didn't contradict Weiser vision, but re-appropriated. Engaging rather than calming people. From proactive computing to proactive people. To engage people more actively in what they currently do "How can i help you to...?" Technology that enables people to: act, think, solve, problems, make decision, create, innovate People (rather than computers) should take the initiative EX of how it should not be: Waze (decides for me where to drive) Designing user experiences that creatively, excitedly, and constructively extend what people currently do. We need to anticipate and shape the impact of technology rather than simply react to it. Moving from a mindset that wants to make the environment smart and proactive to one that enables people, themselves, to be smarter and proactive in their everyday and working practices. Rogers wants to change the direction by letting humans take the initiative to shape and anticipate technological advancements and not only "react" to them; she wants us to not only accept whatever the industry tells us, but for us to actively think about and use the product, so that technology doesn't make us submissive and thoughtless. In order to make people more thoughtful, Roger's mentions inventing a "WaterBot" that could engage people in actively saving water and being less wasteful with this precious resource in their homes. This would be using technology to make people think about their actions and their consequences, however, rather than being mundane, it achieves this by engaging the user in a game-like activity/environment.

Froeble vs Montessori

Similarities: modularity, isolation of properties, sensory interaction developmentally appropriate, simple aesthetic design Differences: Froebel: Promote design and construction of physical and visual patterns Montessori: Does not promote design or construction. Focused solely on assimilation of specific abstract concepts

Biggest challenge for startups/entrepreneurs.

Solving the correct problem: Most of the time people focus on the wrong problem, it's not important enough, doesn't have a big enough target audience, etc. How to know which one is the right problem? *Interviews* -Don't ask yes/no questions, ask open ended questions. -Let people talk, don't talk so much as the interviewer -Active listening - try to figure out what people mean and not what they say -Focus on what people do, not what they say. Body language, expressions, gaze, etc. -Looking for existing solutions - most problems are already solved -Create a cheap prototype and go back to the people you interviewed for a usability test

Tangible User Interface (TUI)

TUIs (tangible user interfaces) are based on the concept of GUIs.Tangible user interfaces expand the affordances of physical objects, surfaces and spaces so they can support direct engagement with the digital world.

The mobility era (2000s)

Take a computer/computational device (laptop/smartphone) and you can take it with you on the go Dominant interaction → touch, which replaces the mouse (instead of selecting and dragging you do it with your fingers) Common gestures on smartphones: swiping (easy and fast) Interactions like metaphors, for example: swiping pages=moving forward Unlocking your iphone is similar to the unlock thingy on some doors with the chain Example: Palm (tiny computer you can take everywhere and it has basic capabilities like calendar, it succeeded because it was small) Blackberry First iPhone (2007) → iphone was able to bring the cost of a touch screen affordable enough for people to buy it Touch screen won against the tiny keyboards because it was more natural (making the touch screen essential)

Ishii & Ullmer (1997) "Tangible Bits"

Tangible Bits allows users to "grasp & manipulate" bits in the center of users' attention by coupling the bits with everyday physical objects and architectural surfaces. It also enables users to be aware of background bits at the periphery of human perception using ambient display media such as light, sound, airflow, and water movement in an augmented space. The goal of Tangible Bits is to bridge the gaps between both cyberspace and the physical environment, as well as the foreground and background of human activities. Our key concepts are: -*Interactive surfaces: Ishii's metaDESK* transformation of each surface within architectural space (e.g., walls, desktops, ceilings, doors, windows) into an active interface between the physical and virtual worlds. Example of the surface that moves with the hands Coupling of bits and atoms:Bishop's answering machine -*The coupling of bits with graspable physical objects: TransBOARD* Is a networked digitally-enhanced physical whiteboard designed to explore the concept of interactive surfaces which absorb information from the physical world, transforming this data into bits and distributing it into cyberspace. -*Ambient media for background awareness:Ishii's AmbientROOM* Use of ambient media such as sound, light, airflow, and water movement for background interfaces with cyberspace at the periphery of human perception. CONCLUSION- Our attempt is to change "painted bits" into "tangible bits" by taking advantage of multiple senses and the multiple modes of human interactions with the real world. We believe the use of graspable objects and ambient media will lead us to a much richer multi-sensory experience of digital information.

Maria Montessori

The Montessori Method of education, developed by Maria Montessori, is a child-centered educational approach based on scientific observations of children from birth to adulthood. The Montessori method views the child as one who is naturally eager for knowledge and capable of initiating learning in a supportive, thoughtfully prepared learning environment. It attempts to develop children physically, socially, emotionally and cognitively. She also designed toys/games to visualize the learning process, however Montessori's central emphasis lies on *logic and "conceptual manipulation"* such as learning fractions and math through physical manipulation. She focuses solely on assimilation of specific abstract concepts. An example of her design is the pizza shaped toy where single slices can be removed from the whole to visualize the mathematical concept of fractions.

A current example that can support Weiser's vision

The concept of solar panels on a roof of a building which automatically heats your water in the summer so you wont have to do it yourself, or turn on the water heater. all you have to do is walk into the shower and you have hot water!

Double Diamond Process

The first diamond is all about the problem, not about the solution - researching the problem. Second diamond focuses about the solution and prototyping a solution The double diamond model of design is a process demonstrating how to solve the correct problem. The model starts at the point where one has a very broad and general problem. The next stage is called *"Discover"* To move on from this stage, one must understand the problem in depth by researching and exploring the problem. Interviews and observations are helpful in that case. Once done enough research, one will find oneself at a stage where one must pick and focus on a specific problem. That stage is called *"Define"* as we define one specific issue. From here on ideas have to be generated towards a solution, which is the stage of *"Develop(ment)"*. This also goes from quantitative ideas (gather as many different ideas/solutions as possible) to eventually focusing on qualitative ideas by taking the best of all and choosing one specific solution. That stage is called *"Deliver"*. Here you don't only choose the solution but also execute it through prototyping

Double Feedback Loop

The first feedback loop is between the physical object and the user, examining how the user's senses (touch, sight and hearing mostly) react/interact with the object. In the physical world we have to practice by actually DOING things in order for us to understand how to do it. The physical world gives us feedback in all five senses, and we build our understanding of the world based on those feedbacks. The second feedback loop is between the digital properties and the user. We separate the physical and digital to analyse them, but ultimately we analyse how they work together using affordances (the function of the object follows its form) and feedback (auditory, tactile or visual). If you have, for instance, a crib camera to watch your baby sleep, you need to not only think about the digital properties and what it can do in that regard, but also its physical properties in order for the camera to fit into the baby's environment and not be annoying for him to look at.

Feedback

The immediate reaction coming from the system to the user (informative, positive, negative, "tone") Happens always after the user's action. Micro-feedback: great for delight.. But not so much Ex: when typing on an iPhone, with the volume turned on, the user will hear a slight sound of feedback reflecting when typing. Important to take into account when designing a product which gives off micro-feedback, is that the feedback is not distracting in any way to the user but solely has the task to enhance the users experience. If feedback does not react immediately, the user will believe that something is wrong/ that the object in use did not receive his action.

Mark Weiser had a vision that stated

The most profound technology will be the ones that disappear and weave themselves into the fabric of everyday society until it is indistinguishable from it. Consider writing, perhaps the first information technology: The ability to capture a symbolic representation of spoken language for long-term storage freed information from the limits of individual memory. Today this technology is ubiquitous in industrialized countries. Not only do books, magazines and newspapers convey written information, but so do street signs, billboards, shop signs and even graffiti. The constant background presence of these products of "literacy technology" does not require active attention, but the information to be conveyed is ready for use at a glance. It is difficult to imagine modern life otherwise. Most important, ubiquitous computers will help overcome the problem of information overload. There is more information available at our fingertips during a walk in the woods than in any computer system, yet people find a walk among trees relaxing and computers frustrating. Machines that fit the human environment, instead of forcing humans to enter theirs, will make using a computer as refreshing as taking a walk in the woods.

Gears of My Childhood-Seymour Papert

The paper by Papert "Gears of my childhood" exemplifies how gears serve as models, to carry abstract ideas into his head. For Papert gears illustrated many powerful "advanced" mathematical ideas as well as "body knowledge", which refers to the sensorimotor schemata of a child. By projecting himself into the gear (like others would into a car or train) he managed to understand how it moves and turns and could therefore develop a deeper understanding for it thus allowing it to be a model for future learning. ("What an individual can learn, and how he learns it, depends on what models he has available"). Since this technique seemed to be incomprehensible for anyone else, Papert attempts to turn computers into instruments flexible enough so that children can create for themselves something like what the gears were for him.

Mapping

The relationship between a control and its result (Examples: light switches, mouse) *The positioning of the items.* Good mapping is considered when the result following the action is just as expected by the user, and when the user can clearly be aware of the exact result of his action. Example:Stove good mapping is when the buttons are in the same design and the four burners and bad mapping is when it is in a straight line with no indication as to what button goes to what burner.

Space Multiplexed

The user's ability to do different things at once. as humans, we are used to using 2 hands, and we always do things simultaneously. Two hand interaction is efficient and we should leverage it more, this can really leverage collaborative interaction (nowadays people don't use devices together because it's not comfortable)

Tangible Bits

They can be described in the form interactive surfaces (such as drawing on your iPad), coupling bits and atoms (the light-up shoes children love, for example) and ambient media (Such as the auditory bottles we saw in class). To understand how these tangible bits will be useful in the real world, one needs to put them through the double feedback loop.

UBI Comp- Mark Weiser

Ubi comp- is short for ubiquitous computing- means computing is going to be everywhere We want to have a 21st century with Ubiquitous computing that will have a positive impact on our society. Keep in mind: What do we interact with in our day to day? Should we incorporate technology into our daily lives? What are computers good for? Examples of future products: oA system that can automatically take class attendance oA smart seat- a chair that will automatically adjust to your sitting position or maintain a straight posture - based on someone͛s posture it can give the lecturer analytics on how focused the student is Calm technologies. Mark Welser tried to imagine what the 21st century will look like.The most profound technologies are those that disappear. They weave themselves into the fabric of every day life until they are indistinguishable from it. thats what he means by ubiquitous technology oExample: light is something we expect in every room and looks very natural; wifi is about to become the most disappearing technology of this era oWriting is a technology - you need a writing device with ink and you need something to write on - it was just invented many years ago. It disappeared into the fabric of every day life.

Today- IoT, Wearable technology

Wearable technology- Natural interaction with wearable tech, not having to hold your phone so you can do multiple things at the same time Internet of things- really starts with the things, not with the internet. What are the things that are very meaningful for people? Now you take these things and connect them to the internet, what value does it bring to you being connected to the internet? This is what's happening now, there's a paradigm shift, things are becoming "smart" (smart homes, smart rooms, smart cars, smart clothes, etc.)

Douglas Englebart

seminal inventor (focused on the values that computers should give people) Augmenting the Human Intellect (1962) Make external tools that augment people's internet. Thought about computers as machines that help us think 1968: He created the first technological demo (The Demo that Changed the World). Looks like Steve Jobs keynotes, in front of people, live *He invented the mouse (physical object), the link (hypertext), video conference, emails and more*