26 – Adobe XD for Designers

3/25/19

Author: Paul Trani

  • For User Interface Design, it’s all about the look and feel.
  • And also design research that might dive into trends a little bit and what you end up with is sort of the branding guidelines.
  • the goal is to always keep that user in mind
  • A lot of times it’s a website that we’ve created and handed off to the client. And really it needs to be a continuous relationship with the client and as well as with the users to make the client successful at the end of the day.
  • We need to understand the client, the strategy, all the content. Understand everything it takes to be a graphic designer, so fonts, colors, layout, traditional design principles, some creative thinking.
  • it’s more of a long term relationship that you have with the client to make the product successful
  • For user interface design, it’s not only creating the visual assets but applying those to the product’s interface as to best enhance the user’s experience. So our goal is not just to make something look pretty, but we’re here to enhance the user’s experience.
  • Enter Adobe XD CC, the XD stands for experience design but allows for you to design prototype and collaborate.
  • Alright, so we might share this design with the client, maybe with an end user and get their feedback, but it’s a continuous process, we can always update this prototype, and in the end, what you end up with is a design that’s gonna be successful for the end user as well as the client, and what you end up giving the developer are all the graphics.
  • Adobe XD allows you to design, prototype, and collaborate with others for anything you want.
  • So really you can use XD to design anything that you want and not only design but also prototype.
  • You could share this with anyone you want, either the art director, other designers, the developer, or even the client, they can add comments.
  • This will give them the ability to see all the specifics for this design. So collaborating with them and making sure what you design looks exactly as it should as we dive into the final developed version.
  • If you’re comfortable working in Illustrator or Sketch even, as well as Photoshop, you can still use those apps and open up that content into Adobe XD and use it to prototype and continue the design as well as collaborate using those designs started in other programs.Screen Shot 2019-03-25 at 7.33.33 AM.png
  1. I already knew that for User Interface Design, it’s all about the look and feel. I already knew that the goal is to always keep the user in mind, find out what they like and how they think. I already knew that we need to understand the client, the strategy, and all the content.
  2. I learned that for user interface design, it’s not only creating the visual assets but applying those to the product’s interface as to best enhance the user’s experience. I learned that adobe XD allows you to design, prototype, and collaborate with others for anything you want. I learned that if you’re comfortable working in Illustrator or Sketch even, as well as Photoshop, you can still use those apps and open up that content into Adobe XD.
  3. How can you deal with a client that doesn’t approve all of your designs and isn’t helping you to make sure you get what they want?

25 – UX Foundations: Interaction Design

3/20/19

Author: David Hogue

  • sounds can be crafted to effectively enhance many products.
  • We can think of sound as serving three purposes. It can attract and guide a person’s attention and let them know that a task or action has been completed, something is available and ready, or that their input and interaction is necessary. Alarms, notifications, and reminders are all crafted to capture your attention.
  • Sounds can provide feedback and information by acknowledging a person’s interactions and communicating the status of the product.
  • Good sounds, like chimes and music, and bad sounds, like buzzing and Klaxons, can differentiate between successful and unsuccessful actions.
  • Auditory icons are sounds that correspond to something familiar and recognizable from the real world.
  • Some product sounds may be branding elements that contribute to the identity of the product.
  • Earcons are arbitrary sounds that we learn to associate their meaning with actions available in the product.
  • Products often use a combination of recognizable and arbitrary sounds.
  • So sound is important to the product experience. It should not be an afterthought. Sound should be an integrated part of the design process.
  • Haptics refers to how people see and manipulate objects using their senses of touch and proprioception.
  • Proprioception comes from sensors inside our bodies that tell us about movement, spatial location, and arrangement, rotation, and force.
  • Some products can also make it feel like the vibration originates from different locations within the device.
  •  Force is created when mechanical systems are constructed to push back against the actions of the people using them.
  • New technologies are making it possible to simulate surface textures to provide friction feedback when drawing with a stylus.
  • New technologies are making it possible to simulate surface textures to provide friction feedback when drawing with a stylus.
  • So haptic feedback may be generated by the product or may be a naturally occurring form of feedback from the mechanical parts of that product.
  • But when something goes wrong, we wanna know what happened, why it happened, and what to do about it.
  • When errors occur, people become frustrated, and this interferes with their ability to focus on, understand, and resolve the problem.
  • Error messages are a particularly important type of feedback because they help us understand what went wrong and how to improve our actions in the future.
  • Place error messages as near the error as possible.
  • Many products use two types of the error message. A generic message simply stating that an error has occurred, often placed where it may be clearly seen, and a specific message near the error itself.
  • Error messages use design characteristics intended to attract attention.
  • Inputs to a product may be validated or checked for errors on a per item or per set basis. Validation per item means that each input is checked for errors as soon as information is entered.
  • If there are multiple errors on a screen, display them all, and allow people to make multiple corrections at once.
  •  It’s a bad experience to display one error at a time when there are multiple errors because people will be returning to the same screen repeatedly until all of the errors have been fixed. This is frustrating and often causes confusion.
  • An error occurs when an action or process cannot be completed correctly, such as the inability to complete a transaction because the credit card number was entered incorrectly.
  • A mistake is an incorrect choice or information that does not prevent the action or process from being completed, but the end result is not anticipated or desired.
  • Feedback should confirm the action that was performed and communicate the results or outcome.
  • When we make an error or mistake, the ability to undo can be very important.
  • The best type of error handling is error prevention. If we can design to prevent errors then we have a better design.
  • The ease-of-use and the value of a product are different attributes.
  • A utility is the usefulness and value of the product or service.
  • Ideally, both usability and utility are high, a product which is easy to use and provides great value.
  • Just because people complete a task, does not mean that it was easy to do, so task completion is not always a good measure of usability.
  • The first, learnability, how easily can a new person learn to use the product? Efficiency, how quickly and accurately can a person perform the tasks? Memorability, how well do people remember a product if they have not used it recently?
  • The most important thing is that you are able to define usability in a way that makes it possible for you to make better design decisions, as well as measure the quality and performance of a product.
  • Research and testing prototypes and products are essential to evaluating usability. We assess usability while we are creating the product, but we also need to monitor and evaluate usability after a product has been released, because how people actually use it and what we anticipated are often not the same.
  • The content and functionality of a product, regardless of the type or format, must also be acceptable to all.
  • Accessibility is a large and very important topic.

