I've been asked to design a component that lists objects on a page. The component needs to be able to display between 3 and 6 numbers of objects in the list. Here's what I have for 6 objects in a list:

enter image description here

The problem I'm having is that the client has come back to me and asked for how this component would display any number of between 3 an 16 objects and how it behaves on mobile. I thought simply adding more units of repeating things would be enough but the client wants 'variability'

For example, here's a design for 14 things:

enter image description here

This seems like a UI design issue and not strictly UX. But is there any obvious guidelines I can cite for displaying different numbers of things in a list, visually, and what considerations I have to bear in mind for mobile?

  • I read something recently about how the Guardian structured content for desktop and mobile in a way that wasn't just a list of boxes. I'll see if I can find the article, but meanwhile, there's some of this detail at design.theguardian.com – Roger Attrill Oct 7 '19 at 19:49
  • I think it is important to question the need for this level of 'variability' by the client. As much as it might be a 'cool' feature, there should be some validation of whether it contributes to a better user experience or if it will just cause some unnecessary design issues for very little gain. – Michael Lai Oct 7 '19 at 22:14
  • 1
    @RogerAttrill i based a couple of ideas on the Guardian's website, in fact! – colmcq Oct 8 '19 at 8:54
  • you can follow naming convention guidelines here: archive.is/7TyO0 – ILoveUnderageDeathRock Apr 4 '20 at 13:53

I take it that you are actually being asked to come up with a page template rather than just the component, since the component itself will contain all the necessary rules that will allow you to define the interaction with other elements on the page.

Unless of course you are being asked to come up with a container component that can cater to a variable number of elements, but it seems to be something that you want to handle at the page level rather than creating a specific type of container for this.

If there is a sensible set of guidelines to designing interfaces to be robust without compromising on the visual aesthetics and performance, it would be hard to go past the Boston Globe redesign, which was probably one of the first successful attempts at responsive design for the web. Even though the context is a little bit different, you will find that the key ingredients to a good outcome remains the same in that you need to keep things simple in order to be able to progressively enhance the site and build the complexity (not the other way around).

If you visit The Boston Globe website, you'll find that they use a number of different components but do not try to introduce too much 'variability' in the design. Considering that you are currently dealing with one component at the moment, if by some chance you were required to introduce additional types of components or widgets on the same page, you'll find it quite difficult to come up with rules that will accommodate all the variations to your page design - at least that's what I think based on my experience.

  • I've been asked to come up with page templates. But my research shows pages need split into different components doing different things and handling content differently. For the bulk of the content it is these repeating components that handle the articles but there are other components too, such as one for 'Travel' and one for 'Weather' depending on what the page does. So, very much, this is at the component level. – colmcq Oct 8 '19 at 9:35
  • @colmcq I don't think that there is a definite set of guidelines, and it might not be worth the effort looking when you can probably just as easily reference websites that you think do a pretty good job. In your case I think it would be travel websites like TripAdvisor or Lonely Planet or something that you think is closet to what you are planning to do. Use it as the starting point and then tweak it based on your specific requirements. – Michael Lai Oct 8 '19 at 22:13

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.