I am working on UI designs for a mobile app which has a lot of games in it. This app is restricted for now to landscape mode. One important screen in this app is the game download screen where there is information about the game with a button on the top to buy/download the game, images/ screenshots of the game on the top again and panel for description and related copy in the bottom. One of the options we are exploring is to have the Buy/ Download button overlap the game images that can be scrolled horizontally. Any thoughts on how this could possibly impact the experience of the user? Can two interactive elements overlap in mobile UI where the one element is much smaller than other like a button over an interactive image (image can be tapped on open full screen)?
It's hard to say without any mockups, but this sounds like many GPS/map applications. I think people are pretty familiar with the interactions in those applications of moving content around behind static hovering controls.
What you're wondering about, Brian, is called affordance. I'm pretty sure you're aware of what it is, whether you call it that way or not. It's when we want to make sure the user understands what he/she can expect of an interface, and has access to these interactions.
The questions that'll allow you to assess affordance are of this kind:
- Is it clear enough that one can interact with [element]?
- Consider the importance of [element] in relation with what the user wants to do, and what the app's business model is. Is it easy enough to interact with it (big enough target area, not blocked too much by other elements)?
- If overlapping elements can move, is there a situation where an element that should be accessible becomes hard or impossible to interact with?
If elements overlap, but you find that it does not interfere with your interface's affordance, you should be in the clear :)