Screen Shot 2019-03-20 at 7.14.51 AM.png

  1. I already knew that sounds can be crafted to effectively enhance many products. I already knew that sounds can provide feedback and information by acknowledging a person’s interactions. I already knew that good sounds, like chimes and music, and bad sounds, like buzzing and Klaxons, can differentiate between successful and unsuccessful actions.
  2. I learned that auditory icons are sounds that correspond to something familiar and recognizable from the real world. I learned that earcons are arbitrary sounds that we learn to associate their meaning with actions available in the product. I learned that haptics refers to how people see and manipulate objects using their senses of touch and proprioception.
  3. How do you make a good brand sound that makes your brand sound different from the rest?

24 – UX Foundations: Interaction Design

1//19

Author: David Hogue

  • InteractiCreate signals and cues to indicate that gestural interactions are available, such as a motion to hint that hidden or offscreen elements may be brought into view. ng with products is bidirectional.
  • Many inputs require interaction by the people using the product, such as typing, gestures, voice, and fingerprints.
  • We interact with peripherals, such as keyboards and mice, to create a corresponding change on a separate screen.
  •  When people are able to interact more directly with the elements on the screen, such as tapping on a photo or video to view it, the interactions can be easier to perform and learn.
  • We strive to make interactions as direct and immediate as possible.
  • We’ve been using mice since the early days of personal computers, and although mice may have multiple buttons and wheels, clicking the mouse button to select whatever is under the cursor is a well-known interaction.
  • Touch sensitive screens have been around since 1965, but the popularity of smartphones and improvements in technology have made them common and powerful.
  • Recommended tap target sizes and spacing are specified in the human interface guidelines for most products.
  • People then need to learn through practice and experience where the interaction may or may not be used.
  • Our biggest challenge designing for gestures is that the opportunities to interact often lack strong signals or cues.
  • We can use motion and animation to lead people toward gestural interactions.
  • When the same gesture is used in different ways under different conditions across different products, they’re difficult to learn and easy to confuse.
  • Gestures leave no trace. Once performed, there is no record of which gesture was made.
  • Voice interactions are often portrayed in movies, and speech recognition and synthesis software have been available for decades.
  • Today, a person’s experience with a voice interface is very different from their experience with a graphical interface.
  • As people become more familiar and comfortable with voice interactions, their expectations will increasingly demand conversational and contextually aware responses from the product.
  • Reveal. Help people understand when voice interaction is available and ready.
  • Guide. Help people understand what they can say and the actions the product can perform for them.
  • Repeat. Repeat their request and provide options and examples when asking for clarification.
  • Tell. State their request when delivering results or performing actions on their behalf. And respect. Be polite, friendly, concise, considerate, and unobtrusive.
  • Voice interactions are increasingly common and will extend beyond our personal devices to shared and communal devices, such as televisions, speakers, cars, and a wide range of smart products at home and in public places.
  •  We also need to consider and focus on the sociocultural implications of privacy, identity, and trust as technology becomes capable of interacting with us the same way other people would and as more shared and communal devices enter our lives.
  • There are many types of sensors, some common, like microphones in cameras, and some specialized, like 3D facial recognition.
  • Recognize and offer information about sounds or other objects nearby and make device adjustments such as modifying screen brightness and color temperature based on ambient light and time of day.
  • Microinteractions are the small, nuanced reactions of a product while a person is engaged in a task.
  • Microinteractions provide feedback that the person has interacted with the device. But they may also change the state of an element so people can see if they have already interacted with something.
  • Microinteractions also contribute to our emotional reactions to a product.
  • Microinteractions are initiated by a trigger. This may be an interaction by a person or something the product is monitoring. A trigger is a cue or signal that something has or will happen.
  • Microinteractions may loop and or change the mode of the product. Some microinstructions happen only once, such as the appearance of the alarm icon.
  • The details of the design are not minor. They’re important, and the feedback provided by micro interactions is often more than visual.
  • Motion attracts attention. Our brains are wired to be sensitive to motion and change. Static objects are easy to ignore, but objects in motion, or which change and transform, attract attention.
  • Distraction is often associated with negative emotional experiences because people have been unwillingly drawn away from their focus or task.
  • Motion has meaning. It can add information and enhance the value of content, as well as guide a person’s attention.
  • We often use animations to communicate progress, transition, and status.
  • Change, shape, size, appearance, and/or location may transform in proportion to changes in value or meaning.
  • Smooth meaningful motion design is essential for effective transitions from one state to another.
  • Abrupt changes where things suddenly appear, disappear, or change can feel mechanical and disruptive.
  • Digital products which embody these real physical characteristics can be more appealing, attractive, and enjoyable, and benefit from improved usability due to good motion design.Screen Shot 2019-03-18 at 7.14.36 AM.png
  1. I already knew that make interactions as direct and immediate as possible. I already knew that many inputs require interaction by the people using the product, such as typing, gestures, voice, and fingerprints. I already knew that we can use motion and animation to lead people toward gestural interactions.
  2. I learned that smooth meaningful motion design is essential for effective transitions from one state to another. I learned that micro-interactions are the small, nuanced reactions of a product while a person is engaged in a task. I learned that abrupt changes where things suddenly appear, disappear, or change can feel mechanical and disruptive.
  3. How to add animations on websites?

