HCI PDF REPORT.pdf

1 Module 2 | How to Build Human-Centered Software 2 Module 2 | How to Build Human-Centered Software Lesson 4: Storytelling and Rapid Prototyping SPECIFIC LEARNING OUTCOMES: In this lesson, you are expected to: explain how to create a prototype in a s...

1 Module 2 | How to Build Human-Centered Software 2 Module 2 | How to Build Human-Centered Software Lesson 4: Storytelling and Rapid Prototyping SPECIFIC LEARNING OUTCOMES: In this lesson, you are expected to: explain how to create a prototype in a system; create systems diagraming; discuss the HCI interface best practices; identify software prototyping tools. PRE-ASSESSMENT: Instruction: Read, analyze and answer each of the questions below by choosing the letter of the MOST APPROPRIATE answer. 1. What is Rapid Prototyping? a. The process by which a model of a final product can quickly be made b. Changing the design of something after production has already begun c. When companies or teams are working on multiple aspects of the same design at one time d. Designing something while competing against other departments 2. What is the major importance of a prototype? a. To impress investors c. To get a patent b. To show how the item works d. To place as a decoration 3. The following are the types of Rapid Prototyping processes, except: a. Additive c. Virtual b. Subtractive d. Layering 4. The following are the starting material of the Additive Rapid Prototyping processes, except: a. Powder c. Liquid b. Solid d. Gas 5. The starting material of the Stereolithography method is __________. a. Solid c. Powder b. Liquid d. Gas 6. Which of the following process is true for Fused-deposition modelling (FDM) machine? a. CAD Design > Model is Sliced > Generate Extruder Path > FDM Machine Fabricate Model b. Model is Sliced > CAD Design > FDM Machine Fabricate Model c. Model is Sliced > Generate Extruder Path > CAD Design > FDM Machine Fabricate Model d. Generate Extruder Path > CAD Design > Model is Sliced > FDM Machine Fabricate Model 7. Which Rapid Prototyping processes uses Photo-sensitive liquid as starting material? a. Laminated Object Manufacturing b. Stereolithography c. Selective Laser Sintering d. CNC 3 Module 2 | How to Build Human-Centered Software 8. Both 3D Printer (3DP) and Selective Laser Sintering (SLS) method uses powder as the starting material. However, what is the difference between this 2 methods. a. 3DP uses a binding agent; SLS uses a laser b. 3DP uses a laser; SLS uses a binding agent c. 3DP uses a filament extruder; SLS uses a binding agent d. 3DP uses a filament extruder; SLS uses a laser 9. Which of one is NOT related to rapid prototyping definition? a. Layer by layer c. From 3D CAD data b. Physical model d. Production line 10. Which of the following are the process in RP cycle? a. Post-processing b. Transfer to machine c. Pre-processing d. All of the above LESSON MAP: LESSON MAP Storytelling and Rapid Prototyping Prototyping First System Diagramming HCI Interface Best Practice Software Prototyping Tools This map shows the overview of Storytelling and Rapid Prototyping that includes prototyping first, system diagramming, HCI interface best practices and software prototyping tools. 4 Module 2 | How to Build Human-Centered Software CORE CONTENTS ENGAGE: ENGAGE: Knowing HCI and UX Activity 7: Idea / Concept Generation INSTRUCTION: Get out Post-it notes, paper, and pens/pencils. This challenge will be based on your HMW statement from Module 2 Lesson 3, User Insights for Software Solutions. Part 1: Post-it ideation: Take 20 minutes to write down as many possible ideas, concepts, or solutions for your user insight. (Do not self-edit during this process; any idea is worth writing down.) Part 2: Capture your process: Take a picture of your raw ideas. Part 3: Idea patterns and categorization: 1. Categorize your ideas into themes. 2. Take another picture. Part 4: Analyze your ideas category themes: 1. Reflect on the themes and combine any ideas/concepts/solutions that are similar. Do not edit yourself during ideation. Any ideas should be written down, even if it has already been created or seems outlandish. DO NOT EDIT DURING IDEATION! EXPLORE: EXPLORE: As you continue to grow your human-computer interaction (HCI) skills, it is essential to practice these skills over time. Up to this point, we have learned how to combine our research data from our new qualitative and quantitative methods, as well as to align our software analysis to our users through data gathering, analysis, and interpretation. All of the HCI user research has allowed us to understand something true and hopefully produce a deep and meaningful user insight. The user insight is the kernel of a solution or multiple solutions, and our role now is to unpack how we move from user insight to a software solution. An HCI designer's job gets very tactical as we move from user research to creating human-centered solutions. Based on the user insight, the HCI designer can start employing human-centered storytelling methods that help to align software solutions to their users. Now that you have a solid grasp of HCI user research, both qualitative and quantitative, and how that research helps an HCI designer generate user insights, let's discuss what to do with this valuable user research 5 Module 2 | How to Build Human-Centered Software data. An HCI designer's success is ultimately measured by the software they create and because HCI methods have produced more useable, accessible, and useful software products for users, this lesson will cover how we take user research and start to generate a software solution. This lesson will converge and focus your research data into making a software solution via software prototyping. Software solutions are at the heart of HCI design and the skills of prototyping will show you how to go about taking your user research and building software solutions. Prototyping first As a growing HCI designer, you will start to see a lot of conversation in the community about prototyping. The role prototyping plays in the creation of great software is hard to overstate. Prototyping, as we have discussed, is the creation of an early model of a software solution that is built to test the success or failure of the solution with our users. In the HCI design workflow, creating a prototype is essential to flushing out software ideas. The origins of the word come from the Greek word prototypon (πρωτότυπον). When you first start to create software solutions, they are never fully baked; they are early ideas and are supposed to be primitive. Ideas should be plentiful and the research you do as an HCI designer should uncover a lot of opportunity from a few useful insights. Out of your user insights come ideas, concepts, or potential solutions. Many software opportunities can be generated from a user insight by using an ideation method known as a How Might We (HMW) statement. For example, I created 15 ideas quickly from the HMW user insight statement presented in the previous lesson: HMW statement: How might we help a growing teenage boy with many factors pulling at his attention that needs to be more socially supported by his peers when eating healthy food because, in his environment, his social circle has more impact on his health habits than his doctor or parents? The HWM statement is a jumping-off point from our user insight and a catalyst for creating ideas. I hope the HMW statement sparks ideas of your own. Before moving on to reading my ideas, I recommend you write down some possible solutions you thought of to the provided statement as practice. Here are some ideas that I generated from the HMW statement: Design and integrate health tips into the teenager's social media. Create a social group for teenagers with a bleak outlook. Incentivize healthy eating through a partnership with a celebrity. Create a teenager-based social networking site centered around improving behaviors including health. Design a health education platform that is socially accepted by his peers. 6 Module 2 | How to Build Human-Centered Software Create a peer-to-peer network for sharing social taboos that are supported by health tips. Create a teenage persona that allows the teen to identify where his social decisions impact his health factors. Design a cookbook app for teenagers. Create a messaging bot that shares health tips for teens. Design an ad campaign targeted at the biggest health risk caused by a social risk. Help teenagers track their health decisions with their friends. Design a social app that rewards teenagers in groups for accomplishing healthy-eating goals. Create a teenager-based education platform that decreases the social risk of healthy decisions. Create a teenage robot companion that shares healthy tips among teenage gossip. Design an email and text message communication platform that shares teenager-relevant health tips. None of these ideas are worth anything in the form of written concepts, although having a lot of potential ideas from one user insight is incredibly helpful for the HCI team. Not only can an HCI design evaluate many ideas against each other but it can also start to reveal patterns and themes in the ideas created before moving onto the execution of the idea through a prototype. Among my 15 quick ideas, there are some similar concepts: Ideas 1, 2, 4, 6, 11, and 12: A social networking theme as part of the solution, which is logical based on our audience as well as the subject. Plus, many social application software solutions are available and suited to create something new. Ideas 5, 8, 13, and 15: An education theme for improving and solving user insight. The education theme is included because teenagers' brains are still growing and improving behaviors is a goal achieved over time through practice and education. These themes are important and may directly influence the direction of a chosen solution. Along with idea themes, you can also combine ideas into one stronger idea. For example, there are six ideas on social networking, and three of those ideas –ideas 2, 4, and 11 – all deal with a social app of some kind. What would it be like to combine the ideas? Let's take ideas 2, 4, and 11 – to make a social health application. For example, say we want to make a social health application targeted at teenagers that focuses on health behavior-based content that includes incentives and rewards for completing health challenges with their friends. When generating ideas, make sure you don't jump into the combining stage too quickly. Ideally, you are also combining your ideas with others on your team. The value offered by many potential solutions and then reviewing them as a group will reveal more themes and potentially more ideas that can be combined between group members. If many team members generate ideas with a similar theme, it might point to a particularly deep idea that is worth pursuing. Identifying the potential of ideas is the reason HCI designers generate lots of ideas in the first place. If you generate a lot of ideas on a similar theme as a team, it shows that those ideas may be more appropriate for addressing the user insight with a solution. 7 Module 2 | How to Build Human-Centered Software Now it is your turn to try and create some ideas. Of course, there are many other potential ideas for solving our user insight, but if the HCI team continues to generate ideas that revolve around these themes, then you will know that you have some potential. Every user insight will generate unique ideas and therefore have unique idea themes. The goal is to generate a lot of ideas to give the HCI team options, as well as to make sure the user is being the most served by the chosen idea. Hopefully, you have created a bunch of ideas and continued to grow your ability to generate ideas from your HMW user insight statement. The number of ideas generated during the ideation of your user insight can be evaluated through Laseau's funnel. Laseau's funnel In Laseau's funnel, Funnel one is the exploration of ideas – a funnel that is widening over time and starts with user research and is fueled by user insights. Laseau's funnel is the combination of the divergent elaboration of ideas and the convergent reduction of ideas through prototyping: Over time, the ideas produced increases as the HCI designer learns more about their users, creates deeper user insights, and generally improves with creating ideas through practice. The second funnel is an inverted funnel that focuses on ideas. This funnel can be characterized through prototyping. Ideas can only be understood if they solve the problem, not through testing. A prototype makes an idea tangible and, in terms of software, it allows users to interact with the solution and reduces the idea down to something that can be validated. Once you have a number of idea themes going as a team from your user insight, the next stage is to select a few ideas to move forward with and establish a hierarchy. If you have lots of ideas to choose from, this is a better position as an HCI team. Ideas and their potential are only evaluated against another idea. If you only generate one idea, then that is the solution you have to pursue. This is a risky position. If your user insight 8 Module 2 | How to Build Human-Centered Software is only generating one solution as well, it is either a weak user insight or your ideas are also lacking quality. Having only a few ideas are a clear warning sign that a deep user insight has not been discovered yet. On the other hand, if you have lots of ideas, this allows the HCI team to quickly pit ideas against each other and allow the best idea to win out. Choosing ideas is not purely about the survival of the fittest, however; it is about establishing a hierarchy of ideas. Let's discuss a few methods for determining how a team can choose the best ideas. Dot voting During dot voting, participants choose from a set of options – in our case, ideas – and apply their vote. Dot voting allows team members or stakeholders to voice and visualize their opinion: The dot votes should have enough votes per member to create a way for voting ties to not occur – for example, if you have a team of 5 and you have 2 ideas that are being voted for, each member should be given one vote. In the case where 2 ideas are voted for, the voting tally can never result in a deadlock with an uneven set of votes. Avoiding voting deadlock is a good thing. For the same reason, the supreme court in the USA has 9 justices; dot voting should attempt to allow ideas to clearly be established via a vote. 2x2 opportunity matrix Furthermore, the matrix can be made with any two factors that might help plot your idea, but typically, it will include looking at value (idea originality/innovation) versus financial stake (cost/implementation). When evaluating ideas that are worth pursuing first, look for ideas that live in the highly innovative, low-cost space first. Plotting ideas on a 2x2 matrix can also be helpful when done alongside the first dot voting method as the team may vote for a highly innovative idea without considering the high cost associated with implementation: 9 Module 2 | How to Build Human-Centered Software The goal in choosing an idea is not to create just one solution to rule them all, but rather having lots of ideas, which is challenging, and evaluating the ideas before your team commits more energy and cost to the solutions is essential. Many times, the best outcomes of dot voting and plotting ideas on a 2x2 matrix are it allows you to move forward with a few ideas in an established hierarchy. This idea hierarchy is where we lean on the need for prototyping. Starting off with a number of opportunities also allows an HCI team to practice the art of "prototyping first." Prototyping is making an idea tangible and ideas can quickly be validated by your user through making a solution. Prototyping allows the HCI designer to funnel the chosen ideas into possible solutions. Prototyping is an essential process for any HCI designer. Let's discuss the types of prototyping options. Paper prototyping (low fidelity) For instance, paper prototyping is a process by which cheap paper models are used to simulate a computer or web applications for building software quickly and cheaply. The goal of paper prototyping is to act as the quickest method for simulating software and getting your ideas into the hands of your users. Paper prototyping relies on tangible objects (paper) for usability and functions under the assumption that the user will interact with the paper object as they would with a real software application or technology. Paper prototypes are a form of idea sketching that allows an HCI designer to think through a software experience. Typically, paper prototypes are early models and are rendered through low-fidelity visuals known as (sketched) wireframes. Sketched wireframes are a representation of a user interface of a software product or website that is drawn by hand rather than rendered via a software application. A wireframe is higher fidelity than a paper prototype, which is typically sketched or hand-drawn. A paper prototype is far from the final product and won't look like or feel like the final product. If you put multiple wireframes together as a way to test an interaction or software feature, where each paper screen mimics the possible design, the wireframes/sketches are no longer static, elevating the sequence to a paper prototype. 10 Module 2 | How to Build Human-Centered Software In usability testing, a test participant is shown the paper prototype. The prototype moderator has to get the tester to use their imagination as the paper version of the software is not actually interactive but rather controlled by the tester. Paper prototype user testing attempts to validate the initial interface ideas and can quickly uncover whether a software feature or user interface design is working or not with the user testers. The prototyping stage is when HCI teams should be looking to catch software design flaws, and the flexibility and ephemeral quality of paper encourage experimentation and speedy iteration, or even allows a radical change in direction if ideas are not validated with users through prototype tests. Paper is cheap and you can write notes right on the paper prototype or on the back of each paper sheet or index card. The value of creating a solution though cheap materials is essential when thinking through a software solution. Paper allows the ideas captured to not be treated with too much reverence. This is really key when coming up with lots of ideas. Your paper prototype is not precious; it is a sketch and should be batted around, poked at for holes, and generally be run through the wringer. Among a software design team, paper prototypes can represent lots and lots of options that are being explored. Through making and having tangible outcomes as paper prototypes, a team can quickly move solutions forward. Many paper prototypes operate as failures as a way to eliminate options, rather than making only the "right" decision. Making decisions about what not to do is just as important as what will work. If you create a paper prototype in 30 minutes and test it with your users to discover your potential solution is too hard to use, this method has now saved the software team countless hours of work that would include polishing the design, developing code, and testing with users. That idea just dies at the paper prototyping stage right then and there, but it only took up a short amount of time to eliminate that option. A design team should be able to eliminate lots of paper prototypes. It can be hard at times to kill ideas, but if you build prototypes using cheap materials and are not laboring too long over the early solutions, then what you end up moving forward with is ultimately stronger because it is the by-product of all the failures that came before. Paper prototyping is a great place to experiment and take a risk. During paper prototyping, solutions are not yet truly invested in and have not been developed and scaled to all your users. The experimentation with a paper prototype is contained and allows the HCI designer to quickly validate their ideas. An HCI designer might ask, "Will X work with our users?". A paper prototype can determine whether it will work or not. Trust me, there are a lot of ideas where X just won't work, but you will never know until you test it. Paper prototyping can also help improve the final product through making decisions, and this includes what not to do. I was once working for a large university client on redesigning their website. One big problem they were trying to fix was helping undergraduate and graduate students choose a major and a minor. They had 88+ majors and 60+ minors to choose from. This resulted in quite a challenge for how students would be able to search and filter these many options. During the process, the client wanted to shorthand the major/minor distinction as MAJ/MIN. Luckily, we had done a quick paper prototype with this major/minor labeling system and found students did not know what those labels meant, especially undergraduate students. The ability for our team to anticipate our client and have a paper prototype ready for them to experiment with, as well as some initial testing results with students, allowed us to quickly move past this small but important usability issue that 11 Module 2 | How to Build Human-Centered Software our client was pushing for. Paper prototypes build accountability into the design process and allow client and user tests to constantly tune a software experience. There are three dominant accountability opportunities with paper prototypes: 1. Presenting a solution to your HCI team: Your team has a vested interest in a software product being built correctly and wants to see how a solution might work before committing time, money, resources, and marketing to a solution. Paper prototypes allow an HCI designer to show thinking through a solution and make the idea tangible for other team members to play with themselves. Many times, it can be evaluated by other team members who will be involved in implementing the solution through code. If the paper prototype is approved by design and developers, then moving the solution forward will be more coherent among team members who are all on the same page. 2. Validating the solution with users: Paper prototypes can be shared with users that run through a set of existing paper mock-ups and give feedback based on their experience with a given software solution. Similar to getting your team members on board, validating a solution with users will also double the value that a paper prototype holds. Team members and stakeholders can be reassured that the solution is moving in the right direction through user testing. 3. Acquiring buy-in from your stakeholders (clients): Paper prototypes can be equally shared with stakeholders who can also play with tangible solutions. Similar to getting your team members on board, acquiring buy-in from your stakeholders will also go a long way in delivering the value of design. Stakeholders can be reassured that the solution is moving in the right direction through data on paper prototype user testing as well as experiencing the solutions for themselves. Your stakeholders are most likely not your users, however, building a rapport as well as a design rationale with your stakeholders and clients will go a long way in communicating the value of human-centered design throughout the process. Paper prototyping is also a clever way to get stakeholders involved in the design process early on. Not everyone needs to be able to build the final product, and many people, including stakeholders, can have good ideas but not know how to execute them. Paper prototyping can help democratize design, development, and rapid interaction design and allow innovation to not be the responsibility of a small group of people in any organization. As simple as it sounds, paper prototyping can bring more people into the design and development process early on, which can lead to better products. Let's practice ourselves. Now that you have an early paper prototype, a very important aspect is to document your process. A paper prototype operates like a tree in the forest: "If no one is around to hear a tree fall, did it make a sound?". Similarly, if a paper prototype has no record, did it help a design team make a decision? Documentation of the design process for an HCI designer is really important not only for the HCI designer's own education but also as a way to involve your clients and stakeholders without requiring them to make the sausage with you. With the preceding example I described of the university, I was grateful to have documented the paper prototype and when the major/minor suggestion was made, I had the paper prototype images and user tests 12 Module 2 | How to Build Human-Centered Software locked and loaded not just as justification for our solution but also as a way to bring our client into the way we work. HCI design is not a mystery and using methods such as paper prototyping allows us to make the process visual and fold others that are not HCI designers into our way of working. Paper prototypes can and should be fun to make and test. If your team is spending large amounts of time building "perfect" paper prototypes, then the process is working against you. Remember, paper prototypes are meant to be as follows: Fast and cheap (low-fidelity) Built for quick user testing and idea validation Made with materials that can be manipulated (drawn on, folded, cut or torn, or crumpled up and thrown away) The first step in prototyping (a form of sketching) Shared and made tangible for your team and users Once you have completed a few paper prototypes, the process will speed up and become second nature to thinking through a software solution. Paper prototypes are really useful for an HCI designer but can be more challenging to use for testing with users or even your clients and stakeholders. This is where paper prototypes can quickly be turned into clickable prototypes. Clickable prototyping (mid-fidelity) Similarly, clickable prototypes are just as they sound. They are a software simulation that adds interactive mock-ups that can take users through product features and software user flows. Clickable prototypes are built in order to test a user flow more efficiently than a paper prototype. Clickable prototypes can be built through many different types of software; I have seen clickable prototypes executed with PowerPoint through to more complex clickable prototypes executed through user interface software such as Adobe XD, Sketch, and Figma. The goal of a clickable prototype is to allow a user to journey through a product and be able to test how smooth, consistent, and easy to navigate the steps of interaction are. Like paper prototyping, clickable prototypes should be quick to produce and be used to evaluate and validate the design process. Clickable prototypes do a better job of mimicking the software context and are typically facilitated by software themselves. A possibility is also to make "empty shell" UI clickable prototypes using pure HTML / CSS or XML. Empty means without functionality, just the UI. With some UI editors / interface builders (https://bootstrapstudio.io/ ), making a clickable mock-up can be quick even if the generated code may not be reusable at scale. Such clickable mock-ups are also usable for motion prototyping (see below). It is not in contradiction with "Front-End Prototyping", because there is no functionality, just an idea of the UI. It allows us to see whether the prototype mock-up is ultimately "codable". 13 Module 2 | How to Build Human-Centered Software Designing and developing a software product is complex and requires a lot of iteration, and none of it would be possible without prototyping and user testing. Clickable prototypes are built so that software design teams can test their solutions. If you are building clickable prototypes only for yourself, your team, or your stakeholders, you are doing it wrong. Although these team members are important, they are not your users. Therefore, your clickable prototypes should be tested with your users first. Clickable prototypes are invaluable from an HCI perspective for their ability to generate user feedback and they often lead to discoveries that influence product development. At their best, clickable prototypes allow features to emerge as a result of early- stage prototype testing. Let's practice creating a clickable prototype out of our paper prototype. Now that you have made your paper prototype into a clickable prototype. you have a faster way to validate your idea. If you test it with users, you can quickly make iterations to your idea by moving your paper sketches into user interface software for building digital wireframes and eventually user interface design compositions. There are many tools for creating digital wireframes, but software solutions should iterate quickly based on user tests. I recommend exploring a number of digital wireframing and UI tools but personally, I use the combo of the Sketch app and InVision App with the Craft plugins to speed up my prototyping process. Sketch and InVision together can manage prototypes through the Sketch application and keep your prototypes synced online for quick updating and user testing. Use user interface software that speeds up your team's ability to produce clickable prototypes as a team over time. Getting everyone working with similar tools will speed up the ability to share the prototyping load and produce solutions and software systems that can iterate and scale. Practicing with user interface software is essential to growing your software design skills. Using tools such as Sketch, Adobe XD, or Figma should be done in the service of building prototypes that can be tested by users. If you are new to software design, your prototypes may not be very good, so build a lot of them and practice executing a lot of different solutions through sketching testing iterating digitizing wireframes testing iterating digitizing high-fidelity comps testing iterating, and so on. As with any craft, software design requires time to get better and faster. If you and your team practice with the tools that build prototypes together, then, in turn, your prototypes will improve and your software solutions will get better as well. Clickable prototype tools such as Sketch and InVision are great for creating and sharing mostly static prototypes, and they work well for the majority of day-to-day design tasks. But there are limitations, and clickable prototypes can only address certain aspects of an interactive system. Clickable prototypes often look, behave, and feel a bit different than the intention of the final coded product. The gap between the prototype and the product exists throughout the prototyping process. The goal is to close the gap from paper to high- fidelity prototype versions and work with your team to faithfully represent what you can build in your prototyping process. At each prototyping stage and iteration, the gap gets smaller. This is where motion prototypes come into play. 14 Module 2 | How to Build Human-Centered Software Motion prototyping (high fidelity) Likewise, motion prototyping uses software to add motion and interaction to user interface elements in an interface prototype. Typically, motion prototypes are applied to the prototyping process when clickable prototypes become limited. Motion can be achieved through code but requires more time and therefore should be figured out via a prototype first before committing to the effort during the production of the software. For example, suppose I want a drag and drop feature for a list. A static prototype would have a hard time approximating this behavior for a user. A motion prototype, on the other hand, would allow users to seeing the object animate during a drag and drop behavior, as well as see how the element might move and animate from position to position. Motion is essential to prototype for user interface elements as the addition of dynamic movement within a user interface can help train your users and improve not only their usability but also their overall software experience. Through building motion prototypes, an HCI team can add nuance and polish to a software solution. Motion prototypes attempt to figure out three main questions about an interface's behavior: 1. The behavior of a user interface motion: How does a user interface element respond during an interaction? For example, if you hold down an item to drag and drop it, does it shake, pop, or glow? Animation can help define this behavior. 2. The behavior of a user interface feature: How does a user interface feature respond during the execution of a feature? For example, when swiping to the left to delete, as you drag a card to delete it, does it slide off the screen, fold, detach, or crumple up? 3. The behavior of a transition: As a user moves between screens, features, or content, how does the software transition present itself based on the feature? For example, when you load a new page on a website, does the content transition from top to bottom to mimic a scroll? Do images slide in from the left to indicate a sliding motion? Motion prototypes are typically more sophisticated and can require more specialized software to help execute animations, such as that of Adobe After Effects. Because of the added sophistication and nuance of motion design, motion prototypes are typically not where an HCI designer will start with prototyping. Motion prototypes will inherit a high-fidelity quality as testing motions or transitions is not helpful in design decisions that might be invalidated through an easier and faster clickable prototype. One value that motion prototyping has is that your prototypes start to get really close to the desired end product. Adding motion allows your user to participate in this experience and can be very helpful, especially as you get closer to finalizing the software design. 15 Module 2 | How to Build Human-Centered Software A point of caution! Make sure your motion prototyping team and your development team are aligned on their capabilities during motion prototyping. Some motion prototyping tools are very robust and can make a screen experience do lots of things that, during the coding of the final product, might take your development team weeks to produce. This could be problematic as your client or user has been shown a prototype that does more than what your team can faithfully execute. Prototypes are meant to design what your team can develop within the software design budget and should be used to help set expectations with clients. Frontend prototyping (low to high fidelity) As a result, frontend prototyping uses code to quickly produce interactive software solutions and typically focus on the visuals of the screen interfaces. Frontend refers to frontend technologies used in coding web interfaces, typically HTML/CSS and JavaScript. Many frontend prototypes will utilize a code framework to speed up the development process and allow the frontend team to focus on producing a working prototype, rather than writing all the code from scratch. Popular frameworks are Bootstrap, Angular, React, and Vue.js. Many HCI designers and developers think coding prototypes first is the most powerful way to test them. The end product is code anyway, so why not prototype in code along the way? There are many ways to harness HTML/CSS and JavaScript and make good use of it for building web prototypes. Depending on your software design team's skillset, the role that frontend prototyping plays is a by- product of how familiar the team is with coding. Frontend prototypes typically break down into two categories: 1. Low-fidelity, high-functionality frontend prototypes: A version of frontend prototypes that are used by developers. Typically, the visual elements are not to spec or are missing altogether, but the functionality of the code is high. For example, a carousel prototype, where the coded prototype allows the user to actually swipe through boxes, move left to right, and zoom in/make a selection but does not offer the design elements for text areas, call-to-action-buttons, and so on. Such prototypes are generally lacking in robust CSS or customized JavaScript. 2. High-fidelity, high-functionality frontend prototypes: A type of frontend prototype that offers a high level of visual detail along with a robust set of functionality. Typically, these frontend prototypes are nearly final versions of the actual project. The role frontend prototypes play in the production of software can have huge implications when it comes to producing production-ready scalable software solutions. A frontend prototype has code that can be refactored or used directly in a software solution. 16 Module 2 | How to Build Human-Centered Software The prototyper (developer) Being able to develop a design-oriented frontend prototype brings huge value as an HCI designer. The reality is that our world is built out of code and creating products from this code is what we do for a living. As HCI designers, our role is to know more about code, not only so that we can determine the possibilities and limitations of current technologies but also so that we can code more demanding prototypes much faster for our users. However, jumping directly into code is not a quick fix. There is no substitute for following the prototyping process and validating solutions through the quickest means possible. Frontend prototypes should not be where an HCI team starts. However, if a paper prototype is enough to validate an idea and the frontend prototyping team is clear about the software intentions from the sketches, then there is no reason why a frontend prototype can't get started directly from a sketch. With practice, frontend developers can quickly approximate solutions and use open source code frameworks such as Bootstrap 4 or Foundation to improve their prototyping speed. In reality, a robust prototype should be executed by a skilled frontend developer. Along with skill in writing code comes the ability to apply shortcuts, all while executing coding best practices, the proper code architecture, and efficient data models. Once you have skills in the frontend, you can then apply that knowledge to frontend frameworks that use component-based, view-layer-oriented concepts, such as Bootstrap, Vue.js, or React. The frontend framework will speed up your prototyping process. Designing and coding frontend prototypes have become faster than ever before but must be executed and tested with users, rather than skipping those steps because it is easier or faster to market. Now that we have an understanding of the prototyping process, let's relate how we start building out complex systems that need multiple aspects or features to be prototyped over time.System diagramming Another point to consider is system diagrams – a visual model of a system, its components, and their interactions. With supporting documentation, it can capture all the essential information of a system's design. There are many variations of diagramming styles, but all attempt to articulate the interaction between humans and computer systems. System diagrams can be used as thinking tools. By studying a system diagram, you can discover problems and shortcomings of the design it represents, and at the same time, construct a final document that will capture the entire design. Thus, system diagrams should be constructed during the design process, and used as the basis for refining and specifying various aspects of the system: 17 Module 2 | How to Build Human-Centered Software There are many methods for developing a system diagram, but I recommend starting with a pencil and paper or a whiteboard before jumping into the software to build a system diagram. The reason is that thinking about systems at first can be messy. There are a lot of moving parts to identify, which requires a looser method at first to capture all the parts. Pencil and paper can be quickly manipulated and part of the system can be quickly erased, moved, or relabeled on paper easier than in software. Recommend starting with the more simple oval, rectangle, diamond method before utilizing more complex systems like Unified Modeling Language (UML: https://www.uml-diagrams.org/). Software-based diagrams are easier to maintain and to produce in a neat and concise form. The final decision is, however, up to each design team. Now that we can consider a larger software product through system diagramming and the prototyping of individual features or interactive parts, let's cover how we maintain and dictate quality throughout our process. HCI interface best practices HCI can be used in all disciplines wherever there is a possibility of using a computer, and because of the widespread use of computers, HCI practitioners should strive to apply their craft meaningfully together as a collective group. Best practices are a set of guidelines, ethics, or ideas that represent the most efficient or prudent course of action. Best practices are often set forth by an authority, such as a governing body or management; from an HCI perspective, they have been set out by thought leaders and pioneers in this field. Best practices come into play as a process for improving quality and creating standards that are used across products. Best practices are always evolving and adapt to new technologies, modalities, and audiences over time. The prototyping methods we just discussed should do their best to apply some or all of these best practices. There are a number of best practices and we will cover them here. 18 Module 2 | How to Build Human-Centered Software Now that you have familiarized yourself with some user interface best practices for HCI, you might see that there are a few overlaps. The reality is that each of the HCI designers/user experience (UX) designers/computer scientists who have contributed to these lists has been influenced by each other and they all concentrate on the same problem: humans using computers. All of these best practices are internalized by an HCI team and executed into software over time. Software design teams will also go through the effort of producing documentation about their software known as interface design guidelines. Interface design guidelines From your research, you will start to see three categories of HCI design guidelines: general interaction, information display, and data entry, which hopefully you found to be great best practices during your challenge. Interface design guidelines are designed and maintained to build an understanding of the user interface best practices and components, along with user interface behavior, through supplying real examples for a design and software development community. Interface design guidelines are software documentation that is helpful in outlining a user interface system. The values of user interface guidelines are as follows: A collaboration between multiple team members. Define user interface component specifications (UI specs). Help a team keep a consistent experience throughout a software product. Describe best practices. An educational document. Developers can refer to guidelines and prebuilt code components to quickly assemble user interfaces. Relatively easy to update guidelines based on new technology, new standards, and changing trends. Versionable and iterated on overtime. The guidelines typically include the following (if you are not familiar with these terms, use Google to look them up): Style guidelines Layout guidelines User interface component guidelines Typography guidelines Interaction and behavior guidelines Platform guidelines Accessibility guidelines/WCAG 2.1 (https://www.w3.org/TR/WCAG21/) Reusable design pattern guidelines Interestingly enough, design guidelines are no longer internal documentation and have been opened up to the broader software design community in order to increase the education of those products. They are 19 Module 2 | How to Build Human-Centered Software also being used as a marketing component for expressing the rigor and value design holds for a software team. We will cover some prominent design guidelines in the following challenge. Now, you might think these best practices feel like a lot to consider, and you would be right! The role of an HCI designer is not to be taken lightly; we need to care deeply about our products and our users, which not only includes how we execute best practices but also how we maintain a quality software product over time. Software prototyping tools More specifically, my personal choice for a clickable prototype application is the InVision App as its speed, communication features, deep hooks into the Sketch app, and sharing features make building clickable prototypes really fast and easy to iterate. Just like paper prototyping, clickable prototypes should not be too time-consuming and should encourage iterations and updates. The HCI/UX and frontend design communities have created many prototyping software tools. I recommend checking out https://uxtools.io/ and https://www.prototypr.io/home/ as a way to survey the tools used to create clickable prototypes as well as experimenting with a number of tools. Your ability to integrate clickable prototypes into your HCI software design process will make your software solutions improve faster and your ability to use a diverse set of tools will help you be more employable as an HCI team member. Motion and interactive prototyping tools include Adobe XD, Figma, Flinto, Framer, InVision Studio, Marvel, Origami, Principle, Proto.io, and Famous.co. Each of these is like a crayon in a crayon box. Each software is designed to help in the creation of software but they all go about it slightly different. It's great to explore multiple tools for quickly building clickable/motion prototypes with complex logic-based interaction and buttery-smooth animations, and each tool also comes with a learning curve. Start with prototyping tools that don't have too steep of an entry. EXPLAIN: Activity 8: INSTRUCTIONS: Answer the following questions below. 1. Discuss the three dominant accountability opportunities with paper prototypes. ______________________________________________________________________________________ ______________________________________________________________________________________ ______________________________________________________________________________________ ______________________________________________________________________________________ ______________________________________________________________________________________ 20 Module 2 | How to Build Human-Centered Software 2. What is system diagramming? ______________________________________________________________________________________ ______________________________________________________________________________________ ______________________________________________________________________________________ ______________________________________________________________________________________ TOPIC SUMMARY In this lesson, you have learned to extend and dive deeper into the software design ethos. the skills and tools used by small and large teams are rooted in doing work overtime and start with software teams applying a prototype. the ability to generate solutions from our previous research and user insights is not an arbitrary feat but rather a by-product of a design team that recognizes that they don't know the answer and need to understand their user to figure out a solution. to applied these practices throughout this lesson to allow you to practice your own ability to prototype, design a system diagram, and apply industry best practices through tools that produce prototypes first. REFERENCES: Becker, C. (2020). Learn Human Computer Interaction. Retrieved at https://learning.oreilly.com/library/view/learn-human-computer-interaction/9781838820329/32742891- 141c-450a-8e59-9d43369854d1.xhtml Retrieved on February 18, 2024. Teoh, V. (2019). Rapid Prototyping. Retrieved at https://quizizz.com/admin/quiz/5ca62962b7c98a001a25fa18/chapter-rapid-prototyping# Retrieved on February 18, 2024. Hayati, N. (2016). Rapid Prototyping. Retrieved at https://quizizz.com/admin/quiz/57cf90cb81c8e946ea15e066/rapid-prototyping Retrieved on February 18, 2024.