0

I am developing a UI for a web app and don't know to decide between a popover and an accordion patterns. Basically what I have is a list of of sentences, some of them have an item which users should be able to edit. Editing these items is not the main purpose of the app, it is just a way for the user to edit some of the data.

Here's a mockup for the accordion pattern: Closed state

when 'Editable content' is clicked, it opens up and accordion and shows some editing controls, these might be a text field, a date picker and what not: open accordion

What do you think? should I go with an accordion or open a popover containing the editing controls?

Some notes about my users - this an enterprise solution for users which are extremely click conscious (they count the # of clicks for an action...)

Tnx!

Improve this question
3
  • 1
    What about using in-place editing? Where on hover, some border and tooltip says "click to edit". When clicked, the text suddenly gets an input field wrapped around it, then they can make their edit and click a button or just hit enter to save the edit to the system.
    – i-CONICA
    Jul 17, 2014 at 8:40
  • Tnx for the answer. This is something we've considered but postponed testing since we think that sometimes we'll want to show more info while editing.
    – YaDa
    Jul 17, 2014 at 15:38
  • The jeditable plugin is very customisable. You can have callbacks on the click event, I.e, activating the editable cell, and on save, etc too. Have a look at it's options and potential. It might be ideal for you.
    – i-CONICA
    Jul 17, 2014 at 17:25

2 Answers 2

Reset to default
2

What I prefer in complicated applications is the editing-mode. So the user can view and edit in the same screen with just one click. This requires a couple of lines of input and explanation. The edit mode does not have to be placed on the same spot, just structured the same.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
0

The interactions that you are describing does not intuitively feel like you should be using either one of those patterns, but I'll give you my reasoning and you can decide for yourself.

I think the accordion pattern has generally been used more successfully for the organization of structured content with a flat hierarchy, and is a good pattern for progressive disclosure where you don't want to overwhelm the user with a lot of detail upfront. In your case trying to apply the accordion pattern when the content you want to edit can be located anywhere, and the amount of content is also variable.

While the popup/pop-over option is preferable to the accordion pattern, I don't think it is also the best fit here. The reason again comes down to the content you want to display, which looks like it could be a number of different UI control components. This will make the size of the popover rather difficult to control, and if there is a lot of detail you don't want the user to have to scroll within another control.

I would consider limiting the type of information that the user can edit, and implement a tooltip like control that just allows simple actions contained within a small area. If you want to provide some actual examples it is probably easier to provide some more suggestions.

Improve this answer

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.