23 – UX Foundations: Interaction Design

3/14/19

Author: David Hogue

  • Dark patterns lead people to interact in ways they would not have otherwise chosen and to make choices or perform actions that may not be in their best interests.
  •  Dark patterns often place the business, advertiser, and/or product owner’s interests above those of the people using their products and services.
  • Dark patterns erode trust because they are associated with violations of privacy, theft of money and information, and the installation of malware.
  • be aware of how technology may be misused, and to avoid the abuse caused by dark patterns.
  • Perceivable. Make it easy for people to perceive all content and opportunities for interaction.
  • Findable. Make it easy for people to find what they need.
  • Honest. Tell the truth. Do not mislead or misrepresent.
  •  Transparent. Be open about options, outcomes, and choices.
  • Notify. Tell people what will happen, what the product will do, and what they will get.
  • Clarity. Be clear and unambiguous.
  •  Comparison. Make it easy to compare options before making a decision or choice. Confirm.
  • As designers, we are sometimes asked to do something we recognize may not be in the best interests of the people using our products.
  • Navigation is the movement from place to place or state to state within a product.We often discuss it in terms of changing location, go to another page, or moving forward and backward in time, go back to a previous place or state.
  • Good information architecture is often considered essential for interaction design because it creates a structure for connecting the sections and features of products via search and navigation.
  • Tasked organized into a logical sequence of steps will be easier to complete.
  • Changing that sequence may surprise people and make them uncomfortable, which increases abandonment, and decreases satisfaction.
  • There are several types of navigation systems. We should choose and design a system that is most well suited to the product, the context in which it will be used, and what people will need it to do for them.
  • Adaptive navigation adjusts dynamically based on factors such as individual access privileges that may vary for different people.
  • Stream navigation is common on social networks where there is a steady stream of new content.
  • Search is actually a form of navigation that can be very effective when there are vasts amounts of content that would be challenging or time-consuming to navigate through a traditional hierarchical system.
  • We use search queries to identify a subset of the content and we use sorting and filtering to narrow it down to a more manageable amount of information to peruse.
  • hybrid navigation mixes different types of navigation into a single system. This is common.
  • Any interaction which takes us to another place or state in the product may be considered a navigational interaction.
  • Findability is when a person knows in advance that something is or should be within the product.
  • Discoverability is when a person does not know in advance that something exists and is available within the product.
  • People should be able to easily find the things they know they need and easily discover the things the product offers to them when relevant and necessary.
  • Content creation is an essential part of the design process.
  • Interaction designers often work closely with content strategists and writers to get the right content in the right place at the right time and with the best structure and presentation.
  • Readability is based on the complexity of the vocabulary and syntax, as well as the presentation of the text.
  • Create content with the appropriate vocabulary and syntax for the people who use the product. Organize the text to facilitate scanning. Help people focus their attention and quickly find what they need.
  • A general rule is the limit length to 45 to 75 characters with a 65-character target. However, optimal line length may vary based on font weight, font size, and other elements on the screen.
  • Microcopy refers to the small pieces of text found throughout the interface that guide and assist people using the product.
  • Microcopy is crafted to be focused and relevant at that specific point or moment in the interface. It is important for clarity and making confident predictions when interacting with a product.
  • Localization is the process of adapting a product to meet the language, cultural, and other requirements of a specific locale.
  • We need to craft products that can adjust to effectively display different languages. But we also need to carefully choose the labels, images, and content format that will convey information accurately.
  • It’s important for designers to work closely with these teams to ensure that information is easy to understand and culturally appropriate.
  • Interactive visual elements should follow the same guidelines we use for designing the structure, flow, and interface.
  •  Content is frequently the reason people choose to use a product.
  • Content strategy and UX writing are important practices, and there is much more information.

 

