Markus Hedlund

Developer / Photographer

Contact / GitHub / Instagram

Work With Me

Design miss #1 - Limiting a list in PHP/Javascript/Ruby/other

In this series I will whine about other's design mistakes and bad interface choices, while boasting about my own and mimmin's superior solutions! And vice versa :-)

This first example is from the interface guru's at 37signals, and their product Basecamp. But it's quite the common problem actually; having a list that is capped, with a "show all"-button that only adds one more item.

In the above example, the list shows 5 elements of overdue milestones. Then there's a button telling you there are 6 elements, and you think to yourself: "with that button there are 6 elements on the screen, so why not skip the button and show me that last item?".

Below is the pseudocode for accomplishing this.

MAX_ITEMS = 5

if (number of items < MAX_ITEMS)
    output_length = number of items
else if (number of items == MAX_ITEMS)
    output_length = MAX_ITEMS
else
    output_length = MAX_ITEMS - 1

for (i = 0; i < output_length; i++)
    output items[i]

if (number of items > MAX_ITEMS)
    output show all message

Thanks for your time, hope this can help someone! Share your thoughts and experience →

2009-10-29