karianne

[karianne]

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

[karianne]

9 w5 FINAL PROTOTYPE

project with @hannelock​

Skop - et interaktivt læremiddel for å utforske detaljer og sammenhenger i fysikkfaget

[karianne]

9 w5 SKOP - some final toughts

project with @hannelock

Skop is a concept that we originally planned to be expanded upon by adding in more topics from the physics subject to offer students a map over how different topics are connected. Forces could be explored both on earth, in the atmosphere or even out in space. As physics aims to describe the physical world topics could be placed where they fit in the model.

However, placing the model in different parts of the world could be interesting as well. This way one could explore how climate changes have both  local and global effects. I guess it depends on whether SKOP should be focused on global warming or physics as a whole.

The process has been enjoyable, often difficult and very interesting. It has been lovely to work with Hanne who has taught me a lot and been a good partner to discuss ideas with. Some of the most important things this project has taught me are:

that most people are not used to prototypes! their purpose should be clearly stated, as well as their limitations. tasks should be given to test particular areas of the prottype. it is even more important when the testing is remote

one of the best ways to work around a problem or to explore a possibility/idea is to make it. our prototype changed dramatically when we set small timelimits for our selves to create something. that way you do not have time to over analyze the idea, and new ideas develop more rapidly once you have started to explore something. dont just talk and think - make something!

user testing is thebomb.com! some of our best alterations where made after we user tested particular parts of the UI

it has been challenging to document the process, but I have noticed that it makes thinking easier or at least more clear. it is something I would like to continue to do. 

i found an old PDF from our visual communications course last year and rediscovered Edward Tufte’s saying “the smallest possible difference”. it actually helped our UI a lot the last two weeks as it reminded us to prioritize the hierarchy and to concider which elements were the focal points at different sections. 

adobe xd is WAY better for animations, but it was really unpleasant to collaborate in. we needed to work in separate files not to delete or interfere with the other persons work, which made sharing ideas and working together a bit less smooth than in Figma. Something to be aware of for the next UI project

[karianne]

Some sketches of our logo!

project with @hannelock

[karianne]

9 w5 FINAL ITERATIONS

project with @hannelock

[karianne]

9 w5 FINAL ITERATIONS

project with @hannelock

[karianne]

feedback on prototype #3

project with @hannelock

Usertest:

the solution was tested on the physics class again. This time we included a note explaining the purpose of the prototype. Both the teacher and the students reported that they prefered the frst prototype they tested because it had more clickable elements and because they could navigate with the arrows on the keyboard (figma functionality). It seemed like we had not communicated clearly enough the difference between a fully developed digital teaching resource and a prototype, so the participant seemed let down as the prototype did not meet their expectations. Regardless, we have at least learned that we should have included some tasks for them. For example to navigate from the home screen to co2.

we will test elements of the UI on classmates next week

to work on next week:

place our solution in context for our presentation

look at the readability of the text some places (white on light blue)

make the clickable elements appear more clickable

break the model of the earths energy budget into separate pieces, bit overwhelming atm

make the earth a bit more recognizable

[karianne]

VIDEO OF PROTOTYPE #3

project with @hannelock

[karianne]

9w4 more sketches

project with @hannelock​

sketches I have made of how the earth with the model of earths energy budget might look like. after some iterations we decided to include the “map” in the corner of every frame to make it accessible. this way the user can always see how the topic they are currently at is connected to other topics, and quickly navigate to new, interesting topics.

iterations of the introduction page to the greenhouse gases

[karianne]

9w4 sketches of new navigation

project with @hannelock​

last week we managed to structure the content within each topic, but failed to highlight their interconnectiveness and most importantly offer a clear navigation path. we are starting the week by sketching some quick ideas how how navigation might work. below are three of my sketches.

we decided to base our navigation on the model of the earths radiation budget. while zooming in on the model new information will be uncovered. it is quite similar to how google maps becomes more detailed when zoomed in.

we will work on:

a visual profile that suits the age group and the subject

dividing the information into logical “levels”

figuring out how to highlight the interconnectedness of the topics and offer a navigation path that strenghtens this

[karianne]

9w3 feedback on 2nd prototype

project with @hannelock

notes from a user test on my brother:

the different parts are understandable, but it is unclear how to move between the different topics.

likes that there are examples from everyday life

likes that the model of the earths radiation budget can be dived into different parts

key questions / ideas to consider moving forwards:

The info is too passive. How to make it more dynamic and interesting?

Continue to work with the relationship between details and the broader picture

Where is the user in this context?

What is difficult to communicate about the earths radiation budget?

Give the user a better mental map of where they are in the navigation

Highlight the different functions of elements

[karianne]

project with @hannelock

video of our second prototype

[karianne]

9w3 Prototype 2

project w @hannelock​

Sketch of how we  have structured the content. Each topic is divided into  introduction, exploration and problem solving. You navigate between the topics by opening up the side meny and selecting the one you wish to learn more about.

Main points for further development:

make the different topics interconnected! how do you move from a model of the earths radiation budget to the greenhouse gases? how to move seamlessly between topics?

agree upon a visual profile for the site. we have not focused on this yet, but a coherent visual feel for the page will make the interactions seem smoother and tie everything together.

find a way to navigate that is based on a model of the earth, but that is more structured than the one in the previous prototypes

focus less time and energy on making a layout for every part of the subject we want to include, but rather make room for them and indicate where they would be. Focus more time on making a layout and structure for a few topics and make that really well.

[karianne]

RADIATION + some other sketches

project with @hannelock

a quick and very unfinished sketch of how one might navigate between different temperatures. to limit our scope we have decided to not spend any more time on including radiation in our prototype, so this is a goodbye to radiation theory xx

quick sketches of suggestions to the structure of a landing page

[karianne]

9w3 working on the greenhouse gases

project with @hannelock​

i am working on how to visualize the greenhouse gases in a fun and engaging way. The presentation of the individual greeenhouse gases with the bars are inspired by video games 

[karianne]

9w3 working on improving the structure of the site

project w @hannelock​

working on improving the structure of the site. One of the wishes from the teacher last week was to give each topic a brief introduction before delving deeper into it. Thus we have decided to seperate the content a bit more and structure the content within each topic to make it clearer for users but also for our selves.

hanne is looking into the earths energy balance specifically and how to explain it in a clear way, while I am looking into factors influencing the radiation (greenhouse gases) and radiation. we are both looking into the navigation of the site.

[karianne]

9 w2 feedback

project with @hannelock

Our prototype was tested by a physics class and their teacher. From their feedback we can gather that

 They enjoyed the illustrations and the colours

 They found it confusing that they could navigate both by clicking on the screen but also by using the arrows on the keyboard. Which indicates that the navigation is not clear enough. It also highlighted a fact we had overlooked, the fact that most people are not familiar with the prototype format, and should be given some clear instructions before testing. It could also be useful to manage expectations by giving  the participants a bit more indepth information about the purpose and limitations of the prototype.

The teacher wanted topics to be introduced before models were shown

Both the teacher and the students enjoyed the mathematical explanation.

Keypoints to consider next week:

 How do we make navigation clear but not too linear?

 How should information be presented? How can we structure the different topics? How much information and when?

Which questions lead to new questions?

What is the experience?

Where does it begin? zoomed out? on the individual? on earth?

make functions more dynamic

play with scale?