Active Scenes Tweaks

A couple folks have expressed concerns about the new appearance of the active scenes list. While I won’t be going back to a simple table (there were reasons I changed it in the first place), I want to make the screen as effective as possible for folks on varying screen sizes.

One thing suggested was the desire to ‘scan’ the scenes, but I’m not sure what folks are scanning for exactly. What information is most important for you? Another concern was about vertical scrolling.

For me, the key info is who’s in the scene, the types (open/social/etc) and the last activity. So for example here’s a decluttered view that emphasizes that data and hides the rest under a ‘see details’ collapsing block.

1 Like

I think the current layout is okay and heading in the right direction, personally.

The adjusted view in your post may save vertical space for most scenes, but when it comes to scenes with more than 3 participants, I think it will end up taking up even more vertical space as the player icons (the largest elements in each row) wrap onto new lines and start to stack up. I like the participant list having more horizontal space to spread out in – as it is currently – to avoid that.

What if: the scene type tags were moved to the left, towards the middle of the scene header bar; the ‘Join’/‘Watch’ toggles were also moved up into the scene header bar (where the scene type tags currently are); and then the scene detail block was moved into the space where the ‘Join’/‘Watch’ toggles previously were? Would that play well witih the responsive styles?

At the very least, it would save a line or two of space to hide the ‘Last Activity’ line on private scenes that you aren’t in, since you can’t see that information anyway and it is always empty.

1 Like

I like the “Show Details” option above vs how it looks now. :slight_smile:

1 Like

I’m not sure I follow. The width allocated to the character icons is actually exactly the same as it was before the table was removed - 5 bootstrap “blocks” (each being 1/12th of your screen width). That gives you about three characters before it spills over into multiple lines.

I’m pretty sure the new way, with details collapsed, occupies a similar vertical space overall compared to the table view.

That’s interesting. For me, it now goes out to six or seven characters on a single row before it spills over onto a new line, which is definitely more than it did before. I’m seeing the bootstrap row seem to divide up into 8 and 4. I’m pretty sure I didn’t change the styles on the new layout much… Though then again I’ve also been doing CSS at 6 am so who knows D:

I’m not sure about the collapsed details myself since I dislike having to click over and over to open and close stuff to see things, but I can get used to it.

1 Like

Oh you were comparing the .81 version to the new version. I was comparing .81 to how it was before I changed the table. Yes, they’re different.

Everyone’s going to have slightly different preferences here, I think. I would prefer the vertical scrolling over having to click for details, but others have expressed the opposite annoyance. Creating individual preferences or multiple layouts adds too much complexity, so I’m just trying to narrow in on a general consensus.

I do like the Show Details bit.

I wonder about just making those icons smaller so they are more like the icon we see on the ‘Character Swap’ icons in scenes to swap who you’re posing as.

Screen Shot 2020-07-13 at 8.17.11 AM

It seems to me that the list of characters is more about a scan of who is there, and that format might make it less cumbersome if you have like 15 characters in a scene. You could have it create more of a grid. (I used Illustrator for this, so obviously this could be made to LOOK a little different, but here’s a general layout)

1 Like

My visual issues are more with things not being the same width. XD This also kinda takes care of that.

1 Like

The change should allow you to reset the icons just on that page to whatever size you want:

.live-scenes-contents .small-profile-icon {
    width: 50px;
    height: 50px;
    object-fit: cover;
    object-position: top center;
}

So if the problem is just the size of the icons, shrink 'em?

1 Like

Oh, I know that.

I’m just offering suggestions.

Yeah, I was. :slight_smile: I was coming from the direction of kind of wanting to keep the v81 layout which is why I focused on the difference between that and the new mockup, rather than comparing the mockup to the old table. I seem to be a minority so far in arguing for the 81 look though.

I honestly also prefer scrolling over clicking on stuff, for my poll response. Yeah, it can get annoying if you have a lot of scenes to scroll, but I kinda find it equally annoying if I now need to also not only scroll through a lot of scenes, but also click on them to get info on them, and then suddenly some scenes are expanded and some aren’t and the list looks less “regular.” There is empty space where join and watch currently are that could be used, maybe, for the shorter and less immediately relevant info pieces like ic date and location. ‘join’ and ‘watch’ aren’t prompts that i think need the entire space of a 4 width bootstrap to live in, they could be buttons in a header.

