This week I worked on getting the test results into a nicer format and summarize what we needed from our user testing. I also worked on the roadmap side of our group portfolio. 

Test Results

I gathered our results from last weeks user testing session in ABB and displayed them in a more functional way. I calculated out our SUS score into excel sheets and gave a general breakdown of what it means. We had a score of 60 which is just on the point of being a usable application. I expressed my thoughts on potential bias and how the SUS score is still only a general guideline that people follow. I also re-hashed what difficulties came about. I focused on specific areas where there were issues and noted all bugs people found when playing. These were all wrote out in the testing document set up between me and Kieran Keegan.

Mahara Roadmap

I attempted work on the Mahara road-map. I began thinking of a potentially viable way of constructing the road-map in Mahara using the knowledge from previous pages. I spent quite some time attempting to get some visual resources for the page and attempting CSS animations on parts that would need it. I had some difficulty getting this right as Mahara is tricky to develop these kinds of web designs in. I ended up leaving this as there were a number of issues I could not sort out from Mahara. I made the plans to then develop a poster version that could just be a large image to use instead. It would have been nice to have the interactivity and more responsiveness however I found it to be non-viable in Mahara.

Issues

The issue this week was on developing the road-map. I spent quite a number of hours attempting this before eventually summing up that it was not possible in the time we had.  

This week was prioritized around user testing in ABB. Since I was over laying out testing in our team, I took responsibility for organizing everything needed for our user testing session. I attempted to implement my animated buttons, however this had to be reverted as there was conflicts from scene changes between pulling and pushing. There was also an intro scene in this I had got working which ended up being reverted.

User Testing

This was a majorly important task for our team. I had the help of the whole team on this and each of us got involved in some way or another. We contacted ABB and organised for a suitable time for ABB to perform some user testing on our application. We organised the session and had the participation of two users, one of which was going to be testing with no prior information on the application. 

Leading up to this I had prepared consent forms for allowing us to use the data gathered and give the users some information on what it may be used for. It was noted that anything released outside of the team would not include names. It also asked for permission on recording the session. I also prepared a form for some focused feedback. This focused on areas we wanted feedback on and was in case no feedback was given for that area in our general feedback discussion. I also prepared SUS score forms which allowed us to mark our application on its usability.

For user testing I got the help of Charlie for visually recording on a Canon DSLR camera, Kieran for audio recording on a Zoom H2N mic, Arnas for technical help if there were issues as he knew the hololens best and also Cormac for our discussions. I kept the formalities in place and ensured it was all followed to plan.

The plan was for the user to first sign the consent form, play the demo, give SUS feedback, give focused feedback and then have a discussion with us on difficulties they had and anything they wanted to raise. 

Overall it went well and proved very insightful to what changes needed to be made to the application. 

Button Implementation

I put my animated buttons into the scene and fixed some minor bug that was occurring on the animation sometimes. The bug that was occurring was where the positions and anchor points would either reset or be off sometimes. This was when the button would change from the select state back to normal. I fixed this by adding the extra values needed for the button to always start at the exact same design.

The buttons were added to the main menu, and back panel buttons, I left the focus buttons as these needed an extra script for compound text and also had a nice look being square. The button on the scorecard was also left out since it was not a good fit and looked out of place. Arnas also changed the icons on the focus buttons to the ones I had got. Any interaction with a wire was given a wire icon, a new ABC was given a rotating arrow icon and the setting binary used a magnifying icon since the ABC was brought closer.

Intro Scene

I created a new scene which loaded the training day logo animation charlie had made. I used my own script to have everything load asynchronously while the animation played which was good design for later when our scene would have a load time. The files were all animated on their own but would only play after the initial load of the next scene started so as not to cause any frame drops and keep a smooth look. This took some time to get right.

Issues

My only issues this week were my own. My scene corrupted in one way or another and when merging and pushing, it had overwritten some changes that were just made. This caused them to get reverted. 

I spent this week working on getting ABB Training Day its own buttons instead of the microsoft buttons that were in the project. I animated these buttons and gave unique animations to the icons in these buttons. 

Button Concept

I started off as usual with creating concepts from ideas and seeing what worked well and what didnt visually. I spent some time checking color schemes and what button styles are popular at the moment. I went for a flat colored button style with reversed colors when it is focused on, and then a solid color all over for being selected.

I sourced the icons and sized them all to an appropriate size. I colored them all white for use in unity. With this we can easily change their colors through the animator or scripting. I also separated some parts for use with animations.

Button Creation and Animation

I created the button layout in unity with canvas' and panels. I used a text object and image for an icon. I had this created from the Microsoft button object so as to take most of the functionality from that and ensure there was no difficulties with applying the button to the project. The button has a rectangular 3d mesh behind it for better look in Augmented Reality. 

I animated the button for each of the button states; normal, focused and selected. I set up the animator to cycle through all of these and handled the transitions differently for each. From these i also set an event in the focused animation. This sets an icon animator to true and allows an icon animation to start. 

Icon Animation

I went about animating all of the icons individually. Each has a fitting animation and helps the button have a bit more responsiveness. It looks very clean but took some time to do. The animators all had to be set up individually as well and is the only more manual issue when setting up the buttons. I will fix this at a later date. The icons are animated only when they are being hovered over. Icon animations are stopped and the normal state set when the button is selected or not being focused anymore. This had to be done via script as the animator plays through the last animation before switching normally which did not look clean. 

Icon broken into separate components to animate

From a technical view, the animator from the icon button has an event that triggers a method for turning on icon animations and also another event for turning them off. The event sets a Boolean called "shouldAnimate" in all animators in the children of the button to true or false. The icon animators are counted in this and once the Boolean should animate is set to true, they transition into the animation for animating the icon. The transitions are set to be 0 in length so as the animation starts and stops instantly. This is because UI response should be instant and not delayed in any way.

Icon animator

Icon animation transition (has exit time unchecked = no transition)

Conclusion

I set up a button prefab with example animation and text but not a prefab for each button. I did not implement this myself into the project as I did not want to mess with the button functionality already there. 

Issues

No big issues this week. I have thought of a better way of using the animator for icons that I could implement at a later date however its working as is right now. 

This weeks time went to doing work on my sound game project while the other team members were away. I spent all my time working on my individual Game Project for my Sound Design module. I worked on a lot of different parts of unity that I could use and apply in our ABB Training Day project. I worked on using the unity animator a lot.

Issues

Most of the team was away this week and so there was little work done on the project. I used this time for my own projects so as I dont have to worry too much in the next sprint. 

This week i worked on creating the end screen which is a report card. This card is for feedback to the user and should display their grade, the actions they performed and whether these actions are wrong or right and lastly it should display the time taken to complete the scenario. 

Report Card Creation

For the report card i started by creating some concept for what it might look like. I had a few different iterations and tried to keep to the theme of Training Day. I found one concept which followed the UI guidelines as closely as possible and kept the color scheme of the project. I created each of the graphical components in photoshop to be used in unity on the canvas' and panels. 

I created the card in unity using the Canvas UI elements and panels and text objects. I included a close button and then began tying in some functionality. I edited some existing scripts to keep track of the time the scenario is taken to complete and each action in between. I created a button manager to keep track of button actions also. I created a script that used the information from the game to populate and display the scorecard. This was called when the scenario was finished. For animations I used cormacs serial UI animator. This was to display each action one after another.

Issues

My issue this week was that I had to animate the list of actions and I had not learnt the Unity Animator. I used cormacs component for animating however it didnt work and needed changes to make it work.I have since learned the animator and have been putting it to proper use in Unity.

Update: Arnas went back over and added some animations to the score card himself.