Scaffolded Training Environment for Physics Programming (STEPP Project)
STEPP is an interactive application for high school students to learn to solve physics problems using Newton's 3 laws.
RESEARCH PROCESS:
RESEARCH PROCESS:
EXPLORATORY PHASE:
Organized meetings with the research team, physics team, design team and developer's team to understand their expectations, constraints and goals.
DATA GATHERING PHASE:
1. User Interviews
2. Usability Tests
INSIGHTS PHASE:
Conducted Heuristic Evaluation on the design flaws of the application based on usability testing.
DATA GATHERING PHASE:
1. User Interviews
2. Usability Tests
INSIGHTS PHASE:
Conducted Heuristic Evaluation on the design flaws of the application based on usability testing.
COLLABORATION PHASE:
Understanding the development team's concerns and constraints based on language of coding and platform used, coming up with design solutions that address mutual necessities.
REPORTING PHASE:
Presentation of the solution to the faculty in-charge.
Presentation of the solution to the faculty in-charge.
III. COLLABORATION PHASE
Development team POV:
1. The application is done in Unity. Thus, with respect to making a simple design and to have a maintainable code we finalized on minimalistic design strategies.
2. Minimalist design takes less time to develop. Due to time constraints in bringing a final uplifted remodel of the application using this method was very vital at that time.
3. This also reduces the internal memory used which in turn reduced the turn-around time.
User POV:
1. The cognitive processing required to understand minimalistic design is less.
2. From a visual standpoint, minimalist design is meant to be calming and to bring the mind down to the basics.
3. Easy animation is always appealing to human mind.
4. Card-Elevation design was used for the options given in Modules: The 3-D shadow attached to such designs grabs the user's eye and focus on these menu options and intuitively makes them want to click on it.
5. Rounded rectangular design attached to the card design as it has a more user friendly appeal and fashionable appeal nowadays. (Apple 1976 patent windows rounded)
5. Rounded rectangular design attached to the card design as it has a more user friendly appeal and fashionable appeal nowadays. (Apple 1976 patent windows rounded)
WIREFRAMING AND VISUAL DESIGN
MAIN SCREEN
Previous Main Screen:
Redesigned Main Screen:
Idea: Name of the brand and creative way to fix the name of the application in User's mind
MODULES
Previous Module's Design:
Previous Module's Design:
Module Redesign
Based on Newton's 2nd law thus, to focus on angles the idea of a football dribbling in a particular angle to draw in the child using the application.
Previous Module Design
Module Redesign
Based on Newton's 3rd law: Image depicting equal and opposite reaction.
Usability Tests
Questions:
(Ask: A 1-2 line opener to explain what the project is about and what we expect from him?)
PERSONA QUESTIONS:
MAIN SCREEN:
LEVEL 1:
[Redirect the user to clear button if he went for the wrong one]
b) User first, may input only positions; ask him to play as soon as he only inputs position, check if he understands the pop up of invalid state.
c) Ask him to input initial position and displacement. Check if he prefers inputting a certain way and why? (Has a preference of only inputting positions or can have a preference of inputting both) [Check with physics team about this]
d) Check if understands that STEPP is calculating the final state position.
e) Check if he understands that he always has to input displacement by the user.
f) Check if changes the object/model.
g) Press play and check if the car’s movement is a satisfactory reaction to the user.
LEVEL 3:
OTHER THINGS TO DO:
(Ask: A 1-2 line opener to explain what the project is about and what we expect from him?)
PERSONA QUESTIONS:
- Tell us about yourself?
- How much exposed are you to physics concepts?
- What difficulties did you face in physics? Did you like working on physics?
- Have you used any physics app before?
- What is an ideal physics app according to you? How will you want it to help you? What things will you add in your app?
MAIN SCREEN:
- What is your impression of this screen?
- Which module will you select? Why?
- Which level is he proceeding to and why?
LEVEL 1:
- What is the first CTA that the user pays attention to?
- Will you press the plus button?
- What do you understand by this content?
- Ask the user to play the car based on the instructions of state diagram. (Check what the user intended while doing the state diagram, check if he is satisfied by the car and its movement based on the state diagram)
- Can you save the state diagram and load it again?
- Can you create a new state diagram by removing the existing one?
[Redirect the user to clear button if he went for the wrong one]
- Ask the user what all CTA’s he noticed? (Note if he notices the time, velocity, acceleration CTA)
- Observe which CTA does he approach first?
- Check if he can add a blank state, if not redirect him towards adding the first state.
- Check how he handles inputting values in first state.
- Check if he goes to set units. If he does that’s okay, he can choose at any time. If he doesn’t ever, note that and ask to select units at the end of inputting values. Once he does ask to explore all the units. (notice his reaction on the change of screen, if he understands the change)
- Notice his approach in inputting values:
b) User first, may input only positions; ask him to play as soon as he only inputs position, check if he understands the pop up of invalid state.
c) Ask him to input initial position and displacement. Check if he prefers inputting a certain way and why? (Has a preference of only inputting positions or can have a preference of inputting both) [Check with physics team about this]
d) Check if understands that STEPP is calculating the final state position.
e) Check if he understands that he always has to input displacement by the user.
f) Check if changes the object/model.
g) Press play and check if the car’s movement is a satisfactory reaction to the user.
- Ask him to create more states. (Check how he creates it and if he has any difficulties in it)
- Check if understands why initial position is already fixed.
- Note down if he inputs final value or displacement value. (If he put final value, ask why and redirect to putting displacement value.)
- Play the vehicle.
- Bring user’s attention to graph CTA:
- Notice if he uses the scaling of graph.
- Notice if clicks on the graph icon or the entire graph CTA.
- Ask him to scale if he does not notice, and ask him why he clicked on the entire CTA to open the graph rather than the graph icon if he does.
- Ask him to note down the values at several time, position movements and check if he has any difficulty noting them down. Check if he can do it during the formation of graph or after it has been formed.
- Check if he notices the position CTA in the right most corner and whether he uses that to note down values.
- Note down his understanding on the movement of car ( That it is 1-D motion)
- Ask him to clear the state diagram and redo one. (Check if he uses reset or clear button)
LEVEL 3:
OTHER THINGS TO DO:
- Provide physics examples to solve using STEPP- CHECK IF THE CAN SOLVE IT, notice the difficulties, and check if they come to the correct answer in the correct method.
- Prepare a mental model, step by step (where you looked at, what did you feel like having an urge to click on, where you actually clicked and how you proceeded)
LEVELS
Previous Level Design
Previous Level Design
Working Process:
Heuristic Evaluation
Issues Description:-
1.When a user opens the application, there are two types of CTAs on the screen and no direction as to which is more important, thus confusing the user.
2.The save, load, clear, back to levels button are huge in size, thus distracting the user from paying attention to the action button first.
3.The play button grabs the attention next. This is because it is designed properly with a symbol (play symbol), whose meaning most people understand.
4.The first step of this interface should be pressing the plus button to add the actions. But that fails to happen because the users doesn’t understand what the plus sign means and what he needs to do using the button. He also has other things to distract him like, the over proportionate save, load, clear buttons and the familiar ‘play’ button which has a different size compared to other CTAs.
5.When the menu pops up the plus button disappears. Disappearance of the button and the states being added to the left of the button causing the button to move to the right every time an action is input, confuses the user about its graphics.
6.The actions to move the vehicle are not in any logical order.
7.The user cannot read the states behind the menu as they are blocked by the pop up menu. Only way to read them properly is to close the menu.
8.As soon as the states are added one by one, the action button moves. That can frustrate the user and may cause cognitive overload i.e when the user is doing one thing he has to think of some other thing, all of a sudden. This disrupts his own thought process because of a cognitive overload.
9.The actions to move the vehicle are not in any logical order. Also the arrangement of tiles shows an indecent design can be kept rom top left to bottom right)
10.There is no limit set on the number of actions that can be added. If it is necessary to kept it that way, when the states increase in number, they go off the screen.
11.The difference between a clear and a reset button is confusing to the user. Clear button can be programmed to do the work of the reset button along with its own function.
12.The table of time, velocity and acceleration values, is pretty important. But, it is hidden in the corner and not visible right away. The values also change very quickly and are hard to note down.
13.The save and load options are very complicated. The window can be made bigger and the color can be changed to something subtle.
14.The user can still make changes even after he plays the sequence
15.There is no way for a user to edit the sequence without resetting it.
16.The wallpaper size is much more than the bottom part of the interface which has the button. Which leads to a lesser room to make a better design.
17.To add more visual effects, when the vehicle moves in the background an effect of trees moving should be shown, or wind blowing.
18.Values in the time, position, acceleration box, should be reset when new actions are added i.e when action is button is pressed, to avoid confusing the user on detecting the values.
1.When a user opens the application, there are two types of CTAs on the screen and no direction as to which is more important, thus confusing the user.
2.The save, load, clear, back to levels button are huge in size, thus distracting the user from paying attention to the action button first.
3.The play button grabs the attention next. This is because it is designed properly with a symbol (play symbol), whose meaning most people understand.
4.The first step of this interface should be pressing the plus button to add the actions. But that fails to happen because the users doesn’t understand what the plus sign means and what he needs to do using the button. He also has other things to distract him like, the over proportionate save, load, clear buttons and the familiar ‘play’ button which has a different size compared to other CTAs.
5.When the menu pops up the plus button disappears. Disappearance of the button and the states being added to the left of the button causing the button to move to the right every time an action is input, confuses the user about its graphics.
6.The actions to move the vehicle are not in any logical order.
7.The user cannot read the states behind the menu as they are blocked by the pop up menu. Only way to read them properly is to close the menu.
8.As soon as the states are added one by one, the action button moves. That can frustrate the user and may cause cognitive overload i.e when the user is doing one thing he has to think of some other thing, all of a sudden. This disrupts his own thought process because of a cognitive overload.
9.The actions to move the vehicle are not in any logical order. Also the arrangement of tiles shows an indecent design can be kept rom top left to bottom right)
10.There is no limit set on the number of actions that can be added. If it is necessary to kept it that way, when the states increase in number, they go off the screen.
11.The difference between a clear and a reset button is confusing to the user. Clear button can be programmed to do the work of the reset button along with its own function.
12.The table of time, velocity and acceleration values, is pretty important. But, it is hidden in the corner and not visible right away. The values also change very quickly and are hard to note down.
13.The save and load options are very complicated. The window can be made bigger and the color can be changed to something subtle.
14.The user can still make changes even after he plays the sequence
15.There is no way for a user to edit the sequence without resetting it.
16.The wallpaper size is much more than the bottom part of the interface which has the button. Which leads to a lesser room to make a better design.
17.To add more visual effects, when the vehicle moves in the background an effect of trees moving should be shown, or wind blowing.
18.Values in the time, position, acceleration box, should be reset when new actions are added i.e when action is button is pressed, to avoid confusing the user on detecting the values.
SKETCHED WIREFRAME 1:
SKETCHED WIREFRAME 2:
SOLUTION AND EXPLANATION
- The first sketch shows how the Level 1 of Module 1 will look like as soon as the user opens it.
- After conducting a heuristic evaluation and finding out the faults I managed to find solutions for such design issues. The following are the changes made to the overall screen design-
- The screen is horizontally divided into two parts, the upper part consist of the visual aspects of the interface including a vehicle, a wallpaper and the time, position, acceleration table while the lower part consists of an interface of buttons on how to interact with the upper level.
- The size of the upper part of the screen including the visual aspects, has been reduced. It does not contribute much value to the working of the interface than the lower level. Thus, increasing the lower part’s size provides more space to make a more user friendly design.
- The process of the interface should start accordingly:-
- Press on the action button.
- Select any actions.
- Actions get displayed in the form of state diagram.
- User decides on a vehicle.
- User presses play.
