Sean Li ~ Great UX is a Must To Build DApps People Trust

[Music] hello everyone I'm Shawn here to share with you all some techniques on how to design and build apps with great UX that people trust just a little bit more about myself and 4matic I'm the CEO of 4matic we build a web 3 compatible JavaScript SDK for tap developers what it'll do is enable end-users to interact with any tab with just their phone numbers on any modern desktop or mobile browsers without needing to download a third-party browser extension or mobile wallets before founding 4matic I was a product and design lead at docker and was responsible for multiple projects and helped establish a great developer experience as a key differentiator of the company so let's dive in on design well great user experience is mostly invisible users typically don't notice them just like some people get more emotional when others forget their birthday and when they do remember great user experience is lot more than what user can see visually on the surface I'd like to start with games you see games are extremely complex compared to a lot of products out there and yet players can still pick up a game relatively easily and have the motivation to learn more and get better at it how are they doing this let's work through the gameplay the game starts off very simple you get a pace and a cup of miner slash builders and the most obvious thing you could do was to mine those blue minerals that was popping out in the user interface and there isn't much else to do once you've gathered enough minerals the great alt button unlocks and your builder can now build more structures here I'm constructing a building that lets me build an army note the tooltip is showing me what will get unlocked next once the building is complete after the building is completed I can start training the marine a basic infantry unit suite now I have a marine something different from the builders it's a combat unit so you can shoot at other units the marine and builder are very different but to share a lot of similar properties on how to control them and move them across the map since I've been moving the builders around I got the hang of controlling the moraine pretty easily as a newbie I know the goal is to create an army and defeat the opponent so I create a few more Marines after you get the hang of the game mechanics you'll be gradually introduced to variety of units both similar and different attributes as the Marines and after you understand the units really well you can start deriving more complex macro strategies to help win games as you can see each review of new information is based on the player's previous understanding of something else when one task is completed the next task gets unlocked in the UI the effect of this ramp is exponential in a relation to players understanding of the game this progression really helps ease new players into the game without requiring them to learn a lot of things upfront and get discouraged right away and this leads to our first design principle this gradual revealing of user interface is a technique called progressive disclosure which help ease user into more complex tasks by reducing clutter confusion and cognitive workload typically in the beginning of the user experience it's very difficult to deliver a product that satisfies all requirement perfectly right away we often feel the need to make sure a product gets delivered to our users with the most accurate technical description the most floral works through guide with all the features exposed to users right away afraid they won't be able to find out about it as a product builder we shouldn't let our users bear the burden of our organizational requirements it's okay to review information and provide more options later and not overwhelming the user by showing everything at once the next topic I want to talk about is error handling it's usually thought of last but how we can handle errors can significantly impact how users perceive our product we shouldn't make user feel like they're working on thin ice and we have to make sure that users feel secure and supported this error message is the exaggeration but note the blaming and condescending tone this is exactly the kind of tone we want to avoid but fortunately that but unfortunately still exists you know in many products we don't want to pass users with the stick here's also an example of bad errors these scary error messages look like is spoken by a robot while providing no cost and support to you to help users resolve them there are a lot of errors like these out there fortunately there are easy ways to prevent this the trick lies in avoiding using negative keywords like these incorrect errors failed invalidate prohibited it will make user feel like they've hit a brick wall here's an example of the old twitter signup form notice the positive wording a clear indication of caused and links to possible solutions one example in the his theorem space is the errors a meta mass model without too much context read causes fear and anxiety as if user has done something wrong we have chromatic are trying to avoid harsh errors that causes the user to panic and try to provide a comprehensive reason here's another example from my past experience building a product of kites Matic at docker we used to rely heavily on VirtualBox which is huge friction for developers and we've seen scary intense errors like this before and the trick here is to make this error not seem like an error at all note the error now is part of a step by step installation wizard using calming blue color instead of red everything feels normal there's no panic with a clear call-to-action and instructions on what to do next instead of an error blowing up in users face another great way to handle errors is to forgive users for their mistakes let's say the user deleted some super critical data to implement forgiveness I'll do is usually the de facto solution there will be no more need to show scary dialogs to warn users when they're about to make an irreversible change we should strive to create a safety net for users whenever possible and you can be a lifesaver for users and it'll be worth the effort given blockchain undo may be hard to implement given the nature of the blockchain but we can still revert back a transaction once it's submitted and before it's confirmed if needed it's super effective in terms of making users feel feel safe and secure the next technique I want to cover is animations especially functional animations animations that serves a purpose when this is done correctly these animations can turn a digital product into a sequence of screens into carefully choreographed memorable experiences and usually animations are sort of last as well but they make night and day differences in the apps user experience there are many functional benefits that comes from animations such as to reduce cognitive load and lower the learning friction which is great for teaching and guiding users through new concepts it's also useful in preventing change blindness change blindness is when users won't perceive that something has happened on a page if it happened too fast significant significant changes in a webpage can remain unnoticed because they lack strong cues due to the limitations of human attention span animations will also help solve this problem and lastly animations can also establish better recall in spatial relationships so user can remember better where things are the next time they use the product some classic use of the animation example would be the famous genie effect in Mac OS and scroll balance in iOS which did wonders on getting users acclimated to this new user interface here are some more examples that are also easy to implement but it can make a huge difference in the UX you know always have a button power hover and press state to make apps feel responsible responsive when users see a visual feedback they're more likely to perceive the app is reliable and also impossible use animations to communicate modality and page transitions when users use your product they are indeed using it to accomplish something but emotionally they're going through an experience and a story the feeling is what they'll remember after a product and will drive them back to use it again animations makes your product feel more reliable and polished and give the user some delight in their busy day I also have some design techniques to share for anyone for a building or developer focused experience and it's called IKEA effect which means customers plays a disproportionately high value on products they partially created in another word high product quality and low effort to assemble a product equals high perceived value of the product and happy users note that low effort is very important here since no one wants to take three days to build a piece of IKEA furniture the IKEA effect applies really really well to product such as api's or SDKs that allows user to create their own products or services however there are four principles to keep in mind to execute IKEA effect properly the first percival of the IKEA effect is that it's super important to show the end result first just like the IKEA showroom you need to get your users excited about spending hours of their valuable time tinkering with your product there are also a few of my favorite ways to showcase the end result well the simplest way is through a video or a looping animation but always keep it short and to the point if it's a video ideally it should be less than two minutes examples or tutorials work really well as well meteor does a pretty good job here the more relatable the example is to real life the better the more example there is the more the users can see what they can accomplish with your product if you really want to go hardcore on this interactive demos are awesome a great example here is a go language tour a good rule of thumb is that users should know to a brass bra extend of where your products and help them accomplish in less than three minutes the key to motivating your users to do more and learn more is for them to get that one thing that differentiates your product from everyone else as product owners it's super important to know what that one thing is among many other great features of your product if you're totally unsure of what your well factor is talk to your users talk your designers and researchers and do some very unbiased user research because the result may surprise you and do not force the wow factor to be what you want in it to be it's good I'm going to give some well factored examples from a user's perspective following the products familiar I was wowed by how much faster it is to send up a project and build a real-time cross-platform application using programming languages that I'm already familiar with this is a huge step forward in terms of ease of use compared to how I had to do it before knowing knowing meteor and they provide a great solution for prototyping products really fast first stripe I was wowed by how much faster it is to put in a payment form on websites and basically start making money for your business and manage the transfers and customers on the dashboard I remember helping our friends small venue to put together online booking system using meteor and stripe in less than a day's of work I started collecting money the next day and for my past experience working on docker for Mac our well factor was that users can install running to see the result of a container on a blank laptop within five minutes who are super religious about this metric generally your users should be able to grasp what the first well factor of your product is in less than fifteen minutes it's also important to do the extra hard work for our users just like IKEA they put in extra work to create wood pieces and nails that fit perfectly together great design requires putting the extra thought and effort making an experience feel very natural without users even noticing in our case doing the hard work means creating a safety net for users taking care of all the edge cases and errors which techniques mentioned in previous topics allowing them to freely experiment with your product like a sandbox lastly try to keep things simple avoid wordy talks and text in the UI if you look at IKEA instruction manual it's mostly just pictures and no text I also try to avoid this super long step-by-step feature in the introductions and walkthroughs if you can or at least keep them short they add friction to the user experience and may appear hacky and cows users to be impatient and confused which will in turn lower the perceived value of your product I have to slip this in here because the stripe documentation is awesome which is simple clear thorough instructions code snippets interactive widgets it delights me every time to look at it and use it also if your product is targeting developers about 40% of users will go straight to the docks before even reading the rest of your landing page so it's important to really make your docks shine it's basically how you would market your product to connect to connect it all the IKEA effect and progressive disclosure are great to be using Junction at every step when users accomplish a small task to be rewarded psychologically at the same time as new experiences review in the UI this compounding effect will strongly motivate your user to learn more about your product and build more things with well we covered a lot of material today so let's do a quick recap and try to remember some of them we started to talk about progressive disclosure which is a great technique to ease users into doing more complex tasks the benefit of this will reduce the clutter in your UI reduce potential confusion on what to do next and reduce the cognitive load getting started with your product we then covered error handling the goal of having good error handling is to make users feel secure and support it I would use in negative words like invalid failed incorrect and always provide the cause of the error and possible solutions to resolve it and also remember the best error is that there's no error in the first place only show errors as a last resort and always try to prevent it from happening and finally you should forgive user actions with the undo feature if you can next was functional animations we shouldn't think of animations as the last step of building a product they deserve important functions they serve important functions to help reduce user cognitive load prevent change blindness and establish better recall in spatial relationships lastly the goal of the IKEA effect is to increase the perceived value of your product but letting your users do some of the work and explore in a sandbox and a safe environment you have to first interest the users by showing showing the end result of their effort through a video loopback animation real and useful examples are interactive Orioles and second once users start tinkering with your product really emphasize on letting them get to that well factor in the first 15 minutes next do the hard work for your users take care of all the edge cases and errors and leave creative space for the users and finally keep it simple focus on writing a great documentation and try not to use or shorten a step-by-step feature into introduction there are many many ways to improve user experience the essence of this workshop is that as product builders let's start notice appreciate or the tremendous effort put into these well-designed products and user experience and learn from them focus on experience that the user may not necessarily notice I will be also sharing these slides later on our media channels and that's all thanks so much for being a great audience and I'd love to talk about design so feel free to set to reach out to me on Twitter and chat I [Applause] will talk more about formatic in the opening ceremony so for this workshop I feel free to ask me any question about design you