Einstein‘s Special Theory of Relativity explains how space and time are linked for objects moving at a constant speed. Due to this, anomalies in time and size can be observed.

This interactive communication system (ICS) is designed as a classroom aid to educate students aged 15-18 on the basics of the Special Theory of Relativity. Students will learn the two postulates of the theory, the effects of the theory and the meaning of E=m×cˆ².

The goal was the design and development of a communication system primarily for the transfer of knowledge in a defined context. During the process, we were to design basic forms of interaction, media-specific design problems, information architecture, information and data visualisation, the relationship between text as well as image and animation and protoypical implementation or simulation.

The choice of the target group for this course was limited to flâneur or school class. It seemed less useful to us to prepare the Special Theory of Relativity (SToR) in such a way that it would arouse the interest of people passing by & at the same time the content of the ICS would do justice to the complexity of the topic. For this reason, we decided on a school class of middle and high school students between the ages of 15 and 18, depending on our topic and the initial design ideas.

In a brainstorming session, we considered the context in which middle school students might come in contact with special relativity. First we decided on a science centre like Technorama. However, as the design process progressed, we focused more on teaching the theory in greater depth, so we decided that the use of the ICS should be accompanying or complementary to physics lessons.

In order to answer the question of what content should be conveyed by the ICS, we began by learning about the topic of special relativity. Initially, each of us was asked to conduct a general research and note down any topics found or aspects of the theory in order to get a rough overview of the topic. In this way different mind maps like these were created.

It quickly became clear that SToR is a complex and extremely wide-ranging subject. Too complex to be taught comprehensively in an ICS for middle school students. The search for already existing exhibits and explanatory treatments of the theme should provide initial inspiration for design approaches. We summarized the research results and the following questions emerged which we wanted to pursue further:

What does the theory contain?

How does the theory work?

What does the theory have to do with the formula E=m×cˆ²?

Is the theory relevant for everyday life?

Initially, we wrote down all aspects that seemed important to us on cards and carried out a card sorting to obtain thematically related groups. We then arranged these cards in a hierarchical order to obtain our first information architecture. Due to the ever-increasing research and understanding of the subject, the information architecture went through several stages until the final version was set. It comprises an introduction and three chapters dealing with the two postulates, the effects resulting from the theory and the formula E=m×cˆ².

After changing the communication goal several times, we decided to focus on teaching the basics. We reconsidered our entire concept and first formulated a general goal of the application before determining which concrete communication goal we were pursuing.

goal of the application
The goal of the application is to convey knowledge about a complex topic in a way that is easy to understand.

communication goal
The goal is to provide the user with a basic understanding of the Special Theory of Relativity. First of all, the user should be familiarised with essential terms and the two basic assumptions of the theory, in order to then become familiar with the effects resulting from the theory. Finally, the user should gain an understanding of the formula E=m×cˆ², where it can be physically classified and be made aware of its consequences.

Since the contents of the ICS are partly built on each other and form a learning process overall, a linear narrative formseemed to us to be the best way to achieve our communication goal. Despite the linear narrative form, it should always be possible to switch back & forth between the individual chapters if the user is already familiar with them or wants to go through them again before continuing the learning process.

Already during the research work we sketched ideas for the design of the content. In order to obtain suitable design approaches for the respective chapter, we proceeded as follows: We set a local communication goal for each chapter. Based on this, take-aways were to be formulated, dividing the chapter into appropriate sections in terms of content and didactics. Afterwards it should be clarified which content can be conveyed purely textually, which purely visually and which in combination of both techniques. Then the ideas should be implemented and checked whether the result actually conveys what was aimed for.

Throughout the design process we also created many variants of different UI elements such as the global and local navigation, the body text box, the interaction instructionsand buttons. The UI elements developed in parallel with the navigation structure and layout, so that they not only had to be visually integrated into the interface, but also had to be conceptually harmonised with it.

During the compositional arrangement of the content on the screen, we went through many feedback loops, which significantly influenced the design of the interface. We learned that it is very important to carry out user tests, because after all they are the ones who should understand and use the ICS. The design of the interface is the means to an end, which in our case is to achieve the communication goal. The figure shows key screens of version one, three and five.

We derived the personality of the ICS from our theme and the selected target group and combined it with the consideration of adjectives with which we would describe the topic. As a result, our ICS should be simple, reliable, exciting, at eye level, focused, effective, engaging, understandable.

Based on the personality, we started to search for a suitable font. We took all the typo styles used on the interface such as headlines, copy text or instructions, put them side by side and evaluated all fonts against the proposed criteria catalog. Finally we decided on Inter and created a style guide.

For choosing a color scheme we first did a point query where we marked the associations with a post-it that we felt were appropriate and then set blue, green, white and black as the basic colors of our ICS. Instead of using pure black we decided to use a really dark blue, because using pure black with a white background can cause discomfort for the eye when users read the text over an extended period of time.

In our final concept we thought that the colour design should not only look nice but also contribute to usability. For this reason, we decided to color code the function of the buttons. Specifically, we decided that all UI elements that trigger interaction with the content should be coded in blue. In our case that means for example hyperlinks connected with a short recap of special terms or button related with animations. All UI elements that help the user to switch between chapters or to advance in the learning process should be coded in green. Both the green and the blue colouring are intended to attract the user’s attention and therefore guide his interaction with the system.

Another aspect that had to be defined were the animations and transitions in order to bring the interface to life. Here we researched which transitions are conventionally used for the respective UI components or rather underline the hierarchy of our system and defined them accordingly for our ICS.

If you have any questions about the project or want to know more about it, just write me a short message.
I am happy about any suggestions and comments.