Design drafting

Posted in

#76 by witchcapture
2018-08-25 at 06:19
Thanks, did a rebuild and it's all working! I got some new errors at first (cannot find type `DocEdit`, etc), but manually running "util/elmgen.pl >elm/Lib/Gen.elm" fixed them.

Looks friendly enough. I worry slightly about the space needed for longer titles, and we need to stuff the user's 'notes' somewhere. I guess with an icon?

Hmm, yeah, maybe you hover over/tap the icon and it shows? Anilist does something similar. Or perhaps you could click it and and the row expands to show the notes and releases.
#77 by yorhel
2018-08-25 at 06:27
Hmm, yeah, maybe you hover over/tap the icon and it shows?
Yup, seems like an idea.

Meanwhile, I see I still have an enormous backlog of stuff to implement. >.>
#78 by kurothing
2018-08-27 at 17:26
I'd just like to point out that the Database API page is looking a bit funky without styling for the tables, but more importantly it doesn't site next to the list like other pages? linky
#79 by yorhel
2018-10-02 at 07:34
I'm still struggling with a whole bunch of things - evidently I suck at UIs.

For character pages, there's a few more things that need to be implemented, but I'm not sure where to place or how to style them. (Some example pages to help: link and link - WARNING: spoiler hiding not implemented yet).
- There should be a spoiler setting somewhere. The styling is easy, could be the same as the dropdown at the tag listing on VN pages. But where? Note that this spoiler setting applies to the entire page: traits, VNs, and instances. We could also add separate settings for each, but I'm not sure that's very helpful.
- Sexual trait toggle. This seems easier, could be positioned at the right top of the "Detailed info" box - doesn't affect anything else.
- And now the extra hard part: Instances. An extra box listing the instances would make sense, but... how to style the character info in there? Not all character info necessarily needs to be on there, a simple listing of characters + images would work fine as well - but still, styling.

The last point may even be related to how characters are listed on VN pages - perhaps it's an idea to create a consistent "character card" that could be used for character listings at several places. Perhaps we can even consolidate that with the character browsing/searching interface. But I'm not really sure if that's going to work well or if separately styled listings still make more sense.


--
Another thing I've been thinking about: At the top "tabs" for each entry we have the database contribution links (Edit, History, Copy, Add Release, etc). I'd say that draws too much attention to them, A generic edit icon with the actions in a dropdown seems more appropriate. Thoughts?Last modified on 2018-10-02 at 07:41
#80 by witchcapture
2018-10-07 at 05:24
To be honest, I'm not that great at them either :P

How about something like this? link

- Spoiler setting is just below the header. I stuck it in the header at first, but it didn't really feel right there, with the new edit dropdown already there and the header being less about the details in general.
- Sexual trait toggle: only problem with putting it in the detail/traits box is that you end up with a some empty vertical space at the top left, which feels a little weird - I think it should be fine just next to the spoiler setting like it is in vndb v 2.
- Instances: I like your idea of a reusable card. I gave that a try and I think it works pretty well here. Using them (or slightly altered to remove the description) instead of the full character browser might make the VN pages a bit easier to generate/more lightweight too. Was that the sort of thing you had in mind, or were you more thinking a card with all of the character details?

Since we've gone more in the direction of cards since the VN page was designed, I might circle back to that later and see if we can bring that a little more in line with the new pages too.

As for the tabs: yeah, I agree, they probably don't need to be so emphasized. In the mockup above I've replaced them with an outline button saying "Contribute", but here's a second version with an edit pencil: link Which one do you prefer?

Let me know if this works for you and I'll whip up some CSS :)
#81 by yorhel
2018-10-07 at 05:50
Nice, I'm liking all the suggestions. I have a slight preference for the edit pencil icon - if only because it's smaller :)
#82 by witchcapture
2018-10-11 at 08:21
Awesome, here's a PR for that: link -corresponding HTML is in the PR message too.
#83 by yorhel
2018-10-26 at 13:32
Alright, finally done with the character pages. I spent way too long fretting over how to implement the trait hiding part - all solutions I could think of are ugly in their own way. I'm happy with the end result though, it's clean and functional!

I did notice an odd bug with the instance cards: Long VN titles will cause the card to be much wider than it should. E.g. link. flex and white-space:nowrap don't seem to work all that well togerher, I ran into a similar issue before with the doc page styline. (Igawa Asagi's page is also messier than most due to the large amount of traits and aliases - but not every page is going to be the most elegant thing ever, so whatever :).
#84 by witchcapture
2018-10-28 at 03:16
Awesome, looks great!

It looks like flexbox changes the default for min-width from 0 to 'auto', and it seems changing it back to 0 prevents this from happening. If you add "min-width: 0;" to ".col, .col-sm, .col-md, .col-lg, .col-xl, .col-xxl {" in grid.css the issue should go away. If the doc page thing is still an issue let me know and I can take a look at that too.

