I have developed a login process using 2 separate "blocks". You can call it public part and private (safe) part. My question is if this is a good way to explain the login process using a semi-carousel?

Live "carousel"

enter image description here

  • What do you mean by a 'semi-carousel'?
    – Michael Lai
    Commented Mar 8 at 0:07
  • A standard carousel has all images loaded or lazy loaded at the beginning. My example is more of loading images when needed to innerHTML as you click on previous / next. The semantic 'semi-carousel' may not be correct, but it is more technique behind.
    – sibert
    Commented Mar 8 at 5:58

1 Answer 1


Generally a carousel is good for displaying things that have similar visual weight and density of information that doesn't require a lot of effort from the user to process, which is why it is often used for images (it's commonly known as an image carousel). You also don't want too many items in a carousel because there is usually no specific order that it rotates through as it is meant to be circular.

Your implementation of a 'semi-carousel' to let the user step forward or back through a sequence of images is fine for explaining a login process, but I would suggest that it is better to animate something that requires the eyes to move vertically and horizontally across areas where there are structured information because it is less effort to process it mentally.

Instead, you can have a play button to cycle through the animation from the start to the end, and have a pause button (and rewind or replay) to give users the same control over the timing.

  • 1. How about the code attached to each step? 2. How about the non-standard flowchart?
    – sibert
    Commented Apr 3 at 4:44
  • It is varying the typical design pattern for a carousel for it to be linked to content elsewhere on the page since it is usually an independent block of information. I would consider putting all of the code in one page and label it in sections that correspond to the different steps. I don't see how the flow chart is 'non-standard', other than the fact that it isn't linear.
    – Michael Lai
    Commented Apr 3 at 22:27
  • "I would consider putting all of the code in one page and label it in sections that correspond to the different steps." This may break the "lexivisual" concept. Text and images should cooperate IMO. Or do I get it wrong?
    – sibert
    Commented Apr 4 at 16:17
  • @sibert there has to be a trade-off or balance between the amount of text that accompanies an image to still make it easy to scan and read through. There is too many characters included in the code, and if the user was to click Prev and Next compared to just scrolling up and down the page to look at the code, I think the latter would be easier.
    – Michael Lai
    Commented Apr 4 at 22:07
  • 1
    "There is too many characters included in the code" I find long code hard to follow. What does each part do? So my idea was to split up and show the "related" code for each step. But a compromise could be that to only have "image text" under the flow and a button or details/summary to "show related code"?
    – sibert
    Commented Apr 5 at 5:11

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.