WEEK 15 TECHNICAL & CONTENT
Do Good Project WEEK 15
Based on the usability test I've conducted previously, here are the results.
The usability test result:
- The number of users: 5
- Questionnaire link: https://forms.gle/AqxKi29jYe7KhLJCA
Lo-fidality (the questionnaire)
Key Takeaways:
- 100% manage to complete the task.
- 75% find the task is very easy.
- 100% find the layout, icons and the information are sufficient and clear.
Post- Test
Key Takeaways:
- 40% of the users are satisfied with interaction design, whereas the others are quite satisfied with it.
- 80% find that it's easy to navigate through the mobile webpage.
- 80% was not lost whereas the 20% is lost at the Join Space.
- Only 60% of the users find it's quite easy to understand the UX content writing.
- 40% find the content writing for Join Space is confusing whereas 20% is confused with the traits and keywords.
- Overall, the users think that the interaction design and mobile webpage achieve the purpose of creating awareness about the important of financial literacy through being informed about their budgeting traits and the interaction with other traits.
Improvement on the Lo-fidality
- Throughout the user test, I observed that the users are not entirely sure with the relation of the traits within the interaction design. Therefore, I added Pop-Up cards where it shows a short description of the relation of the traits and its effect it causes.
Technical development
Improvement on the navigation of the interaction design:
I noticed the user having a hard time to navigate the character during the user testing. This prompt me to develop a joystick to allow ease in navigation for the next beta test.
I managed to find the code reference to develop the joystick, but some changes still needed to be done in order to communicate the joystick data to the server.
Improvement on the object communication:
Speed and Size are the two effects I'm focusing on.
I managed to make the red circle with the attribute of its size being increased while the green circle decreases the size of the red circle. However, there's a bug where the red circle lags when it's trying to decrease its size. I assume this is due to it's trying to increase its size while decreasing its size, thus leading to the lagging.
Info:
Red (Procrastinator): Size increase
Green (Saver): Decrease the size of the procrastinator.
I have also encountered another bug whereby sometimes the green circle become the one that its decreasing in size instead of the red.
In here, I managed to make the yellow circle speed to go faster than the default speed. It's harder to control which it's what I'm aiming for. But I haven't managed to make its speed decrease when it communicates with the blue circle.
Info:
yellow (spender): Speed increase
blue (planner): Decrease the speed of the spender.
Fixing on some bugs:
During the user testing, there are some bugs encountered by the user. Some of which is when the user refreshes their page, the circle before the refresh is on the new page. Hence, it looks like there is an extra circle that shouldn't be there.
I assume this is due to the server detects a new connection whenever there's a refresh and new connection means creating a new circle. However, I didn't consider making the server to detect a disconnection which means to remove the circle. So, I managed to fix the bug by doing just that.
In the video shows whenever there's a refresh, a new circle appears, and it remove the previous circle. when I close the tab, it removes the circle.
- iamrachelle (n.d.). Making a Joystick With HTML (pure JavaScript). [online] Instructables. Available at: https://www.instructables.com/Making-a-Joystick-With-HTML-pure-JavaScript/
.png)
Comments
Post a Comment