Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Here IMAGE is the settings screen for my application.(desktop).
sdfsdf This screen is for categories and product management for a pos system for cafe/bar.
I am not a designer not a ux specialist. The gray thing at left is the menu.
I am going to add more simple icons in the future.

What i am looking for
I am looking of how to manage CRUD for both products and categories. I need

  1. Add a product
  2. Add a category
  3. Have a button titled "catalogs" to manage catalogs in a popup
  4. Edit a category
  5. Edit a product(inline or for advanced stuff at popup)
  6. Make all rows editable
  7. Delete a category or a product
  8. Be able to order these products and categories
  9. Apply bulk actions at products (checked ones)

A proposal
I have been advised to add a toolbar like this enter image description here
I am not sure whether this is better.

PROBLEM
What i am looking for is whether i should use toolbar like that which solves many problems but i dont know if its good ux for this.
At first screen i managed to put 1,2,3 at bottom, edit as a pencil at selected item , inline editing of product with edit button on top which changes to save,ordering with these arrows as requested . As for bulk actions i am thinking after you select at least one checkbox to show a bar with bulk actions (like in android 4 Contextual action bar (CAB))

Question So i am looking for advice how to implement these actions efficiently and without tons of buttons.

share|improve this question
add comment

1 Answer

I think that the action bar is only there for touchscreens, as they don't have hover states.

Desktop applications do have hover states.

Here, I'd guess the solution would be closer to Fitt's law; an interpretation of Fitt's law could be: put the action close to (and in line with) the object the action is referring to.

So, have a column, which has hidden actions for delete, edit, move up, move down. When the user goes over a row, show the buttons for the given row.

Have Add new row right beneath all of the rows, colored a bit differently, perhaps with having a plus sign.

Bulk actions could be solved if the action column is close to the select column: once the user selects something, you show an action column in the header.

This is pretty conventional, but also, I'd guess, pretty effective.

Sometimes conventional solutions are there for decades because they are the best ones for their purpose.

Edit: quick mockup

inventory admin mockup

I'm pretty sure the icons can be improved, but it does the job I hope.

Click happens only once on the screen, otherwise it's hover.

share|improve this answer
    
Ok i have "add" as you see already beneath , so this is ok i guess. Different color cant be used as in team they hate different colors on buttons,so i guess icon is ok..Delete might fit there. Move up down in row sucks it is very hard to move something at top this way..I think that the reorder button would work in order to allow drag drop reordering and show arrow buttons at bottom.Bulk actions could be done with a dropdown at header you mean ?This seems good idea. What do you think about the proposal there with the toolbar ?Thank you for your time –  Parhs Aug 30 '12 at 19:26
    
updated image with minor changes yet –  Parhs Aug 30 '12 at 19:27
1  
if it's an internal app, drag&drop is fine, with a hint of "drag to reorder". I'd use two opposing triangles like <> (except pointing upwards and downwards) as an icon. Bulk actions can also be done with hover. –  Aadaam Aug 30 '12 at 19:44
    
@Parhs: added a picture, in English, yours is all greek to me :) I don't like the bulk dropdown but on the other side, it's a common pattern. Don't forget tooltips. And besides color, you have a vast resources of font weights, borders, icons, margins to improve weight in the visual hierarchy. Gmail does everything nowadays with margins. –  Aadaam Aug 30 '12 at 20:08
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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