Rimble presents: the state of transaction states (Devcon5)

[Applause] cool so we're gonna have kick things up and thanks everyone for coming my name is Ryan it might be work for the wrinkled team at consensus and we're gonna be talking today about transaction states specifically the UX of transaction States but how much time to go into what we release right now that if you're interested it's kinda QR codes and that's all upside or follow the link I guess to set the scene why we're talking about this today our main user group are developers in this place we build components and write ballots to try and help dr. Belman remembers sort of improve UX allowable so we speak to a lot of developers we do a lot of research lot of interviews and something that came up sort of again and again as a penguin the developers was transaction states and house designer exactly so instead of one thing to sort of theorize around what might potentially make a good transaction stay to X we thought we try and uncover the secret to transaction to X and our own across these getting our hands dirty and going out to the fields do some research labs because on and it's kind of reminded me you know getting onto the tail that house that city or the trouble here at one and there's no relief for guessing who that might be it's Indiana Jones so beginning if the indexes all help us talk through some of the main problems around transaction works so first I'll never eat no transaction so what happens if a user trusts transact that doesn't have the required funds how do we help users get even how do we educate them on those needed and these fear the fact that you means ease to make these can leave a bitter taste and although transaction fees might be normal to all right this is something that's well often unexpected and unsettling the new users transactions can drag so compared to the sort of web to experiences we used to when a transaction might say minutes hours even days how can we help communicate what's happening to users and on that note how much should we actually explain about what's happening how much should we be explaining about why it's taking that extra time how much of the blockchain in general should we be shown to the users and how much should we leave behind the sins cherry on top of the cake is that of course they're irreversible so that's quite scary especially for new users if something goes wrong there's no chance to you know call customer service get things change and we don't want that leading to transaction regret or even worse very regret where people end up in the ecosystem is forgiving up there together and it's nice to have interesting sub a demo we come across quite often around the notion of education so it's a labor of do users know what they're doing and if they don't what they're doing are they incentivize sufficiently to go sort of educate themselves and make their best best effort at it so that's one of the main problems and completely understand why this is such a okay such a pain point I think it's important to also talk about the opportunities for sort of spending more time on to designing transaction states and hopefully this will convince any teams are there to maybe solve hit this up as a priority after they leave a sucker [Music] so that's that we talked about a little bit about some of the behavioral science sort of justification examiners so first up it's the halo event and its elastic it's probably complicated to solve an account for a service and that bad user experience will rub off on people's expectations for the rest of the service now this fighters maintenance is a compression we can certainly solving transactions and we still have the exact same meaning so if you user is exposed to it's really bad you know concrete like this for example it doesn't really explain what to do why he needs one little token to have this sort of quite confusing approval function woman it's gonna create a bad experience even if you know your doubt has been the coolest tech house the smoothest connecting connecting the wallet experience I think a great analogy for this is the Kingdom of the Crystal Skull movie which one that baby is tarnished the reputation of the entire franchise the pecan draw is very similar so two copies of bias impacts have people remember past events so these intense positive or negative moments each of the peaks and the final moments of the experience end and some calculus transaction was probably award quite often represents or end part an experience with a done and again they always have a very high likelihood of being either an intense positive or an intense negative experience so again this could really dissolve again if you have the nicest DAP leading up to the transaction then it really impacts these or how either remembers your that and they've read that sort of trust that you might have fostered up until that point I'm gonna shields mainly again but rip steam coming at the end of the bottom and moving into the franchise has certainly tiny stuff for me okay know right users eventually even trust work to you know so a study conducted by my Institute in twenty eighteen thousand they found that 28% of users abandon their tasks because of complicated check out blacks now the study also found that main reasons Bannerman was over the use of jargon lacked a visual design and I think at the moment obviously in these experiments will face of material and apps and this is quite often the case in in work for applications as well so again a really good opportunity it's it's over spend more time thinking about the design of transactions and make that bridge that abandoned and increase their trust into that okay so we spoking buses and problems and talk to us and the opportunities we're gonna show you a quick demo and then this is all come out of this or research and the design inspiration I mentioned earlier we spend the last two months speaking to some savvy blockchain users not so savvy try and understand what a bit that secret sauce to transaction yet being just a caviar slightly we focus mainly on darkness that might be trying to appeal to a more mainstream audience and try and reach that's all outside the brain so the demo is for potentially a Def Con application where I guess purchase your two kids as NF TS so my timer talked us through that so let grant said we build a lot of demos for user testing for this one we're using it opens up wins GRC 7:21 contracts we're using truffle for the contract management and deployment and then on the client side we're using drizzle to keep the blockchain data in sync the client side and we're using our own component system I believe I and some web 3 components that we build just to keep things easy and fast for us 12 and then we're extending bristle with third-party data that comes from just regular API services reason eath gas stations API to get a gas estimate that we can use to calculate a transaction fee and an estimated wait time based on just like what the average price of gas is going to be right now so we're using those two kind of key important pieces of information on the Eiger the transaction fee is what we're calling it instead of talking about gas and we're estimating that just based on like what method the contracts calling and the average price of gas at the time the same for the estimated wait time we can just kind of see how long transactions are taking at a set gas price and we're just assuming things and we're just kind of guessing for the most part obviously users can change how much faster paying for transaction but just keeping that expectation of threat is really helpful so I do like a quick diagram also like another technique that we're using here which is like trying to keep wet free away from the user as long as possible we don't want to hit somebody right off the bat with a connect dialog or we don't want to minimize functionality in the damage so like they've done some sort of proof that they are on Jane or they're connected to watching so once the user has expressed an intention that's when we start doing our pre-flight transfer you should have like a modern browser they have connected wallet but we're on the right network which were sure like those things are going to be can check their balance you can run a simulation on the call that they're doing you get that transaction fee then we can check their balance to make sure that they're gonna have enough money for what we're trying to buy and the transaction fee and then we can give them stuffs right there so even wait prevent them from even starting a transaction that we know is not going to work so once we have all that we'll give them not relying on the wallet UX is also like something that we're big believers in so we want to show the user before or right at the time of the transaction like as much of that information as possible so once we've given all that data over to the user they can make the informed decision to be confident that what they're doing is actually going to work and it's going to work the way they expect it to and then they have an idea of how long it's going to take so we'll just go through and it's basically okay though the heirs along the way if there's any problems that'll help remedy and then we finally finished it up with a summary of the transaction details that tell them exactly how much it costs and like where they can get more information either link to either scan or open C or something like that Thanks so I'm gonna dive a little bit deeper in soos or some of the more actionable tips that came out of this research in this demo so in the first lesson that we saw we came up with was to not rely too much on water collects a lot of data out there sort of thing oh we know the wallet can handle the transaction we just need to get the user to that point and the issue here is that wallets can't be specific and actually design the lots of different use cases and I'm within the damp itself you can talk much more clearly about these or the task at hand the users trying to achieve we should help reduce the sort of cognitive load on the user so for example we talked about the fact that once the transaction started is the process of participating send problem just so generic the transaction is pending law in progress this is specifically important error messages - you might be familiar with seeing sort of you know just generic insufficient balance messages of the and this doesn't really help new users or less confident users actually help sorry get back on track what they're trying to do that shims a lot of pre-existing knowledge which normal users are going to have so again within your data needs to be able to make and to make that effort in order to help users get past this popsicle and talk to end in context with what the users trying to do so you know how do not transaction fees in order to pay particular in this instance second lesson is around prevention so we spoke previously about the irreversibility of blockchain transactions to super important speeds or like Tessa pacing and designing for these sort of engines are errors that might occur so that would be like passive UI such as the indications in the top right corner about your wallet the users using their offices that I try and transact with into wallet but it also might be you know actually intentionally designing the some friction into this process so kind of is weird to say this quite often tells me reducing friction reducing friction reducing Clips reducing the nature irreversibility and we felt it was important to give the users final tunity to double-check everything written in a language that they understand compared to what it would be more technically unless specifically do we actually feel this is like yeah super important way they user can check everything's correct I made to be 90% confident transacting thirdly is to set user expectations so I guess the main places you want to say expectations here are around fees and behind me so again on this sort of checkout screen we reference the transaction fee at the time I think it's important to recognize the fee or wallet again this prevents it from feeling a bit like a hidden thing which I might end up the roaming trust in that I think a lot of the users we spoke to didn't have pretty great knowledge of what the transaction fee was so again it gives you much unity to sort of give that sort of explanation the users that don't understand there seems to be quite a general misconception that transaction fee is going to pick down teams themselves it's a network obviously isn't going to help and understanding what's going on and also the estimated wait time so might explains how we sort of done about providing that to the area I think that's really important that although users may not minds the way they don't like the Americans over live I wouldn't know long it's going to take so things very important to provide this information upfront so they can better plan well they might want to do next what about scrubbing off to completes on the tasks of course and wait and watch the transaction very the most important thing we want to do is give us a ballpark figure at least so instead of just a static message or a spinner as we we heard the some users felt or thought them and their transaction may be timed out obviously result in the user tries to initiate that which else about that state fountain that will transactions interest or their own lesson for is to provide just enough feedback and I think that the message here mainly it's just because you can get that information from the blockchain because you can call and find out in the transactions in the menthol that's being mined doesn't mean the user wants to know that or but it doesn't mean it doesn't know that in that way so if we like them this experience that we demoed so you might if you touch this baby on Amazon with something you plan to say it gets downloaded from the cloud into your actual device now you don't get a play-by-play of exactly where that content is in the journey that it takes down to your price and that's because the user just wants to know okay how's that process started is it happening as expected and when it's finished essentially and we found that a lot of users that we sort for this in front of you know didn't support of transactions go throw away so it's kind of redundant me to waste time you know crafting those messages about when the transaction event electro finally and design for next step so we talked about it where to about post purchase experience that's not as applicable in very necessarily where we have less channel 6's automation emails so I think the transaction the transaction success message is like a really good opportunity to do that and in order to design successful device versus experience you really need to know the actual end of the baby that has service our point our demo the end goal wasn't to just complete that transaction and always to go to the conference so this message is crafted in a way that explains these that what they need to do once the tickets man I met no wallet it also anticipates that the user may have been blind to get on the heart of my friend and colleague so again you get this spring water at the bottom here which is like if Joseph in it so you're anticipating what the user might want to do next and helping them achieve that problem again assuming they have a knowledge to be able to go into the wallet semi entity to a friend or colleague I think this is a really good opportunity to use more be persistent mobilizing a lot of taps are there help interoperability in mind so you can for example if you like that about you user to generate die for example that's not just how the message is playing is great but could die why don't we say great about the guy got an interest on that compound there's a real option the seeds or cross pollinating s users between adapts roll what can cause a similar vision there I'm just gonna hand back over to mine just a sinner I can't believe you saw my desktop I'm so embarrassed so a lot of it doesn't sound too novel might all sound quite familiar and I think that's the case we don't necessarily need to be reinventing the design of the new x wheel for web theory I think we might just need a bit of a collective nudge to sort remember some of the lessons we already familiar with privacy so I'm just going to hop over to - talk a bit about what's and more technological advancements in space company might mean for transaction notice so we went through traditional transactions and all that being said like it's great that we find energy into figuring this stuff out but honestly if you can get away with not dealing with these problems that's the best design solution so if you can abstract gas away if you can get rid of transaction fees if you can make transaction ten faster and that's within your capabilities absolutely do that so meta transactions is one example where you can just pay the gas on behalf of your users something like the gas station network or the FATA transaction tree light that lets you pay for users gas would get rid of one of the problems of friction points later two solutions was sidechains child plasma chains like bloom and POA third-grade they're fast they have really really basically free transaction fees so again you're not having to even deal with the whole transaction issue design with the developers from the very beginning so when you're not protecting your smart contracts use a proxy pattern that lets you chain will steps together into a single transaction for the end user there's future things coming state channels CK starts that will also let you do obtain if you hang in if you have the ability and the time and then the skill to get rid of transactions from happening that's that's the best way to deal with transactions but that doesn't necessarily mean lower device bones in the museum so just a recap something the overarching heuristics and the sort of foundation behind all these devices still very much it's all very much applies and I still always communicate with the context be specific about what the use of doing the tasks that they're trying to achieve plan for errors anticipate errors design error states help users out the jam don't just tell them this that's happening set the user expectations so always try and keep them in the loop make sure that they're aware of any sort of nasty spot potential Melfi surprises such as fees or not wait times but why just enough information just because you can provide the content doesn't mean that you should try and think about the actual information user needs at the time what is a progress through the general while you're designing and remember next steps you know try and avoid dead ends we don't want the user to be sort of okay very well I've lost I don't know what to do next so consider next steps whenever you're designing a float is probably and that's a again repair chest and plenty more about Rimbaud and scan the QR codes as well Twitter thank you [Applause]