hannelock

[hannelock]

Interactive learning tool w/Aschehoug

Project with @karianne

SKOP recap

Subject Physics 1

Grade level upper secondary school

Topic The Earths energy balance

Competence goal The student should know how to model the Earth’s energy balance and consider how changes on the surface of the earth and in the atmosphere affects this balance.

Teaching methode Individual work

Problem statement Develop a flexible learning tool that can be used in different parts of the learning curve to give the student an overview of details and connections.

Flexible

Non-linear (dynamic) navigation

Information on demand

Leaning curve

Introduction to subject - lectures - deep learning - problem solving - discussion - repetition - test

SKOP can be used in different parts of the learning curve, for example as

an introduction to a new subject before a lecture with the teacher

part of a task to explore and discuss with class mates

repetition before a test to see the big picture

SKOP is thought to be part of the Aschehoug library of learning tools.

SKOP in the future

The project over all has been challenging in many ways, and I sure have learned alot!

To further strengthen the project we would

user test much more along the way. Test smaller parts as font and color, as well as bigger navigation systems and whole concepts.

work on how to further increase a feeling of control in the UI when moving around.

implement a functional map that you have easy access to from all «zoom levels» . This will add to the point of understanding connections between topics at the same time as it gives the user control over the UI.

👋🏼👋🏼 Interactive products 2020

[hannelock]

Interactive learning tool w/Aschehoug

Project with @karianne

SKOP

An interactive learning tool to explore the micros and macros in the subject of physics

[hannelock]

Interactive learning tool w/Aschehoug

Project with @karianne

The evolution of the Earth

[hannelock]

Interactive learning tool w/Aschehoug

Project with @karianne

Approaching the finish line

After the last round of feedback from both the physics class, the physics teacher and our interaction design teachers we finally have a clear path toward the finish line. We know what steps to take, and we will use these last few days to figure out how to take them.

At this moment, the prototype looks like this

The main tasks ahead

Make clickable things look clickable

Flow and friction in information distribution

Readability, hierarchy and contrast

Make the earth look more «earthy»

[hannelock]

Interactive learning tool w/Aschehoug

Project with @karianne

Changing the UI completely

We lost the touch with our physics class for a week, due to midterm season, so unfortunately we lack user testing on this stage. On the bright side we got some great feedback from our teachers on the prototype, and there are definitely some issues we need to solve.

What we thought was a logical way to navigate turns out to be the opposite. We have to do some major changes in order to give the user a pleasant experience interacting with our product.

After some intens brainstorming and concept development we revisit the idea of zooming in and out of levels of information. We also made a switch from using Figma to now using Adobe XD because of how the softwares animate between screens. We depend on smooth transitions between different levels of zoom, and XD works best in this regard.

After mapping out the very content we are dealing with (the earth energy balance, radiation and green house gasses), we now have a clearer overview on what we want to include in our final delivery. Mapping out the content for ourselves helped us to see new ways to navigate between topics, and also how to organise it all.

Prosess sketches

We are now working with combining two things

Content map + context in physical world

[hannelock]

Interactive learning tool w/Aschehoug

Project with @karianne

Organise and navigate, but how to?

Making some iterations based on feedback from usertest with the physics class, mainly working on organising the content and navigating between content.

We are moving towards a simple starting page, with a menu/nav bar to the left hand side where you can locate the different topics.

Focus areas

How to move in and out of topics

How to go back and forward in the content flow

How to increase the feeling of control in the UI

We found it beneficial to divide the content into three «layers»

Introduction to subject

Explore content on a deeper level

Reflect and solve problems related to the topic

Prototype ready for user testing looks like this

[hannelock]

Interactive learning tool w/Aschehoug

Project with @karianne and @luisamaldaner

Landing page

Working on different ways to start the show.

Questions we are faced with are:

What should the visual profile look and feel like?

What best fits the user group (16-17y/o)?

What type of information should the landing page display?

How much information is necessary and…

How do we show more information when/if necessary

