Outline: How to De-Clutter Scientific Software and Optimize Cognitive Load

Last updated on 2025-12-30 | Edit this page

Target Audience

A developer who’s building science tools, without the support of a designer. If they build software without thinking about the design, the software will be hard to use, taking away from the utility of the tool. This may lead to continual requests for changes after launch that could have been avoided if the design had been considered up front. A background in design can empower developers to build tools that are more effective for scientists.

List of prerequisite knowledge

  • Basic diagramming (ie: drawing shapes with Powerpoint, miro board, Figma, MS Paint, Pen & Paper, Excalidraw)

Lesson Learning Objectives

The skills learned will be applicable to improving existing software and creating something new. After following this lesson, learners will be able to:

  1. Learner will leave with basic literacy in evaluating a design
    1. When presented with a software example, learner will be able to identify areas causing higher cognitive load (things aren’t aligned, too many fonts/sizes, not enough space, illogical item groupings)
    2. When presented with a software example, learner will be able to call out what ‘stands out first, second, and third’ on the page in an order similar to the instructer’s own perception.
  2. Learner will be able to create design hierarchy
    1. When given a list of software functions, ranked by importance, learner will be able to create a layout using shapes and text that establishes a hierarchy
    2. When given a basic layout, learner will be able to add elements to create clutter and remove elements to fix “clutter”
  3. When given a list of field names, learner will be able to correctly identify when use of technical language (Acrynoms, database speak, high level vocab) is helpful or harmful
    1. defining language that may be unfamilliar to others
    2. using simpler language when possible
  4. Learner will be able to recite 3 key best practices of layout design

Episodes

Jargon busting (what is cognitive load?): Learn to feel high and low cognitive load

Learning objectives

  • When presented with an \[example? Interface?\] learner will be able to verbally identify it as either very low or very high cognitive load in less than 2 seconds.

Episode outline

  • Task mode vs. default mode network - learning to feel when either system in your brain is active.
    • Sit back from desk, and every thing I say try to associate it with its overall meaning, and memories you have of that thing. Tricycle. Tricycle means fun. Means scenes in movies with carefree childhood.
    • High load: Now build the tricycle out of disorganized parts, hidden within clutter
  • “Cognitive overload” study where brain activity just falls off after a certain amount of clutter.
  • Maybe mention some research-backed consequences of clutter?
  • Put brain in default mode:

Theory of Mind - Escape your own perspective, and feel the users’ instead

Learning objectives

  • Learner will know the definition of a “user” in UX, and name ways a user’s context will differ from their own as the designer/developer
  • Given an example interface that we have made them familiar with, user will be able to recognize and label the pieces of the interface that are familiar and unfamiliar to themselves.
  • Given an example interface that we have made them familiar with, user will be able to recognize and label the pieces of the interface that are familiar and unfamiliar to a naive user.

Episode outline

  • Talk over (actually do the experiment!) cup hiding the ball experiment that shows when children learn that not everyone has the same context
  • How does this apply to design
    • Language and jargon
    • Workflows - you have been involved in building the tool, you know the ins and outs of how it works. Your users do not have that context
    • You may assume ease of use based on your own domain knowledge / familiarity, but not all users will have that

Simplicity - Everything added subtracts

Learning objectives

Given a self-chosen example interface, the learner will be able to identify one aspect to deemphasize.

Given an example interface, learner will be able to create a quick ‘whiteout’ mockup in Figma.

Episode outline

  1. Demonstrate the problem: count the bunnies - It’s easier to count the bunnies when there’s no clutter

Try to count the bunnies in this photo as quickly as you can.

![][image1]

Now, try to count the bunnies as fast as possible again…

![][image2]

Notice that it was much harder to find the (smaller) bunnies when there was more clutter? It’s the classic “Where’s Waldo” experience. High clutter increases your cognitive load (because you have to work harder to filter-out non-bunnies) and slows down your performance.

Interfaces work the same way. Now imagine the bunnies are crucial pieces of information, or buttons to perform tasks.

Example 2: Two Graphs vs One graph

![][image3]

![][image4]

  1. Context: Deleting is opposite of scientific thinking.

Deleting is opposite of scientific thinking. In science education, students are encouraged to write long, wordy, jargon filled papers. Key points and take-aways are lost among the noise. A common tactic scientists use to highlight key points is over-emphasizing. If their paper is a crowded room, they try to dress their hypothesis in bright yellow. But there are 100 other people dressed in orange and purple. So then they give their hypothesis a hat.

Let’s focus on the skill of deleting and de-emphasizing.

