Do Good Project WEEK 14
During this week, I continue to develop the Lo-fidelity prototype. I received pointers in making sure my ux writing align with the objective of my interaction design as well as adding a community platform to handle discussions and so on.
Feedback: the objective is to understand the financial characteristics and its effect on managing their finance
Feedback: The interaction design is to communicate with various other financial characteristics that show the effects of their habit in managing their finance.
Feedback: The interaction design is to show what happen to the finance habit when interacting with others.
I also further develop on the character traits by utilising the financial jargons I researched last week. To summarise everything, spendthrifts/frugalists affect the speed of the users, debt-averse/debt-neutral affect the size, long-term/short-term is the control and lastly, conservative/aggressive affects the colour of the individuals.
Budget habit concepts & traits
Lo-fidality development
Lo-Fidality Walkthrough
Technical development
Multiple client (issues)
Previously, I have shown that the server is able to handle multiple clients. But as I try to use the same method, the circle from each client synchronizes with each other when each circle supposed to move independently. I suspect this is due to the circles are using the same element style.
I thought of the possibility in storing an array into localStorage which 'maybe' will allow me to achieve multiple clients. I have yet to explore the method as I want to focus on exploring object communication as well. For now, I'm only able to make two clients with each of them have their own circle moving independently.
Object Communication
Next, I'm able to establish communication between two objects by using pythagorean theorem. This is to measure the distance between the center of the two circles. When the circles intersect with each other, it means they are interacting with each other.
Gyroscope (issues)
In my previous report, I mentioned that I'm having trouble to make the gyroscope work in my mobile phone. I did some research and some articles suggested to install an SSL certificate within my server. This will make the localhost, 'secure', so the gyroscope may work. However, I'm having trouble in establishing the SSL certificate.
In the article, it mentioned to edit the vite.config.ts but I'm unable to find the file within the package I downloaded. I think this is because the method only works for React but I'm using p5js and nodejs.
I have tried other method like enabling #allow-insecure-localhost flag in Chrome's experimental features (chrome://flags/), which theoretically should allow invalid certificates for resources loaded from localhost. This is to attempt to bypass the HTTPS requirement for the gyroscope event. After trying out, I still experience issues with the gyroscope event.
This made me quite confused as the gyroscope works when I used the developer tools (sensor) provided in the google chrome inspector. However, it doesn't work in the mobile chrome website.
This prompted me to change to another alternative way, which is using touchMoved event to move the circle and it's a success
Socket Namespace (issues)
My interaction design requires two platform with one platform handles the user input (the mobile device) whereas the other platform handles the output (the projected content/the characters). I thought of using socket namespace in order to create two separate platform.
Socket namespace tryout:
As I tried out, I wasn't able to get it work as I got the error 404. Frankly, I'm not entirely sure about the reason for this. I suspect I might have missed out something in the code.
Usability Test
On 19th February, I conducted my usability test. I've listed out the objective of this test below:
The objective of the usability test:
- To assess the navigation of the mobile webpage
- To assess the user tester’s understanding about the mobile webpage’s content, including the clarity and coherence of its UX writing.
- To assess the effectiveness of the interaction design in raising user awareness of their budgeting habits and the impact of these habits on their financial well-being. (the feedback mechanism in encourage positive financial behaviour.)
Questionnaire:
https://docs.google.com/forms/d/e/1FAIpQLScxKtjpGkMuphY4LwGnhKlGXvDkSLtCXIgamcZsu3sbpBrMxA/viewform?usp=pp_url
Technical reference:
Android Enthusiasts Stack Exchange. (n.d.). How do I allow Chrome Android to load ‘insecure’ or ‘phishing’ content? [online] Available at: https://android.stackexchange.com/questions/88832/how-do-i-allow-chrome-android-to-load-insecure-or-phishing-content
CoderOne (2018). Node.js Socket.io Namespaces, Rooms and Connections 02. YouTube [online] August 22. Available at: (23) Node.js Socket.io Namespaces, Rooms and Connections 02 - YouTube
DEV Community. (2023). Testing device orientation (gyroscope) on localhost using Vite. [online] Available at: https://dev.to/rashidshamloo/how-to-test-device-orientation-gyroscope-on-localhost-using-vite-16bf
MDN (n.d.). Element.getBoundingClientRect() - Web APIs [online] Available at: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect.
socket.io. (2024). Namespaces | Socket.IO. [online] Available at: https://socket.io/docs/v4/namespaces/
Stack Overflow. (n.d.). How do I store an array in localStorage? [online] Available at: https://stackoverflow.com/questions/3357553/how-do-i-store-an-array-in-localstorage
thecodingtrain. (n.d.). Object Communication Part 1. [online] Available at: https://thecodingtrain.com/tracks/code-programming-with-p5-js/code/7-arrays/6-object-communication-1
.png)
Comments
Post a Comment