Chapter 4 UX: Emotion and Experience PDF

CHAPTER 4 UX: EMOTION AND EXPERIENCE  USER EXPERIENCE The process of enhancing user satisfaction with a product involves improving its usability, accessibility, and the overall satisfaction it provides. Two interchangeable terms known as UX and UI design, which have been...

CHAPTER 4 UX: EMOTION AND EXPERIENCE  USER EXPERIENCE The process of enhancing user satisfaction with a product involves improving its usability, accessibility, and the overall satisfaction it provides. Two interchangeable terms known as UX and UI design, which have been defined by the tech industry. UX design, short for "user experience design," focuses on creating products with a human-centered approach.  USER EXPERIENCE Don Norman, a cognitive scientist and co-founder of Nielsen Norman Group Design Consultancy, coined the term in the late 1990s. He defines user experience as encompassing all aspects of the end- user's interaction with a company, its services, and its products.  USER EXPERIENCE UX design is not primarily concerned with visuals; its main focus is on creating a satisfying overall experience.  USER INTERFACE UI design is exclusively a digital practice, encompassing all visual and interactive elements of a product's interface, such as buttons, icons, spacing, typography, color schemes, and responsive design. UI design incorporates the brand's visual assets and strengths into the product's interface, ensuring consistency, coherence, and aesthetic appeal.  UX UI 4 STAGES OF UX  4 STAGES OF UX 1. Research: The initial step in both UI and UX design involves conducting research to understand the target audience, their needs, and the purpose of the website or app. This research may include interviewing potential users, examining competitors, and gathering insights. Both UI designers and UX developers need to collaborate during this phase to brainstorm ideas and find solutions to challenges and obstacles.  4 STAGES OF UX 2. Analysis: By studying the audience and competitors, valuable insights into their needs, preferences, and lifestyle can be gained. This knowledge helps in developing a product (website) that meets the audience's requirements. For example, through interviews, it may be discovered that users prefer a streamlined checkout process. This information influences site navigation, layout, and other design elements. The analysis stage also involves creating personas, storyboards, and defining specific design tasks for the team.  4 STAGES OF UX 3. Design: The design phase starts with creating mockups and exploring various design options. This phase includes developing sitemaps, wireframes, and prototypes.  4 STAGES OF UX Sitemaps depict the website's structure and the relationship between different pages, helping identify content placement and navigation flow. Wireframes provide a visual representation of the website or app's layout and content organization, aiding in understanding where elements will be positioned. Prototypes transform wireframes into interactive designs, allowing for user testing and feedback on the usability and user experience. Both UI and UX designers collaborate during this stage to identify and address any issues before moving to the coding phase.  4 STAGES OF UX 4. User Testing: This stage involves comprehensive testing of the prototype. User interactions, surveys, questionnaires, and interviews are conducted to gather feedback and insights. The objective is to simplify the website and identify any problem areas. It is crucial to conduct user testing as early as possible to ensure prompt resolution of issues. In some cases, it may be necessary to revisit earlier stages of the design process to refine the design based on user feedback. The User Persona, Use Cases, Wireframes and Prototypes  USER PERSONA A user persona is a fictional character that represents different types of users who may be interested in using your service, product, or website. It is created based on research to uncover how people search for, buy, and use products.  USER PERSONA Creating a persona helps identify your target audience by answering questions such as: Who is the ideal customer? What are the current behavior patterns of the users? What are their needs and goals? What challenges and pain points do they face in the given context?  USER PERSONA Four stages of creating a user persona: 1. Choose relevant questions for your survey. 2. Set up a survey on a popular platform. 3. Analyze the collected data. 4. Build the persona based on the insights gathered. USER PERSONA  Online Banking System Who are they? Goals Barrier Bank Client Transfer Money Given their work schedule, thay can’t do so as they need to go physically at the bank. Teller Cheque Encashment Limited time, long queue, Limited resources 1. Project Context 2. User Persona 3. Site map 4. Wireframes 5. Use Case Diagram  USE CASES A use case diagram is a visual depiction of how users will interact with a system to perform tasks. It illustrates the behavior of the system from the user's perspective when a request is made. Each use case is presented as a series of straightforward steps, starting with the user's objective and concluding when that objective is achieved.  USE CASES The use case diagram includes the following components: Actor: Represents the individual or entity interacting with the system. Use Case: Describes a specific functionality or task that the user wants to accomplish. Relationship: Depicts the association or interaction between an actor and a use case, indicating how they are connected within the system. USE CASES  USE CASES Benefits of Use Cases Use cases offer valuable advantages as they help clarify the expected behavior of a system and facilitate the identification of potential issues. They provide a comprehensive list of objectives, which can be used to assess the system's cost and complexity. This allows project teams to prioritize and negotiate which functions should be implemented as requirements.  WIREFRAMES Wireframes are a simplified representation of the user interface (UI) and its various components. They serve the purpose of visually presenting a page early in the project, aiming to obtain approval from stakeholders and the project team before entering the creative phase. Wireframes are also useful for designing the global and secondary navigation, ensuring that the terminology and structure of the site align with user expectations. USE CASES  WIREFRAMES Advantages of Wireframing Wireframing offers several advantages, including the ability to provide an early visual representation that can be reviewed with clients. It also serves as a valuable feedback mechanism for usability testing with users during the prototype stage. Compared to concept designs, wireframes are easier to modify, and once they are approved by clients and users, they instill confidence in the designer.  WIREFRAMES Disadvantages of Wireframing Despite its advantages, wireframing has a few limitations. Since wireframes lack design elements and technical considerations, clients may struggle to fully grasp the concept. The designer also needs to provide additional communication and explanation to support the wireframes, especially regarding the positioning of page elements. Additionally, when adding content, it may initially be challenging to fit within the wireframe layout, requiring close collaboration between the designer and copywriter to make adjustments.  PROTOTYPING Prototyping involves creating the initial UI design, which can be either interactive or non-interactive. It is an experimental process where design teams transform ideas into tangible forms, transitioning from paper to digital. Various levels of fidelity are used to build prototypes, allowing design concepts to be captured and tested with users. Through prototyping, designs can be refined and validated, enabling brands to release the most suitable products. PROTOTYPING  PROTOTYPING Why is prototyping important? Receive early feedback on different design options Provide tangible examples to gather feedback Demonstrate the possibilities and potential of the design Facilitate the creation of improved designs Effective in communicating design concepts