Key concepts from Behavioural Economics every UX designer should know

Behavioural Economics is the combination of traditional economics and psychology. It takes into consideration the human factor — human needs, desires and weaknesses. (Sound familiar designers?) Traditional economics ignores this critical part of the equation, but this would be like ignoring air resistance or friction in a basic physics class. They use a 100% rational, constantly optimizing ideal of a human, referred to as “Homo Economicus” by Richard Thaler.

But alas, the Homo Economicus is but an economists fantasy and we humans are in fact irrational beings. We do not always behave logically, and people do not constantly optimize or use our digital services in a predictable way. Designing the perfect user interface may be possible in theory, but we have to remember that we design for humans, with human factors.

Behavioural Economics has some interesting insights to offer for us designers around how our users irrationally live, make decisions and purchase products. Here are a few concepts you should know:

Behavioral Economics:

The study of psychology as it relates to the economic decision-making processes of individuals and institutions (investopedia).

Me! No! Yes! No? No. I wish.

Homo Economicus:

People with a perfect rationality. The term Homo Economicus, or economic man, is the portrayal of humans as agents who are consistently rational and narrowly self-interested, who pursue their subjectively-defined ends optimally. In other words: a person who always thinks in an optimal economic way.

The human mind has a tendency to think in the desires of the moment, not always on what is coming up ahead and rational needs. Money is “fungible”. This means that you do not go around labeling money for different needs and purposes. Money is just money. However, many studies have shown that we do treat money from different sources differently. For instance,; we value money earned more than money we win or find on the street. For example, take my case, birthday money! If I get money for my birthday, and I’m 31 years old, I save it for something special. I never touch it unless I know that I am going to buy something special with it, even if I needed the money right then and there. I would rather use my credit card, than use my birthday cash on something as necessary as food.

Ah.. the swear jar.. always full, aren't you! Can’t use that to pay the rent.. thats for.. swearing?

Mental accounting:

Treating money differently depending on where it comes from, rather than treating it all the same.

There are various interconnecting terms and principles between UX design and Behavioural Economics. For instance, social norming. Whether we like it or not, we all follow social norms to some extent. We do not want to differentiate ourselves from others, especially not those we identify with. This comes from a basic instinct, like the response to run, when we see others run (there might be a tiger!). This is used in both design and sales, with ads like: “other people who bought this also bought this” etc.

Social norming:

The urge to follow and do what other people you identify with do.

“Nudging” is perhaps the most known term from Behavioural Economics and is used in design today. Nudging is described as “A loving, gentle push in the right direction” by the Danish nudge unit. Nudging is using what we know from Behavioural Science, and cognitive biases to influence users to take choices that are good for them. But it can also be used in reverse. If the nudge is used for a company’s own gains, it’s called a sludge. Nudging is nothing new. Commercials have tried to sell us things for years, but in later years, governments have established nudge-units around the world to try and impact the population in a positive way for the greater good. An example of a good use of nudging can be found in Canada. Government Services’ Behavioural Insights Unit in Canada, managed to increase the percent of people willing to donate their organs after their death by 143% after using nudging on the registration form patients are given in the health service center.

The methods used were:

Providing different versions of the organ donor registration form (different wording)

Changing the timing of when the form was handed out

Offering additional donor information to help people make their decision.

Nudging:

“A nudge is a concept in behavioral science, political theory and behavioral economics which proposes positive reinforcement and indirect suggestions as ways to influence the behavior and decision making of groups or individuals”



— Richard Thaler, Cass Sunstein

Did you find this interesting and want to dive a bit deeper? Check out the links below to either a really fun podcast, or a couple of really good books.

I can recommend the books, misbehaving and nudge by Richard Thaler. I would also recommend that you to listen to the podcast freakonomics, and, if you want, also read the book freakonomics by Stephen J. Dubner and Steven Levitt.

Thanks!

Thanks so much to Sonja for your valuable insights and strict eye for grammar! Thanks to Eivind Mangset for inspiration and sparring with me on this post, and thanks Hamy Nguyen for the sketch of me that sparked the inspiration for the illustrations.

An intro to Behavioural Economics by a UX designer

As we discussed in a previous article, one of the things we can do with a function is to call it with fewer arguments than it is expecting. This will result in a new function where the arguments we did provide are bound to values, and the remaining arguments are still expected as parameters. Since we apply the function to only some of its arguments, we call this technique partial application.

