5

I'm making a (web) tool for editing a long complicated sequence of events, and I'd like to make it easy to:

  • play a single event
  • play a series of contiguous events (to see if all transitions work correctly, etc.)

What are some good UX patterns for doing that? Right now I have a single button for each event for single play (I can make it disappear if you're not hovering over that event).

Some info on my case:

  • I have no concept of "selecting" so far (I'd only need it for "play many")
  • My "event items are arranged vertically, and are pretty big (they contain more detailed data, I could compact them), so that only three or four fit on the screen at a given time
  • It's a custom internal-use for somewhat technical tools, mostly for more effective edition, so I don't need to be super-user-friendly-and-intuitive (though I would rather)

I'm consider either click-and-drag (like this range picker - but the small amount of items I have per screen makes that a hassle), or shift-click for multiple selection, like for text (but I don't even really need the concept of single-selection..).

Any suggestions, or pointers to some good advice on this topic?

Thanks!

Improve this question
5
  • 1
    Welcome to the site, @Emile. Is there a reason to define the full played selection ahead of time? Or could you just have a "play from here" option that automatically goes to the next item when it finishes, and gives the user the option to pause when they don't want to keep watching/listening, similar to a music player like iTunes.
    – Graham Herrli
    Nov 19, 2015 at 16:45
  • Graham: eh, that could be a possibility too, it's a bit of a hassle to implement (the current back-end doesn't allow it, but does allow "play this subsequence"), but doable. It does have the advantage of being pretty simple interface-wise...
    – Emile
    Nov 19, 2015 at 22:46
  • (on the other hand it could quickly be annoying - a typical use case is tweaking various timing/blend parameters, in which case selecting a subsequence and going tweak / play / tweak / play is going to be more efficient than tweak / play / stop / tweak / play / stop; and the full "play" can be pretty noisy and distracting)
    – Emile
    Nov 19, 2015 at 22:52
  • 1
    Could you automatically stop when tweaking? For example, the video-editor Camtasia has a button to start playback; as soon and you start editing, it automatically pauses playback. So it's just tweak / play / tweak / play, although there's still an option for manually stopping playback when you need it.
    – Graham Herrli
    Nov 19, 2015 at 22:56
  • Graham: thanks, I followed your suggestion (approximately): I have two play buttons (that appear on a mousovered event), (▶|) which only plays one event, and (▶▶) which plays that event and everything afterwards, while opening a modal window on the screen saying "click anywhere to stop" (you can't see which event is playing at a given moment, I don't have that information). So thanks!
    – Emile
    Nov 23, 2015 at 9:20

1 Answer 1

Reset to default
1

So if a playlist option is not available, one approach would be to create a grid for the events with the following user flow:

  • Step 1: The user browses the list of events
  • Step 2: The user selects one by clicking or tapping it and then a button area appears (inactive before a selection) where the user can press the play button.
  • Step 3: The user selects one or more additional events (while the first 1 plays).
  • Step 4: These are added in the queue and play in the order they are selected. You will need to add prev and next buttons to allow users to skip or return to an event.

In this approach, the key is the design of the button area, which may also make sense to be fixed in the UI.

Improve this answer

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.