1

I have a rails app that I am building using foundation. I have an orders index page that displays all the users current orders on a nice looking table. (ecommerce stuff).

This table displays the orders current status (in processing, shipped, etc) the order number, the address, etc etc.

The furthest left column is an 'Options' column. Within that column I would like the user to have the option of viewing the order, editing the order, or deleting the order.

Currently (and I am not happy about it), I have 3 icons in the aforementioned column. One for view, one for edit, and one for delete. However, this has made that column look really cluttered and busy. The rest of my app looks very minimalistic and elegant. And the column doesn't match the feel of the page at all. See below:

enter image description here

I would still like the user to have access to an options column and be able to easily manipulate this list of orders, but Id like to make it more elegant, minimalistic, and obvious. From a design standpoint do you have any suggestion on a technique I can try to spruce this page up?

Improve this question
1
  • We can't see what the rest of the app looks like, and therefore would have difficulty understanding what your definition of minimalistic and elegant means. Also, if you don't think icons are obvious enough, then the only other option is to use text (or better icons).
    – Michael Lai ♦
    May 26, 2015 at 23:03

2 Answers 2

Reset to default
3

Having that many icons repeated for every row seems wasteful and confusing.

If you expect a user to want to apply an action simultaneously (or in quick succession) to many rows, many applications use a single column of checkboxes to select rows to be acted on and then one set of separate buttons to choose an action to apply to selected rows.

Another approach is to remove the column altogether and present the choice only after the user has selected a row. You then need a different way to inform the user that rows can be selected and acted on. You could have drag targets with hover-text to reveal their operating method.

Improve this answer
1
  • I actually really like his approach. I am using JavaScript to have an x & y axis hover over the table. The user could click on that row and the options could then be presented. This is the direction I think that would work best for working with large quantities of shipping data. Thank you very much @RedGrittyBrick
    – James
    May 27, 2015 at 15:09
4

Use icons when people know what you mean

Icons for expected actions aren't a bad thing. They will save space, but they aren't technically the most "minimal" solution — that would be text, since you remove the extra layer of translation.

Don't violate expectations

If you do go with icons, you need to make sure they are the expected ones. Yours are not.

The basket is a less common version of the cart icon which is understood as a link to your currently active cart.

The pencil on a page isn't too far off for edit, but including a rectangle (or page) indicates a message or document edit.

The outward-four-arrows is used to indicate full screen mode, definitely never delete.

Standard(ish) options

Here's what comes to mind when I think of these functions. And yes, the text at the top is one of those options.

enter image description here

Improve this answer
4
  • Oh yeah, sorry I should have clarified. I am waiting from our Adobe guy to get the final icons. These are placeholders. I am using the basket for delete, the outward arrows for show, and the pencil for edit. However, none of those will actually be used when the app hits the business side.
    – James
    May 27, 2015 at 15:07
  • @Jimi With that in mind, as asked your question doesn't even come close to giving us enough context to provide a meaningful answer.
    – plainclothes
    May 28, 2015 at 20:41
  • I'm sorry for the confusion. I'm not sure where your confusion lies specifically. I was basically just looking for a nice way to give the user crud options on a table. However, my question was answered by RedGrittyBrick. Thank you for providing standard icon options, I did find those useful.
    – James
    May 28, 2015 at 21:22
  • Glad you got your answer. Contextually exposing the actions will definitely clean up the screen.
    – plainclothes
    May 28, 2015 at 21:28

Your Answer

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

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