1 Like

I think what @Faraday posted in the 1st post looks nice, I’d just request to put IC date and last activity in the column instead of just last activity. Unless we can make it show last activity for private scenes, too? Otherwise it will just show up as giant white space when the scene list is a mile long with only private scenes.

I’m not actually sure why ‘last activity’ isn’t shown for private scenes but I propose it get turned on with the new list at least.

1 Like

Last activity is only shown for private scenes if you’re in the scene. If you’re not, then you don’t need to see it. There were some privacy concerns raised about showing it to everyone.

@Faraday that’s fine. I would suggest putting IC date on top of the last activity then, so there’s something there instead of just a blank space.

1 Like

It would seem weird to show two different things in that ‘column’ though, since you might see the last activity for some scenes and the IC Date for others?

Also is IC date particularly useful to anyone? If so, when?

IC date is useful to me, yes, inasmuch as any of the information on a scene I can’t join is. I like having a general feeling for how temporally spread things currently are, particularly on a game that makes considerable use of the ability to do slow, longish-term scenes.

I also have opinions on page layout, but I don’t currently have the necessary time and mental energy to think the details through and mock things up etc.

I agree with putting the watch/join/unwatch buttons (which I feel can go back to just icons with tooltips instead of the whole word) in the header or somewhere else that isn’t giving them so much screen real estate. Currently that whole third of the area is basically just them and it creates a fair-sized blank spot on the scenes with the least into and a large one on ones with descriptions etc.

At one point I did CSS for the previous, table-based version that collapsed scene descriptions down so that just the first line showed and sort of faded out, and if you hovered over them (or clicked on a touch thing) it would show the rest; that was deemed helpful by the person who wanted less vertical space taken because it showed that there was something to read there without taking much room, and even could ‘intrigue’ someone a bit, which is helpful on Open scenes as I feel that’s part of the point of having it there at all.

As I say, I don’t have the mental energy to sort things out fully at present, but my basic beginning thought for larger (non-mobile) screens would likely put the cast, description, and ‘limited’ info on the left and stack the date, location, and last activity on the right. Ideally I would not force these into two columns via structure but would instead have each in its own div (including the whole cast in one box) so that those boxes could be arranged as needed by the CSS. I would give each the class of what it is. That would also allow people who don’t want the date to easily hide it, etc.

While I’m at it, it would be nice to have names and nicknames in their own spans, as well. It would allow hiding/showing and stack adjusting more easily. Generally, I personally prefer to have the participant pictures with the name beneath instead of beside; I like the tidiness of Blu’s grid suggestion there but ideally we would have a structure that allowed that or allowed other arrangements as suits the game. One that sticks to the one-word names has different needs than one that uses something lengthy in the nickname area and includes that in the listings, for example.

If we retain the labels (like IC Date: there) I would ideally want to have the data that follows within its own span as well, for ease of arranging.

Sorry this isn’t more exact or illustrated today.

1 Like

Thanks for the suggestions everyone. I am working on some enhancements for the next patch that will incorporate some of these. If you have any other feedback, please send it my way.

Since a couple folks asked about it (here and on discord) I want to be clear about something though…

The Ares custom styles system is designed to be a theme or “skin” for Ares: changing colors, borders, icon shapes, things like that to make the game your own. Layout and user interaction, however, is intended to be controlled by the templates.

UX design is my passion and part of my job, and I spend considerable time and effort optimizing the information on screen, how it’s presented, etc. to meet the needs of the broadest possible span of users.

Now, I’m by no means perfect. Ares is still in beta for a reason, and I appreciate the feedback to make it better. I will continue to improve the UX through an iterative design process, but it will never please everyone. If a game has specific needs that aren’t met by the base design, or just doesn’t like it, that’s probably not something you’re going to be able to address with CSS alone. That’s what custom code is for. There’s an extensive set of tutorials and support tools (discord, forum, etc.) to help you on your way.

2 Likes

I was tooling around on my phone last night, looking at a few sites, and it looks just fine on mobile. On my desktop (and iPad), though, I agree with @Ren - the join/watch buttons are taking up a lot of useful landscape.

Other than that… I am glad the table is gone, personally. I don’t want to have to modify the page templates if I don’t have to, 'cause I do like that, generally, one Ares game is laid out much like another, so having a little more control over the appearance of the page without having to edit a template works for me.

2 Likes