Test the designs ;)
I think Option 3 is closest to the best answer. By keeping the icon away from the information, accidental deletes should be lower. The one change I would make is I would NOT have the text extend as it is shown. The delete icon should always be fixed in the upper right of the first row. This places it in a common region for all elements.
You could put a strikethrough over the link if someone is hovering over its corresponding delete button. You could also highlight it in some other way which makes it obvious that that is the one they are deleting. For some HTML/JS/CSS information on how to do this, see here. In general, this website (w3schools) is a great reference place for HTML/JS/CSS.
As Mike M said, being explicit is generally preferred. If you have the room, and the action's subject matter and the result is able to be distilled into concise language, you should do so.
I'd add to his response with a couple of possible enhancements:
Instead of "Show", you could say "Reveal". This better implies that something is exposed within the ...
Be explicit about what insights the user will receive by showing more.
In your use case, it looks like you have a subset of 'most important' data.
Terms like Full dashboard are similar to click here links or buttons, where we (as designers) don't tell users where the link leads to in the label, or what info they'll get by going there.
Tell me what data is ...
It looks like you may be using Material Design, is that true? If that is the case, refer to this link, https://material.io/design/components/buttons.html#hierarchy-placement
for a better understanding of primary, secondary and tertiary buttons. Look at the do's and don'ts section.
You are on the right path. The primary button should correlate with the ...
I don't find a good reason to have a min-height for the form (the button is anyway on the bottom of the form), but you can use a floating button on mobile, if it is a CTA and the most important button on the screen (no matter if the form has a small or big height).
It all depends on the product strategy
if the target is to be an advanced graphic processing program
it's worth thinking about the menu comprehensively and holistic.
If it is however a one-time function in the application then - three buttons with active state of active tool should be good:
Or put the interface elements on the left side of the canvas ...
Think about the workflow to find the best position
Back to first principles:
There is no "canonical" best place for a save button. Rather...
...the best position for 'Save' depends on when and where users are going to use it.
This in turn depends on how the user is utilising the layouts
How to think through the design...
Some questions you may want to ...
I personally think it's completely okay to have the save button in different places depending on the specific layout. To me, the most important is a consistent "feel". For instance, the save button could be green, and if it's the only green button on all screens/layouts the user will intuitively know to look for the green button.
If you're looking for the ...
Serious answer: It is a bad design. No matter how many tried to justify and explain this decision, it's just that, plain and simple: bad design.
It is not obvious and confusing. You may say it even looks like a bug. Good design is obvious and intuitive.
It requires explanation. The best and only explanation is "piece of material resting" buried somewhere ...
We can discern three types of action on an order. Split those, and group actions within a type.
First of all, I would give the button for the only option that the orders have in common, which is to view them (I'm assuming here that there's no objection to viewing a new order), its own, more predictable location. Now it's jumping all over the place, ...
It seems confusing to have different options for each items in this view. Typically in a grid or list, the user expects the exact same interface for each element.
You could keep the "View" button (maybe convert it to an icon, but that's not important), since that action is available for all items and move the other options into whatever UX elements are ...
As is: ugly but functional. I think it would read better with the same array of buttons on each line, with the useless ones greyed out. It's just easier to deal with tabular data when every row has exactly the same form. I'd also style them smaller, though if it is Bootstrap it's a bit of a pain to do this. (Why oh why did they remove btn-xs ?)
Drop down: ...
You could put al the options in a context menu and disable the ones that can't be used at that point due to the status of the item. This way the user always has the same list of options (and you might can explain why an option is disabled).
Also isn't it posible to make the view option not a button but just a click on the row itself?
I have a number of similar grids in the system
The screenshot you shared has different actions on each row. Having all these buttons / actions available upfront on each row is not a good choice in terms of visual clutter, cognitive load for the user and also from an accessibility standpoint like Tobias mentioned. If there is one action which is present on ...
From an accessibility point-of-view I strongly advise you to only have one interactive element per table cell. It greatly improves navigating the table with screen-reader. At my place of work we had a similar table; some of the cells would be read aloud by the screen-reader for 10-20 seconds due to all the various content in the cell and in its table header.
Without further context it's hard to answer your questions. How do users use your table? How often do they interact with it. Is it clear to the users what actions are possible in the different states?
Here are some thoughts, without knowing the context:
As is, might not look very pretty but it has some advantages compared to a dropdown. It is clear, that ...
There's a similar situation at the Youtube Studio Video Editor that can help you getting ideas, a mix of icons, drop down options menus and interactivity.
Each row has two icons: the select icon on the left and the view green icon with options
A Watch in Youtube icon and the three dots options menu appear when hovering the row
Clicking the three dots ...