The Making Of World Hockey Championships Update 2 – More Menu Design and Device Challenge

WHC-The-Making-Of-World-Hockey-Championship

I have made some more progress on the game user interface in the last couple of weeks.  We have completed more of the user interface layout for the store, tournaments and have overcome a layout issue.  I will show you exactly how we solved it.

 

We did go back and make some improvements from the last milestones of this project.  There is a lot of back and forth as different parts of the app impact each other.

We added a store to the game for users to buy skill levels and chat packs with their coins/bucks and can purchase in-game currency.  The World Hockey Championships is using a two currency system with coins and bucks which is very common in many games.

Our graphic designer thought it would be a nice touch to add tabs at the side to go between the different parts of the store.  Check it out –

Hockey Game Coins Store

I also added bucks, skills, chat packs and promos tabs.

I am hoping that this will be more fun and let people compete at different levels.  This way, like a hockey game where a team can change their line halfway through, you can change your skill sets midway through a game.  It lets people step it up when playing tougher players and makes it more fun.

Hockey Game Player Skills

The Challenge

We faced the issue of different screen sizes and ensuring the game looks good on both phone and tablet.  When using the iPhone, it is a longer screen than when using an iPad.

The Main Menu would look like this on the iPhone.

IMG_1872

and like this on iPad Air

Screen Shot 2016-07-26 at 4.15.22 pm

On the iPhone, the user can see three full buttons but the user cannot tell there is a forth button you can scroll too.  You can see the third partially on the iPad.

Each side has a different resolution and we need to account for many of them.  For my testing, I took the iPad Air and iPhone 6 Plus.  On the iPad, the image is 1024 x 768 and on the iPhone 6 Plus the image is 1920 x 1080 (resource on resolutions – http://www.iosres.com/index-legacy.html) which means that the screen is about 33% wider on the iPhone 6 Plus than it is on the iPad.  The iPad size overall is bigger, however, we need to keep in mind the ratio of weight and width.

This issue applies to many devices, especially Android where we had to look at both the width and the height.

The Solution

In order to fix this, we kept changing the positions of buttons, the width of space between the buttons on the main menu and trying to get it to work.  I had input and testing from a programmer, graphic designer and we worked back and forth to see how we could resolve this.  Once we got it right on the iPhone, it would not work on the iPad and vice versa.  In order to fix it, we had to reduce the size of buttons to about 90% and this made it more appealing to different devices.  We wanted the user to know they can scroll, so they had to see some part of the third or forth button.

The game originally will have only two buttons for one on one play and tournament.  The third and forth button are there if we want to add more features later.  I am still thinking about how we can keep the menu flexible to add more later.

For future projects and this project, we will keep this in mind that when building out the graphics and layout of a screen, we need to remember that not everything will work the same way.

On the two main menu pictures above, if you look at the smaller buttons on the top (profile, free coins, coins, bucks), you may notice the space between te profile and free coin.  This space is needed or the buttons will clash on devices (like iPads) that are not as wide.  It is not based on size of the device, but how far each button is from the sides and other buttons.

Also…

In this past week, I did reach out to some other app developers and started discussing what else I would need to do for this project and got a lot of feedback around user testing, quality testing and automated testing.  I did set up a page for beta testers, now realizing there are many more types of testing we need to do as we progress, and that testing can happen at many levels.  I also learned that the marketing stratgey will be a big learning curve and costly.   If you are with the media and want to write a post on us, I would appreciate that.

You can send us an email or  your app to be featured to – appstorepromotion@apple.com and to make sure marketing is done right appstoremarketing@apple.com.

Beta tester, I would appreciate that – http://mokoolsportsgames.com/making-of-hockey-world-championship/world-hockey-championship-beta-testers/

I will keep you posted on the progress.  Please let me know if you have any questions at mukul@mokoolapps.com

Cheers,

Mukul