There are examples on the web with actions within a clickable area. Does this create an issue with users mistakenly clicking a delete or close button vs the actual area?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
-> UI element looks like one area but actually has two different functions. Thus it behaves differently depending on where you click.
Yes, there is a risk. However many UI's have a learning curve that balances discoverability, minimising real estate, efficiency, clarity.
So with appropriate (a) affordances (b) learning curve (c) low impact of mistakes then the gains in the criteria above may outweigh this "cognitive difficulty" risk.
-> User understands they different functions but can't target right are accurately.
Possibly but just follow the guidance for the platform that you are running on. e.g. Android 7-10mm touch targets are advised
From my own experience I can say that clicking it on desktop isn't a problem for the majority of today's users.
It even creates a great UX because it's obvious that the small button belongs to the button in which it is situated.
However, on mobile websites this can be frustrating as most elderly have large fingers with which they can't touch small things that easy. I'd suggest having another layout on mobile. Perhaps a modal with options when you click on the big button.
(A modal is one of these things that come down from the top of the screen containing other options and a little cross to close them at the top right, they are included in the bootstrap framework. I strongly suggest you give this a try.)
Edit: Always use a confirmation when deleting thing because the most frustrating thing is deleting something by accident. You could also use an undo button to enhance UX even more. Thanks for the tip CoDEmanX