What could go wrong?
This was the tight eye thought, you know, it's pretty funny when we design software, right?
You remember these memes when someone is drinking water in QA and the abusers trying to
drink the water in all the different cases, this is what we thought we should talk a bit
more about today because we think that security is missing quite a big aspect on the design
side.
So today we're going to talk a little bit about UI, specifically about this, are you sure
confirmation dialogue?
You probably have seen some of them in one way or the other.
It introduces a lot of ambiguity as well.
It's so hard I can even barely say the word ambiguity, I'm probably like, you know,
I'm not a native speaker, but neither is this guy as well, but no one is really sure if
you want to do that, I probably will never be able to get French citizenship after
this talk, but it's all right.
So a lot of these confirmation dialogues are introducing major security issues, which are left
on the user.
You know, as developers we think, this is easy, right, but sometimes it's not.
I didn't want to take an example of Windows as well, but this is not a good example
as I thought, yeah, sure, we can do it.
This is one deletion dialogue in Windows 10, and the first one is pretty okay, the second one
not so much.
Can someone of you tell me what is the difference in the second one, why is the second
one worse?
Anyone has any ideas?
Yeah, it doesn't tell you what it's good to do.
Missing details, it's not saying what it's going to do, and yeah, I think that's right.
The first one is pretty good because you are deleting something and it tells you, like, maybe
it's your baby photos from, I don't know, in the 90s, maybe you don't want them deleted.
And that's fine, you get the metadata here.
But in the second one, you don't have these two information.
You are just deleting two items.
Imagine you go quickly to the bathroom, you go back, you don't know what you are deleting,
right, and maybe you click on yes because you are sure, right?
As well, let alone the fact that these are using two different icons here, one time
and the next and one time a warning sign, for the same kind of action.
So this is like a very simple thing we are looking at.
So basically the issue happens when developers think that the users understand security
as much as they do, and there's the gap as well.
So some of you might know the privacy paradox as well.
Now I know security and privacy is not the same thing, but for the sake of the argument,
I'm making them the same thing here and all this light as well.
So in 2001, there was some research called the privacy paradox, and it describes very well
how people think they care about privacy and how what they really do.
So you might know after 2013, after the Snowden leaks, people were very angry, like,
what are we doing?
We need to change something.
I don't think there's a lot of things changing since then.
So this is the privacy paradox.
The people's behavior towards what they actually do and what they how they feel about it.
It's a pretty big gap.
So this is what we want to talk a little bit more about today, considering that we have only one
microphone today, I'm just doing a little bit of an introduction as well.
We are from Ura Design, I'm Alia and this is Ania as well.
We do design and research, especially open source, open science, and human rights projects.
And today we are here because we believe that court audits shouldn't be the only thing we should
look for in security audits and anything which touch security.
There's a lot of attack surface on the UX side as well.
And today we're going to touch a little bit more on the UI side too.
And for this, I'm going to leave the microphone to my colleague, Ania,
and I need a second further, which is always very fun.
And she's going to talk a little bit about some use cases we have.
Ania, can we bring back Wazaar?
Wazaar?
Ania, okay, so we will showcase two of them.
Key studies or works that we have conducted that focus on security, critical projects like
any other mentioned.
Okay, first one is Kupzoaz, who here is familiar with Kupzoaz?
Not you, Marta.
Not you.
Okay, yes, can you mention what Kupzoaz is?
It works on virtual machines, disposable virtual machines.
And they are very customizable, very flexible, and they work through isolation.
So they don't communicate with each other.
So Kupzoaz is very powerful, but it is very complex.
And as designers, our first thoughts are to simplify the design, but sometimes by
simplifying the design, we might remove some security layers.
So the project for our goal was to clarify, but without creating guesswork.
We first started with a UX copy audit, where our goal was to create actionable, clear,
and concise labels to reduce the cognitive debt that
I'll mention as well.
And second, creating a clear icon system based on the site, to create more pixel-perfect icons,
and creating color consistency as well.
And the UI redesign, we'll find the visual design by creating
scalable information architecture as well, but also adding more support on text,
and creating a cohesive system throughout the whole.
Not only the global configuration, but also throughout all the cubes.
Second, second case that is mail below.
Isn't anybody here by the chance familiar with mail below?
Okay, you're in the back.
Thank you.
So indeed, it is a browser extension.
It works through webmail, and it provides encryption through email.
So all your emails, I encrypt it.
The process is you have to edit as an add-on on your browser,
and create a configuration key encryption key.
And then you can start with communicating with your clients, friends, and everybody.
So before we start the UX and UI copy,
we conducted some user interviews to understand where users were struggling.
Well, were the pain points.
Did they have any troubles creating a key first of all,
and then communicating with people?
And the first problem we faced was that after users were creating,
that key, the configuration screen was just a block of text,
and just one simple sentence saying, go to key server.
And this created many, many problems,
because users could not see that they could download the key
to communicate with their people in the email.
So in order to go to the key server, it was no clear instructions.
So what we did, we designed the screen in order to
be more consistent with the UI, but also to have a function,
a functionable call to action button,
that redirects users to go to the key server.
Yes, another issue we faced was also users
were creating an encrypted email,
but it was unclear if also the subject was encrypted.
They could not understand if only the email
on the subject or both, or neither were encrypted.
So in order to do that, we redesigned the subject line saying,
with the sentence that, hey, the subject line is not encrypted.
So beware of that, because a lot of people were
including sensitive information, and it was unclear, as well.
And the second change we made was at the bottom,
the call to action button, it was also changed
to send encrypted message before it was just sent or signed only.
And it was unclear for users if it's encrypted or not.
So yeah, we made more changes, the CC button as well,
the drag and drop file, but those were not related to security.
I mean, they are don't get me wrong.
And yes, so these two key studies, but also other works
that we've done in the past have led us into creating
framework that we are using to audit and help other projects,
as well, which Elio is going to speak more about.
But I need to pass the microphone.
This talk was meant to be more interactive,
but without we shouldn't do this all the time.
Does anyone remember the Hawaii incident in 2018,
whether it got like a missile alert?
Yeah?
Can you remember what happened?
Oh yes, there are some tests,
such as alarm that the state has sent to you
to check if it's working.
But they normally, they had a list of code
to test, like test, a missile is arriving.
Actually, I left, a missile is arriving.
And they sent it to his relative, made their entire island
their via the scale.
It also says they weren't buttons, they looked like
hyperlinks as well.
Yes, it's been hard to summarize this for the video.
But yeah, the basically they UI had some links,
and it was barely noticeable if you are sending it to production,
to real alerts, to actual people on the island,
or whether you're just doing a test alert.
One could say, I read in the Reddit comments,
which is never a good thing to do.
But what someone said, at least it's not the opposite,
you know, that something real happened.
So because these things inspired us to create
a little bit of a framework, we understand that these things
are not binary, but also there must be some kind of guidance
you can actually think about.
So we introduced, we introduced the secure UI,
heuristics interface frameworks, which we've
gone to work on the title, or this is a working title,
don't worry, it's going to be short here.
Which is basically like a little bit of a best practice
in security auditing, together with Neil's
enormous 10 UX heuristics.
But apply to a lot of the kind of work we do.
So it treats graphical user interface failures
as potential security failures.
These are not separate as well.
We basically anticipate failure, and based on this framework,
there are 10 different parts, and you can
basically follow this.
That is a checklist, but more as a best guidance.
It identifies where there might be security issues.
People might rush, my guess, my, I don't know, just click on
I accept terms and conditions and things like that, you know.
So it's basically made out of three pillars.
The first one is the cognitive pillar, and that could be
mental load as well, a lot of cognitive death as well.
So do you know this UI, where you see so much red and green?
You don't know what is right and what is wrong anymore?
These kind of things create a lot of mental load.
And once the user is kind of decensitized to these things,
they also don't care much about these UI anymore as well.
So there's a lot of things we can do to really be intentional on
where do we want people and when we do not.
We also don't forget about accessibility.
The accessibility also is very important on this side of things.
So imagine if you are not able to read the page,
you can do a lot of mistakes, which can be security mistakes as well.
And the classical thing is, if you want to be WCAG compliant,
what we see as able-bodied people should be also what the code says.
You know, this shitty newsletter, sorry I said this on video,
on where you have a PNG image, but it's not readable.
There's no text, there's no nothing, people cannot read it.
It might be, I don't know, an umbrella alert in Hawaii,
and you are not able to read it because it was an image.
So that is also affecting security in this sense.
And we also have a technical pillar as well,
which evaluates how the system behaves,
and how states changes, and how what's the latency?
Is there something wrong if you live, if you have 3G,
you don't have 5G, is there something which can happen?
So this framework tries to figure out all of these
to make sure that the usability is the best it can be.
We're starting with UI here because it should be a layer
to a security audit by people like Carol,
who does security audits for a living as well.
And other security firms don't do a lot of design audits.
So this is not supposed to replace it, but just to be a layer on top of it.
So basically, the methodology of this would be that we look for
specific characteristics, as we mentioned.
We identify what critical workflows we have.
Of course, you cannot give the same kind of attention to a random
about us page to delete my account page,
so we really got to weigh things out here.
As well as every identified risk, there will be a happy path,
and there will be a risk mode.
What's the best thing you can do?
And what's the worst thing we can happen,
and also what's the recommendation?
And also, there will be scoring for every kind of thing we are looking for here.
So yet, more about reasoning, rather than a checklist of things.
And with that, we also collaborated with a lot of projects.
We might have seen two of them here.
We collaborated with Tor, Mozilla, Vicky Media,
and a lot of projects under the Open Technology Fund.
Currently, we are working with Sequoia PGP as well.
So we really, we saw a pattern here
that we really got to do something about this,
because I don't think there's a lot of information around here.
So yeah, the framework is still working progress.
We look forward to make a first version in Q2,
where it will be a license under, I don't want to say things,
but probably creative comments license, and we will,
yeah, we tell to us if you want to narrow the version as well.
And thank you so much, and we look forward to questions,
and hope this will be useful to your upcoming projects as well.
Thank you.