Beyond the Pile of Knobs
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Subtitle |
| |
| Title of Series | ||
| Number of Parts | 102 | |
| Author | ||
| License | CC Attribution 4.0 International: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/43281 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
1
6
8
14
17
18
19
20
25
27
28
29
30
34
35
36
39
41
47
52
53
54
55
58
59
63
65
67
71
79
81
84
85
86
87
91
92
93
94
95
96
97
98
99
100
101
00:00
TelecommunicationChaos theoryRight angleDifferent (Kate Ryan album)Multiplication signTrailStreaming mediaScripting languageObservational studyWeb browserCASE <Informatik>Open sourceProjective planeRow (database)Process (computing)UsabilityRoundness (object)Point (geometry)Content (media)Information securityArithmetic progressionRAIDKey (cryptography)AreaPower (physics)Game theoryExecution unitComputer iconTranslation (relic)Type theorySinc functionJSONXMLLecture/Conference
02:37
Execution unitComputer configurationScripting languageConsistencyMathematicsMereologyExpressionSource codeComputer animation
03:19
Execution unitMereologyWordOpen sourceProjective planePrisoner's dilemmaComputer animation
03:54
Execution unitGraphical user interfaceWeb browserInformation securityMultiplication signWordScripting languageGroup actionRight angleExtension (kinesiology)FamilyGraphical user interfaceSoftware testingInformation privacyWeb browserPoint (geometry)Phase transitionMeeting/InterviewComputer animation
04:57
Graphical user interfaceWeb browserInformation securityExecution unitScripting languageWeb browserInformation securityFile formatWebsiteExtension (kinesiology)Cross-site scriptingComputer animation
05:43
Process (computing)Logic synthesisPrototypeSoftware developerFeedbackProjective planeSoftwareOpen sourceScripting languageInformation securityFeedbackBitSoftware developerInformation privacyDemosceneRight anglePoint (geometry)QuicksortComputer animation
07:14
Moving averageComputer architectureBlogGoodness of fitSpacetimeWindowGroup actionPoint (geometry)Hand fanComputer configurationProcess (computing)Computer animation
08:16
Process (computing)Logic synthesisPrototypeFocus (optics)UsabilitySoftware testingFeedbackStatement (computer science)Process (computing)SpacetimeInheritance (object-oriented programming)UsabilityCore dumpSoftware testingFeedbackPrototypePower (physics)Phase transitionRandom matrixWeb 2.0Computer animation
10:01
Web browserPower (physics)FeedbackExecution unitWeb pagePrototypeFeedbackScripting languagePower (physics)Web browserBitArchaeological field surveyMultiplication signWhiteboardLine (geometry)Level (video gaming)QuicksortPrototypeTotal S.A.Different (Kate Ryan album)Interactive televisionWindowProcess (computing)Context awarenessXMLUMLComputer animation
10:59
Interface (computing)Programming languageWordTask (computing)Computer configurationExecution unitInformation securityContent (media)Information privacyReduction of orderInheritance (object-oriented programming)Control flowInteractive televisionTerm (mathematics)Power (physics)Context awarenessScripting languageInformation securityInformation privacySpacetimeWeb browserCASE <Informatik>QuicksortWeb 2.0Multiplication signTrailAutomatic differentiationVotingAreaInclusion mapDifferent (Kate Ryan album)Structural loadWeb applicationComputer animation
13:16
Inheritance (object-oriented programming)Information securityControl flowInteractive televisionInformation privacyDigital signalWeb pageProduct (business)Block (periodic table)Scripting languageInstallation artDecision theoryBlock (periodic table)Web pageScripting languageWordInformation securityGame controllerElectronic mailing listMultiplication signInformation privacyVirtual machineComputer animation
14:39
Execution unitInheritance (object-oriented programming)Decision theoryFrictionDefault (computer science)Virtual machineOrder (biology)MereologyDecision theoryMultiplication signPower (physics)CASE <Informatik>Block (periodic table)FrictionProcess (computing)Content (media)Scripting languageInheritance (object-oriented programming)Default (computer science)Computer animation
16:15
Task (computing)Computer configurationLecture/Conference
16:50
NumberProcess (computing)Scripting languagePower (physics)MereologyInformationRow (database)Program flowchartLecture/Conference
17:27
Execution unitMaxima and minimaWebsiteScripting languageOpen sourceBlock (periodic table)IRIS-TElectronic data interchangeMusical ensemblePower (physics)InformationComputer configurationWordElement (mathematics)Right angleScripting languageComputer animation
18:10
Maxima and minimaScripting languageWebsiteOpen sourceBlock (periodic table)GoogolReal numberVideoconferencingScripting languageElement (mathematics)WordOpen sourceNumberWeb browserGroup actionWebsite3 (number)Product (business)Coma BerenicesFilm editingRight angleMultiplication signGoogolData managementComputer animationJSONXML
19:39
Scripting languageMaizeGoogolSoftware testingHypermediaComputer fontFluid staticsContent (media)Computer configurationSpacetimeExecution unitGame theoryWeb pageWebsiteSocial softwareFacebookVisualization (computer graphics)Computer configurationScripting languageWeb browserVideoconferencingMultiplication signHypermediaInterface (computing)Matrix (mathematics)WebsiteType theoryDifferent (Kate Ryan album)Block (periodic table)Power (physics)Mathematical optimizationSoftware testingFunctional programmingConnectivity (graph theory)BitNormal (geometry)Dimensional analysisVisualization (computer graphics)MathematicsFacebookGame theoryCASE <Informatik>WindowComplete metric spaceCombinational logicDataflowUnterhaltungsmathematikAudio file formatComa BerenicesWeb 2.0Content (media)Morley's categoricity theoremBlogRight angleUniform resource locatorSpacetimeDoubling the cubeGroup action
24:06
Task (computing)Task (computing)Scripting languageWebsiteStructural loadPosition operatorProgram flowchart
24:56
Task (computing)Interactive televisionComputer configurationDefault (computer science)Electronic mailing listWebsiteBitScripting languageKeyboard shortcutRight angleArithmetic meanFrustrationProcess (computing)Program flowchart
25:55
Execution unitScripting languageSet (mathematics)WebsiteSet (mathematics)WebsiteScripting languageComputer configurationTunisFacebookMereologyGroup actionComputer animation
26:59
WebsiteComputer configurationScripting languageFacebookBlock (periodic table)SummierbarkeitSet (mathematics)WindowWordInterface (computing)Programming languageExecution unitPower (physics)WebsiteSet (mathematics)Core dumpTask (computing)Computer configurationWordVisualization (computer graphics)Interface (computing)SoftwareConsistencyComputer animation
27:50
Programming languageComputer iconPhysical systemError messageShift operatorInformation securityNegative numberScripting languageConsistencyBlock (periodic table)Classical physicsOperator (mathematics)Exception handlingMessage passingProgramming languageInterface (computing)Information securityInheritance (object-oriented programming)Goodness of fitSoftwarePrice indexCombinational logicGraph coloringPosition operatorProjective planeGreen's functionNegative numberArithmetic meanNeuroinformatikCuboidRight angleMultiplication signComputer iconEndliche ModelltheorieLevel (video gaming)
31:15
Programming languageNegative numberExecution unitPower (physics)Information securityScripting languageVideo gameLecture/ConferenceComputer animation
32:14
Execution unitIcosahedronInformation securityScripting languageMereologyBitProgramming languageMultiplication signGoodness of fitProjective planePower (physics)Process (computing)Software developerFood energyLecture/ConferenceComputer animation
33:07
Information privacyDifferent (Kate Ryan album)Food energyInformation securityRight angleTemplate (C++)Propositional formulaProcess (computing)QuicksortLecture/Conference
33:48
Template (C++)Propositional formulaExecution unitVisual systemWordPropositional formulaTemplate (C++)QuicksortFocus (optics)FeedbackLogical constantMultiplication signProcess (computing)Decision theoryPhysical systemOnline helpComputer iconWeightProgram flowchartComputer animation
35:29
Visual systemOpen setVector spaceComputer iconSoftwareWindowOpen sourceCollaborationismOpen setRemote procedure callSoftware testingProjective planeNatural numberMultiplication signScripting languageLecture/ConferenceComputer animation
36:50
Presentation of a groupQueue (abstract data type)Right angleLecture/ConferenceMeeting/Interview
37:42
QuicksortPoint (geometry)Process (computing)Interactive televisionPresentation of a groupGroup actionDirection (geometry)Different (Kate Ryan album)Lecture/Conference
38:17
Scripting languageProcess (computing)Projective planeGame controllerMeeting/Interview
39:02
Extension (kinesiology)Projective planeWeb browserSet (mathematics)Graphical user interfaceWebsiteElectronic mailing listMultiplication sign
40:15
Scripting languageProblemorientierte ProgrammierspracheDefault (computer science)Group action1 (number)Set (mathematics)WebsiteRight angleSubsetLatent heatLecture/Conference
41:25
Scripting languageUser interfaceProfil (magazine)Multiplication signProjective planeTheory of relativityWebsiteBlock (periodic table)Physical lawElectronic mailing listLecture/Conference
42:05
User interfaceMatrix (mathematics)Computer configurationSimilarity (geometry)Scripting languageWebsitePower (physics)Extension (kinesiology)Coma BerenicesSineLevel (video gaming)BitFacebookCategory of beingSymbol tableMereologyProcess (computing)Set (mathematics)Term (mathematics)Problemorientierte ProgrammierspracheMeeting/InterviewLecture/Conference
43:32
FacebookDefault (computer science)Multiplication signFigurate numberDecision theoryComputer configurationMeeting/InterviewLecture/Conference
44:13
Multiplication signRule of inferenceQuicksortThumbnailGraph coloringModal logicDimensional analysisWeightInformationCircleWordPosition operatorComputer iconGreen's functionLecture/ConferenceMeeting/Interview
45:05
Video gameReal numberCircleGraph coloringUser interfaceMobile appInterface (computing)Scripting languageBlock (periodic table)
46:04
Scripting languageMeeting/InterviewLecture/ConferenceComputer animationJSON
Transcript: English(auto-generated)
00:14
This next talk is going to be in English. But the next talk is going to have a French translation, so, especially if you're watching
00:28
the live stream or the recording later on, feel free to switch the audio track to French. A couple of announcements before we start the actual talk is please don't steal the
00:41
toilet brushes. They are needed on the toilets and nowhere else. Additionally, please don't smoke in any of the camp tents. Smoking is strictly prohibited in all of the tents. All right. Since we're right on time to start this next talk, I'm going to keep this introduction
01:04
short. I'm very happy to introduce to you Molly Wilson and Eileen Wagner who are going to talk about beyond the pile of knobs, redesigning no scripts UX.
01:21
It's always very interesting to see like these security tools evolve when it comes to usability and user experience. So I'm very happy to see this progress in that area. So I'm very much looking forward to see what Eileen and Molly are going to talk about. Please welcome them with a warm round of applause. Thank you.
01:45
Hi. Thank you so much for coming. We're really excited to present what we're calling beyond the pile of knobs, a design case study. We're going to talk about how we redesigned the UX of no script browser content blocking
02:00
extension but we're not just talking about no script. This is a case study that we hope points to design tools and processes that are useful for a lot of different open source projects, and particularly projects that are really complex and are geared towards power users. So hi, I'm Molly.
02:20
I'm Eileen. And this is our team-mate Lorraine. She can't be here with us. She's in Toronto. Hi, Lorraine. We first question you may have when we redesigned no script is what about that logo? The no script logo is famous. It's an icon. It's been around for a while.
02:42
Well, ladies and gentlemen, new no script logo, same as new facial expression, I don't know. This is how the no script UI used to look. Very small text, looks a little bit outdated.
03:02
It's not super consistent. New UI, whoa, grayscale, consistency, rounded corners, you might call it clear, clean, kind of modern, right? Wow, looks good, yeah, we're very pleased with ourselves. This is the least important part.
03:22
When we talk about design, making it look nicer is not what we are talking about. That's the icing on the cake. That's what you can do once you have done all of the other steps that we're going to talk about. We're not talking about the UI changes, we're talking about the deep methods and processes
03:41
that you need to use before you can even embark on doing that. So we're going to show you really how we got there, and present tools and methods that you too can use for designing open source projects. Before we do that, just a couple of words about why we're doing this.
04:04
The fourth answer is no script is great. No script is awesome, right? No script today. It's been around for some time now. It was born in May 2005, so it's one of the older browser extensions out there. It currently has 1.5 million users on Firefox, 50K users on Chrome growing, plus of course
04:24
all of the poor browser users, which, last time I checked, was around 2.5 million, officially. Of course, a jamming key, here we go. Can you help me out there? Thank you.
04:41
It's not just used by what we think of privacy advocates, activists, researchers, it's actually used by governments and corporations alike. A lot of the people that we reached out to during our testing phase, for example, were working for governments. Of course, what also happens is the clicker doesn't work.
05:03
Should we just do this instead? What also happens is no script has actually contributed to a lot of other security browser extensions, such as HTTPS everywhere. It was the first and is now in fact also the only protection, the client-side protection you have against cross-site scripting attacks.
05:22
And the last thing I want to mention here is Douglas Crockford, who is a main contributor to JavaScript itself, who actually invented the JSON format, also recommends using no script. So no script is not something that people who hate JavaScript use. No script is something that people who love JavaScript also use.
05:43
The things that ... Maybe not that, huh? Yeah, let's just ... The challenges for no script that we see are not just challenges for no script. They're actually pretty common for a lot of projects we see in the free and open-source software scene.
06:01
No script is run by one developer and a whole community of enthusiastic users, right? So it's one person who built this at some point, and then a lot of people start talking about it and giving feedback. that a little bit more in the back. It also is started by someone who mainly built it for himself. He says, I built it for myself and I will always make it work for me first. That's where a lot of the projects we work with actually come from.
06:24
What they also think is I want everyone to use these tools, right? Everyone deserves the privacy and security that I have, so a lot of fast projects want to be there. Of course, there is a tension, right, because if you're always building for yourself first, then how can you make sure everyone else is using it when everybody else has very
06:42
different needs and is not necessarily a developer? So what happened a lot is there were a lot of feedback, and, you know, future requests, there's like things that came in over the years that were really unstructured, and no script changed based on the unstructured feedback and was adapting to it very quickly.
07:01
Over, again, 14 years, it has developed into a huge project that has many different aspects to it that don't necessarily connect as smoothly as you would want it to. So what it actually leads to is something that Molly calls it. Something I call McMansion design. I'm from the US, and in the US, we have this genre of house called a McMansion
07:23
which is basically a house with design feature creep. It's like, I want this feature, I want this one, I want this one too, and you end up putting all of these features on, making your house as big, ostentatious, and feature-rich as possible, but the whole thing together doesn't look good and maybe isn't even that usable.
07:42
There's this great blog called McMansion Hell that points out how exactly this works in architecture. Here we got, pretty sure this window opens up to either nothing or a very short and tiny room. Hey, we have some space left over, why don't we attach a smaller yet uglier house? If you also are a fan of good and bad architecture, definitely check out McMansion Hell.
08:02
So there's not an option not to design whatever you're working on. There is no such thing as no design. When you are building it, you are also designing it. So what we'd like to introduce is the process, the methodology, the method behind the madness that we use to make design make sense overall.
08:24
Here's what our process looks like in four big steps. First, we research. We learn about the problem space. We learn about the existing tool, about the community, about the people who use it. What do they need? What's going on there? And then we synthesize that down to a statement that clarifies what is it we're actually going to do,
08:45
what are the core problems we're solving, and what is not so important to solve right now. This is also about prioritization. Then we prototype, and that prototyping is often rough, quick, dirty. We want to do this as cheaply and quickly and iteratively as possible, and then usability testing, test with users.
09:02
So it's really important that this goes fairly fast. It's important that this is not actually super expensive, and it's really important that this is centered on the community. It's centered on the users. So we focus on user needs by conducting user interviews at the beginning, by doing usability tests as soon as we have a prototype to test,
09:23
and getting rich, qualitative feedback throughout. Our goal is that this tool makes sense to people. Why are we building it? Because we want people to be able to use it. We want to know what do people want, what do people need, and what can people actually use.
09:43
So, for example, in our interview phase, we interviewed two novice users and four power users, our classification, not theirs, and we got rich, qualitative feedback, ample. One of our novice users said, if I hadn't found the right thing to try to turn off after the second try,
10:02
I am just going to turn NoScript off. One of our power users described how they rely on NoScript. NoScript is the last line of defense in my browser. I trust it to be working in my interest at all times. This is a lot more than we would have found out from asking people, do you like NoScript, yes, no? Giving them a survey, collecting some kind of data,
10:23
which NoScript doesn't do and will never do. This is why we chose to focus on this rich, qualitative feedback with actual people. We then analyzed that by collecting these quotations and putting them on a virtual post-it note board. We organized them by theme, we figured out what we thought,
10:42
where we did some prioritization, talked more about that in a bit, and we built rough prototypes going from paper to wireframes to sort of a click-through prototype that gives you an idea of the interaction. We tested this with four people in total at different stages. We gathered feedback, and that's how we did it.
11:01
Now we want to dive more into what we did and specifically how this looks for NoScript. If you're thinking, yeah, yeah, yeah, user-centered design process, I've heard that before, but it's not applicable to us. This is too complicated, this is too technical, this is for power users. This is exactly what NoScript is, so we're going to show you how this works in that context. First, we're going to talk about framing. So what does this tool do, and who does it do that for?
11:25
First, it was important for us to understand what kind of content blocking actually exists already. The landscape of browser-based content blocking is pretty big, pretty crowded, which is a good thing. We think that should be the case. This would have looked very different 10 years ago.
11:42
So we've got ad blockers, where the goal is to deliver a cleaner end-user experience without ads. We've got privacy, where the goal is to have less tracking of your personal web browsing behavior. We've got security, where the goal of these tools is preventing malware.
12:04
And we've got reducing cruft, which is sort of a more efficient experience, making, for example, just faster load times and, yeah, loading unnecessary scripts. Something like Privacy Badger is in a very different space from NoScript.
12:22
NoScript is kind of alone in this area of it helps with security and also just helps make a more efficient browsing experience. Once we realized that was what it was doing, as opposed to a lot of the other things people might conflate it with if they didn't know too much about it, we put together three different personas. And these personas are like aggregates of people that we talk to.
12:44
The reason we're not using actual people? Well, first of all, we promised them confidentiality. This lets us aggregate the data and protect the actual details of the folks we talk to. Some of them work in rather sensitive places. But also it gives us an idea of the kinds of people who might somehow be attracted to NoScript.
13:01
We didn't include anything for NoScript, what's that, I don't even care, everybody can see everything. Like that's just, that's not relevant here. So starting with Rose, the super user. Rose is somebody who uses NoScript because it makes her feel safe online and not using NoScript makes her feel exposed online.
13:21
She's a security trainer as well and recommends NoScript selectively to people who can cope with having this much control. For many people she says it's just too interactive, it's too much. Emil, the privacy advocate, what about his use of NoScript? He advocates tirelessly for NoScript.
13:41
He tells everybody to use NoScript, but he does not use it all the time himself. He does not use it if pages break too frequently. He turns it off and then leaves it off for a while. And he really, really wishes it were easier to use because he's going around telling everybody else to use it. He knows it's the best. His words.
14:01
Next. Chris the Curious. Chris the Curious is kind of generally paranoid, does not trust big tech. Really does not like the idea that he's being tracked online. Really does not like seeing ads. However, he tried NoScript once. He could not figure it out and he uninstalled it.
14:22
He would love NoScript to decide which scripts are unsafe and block them automatically. He doesn't like having to make this decision every time a page loads. So, who do we prioritize? It might be important to know that NoScript is never, ever going to provide a block list.
14:43
That's just not something this tool does. NoScript is absolutely not interested in collecting user data and really not interested in using any kind of machine learning on aggregated data to be smart. NoScript is going to be dumb. NoScript, that's part of its DNA and will always be the case.
15:01
So, who is NoScript for? NoScript is for Rose the super user. It's not for everybody, and we made the decision fairly early on to deprioritize these other users. Next. So, what is NoScript really doing for whom?
15:20
It keeps you safe. Nah, not really, not if you don't know how to use it. What about NoScript makes safe browsing easy for everyone? For those other two personas, probably NoScript is not actually the way to keep them the safest because of their knowledge and behaviour. Next. Does it make safe browsing easy for power users? No, I wouldn't say NoScript makes anything easy.
15:43
What does NoScript do? It buys power users time to make informed decisions about who they trust. We really need to know this in order to do a good job designing it. So, NoScript is a tool for power users, it's a tool for creating friction rather than removing friction. It is strict by default, and it is a tool that you have to interact with every time from the beginning.
16:06
It's not a set-and-forget kind of tool. This makes it basically the Sven Marcart of content blocking.
16:27
Mic is off. Switch mics? Should we switch mics?
16:40
We have another microphone ready, I think.
17:06
It's number two. Yes. Wonderful. Thank you so much. So, now that we know who NoScript is for, our next step in this process was saying, well, asking the question, what does rows the power user actually need?
17:22
And this part, you know, it's kind of funny. People always think, oh, it's a power user, so, transparency, we need to know all the things. Information needs to be there and visible. Customisability. All the things need to be able to be changed, right, because we have a power user here. Well, that may be true, but it's really no excuse for this.
17:44
This is what our friend Susan Farrell would call a pile of knobs, right? When I'm trying to configure something, I don't want to be confronted with a pile of knobs. Let's just take this idea of customisability kind of to the logical conclusion which is
18:03
offer everybody all the options. Well, let's think about what these options are. So here's what a person needs to understand, a power user needs to understand to use NoScript, right? Look at those red words. Those are the things, the elements of this tool.
18:22
When you visit a site, it can load a script. These scripts can be from the site you visit or from a different source. We call these different sources the script owner. That's number three. With NoScript, you can decide on what gets loaded into your browser. You can block or allow scripts.
18:41
Deciding about what to block, how to block it, that requires a lot of knowledge about scripts and their owners. So, you have three kind of base elements, and then you have two action verbs on top of that. And then you have a bunch of background knowledge. So, let's say we're visiting the New York Times.
19:00
This is actually from the New York Times. I picked out seven scripts that you could actually load into your browser when you visit the New York Times. You can see there's newyorktimes.com, static01.newyorktimes.com. Could we just show, yeah, that's the first-party scripts, right? So, scripts actually owned by New York Times.
19:23
Note that, you know, nyt.com is also owned by New York Times, but the URL is actually not exactly the same one, right? And then we have some Google products. We have news.google.com. We have googletagmanager.com, again, not the same URL. And some people might know that DoubleClick is also owned by Google, right?
19:42
So, that's all the Google infrastructure you see. But then there are also types of script. You know that the first three might probably be content. And then, after that, we probably have some trackers. DoubleClick is definitely an ad-serving script, and Optimizely does A-B testing. Again, things you could know if you looked it all up, but you wouldn't actually know it if you're just looking at the interface.
20:06
All right, that's the background knowledge we all need. But then there's also different ways of, like, thinking about scripts, right? NoScript itself comes with eight different types of script, right? It categorizes normal JavaScript, and then you have all the media contents, the video and audio files, object, frame, font, WebGL, fetch, other.
20:25
These are all the different types of scripts you can actually load into your browser. Well, and not all of the script owners might have them, right? So, perhaps you want to say, oh, I kind of want to block scripts from news.google.com, and WebGL coming from New York Times.com, whatever.
20:41
I have all the options. Now, if you think about these eight different types of scripts, and let's say you have N scripts on a site, you actually have eight N options, right? That's a matrix. That's a matrix of eight N options. And, in fact, if you think about the possible combinations of those, again, taking block and unblock as, like, the two dimensions you can work in,
21:01
you have two to the power of eight N. That's like all the different combinations you can have of blocking scripts. Again, New York Times doesn't have just seven scripts, it has 27. So you have 260 options just going on a site. That's not what we want to be confronted with.
21:21
Of course, some of these options are going to be more salient than the others, so maybe I only want to block everything coming from news.google.com, maybe I only want to block frames, maybe I only want to block things that are not first-party or affiliated, maybe I want to block or allow everything or nothing because I trust New York Times completely.
21:41
Like, there are many different ways to carve out this logical space, and it's not clear at all, you know, what are the most salient ways to do that. All right, on top of that, it's not just blocking and non-blocking, right? We have, we can do blocking by location. We can have blocking for this tab, for this whole window.
22:03
We can have blocking time-based blocking, right, for this session only, for the next five minutes, for this week, forever. We can have other things, like it's on my work device, so I'm going to block, I'm going to be a little bit more, you know, careful about what I allow on my work device. Or perhaps I want to say only these sites get blocked with those scripts, and those sites, you know, I don't care about.
22:29
Possible too. So before you know it, you're just visiting a site, and you're just like trying to see some content, and before you know it, you're playing a game of set, right? I don't know how many of you know the mathematical game, but it's like you're calculating five, six, seven different dimensions of blocking,
22:45
and really what you want is you just want to see the site. And that's not even fair to our power user. So what we did here, instead of thinking about possible options, is we started thinking about scenarios, scenarios of using a tool like NoScript.
23:01
So we identified five different scenarios for when NoScript could come into play. One is normal browsing, so you're just, again, reading a new site. One we call quick browsing. So, you know, say you're making a payment online, and things have to happen right this second, and everything just has to work, you don't care about scripts or whatever. The other one being we call dirty browsing, right?
23:22
You're visiting a streaming site, and you know everything on that site is going to be really, really evil, so you just want to like be most careful about everything. Social media use, right? So there is a case where, let's say, you want to block Facebook on all the sites you visit, except for, of course, when you are visiting facebook.com, where you need content from facebook.com, right?
23:42
So kind of like a site-based blocking scenario. And then the last one is visualisation itself. This is also something we found out from user research, so a lot of people use NoScript just to see how many scripts are on a site. So, no script, that's something we didn't know before, and we realised that, oh, actually, the visualisation component is just as important as the blocking function.
24:07
Now, based on those scenarios, you can kind of think about different task flows. So this is how NoScript wants you to use the tool. You go to a site. Does the site work? Yes, yay, awesome.
24:22
No, it does not work. Okay, well, you have to enable individual scripts. Start with one, go with another, reload, see if it works, does it work, doesn't work, try it again. Of course, what most people do is either they say, well, whatever, I really trust this site, just load everything, YOLO, it will be fine.
24:44
Or they go to the other extreme, which is I never wanted to see this site anyway, I'm just going to close it. So, basically, kind of a defeat position, right? Another thing we found out in our user research is that people actually have a shortcut, which is trust affiliated scripts, and you hope it works.
25:05
So when I say affiliated, I mean kind of everything that's first-party-ish, right? Can we just go back one, and I want to say, nowhere in this process, right, do you actually appreciate NoScript, because when a site works, you say, yay, good site, no weird JavaScript stuff.
25:25
And when it doesn't work, you say, NoScript is blocking everything. NoScript interaction is by default frustration, right? There's just no way around it. It's always going to bad, like damn you NoScript, and thank you NoScript, but damn you NoScript, right?
25:40
There's always going to be that feeling, and how can we design something that makes the feeling just a little bit less awful? Well, we tried. So if you look at the old UI, it has a bit, you know, you have the list of scripts, and then you have the options to the left,
26:02
and then on the top right corner, you kind of have like quicker global options, but they're not very prominent because really, you know, NoScript doesn't want you to do all that. So, what we did is, ta-da, new UI has a couple of things that we added.
26:22
So, first of all, we want to appreciate the kind of quick and dirty scenarios, right? So we have the quick and dirty options. Allow affiliated scripts just means allow first-party scripts, and if you have some affiliated scripts that you have saved before, you can do that. Fine-tuning happens in the second part, right?
26:41
There are script settings. You can still see all of the scripts that are loaded here. You can configure the scope. This is something we wanted to do and wanted to make more visible. We have a new feature for site settings. So that means you can save settings for a site that you're visiting. So the whole scenario we were talking about, about Facebook, that's possible now.
27:04
You can save specific settings for a site that you visit, especially those sites you visit frequently. We wanted to keep the panic button, the power button on the bottom left, because it felt like people sometimes just get too frustrated and wanted to quit everything,
27:23
so panic button is there if you need it. So that's kind of the core of what we did. We really thought about what are the options, what are the tasks, and what are the things that people really needed to do. But then we also looked at the interface and realised that a lot of the confusion
27:44
just came from the visuals and the words that were being used in the old interface. So, first of all, I should say that's a very common problem. A lot of software has that, right? There's a lot of technical jargon, inconsistent use of language,
28:01
super ambiguous icons, this is from a classic Apple design, you have a little bomb and next to it you say, sorry, bomb, sorry. So what's the message here? It's very unclear. So these are all things that we see in a lot of projects, and, again, NoScript is no exception.
28:21
But I want to point to some specific and I find interesting issues that we came across with NoScript's interface language. The first one is colours. So, here's a design question. Should blocking be green? Good, do that, go, right?
28:41
Or should it be red, which we associate with bad, don't do that, stop. Well, if you go with the intuitive gloss, it should be, let me go back one. It should be go is green, right?
29:00
So allow is green. Stop is red, block is red, right? Go, stop, allow, block. If you think about scripts, though, well, good scripts, you want to allow. Bad scripts, you want to block. Okay, I guess block should be red maybe.
29:21
NoScript also wants to recommend usage. A good security practice means block everything. Don't allow anything. Bad security practice means, well, allowing everything. And now you're in the position where block is red for some people, and green for other people.
29:41
And that's just not a good place to be when you're trying to use colours here, right? It's only going to confuse people. No matter what you think the colour means, people will always think it means something else. And so here's a situation where we said, okay, we don't want the red-green combination at all because that's only going to confuse people.
30:01
I should also say, of course, colour shouldn't be the only indicator when you're designing things, right? We want to make things accessible, so colour is always going to be used with caution when you're designing things. The other thing that we found with the language is also really interesting. So a lot of interface language had double negatives in it.
30:25
So something like disable restrictions globally. And that really, that's what I mean with the mental model, right? You're computing again. Disable restrictions globally. So they're restrictions first, which is already kind of a negation, and then you can enable or disable them.
30:42
Okay, so you have to kind of do two logical operators there. Okay, well, that just requires some thinking. But then there's also technical and social concepts that kind of get conflated. I was talking up until now about blocking and allowing, but no scripts interface actually uses trusted and untrusted.
31:02
And again, this is the same issue, right? Actually, there's the blocking and allowing on the technical level, and the social thing is the trusting and not trusting something. And the question here is, well, if I'm allowing something, do I really mean that I trust it? Maybe, maybe not. But maybe I just need to allow it for now because I need to make an online payment.
31:22
Why are you making me feel bad? So there's a lot of technical and social things that may or may not overlap, and sometimes, especially when you're designing for power users, it's probably better to just stick to the technical concept. The last thing I want to mention here is the tone.
31:41
This is something we found out in the user research. So again, we're looking at disable restrictions globally, parenthesis, dangerous. Now, this novice user we had just installed no script, and they looked at us and were like, well, five minutes ago, I was browsing without it. Putting dangerous here makes it sound like it's life-threatening.
32:02
Yes. You want to be apparent sometimes, but sometimes you've just got to let people do their own thing. So what we did instead, we changed the tone. We wanted to keep this idea of no script is making security recommendation
32:22
and is also sufficiently warning you when you are in a bad place, but we wanted to do it a little bit more tongue-in-cheekly. It was supposed to be, it's not, don't do this, you're in a dangerous territory, but no script is turned off. Good luck. You're on your own here.
32:46
So, yes, I think that concludes my part about language. So, if you would like to do any of these things for any project that you were working on, no matter how logically inconsistent or complex or power user-driven that tool might be,
33:06
we want to provide you tools so that you can also go through a design process and hopefully make that tool that you have poured so much energy into the community, the development, actually make sense to the people that you need it, that you not just want but like need it to make sense to.
33:23
We have put together a lot of different templates, resources, methods that you can use, and in the spirit of FOSS, we want to put it online, make it available for free. So, this is a persona template that we've developed that's particularly geared around privacy, security,
33:41
and human rights protecting technology. That's on our website. There's also another template that is geared towards tech tools, but not necessarily privacy and security. What you put in a persona does kind of depend on the sort of tool that you're designing, so we have a few different templates. Another thing that we have, that we've posted is a value proposition generator.
34:03
I know the word value proposition sounds really business-y. Really what this means is what does your thing do and for whom does it do that? It can't do all of the things for all of the people that doesn't exist. What are you actually trying to do and who is it for? And this can help you focus, prioritize, and make sense of all the like constant feedback,
34:23
feature requests, whatever that you are, I'm sure, getting. And you know what? There's a lot more, but we're not going to use the talk time to walk you through all of them because, first of all, you can ask us, and also, we hope some of it's self-explanatory. This is the website, simplysecure.org slash UX minus starter minus pack,
34:43
and we'll also be, I'm sure, adding to it in the next few days as well. Remember, there is no such thing as not doing design. You can't say, no, no, no, we don't do design. Whatever decisions you're making are design decisions, so make them with some kind of system, make them with some kind of method.
35:02
We also wanted to be transparent about how much this costs. We really like the human-centered design process that we use because it can be really lightweight and really cheap and available to a lot of people. We don't think you should have to hire a fancy-ass design agency to do this, but this was not easy. This took some time, and here's what it took.
35:21
About one month of full-time work for two people, Eileen and Lorraine. I helped two, so maybe a month, a month and a half. Lorraine is a visual designer. The UI and the icon that you saw, that was Lorraine's work. I'm not a designer. Eileen's not a designer, so don't you be saying, I'm not a designer, I can't do this.
35:41
Additional costs, we use the tools we use. Sketch is a, we use that for making, drawing wireframes that's like a vector drawing software. Whimsical, we used for online collaborating on wireframes. Notion, we used, Whimsical was also for collecting all of these sticky notes. We tried some open source tools, they did not have the features that we needed for this project.
36:03
So, hi, somebody please make an open source tool that has the features that Whimsical has. We would love it, we would use it, and we would talk about it all the time. Notion, we used for our internal collaboration. Jitsi, we used for remote user testing and also internal collaboration. And tons of paper sticky notes, those are not cheap.
36:22
There's also research compensation. We thought it was really important to at least offer compensation to everybody who helped us. A lot of people did choose to donate that, given the nature of the project. But we, it's really important to us that we were able to offer that. Well, I should also say this work was not possible without the support of the Open Technology Fund.
36:42
But more than anybody else, we need to thank Giorgio for letting us play around with NoScript. It's really hard when you've been working on a tool for 14 years, and it's your baby, and just to give it to someone else for like a month and a half to work on.
37:05
That's really hard, and thank you so much for being open and letting us play around with it. This presentation is dedicated to you, thank you Giorgio. And, yes, I think that's it. So we're going to be here the rest of the week. If you have any questions about design, about this work, or about our work in general, just ping us.
37:25
We will help you with design, whatever that means to you, whatever that means to your project.
37:41
Thanks so much already Eileen and Molly. We have a couple of minutes left for questions. So if you have a question for either one or both of them, please come to one of the microphone angels at the front or in the back and ask your question. I think we will start with the lovely person in front. Thank you. Thank you so much for the presentation.
38:02
I was just wondering, because I feel like lots of people's first interactions with NoScript came through using Tor. So I was like, at what point in the process do you think about sort of how different tools interact with each other, and do you have to create like a special persona for that, or how does that go?
38:21
For control in general, or for? For like tools that interact with each other, for example, NoScript and Tor. Right, because it's, yeah. So that was super important because we know that. Can we restate the question? Was that in the microphone? Was the question captured? Yes.
38:40
So Tor, that's a really good question, because a lot of NoScript users are involuntary NoScript users because they're using Tor. We started the whole process by actually interviewing people on the Tor design team. Shout out to the Tor design team. Awesome work, by the way.
39:00
Yes, exactly. So we interviewed them, and we talked about some of the issues that might come up. There is a whole project that is integrating NoScript into Tor, and they're actually thinking about not showcasing any of the UI at all, which I think is a totally reasonable, you know, solution to the thing.
39:21
You're going into the background settings and changing, you know, very detailed things. Maybe things are going to be different depending on the new UI and how it's implemented, but, yeah, that's going to be a real project. In general, you absolutely should find out what other tools fit in people's work flow, right? You want to ask people what browser they're using, you want to find out what OS they're using, and if you find that there's a huge chunk
39:47
of people who use Chrome, then you need to take that into account how it interacts with the other Chrome extensions they're likely to use it with. I would absolutely work that into a persona. All right, then let's just continue with the question from the front.
40:03
So, this is a technical question. In the UI, I saw allow affiliated sites button. How does that work without any lists, because, for example, the static 01. New York Times isn't really connected to the New York Times domain.
40:24
How does that work? Yes, that's a good question, and a nice catch. So, what we're going to do is by default, affiliated scripts are first -party scripts, so those things that you can definitely read based on the domain. For the other ones, you can't do it automatically, so what we're going to do is most
40:42
likely offer some background, so when you install the next NoScript, it's going to have the affiliated scripts of the ten most-visited sites so that people have less breakage on very basic browsing experiences. For the rest of them, what we have imagined is actually people being able to import and export their own settings a lot, so when you
41:06
actually do want to mark something as an affiliated script, you can share that with a wider community of people, so there is that feature built in. The rest of it is all by hand. As we said, NoScript is not a smart tool. It just does what you tell it to do, and it does it reliably.
41:21
Yes. I was also interested what site-specific actually means. Probably the same. Yes, related to subdomains and so on. Right, so subdomains of the site, you mean? Okay, because I think there's also another question about the site-specific scripts that are blocked or not blocked, right?
41:46
So another way of looking at affiliated scripts is also this is the kind of profile of scripts that I want to allow or block whenever I visit a site, so that's kind of a different but related feature. So, another question.
42:03
You actually had it on the list of related projects, Umatrix. I think it actually fits in a kind of similar niche as NoScript does. Have you evaluated how their user interface is? I mean, it's probably the matrix of a thousand switches that you were mentioning, but, to me, it's actually the one I use,
42:27
and have you checked how you could integrate maybe something like that into NoScript? Yes, you're absolutely right. I think the matrix is what got me thinking about the matrix to begin with, right? Like the 8N options I was mentioning before.
42:42
It is super interesting. There are totally similar extensions. I think NoScript does a couple more things than Umatrix, but, in general, they're the same category of script blockers. To me, the takeaway for me was that our job wasn't to evaluate Umatrix, but to me, the
43:03
takeaway was that was actually a little bit too fine-grained for most people, even for power users. Sorry, I was very unspecific with my question. I meant the new feature that you added to save for the site, what would you call that?
43:23
Per-site settings. Per-site settings, yes, what it actually means in terms of a URL, or something. Is it like the top-level domain, sub-level domain, or is it like the full path of the URL? I think right now it's a full path of the URL, so whenever I'm on
43:43
Facebook.com, or any subdomain of Facebook.com, things are going to be implemented, yes. So yes for subdomains. These are things that probably, like some of the default options, we're going to leave up to Giorgio to make the decision on that.
44:01
The funny story behind that, if I can comment on this, is this whole feature is supported by the backend, and has been for a long time. The only reason it wasn't implemented was because Giorgio couldn't figure out what the UI should look like, given how complicated everything else already is. So this is something we were really excited that we were able to implement.
44:23
Okay, I think if we hurry up, we have time for one more question in the back. You mentioned the colour, and I was wondering, of course there are colour-blind people that have a disadvantage if you use colour for your design, but then there's a whole bunch of people that greatly benefit from colours.
44:42
And I was wondering if you have some sort of rule of thumb that you use, for example I don't use colours at all, it's probably not what it is, but maybe there's something like, if I use colours, I also use tool X or Y. You always want to be showing necessary information with colour in one other dimension.
45:02
That can be like positioning, that can be words, that can be icons, you just need to make sure that colour is not doing all of the weight. You don't want, for example, to click on a red circle or click on a green circle. Because people don't have the like, in real life we know that in a traffic light,
45:21
if the top thing is lit up it's probably red, if the bottom thing it's probably green. The interface is new, they've not seen it before, they don't know that the left thing is going to be okay and the right thing is going to be cancelled or the other way around. Oh my god, apps are always switching where okay is versus cancel, where yes is versus no. So just, colour is great, do use colour and usually green for yes, red for no. That didn't quite work in no script because the yes and the no, the bad and the
45:43
good, the good and evil, the trust and block, like that just didn't, it didn't match up. So we actually didn't use this red-green pairing anywhere. You should feel free to use red-green pairings only when you're sure it makes sense, and always use also text or an icon. Alright, that concludes the talk.
46:03
So thanks again, Eileen and Molly for the super interesting talk. And I'm sure a bunch of people are going to give no script another try once they see the new UI. Thanks.