2.JPG

  1. I already knew that I have to be honest. Do not mislead or misrepresent. I already knew that it’s important for designers to work closely with these teams to ensure that information is easy to understand and culturally appropriate. I already knew that content creation is an essential part of the design process.
  2. I learned what a dark pattern is. Dark patterns lead people to interact in ways they would not have otherwise chosen and to make choices or perform actions that may not be in their best interests. I learned that any interaction which takes us to another place or state in the product may be considered a navigational interaction. I learned what a microcopy is. Microcopy refers to the small pieces of text found throughout the interface that guide and assist people using the product.
  3. How do I add microcopy on a website or product?

22 – UX Foundations: Interaction Design

3/11/19

Author: David Hogue

  • Our goal is to understand what people need and deliver products and services that meet those needs in usable, useful and valuable ways.
  • Gillian Crampton Smith and Bill Moggridge’s book, Designing Interactions, and Kevin Silver have identified the five dimensions of an Interaction Design language to describe the interactions between a person and a product.
  • Words, or the content, should be easy to understand and written to effectively communicate information. Visual representations include diagrams, charts, icons, illustrations, and other graphics.
  • The time during which people interact with the product is also important. We design how products and content change over time, such as personalization, sound or animation, or the ways in which people might measure their progress.
  • Design thinking is the name we give to exploratory and iterative methods where we seek to understand people and their problems, needs, and expectations, to identify and challenge our assumptions about our products and the people who use them, and to generate alternative strategies and solutions for better products and services.
  • We explore many possible solutions, evaluate them, and identify the best designs and prototypes.
  • We’ve discussed dimensions and models of interaction design, but one of the most common ways we describe the goals of our work is with guiding principles.
  •  We strive to understand people and the context in which they interact with a product or service, to define the purpose of a product or a service by understanding people’s needs and goals,craft an efficient flow through a product or service to help people reach their goal, ensure the products and services are meaningful, relevant, and valuable, ensure the products and services are easy to use, learn, and remember, and respect and protect the people who use our products and services.
  • Design, business, and technical decisions can all affect the product experience.
  • Difficult interfaces, prioritizing revenue over people’s needs, or implementing with inadequate technologies can all result in poor quality and bad experiences.
  • We should evaluate our work with research at each of these phases to validate our decisions and designs to ensure that they’re clear and meaningful but also because the design choices we make at one level can have an impact on the other levels.
  • A structure is defined at different levels and is essential for helping people establish a sense of place, state, and direction, during their interactions with the product.
  • Once we have mapped out the structure and connections, we start to identify and define the steps and states people will move through as they use the product to work toward their goals.
  • It’s very common to use multiple products and interact across multiple channels to complete more complex tasks, so we need to understand how people use products and services together to complete their tasks and achieve their goals.
  • Most products offer multiple functions, and each function will have a path through the product. In many cases there are also multiple ways to complete a task, that is, there may be more than one path to achieve the same goal.
  • Complex tasks have decision points that may branch in different directions. There may be actions that are repeated, and there may be underlying logic that changes direction or options based on context or prior interactions and choices.
  • We create diagrams, such as workflows, to represent the steps, decisions, and system logic that determines the flow through multiple branches and paths.
  • Complex products often have nested flows such as substeps within steps, multiple paths, and interactions which occur across products, channels, and sessions.
  • Appearance also has meaning. The choice of color, typographic treatments, images, illustrations, and icons can make products easier and more enjoyable to use, but poor interface design decisions can detract from or even interfere with the product experience.
  • People judge the quality of a product higher and think it works better when it’s attractive. Microinteractions are the small, nuanced reactions of a product while a person is interacting with it.
  • Interface design can affect and influence a person’s perception and understanding of the product, so it is common for designers to make adjustments across all three as we iterate and refine our work.
  • Design patterns are recurring, re-usable, optimal solutions to common design problems.
  • Good design patterns are familiar, recognizable, and easy to apply correctly, optimal, effective, and efficient ways to interact and complete a task, relevant in the context and to the goals.
  •  We use design patterns to improve consistency and cohesiveness, which makes products easier to learn, and enhances the ability for people to transfer their prior learning and experience.
  • New interface elements are created and tested, and good solutions emerge.
  •  As the benefits and measured and the successful patterns become widely accepted, designers begin calling them best practices and advocate for their application and use.1.JPG
  1. I already knew that new interface elements are created and tested, and good solutions emerge. I already knew that we need to understand what people need and deliver products and services that meet those needs in usable, useful and valuable ways. I already knew that design, business, and technical decisions can all affect the product experience.
  2. I learned that appearance also has meaning. The choice of color, typographic treatments, images, illustrations, and icons can make products easier and more enjoyable to use, but poor interface design decisions can detract from or even interfere with the product experience. I learned that difficult interfaces, prioritizing revenue over people’s needs, or implementing with inadequate technologies can all result in poor quality and bad experiences. I learned that design thinking is the name we give to exploratory and iterative methods where we seek to understand people and their problems, needs, and expectations.
  3. What would be considered as bad interaction design decisions?

21 – UX Foundations: Interaction Design

