4

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?

  • 1
    That definitely sounds like a "rethink the design" problem. – MMacD Dec 2 '16 at 11:20
  • 2
    I don't think so. While I agree that you should not have to scroll down to get to important controls, there certainly are scenarios where you do have longer lists and important details at the bottom (disclaimers, go back to top controls, etc.) that should be depicted in a mockup imo. – CrazyQwert Dec 2 '16 at 11:22
  • It sounds like you've solved your problem, then. I wouldn't be comfortable leaving anything important invisible til found by scrolling. But I don't know what you're thinking of, so if you are comfortable with it then you're good to go. – MMacD Dec 2 '16 at 11:44
  • @MMacD well, yeah. The thing is, I am searching for a clever way to show just that with mockups, since the screendesign I will have to display will then be longer than the phones actual screen and therefore not fit into my "phone mockup" anymore ... so I was interested in the workflow others have when running into such issues. – CrazyQwert Dec 2 '16 at 12:25
  • Ah, sorry, I thought I was reading it wrong. The usual way is to provide 2 different pieces of paper (presuming you're doing paper protos), one from the top, and the other to the bottom. But if you're looking for something "classier", cut a window out of one piece and use it as a mask. – MMacD Dec 2 '16 at 13:14
5

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.

enter image description here
Image source

  • I see. The folding line thing is a good detail. Thanks for your insight! :) – CrazyQwert Dec 5 '16 at 10:00
5

I've seen examples of cardboard or wooden devices with paper prototypes which slide through slots at each edge.

Transport for London (via ComputerWeekly): enter image description here

And ironPhone, a custom made sketch preview tool (via dribbble) enter image description here

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.

  • Oh, very interesting! Whilst I was more of talking about digital mockups, these pictures you shared are quite cool! Thanks for answering :) – CrazyQwert Dec 5 '16 at 10:01
0

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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.