Should a playlist mockup w/ 24 items require manually creating 552 state links under Prototype?

[natelawrence]

I've recently begun mocking up in XD some ideas I've been thinking about abstractly for many years. 
Mocking them up in XD has been helpful in terms of bringing my vision closer to reality and has forced some corrections to my thoughts in practical terms of screen real estate. 

The basic concept I am mocking up is an interactive transcript with: 
- a video player, 

- a transcript, 

- an index/playlist, 

- a list of references/links, 

- a timeline. 

Recently, when I wanted to make each chapter in the index/playlist clickable, I made it a component with 24 states. After adding the states and adding links to the other 23 states from state 1, I clicked on State 2 and found that none of the links from State 1 existed in State 2. 

Since there are 24 chapters in the index/playlist (and hence 24 states) and each of the chapters will have one state where it does not link to anything (since you are already navigated to the corresponding state) we arrive at 24 (states) * 23 links each = 552 links needed to be manually created. 

When I first realized this, I immediately assumed that I simply lacked knowledge of how to use XD for a purpose like mine. After asking around on various XD tutorial videos on YouTube, however, I got nearly universal feedback that the only way that they knew of to accomplish what I'm asking would be to manually create the 552 links between the 24 items. 

The timeline at the bottom of my mockup also had 17 items on it which correspond to 24 of the chapters in the index/playlist. When I wanted to make these clickable, I knew I could tap into the 24 existing states, but the same issue arises. Of the set of 17 items, for 17 of the 24 states there will only be 16 links (since one of the items will already be navigated to the appropriate state) so we arrive at 17 * 23 = 391.

That means that for (24 + 17 = ) 41 clickable regions on my artboard, I have had to manually create (552 + 391 = ) 943 links between 24 states. 

Speaking plainly to you, this is insane. I have actually done the work of manually creating those links but I am eager to never do so again. 

In vain have I looked for a way to copy the set of links from one state and paste them to another state. 

Please advise me. 

Here is a video of my mockup in motion, for context: 

Thanks in advance for your time. 
If I can clarify any details for you, please don't hesitate to ask me questions. 

[Chris W. Griffith]

My question is why do them all? Other than having all the options available, did having all those links provide value? If you were testing the design, could you have gotten away with just one or two samples. If trying to show an interaction to your developers, the same question applies.

If you truly did need that level of complete funtionality, it might have been easier to prototype in real code (HTML/CSS/JS).

[natelawrence]

With regard to your parting thought, "...it might have been easier to prototype in real code (HTML/CSS/JS)", the same exact thought occurred to me. 

The exception is the "JS" part, as I have a mental barrier when it comes to any sort of reading/writing code. 
HTML/CSS might be possible, provided a GUI such as Dreamweaver or Webflow. 

With regard to "Why do them all?" this is a single episode's content. 
At present, there are 70 episodes in total (soon to be 71), so believe it or not, this was a subset. 

I'm still dissatisfied with almost every aspect of my design, however I would rather discover my dissatisfaction on my own time in a mockup, than after I've asked a programmer to actually build something in JS. 

One thing that I am still not satisfied with is the styling of past chapters. 
I like the idea of each chapter having its own progress bar (currently shown in navy blue on past and present chapters) and I like the idea of showing the user which content has been completed, however I'm not particularly keen on the trail of blue progress bars as enough of the episode is played to fill the index/playlist window, as one of my aims is to avoid explicit borders on containers. 

That is something of a tangent to actually wiring up all 24 chapters, however in terms of implementing it, I only triggered the full progress bars as part of the component states.

Inexperience with the process and tooling simply meant that it had not occured to me to mockup what a halfway completed playlist or fully completed playlist would look like, given my style choices for past, present, future index/playlist items (prior to creating component states). 

In any case, I appreciate your taking the time to answer. 

[Spas K.]

Additionally to what Chris said, I'm not sure why you need to make this "monstrosity" of a component with 24 states.

