Posted October 27, 2022 by Stans
In a seemingly empty room with no decor whatsoever, through the 'eyes' of our application it can magically become a fully furnished room with all the (limited) choices you can choose from (within this prototype at least). This is no magic however but realised through the usage of AR technology as the bridge between the virtual world and the real world, such is the AR app that we tried to make.
Summary of design revisions since the last prototype
▪ More functionalities were added.
▪ A few of the 3D models used were changed.
2.1 Overview of technical development
The specific interface technology we would be using for this project is a Vuforia engine toolkit that is imported to be used under Unity. For starters we designed it to be used in tandem with an image target to project the 3D model to be displayed with the help of the device.
While the end goal of our application is to have it be used with a handheld device, we centred the design of our prototype to be used with a webcam and cursor for the time being due to some minor complications with scheduling and for ease of recording.
Within our application, we have several user interactions and adjustable options that have been developed that allow for the customization of the projected image to fit the user’s needs.
2.2 Current C# scripts and functions
● Change frame and Change image
These are technically 2 different functions but since they more or less effectively do the same thing they’ll be grouped into the same section. These functions are there to allow the user to change some aspects of the projected image so that they are more to their liking.
After clicking the icon that corresponds to the function, the user will be given a selection of frames or photos as a sort of dropdown box with the icons of the frames and photos in question that can be clicked on for selection confirmation.
● Enlarge or scale
This function serves to, as the name suggests, allow the user to enlarge or scale the image being projected to a different size.
To use this function the user needs to click and drag on the button while moving inwards or outwards depending on what the user wants to do. To enlarge the user has to drag outwards and to shrink it the user has to drag it inwards.
● Move
The next function is the function that lets the user move the projected image up, down, left or right relative to the screen that’s displaying the image.
This function is somewhat similar to the scaling function in the sense of how they work. To use this function the user also has to click and drag the button around on the screen to move it.
● Remove
This function removes the currently projected image, to activate this all the user has to do is click on the button that corresponds to it once.
● Hide
This function hides the row of buttons above the projected image so that the user can have a better sense of how the image would look by itself in its surroundings.
To use this function, the same as the Remove function, the user only has to click on the corresponding button once and they will all be hidden. Clicking anywhere on the image will bring back the buttons.
● Add
This function projects another image in tandem with the first one. Again, to use this function all the user has to do is click on the corresponding button once. The image that will be made will appear on the image target as a default position much like when the app first tracks onto it after starting up. The upper limit of what we have allowed the application to keep track of for the time being is 3 images.
For the 3d models to be used in this project, we went for a fairly simple start at first for feasibility’s sake and only included the use of three 3d models in the form of the Photo Frame that the user can switch between to encircle the chosen photo that is being projected by the app.
Image of the frames
We have also used 3d models for our virtual buttons in place of what 2d button allocations the Vuforia engine would have normally assigned to the project as a default. As mentioned previously, in its current state, the project that we have is only capable of showing a photo frame with a row of buttons on the top of the projected image.
Image of the buttons
The frames exist as an, albeit, limited pool of options for the user to choose from but the idea behind it from the development phase is that it would allow the user to know the current stock of products available to be chosen from directly without the need to get into contact either digitally or in person by taking a trip to the store just to ask about the details with a staff member. This option would have let the user know their options even while they are thinking about where they put the product in question.
The use of our other 3D model and the buttons is to give the user an added sense of depth when using the app. Since as most of the students in this unit that have worked with virtual buttons can attest to, it can be very finicky to get the camera to detect if you are in contact with the button or not since they are not physically existent in the real-world space. Hence why we tried to add a sense of depth to the buttons in the hopes that it may make them easier to work with.
To discover the problems that users encountered while using the product, and the features and actions that users liked or disliked before the product was released, we design a usability test plan that provides users with a series of tasks to complete. Next, we will put forward improvements to solve these problems. The usability tests of our product were conducted in a controlled laboratory environment.
4.1 Lab-based Usability Test Plan
Product under Test: Photo Frame
Test Objectives:
To collect usability issues with Photo Frame to avoid the risk of reporting imperceptible unresolved issues.
Business and Experience Goals:
Find and resolve Photo Frame’s technological thinking to make it usable and effective. 3D content presentation and interaction such as moving, positioning, scaling, choosing and replacing images and frames, will be the focus of the answer.
Participants:
▪ Must have at least six months of experience using Windows 10 computers.
▪ Own a computer running the Photo Frame app.
▪ Agree to sign the usability test participation consent form.
Equipment:
Fixed-position cameras & Webcam for recording software
Test Tasks:
Task1: Recognize the icon in the edit toolbar
▪ Open Photo Frame software.
▪ Click the default photo or frame.
▪ Identify icons in the edit toolbar.
Task2: Frame -Choose a frame, then replace the frame around the photo.
▪ Click the photo or frame.
▪ Select the frame in the frame menu.
Task3: Image - Choose an image, then replace the photo in the frame.
▪ Click the photo or frame.
▪ Select the image in the image menu.
Task4: Enlarge or scale - Resize the photo in place.
▪ Click the photo or frame.
Task5: Move – Reposition the framed photo along the wall.
▪ Click the photo or frame.
Task6: Delete - Deletes the current framed photo from the scene.
▪ Click the photo or frame.
Task7: Cancel - Cancels editing, and restores the default picture.
▪ Click the photo or frame.
Task8: Add - Creates a new picture in the scene, ready for editing.
▪ Click the photo or frame.
Location & Dates:
SB.AR15L01139 Lab at 2022/10/24 1:00 pm
Testing Procedure:
4.2 Recruitment
Eight volunteers, four males and four females were recruited. They differ in age and occupation, with three students in their 20s, two in their 30s, two in their 50s and one in their 60s. Their occupations were students, paralegals, medical assistants, customer representatives, store sellers, housewives and retirees.
4.3 Protocol of the testing
All participants were asked to read and sign testing the consent form before starting to carry out the test tasks.
The final post-test System Usability Scale (SUS) aimed to reveal the usability of the Photo Frame as well as the overall user satisfaction.
4.4 Report of the findings
All eight participants completed all testing processes.
● All Participants successfully installed Photo Frame and entered the main screen. All recognized five icons, and four people did not recognize the remaining three icons.
● All Participants have successfully replaced frames, replaced the photo, deleted, cancelled, and added a framed photo.
● 6 people completed the scaling and moving, but the other 2 people were not familiar with the use of the scale and move icon and were guided to complete the scaling and moving.
In the Post-test questionnaire and interview, eight people think that the photo frame is easy to use, effective and can be used in daily life. But one hopes that the picture can be added to the picture he wants. Also, everyone mentioned that there is no feedback from the UI when a button or a clickable object is clicked.
4.5 Analyses of the findings
We analyzed videos recording users’ carrying out tasks and coded and classified the post-test interview transcripts. In conclusion, the participants were very interested in the product, and some of them commented that the product inspired them to preview the effect of different decorative photo frames in the room in the way. However, there are still some technical and usability details to work out, such as adding animations to each button when they are clicked, as feedback from the system UI is important for each user action. If the user can customize their photos in the frames, the user experience will be better.
5. Addressing the Results of the Usability Testing
5.1 Detail a plan to address the user feedback
Based on identified issues and analysis of user feedback, we have made adjustments to the technical usability details that need to be addressed. According to the priority, the detailed plan list is as follows:
1. Create animated feedback for each button in the edit toolbar.
2. Add text markup to each button in the edit toolbar to help users quickly identify its function.
3. Add the types of photo frames and the number of pictures that can be chosen in the application, including support for users to upload localized pictures, of course, 1280 x 774 pixels are required.
5.2 Detail the changes made to the interface application
When the SimpleIcons button is clicked does not allow the user to experience the animation feedback. So we plan to add a one-second delay to the execution of the action of the script.
We also added text markup to each button for ease of use.
During the whole process of development and iterative improvement, we have implemented all the functions of the PC side of Photo Frame, and when trying to port the APK file to Android, unfortunately, the button does not work properly when opening the application after installing the APK on the Android phone.
In the future, we will continue to expand the functionality of the application, such as further optimizing the position and size of the tool buttons in the interface. Considering that our main target platform is mobile, how to present and implement the functionality of the application concisely and completely on the screen is an important part of our follow-up plan. We will also aim to finish the final version on mobile and continue to try bigger areas, such as with interior furniture decoration like sofas, chairs, tables and so on.
The last vision we have for the app at this stage of development is to utilize a tracking technology called AR Core which directly scans for flat surfaces in front of the camera to project the 3D image onto. The benefits of this technology are that for one, it does not require the need for an image target to be scanned and secondly, as a direct result of not needing an image target it is not susceptible to occlusion, making it easier to use. This was an idea we toyed around for a bit after it was suggested to us by out peers but ultimately decided to stick with the Vuforia engine first until we finished this version of the prototype.
University of Tasmania, (2022) KIT724 Virtual and Mixed Reality Technology, Course Materials, Hobart
Virtual and augmented reality : concepts, methodologies, tools, and applications / Information Resources Management Association, editor (2018). IGI Global.
Barnum, C.M. (2011) Usability testing essentials [electronic resource] : ready, set-- test / Carol Barnum. Morgan Kaufmann Publishers.
https://www.pexels.com/photo/mountain-highway-prairie-the-scenery-37648/
https://pixabay.com/photos/mountains-cosmiques-ridge-1828596/
https://pixabay.com/de/photos/berg-rarau-bucovina-rum%C3%A4nien-201525/
https://www.peakpx.com/597641/body-of-water/crop
https://www.pixibb.com/image/mountains-lake-reflection-alps-alpine.HpZRJ
https://pixabay.com/zh/photos/lake-coast-nature-water-hills-192983/
https://assetstore.unity.com/packages/2d/gui/icons/avatar-frames-hq-230961
https://pixabay.com/en/users/raphaelsilva-4702998/
https://github.com/ARUnityBook/ARBook-Vuforia