Let's see how this works in Elm:

Currying

It might surprise you that we are able to call the function add with only one argument. But, in fact, it is possible to turn a function of any number of arguments into a function of only one by using a process called currying.

Say we have this little JavaScript function:

We can't just simply partially apply this function. In JavaScript you need to provide all the arguments when applying a function. However, we might define this function instead:

By using currying, we can convert add into curriedAdd. And this process will work with functions of any number of arguments. And with this new function, we're free to do things like this again:

But why didn't we have to do this in Elm? That's because in Elm, like many other functional programming languages, functions are curried by default. This means that all functions can easily be partially applied! And that's also why the type signature we saw in the first example looks like this:

A different way to read this type is like this:

So, as you see, add is in fact a function which takes only one argument (a number) and returns a function (with the type number -> number).

Why is this useful?

The incrementByFive example above is obviously quite contrived. But you'd be surprised how often partial application turns out to be useful when writing code in a functional language.

This often occurs when we're using functions like map or filter. These functions expects an argument which is a function that can be applied to every element of a list, and which must thus take exactly one argument. It is often convenient to create this function by using partial application.

Here are a couple of examples, again using Elm.

Both Maybe.withDefault and String.startsWith expect to get two arguments, but by only applying them partially we get exactly what we need.

As another example, say we have a function with the following type signature in our Elm application.

The function requires a configuration type and a message. Depending on the configuration, the message might be logged to a backend service or maybe to the browser console. To specify the configuration everywhere we need to log something would be rather cumbersome. Instead we can just partially apply log to the configuration once, and use the resulting function in the rest of the application!

The more used you get to functional programming, the more places you will find where a partially applied function is exactly what you need.

Schönfinkeli-what-now?

