0

Does anyone have any ideas on how to represent, in a wireframe, elements that may or may not be visible on a screen?

For example, suppose I was doing up a wireframe to show a list of bookings for a meeting room.

If there are 20 or less bookings, I just want to show the 20, without paging.

If there are more than 20 bookings, then I do want to show paging.

How would I visually indicate the paging in a wireframe?


Some ideas I had:

1) Show the paging, but make it faded, and have a little annotation nearby, which says something like 'Conditional', perhaps with some additional text like 'Only shown if more than 20 items'.

2) Have two versions of the wireframe - e.g.:

  • Bookings for Meeting Room [Regular]
  • Bookings for Meeting Room [When over 20 bookings]

But then I'd be concerned about the number of wireframes increasing exponentially, as more UI combinations become possible.

3) Just show everything in the wireframe, and have a separate document with notes for each UI element (perhaps using numerical coding), and indicate in the notes when/whether the item is shown, based on what condition.

2 Answers 2

1

I wireframe it both ways: with the conditional element, and without. That way, I'm sure that the page looks decent whether the element is present or not.

If I'm using Balsamiq (or whatever your favorite clickable-wireframe tool may be, such as Solidify or Axure), I sometimes "hide" a hot spot where I can use it during a demo, and add annotations (which you can choose to hide or show in Balsamiq) to explain why there are two nearly identical wireframes.

2
  • Good idea about "hiding". But I'll have to figure out how to do that in Balsamiq. Commented May 28, 2014 at 7:50
  • In the top-right corner of the Balsamiq window, there's a control labeled "Show Markup" with an icon that might be a clipboard (it's hard to tell): Clicking that will reveal any objects that are treated as "mark-up." When markup is showing, the icon gets an "✕" overlay and its label disappears (which is lousy UI, Balsamiq!). Some objects are treated as markup by default (sticky notes, callouts, arrows). Anything can be made markup by selecting "Treat as Markup" from the object's context menu. When you export (to PDF or PNG), Balsamiq shows or hides markup objects accordingly.
    – Dave Land
    Commented May 28, 2014 at 20:20
0

The biggest thing is making sure you have sufficient annotation/documentation to describe the state changes. Beyond that, how you choose to display things is totally up to you.

For me, if it's a simple replacement of objects on screen, I tend to display the changes "off screen" with annotation in terms of when it should be displayed. Here's an example.

off screen state indication

When it involves extensive changes to the layout, I put this onto a separate page showing all the states. Like so:

separate page state documentation

If it involves anything more complicated, e.g. transitions, dynamic behaviour like on screen sorting etc I would use an actual prototype to convey the behaviour.

1
  • I want to endorse your suggestion to use prototypes to mock up transitions and other micro-interactions: It's unbelievable how hard it is for some people to understand very simple transitions and animations without seeing them in action.
    – Dave Land
    Commented May 28, 2014 at 20:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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