“In the spring of my senior year at Lisbon High—1966, this would have been—I got a scribbled comment that changed the way I rewrote my fiction once and forever. Jotted below the machine-generated signature of the editor was this mot:”Not bad, but PUFFY. You need to revise for length. Formula: 2nd Draft = 1st Draft – 10%. Good luck.” — Stephen King

  1. Tactics:

    • Remove - There is usually text / steps in a workflow / visual clutter that can be entirely deleted
    • Hide until relevant - Software is interactive. This is powerful because it allows us to share information as it becomes relevant to the user. Hide information until the user:
      • needs it: show it as the user arrives at the relevant part of the workflow
      • summons it: show it when the user requests the information. This can be done with hover text or popups.
    • Simplify - can something condensed without losing the important content? What are the fewest words you can use to describe a concept? What are the fewest steps needed to complete a task?
    Often people worry that important information will be lost so they keep everything in. Remember If you let something go and it comes back then its meant to be

Exercise #2: Throw something away on your desk

Exercise #3: Delete from their own software (because they know it)

  • Open an image in mural (miro?) drawing a white box

Words in the interface - Write like you’re having an efficient conversation

Learning objectives

Learners will be able to identify what context and education they have that (theory of mind)

  • Acrynoms, database speak, high level vocab
    • defining technical language that may be unfamilliar to others
    • simplify
    • Writing like a human
    • Speak in headline
    • Progressive summarization
    • Jenn’s class example (short word limit)
      • maybe we can have a run on sentence and have a contest. give everyone 3 minutes to reqrite the sentence in as few words as possible. (This could be in the language episode instead)

Episode outline

Visual Hierarchy and cognitive load - application of priority

  • alignment
    • fonts
    • sizes
    • spacing
    • grouping
    • reading order

Exercise

  • ‘call out what you see’ exercise
    • Create design hirearchy

Prioritizing - Need to know -> Nice to know

  • Episode Objective: When presented with a list of interface functions, learner will be able to order them from likely most common to least common

    • Note: How do we have an ‘objectively correct’ priority?
    • 80/80

  • Basic literacy in evaluating a design

  • When given a list of software functions, ranked by importance, learner will be able to create a layout using shapes and text that establishes a hierarchy

  • Learner will be able to recite 3 key best practices of layout design

  • How can you improve existing software

    • fix “clutter”

  • How can you create something new

Final Project - Designing list view from scratch

Learning objectives

  • How to hack together a new design concept
  • Use similar elements for familiarity lowers load (knowing what something does)

Episode outline

  • Design as a skill

Activity ideas:

  • Product result table (list of stuff you need to review)
    • List views are super common
    • Learners can use their own collection of data to show in the list view
    • We can also give an example with
  • Or an advanced search page (that searches a database of exoplanets)

Designing Exercises

FIXME use the space below to draft exercises to help you assess learners’ progress towards the objectives you defined for your episode.

Exersises here: https://app.mural.co/t/stsciinternal7446/m/stsciinternal7446/1761226323984/98fa21d3961fe8de7608fc9b04147472ff56cb4d

Minimal fix

  • Count the bunnies, be good (declutter) or evil (add clutter)
  • Level 2: Find the graph

True false (good for novice)

  • When building tools for Science, it is best practice to include every detail of a scientific concept

  • When building tools for Science, it is best practice to use always use formal language and advanced vocabulary

Fill-in-the blank (good for novice)

  • The quickest way to lower cognitive load of a design is to____ (delete something uncessary)

Fix a slightly broken design (good for novice)

  • Give a layout with text, where the headings and text are not aligned. Have them fix the alignment (simple grid)

  • Give a layout with text where all the text is the same size and weight. ask them to add hirearchy

Examples before exercises

FIXME use this space to make some notes about examples/narrative you could use to demonstrate the skills/teach the knowledge that learners will need to complete the exercise(s) you designed above.

Glossary of terms

FIXME add a list of terms or jargon from your lesson, along with their definitions.
The syntax below will make your glossary render nicely when added to the learners/reference.md page of your lesson.

Cognitive load

Default Mode Network vs. Task Mode Network

Intrinsic vs. Extrinsic Cognitive Load vs. Subjective cognitive load

Audience
Recognition vs. Recall
(understanding other people have different context than you)

  • Jargon
  • Abbreviations / Acronyms
  • technical language (like database)
  • internal (team) language vs external communication - intentional branding

Multi-channel cognitive load

  • Verbal vs. Visual load

Ways to reduce cognitive load (Sweller)…

  • Weeding
  • Pre-training
  • Orienting
  • Channel-offloading

Clutter

Limited Capacity Model

Plain language

Skimming

Scanning

Greeking / Gestalt

Reading order (readability)

Visual hirearchy
Contrast
Faces
Center bias
Attentional templates
Space
Alignment
Grid
Size

Key rules to help them remember:

  1. Design is a conversation: Imagine the interface as a person, and you’re asking it questions, and it’s giving you answers in the order of the visual hierarchy.
  2. Eye follows contrast
  3. Deleting is opposite of scientific thinking