Project #9 Consentful User Interface

link to code

Description

This is a consentful user interface I created for mu experimental camera. I tried to realize the value of F.R.I.E.S. for this project. In every step, the user has three options to go back, proceed, and exit. In addtion, I also tried to put clear and enough information about my camer before they use it. I also set up the feed back page for the users for improvement when they press exit button. I hope this will help users not only protect personal data but also enjoy an immersive experience. By putting my avatar and giving it a slight movement, I tried to bring lively and friendly feeling to the interface.

Design Process

This UI project is composed of 7 scenes including the intro page as you see the pictures above. I first draw the flow chart and then following it, I set up various buttons for each scene in Fuction Setup. The buttons includes start, exit, next, back, homescreen, allow, feedback, etc. I also used another type of DOM Input to leave opinion. After finishing coding structure, I added explanation, example photos, privacy policy, and feedback section along with my avatar images. I tested the interface more than twenty times to check if the buttons are working well as the flowchart. I tried to give enough information to the user before they use my camera and I also gave an option to leave any time for users' convenience.

Reflection

The flowchart plan really helped me a lot. I found without a seamless plan, it is easy to lose the logic of design. In addtion, I found user testing process is also important, which was the most challenging part. I tested this UI over and over again util I found no errors. I really enjoyed this logical flow from the user's perspective. I think the use of my avatar worked because it made the scene more lively with a slight motion. I hope this UI for may camera will be a convenient and comfortable experience for the users.I never noticed before that each city has different air pollution and Milan is the wost in CO.

Credit

Edge Detection: https://kylemcdonald.github.io/cv-examples https://inspirit.github.io/jsfeat/sample_canny_edge.html