3

I am building a Bootstrap website for a mobile application. It's basic HTML with no real backend coding involved at all.

I have a photo with a chapter and verse from the Bible. I want to show that verse and its explanation in more detail should a user click the image.

In this case, is it better to show a modal popup or just flip the image so the verse and explanation are on the back of that card?

1 Answer 1

4

As long as you're clearly stating that the card will flip and there's a clear button to go back to the previous state, I think flipping is marginally better than a modal since the element retains its position, and it's obvious which element the user is interacting with.

With modals, you improve focus (there's less cognitive load surrounding the card), but that cognitive load amount you saved in terms of focus increases in terms of behavior because there are additional actions and elements (the modal behavior itself, scrim, and close button). Once the user closes the modal, it's not clear which card was clicked, so she might need to click again just to see which one it was.

On the other side, at some point, flip cards were prohibited by Material Design. They never said why, and now in M3 that prohibition is nowhere to be found, so I guess they realized something. But I'm providing this information to let you know that there might be something. So, as with everything in UX: TEST IT!

One thing, though: I assume by your words that this will be an onClick behavior. If the cards flip onHover, then it's probably better to go with a modal.

4
  • 1
    Yes this is on click or on touch if mobile.
    – CodeMan03
    Jun 8, 2023 at 18:57
  • 1
    I've never seen a modal dialog trigger on hovering.
    – Bergi
    Jun 9, 2023 at 1:08
  • 2
    @Bergi I have, and so did everyone in my immediate vicinity because of how loudly I complained. Jun 9, 2023 at 2:22
  • I have seen it, but it wasn't my intention to say that anyway, I meant "if the card flips is onHover (like the usual CSS flip)" then I'd rather go with the usual "onClick" modal", thank you for the comment, I edited the answer
    – Devin
    Jun 9, 2023 at 13:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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