I'll continue with the design stuff and get you some more designs soon :)
#85 by kurothing
2018-10-28 at 03:19
In regards to the long VN Titles, you could create a work around by using the max-width property on the card, using Igawa Asagi's page to experiment, setting the max width value of
max-width: 43.49vw;
on the .character-card class ensures the card width matches the width of the other cards while viewing on a 1920x1080 full screen browser at 100% zoom (To be precise, 835px).

From there, you would need to set a max-width on the inner content, but at this point the
white-space: nowrap;
works but overflows the card element.

Playing around with it a bit further, placing the exact same max-width value onto the .character-card__left class results in the text in the .character-card__vns element being cut to approximately 50% of the card and cut off with an ellipisis.

I'm not sure if this is the effect you want, Here is a screenshot of the effect applied to both .character-card and .character-card__left and a fullscreen one.

This all works on Firefox Maximized (Not F11 mode) on a 1920x1080 monitor. It would require additional work to be mobile friendly, since I used vw (view width) units, which means the card might become about half the width of the screen on lower resolutions.

Edit: Heh, witchcapture figured out a better solution while i was messing around :DLast modified on 2018-10-28 at 03:20
#86 by witchcapture
2018-11-11 at 08:13
Just realized I never did the HTML/CSS for the user and list pages, so PR for that here: link

Hopefully I didn't forget any of the features there :P

Also implemented a simple click-to-edit for the VN ratings in the list page (in the HTML attached to the PR) to see how it feels, and it seems like it would be pretty useful - might be worth adding in something like that to make updating your ratings a little easier.
#87 by yorhel
2018-11-11 at 10:11
Looking good. A few thoughts about the list:
- It's missing space for the "notes" feature - I think an icon or short snippet in the main list would work, the same expanded view as for releases could be used to display the full notes. (I'm thinking of giving this notes feature more exposure in the future, it could work well as a mini-review system - hence my interest in keeping this :)
- I've never been a huge fan of the select-and-batch-edit interface. It's a fine feature for advanced users, but it's not very obvious in its use. I like the in-line vote editing you proposed, perhaps we could expand that to other editing operations. Or perhaps an icon that opens a modal editor for the selected entry. What do you think?
- This is a thing. I'm totally not a fan of that interface, but I can see the appeal of having an image at each entry. How does a "compact view" / "card view" toggle sound?

While we're on the topic of lists, I'm curious if you already had some ideas for the VN browsing/searching/filtering interface. There may be an opportunity to streamline and perhaps even unify some of the UI.
(Plus having advanced filtering on a users' list could be a useful feature. If the UI allows for that, of course, I don't want these pages to become too cluttered)

I'll finish the character editing form first and then I'll work on the user page.Last modified on 2018-11-11 at 10:18
#88 by witchcapture
2018-11-18 at 06:56
- Notes: Good point! I had a feeling something was missing.
- Editing: Cool, I think extending the in-line editing would make things pretty convenient. Maybe combined with a modal editor, so you can still edit things in the card view?
- Card view: Yep, makes sense. I've mocked up a possible version - was that the sort of thing you were thinking?

Mockup including the above: link

Also in the mockup is another idea I had - when you hover over the VN name we could potentially show a little popup with the VN image and some basic details.

The three dot button in the UI there would either open the modal for more detailed editing if that exists or would just be a dropdown allowing you to remove VNs from your list etc.

I hadn't thought too much about the lists themselves in the browsing interface, but I was thinking something like kitsu's search interface could be good for filters: link. The other idea I had for that was allowing users to select and add filters to a list, kind of like a query builder (link has an interface like that in various places), but I don't think that would be as user-friendly.
#89 by yorhel
2018-11-18 at 07:43
I'm liking that mockup!

Editing: Sounds good. Supporting editing in card view seems to require a modal editor anyway, so it makes sense to make it work in both views. This is also what Goodreads.com does with their lists, and it works well IMO.

Card view: I was actually thinking of something like the character cards we created earlier when I mentioned the card view, but I think your proposal might be better. It's similar to Kitsu's and Goodread's card interface.

Filters: This is going to be... complex. I like Kitsu's filters - there's a large Dutch IT product comparison site with a similar but slightly more advanced interface. What worries me the most is the large amount of filters we have might create a messy interface, and we would have a good use case for nested filters (e.g. "This visual novel has at least 1 release that matches $COMPLEX_SET_OF_RELEASE_FILTERS") - currently that's the only type of "nested" filter we have, but there's demand similar features.

(And I'm not liking the amount of JS that would be required, but meh, that's a solvable issue - interface first, implementation second :)
#90 by witchcapture
2018-12-09 at 07:57
Awesome! Sorry it took me a while to get back to you here, been pretty busy the last few weeks.