3/7/19

Author: David Hogue

  • If people perceive the opportunity to interact and are confident that the interaction will help them reach their goal, then the probability of interaction is very high, and we will observe focused and intentional interaction.
  • If people are confident that the product can help them, but the opportunities for interaction are unclear, ambiguous, or not perceivable, and if they do not know what they should do, then the probability of interaction is only moderate.
  • Feedback is a critical step in this interaction-design model because it ultimately helps us understand if we’ve used a product correctly and if it will help us reach our goal.
  •  Feedback occurs in three stages. First is an immediate response to our interaction. The product acknowledges that we’ve done something. When a product doesn’t respond to our interactions in the way or in the time we expect, we may think it’s frozen, stuck, or broken.
  • The second stage of feedback may be necessary to help people understand that work is still being done and that they should wait.
  • The third and final stage of feedback is the actual output or results of the product’s response to our interaction request.
  • Final feedback takes many forms depending on what the product does and what a person has requested.
  • When we receive feedback we expand the cognitive effort to make sense of it and determine what it means. If it is meaningful and understandable, we then assess if it matches our predictions and is aligned with our expectations.
  • When the feedback is easy to understand, meaningful and aligned with our expectations, matches our predictions and relevant to meeting our goal, then we’re likely to be satisfied and to find the product valuable.
  • When the feedback is easy to understand, meaningful and aligned with our expectations, matches our predictions and relevant to meeting our goal, then we’re likely to be satisfied and to find the product valuable.
  • People are much more likely to stop using a product if they encounter mistakes or errors, or if they find themselves on the wrong path toward incorrect or unwanted results.
  •  We learn how to interact in several ways. In the introductory psychology chapter, we discussed different learning theories.
  • The outcomes of our interactions, whether or not our needs and expectations are met, and even our assessment of our own skills and knowledge all produce emotional experiences that we associate with that product.
  • People will not put in the time and effort to learn how to use a product if the value that product provides is less than the bother or hassle of using it.
  • Consistency and cohesiveness are important for recognizing when previously learned skills and knowledge may be applied to a new product or situation.
  • Standardization and industry best practices help ensure the different products are externally consistent and share identifiably analogous elements and interactions when relevant.
  •  Don’t mislead people by designing products that use existing interactions, flows, patterns, and components, in different, unusual, or inappropriate ways.

Screen Shot 2019-03-07 at 7.12.17 AM.png

  1. I already knew that feedback is a critical step in this interaction-design model because it ultimately helps us understand if we’ve used a product correctly and if it will help us reach our goal. I already knew that you don’t mislead people by designing products that use existing interactions, flows, patterns, and components, in different, unusual, or inappropriate ways. I already knew that when we receive feedback we expand the cognitive effort to make sense of it and determine what it means.
  2. I learned that if people perceive the opportunity to interact and are confident that the interaction will help them reach their goal, then the probability of interaction is very high, and we will observe focused and intentional interaction. I learned that final feedback takes many forms depending on what the product does and what a person has requested. I learned that consistency and cohesiveness are important for recognizing when previously learned skills and knowledge may be applied to a new product or situation.
  3. I want to learn when to take feedback and when not to?

20 – UX Foundations: Interaction Design

1/  /19

