6

What are some alternatives to having repetitive rows buttons that create large banks like the one shown below.

I think it's too visually dominant and distracting, not least because there's one of those optical illusions (where dots appear in the gaps when you scan.

Any potential solution will need to be touch and repsonsive friendly.

enter image description here

  • 2
    That optical illusion you refer to above is called the "Hermann grid illusion". – Evil Closet Monkey Mar 27 '15 at 3:01
  • 4
    it makes the data in the rows appear blurry too – Dave Haigh Oct 14 '15 at 10:32
12

Buttons tend to convey actions, while it looks to me more like these are navigation links. Showing them just as regular links (following whatever style in your app) would be probably be much less imposing both visually and as an action to take.


You can also take this a step further, and provide some more useful information instead of simply displaying buttons or links, by showing the number of items (or some other type of information about them) relevant for each as a hyperlink:

enter image description here

If there is a limit, then you can show that as well (eg: 2 of 10).

This may also make the application more complex, or cause a performance hit that's not worthwhile, but it could be worthwhile especially if it saves the user time (and the need to navigate into several items to discover nothing is there).

  • Good input, thanks. Regarding the provision of more helpful information, unfortunately we're not really in a position to approach developers with anything more than "strip and tweak" changes. Right now, if it's a costly change/update, it's not going to get approved. Your advice is good though, but perhaps for a time when we can make some real changes. – dennislees Mar 26 '15 at 20:14
  • Understood. I think you could still use navigation links, labelled just as "Users" "Roles" etc (updated my answer to elaborate on this). – gregmac Mar 27 '15 at 3:17
  • Yup, I'm probably going to go with something like this, thanks. – dennislees Mar 27 '15 at 5:47
4

CTA and Buttons

Call to action buttons appear in any given workflow to represent and enable completion of task priorities, as such, they are always distinct graphically as well as semantically; a verb is used for example "view" "download" etc

So having four buttons in a row creates a situation where CTA buttons are competing for users attention as well as being not clearly distinguishable. This does not only visually overwhelm users it also distracts them from focusing on what exactly needs to be done. below is a similar example to the one you shared:

enter image description here


Restructure and prioritize

To solve this issue you need to restructure and prioritize the different pieces of information you have in your the table. This will allow you to introduce structure and visual emphasis (icons and white space etc) and help you guide the user attention to the most important calls to action.

To come-up with a structure you could:

  • Aggregate actions in logical entities, For example "users" and User "applications"
  • Ask your users to provide a prioritized list of actions or groups of actions that they use the most.
  • Gather or obtain information about the use frequency for each of these actions.

The result of this exercise should hopefully allow you to layout snippets of information and action points in a manner that is most optimized for the task at hand. Below is a redesign of the table based on the example I shared above:

enter image description here


When laying-out the new design try to incorporate items left to right & top to bottom as this follows F-Shaped Pattern For Reading Web Content

3

Are all 4 buttons equally important? It might make sense to have the main action as a full button and tuck the rest into a button dropdown. It'll make it easier for users to tell which is the main action and still have the rest be accessible is a touch friendly fashion.

The second thing you can look at is button color. The blue is very strong against the light gray, which is what's causing the optical dots effect. A strong color make sense when use strategically to highlight the primary action, like a save button. When you have rows of buttons like this, you should introduce a secondary button type with a light button background color.

  • 2
    I'd like to avoid hiding stuff in dropdowns as much as possible, but it's a good point about color. We could just change to an empty button shape, like the "default" button in Bootstrap 3. – dennislees Mar 26 '15 at 19:20
3

The table is distracting because of:

  • High contrast between the buttons and the tables.
  • Grid layout of the buttons creates an unfortunate grid illusion
  • The palette is visually distracting: you have banded rows already, and then are superimposing a saturated darker blue. That's a lot to deal with when the eye already has trouble navigating a complex table structure.
  • The button shape and color dominates the text, so it's not easy for users to discern that the buttons are actually the same for every row.

A designed approach:

Assuming the rows are of touch-friendly height, and you want to keep the "one-click" nature of the interface (i.e. you don't want to hide the buttons)...then if you follow the logic above you can just remove the high contrast, simplify the palette to gray, and fade the text a bit to render the options more grid-friendly, scannable, and harmonized with the color palette:

enter image description here

(You will probably need to darken the buttons because they seem to have lose their contrast when I took the screenshot)

Hope that helps

3

The simple answer is to use a combobox like the following:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • 1
    Not sure why this has been down voted so heavily as it's a legit solution. Not all answers need walls of text to be valid. – Wander Mar 27 '15 at 9:37
  • I think a check box for each element with a unified combobox is a good compromise. – jak123 Mar 27 '15 at 15:12

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.