Wonderful Web App UX

Editor's Notes

• #2: Today we’re going to talk about UX and Web applications. I have to admit that when I first started putting together this talk, the title Wonderful Web App UX made sense. But as I got more and more into it, I realized that it didn’t fit. So I’m changing the title of this talk today in real time...\n \n
• #3: As I got more and more into the content of the talk, I realized that delightful web app UX was a much more appropriate title\nThe presentation is about 40 minutes\n Level set on what I mean by web app UX\n Current state of web app UX\n Problems with UX’s approach to web apps\n How to solve those problems and create delightful web app experiences\n Where web app UX is headed in the future\n Conclusion\n Q&A (if time)\n
• #4: \n
• #5: For the purposes of this talk, I am defining a web application as an application that runs on the internet or an intranet, but basically an application that is accessed through a web browser. \n\n
• #6: Some examples of web applications that are out there today\n
• #7: We are all familiar with the definition of User Experience or UX... so for this talk the definition of web app UX that I’ll be using is:\nThe set of processes and methodologies used to design the hierarchy of content and information of a product or service to elicit responses\n
• #8: These responses range on a scale from Task success (at the bare bones/ or the usability level) all the way up to emotions and/or behaviors from the user.\nThe higher levels include the lower levels.\n\n
• #9: We can see this progression throughout the design of almost anything. For example, the telephone.\nThink of the telephone, in this example, as the web app. At the beginning it was created just to complete the task of talking to someone else. Over time, in this second picture, we see it becoming more usable (for example only one hand is needed etc), and then they looked at how the phone was being used and designed this last phone, which was easy for teenage girls to sit on the bed and talk with it to their ear. This elicited a different behavioral and emotional response. How we get to this phase of delight is what we’ll be talking about today.\n\n
• #10: Why web apps as opposed to say regular websites, desktop apps, native mobile apps... why do web apps make sense to even exist?\n\nNow that we have defined the web app and web app UX, we, as UX professionals or those that have an interested at all in a UX point of view must ask ourselves: why does the web application make sense\nSure we all are aware from a technical perspective, however I’m not sure that we explicitly talked about this from a user perspective. \nFrom a technical perspective we know that web apps make sense because:\n They are accessible to everyone\n Mass change can happen in an instant across the system with minimal energy to deploy \n Everyone can see the same meaning/brand without having the same computer or device\n\nFrom a UX point of view then why?\nSimply, Web apps are closer to meeting user behavior expectations than desktop apps\n Because it updates automatically, and doesn’t really on user action (installation, upgrade etc) to do so.\n Is accessible from anywhere (work, home, day care)\n Can adapt to me (device, location, etc)\n\nNow that we have defined web app UX and proved that web applications enhance user experience overall, let’s talk about the current state of Web App UX\n\n
• #11: Now that we’ve defined it, let’s jump into talking about our current state\n\n\n
• #12: Our current web app UX environment is exciting and chaotic at best:\nWe have new technologies and methodologies like HTML5, CSS3 which allow us to do things like responsive and adaptive web design\n
• #13: We have this Mobile First movement cropping up which focuses on design web applications for the mobile platform first in order to focus the capabilities necessary as well as utilize more development capabilities.\n
• #14: Then we have the specific updates to items on the interface. We’ve had a lot of this for awhile, however things like form validation and updates to forms in general to make the quicker and easier to complete are examples of some web app UX trends\n
• #15: And lastly in our current web application world we see all different type of specific apps appearing like the Chrome web applications in the Chrome Web Store.\n
• #16: Let’s now talk about the issues with our approach to this current state.\n\n
• #17: The question here for us as UX professionals is how do we know adapt our design methodologies and principles to design delightful web applications given all this chaos and change?\n\nMobile First is a great step, but what if the product isn’t mobile, or has nothing to do with mobile? Mobile First is a very specific point of view, but what is the overall UX and design adaptation and growth that is needed?\n
• #18: Because we aren’t sure how to adapt, we have been using our old way of thinking and our old understanding of users to design for the current web applications that we are creating. \n
• #19: Let’s tackle the first issue, how do we adapt to the current state of web application UX Design, so that we can design web applications that delight our customers.\n\n
• #20: First thing first, we have to know our technologies. \nNo, I’m not saying that you have to code, but you do need to get up to speed with our terrain.\nThere are some amazing books out there written for designers that explain what you need to know about the new technologies of the web... READ THEM.\nDo the research, understand the changes.\n\n
• #21: Ultimately you need to know enough to know what has changed. The question you are looking to answer is “What does this technology, or the changes to the technology, enable the system to do that it couldn’t do before?” And then it is your job to exploit these changes in the interface, product, or service.\nTechnology is the building blocks of your design. You can’t build a house without knowing how much weight the foundation can hold, just like you can’t design an experience without understanding how much your system can handle.\n
• #22: This is UX 101 right? Knowing who are customers and users are so that we can design for them. Basic stuff.\n
• #23: But... what does knowing your customers *really* mean?\n\nI would argue that basic UX is not about knowing your customers in the sense that we need to, although, it calls for us to do this, we haven’t always been practicing or been able to practice this in its rightful form. \n\nKnowing your customers means gaining an understanding of what causes emotional responses in them, knowing what motivates them to buy or read or engage. It is not just understanding the human factors/usability part of it ‘what is and isn’t easy for people to use’, or understanding that most people prefer using paypal that inputting their credit card information. These things are important, but knowing them isn’t equivalent. It’s about really examining and observing their behavior. \n\n
• #24: there are 3 different ways for us to understand people’s behavior. \nKnowing what they think (which is not available to at this point)\nKnowing what they say they are thinking or doing which can be flawed\nOr observing what they do and gaining insight from that. This is what ethnographic research gives us. This is, in essence, what Anthropologists do to understand a culture. \n
• #25: So now that we can do all these different things given our technology, we need to utilize these technologies to better match user behavior.\n
• #26: This, in theory, is what UX Design has been about all along right? The problem is that the understanding that we have been modeling and designing for at a basic level has changed. \n\n
• #27: Now looking at our second problem of using out of date methodologies, patterns, etc for designing. Now that we know how to adapt and have gone through the steps. How do we actually look at our approach to web app ux change it? What information do we need in order to do that, and how do we get that information.\n\nThus how do we solve our second problem of using old and archaic design metaphors, methodologies and patterns to approach this updated medium.\n
• #28: To do that, Let’s take a little walk down memory lane, and I’ll explain just what I mean by using old metaphors and thinking. \n\nThere is a term out there called instructional scaffolding. The idea is that the base level concept is introduced, and once the student learns it on his/her own, then the next level of learning is introduced. Thereby providing steps that the learner can climb to know the material all on their own. This is what we see in the world of web apps. We needed to use scaffolding to bring the user up to speed with our apps so that we can delight them.\n\nBefore the web app, we had the advent of the web browser. This made sense to users when we used the metaphor of the page to get them online. And, this is where many websites still start today. They start with a page, and, hopefully, a page structure or IA as we call it in “the biz”. \n\nOnce people were use to the web page we could get them to interact online, and of course we talked about why we wanted apps online from a tech and design pov. We found a way to do that, by focusing out ux solutions on getting users to complete a task.\n\nWhen users were comfortable with the idea of interacting online, we entered the age of usability were it was about getting them through the task faster and faster. We had a framework for a webapp, now we just had to make it easier to use. A few new patterns and interactions are developed, but the concept of web applications still rests on understanding of old user behavior. \n\nNow, we have usability down pat. If there is anything we do well, it’s design a usable interface. It’s time to focus on motivation and influence in our web app UX. \n
• #29: Thus we have scaffolding our users up to the point where we can influence behavior. But we’re using thinking, patterns, and metaphors from the web page age to do so. So we haven’t leveled up our ux thinking along the way. How then can we update our Tools to get to where we want to be?\n\n\n
• #30: How did they do it with something like the telephone? How did the get from complete success to elicit delight? Obviously they had to go through each phase, you can’t have something delightful if it isn’t first usable. \n\nExplain story of how they go here via studying teenagers. Focus researching user behavior.\n\nThus, in order to build upon our old metaphors, like in this example of the telephone, we need to really understand user behavior, and push our understanding of it in order to create new and better methods of practicing and utilizing UX\n\n
• #31: In order to scaffold our web app UX thinking, patterns and metaphors up to the next level we have to investigate our users, really come to an understanding of their behavior, and knowing what is or is not easy to use isn’t knowing our users. It’s a part of the steps, but we need to move beyond.\n\nWe are still using ux thinking and understanding of our users that existed in the page step to design our web apps of today. The page step guys based their UX thinking from before the browser, the desktop era. This means, are still using ux thinking and understanding of user behavior that was found during the Xerox-PARC days in which they did a huge amount of ethnographic research to figure out how to explain the idea of the computer to everyday people. But behavior has, of course, changed.\n
• #32: Enter Psychology... Understanding psychology is the way that we level up our ux thinking with web apps from usable to influencing. Knowing psychology enables to really understand user behavior.\n\nThis is why we are seeing the emergence of psychology and related topics exploding in the web app ux world.\n
• #33: Psychology has always been there lurking in the background. Norman himself was an Associate Professor in the Psychology Department at University of California, San Diego (UCSD). He then shifted his focus to cognitive science. In fact, the first title of his book wasn’t the Design of Everyday things at all.\n\nIt was in fact, the Psychology of Everyday things. Norman knew that in order to really create emotional and delightful things (whether digital or not) the element of psychology was always present.\n
• #34: Norman knew that how a thing was designed. Whatever that was, a web application, a pen, a screen was based on the perception of it from the user point of view. Psychology was the key to understanding perception.\n\nBut Norman also knew that he was before his time. And he knew that he needed to bridge this gap.\n
• #35: So Norman used the idea of design to bridge the gap and to level people up. We have been on this level of design for some time, however, now in the world of web app UX specifically we are beginning to level up. \n
• #36: UX is coming up to speed with him. We are starting to realize the influence that understanding psychology can have in our design of web applications (and all other web elements).\n
• #37: To design a better web app we need to update our thinking and our understanding of user behavior. Do to that, we need to turn to psychology and research as the next frontier in web app UX. \n\nLet’s take a look at examples of those who are already working to conquer that frontier.\n
• #38: Let’s use the example of Mint.com. How many of you have used Mint before or have heard of it?\n\nFor those of you that don’t know what Mint is, it is a way to manage all of your finances, bank accounts, ccs etc. online in one place, for free. \n\nNow the idea of Mint.com didn’t come from someone saying that they needed to make financial services applications easy to use, Financial services were already fairly easy to use throughout the market place. Instead, Mint leveled up their web app ux thinking\n
• #39: and really looked at how people manage their finances. That is they studies people’s behavior, got an understanding of that, then translated that into an online world, now known as Mint.com\n\nMint didn’t rely simply on old understanding of behavior from the days of yore. They went out and got a new, fresh understanding of user behavior.\n
• #40: By getting a new understanding of user behavior, Mint was able to not only update their methods of doing ux design, but created new patterns and metaphors in the process. Here we see their ideas of goals. Mint found that people wanted a better way to reach their financial goals, so they took the understanding of that behavior. combined it with the technology available, then built a new way to do so. This is the really innovate part of mint. Because this is what you couldn’t do online before. You could see your accounts online, but not set goals.\n
• #41: Other ways that utilizing psychology and research to better understand behavior updates our old way of doing things...\n\nExample that Stephen Anderson uses in his book Seductive Interaction Design.\n\nMailChimp is a service that “helps you design email newsletters, share them on social networks, integrate with services you already use, and track your results. It’s like your own personal publishing platform.”\n\nBut here, on their Dashboard, we see them using the element of Humor to engage the user and to “delight” them while using the product. This element channels the company’s personality, and when you think about it them more of somone’s personality you know, the more you become attached to them emotionally.\n
• #42: Netflix has built it’s success off of the element of suggestion. But not just any old suggestions, specific suggestions. Because Netflix knows the movies you watch (through ratings and once you use the service, rentals) they know what other types of movies to recommend. These suggestions are relevant and thus we attach to them quickly. Having them delights us because there is less “work” for us to do in finding entertaining and interesting films to watch.\n
• #43: Here we see LinkedIN’s use of sequencing to get your to complete your profile. By directing our attention to one task, LinkedIN decreases any feelings of overwhelming the user, and enables us to be successful at creating the most complete profile. By taking the stress away from the task, LinkedIN creates a sense of delight.\n
• #44: What then are the outcomes of following our three step approach, and learning more about psychology and understanding user behavior?\n\nWhere is web app UX going in the next 12 months any beyond?\n\n
• #45: The brain.\nAnd, guess what?\n
• #46: We are the new creators\n\nThe outcomes of beginning to use more psychology and behavior are new and different interactions in order to make these web apps more delightful. We are now the creators not the consumers of new patterns, methods, interfaces.\n
• #47: In the older waves specifically looking at the times of the page, before web apps existed, we had people creating the metaphors and patterns for us. This was the era of pages, and sitemaps, before we really could interact on the web. We were taking in the information about how interactions and experiences should be designed from them. \n\nThey had based their knowledge of the web on the behavioral studies done in the early days of the desk top. The metaphors that Xerox-PARC used back then still hold true today, but... user behavior is different. Thus the way that we understand it should be different. We can use similar methods to get to this understanding, as we should, but the output of it...\n
• #48: makes us the creators of the new metaphors and experiences based on our understanding of current day user behavior.\n
• #49: So, like Mint, MailChimp, Netflix, LinkedIN, we are the people creating new metaphors and thoughts in web app UX by updating our understanding of user behavior.\n
• #50: Today we started off our talk by level setting and defining web app UX as The set of processes and methodologies used to design the hierarchy of content and information of a product or service to elicit responses on a scale from Task success (at the bare bones/ or the usability level) all the way up to emotions and/or behaviors from the user.\n\n
• #51: We then went out to talk about the current state of web app UX which is somewhat chaotic and ever exciting.\n
• #52: And using that current state we were apply to define and talk through two main issues with the current world of web app UX that prevent us from designing delightful user interfaces, products, and services.\n
• #53: In order to address those issues we took a look at steps in adapting to our current state\n
• #54: To solve our second issue, we took a look at scaffolding our web app ux thinking and we do that by\nUtilize psychology and research in order to have a better understanding of your users which helps to build off of old metaphors and patterns.\n
• #55: The outcomes of making web apps delightful, and using psychology as a means for understanding behavior are not just, of course, to make Mr. Norman happy. but they bring us to the heart of what user experience design as a whole, and web app UX design as a subset of that whole is truly about. Understanding our users and designing for that understanding. \n\n
• #56: Behavioral studies, and designs and experiences based off of them is happening now. \n People are already doing UX based on psychology and real behavior today, and are finding great success with it\n Technology has caught up, they are no longer “to blame”\n Our users have caught up. Sure there are things they still need to be eased in to, but all in all users are on the web, and are using web apps. \n We are the ones that are behind\n
• #57: Don’t let it pass you by. \n\nEverything else is in place. You need to become the user behavior expert. \n\nTo do this, \n1. Know your technology: read the materials HTML5, Mobile First, responsive & adaptive WD\n2. Know your users: conduct and understand ethnological research, if you don’t have the budget for that, become your user (practice empathy), Seductive Interaction Design, Design of Everyday Things, 100 Things every designer needs to know about people.\n3. Match the two together.\n4. Understand user behavior!! through understanding psychology and doing research.\n\n
• #58: This is we get to Delightful Web App UX\n\nThanks!\n
• #59: \n