Author: David Hogue

  • Classical conditioning can also be used to explain how we learn emotional responses to otherwise neutral signals or triggers in our environment. These are called conditioned emotional responses.
  • Classical conditioning can also be used to explain how we learn emotional responses to otherwise neutral signals or triggers in our environment. These are called conditioned emotional responses.
  • Reinforcement and punishment can be more complicated than just outcomes we like and outcomes we dislike. First, remember that reinforcement is defined as any outcome that increases the probability of a behavior. And punishment is any outcome that decreases the probability of a behavior.
  • Reinforcement is still effective even if it is not received every time a behavior is performed. Reinforcement schedules may vary by time and frequency.
  • Albert Bandura developed a theory that bridged the cognitive and behavioral sides of learning. In the social learning theory, learning is a cognitive process. People learn in social contexts and learning may occur even without performing the behaviors or being directly reinforced.
  • We learn by observing others and the consequences of their behavior. They serve as models and we imitate them.
  • Learning may occur without any noticeable change in behavior because learning involves extracting information from what has been observed.
  • Observation, cognition, and the context all influence what a person learns.
  • with symbolic instruction, modeling occurs through media, including the web, written, and/or illustrated information, video, and audio.
  • Instruction manuals, books, self-directed training, and frequently asked questions and help centers often involve symbolic training.
  • Regardless of which theory is applied, all of our learned behaviors, attitudes, and values based on our past experiences are brought to bear on our current and future experiences.
  • The less similar a new object or situation appears, the more we have to think about it and look for possible similarities with our past experiences.
  •  If we want people to quickly generalize their past experience to a new situation, then we need to make the new situation as familiar, similar, and recognizable as possible.
  • Discriminate learning occurs when we identify the differences between situations that appear similar. We learn when to perform a behavior and when not to.
  • When you look at the interface of a website, mobile app, kiosk, or any other product, your perceptions can determine how you think and feel about it. Your motivations can determine how you behave with it. And the outcomes can change your feelings, understanding, and probability of using it again.
  • This interaction cycle can be used to help us understand how people leverage their prior experience, identify opportunities to interact, develop expectations about the product, how they make sense of what happens, and how they learn and remember so they can become more accurate and efficient.
  • In order to interact with an interface, people need to first perceive the opportunity to interact. People must understand that there are things they can do.
  •  It is more difficult to perceive opportunities to interact when content and functionality is hidden, such as behind rollovers or gestures, offscreen or in a different state, such as mobile dialogues, or even behind abstract icons.
  • Opportunities for gestural and voice interactions can be especially difficult to communicate and people often do not know what they can do or say so many interactions are overlooked.
  • Designers may speak about placing affordances in a product but this really means we are crafting and including signals, cues, and indicators in the product to help people perceive the opportunity to interact.
  • We also need to design for how we touch, hold and move our devices physically. Rotating, shaking and squeezing are all ways to interact with them and we even need to help people aim or orient their devices for uses like compass directions and facial recognition.
  •  Good design solutions increase the permeability of opportunities to interact as well as inform people about the appropriate or correct ways to interact.
  • We also rely on our past experiences to help us identify how to interact when products or situations are new but similar and familiar.
  • They may randomly interact just to see what happens but they are much more likely to ignore the site or product and move on to look for and try others.wu.JPG
  1. I already knew that we learn by observing others and the consequences of their behavior. They serve as models and we imitate them. I already knew that in order to interact with an interface, people need to first perceive the opportunity to interact. People must understand that there are things they can do. I already knew that if we want people to quickly generalize their past experience to a new situation, then we need to make the new situation as familiar, similar, and recognizable as possible.
  2. I learned that learning may occur without any noticeable change in behavior because learning involves extracting information from what has been observed. I learned that opportunities for gestural and voice interactions can be especially difficult to communicate and people often do not know what they can do or say so many interactions are overlooked. I learned that good design solutions increase the permeability of opportunities to interact as well as inform people about the appropriate or correct ways to interact.
  3. How do I catch the viewers attention and keep it?

19 – UX Foundations: Interaction Design

1/1/19

Author: David Hogue

  • Mental models are our thoughts and expectations about how things work in the real world and they influence how we behave, solve problems and perform tasks.
  • When designing a new product we need to consider people’s mental models so that we can make it easier for them to understand, use and gain benefit from it. For example, we have concepts about what a car is, and we have mental models for how it works and how to drive it.
  • Mental models reside in the minds of the people using the product. This is what determines their expectation of how it should work and how they might interact with it.
  • Research helps us identify and define people’s expectations for a product or process so that we can either design something that aligns with their mental model or we can design a way to help them learn a new method or interaction.
  • The conceptual model is how the product is designed to work and it resides in the minds of the people who created the product.
  • But if the design of the product does not align with the person’s mental model, then they’re likely to find that the product is confusing and difficult. Research and testing help us align the person’s mental model with the product team’s conceptual model.
  •  So it’s our responsibility to understand how something really works, the system and design an interface, the conceptual model, to make it easy to use because that’s aligned with the person’s mental model.
  • Thinking is hard work and people seek ease in minimal effort. We need to craft designs that make it easier and simpler for people to understand information and complete their tasks.
  •  If we exceed a person’s capacity to process information, then some information gets overlooked, forgotten, or misunderstood.
  • Be careful about how much your product asks people to notice, think about, and remember.
  • Cognitive friction slows us down. It occurs when our thinking, reasoning, and memory encounter things that change or differ in ways we don’t immediately understand. When things change without purpose within a product, it slows us down. When things appear the same, but actually work differently, it slows us down. Any time a person stops and asks, what is this? What does this mean, what does this do, and why is this like this? We’ve interrupted them and caused them to think about what they are trying to do rather than just doing it.
  • The product is in their way rather than helping them and that’s a sign of cognitive friction.
  • Use common mental models and accepted design patterns to reduce cognitive friction.
  • One way to reduce cognitive load is to show only what people need at that moment and to select default choices or pre-fill from saved information.
  •  Identify smart defaults based on context, usage patterns, and past behavior. Present smart defaults when they’re likely to be correct, but we need to make default choices easy to change when they’re not.
  • Thinking and memory require effort, but we can design devices and interfaces that do much of the work for us. By understanding what increases cognitive load and what causes cognitive friction, we can create conceptual models that match the mental models and then only ask people to do the work that is necessary.
  • Despite the variable and subjective nature of emotions, we strive to create products that satisfy and delight, experiences that meet people’s needs and make them happy, products that people like, want to tell others about and to use again.
  • It’s helpful for us to understand that emotions are described and classified so that we can focus on what leads to the positive experiences we want people to have.
  • We commonly identify delight as a design goal or a principle to guide our products but we often try to accomplish this with simple solutions such as cute illustrations or icons, showy animations, or even unexpected moments and surprises. The problem with these solutions is that they are superficial. We can only be surprised once and then we expect it.
  • We may only find something cute or dazzling the first few times and then we ignore it or want it out of our way so that we can do what we need to do.
  • If we want to keep delighting people this way, we need to keep changing the cute things and introducing new variations and finding new ways to surprise. This is not sustainable. We need to take a deeper, longer lasting, more comprehensive approach to creating delightful experiences.
  •  Deep delight emerges from products that are frictionless and effortless.
  • And finally, only when a product is functional, reliable, and usable, are people able to experience the positive, pleasurable aspects of the product. Only now can they experience a delight.
  • Product teams often make the mistake of focusing first on functionality and getting all of the features in place, then turning their attention to reliability and usability. By the time they have everything working, they may have missed deadlines and conclude that it’s “good enough to launch” while intending to return and improve the polish and add delight later.
  •  Launch the most important features first, then come back and add more functionality ensuring that each new feature released is reliable, usable, and pleasurable. There is no single way to add lasting delight to a product.
  •  Delight is not added at the end. It emerges when we strive for excellence in all elements of a product and make delight a goal on par with functionality, reliability,  
  • Empathy is the ability to understand and share the feelings of another person. We must understand how people feel, just as we understand what they need, what they expect, and how they behave.and usability.
  • We cannot assume that people will use a product and do things the same way we, as designers and developers would.
  • Spend time listening to and observing the people who use your product, and collect as much data as you can. Try to see their problems and goals from their perspective. Don’t use your personal opinions and preferences to make decisions. Work together with your colleagues to provide feedback and keep the team focused on the person using the product.
  • For interaction design we focus on the external cues and signals, usually presented by the product, and what people do in response.

