WEBVTT 00:00.000 --> 00:06.880 What could go wrong? 00:06.880 --> 00:13.480 This was the tight eye thought, you know, it's pretty funny when we design software, right? 00:13.480 --> 00:18.680 You remember these memes when someone is drinking water in QA and the abusers trying to 00:18.680 --> 00:23.560 drink the water in all the different cases, this is what we thought we should talk a bit 00:23.560 --> 00:29.560 more about today because we think that security is missing quite a big aspect on the design 00:29.560 --> 00:30.560 side. 00:30.560 --> 00:37.800 So today we're going to talk a little bit about UI, specifically about this, are you sure 00:37.800 --> 00:39.240 confirmation dialogue? 00:39.240 --> 00:43.760 You probably have seen some of them in one way or the other. 00:43.760 --> 00:47.480 It introduces a lot of ambiguity as well. 00:47.480 --> 00:51.920 It's so hard I can even barely say the word ambiguity, I'm probably like, you know, 00:51.920 --> 00:58.520 I'm not a native speaker, but neither is this guy as well, but no one is really sure if 00:58.520 --> 01:02.780 you want to do that, I probably will never be able to get French citizenship after 01:02.780 --> 01:05.400 this talk, but it's all right. 01:05.400 --> 01:13.560 So a lot of these confirmation dialogues are introducing major security issues, which are left 01:13.560 --> 01:14.560 on the user. 01:14.560 --> 01:21.480 You know, as developers we think, this is easy, right, but sometimes it's not. 01:21.480 --> 01:27.160 I didn't want to take an example of Windows as well, but this is not a good example 01:27.160 --> 01:29.640 as I thought, yeah, sure, we can do it. 01:29.640 --> 01:34.480 This is one deletion dialogue in Windows 10, and the first one is pretty okay, the second one 01:34.480 --> 01:36.680 not so much. 01:36.680 --> 01:41.960 Can someone of you tell me what is the difference in the second one, why is the second 01:41.960 --> 01:42.960 one worse? 01:42.960 --> 01:43.960 Anyone has any ideas? 01:43.960 --> 01:50.800 Yeah, it doesn't tell you what it's good to do. 01:50.800 --> 01:56.280 Missing details, it's not saying what it's going to do, and yeah, I think that's right. 01:56.360 --> 01:59.480 The first one is pretty good because you are deleting something and it tells you, like, maybe 01:59.480 --> 02:04.920 it's your baby photos from, I don't know, in the 90s, maybe you don't want them deleted. 02:04.920 --> 02:06.640 And that's fine, you get the metadata here. 02:06.640 --> 02:10.600 But in the second one, you don't have these two information. 02:10.600 --> 02:11.920 You are just deleting two items. 02:11.920 --> 02:16.000 Imagine you go quickly to the bathroom, you go back, you don't know what you are deleting, 02:16.000 --> 02:20.440 right, and maybe you click on yes because you are sure, right? 02:20.440 --> 02:24.200 As well, let alone the fact that these are using two different icons here, one time 02:24.200 --> 02:28.120 and the next and one time a warning sign, for the same kind of action. 02:28.120 --> 02:33.000 So this is like a very simple thing we are looking at. 02:33.000 --> 02:41.480 So basically the issue happens when developers think that the users understand security 02:41.480 --> 02:47.840 as much as they do, and there's the gap as well. 02:47.840 --> 02:51.520 So some of you might know the privacy paradox as well. 02:51.840 --> 02:56.160 Now I know security and privacy is not the same thing, but for the sake of the argument, 02:56.160 --> 03:00.080 I'm making them the same thing here and all this light as well. 03:00.080 --> 03:06.720 So in 2001, there was some research called the privacy paradox, and it describes very well 03:06.720 --> 03:12.080 how people think they care about privacy and how what they really do. 03:12.080 --> 03:18.400 So you might know after 2013, after the Snowden leaks, people were very angry, like, 03:18.400 --> 03:19.200 what are we doing? 03:19.280 --> 03:21.920 We need to change something. 03:21.920 --> 03:25.680 I don't think there's a lot of things changing since then. 03:25.680 --> 03:28.160 So this is the privacy paradox. 03:28.160 --> 03:35.360 The people's behavior towards what they actually do and what they how they feel about it. 03:35.360 --> 03:39.120 It's a pretty big gap. 03:39.120 --> 03:44.800 So this is what we want to talk a little bit more about today, considering that we have only one 03:44.800 --> 03:47.840 microphone today, I'm just doing a little bit of an introduction as well. 03:47.920 --> 03:51.920 We are from Ura Design, I'm Alia and this is Ania as well. 03:51.920 --> 03:59.120 We do design and research, especially open source, open science, and human rights projects. 03:59.120 --> 04:04.160 And today we are here because we believe that court audits shouldn't be the only thing we should 04:04.160 --> 04:08.960 look for in security audits and anything which touch security. 04:08.960 --> 04:12.080 There's a lot of attack surface on the UX side as well. 04:12.080 --> 04:17.360 And today we're going to touch a little bit more on the UI side too. 04:17.360 --> 04:23.680 And for this, I'm going to leave the microphone to my colleague, Ania, 04:23.680 --> 04:26.880 and I need a second further, which is always very fun. 04:26.880 --> 04:30.480 And she's going to talk a little bit about some use cases we have. 04:30.480 --> 04:39.920 Ania, can we bring back Wazaar? 04:39.920 --> 04:41.920 Wazaar? 04:41.920 --> 04:46.960 Ania, okay, so we will showcase two of them. 04:48.000 --> 04:56.480 Key studies or works that we have conducted that focus on security, critical projects like 04:56.480 --> 04:58.400 any other mentioned. 04:58.400 --> 05:03.760 Okay, first one is Kupzoaz, who here is familiar with Kupzoaz? 05:03.760 --> 05:04.560 Not you, Marta. 05:04.560 --> 05:05.760 Not you. 05:06.960 --> 05:12.800 Okay, yes, can you mention what Kupzoaz is? 05:13.120 --> 05:22.960 It works on virtual machines, disposable virtual machines. 05:22.960 --> 05:29.440 And they are very customizable, very flexible, and they work through isolation. 05:29.440 --> 05:32.800 So they don't communicate with each other. 05:32.800 --> 05:38.240 So Kupzoaz is very powerful, but it is very complex. 05:38.240 --> 05:46.240 And as designers, our first thoughts are to simplify the design, but sometimes by 05:46.240 --> 05:50.080 simplifying the design, we might remove some security layers. 05:50.080 --> 05:57.040 So the project for our goal was to clarify, but without creating guesswork. 05:59.600 --> 06:06.000 We first started with a UX copy audit, where our goal was to create actionable, clear, 06:06.000 --> 06:10.080 and concise labels to reduce the cognitive debt that 06:10.080 --> 06:11.680 I'll mention as well. 06:11.680 --> 06:23.520 And second, creating a clear icon system based on the site, to create more pixel-perfect icons, 06:23.520 --> 06:25.760 and creating color consistency as well. 06:27.200 --> 06:34.720 And the UI redesign, we'll find the visual design by creating 06:34.720 --> 06:42.240 scalable information architecture as well, but also adding more support on text, 06:42.240 --> 06:47.920 and creating a cohesive system throughout the whole. 06:47.920 --> 06:52.560 Not only the global configuration, but also throughout all the cubes. 06:55.120 --> 06:58.400 Second, second case that is mail below. 06:58.400 --> 07:00.880 Isn't anybody here by the chance familiar with mail below? 07:00.960 --> 07:04.240 Okay, you're in the back. 07:12.960 --> 07:13.760 Thank you. 07:13.760 --> 07:17.680 So indeed, it is a browser extension. 07:18.640 --> 07:24.720 It works through webmail, and it provides encryption through email. 07:24.720 --> 07:26.640 So all your emails, I encrypt it. 07:27.280 --> 07:30.640 The process is you have to edit as an add-on on your browser, 07:30.640 --> 07:34.560 and create a configuration key encryption key. 07:34.560 --> 07:40.800 And then you can start with communicating with your clients, friends, and everybody. 07:42.800 --> 07:46.000 So before we start the UX and UI copy, 07:46.000 --> 07:51.360 we conducted some user interviews to understand where users were struggling. 07:51.360 --> 07:53.360 Well, were the pain points. 07:53.360 --> 07:59.200 Did they have any troubles creating a key first of all, 07:59.200 --> 08:01.920 and then communicating with people? 08:01.920 --> 08:07.920 And the first problem we faced was that after users were creating, 08:07.920 --> 08:12.560 that key, the configuration screen was just a block of text, 08:12.560 --> 08:18.000 and just one simple sentence saying, go to key server. 08:18.080 --> 08:21.440 And this created many, many problems, 08:21.440 --> 08:27.200 because users could not see that they could download the key 08:27.200 --> 08:31.360 to communicate with their people in the email. 08:31.360 --> 08:36.160 So in order to go to the key server, it was no clear instructions. 08:36.160 --> 08:40.480 So what we did, we designed the screen in order to 08:40.480 --> 08:45.920 be more consistent with the UI, but also to have a function, 08:45.920 --> 08:48.320 a functionable call to action button, 08:48.320 --> 08:52.560 that redirects users to go to the key server. 08:54.560 --> 08:57.440 Yes, another issue we faced was also users 08:57.440 --> 09:00.960 were creating an encrypted email, 09:00.960 --> 09:06.720 but it was unclear if also the subject was encrypted. 09:06.720 --> 09:09.760 They could not understand if only the email 09:09.760 --> 09:13.760 on the subject or both, or neither were encrypted. 09:13.760 --> 09:18.960 So in order to do that, we redesigned the subject line saying, 09:18.960 --> 09:22.640 with the sentence that, hey, the subject line is not encrypted. 09:22.640 --> 09:25.680 So beware of that, because a lot of people were 09:26.880 --> 09:31.360 including sensitive information, and it was unclear, as well. 09:31.360 --> 09:34.480 And the second change we made was at the bottom, 09:35.440 --> 09:39.040 the call to action button, it was also changed 09:39.040 --> 09:46.320 to send encrypted message before it was just sent or signed only. 09:46.320 --> 09:52.160 And it was unclear for users if it's encrypted or not. 09:52.160 --> 09:57.280 So yeah, we made more changes, the CC button as well, 09:57.280 --> 10:03.200 the drag and drop file, but those were not related to security. 10:03.200 --> 10:07.120 I mean, they are don't get me wrong. 10:07.120 --> 10:13.120 And yes, so these two key studies, but also other works 10:13.120 --> 10:17.600 that we've done in the past have led us into creating 10:17.600 --> 10:25.600 framework that we are using to audit and help other projects, 10:25.600 --> 10:28.800 as well, which Elio is going to speak more about. 10:28.800 --> 10:34.160 But I need to pass the microphone. 10:34.160 --> 10:36.160 This talk was meant to be more interactive, 10:36.160 --> 10:38.000 but without we shouldn't do this all the time. 10:48.000 --> 10:51.440 Does anyone remember the Hawaii incident in 2018, 10:51.440 --> 10:53.600 whether it got like a missile alert? 10:53.600 --> 10:55.200 Yeah? 10:55.200 --> 10:56.800 Yeah? 10:56.800 --> 10:58.400 Can you remember what happened? 10:58.480 --> 11:01.520 Oh yes, there are some tests, 11:01.520 --> 11:05.760 such as alarm that the state has sent to you 11:05.760 --> 11:08.480 to check if it's working. 11:08.480 --> 11:11.280 But they normally, they had a list of code 11:11.280 --> 11:14.880 to test, like test, a missile is arriving. 11:14.880 --> 11:17.200 Actually, I left, a missile is arriving. 11:17.200 --> 11:21.440 And they sent it to his relative, made their entire island 11:21.440 --> 11:23.760 their via the scale. 11:23.760 --> 11:26.560 It also says they weren't buttons, they looked like 11:26.560 --> 11:30.400 hyperlinks as well. 11:30.400 --> 11:32.560 Yes, it's been hard to summarize this for the video. 11:32.560 --> 11:35.680 But yeah, the basically they UI had some links, 11:35.680 --> 11:39.040 and it was barely noticeable if you are sending it to production, 11:39.040 --> 11:42.720 to real alerts, to actual people on the island, 11:42.720 --> 11:47.120 or whether you're just doing a test alert. 11:47.120 --> 11:49.200 One could say, I read in the Reddit comments, 11:49.200 --> 11:50.400 which is never a good thing to do. 11:50.400 --> 11:53.360 But what someone said, at least it's not the opposite, 11:53.360 --> 11:55.840 you know, that something real happened. 11:55.840 --> 11:58.960 So because these things inspired us to create 11:58.960 --> 12:01.680 a little bit of a framework, we understand that these things 12:01.680 --> 12:05.280 are not binary, but also there must be some kind of guidance 12:05.280 --> 12:07.040 you can actually think about. 12:07.040 --> 12:13.840 So we introduced, we introduced the secure UI, 12:13.840 --> 12:16.080 heuristics interface frameworks, which we've 12:16.080 --> 12:18.000 gone to work on the title, or this is a working title, 12:18.000 --> 12:20.080 don't worry, it's going to be short here. 12:20.080 --> 12:24.960 Which is basically like a little bit of a best practice 12:24.960 --> 12:27.200 in security auditing, together with Neil's 12:27.200 --> 12:30.160 enormous 10 UX heuristics. 12:30.160 --> 12:34.400 But apply to a lot of the kind of work we do. 12:34.400 --> 12:37.280 So it treats graphical user interface failures 12:37.280 --> 12:39.200 as potential security failures. 12:39.200 --> 12:42.000 These are not separate as well. 12:42.000 --> 12:45.440 We basically anticipate failure, and based on this framework, 12:45.440 --> 12:49.840 there are 10 different parts, and you can 12:49.840 --> 12:50.800 basically follow this. 12:50.800 --> 12:55.120 That is a checklist, but more as a best guidance. 12:55.120 --> 12:58.960 It identifies where there might be security issues. 12:58.960 --> 13:04.240 People might rush, my guess, my, I don't know, just click on 13:04.240 --> 13:10.160 I accept terms and conditions and things like that, you know. 13:10.160 --> 13:13.200 So it's basically made out of three pillars. 13:13.200 --> 13:17.360 The first one is the cognitive pillar, and that could be 13:17.360 --> 13:22.640 mental load as well, a lot of cognitive death as well. 13:22.640 --> 13:27.520 So do you know this UI, where you see so much red and green? 13:27.520 --> 13:30.720 You don't know what is right and what is wrong anymore? 13:30.720 --> 13:33.280 These kind of things create a lot of mental load. 13:33.280 --> 13:38.880 And once the user is kind of decensitized to these things, 13:38.880 --> 13:45.440 they also don't care much about these UI anymore as well. 13:45.520 --> 13:49.280 So there's a lot of things we can do to really be intentional on 13:49.280 --> 13:53.040 where do we want people and when we do not. 13:53.040 --> 13:56.400 We also don't forget about accessibility. 13:56.400 --> 14:00.160 The accessibility also is very important on this side of things. 14:00.160 --> 14:04.800 So imagine if you are not able to read the page, 14:04.800 --> 14:11.200 you can do a lot of mistakes, which can be security mistakes as well. 14:11.200 --> 14:16.000 And the classical thing is, if you want to be WCAG compliant, 14:16.000 --> 14:22.000 what we see as able-bodied people should be also what the code says. 14:22.000 --> 14:24.880 You know, this shitty newsletter, sorry I said this on video, 14:24.880 --> 14:29.040 on where you have a PNG image, but it's not readable. 14:29.040 --> 14:31.600 There's no text, there's no nothing, people cannot read it. 14:31.600 --> 14:34.560 It might be, I don't know, an umbrella alert in Hawaii, 14:34.560 --> 14:37.600 and you are not able to read it because it was an image. 14:37.600 --> 14:41.520 So that is also affecting security in this sense. 14:41.520 --> 14:44.320 And we also have a technical pillar as well, 14:44.320 --> 14:47.600 which evaluates how the system behaves, 14:47.600 --> 14:51.360 and how states changes, and how what's the latency? 14:51.360 --> 14:54.400 Is there something wrong if you live, if you have 3G, 14:54.400 --> 14:57.360 you don't have 5G, is there something which can happen? 14:57.360 --> 15:02.080 So this framework tries to figure out all of these 15:02.080 --> 15:07.200 to make sure that the usability is the best it can be. 15:07.200 --> 15:10.960 We're starting with UI here because it should be a layer 15:10.960 --> 15:15.520 to a security audit by people like Carol, 15:15.520 --> 15:18.720 who does security audits for a living as well. 15:18.720 --> 15:22.960 And other security firms don't do a lot of design audits. 15:22.960 --> 15:28.560 So this is not supposed to replace it, but just to be a layer on top of it. 15:28.560 --> 15:33.360 So basically, the methodology of this would be that we look for 15:33.360 --> 15:35.600 specific characteristics, as we mentioned. 15:35.600 --> 15:38.560 We identify what critical workflows we have. 15:38.560 --> 15:41.680 Of course, you cannot give the same kind of attention to a random 15:41.680 --> 15:45.200 about us page to delete my account page, 15:45.200 --> 15:48.000 so we really got to weigh things out here. 15:48.000 --> 15:52.880 As well as every identified risk, there will be a happy path, 15:52.880 --> 15:54.160 and there will be a risk mode. 15:54.160 --> 15:56.480 What's the best thing you can do? 15:56.480 --> 15:59.280 And what's the worst thing we can happen, 15:59.280 --> 16:02.480 and also what's the recommendation? 16:02.560 --> 16:07.600 And also, there will be scoring for every kind of thing we are looking for here. 16:07.600 --> 16:13.440 So yet, more about reasoning, rather than a checklist of things. 16:14.240 --> 16:19.440 And with that, we also collaborated with a lot of projects. 16:19.440 --> 16:20.800 We might have seen two of them here. 16:20.800 --> 16:24.080 We collaborated with Tor, Mozilla, Vicky Media, 16:24.080 --> 16:26.400 and a lot of projects under the Open Technology Fund. 16:26.400 --> 16:31.200 Currently, we are working with Sequoia PGP as well. 16:31.200 --> 16:35.040 So we really, we saw a pattern here 16:35.040 --> 16:37.600 that we really got to do something about this, 16:37.600 --> 16:40.800 because I don't think there's a lot of information around here. 16:42.640 --> 16:45.600 So yeah, the framework is still working progress. 16:45.600 --> 16:50.000 We look forward to make a first version in Q2, 16:50.000 --> 16:54.320 where it will be a license under, I don't want to say things, 16:54.320 --> 16:59.200 but probably creative comments license, and we will, 16:59.200 --> 17:02.400 yeah, we tell to us if you want to narrow the version as well. 17:02.400 --> 17:05.600 And thank you so much, and we look forward to questions, 17:05.600 --> 17:09.040 and hope this will be useful to your upcoming projects as well. 17:09.040 --> 17:19.040 Thank you.