7

I'm developing a UI for a product that will have "Install/Configure" option and "Documentation" on the search of the cards.

enter image description here

However, the UI looks ugly because of the repetitive buttons. Is there any other alternative to sort it out?

  • 10
    There's no repetitive action, there only are repetitive GUI elements, right? A user will click only one of these buttons? – Bergi May 25 at 21:53
  • 1
    Can I select multiple products to install? – Caius Jard May 26 at 12:45
  • No.. Only one product can be selected – user1241241 May 26 at 14:30
  • 1
    I think something like "diversifying repetitive UI elements" would be a more fitting title – GammaGames May 26 at 20:59
20

One way is to differentiate primary vs secondary buttons. You could keep “Install” as the prominent button and “Documentation” as the secondary link. Something like this: enter image description here

| improve this answer | |
  • thank you!.. is it possible to completely override the occurrence of repeated action with something definitive and non-repetitive? – user1241241 May 25 at 13:53
  • 1
    Without knowing more about your website and products, the only suggestion is having a dedicated “Documentation” page where all the documentation is located. This leaves your “Products” page as a listing of products to download and nothing else. – Nicolas Hung May 25 at 14:00
  • Are the users downloading the products (eg. non-developers) the same as the ones reading their documentation (eg. developers)? Can you briefly explain what the products are and show what other pages are in this website? This might become a sitemap modification rather than an interface fix within a portion of a page. – Nicolas Hung May 25 at 14:03
  • It's going to be used by the developers. it will have the list of a custom Wordpress plugin that they can install into their websites. – user1241241 May 25 at 14:17
  • 3
    I don’t see any problem with the repetitive nature. Most if not all product listing pages have one or more buttons per card. One alternative solution could be hiding the documentation within the PD page, but it might prove inconvenient for developers trying to access them. – Nicolas Hung May 25 at 14:27
8

There's no repetitive action here, unless it is expected that the user will install many products in one visit. Having similar buttons do the same thing to different pieces of content may look ugly (I find that very subjective), but it's very easy to understand what the buttons do.

You can get rid of repeating buttons but that forces you to divide the action into a two-step process where you select your action then select the target product (or the other way around). You're going to lose a lot of people merely by adding this sequential step.

| improve this answer | |
6

You are going to sacrifice consistency for repetition if you want to take this approach.

The design pattern used is a series of card components in a full page grid layout, which requires each component to be replicated. If you remove the primary and secondary action, it will require creating another section on the page to process the user actions so you will have to redesign the page layout.

Lets say that there is a separate section of the page where the user install or download the product, you still need some indication of their selection (either using a call-to-action or styling of the item to indicate a selection state, and also to potentially cancel it).

There is going to be some breaking of normal design patterns to do this, which means you will have to design other interactions to help create a smoother flow, so you should consider whether there is a good reason to do this, or if there is another strategy that can be applied (such as reducing the prominence of the call-to-action buttons, which would also be counterproductive in some way).

Probably the best thing to do is come up with some variations and test with users to see if the repetition is causing issues with the user experience, so you don't remove one problem and replace it with another.

| improve this answer | |
  • 1
    Plus, it turns a one-step action ("find the card for the component I want & click 'Install'") into. a two-step action ("find the card, select it somehow; find the shopping basket area that my component has been added to, click install"). Pros & cons of this (e.g. if they want to install dozens together and see total installed size or whatever) but one to be aware of – anotherdave May 26 at 10:52

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.