top of page

- Designing for Interaction -

WEEK 1 

Introduction to UX, UI

HUD Analysis

Final Fantasy XIV Online

 

 

 

1.      Introduction

 

This will be my HUD analysis on one of my favourite MMO RPG - Final Fantasy XIV (massive multi-player online role-playing game). I chose this because I am very familiar with its HUD.

 

Final Fantasy XIV Hud is very easy to navigate and work with. You can customize the HUD for yourself and to help you for better understanding the character and to put the abilities which are combined together. Later on, it can be easier to work with your own customized HUD rather than learning and memorising where all the features are.

2.      The actual HUD

 

On the bottom, you can see my customized HUD which helps me to suit my gameplay for my owe need when playing this character. When you go to different characters you will have different Hud which you can customize at any time.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3.      Critical Analysis

 

The annotation of the game being done, now I will write about the analysis and the layout of the presentation of the HUD. I will explain all of the elements which the game has to offer for the Hud most of the hot bar list. The icons are made so the players can find it easier and simpler when they are confused about something.

 

There is also an option bar where it has a question mark icon where you can find anything you are interested to know. Furthermore, the game has a lot of information for players and it makes it very simple with short tutorials of how to use and where to use.  Most interactions in the Hud, for example, are that the menu bar has 6 icons which are placed for me on the very top right where I found it easier to navigate. With the simple icons which I have been placed there, I understand what the meaning is and each one of them are. Also, the colour is not distracting, and it is quite a simple one which gives more of an expression. The colour of the icons is the same as the colour of the map and also, the quests as well, so you will know that these icons are mainly for the game.

 

If you do not understand or the actual taskbar and what exactly it is used for, without being said, you can see there are a lot of elements which can be overwhelming. That is why when the game starts, before it starts, with the hot bar and slowly whilst your progress in the game you will see the UI has been expanded and the HUD becomes more interactive with the player which is a very unique way in MMO RPG to show the game for what it is. You will see that my level 80 character, which is right now the high-level cap in the game, has all the UI settings in a different position unlike when you start the game. I have customized for this specific character, so I can see when and where I have to press my abilities.

 

That being said, it was not easy setting it up but then again, whilst I was levelling, I found out more interaction icons appearing.  Also, every time you level up and a new ability or a new element gets put into the Hut gets an icon on the side to explain it to the players, so they know what the actual item is or the actual ability. Even they placed some stuff on the HUD that has been explained with a small description - simple and easy to understand.

This is an image I found online with the default version of the HUD for Final Fantasy 14 Online, where players get used to the game and then they see how the load has been done for them so, later on, they can customizer it themselves. Seeing that Final Fantasy has no limits on customizing, characters UI and more to be seen, that Final Fantasy is one of the biggest MMO RPG games for a lot of players at all this time. You will see that the customization is endless, and you can switch up how you would like the HUD to look for you and also for the character you are playing.

Seeing that in Final Fantasy there is a lot of characters and the HUD is made for the character to suit the needs of the player, which they were, later on, used to make the UI look how they would be suited for.

 

 

with the annotation of the game being done now I'm going to be speaking about the critical analysis and the layout of the presentation of the HUD and explain all of the elements which the game has to offer for the Hud most of the hot bar list and an icons are made so the players can find it more easy an simpler when they are confused about something there is also an option bar where it has a question mark icon where you can find anything you're interested to know Furthermore the game has a lot of information for players and it makes it very simple with short tutorials of how to use and where to use and most interaction in the Hud for example the menu bar has 6 icons which are placed for me on the very top right where I found it more easier to navigate and with the simple icons which I have been placed there I understand what the meaning of each and one of them are and also the colour is not distracting of it and it's quite a simple colour which gives more of an expression which is the colour of the icons is the same as the colour of the map an also the quests as well so you will know that these icons are mainly for the game if you don't understand or the actual taskbar of what exactly they are used for, without being said as you can see there is a lot of elements which can be overwhelming that's why when the game starts before start with the hot bar an slowly whilst your progress in the game you'll see the UI has been expanded and the HUD becomes more interactive with the player which is a very unique way in mmo rpg to show the game for what it is you will see that my level 80 character which is right now the high level cap in the game has all the UI settings in a different position unlike when you start the game I have customized for this specific character so I can see when and where I have to press my abilities that being said it wasn't easy setting it up but then again whilst I was levelling I found out more interaction icons appearing and also every time you level up and a new ability or a new element gets put into the Hut gets an icon on the side to explain it to the players so they know what the actual item or the actual ability or even when they placed some stuff on the HUD has been explained with a small description simple and easy to understand

 