If you really have to get it to work, you can do 1 component with 2 states, default and active, and use that for each of the playlist items, only changing the text and the image for each instance (and for the 'active' state within it, because states of instances don't inherit overrides from the default state of that instance). That is also a bit tedious, but its a lot less work than what you've done.

Then you can link each instance to its respective screen, and set the other instances to their active or default states, depending on what screen you are on. I noticed your "past" playlist items stay on the "active" state, and if you want them clickable as well, you will be linking both states to a screen, so that would be 48 links, as each state's link is separate too.

One more tip. Make the playlist with the 24 instances on a separate artboard, and link it up from there. Then make that whole thing a component, and paste it on all other screens. The links will be preserved, and you can modify links and playlist items from that main component, without doing it manually on each screen after.

[natelawrence]

Thank you for taking the time to reply. 

I freely admit that I am a complete novice at all of this.
The above was my very first attempt to utilize components. 

Between recording the above video and posting here today (9.5 days later) I had begun to grasp the concept of a component a bit more and (as you suggest) create a "playlist item" component with multiple states, changing the thumbnail and text for each instance. 

You suggest an Active and Inactive state for each. 
I am thinking more in terms of Past, Present, and Future states. 

(Past being useful for conveying "This chapter/portion has been listened to.")

For the sake of conversation, however, if I were to adopt your strategy and trim the states for each "playlist item" component back to Active and Inactive, my prediction is that if I set the trigger to switch between those states as a Tap, then every tapped component in that list would stay in the Active state until clicked a second time. Is there a simple way of setting all other components in the list to Inactive when one is clicked? If so, what is the simplest method? 

Secondly, how would you tie the transcript position, video player proxy's screenshot, and Timeline highlight to the playlist components' states?

Thirdly, you suggest creating the playlist as a separate artboard and turning it into a component to use elsewhere. 
Forgive my very newbie question, but how would I then tie the video screenshots, transcript scroll position, and timeline highlighting to which playlist item has been clicked? 

These are good faith questions. The answers are not clear to me or I would not ask. 

Lastly, for playlists which are longer than the playlist window affords (necessitating scrolling) is there a simple way to not make the playlist scroll position part of the playlist component's state? You can observe explicit playlist scroll positions for each state interfering with my navigation at 1:14 in the above video demo (and my determination by 1:18 to not manually scroll the playlist any more in the video, but to simply click on the next playlist item and let the scrolling happen automatically).

Thank you in advance for your criticism/feedback. 

[Spas K.]

That's cool. Struggling with inefficient workflows is how we all learn 🙂 

Hopefully I understand this correctly, but on your question: "Secondly, how would you tie the transcript position, video player proxy's screenshot, and Timeline highlight to the playlist components' states?" - different artboards.

If you are trying to do all this within one artboard, while not impossible, it will be a nightmare. Xd isn't really optimized for that, as it doesn't use logic in the prototypes and everything is practically static. It's not like Webflow, where you have actual html/css code and you can easily swap classes or contents.

Also, you can't affect one component's state with a trigger from another component. That's a feature we've been waiting for, and might wait for quite some time until it gets done, with a bunch of other stuff like that.

Still, I assume you are already using different artboards for each different screen (transcript position). So on each different artboard, some components are set to the "past" state, one is set to an "active" state, and the rest are on "default", depending on where you are. And on each artboard, the transcript is at a different scroll position, and the image on the top left is different as well.

In your case, you won't be switching between the states with the Tap trigger, but going to a different artboard. And on that other artboard, you change that same instance to the active state. Switching between states within the same artboard is only done for on/off switches, maybe a carousel, or some slider, so that other contents stay the same.

In the end, apart from the different image and text to the side, all screens have the same layout. So it's really a bit of a waste of time to try and recreate it 1:1 as it would be on the website. 3-4 playlist items (or even just 2) are enough for you to test out the transitions between 2 transcripts, and the change in the timeline below, which you seem to have done the right way. The scroll groups also seem to work nicely.

On your last question, you can't preserve the scroll position between artboards, or any states for that matter. Everything resets as it is in Xd when you switch to a different artboard.

The workflow for these prototypes is usually this - you prototype two-three screens, so you are happy with all the transitions / animations, and then jump to build the full thing using html/css/js, or get someone to do it. More advanced prototyping can be done in other tools like Axure, or Webflow, but they both use actual code, and to make it all work, it will probably take you the same amount of time as coding the real thing 🙂

[natelawrence]

😏 I was, in fact, using a single artboard.

😅 I simply moved the Video, Playlist, Transcript, and Time line groups into a single Component with 24 states.

Really, doing things that way is no more difficult (in terms of setting up 24 video screenshots, transcript positions, or 17 timeline highlights) than creating those on separate art boards.

The one point of misery is creating the set of links over and over in every state. 

I do appreciate the advice to pursue building in Webflow as soon as possible, however. 

[Spas K. · Accepted solution]

Well, that's an impressive amount of patience you have 😄 It's a miracle something didn't break, as usually if you mess up the order in which you do things, the whole component can go haywire. Although that mostly happens to instances, and if that's your main component, it's probably more stable.

But yes, states work in the same way artboards do, technically. They are just changed within an artboard. There were also multiple issues with nesting components within other components, that got fixed just recently, so I guess that worked in your favor as well.

It's just easier for me to have everything laid out as separate artboards, and drag out connections between them. It's for the sake of clarity really. With one component, you have to keep switching between states if you want to change things, and the interface is kinda annoying as it just shows 5 states at a time and you have to keep scrolling up and down to navigate.

Anyways, Happy New Year, and I hope you achieve whatever you set off to 🙂

If you got any other questions, let us know!