warmup.JPG

  1. I already knew that I have to be careful about how much your product asks people to notice, think about, and remember. I already knew that if we exceed a person’s capacity to process information, then some information gets overlooked, forgotten, or misunderstood. I already knew that thinking is hard work and people seek ease in minimal effort. We need to craft designs that make it easier and simpler for people to understand information and complete their tasks.
  2. I learned that when designing a new product we need to consider people’s mental models so that we can make it easier for them to understand. I learned that we cannot assume that people will use a product and do things the same way we, as designers and developers would. I learned that we have to launch the most important features first, then come back and add more functionality ensuring that each new feature released is reliable, usable, and pleasurable.
  3. I want to learn when is it the right time to make sure your product gives the user delighted.

 

18 – UX Foundations: Interaction Design

2/27/19

Author: David Hogue

  •  We want to understand both their goals and what they need so we can design products and services that will help them achieve these goals.
  • Understanding motivation helps us better describe the context and goals because it helps us understand the people, situation, needs, objectives, importance, and urgency.
  • Let’s start with locus of control. Sometimes people are motivated for external reasons, such as gaining attention, fame, or money, and sometimes people are motivated for internal reasons, such as curiosity, competition, or being helpful.
  • When describing motivation this way, we often talk about the locus of control. Does the force behind the behavior come from inside or outside of us? Intrinsic motivation is when behavior is driven by internal factors. People feel in control and it is personally rewarding.
  • Extrinsic motivation is when behavior is influenced by external factors, such as earning a salary, getting good grades, having an obligation such as a job responsibility or even avoiding punishment.
  • The need for affiliation is characterized by our drive for family and social interactions. And the need for power is characterized by our drive for recognition, status, and influence. These motives, or needs, influence our behavior and different people have different levels of each.
  • Behavior is complex and people can be very different. But if we understand more about their context goals and expectations then we can design products that better align with motivations and meet their needs.
  • Cognition refers to a wide range of mental processes, what we would often refer to as thinking.
  • Cognition is a higher-level function of the brain and encompasses many different mental activities. It’s a broad field and includes attention, memory, reasoning and logic, concept formation, and more.
  • Attention is a limited resource. We cannot pay attention to everything around us all the time. We focus our attention on what we think is most important, and we expand our cognitive effort on that. We get frustrated when something distracts us because it steals our attention.
  • Our devices have become extensions of our own memory, so it’s important that we design products that make it easy for people to enter, find, and retrieve important information when they need it.
  • There are different theories of memory, but the most well-known describes three stages that information passes through while it is processed for salience, structure, associations, and meaning.
  • First is the sensory store or sensory processor. This is like a snapshot of incoming sensory information, held just long enough to identify important information and pass it on to other parts of the brain.
  • Recognition is cognitively easier than recall, and luckily many of our experiences with products involve selecting from choices rather than actively recalling information.
  • Show people information and functionality when they need it. Don’t make them remember it.
  • Put information and functionality where people expect to find it. Don’t hide it or make them go looking for it.
  • Present information in meaningful ways using good structure, labels, content, and icons.
  • So we need to conduct research to understand why they are uncertain and what might be done to design a more helpful product.
  • Designs that track and display progress as a one-way path encourage people to think about choosing their next action to get even closer to the goal.
  • Subgoal decomposition is when a person takes a large, complex problem and breaks it down into smaller, more manageable steps.
  • Transformation is when a problem is solved by changing it into another format or structure.
  • New technology products often help people do common tasks in new ways, so the design needs to help them transform their previous actions into new interactions.
  • Decision-making is the process of establishing a belief or choosing a course of action from several alternatives.