The name currying is a reference to the American logician Haskell Brooks Curry. (If the name sounds familiar, that's no coincidence: Mr. Curry is quite popular among computer scientists, and has in fact three languages named after him: Haskell, Brook and Curry…)

However, he was not the one to first discover the technique of currying. The Russian logician and mathematician Moses Ilyich Schönfinkel had already described the concept previously, and was in fact also attributed by Curry for doing so. So, maybe we should start to refer to it as schönfinkelisation instead?

Schönfinkelisation and Partial Application

In this article, we will look into async-await. Let's start with async functions.

From MDN:

The async function declaration defines an asynchronous function, which returns an AsyncFunction object. An asynchronous function is a function which operates asynchronously via the event loop, using an implicit Promise to return its result. But the syntax and structure of your code using async functions is much more like using standard synchronous functions.

You can use the async keyword when implementing a function:

Or with arrow functions:

All async functions will always return a Promise. However, the await keyword allows you to wait for a promise to be resolved. Let's begin with a simple example:

The code await addOne(1) will wait until the promise is resolved and return the 2, similar to:

The await keyword can't be used at top level code, yet, or in functions without async. Together async and await provide a great framework to write asynchronous code that is easy to understand.

Case

Let's say; you are creating a webpage that allows users to sign documents. However, the documents need to be ready before the user can sign them. The webpage calls an endpoint that returns the current status of the document. Either true or false. If the API doesn't return true within 30 seconds after loading the webpage, the user should be redirected to an error page.

How would you solve this using async-await? The first thing we need is a function that calls the API:

This function waits 5 seconds before calling the API. Let's move on to the async function:

By making this function async, we solve the problem. The function waitAndCheck will only call the check function 6 times and will not execute longer than 30 seconds. This case could have been solved several ways, for example, we could chain check() like this:

That's all! I hope this inspires you to use async-await.

Disclaimer: The code in this article is just for making a point, not something to copy

A brief look at async-await

Grouped assertions

Assertions in general haven’t changed too much from JUnit 4 to JUnit 5, but there are some changes. Most of the old assertion methods have been kept, and some new ones have been added. In addition to a few new methods, lambdas can now be used with assertions.

A really cool feature is the ability to group assertions together. Remember in JUnit 4 when you fixed a failing test because of a wrong assertion, only to find out that the next assertion also failed on the following test run? Yeah, no need to be annoyed by such simple things anymore. Enter, grouped assertions:

All assertions in the above test are executed, and you’ll be notified of failures from all failing assertions simultaneously.

Nested tests

The ability to have nested tests opens up a whole new field of play when it comes to grouping tests that belong together. Combine this with different display name generators (introduced below) and you have a powerful tool to write tests that are simple to read and understand the intent of.

The output of these tests look like the following in IntelliJ. Here we have combined nested tests with a parameterized test:

Giving your tests display names

Giving your tests sensible names that are easy to read can be a bit of a hassle. JUnit 5 comes with the @DisplayName annotation, to give you a simple way to give your tests pretty names. If that's not enough for you, JUnit 5 comes with a DisplayNameGenerator that replaces all underscores from your test method’s name, which is handy enough in a lot of cases. If you still think that your tests need prettier names, just write your own DisplayNameGenerator and voilá: Your test names no longer require deciphering.

Oh, and you can use emojis in your test display names! 🥳

You can check out the JUnit 5 User Guide for an example of a homemade DisplayNameGenerator: IndicativeSentences.

Happy testing!

If you want more handy JUnit 5 tips, be sure to check out:

Get started with JUnit 5

Useful new features in JUnit 5

Wouldn’t it be sweet to be able to test your application straight in production? Not having to wait 20 min to redeploy and roll out your new features? ⏱

With LaunchDarkly you can do just that!!💥

LaunchDarkly is a service for adding feature toggles to your code. It lets you turn features on or off without having to re-deploy everytime you want to turn a feature on or off in your production- / test- or QA-environment.

This kind of functionality can be very useful if you would like to add new features to your apps and would like to control them after deployment. LaunchDarkly provides a mechanism for non-technical people to manage the behavior of your running apps and services.

With this kind of service you get more control over the whole process if something does not go according to plan, e.g. feature does not behave or work as intended. If this were the case, you would not have to redeploy, simply turn off the feature.

Using LaunchDarkly you can set a feature, or for that matter an entire app, to be rolled out to either a specific set of users or just users that meet a certain requirement. In addition to this, feature flags can also be configured to only be available to user with a certain kind of email-domain. You are also able to expose a new feature to only 20 % of your users if you want to test your work with a small portion of your users.

Great✔, but what if the SDK goes down?

LaunchDarkly is often consumed by an SDK - but what happanes when it goes down? When the SDK initializes, it opens a streaming connection to LaunchDarkly. The response contains the SDK’s current state, which the SDK uses to determine wheter the flag needs to be changed.

If the SDK loses connectivity to LaunchDarkly, it will repeatedly try to establish a streaming connection until it succeeds. If you change the value of the flag before the SDK receives its initial state, or you try to fetch a flag which otherwise doesn’t exist, then the SDK returns a fallback value you can specify in the flag’s settings.

Setting up an account 📋

To get started make sure you have a valid LaunchDarkly account (you can start a trial if you haven’t done so already).



First go to the projects section: https://app.launchdarkly.com/settings/projects



Click on the “New Project” button, name it “LD React”



In the LD React project section click the “New Environment” button



Copy the Client Side ID



Paste the Client Side ID in the withTogglesProvider component configuration object where, replace the string that reads “{REPLACE WITH LD CLIENT SIDE ID}” with the real value for development purposes



Make sure you have the box: “make this flag available for the Client SDK” checked, by enabling the option below



Now you are basically done configuring LaunchDarkly and you are ready to start implementing your toggles in your own React application

Make your first feature flag 🚩

To get started, spin up an empty project with create-react-app. Head over to the quickstart which takes you through the initial steps to create a feature flag.

Now install LaunchDarkly SDK by running npm install — save launchdarkly-react-client-sdk@2.14.0in the terminal.

Since LD also support hooks we will do an example with that. But first… a small introduction to useFlags.

useFlags is a custom hook which returns all feature flags. It uses the useContext primitive to access the LaunchDarkly context set up by asyncWithLDProvider or withLDProvider. You will still need to use the asyncWithLDProvider or the withLDProvider higher-order component at the root of your application to initialize the React SDK and populate the context with LDClientLDClient and your flags.

useLDClient is the second custom hook which returns the underlying LaunchDarkly JavaScript SDK client object. Like the useFlags custom hook, useLDClient also uses the useContext primitive to access the LaunchDarkly context set up by asyncWithLDProvider or withLDProvider. You will still need to use the asyncWithLDProvider or the withLDProvider higher-order component to initialize the React SDK to use this custom hook.

In our create-react-app head over to App.js and import useFlag:

Next change is to change the export default to use your environment-specific client ID and a sample user:

Now create a new file, e.g. helloWorld.js, in the same directory as App.jsand import React and useFlags and useLDClientlike this:

Create the HelloWorld component that gets passed the state of the flag and returns an element based on the state of our feature flag.

At this point, make sure you have a flag called dev-test-flag in your project. Make sure you make it available for the client side js sdk.

Finally, go back to App.js and import the HelloWorld component:

Where to go next

Aside from feature flags, LaunchDarkly also provides support for A/B testing and tracking goals.

Being able to display certain info/features for specific groups and then getting analytics on user interactions is super useful. This kind of fuctionality may also be useful if you want to know how much traffic is hitting your feature flag.

How are we using LaunchDarkly?

At our customer, we are using this to save tons of hours by not having to re-deploy for every feature we want to toggle. It will also make it easier to do such things as acceptance testing straight in production with the product owner, bypassing the need for manual verification in a QA environment first.

Test your applications in production

How words are broken when lines overflow their containers is not always trivial and can cause many a headaches. Hyphens is a CSS property used to help with this, but how does it actually work and what can it do for us?

A hyphen (-) is a punctuation mark used to join words or separate syllables within a word. The latter comes in handy when a word is just too long, and we need to break it into smaller pieces. In CSS, we control it with the property hyphens.

Hyphens has three possible values manual, auto and none, that specify how words should be hyphenated when they are too long for its parent container.

Manual

The initial value for hyphen is manual. When it is used we have to give the browser suggestions about where a word may be able to break. If we do not give any suggestions, a word to long for the box will overflow. By using special unicode characters inside a word, we can suggest line break opportunities for the browser. We have two line break characters.

U+2010 HYPHEN

This is the hard hyphen. It indicates a line break opportunity for the browser, but it will always render, even though the line is not broken. To insert it into our HTML, we can use &hyphen;, but it will have the same effect as hitting dash on your keyboard.

U+00AD SHY

The second option is the soft hyphen. It is not rendered visibly, but instead marks where the browser may hyphenate a word not fitting its container. Use &shy; in HTML, to insert a soft hyphen.

None

If none is used as value, words will no longer break when we use the soft hyphen &shy; to suggest line breaks. Lines will only wrap at whitespace or the hard hyphen, &hyphen;.

Auto

With the value auto, the browser identifies appropriate hyphenation points, where it will break the words. By specifying the language of an element, <p lang="en">, we can help the browser pick better points. Be aware that hyphenation points may vary with different browsers and languages. The browsers hyphenation points can be overridden with the line break character &shy;.

Snacks

If you are still not happy with how the browsers hyphenates your words, there is some extras snacks available. Here are four CSS properties introduced in CSS Text Module Level 4, that gives us almost an inDesign level of control.

Setting minimum length before and after an hyphen

hyphenate-limit-chars takes three values. The first sets the minimum length of a word that can be hyphenated. The second is the minimum amount of characters a word can have before the hyphenation. The third and finale value limits amount of characters after the hyphen. This can help in the case of the browser hyphenating short words in a manner which makes them hard to read.

Limiting consecutive hyphenated lines

hyphenate-limit-lines limits how many consecutive lines that the browser can hyphenate. If three or more consecutive lines are hyphenated, it forms what is called a ladder. In some languages, e.g. English, it is common to avoid ladders because of aesthetic reasons.

Avoid hyphenating the last line

hyphenate-limit-last can be given the value always to make the browser never hyphenate the last line. This is to avoid having a part of the word sitting alone on the last line.

Breaking Free

Hyphens is pretty simple to use when you combine auto with correct language to enhance your browsers hyphenation. If you also try to master it with the extra properties and line break characters, there's not a star in heaven
that you can't reach.

Hyphens - Breaker of Words

An extension functions is, as the name implies, a function that extends an existing class. The function does this without actually modifying it!

We also do not need to derive the class, by using a decorator pattern, like we would have to do in Java or any other language that does not support extensions.

Cool, right?

Naugthy or Nice

Let's take a look at an example. As we all know, Santa Claus keeps two lists to know who is naughty and who is nice. For this purpose he creates a data class that contains all the data on each child.

This class contains all the important parameters for Santa Claus to determine who is naugthy or nice, but not the actual logic to give him a consise answer to whom is what. Santa does not want to taint the pure data class with logic, so the logical solution to his problem is of course to extend the class.

Santa Claus can now easly sort all the children into their respective lists using the isNice() extension function. To know where to go and who he is visiting, he can call the getNameAndAddress() extension function to get a formated string with the info. Pretty neat!

Just to be clear, the syntax for extension functions is as follows: fun <Class>.<Name of extension>(<Parameters>): <Return type if any> {}

Statically resolved

One thing Santa does need to be aware of is that extension functions in Kotlin are dispatched statically. This means that the extension function that is being called is determined by the type of the expression on which the function is invoked, not by the type of the result of evaluating that expression at runtime. Let's take a closer look:

In the example above, Santa Claus has created a new class called Naughty, that implemets the Child-class from before. This example prints "Child", because the extension function being called depends only on the declared type of the parameter c, which is the Child class.

For more information on extension functions, have a look at the Kotlin docs.

Extension functions

Let's focus on "what", which I at least find the most difficult. Many questions arise: How can we pick code that our present organisation has spent time and money on and just give it out? What is actually interesting for others to see or use?

Where I now work as a consultant, Digipost, we try to find OSS opportunities and we want to open source as much as possible. Digipost is what it says on the tin: Digital mail. And organisations that send messages in Digipost can also send HTML documents. But accepting HTML documents and storing them for the rest of the receivers life in a secure fashion is not easy. There are all kinds of security issues. Because of that, Digipost is very strict with regards to structure and content of HTML files.

We use, of course, OSS to deal with this. More specifically owasp-java-html-sanitizer. This is a sanitizer that accept a PolicyFactory instance. This instance has all the rules that you specify to the sanitizer. These rules are quite verbose. And communicating these rules to a developer or designer that has no insight into all the quirks is very difficult.

So we decided to open source it. And here it is: digipost-html-validator

Now everyone can see our validation and sanitation policies!

There are several good aspects of this kind of sharing:

Everyone can check the rules

Everyone can execute the code with the HTML they create

We can plug this into our client library and validate and sanitate pre-encrypted messages (and so we did).

Better separation of concern in our code as well

You don't need to open source your whole code base. Just find a piece of code that has a clear purpose and does not contain your precious business logic or secrets. And do it.

How can you find code to open source?

Dette er del 6 av 6 kaffeprater om Smidig organisering. Hvordan erkjenne at du tok feil? Vi gjorde alt etter boka men det feilet likevel. Hva gjør man da?

Smidig organisering, del 6: Menneskesorientert kultur og hvordan lære av vaskemaskinstol-floppen?

If you've read yesterdays post about ZEIT Now, you've already seen one of many approaches to develop and deploy a serverless API. In this post we will have a look at an alternative you can use to develop serverless applications, namely Serverless Framework. Serverless Framework can be used to develop, deploy and test your serverless applications targeted towards different cloud providers, or as they describe themselves: "The complete solution for building & operating serverless applications." Let's have a look on what this framework is all about.

Serverless Framework is a node CLI tool which can be installed via npm by running npm install -g serverless. As mentioned the framework can be used against many different cloud providers. AWS, Azure and Google is supported, but also more "exotic" providers like Cloudflare Workers, OpenWhisk and Alibaba Cloud. In this post we will focus on how to use Serverless Framework on AWS.

Serverless Framework concepts

Serverless Framework has four main concepts which you should know before we look on some example code.

Service

You can think of this as an application or as a ... yeah, service. It typically consists of multiple functions (Lambda in our case) and different resources as databases, S3 buckets, API gateway and other managed services.

Functions

On AWS this is equivalent to AWS Lambda. A single piece of code deployed to AWS which triggers based on different kinds of events in the cloud ecosystem. In your service you can define multiple functions, and you can deploy and invoke them via the Serverless Framework CLI.

Events

Events are what trigger your functions you have defined in your service. On AWS this can be anything from a HTTP request from API Gateway, an image uploaded to a S3 bucket, a new entry in a DynamoDB table, a CloudWatch alert and lots more.

Resources

These are any resources which is needed by your service, and typically what your functions use. Typical resources may be a database like DynamoDB , S3 bucket or a SNS topic.

What does this look like in practice?

Below is an example of a service defined in a file called serverless.yml. The service is an API which you can use to create new christmas wishes, and return a list of all your wishes.

We start by defining the name for our service, wishlist. Then we define which provider we would like to use, aws, runtime for our functions, nodejs, and which region we would like our service to be deployed to, eu-central-1. The iamRoleStatements declares that our functions are allowed to query and add items to our DynamoDB table. The last block, resources, defines our DynamoDB table where our wishes are stored.

The functions block could do with a more detailed explanation.

Here we declare two functions. The wishlist function is a function that returns all wishes from our DynamoDB table. In the events block we define that this should trigger on a http GET request with the path /wishes. The newWish function will, as the name applies, create a new wish in our DynamoDB table. It triggers on a http POST request with the path /wishes. The actual code for the two functions is listed below.

List all wishes

Add new wish

So, how do we actually deploy our service to the cloud?

To deploy our service just run the command sls deploy. Serverless Framework will deploy all your functions and necessary infrastructure, and print the URL for your brand new serverless API at the bottom.

So what actually happend here? Under the hood, Serverless Framework creates a CloudFormation template and uploads that to AWS. CloudFormation will take this template and provision all of the necessary services, deploy the functions and link all the services nicely together. In our case the framework created a DynamoDB table, two functions and an API Gateway.

With just a small yaml file, two functions and some shell commands, you suddenly have an API which autoscales automatically and you only pay when the API is in use. I think that's pretty cool!

What's next?

This was only a simple example of what Serverless Framework can do for you when developing serverless applications. In addition to create more complex applications, the framework can be used to test your functions locally or trigger them directly in the cloud, and you can use the framework for accessing logs and other metrics. Serverless Framework also comes with a Dashboard which gives you a "A unified view of your Serverless applications, featuring monitoring, alerting, deployments & much more".

All in all, Serverless Framework is a nice alternative to use for developing serverless applications. It supports multiple cloud providers (although the support is limited on some of them) and comes with lots of plugins to help you speed up your development. It has some limitations, and yaml can be frustrating to debug some times, but I will absolutely recommend you to try it out if you're interested in developing serverless applications!

Serverless development with Serverless Framework

Is it straight forward to collect unbiased data for the average spending on Christmas gifts in Oslo? Did Nicolas Cage cause swimming pool drownings in US in 1999 to 2009? And how can your understanding of Bayesian probability help to prevent your doctor from erroneously removing your breasts? Read on to find out.

Statistics are the foundation for machine learning algorithms. In a world where we are bombarded by apparently conceivable statistics, being able to see through the faults that some of the facts and figures that statistics represent is more essential than ever.

###What is the average spending on Christmas gifts in Oslo?

Before performing any statistical analysis, it is essential to collect data from a sample of the population – as gathering data from the whole population in most cases would be impractical or too costly. However, it might be more difficult than we think to ensure that our sample is unbiased and representative.

Let’s say we want to conduct a survey on the spending on Christmas gifts in Oslo by using random passers-by outside Oslo Central Station. Are these people a representative sample for Oslo’s population? What about the people that are not passing by Oslo Central Station that day? What about the people that avoids your survey? What about the people that answers what he/she thinks you, as an interviewer, would like to hear? What about the people that adapt their answers to minimize the time spent answering the survey as they are in a hurry? What about those who modify their responses to give a better impression of themselves? Asking critical questions to the data underlying any statistical analysis – or machine learning model - are important. If you put garbage in your statistical model or machine learning algorithm, you will likely receive garbage out of the model.

###Is Nicolas Cage responsible for people drowning?

A common public misunderstood concept within statistics is that correlation imply causality – which is not true. As an example, there is a positive correlation between the number of films Nicolas Cage appeared in and the number of people who drowned by falling into a swimming-pool from 1999 to 2009. Does this mean that if Nicolas Cage in 2009 decided not to appear in any movies, fewer people would have drowned? Or is there a third confounding variable that is responsible for this correlation? Obviously, there is no causality in this case despite the evident correlation. In less clear situations, it might be a handy rule to think twice when presented with causal arguments that apply correlation as a part of the rationale.

###Why might understanding Bayesian probability prevent your doctor from removing your breasts?

Doctors’ conceivable confusion about statistics might lead catastrophic consequences – unless you, as a patient, have some insight in Bayesian probability.

Let’s take an example. Assume the following: You are a woman testing positive for breast cancer and want your doctor to tell you the probability. Your doctor finds the following facts:

The probability that a woman has breast cancer is 1%

If a woman has breast cancer, the probability that she tests positive is 90%

If a woman does not have breast cancer, the probability that she still tests positive is 9%

What answer does your doctor give you, and is it the correct one?

According to BBC, with a test conducted on 1000 practicing gynecologists in 2007, almost half of the responses from these doctors erroneously responded that you would have a 90% chance of having breast cancer. In effect, these answers implied that the doctors believed that the probability for having breast cancer if you test positive is the same as the probability for testing positive if you have breast cancer – which is not the case.

However, using Bayesian probability, the actual probability for a woman with a positive result from a mammogram having breast cancer is about 10%. The formula for computing this is as follows:

Let PT = "probability to get a positive test result" and let BC = "the probability that a woman has breast cancer". Then, the probability that you have breast cancer given that you have a positive result is:

Next time, if your doctor recommends you to remove your breasts due to this positive test result, perhaps you should ask for more details on the reasoning behind the result.

###Be aware

Living in a time where everyone can be an expert at the click of a button, facts are too often biased, misinterpreted, or pure disinformation. Hopefully, these examples will trigger you to pause and think critically next time you are presented with conclusions based on statistics.

Lies, damned lies and statistics

The Zed Attack Proxy (ZAP) is one of our go to tools for doing security assessments and testing applications. Tia Firing wrote about this last year, check it out. This year we were excited to learn that a new feature called Heads Up Display was introduced in the latest version.

When ZAP is set up, the traffic from your browser will pass through ZAP. HTTP requests and responses can be intercepted, modified or just inspected. As the tester is clicks through the application, ZAP will log the request and responses.

When doing a black box test, testing an application without too much prior knowledge of inner workings, trying to get an understanding of the various features and API’s used. This can be done by clicking around like a normal user of the application. After some time one can check the requests and responses in ZAP. All this is done through the dedicated graphical user interface. As a side note, ZAP can be run in headless mode, but we will not cover this here.

In the ZAP GUI one can see the requests listed in the history tab, where you can filter or sort. If a request looks interesting, one can flip back to the browser, find that piece of functionality and do some more digging. Then flipping back to the ZAP GUI to inspect or maybe replay some requests with some parameter tweaks.

This process of switching back and forth can be a bit confusing. If available, one could use two different displays, where one would be dedicated to a browser and the other display used to interact with the application. Although this works fine when multiple displays are available, there is still some context switching, when going back and forth between the different user interfaces.

The ZAP team has come up with a great solution for this, the Heads-Up Display. Like a fighter pilot, required tools and information is available from within the browser. Since ZAP can process requests and responses it actually makes sense that it would be possible to inject widgets, as an overlay to the web pages inside the browser.

The overlay that ZAP provides has three main areas; to the left there are buttons to add or remove pages from the attack scope. There are also indicators for security issues on the current page. These are grouped by severity, ranging from high, medium, low and finally info. By clicking any of these you can get information about that specific warning, without leaving the application. By right clicking, you can remove unneeded widgets. A nice trick is the light bulb which enables displaying hidden form fields – which can be useful when trying to understand how a given application works.

By clicking the green button, it is possible to intercept requests, in the browser, before it is sent to the server. The requests can even be modified before sending them. This feature is great for exploring possible security issues.

On the right-hand side, there are alerts for the whole site. As for the page alerts, site alerts are categorized by severity. It is also on the right-hand side one can start the various attacks, such as the spider and ajax spider. Running attack on a whole site is quite time and resource consuming, but the HUD has more tricks up its sleeve.

On the lower bottom page, the history and web sockets tab, that it familiar from the regular ZAP GUI. By clicking on “History” a list of requests is shown. From here you can target a specific URL or endpoint. After selecting a URL, a request/response editor is shown. Here you can view the request and response. The HUD allows for replay of the request, even with modifications. If the endpoint seems interesting, it is possible to start an active scan. This requires that the current page is part of the scope. If the “Active Scan” button is disabled, it is probably because the page is not part of the scope.

Finally, on the lower right hand, you can enable or disable the HUD, and reset the configuration to default.

The ZAP HUD is a great way to explore web applications during both development and security assessments. It becomes intuitive to use the various features provided by the overlay directly from the browser. Please note that the HUD is still in its early stages and it may not be ready for prime time.

9-Dec

Today's posts