Got those updates to the VN list in place, new PR here (html attached): link

I implemented a couple of different methods for the click-to-edit - the one on the first row (which styles the editing UI to look normal when not hovered) is probably what I'd recommend as it's far less JS and ended up working better than the other method, but included both in the file if you want to check them out.

Still need to do the modal editor, so I'll get back to you on that soon.
#91 by witchcapture
2018-12-22 at 03:24
Right, how about something like this for the modal? The form fields could just be replaced with regular text when viewing someone else's list.

link
#92 by yorhel
2018-12-22 at 06:13
I've been a bit slow lately, as you've no doubt noticed.

The one on the first row (which styles the editing UI to look normal when not hovered) is probably what I'd recommend
Also the one I prefer from a usability perspective. It feels very intuitive.

The modal is excellent!
#93 by witchcapture
2019-01-13 at 02:40
Awesome!

And don't worry, I'm a bit slow all the time :P

Been pretty busy the last couple of weeks but I'll post some ideas for the filter/listing/search view next week. After that it might be a good idea to revisit the main menu with some of those ideas we discussed earlier in the thread.
#94 by witchcapture
2019-01-20 at 05:53
Oops, forgot to do the modal HTML/CSS. PR: link

I didn't write too much in the way of JS to open/close the modal as I figured you'd probably want to implement that in Elm anyway.
#95 by yorhel
2019-02-09 at 08:27
Alright, time for me to pick up the pace again. Been inactive for long enough. :P

I just noticed that your change of .card__header into a flex in #19 kinda breaks some form headers.

I've got the staff page done now (at least, the initial design of it, the credit listings could be improved); I'll now start on the user's VN list.
#96 by witchcapture
2019-02-10 at 06:16
I just noticed that your change of .card__header into a flex in #19 kinda breaks some form headers.

Oh, whoops! Will fix that.

I've got the staff page done now (at least, the initial design of it, the credit listings could be improved); I'll now start on the user's VN list.

Great!

It still needs a bit of tweaking but here's my first pass at the listing/search interface: link

* Sidebar would glue to viewport when you scroll down, as would table header so you could sort
* Blue dot on a collapsed filter section indicates it contains a non-default setting
* To save space only the original language plus (if it has a release in that language) your preferred language are shown in the list, but there's a (...) that would show the rest on hover
* I've omitted the platform icons due to space, but if they're important we could probably find a way to incorporate those. Maybe on a second line, though would have to be careful to avoid making the list hard to scan.
* Might be a good idea to have a grid/cover image mode like the user VN list too. The ordering there could just be achieved with a dropdown.
#97 by yorhel
2019-02-10 at 07:23
I like what I see! Some feedback:

A consistency thing: Why are top buttons styled differently from the DB entry section tabs that we already have?

Sidebar would glue to viewport when you scroll down
So the sidebar and the table will have different scrollbars? Not sure I'm a fan of that, to be honest. I think the simple and obvious "the entire page scrolls when you scroll" is more intuitive here.

Regarding what information to display: The general theme of feature requests is "MOAR! DISPLAY EVERYTHING!", and unfortunately a sensible case could be made for almost every field to be listed. I'm not entirely sure what the solution should be, we can go for:
1. Multiple lines per entry, as you've hinted
2. Let users select what fields to display for 2 or 3 columns.
3. A mouse-over thing with lots of detailed info. This doesn't provide a good overview, though.

Might be a good idea to have a grid/cover image mode like the user VN list too.
Yup!
#98 by yorhel
2019-02-10 at 13:11
Alright, I made some progress on user VN lists. It's not code that I'm proud of, and editing capabilities aren't implemented yet. I might rewrite the entire thing in Elm, seeing how the missing functionality is going to require more Javascript than I'm comfortable with. But at least the styling can be tested now.
#99 by witchcapture
2019-02-16 at 06:15
Great!

A consistency thing: Why are top buttons styled differently from the DB entry section tabs that we already have?

Good point, we should probably just use the same style here.

So the sidebar and the table will have different scrollbars? Not sure I'm a fan of that, to be honest. I think the simple and obvious "the entire page scrolls when you scroll" is more intuitive here.

Yeah, thinking about it a bit, that would definitely be easier to use.

Good ideas there about the extra information display, will try some things out.

Alright, I made some progress on user VN lists. It's not code that I'm proud of, and editing capabilities aren't implemented yet. I might rewrite the entire thing in Elm, seeing how the missing functionality is going to require more Javascript than I'm comfortable with. But at least the styling can be tested now.

Awesome! Looks good. Also made me realize we might need to add a dropdown or something on the grid view to select the sort order.

Reply

You must be logged in to reply to this thread.

Injustice – Unrecht! | Distance education | Fatal Frame 4