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.
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.