Week11 Digital Prototype test & bug fix

In this week contact session, we were testing our digital prototype. In order to test create dream, view dream and explore dreams function, we designed three tasks.

Task 1

Explore dreams. View at least 3 user-created dreams and 2 special dreams.

Task 2

Create a dream.

Task 3

Find the dream you most recently created within the dream library.

Result

There were seven users tested our digital prototype, and they provide some valuable feedback to our prototype. According my observation, there is a problem for all different part of application which is no enough instruction when users explore and create dream.  

Instructions we should add to interface:

Orb

Hover: click and drag orb to the chute

Chute

Hover: over chute – drag orb to this to view dream - Glow

Add button

Hover: Click to add dream

Text input:

Hover: glow

Placeholder text: Insert dream text here

Emotion input:

Hover: select emotional impact of dream

Search bar

Placeholder text: Type images associated with dream

Hover: search images to illustrate dream

Refresh:

Hover: click to refresh image

Instruction: Drag orb to chute to add dream

New dream

Hover: Your last dream <- text on hover

Bugs to fix:

There are some bugs that need to fix.

Firstly, in the select images page, after click search button, and then click any refresh button will cause a bug which is can’t display another image anymore. The console.log show us that it’s seems like can’t get the image number from above.

when click first refresh button

when click second refresh button

The image number missing

In order to fix this problem, I move the variable definitions to the top as a global variable, because my team try to separate front end code from back end part, then they did some changes in the JavaScript, they didn’t notice about the code structure.   

Variables

Another problem is that when we first open the website, we can see all orbs (120 orbs) in one moment, because we hide all orbs when website do the initialization, but it’s take some time to hide all orbs, so that why we can see all these orbs.

In order to fix this problem, I’m thinking we can hide all orbs when initialize front end, such as adding a script into front end which can change the opacity of orbs. Then display orbs which from database by using JS in the back end, then the initialization in the front end will faster than back end.

Add script into the front end to hide orbs

Display orbs in the back end rather than hide orbs in the back end

However, I found another efficient way to do this, because if we add script in the front end, it still slower to read and it’s not appropriate, so we can just hide orbs by using CSS, change opacity directly in CSS is faster than any other solutions. 

Directly hide orbs in CSS