Random Games Mobile

As UX training I decided to try and develop a prototype of how the interface for one of the scripts I made would look on mobile. This consists of a static mockup made in Photoshop and a few animations to show off its interactions.

1. The header of the game, can be scrolled through to see other pictures.
2. Title and Description, faded to show that there is more information available.
3. Multiple games are automatically pulled depending on the options selected, can be scrolled through.

1. Showing an active button.
2. Showing a non-active button.

The interface is divided in two main parts. The top where the results appear and the bottom, where the user selects how to filter the results. Since I wanted the results to be loaded asynchronously with AJAX, every time one of the buttons is toggled, the list of results is automatically updated. The user is then allowed to scroll between the various results that appeared at the top.

More information about the game, such as description, tags, number of players and anything else that can be pulled from the Steam API is displayed after tapping on the result at the top. This extends the container to fit the screen and shows any other important info. Tapping anywhere else or using the back shortcut, brings the user back to the main page.

Assuming the user doesn’t want to buy the game that he has found straight from the app, there is still a way for them to be saved. By dragging the result from the top to the bottom, that game can be added to the user’s wishlist. I’m still unsure if by letting the user log-in with their Steam account I can then add games to their wishlist, so this wishlist function might need to be internal to the site. It would definitely be easier to save the games via cookies rather than a cross-origin API.