Coastal Media Brand

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 partsbreaking 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”. But before we get to those details, first, let’s talk briefly about where computational thinking is used. 

Where Computational Thinking is Used in Web Design 

Though we’ll get more into this subject when discussing something called “pseudocode” below, let’s take a quick moment to break down how computational thinking in web design is put to work:

  1. UI/UX Design: Applying logic and structure to create intuitive and user-friendly interfaces.
  2. Responsive Design: Breaking down complex layouts into simpler components for various screen sizes.
  3. Interactive Features: Devising algorithms for dynamic elements like sliders, pop-ups, or forms.
  4. SEO Optimization: Analyzing patterns in user behavior and search engine algorithms to optimize site visibility.
  5. Content Management: Structuring and organizing web content for efficient access and display.
  6. Performance Optimization: Analyzing and refining code and design elements for faster load times and better user experience.

These applications showcase how computational thinking is integral to solving complex web design challenges.

The Principles of Computational Thinking

Now, onto the key principles that make up this computational process. There are four such principles:

  1. Decomposition
  2. Abstraction
  3. Pattern Recognition
  4. 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 computational and algorithmic thinking.

“A flowchart is a type of diagram that represents an algorithmworkflow 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 kitsexample of ui elements from ux kitsexample 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.

How to Write Pseudocode (for Beginners)

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

1
Begin
2
INPUT hours
3
INPUT rate
4
pay = hours * rate
5
OUTPUT pay
6
End

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

1
Begin
2
INPUT hours, rate
3
IF hours ≤ 40
4
THEN
5
      pay = hours * rate
6
ELSE
7
      pay = 40 * rate + (hours – 40) * rate * 1.5
8
OUTPUT pay
9
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. 

How Pseudocode is Used as a Problem Solving Tool

As you can imagine, pseudocode comes in pretty handy for problem-solving as well. 

Here are just a few ways it can be used, practically: 

  1. Website Navigation Structure: Designing the flow and structure of a website’s navigation system, including drop-down menus and linking between pages.

  2. User Authentication Flow: Outlining the steps for user login, verification, and error handling in a secure and user-friendly manner.

  3. Interactive Elements: Planning the logic for sliders, pop-ups, or interactive forms, including user input validation and dynamic content display.

  4. Responsive Design Logic: Structuring the code logic for making a website responsive to different screen sizes and devices.

  5. Data Handling: Conceptualizing the process of retrieving, displaying, and updating data from a database in a user-friendly format on the website.

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 21st 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:

  1. Decomposition: breaking down a problem into its component parts.
  2. Pattern Recognition: identifying similarities in component parts of a problem.
  3. Abstraction: focusing on important general information and leaving aside information that is irrelevant to the solution.
  4. 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.
  5. Evaluation: finding bugs in the algorithm and correcting them to ensure it works without any glitches.

Useful Resources

Coastal Media Brand

a Lyfeloop, Inc company.