The Basics of Computational Thinking

Web designers are required to think through problems in a way that computers can understand, hence “computational thinking” is an indispensable skill set for them to have. It offers systematic tools needed to solve complex assignments from clients.

Computational thinking enables web designers to break down a problem, spot patterns in data, identify and focus on absolutely necessary aspects of an assignment, while leaving aside unnecessary information that will bog down the process.

As a tool for thorough planning, it avoids costly mistakes that come as a result of rushing to complete a project without having considered different facets of the problem at hand.

What is Computational Thinking?

Computational thinking as a concept can sound intimidating. But every day, in all aspects of our lives, we perform computational thinking. Think of the following actions and decisions that go into them:

You want to make yourself a cup of tea or coffee.
You want to buy a car.
You want to change careers.
You want to move to another city.
You want to buy a house.
You want to write a book.
You want to create an app.

The process of planning and reaching these goals involves computational thinking of some kind.

Planning involves breaking down these problems into manageable parts and coming up with sets of solutions that enable us to reach the goal we have in mind.

breaking problems down into manageable parts — Breaking down problems

For our purposes, since as web designers we want to use computers to help us solve problems at hand, computational thinking is really about understanding the complex problem at hand, then breaking it down into a series of smaller manageable problems. We then develop ideas on how to solve these smaller individual problems, and finally communicate the resultant ideas in a series of steps that can be understood and processed by a computer.

This approach follows what we call “the principles of computational thinking”.

The Principles of Computational Thinking

There are four such principles:

Decomposition
Abstraction
Pattern Recognition
Algorithm Writing

These are key techniques that will help you think computationally through a complex problem (challenge, or task) before writing a single line of code. Let’s examine them.

1. Decomposition

This is the breaking down a complex problem or system into smaller, more easily solved parts. These smaller problems are solved one after another until the bigger complex problem is solved.

“If a problem is not decomposed, it is much harder to solve. Dealing with many different stages all at once is much more difficult than breaking a problem down into a number of smaller problems and solving each one, one at a time.” – BBC Bitesize

2. Pattern Recognition

Once you’ve decomposed the complex problem into smaller problems the next step is to look at similarities they share.

Patterns are shared characteristics that occur in each individual problem. What similarities do you observe? Finding these similarities in small decomposed problems can help us solve complex problems more efficiently.

3. Abstraction

“Abstraction” refers to focusing on the important information only, ignoring irrelevant detail. To reach a solution we need to ignore unnecessary characteristics into order to focus on those that we do.

So what is this important information that we need to focus on? In abstraction the focus is mainly on general characteristics that are common to each element, instead of specific details.

Once you have the general characteristics, you can create a “model” of the problem; a model being the general idea of the problem we are trying to solve.

“If we don’t abstract we may end up with the wrong solution to the problem we are trying to solve.” – BBC Bitesize

Once we have a model, we can design an algorithm

4. Algorithm Writing

You’ve broken down the big problem into smaller, easily manageable problems. You’ve identified similarities between these problems. You’ve focused on relevant details and left behind anything irrelevant.

Now it’s time to develop step-by-step instructions to solve each of the smaller problems, or the rules to follow when solving the problem. These simple steps or rules are used to program a computer to help solve a complex problem in the best way. They are also called “algorithms”.

Definition: An algorithm is a plan, a set of step-by-step instructions used to solve a problem.

”Algorithms don’t always involve complicated feats of programming; at heart, they are sequences of steps to move toward a goal.” – John Villasenor

Writing an algorithm requires extensive planning for it to work correctly. The solution your computer offers is as good as the algorithm you write. If the algorithm is not good, then your solution will not be good either.

Using Flowcharts

Flowcharts offer a perfect way to represent algorithms.

“A flowchart is a type of diagram that represents an algorithm, workflow or process, showing the steps as boxes of various kinds, and their order by connecting them with arrows. This diagrammatic representation illustrates a solution model to a given problem.” – Wikipedia

Flowcharts are an easy way to plot out algorithms, especially if they need to output different results along the way. They use standard styling conventions. Flowcharts flow from top to bottom and left to right.

example of ui elements from ux kits — Flowchart element examples from UX Kits

Using Pseudocode

While decomposing the problem at hand into smaller manageable parts, you’ve been communicating your findings, ideas, and possible solutions in plain English (or whatever language you use to communicate).

Computers don’t understand instructions in English. They understand code. Code or algorithms which form a set of instructions with very specific syntax.

But before you use your findings to write code that the computer will understand, it’s usually advisable to write them down in pseudocode.

Pseudocode helps you plan the solutions to your problem to avoid any mistakes when writing code. It’s a way of writing instructions in a simplified way that reads like code. Pseudocode is not code, however–it does not have specific syntax that code uses.

Pseudocode is best written using keywords and variables. Variables in programming stand in for a value, a word, or chunk of code. In programming the value of variables changes depending on where you are in the code.

For example, this pseudocode (taken from The University of Tennessee) might calculate pay:

Begin
INPUT hours
INPUT rate
pay = hours * rate
OUTPUT pay
End

And this, slightly more complex example might calculate pay with overtime:

Begin
INPUT hours, rate
IF hours ≤ 40
THEN
      pay = hours * rate
ELSE
      pay = 40 * rate + (hours – 40) * rate * 1.5
OUTPUT pay
END

Pseudocode utilizes code-like terms that are helpful when translating it into code.

STOP/END Computers are literal. You need to tell them when a statement or instruction is done. Do this by writing STOP or END.
IF/ELSE/THEN Computers understand conditions: if A happens then do B, if not then do C.
INPUT/OUT Some code requires input in order to run and create an output result. Input is for data that a user or another source will be giving to the computer. Output is used to indicate the end result of a series of commands.
STORE/SAVE Pseudocode term that instructs a computer to save or store a value whenever necessary.

Evaluating Solutions

There’s actually a fifth part to this whole process. You’ve used computational thinking to arrive at a solution. The solution is an algorithm that can be used to program the computer.

You’re itching to start programming, but before you go ahead you must evaluate the solution. Why?

“Without evaluation any faults in the algorithm will not be picked up, and the program may not correctly solve the problem, or may not solve it in the best way.” – BBC Bitesize

Think of evaluating your algorithm as “debugging”.

Conclusion

Computational thinking runs through all aspects and functions of 21^st century business. It is an indispensable problem solving skill for web designers who eventually have to represent solutions in a language that computers can understand and process.

Remember, computational thinking involves the following steps:

Decomposition: breaking down a problem into its component parts.
Pattern Recognition: identifying similarities in component parts of a problem.
Abstraction: focusing on important general information and leaving aside information that is irrelevant to the solution.
Algorithm writing: writing the code that creates the intended solution. Writing step by step instruction that can be read and processed by the computer. The instructions are written using relevant information gathered from decomposing, pattern recognition and abstraction.
Evaluation: finding bugs in the algorithm and correcting them to ensure it works without any glitches.