UI/UX Design Principles

-
The purpose of user interfaces in video games is to facilitate communication between the game and the player. A well-designed UI system allows players to seamlessly navigate through a game and find information, while enhancing gameplay, player engagement and a sense of immersion. 

Simplicity  

- Only necessary information should be included. Clutter can distract the player and have a negative impact on immersion, Cognitive Load and Player Engagement. 
- Transitions and animations can delay a player's navigation if they are overused. 
- Gradually introduce UI elements to not overwhelm or confuse the player. 

Clarity 

- Provide a straightforward and streamlined navigation experience.
- Use simple and concise language. 
- Predict how the player will interact, navigate and perceive information.
- Have a beginning, middle and end to interactions and always give feedback to the player. 
- User interfaces should be designed to prevent players from making mistakes. 
- Information should be organised in groups which make sense to the player. 
- Prioritise information and use a clear hierarchy. 

Aesthetics 

- User interfaces should be aesthetically pleasing and reflect the character of the game. 
- The design style of a UI system can be influenced by relevant factors such as the game's tone, genre, characters, narrative, location and time period. 
- The user interface can strengthen a game's brand identity. 

Functionality 

- User interfaces should be designed with game mechanics in mind. 
- A good UI system gets the player from point A to B as quickly and simply as possible. 
- Functionality is more important than aesthetics. 


Responsiveness 

- User interfaces need to be responsive to a player's actions and have minimal delay. 
- UI systems should provide a smooth and seamless experience to players. 
- A good user interface should be able to adapt to various platforms and screen resolutions. 

Consistency 

- User interfaces need to have a consistent and coherent design style throughout the game. They should include a consistent application of colour, fonts, illustration styles, layout and button placements. 
- Inconsistent design styles and meanings can confuse players. 
- Consistent language should be used in prompts to avoid confusing players. 
- User interfaces should use a consistent interaction pattern, for example, swiping left to right through menus in a mobile game. 

Feedback

- The user interface should provide immediate feedback to players when they interact. 
- Feedback can be in the form of animations, transitions, outlines and sound effects. 
- Feedback shows the player that their actions have been registered and have an impact. 

Accessibility 

- User interfaces should be accessible to as many players as possible. 
- UI systems should be designed with disabilities, such as colourblindness and motor impairment, in mind. 
- User interfaces should enable players to use alternative inputs or customize their controls. 
- A UI system should aim to cater to a variety of skill levels and play styles.

Familiarity  

- User interfaces should use familiar layouts and design elements to streamline navigation. For example, most users expect the menu of a website to be at the top of the webpage and recognise a basket icon as the checkout.

Hierarchy + Layout  

- Hierarchy should be used to direct the player's attention and prioritise information. 
- Consider the player's gaze movement. The 'Z Pattern and 'F Pattern' can be used to organize information. 
- Hierarchy is achieved using colour, scale, fonts, layout and negative space.
- Layouts should be consistent within a UI system to not confuse the player.
Location: Preston, UK

Comments

Post a Comment

Popular posts from this blog

Sem 3 Submission

-
Image
Semester 3 Learning Agreement: : Western Project (UI Design) Research + Development Blog Posts: Week 1: Planning the Looting System Week 2: Design Characteristics of the Western Genre Week 3 + 4: Collecting Inspiration Week 5 + 6: Initial Concepts Week 7: Creating the Western Prototype in UE5 (Part 1) Week 8: Creating the Western Prototype in UE5 (Part 2) Week 9: Creating the Western Prototype in UE5 (Part 3) Week 10: Creating Loot Icons Week 11: Adding Pop-Up UI Elements Week 12 + 13: Creating Mission Passed/Failed UI Week 14: Improving the Lighting + Final Touches Knight Light (UX Design) Research + Development 
Read more

Semester 2 Submission

-
Image
At the start of semester 2, I had no prior experience with Unreal Engine 5. To broaden my skillset, I set a goal to learn the fundamentals of the engine and create functional UI elements within the engine, each with a unique design style. I initially planned to create a health bar, speedometer, and item collection counter; however, as I became more confident using Unreal Engine 5, I shifted my focus towards creating more complex UI prototypes tailored to three distinct game concepts, each with unique genres, themes, and gameplay. To achieve this, I dedicated most of semester 2 to learning about Blueprint scripting within Unreal Engine 5 in preparation for creating my 3 UI prototypes in semester 3.  Learning UE5: Throughout semester 2, I used tutorials and courses to learn the fundamentals of Unreal Engine, and then applied this knowledge by creating a variety of systems within Unreal Engine, such as health bars, door animations, item pickups, and more. Creating a book of common nod...
Read more

Week 7: Creating the Western Prototype in UE5 (Part 1)

-
Image
Creating a New Level I created a new level and called it 'my_saloon', and then I imported the following assets that I will use to build the environment: Saloon Interior ,  Old West VOL.1 - Interior Furniture ,  Old West - VOL 2 - Tradesmen Tools and Props ,  Old West VOL.3 - Travel Supplies and Goods ,  Old West - VOL 4 - Goods and Supplies ,  Old West - VOL 5 - Town Props and  Old West VOL. 6 - Town and Industrial . I then used the modular wall meshes from  Saloon Interior  to start building the layout of the saloon.  Creating the HUD I created a simple crosshair widget by adding a small white box and aligning it to the centre of the canvas panel. In the character blueprint, I used a 'Create Widget' and 'Add to Viewport' node to make the crosshair visible at the start of play. I promoted the return value to a variable so I can reference the HUD widget later. Creating a Working Door To enable the player to pass through an open door, I had to...
Read more