This is an image I found online with the default version of the HUD for Final Fantasy 14 online where players get used to the game and then they see how the loud has been done for them so, later on, they can customizer it themselves seeing that Final Fantasy has a no limits on customizing characters UI and more to go to see that Final Fantasy is one of the big MMORPG games for a lot of players at this time you will see that the customization is endless and you can switch up how you would like the hot to look for you and also for the character you're playing seeing that in Final Fantasy there is a lot of characters and the hot is made for the character to suit the needs of the player which they were later on used to make the UI look how they would be suited for.

Untitled drawing.png
Untitled.png

WEEK 2 ​

Mental Models and Implementation Models

WEEKLY BLOG TOPIC #2

CREATING WIREFRAME FOR PROJECT

Wireframe.jpg

WEEK 3

Psychology of User Experience 

WEEKLY TOPIC #3 

Project Proposal Document - Group 2

Ideas Document:

Proposal Document:

WEEK 4

Feedback and Signage 

WEEKLY TOPIC #4 

PERSONA MODEL

CREATED BY GROUP 2

User_Persona.jpg

'Mary' is the generic user persona which will be used for our product. Her personality fits the target audience of our game which is based of the genre of 'music'. We find that as her persona relates strongly to our target audience, she will effectively embody the third person perspective that will allow our target audience to empathise with our storyline. 

WEEK 5 

INTERACTION FRAMEWORK 

WEEKLY TOPIC #5 

Designing for the User

CREATED BY GROUP 2

WEEK 6

MOBILE AND TANGIBLE DEVICES 

WEEKLY TOPIC #6

Development Diary

Me and my team are creating a product,  a 3D puzzle game. We are using Unity to develop this concept. The idea overall is that you control a character which will go inside two different levels and will look for physical objects which contain part of a song and each level has one song, at the end of each level, all the pieces will combine together and the user will be able to hear the whole song.  

We started with Document for the Ideas and created a Discord server to communicate with each other. We all found a path to one concept for the game and started creating it. We know the user persona, the concept, how to start and etc. Each of us has different tasks. 

We store all the information and documents on OneDrive.  The first idea for creating the game was to develop 4 levels which to be the four seasons - Winter, Spring, Summer, Autumn. But then we switched the plan and we will create 2 levels and in each level to be 2 areas - for example - Winter Level will contain Winter area and Autumn area. 

Concepts from my team were given to me and I started working in Unity. 

Concepts for the level and assets: 

We have split the project into seasons and I have started working on the coding and main menu. Erika and I are focusing on Summer and spring whereas Indiana and Nikol are focusing on Autumn and winter. The images above show our teams current concepts.

Teamwork Document: 

 

 

Flowchart of levels:

thumbnail.jfif

WEEK 8 

AUDIO DESIGN 

Documentation Progress - WEEKLY TASK 8 ( WIP SCREENSHOTS)

Part 2 of the progress (Including TASK 2 - Designing Feedback)

We have progress, including documents and screenshots

Documents: 

Screenshots: 

WEEK 9 

Production Meeting Document: 

WEEK 10 

NAVIGATION STRUCTURES AND SYSTEMS

Weekly Blog Activity #10: Fonts & UI Elements:

Definitions

Navigation structure- This is how effective the viewpoint moves from up, down, left, right etc. 

Navigation system- 

1. Adaptive- This is dependent on how the navigation adjusts to fit the content

2. Content links- Links in the content of a page/ screen are a form of navigation

3. Findability vs Discoverability

Findability is when the audience knows something in advance in the product, whereas discoverability is where the audience does not know. Both should be easy to discover through interaction. 

4. Hub and spoke- This is the central hub where you explore and browse

5. Hybrid systems- A variety of types of navigation in a system

6. Interactive or gestural- When navigational elements are revealed after an interaction. 

7. Search, sort and filter- Effective when there are vast amounts of content

8. Stream navigation- When there is a structed flow of content

WEEK 11 

AESTHETICS IN USER INTERFACE 

Weekly Blog Activity #11: User Journey

User Journey.jpg

WEEK 12 

USABILITY AND ACCESSABILITY 

Weekly Blog Activity #12: User Experience Feedback

Form Link for Feedback Survey: 

Musical Find Feedback Survey - Google Forms

WEEK 13 

THE ROLE OF THE INTERACTION DESIGNER 

Weekly Blog Activity #13: User Feedback Analysis

 

WEEK 14 

Weekly Blog Activity #14: Final Evaluation

 

Reference doc and how to play the game 

 

Game and how to fine it and play

On this link here you can fine play the game and see if you enjoy it as much as we did.

bottom of page