[hannelock]

Interactive learning tool w/Aschehoug

Project with @karianne and @luisamaldaner

Usertest 1 (20. nov)

We got a physics class to test our first prototype. Here is a video of how the prototype works.

At this point it contains four main components:

The sun and the earth in relation

The earth and the atmosphere. This page leads to to nr. 3 and 4.

The greenhouse gases

Stefan-Boltzmann's law and how to use it

Feedback from the teacher

Wants an introduction to more basic theory first

Add a main/home landing page and a nav menu

Unclear navigations

Add more math problems

Feedback from the pupils

Unclear navigation

More content on each page

Good connections to reality with examples and illustrations

Great illustrations and colors

Great with the math problems and how to solve them. More of this. Also add hints for when you are stuck on a problem

[hannelock]

Interactive learning tool w/Aschehoug

Project with @karianne and @luisamaldaner

Concepts and prototyping

Some keywords from our early concept sketching

Possibility to zoom in and out to see the bigger picture and details

Teamwork and problem-solving together

Simulation/animation of the earth with interactive elements

In progress...

We are looking into the the different layers of the Earths energy balance, and trying to figure out what we want each layer to include.

Questions we are faced with are:

What is relevant (and the most important) information for this layer?

What is too little, enough and too much information?

How do we create a great overlook of the big picture and at the same time provide sufficient information about details?

How do we toggle more or less information for each layer?

How do we switch between the different layers?

[hannelock]

Interactive learning tool w/Aschehoug

Project with @karianne and @luisamaldaner

Research and insight

Insights from a physics teacher

She uses PowerPoints, iPad and OneNote to (to some extent) make the lectures live in class

Her impression is that the pupils like a traditional approach with a lecture and some videos to introduce a new topic, followed by problem-solving

She believe that pupils working together to solve problems might be even better

She is positiv to the new curriculum focusing more on depth learning

Result from pupil survey (12p)

83% are genuinely interested in Physics and Math

50% study physics to better understand how the world is built

66% like to go to lectures and 56% like to watch Youtube videos to get an intro to new topics

Problem-solving alone (83%), problem-solving with other students (75%), as well as discussion with the teacher (66%) ranks as top three study techniques

Digital platforms and Youtube

We have been looking at a few of the existing platforms for digital education for Physics 1 as well as Youtube content that aims to explain the specific topic we are focusing on (earths energy balance).

Video is a fairly commonly used tool in educative setting, and we see some obvious different styles of teaching:

1: The shy-theorist type

voiceover from «teacher»

text-based

handwritten

drawings

2 : The classic-classroom type

«teacher» in person

greenscreen

flat image formate

3: The we-put-some-money-into-this type

«teacher» in person

text

images

animations

We find it easier to follow the videos and understand the content where they use animation to explain the theory. The Earths energy balance is a fairly theoretical topic, but at the same time it demand a sort of practical approach because there are both «moving parts» and so many physical layers to the concepts.

Moving foreward

We are working on an interactive way to visualise this topic, wanting to implement some sort of Zoom functionality to help both understand the big picture and to study details on a smaller scale.

[hannelock]

Interactive learning tool w/Aschehoug

Project with @karianne and @luisamaldaner

Our Point Of View

From the Physics 1 curriculum we landed on one of the competence goals to focus on.

We will make an interactive teaching/learning tool for students to learn how to

model the Earth’s energy balance and consider how changes on the surface of the earth and in the atmosphere affects this balance.

NO: (Eleven skal kunne modellere strålingsbalansen til jorda og vurdere hvordan endringer på jordoverflaten og i atmosfæren påvirker denne balansen)

Right now the top three google image searches for Earths energy balance look like this

We will make this into something AMAZING ✨

[hannelock]

Interactive learning tool w/Aschehoug

Project with @karianne and @luisamaldaner

Early research

After a quick brief with the group we decided on our subject and grade level for this project.

Physics 1 for 2nd grade pupils in the upper secondary school.

Fagfornyelsen 2020 does not include this subject or grade level, but we found the curriculum under construction and will use this as basis for our further working.

There are already a few ways to interactively explore physics out on the big interwebs.

1️⃣ Pendulum lab is a classic

2️⃣ Few interactions in this next one, only some buttons to push and some numbers to change

3️⃣ Coach’s eye is a video analysis tool to break down movement and force

4️⃣ This one is a fun little game helping you to understand the relationshp between mass and force

5️⃣ Aunivers is Aschehoug’s very own learning platform. Here is me navigating around to find Science (Naturfag).

6️⃣ AR popping out of the text book to help the pupil visualise physics concepts

[hannelock]

Interactive learning tool w/Aschehoug

Project with @karianne and @luisamaldaner

Education and Aschehoug

In this project we aim to create interactive prototype tools that give pupils a great experiences while increasing their learning output.

Fagfornyelsen 2020 contains all new curriculum for all pupils in 1st - 9th grade as well as for first year pupils in the upper secondary school. For 10th grade and second and third year pupils in the upper secondary school the curriculum is under development and will be implemented the next few years.

This new curriculum is more centred around collaborative, discursive and interdisciplinary learning methodes.

The core curriculum states that

[Education and training] are to promote democracy, equality and scientific thinking. […]These values, the foundation of our democracy, shall help us to live, learn and work together in a complex world and with an uncertain future.

Collaborative partner Aschehoug

Aschehoug was established in 1872 and is a leading and independent communicator of literature and knowledge that guarantees freedom of expression and work for an open, international cultural contact. They produce education content both in book form and for digital use. Aunivers is their learning platform.

Aschehoug’s aim is to work with the best authors and publish the best tools for education all the while following principals for both environmental and ethical sustainability.

Project progress plan

Research and make choises about

🙋 Pupil group / grade level

💡 Subject / specific competence goal

👩‍🏫 Teaching methode / mode

[hannelock]

Electronics // Circuit Playground Express

Sometimes you win, sometimes you learn

Today was a day of trying different things and really not finishing any of them...unfortunately. Some of my learning outputs:

Included the breadboard in the circuit

Made a light dimmer using a potentiometer

Soldering alot

Used the map function to adjust sensitivity of the potentiometer («stretching» the values of the light to match the analog input)

[hannelock]

Electronics // Circuit Playground Express

Neopixels

Working with @designbynissen

Using Circuit Playground Express and makecode.adafruit.com to make something including neopixels.

Concept

Continuing our work with two light sources from Tuesday, but now with 20 neopixels lighting up other materials.

We made a mockup from gluesticks and foam to invision our project.

Essembly

We cut out the shape in white acrylic sheet and the pillars are made from acrylic bolts.

Final result ✨✨✨

[hannelock]

Electronics // Circuit Playground Express

Make it move

Using Circuit Playground Express and makecode.adafruit.com to make something move.

My initial idea was to make a Raving Party Robot, but for a a while I got lost struggeling with some more ambitious concepts. Evetually returning back to the original idea and executing it.

There are three interactions

Lights off ➡️ disco lights turn on

Music starts playing 🎶 (loud sound) ➡️ FIST PUMP! ✊

Lights on ➡️ party`s over... wawawawaa

[hannelock]

Electronics // Circuit Playground Express

Make it glow

Working with @designbynissen

Using Circuit Playground Express and makecode.adafruit.com to make an interactive lamp.

Early on we wanted to create something that was about combining two things and having some kind of reaction between the two. The process started with exploring concepts of combination and how to translate this into light, electronics and code.

We landed on the concept of color and how to combine two different light sources into something else. We used theory about RGB colors to design a small object with the purpose of showing what happens when mixing color from light.

The result being a red and a blue cylinder that put together make up magenta.

We spent some time on understanding what was possible to do with makecode.adafruit.com, but most of the time went into building the prototype. Just after we were done we realized that it was not as complicated as we first thought it would be.

Looking forward to more practice! 🧠