Screen Shot 2019-02-27 at 7.28.14 AM.png

  1. I already knew decision-making is the process of establishing a belief or choosing a course of action from several alternatives. I already knew we want to understand both the customer’s goals and what they need so we can design products and services that will help them achieve these goals. I already knew understanding motivation helps us better describe the context and goals because it helps us understand the people, situation, needs, objectives, importance, and urgency.
  2. I learned that extrinsic motivation is when behavior is influenced by external factors, such as earning a salary, getting good grades, having an obligation such as a job responsibility or even avoiding punishment. I learned that there are different theories of memory, but the most well-known describes three stages that information passes through while it is processed for salience, structure, associations, and meaning. I also learned that cognition refers to a wide range of mental processes, what we would often refer to as thinking.
  3. I want to learn how to tackle down problems properly.

17 – UX Foundations: Interaction Design

2/25/19

Author: David Hogue

  • Behavioral, cognitive motivation, emotion, sensation and perception are the key fields most useful for interaction designers.
  • We shift from context, environment, goals, and objectives, to how individuals perceive, understand, feel and act in a situation.
  • Perception is the process of becoming aware of something through the senses.
  • As designers, we need to help people focus their attention on what’s important, and we need to make it easier for them to understand the meaning of that information.
  • When designing for color-deficient vision, we need to make certain we are not relying solely on color cues, and that important colors can be differentiated.
  • We also need to be careful about using certain color combinations, because they may lead to chromostereopsis, a visual illusion of depth caused by specific adjacent colors, usually red and blue, or red and green. When these colors are side-by-side, the edges or boundaries between them can appear to vibrate or oscillate between foreground and background. Chromostereopsis makes it difficult to discern a clear edge, and it can also lead to visual fatigue and eye strain.
  • We need to use multiple cues such as a visual message and a vibration, so the people with hearing loss may also be alerted.
  • Proprioception is our internal sense of relative position and movement that we use to keep track of our own body. This is how we’re able to close our eyes and quickly, and hopefully accurately, touch the tip of our nose with a finger.
  • Proprioception is important as a design consideration because we are creating products that leverage spatial gestures.
  • We have perceptual constancy for shape, lightness, color, distance, size, location, and timbre, or the quality of sound.
  • The term Gestalt is a German word that means shape or form, and the Gestalt principles and laws describe how we perceive the world around us as meaningful and complete objects, with a clear distinction between foreground and background.
  • Good design with solid perceptual structure actually makes it easier for people to understand and interact with a product.
  • There are several Gestalt laws that describe how we organize our perceptual experiences, and we can use these organizational principles to create designs that are more meaningful and easier to perceive.
  • The Law of Figure-Ground describes how we organize our perceptions in terms of foreground objects or figures, which are clearly defined, such as a tree, and the background, which may be unbounded or vaguely defined, such as the sky.
  • The Law of Simplicity describes how we organize our perceptions into the simplest possible experience.
  • The Law of Proximity states that objects near one another in space or time are perceived as being a group and belonging together.
  • The Law of Similarity states that objects with similar characteristics, such as form, color, size, and brightness, are perceived as belonging together.
  • The Law of Common Fate describes how objects moving together are perceived as belonging together. This law is particularly important for motion design because elements on a screen that move together, such as a list of links in navigation menus, are easily perceived as a single object.
  • Jame Gibson used the term affordances to describe action possibilities that are latent in the environment. In other words, the physical characteristic of objects make possible what we are able to do, and we recognize when we are able to interact with that opportunity.
  • When people perceive a similarity between digital representation and an actual physical object, they understand that they may interact with this digital image in a similar way.
  • We use visual design as a signal or cue for when, where, and how to interact.
  • Over time, people learn how to use new products, and we can reduce the number of signals in the interface.
  • If you’re designing an interaction that is very familiar and common, you have more flexibility and may be able to design the interface with fewer perceived affordances because people will already understand the interface and apply their past experience to it.
  • When products are very complex or are new digital versions of familiar physical products, we might use visual techniques, such as skeuomorphism, to help people identify how to interact with them.
  • Interactions are easier to learn when we include multiple signals, including perceived affordances. These may include visual, haptic, and auditory cues that combine to make it even easier to understand interactions.

Screen Shot 2019-02-25 at 7.18.37 AM.png

  1. I already knew that as designers, we need to help people focus their attention on what’s important, and we need to make it easier for them to understand the meaning of that information. I already knew that we use visual design as a signal or cue for when, where, and how to interact. I already knew that interactions are easier to learn when we include multiple signals, including perceived affordances.
  2. I learned that behavioral, cognitive motivation, emotion, sensation and perception are the key fields most useful for interaction designers. I learned that proprioception is our internal sense of relative position and movement that we use to keep track of our own body. I learned that we need to be careful about using certain color combinations, because they may lead to chromostereopsis, a visual illusion of depth caused by specific adjacent colors, usually red and blue, or red and green. When these colors are side-by-side, the edges or boundaries between them can appear to vibrate or oscillate between foreground and background. Chromostereopsis makes it difficult to discern a clear edge, and it can also lead to visual fatigue and eye strain.
  3. I want to know what skeuomorphism is and how to use it properly.