USER INTERFACE AND
ADDITIONAL TASKS SHOWCASE
The Score Card is the end game element that is displayed to the user. It was designed to show their score given in a grade form, the time taken in total to complete the scenario and also the mistakes made throughout.
The scorecard went through different iterations between being looking like an actual sheet of paper marked similar to a school grading to then a more cleaner and distinctive looking design as seen below. This design was chosen in the end as:
- It has a clear breakdown of statistics on the side
- A large area for a list of right/wrong steps
- It kept to the color scheme of the games logos and UI so far.
Score Card Unity Design
This was created as a prefab with a builder script attached that could be fed information to update the card.
Relevant Journal Entry:
I took charge of the User Testing for ABB Training Day. Testing was my secondary role in the team. I organised the user testing process within ABB and compiled results in an easy to read way after. I summarized main points and issues brought up in the meeting and brought their attention to our group after.
For the formalities of user testing I had to prepare some questionnaires designed around feedback on specific areas we needed covered and then also for more general feedback they may have that we had missed. I prepared consent forms to ensure everything was above board and the users knew where their test data was being used.
Equipment used:
- H2N Zoom Mic for audio recording
- Canon DSLR Camera for video recording and images
example responses from user testing
Relevant Journal Entries:
For the project I created custom animated buttons. These buttons were to the same style and color scheme of Training Days UI Elements. They featured their own animations and had animator events controlling their visual state. I built them off of Microsoft Holokit Buttons to ensure they would cause no issues in the Hololens.
The buttons consisted of:
- Text for clarity
- A large rectangular base for easy interaction
- Icons for extra context on what each button was and create familiarity with the user
- Icon animations to give the buttons more responsiveness and a more professional look
I created a prefab instance of the main button and the animator and sprite could be changed for the button to suit its purpose. I created over 9 different animations for icons including: plugging in wires, plugging out wires, inspecting an item, scenarios, quitting, back,
button and icon with on hover animation
Relevant Journal Entry:
I took the lead on designing our group portfolio. This may not have been on our application however it was still space to design graphical elements for and directly affected the project. I spent quite some time over developing our group project Mahara page. I spent time creating custom button images, some CSS animations and also the general layout and design of the pages. I started with rough ideas of what the pages should look like and what content would be good to show.
I decided that it would be good to break our pages into:
- Our design doc
- Each member and their roles
- Each member and their technical challenges
- Our latest work
- Each release (paper prototype, alpha, beta)
- A road-map of our development
The plan was to try and get a few animations in every page to get the responsiveness of the page up and allow any large amounts of text to be hidden. I wanted the pages to be minimal but with splashes of vibrant color.
Icons Created
Icon Hover Animation
Relevant Journal Entry:
The radial menu is a User Interface Component originally designed to be used with GUS. This component is designed to have been easy to use with Augmented Reality. This component was designed with large and very spaced out buttons. It would have been quick to see every option for the user and since there is a lot of control with head movements with the Microsoft Hololens; selecting an option is easier with multiple different directions.
The radial menu was first sketched up with different designs in mind and soon changed to be what is seen in the journal entries below. The main points about the design of the radial menu were:
- It filled a large amount of space
- Icons were cleaner and would be quick to learn
When designing this in unity I created it as a prefab to be added onto any game object. Given a list of icons it would create the same number of icons in a radial pattern. This allowed for easy implementation and simple configuration by taking use of the Unity Inspector.
Relevant Journal Entries:
The user guiding line is line that GUS uses to show the player where an object or component is. It is a Spatial Representation UI Element. This tool is important as it removes annoyance and is a good general practice for games. The guiding line is a line drawn in 3D space from GUS to the Component.
I started creating this line with Unity's line renderer. I drew this line around objects in the way to give the user a clear path to follow. This also changes the radius for the line depending on the size of the object also. I then used a shader in Unity to animate the line to direct the user.
For a technical view, I get the source and target object transform positions. I normalize these points and then find the start and end points of the line renderer slightly out and away from the objects. I then raycast between these points and find the objects hit in between. Feeding their collider size and position to a method I use I get 50 points around the object and add them to the line renderer. This uses basic sin/cos math and continues until all objects are drawn around. I finally created a moving shader texture which gives the user a sense of direction. This makes the line even more clear to follow. I looked at having an emission texture which would make the line glow, however it is not currently possible with this implementation.
Relevant Journal Entry: