just wanted to ask what would be the best way to depict screens that are longer / wider than the device itself. For example a list, that has some kind of important item at the very bottom that is off-screen normally. Should I split it up into two seperate screens, one showing two different "scroll-states"? Or rather make it one long screen? What would be the best way to go about something like that?
The primary goal of the mockup is to show concept, not the frame. So long screen looks more holistic, rather than separated pieces.
You can depict the "above the fold" line to show clearly what users will see on entering the screen.
I've seen examples of cardboard or wooden devices with paper prototypes which slide through slots at each edge.
Transport for London (via ComputerWeekly):
And ironPhone, a custom made sketch preview tool (via dribbble)
I've also had a lot of success using images in an interactive digital mockup that allows the user to scroll to the bottom if necessary.
It depends what the longer content is, I would have thought.
if it is a scrollable list, then I would show the scrollbar in the mockup.
If it can be broken up into smaller chunks, then consider paginating it.
Alexey's answer would be great on a PC or tablet, but I would have thought it would be difficult to use on a mobile.
Basically the options are as follows:
- product lists and filtering
- infinite scroll (like Facebook timeline)
- infinite scroll + lazy loading
- infinite scroll with fixed footer
- load more button
- pagination (not recommended for mobile devices)
(source: Infinite Scrolling, Pagination Or “Load More” Buttons? Usability Findings In eCommerce, by Christian Holst)