Design drafting

Posted in

#51 by yorhel
2018-04-07 at 04:58
Thanks for the update. It's alright for the moment, I'm busy with work and some server transfers. Hopefully things will settle in 2 weeks.
#52 by yorhel
2018-04-26 at 05:58
How're things going?
#53 by witchcapture
2018-04-29 at 05:46
Pretty good, was a bit busy catching up with work, but I've got the VN edit page done now, here's a zip with patches + demo HTML: link - this also includes the fixes I mentioned before.

There's a pretty generic form framework in there that should be able to be used for most of the edit pages I think. For pages where you don't want a sidebar you can add the class "container--narrow" to the main page container - there's an example as "vn-edit-2" in the zip too.

Still a bunch more places that need designing, so I'm thinking I'll probably run through those next:
* Non-VN database pages (character, staff, releases, etc)
* Login/register
* List/search interface for VNs/releases/characters etc
* User profiles
* VN list / votes (speaking of which, do you want to keep these as separate pages, or combine them in to one?)

Should go a lot faster now that we have a lot of the interface elements already existing.

And some misc smaller things:
* Experiment with the alternate menu idea you mentioned earlier
* Find or draw icons for all release platforms
* Interface for editing your rating etc on vn page (once there's a design in place for your list page)
#54 by yorhel
2018-04-29 at 15:57
Thanks! I'll integrate the patches later this week.

* VN list / votes (speaking of which, do you want to keep these as separate pages, or combine them in to one?)
They should probably be combined again.
#55 by yorhel
2018-05-05 at 07:12
Sorry for the delay, this server transfer business took longer than expected. I'll now finally have some time to continue.

I'm really liking this form styling, works well at every resolution! I've merged your patches and will start work on implementing the forms.

If you're doing a git pull, make sure to rebuild the Docker thing: link
#56 by witchcapture
2018-05-12 at 05:02
Awesome! Glad to hear you're liking it :)

I'm gonna be away all next week, but I'll continue with my work on the rest of the pages when I get back
#57 by yorhel
2018-05-21 at 12:07
I've been making some progress on the VN edit form - it's slowly starting to become functional.

I stumbled upon a few things that I could use your help with:

- Error reporting and styling thereof. I try to use HTML5 validations where possible, but some things require manual checks and custom error reporting. Currently there are such checks on the aliases list (duplicate aliases, or aliases already being used as main / release titles) and for the staff list (duplcates).

- Styling of the dropdown box contents. We'll need to display multiple fields (id, name and original in the case of staff), and just displaying the string isn't so fancy. Would it make sense to use a table here?

- Loading indicators. Both for the dropdown search thing and form submission. Possibly other use cases as well. I suppose some kind of spinning icon would work?

A mostly functional edit form is up at link - the aliases field and staff section already have some interactivity.

And I've been wondering, what's that top-bar for?
#58 by witchcapture
2018-05-25 at 06:49
Cool, looking good! Fun seeing it in action :)

Error reporting:

I've added some things that should help here:
1) You can add the class .card__section--error to a .card_section to have it styled as an error message
2) For individual inputs, you can add the class .is-invalid to the input or a common parent to style them with a red border. You can also add a div.invalid-feedback below an input to display the error inline. (modelled after Bootstrap 3.
3) For page-level errors, you can do <div class="alert alert--error">Error message</div>

Dropdown styling:

Yep, tables would be an option, you could also make use of the flexbox grid helpers like so:

<a href="#" class="dropdown-menu__item"><div class="row row--compact"><div class="col single-line muted">s14311</div><div class="col col--2 single-line semi-bold">Kagome</div><div class="col col--2 single-line">籠目</div></div>
</a>

Loading indicators:

If you add a div.form-control-wrap around the input (probably need to move the max width inline style to that div too), then adding the class .form-control-wrap--loading will show a loading spinner inside the input.
The other option would be making the content of the dropdown something like <div class="spinner-padding"><div class="spinner spinner--md"></div></div>

The patch adding CSS for the above is available here: link

As for the top bar, if you mean the colored line at the top, it's just for decoration, to add a bit of color to the pages which otherwise might not have much: link - easy to remove it or change the color if you're not a fan though, it doesn't serve any functional purpose. Might just need to update line 54 of vndb.js (the VN sidebar margin code) and change the hard-coded offset there.Last modified on 2018-05-25 at 06:50
#59 by yorhel
2018-05-27 at 09:13
Those styles work great, thanks!

to add a bit of color to the pages which otherwise might not have much
Aah. Makes sense. I mistook it for one of those custom loading indicators that SPAs sometimes have.
#60 by leery
2018-06-03 at 09:39
I'm just going to leave one comment here:

Making things that used to take one click take two clicks is never an improvement.

Kill the Database dropdown. Kill the User dropdown. Kill the Contribute dropdown.

And I sure hope that the search thing will not require an extra click to show the input textbox either.

Sorry if this is the cornerstone of your design, but it needs to be said early. (And it seems I'm already a couple of months late here.)
#61 by yorhel
2018-06-03 at 09:45
We're already looking for alternatives to the dropdown (see #53), and, yes, I suppose there will be a search box rather than an icon when there's room for it.

Your feedback is welcome, but please don't treat this new design as an attack on all things that are nice. Nothing is set in stone, constructive criticism is welcome.
#62 by witchcapture
2018-06-08 at 11:27
Another quick update: been really busy with GDPR and work deadlines the past few weeks so I haven't had time to do anything, but that will be over with in another week or two so I'll be able to get fully back to it then :)

@leery:

> Kill the Database dropdown. Kill the User dropdown. Kill the Contribute dropdown.

I don't think we'll be having all of the options visible in the header at the same time, there's just not enough room (maybe in the footer?), but like yorhel said we'll be exploring some alternatives to the current setup - in #32 he suggested a hover menu with the the links laid out horizontally below the main header, which I think would work really well.

> And I sure hope that the search thing will not require an extra click to show the input textbox either.

It's still TBD exactly how that works, but that wasn't ever the plan. My first idea for that was that you'd click the search icon and it would become a search box, already focused, which wouldn't take any more clicks than if it were visible to begin with.

An always-visible search box is an option there too, probably a much better option as that's a much larger click target. The primary reason it's just an icon at the moment is that I was leaving it until after the search interface is designed.
#63 by kurothing
2018-06-15 at 13:52
Note: This post is entirely my opinion, feel free to discard it....or argue it ;D
Note: Wall of text ahoy!

My first idea for that was that you'd click the search icon and it would become a search box, already focused, which wouldn't take any more clicks than if it were visible to begin with.

This. We don't need to see the search box when it's not in use.

in #32 he suggested a hover menu with the the links laid out horizontally below the main header, which I think would work really well.

Displaying suboptions, whether in a dropdown or another location on the screen is the bane of my existance when i accidently hover off / over something else and it changes. Also not really practical for touch screen devices. This also means that these menus will interact differently based on your screen size, while the current setup is a similar design for both small and large screens. Personally, i believe that having to manually activate and deactive the dropdown is perfectly fine, because it works the same on all devices and resolutions at that point (Presuming you ignore the fact that the headers are neatly tucked away in a hamburger menu (Thats what it's called, right?) on smaller screens...), and gives the user the ultimate control on whether the menu should appear or disappear.

Aka: Please do not cater to lazy users, at the cost of (imo) subpar functionality.

-------------------------------

On the topic of the VN Page, a "couple" of suggestions:
1) Add a way to "jump to" each section, (EG: Releases, Staff, Gallery, Characters, Stats, etc) from within the page
2) Potentially on the larger pages a "Back to the top" functionality, because it can get pretty long and even worse when the amount of characters in a series far exceeds the average character information, although this is more of an edge case.
2.1) Alternatively, make sections with large amounts of information (Like >5 releases for a language) collapsable, and preferably collapsed by default with either the 5 most popular, latest, or earliest releases being displayed.
3) The relevancy of a tag on VNs isn't very obvious at first glance with the new design, and while my suggestion to resolve it doesn't help mobile users (More accurately, touch screen userse), adding the "title" element with a message similar to "#% Relevancy" will produce the browser based tooltip on extended hober. Besides that, i much prefer the new method because it doesn't require me to squint to see the very unrelevant tags.
4) When changing the information displayed, such as the "Show all tags" option consider smooth scrolling the user to ensure the information is in the view port if it's not. EG: Scrolling past the top of the tags then hiding them will generally result in having to scroll up again. This could be extended to the characters as well.
4.1) This feature should not "activate" if the end result will already be in the view port, so maybe making use of an element at the top (EG: First tag, or character name) to check visibility.
4.2) This feature should be cancelable via the user manually scrolling. Maybe even a user setting to completely disable it, since understandably not everyone would like such a feature.
5) With the character traits, i feel like it might be slightly better to have the non-sexual and sexual versions of "Engages in" and "Subject of" side by side. However, this seems to be rather impractical since the traits are displayed via an unordered list rather than a table.
6) Return an indication of what images are 18+ when they are displayed... :>
7) Referring to the third point on this list, in general information that is seemingly random would greatly benefit from a way to understand what it is, and potentially more detailed information. (EG: The Bayesian rating, VN Duration, and Available languages under the title of the VN)
8) The languages listed at the top of the page under VN title, next to the Bayesian rating and duration should link (and smooth scroll!) to the releases for that language.Last modified on 2018-06-15 at 13:53
#64 by yorhel
2018-06-16 at 13:06
@kurothing: Hmm, I'm not a big fan of any automatic scrolling (smooth or otherwise), IMO that's not functionality that belongs on an informational web page. Your other suggestions are okay, but perhaps a bit early at this point in time.

@withcapture: Thanks for the update, I was getting worried. :-) Not that I'm terribly fast with implementing things, either...
In case you've missed it, there's been a few changes to the development setup. The git repo has moved to Gitea, which might ease collaboration a bit with a fork/pr workflow. And if you don't have anything special in your local dev database, update as follows:
git pull
docker build --no-cache -t vndb .
docker volume rm vndb-data
docker volume create --name vndb-data
That should also get you the new development database on first run.
#65 by witchcapture
2018-06-29 at 04:28
Phew! Just wrapped up the project I was working on that was taking up all my time so I can finally get back to this now.

Awesome! I've used Gitea before, it's pretty nice. New development database looks very useful for testing too, good idea.
#66 by micah686
2018-07-03 at 04:25
A suggestion for the tag meter(the line under each tag). Perhaps make it a little bit taller, and add some color to it, so it's more readily apparent.
#67 by witchcapture
2018-07-10 at 11:47
@micah686 Hmm, the tag meter already has a fairly high contrast ratio, but it's not supposed to be *too* apparent... though it's harder to compare tag ratings than the current site, so maybe we need to add the number back?

@yorhel I've been working on some ideas for the detail pages, any aspects of these that you like? Or I can come up with some completely different ideas too.

* 1: link
* 2: link
* 3: link
* 4: link

Forgot to add the edit button to these before they were uploaded, but since all of the alternate actions are based around editing, I was thinking an "Edit" button over to the top right (below the main menu), with a dropdown for history and copy, might make sense.

I noticed the VN page was also looking a bit washed out with all the grey too so I'll make a PR with updates to the styling, maybe after finalising the detail page to keep the colors in sync - lightening up the top panel and BG, and maybe making the gradient lighter and slightly more saturated, and moving it to start after the raised top panel. Something like this maybe (hack that only works on VN pages):

html { background: hsla(200, 14%, 98%, 1); }
body {
background-image: linear-gradient(hsla(205, 35%, 93%, 1), hsla(200, 14%, 98%, 1));
background-size: 100% 500px;
background-repeat: repeat-x;
background-position: 0 300px;
}
.raised-top { background: #fcfdfd; }
.navbar { background: none; }
.main-container { padding-top: 20px; }
#68 by yorhel
2018-07-10 at 15:01
Welcome back!

Some thoughts regarding the detail pages:
I'm not a huge fan of too-flat design, so #4 is out.
I do like the raised Tags and Visual Novels boxes - which is nicely consistent with the form layout, too. It's a bit of a pity that the space for the sidebar is completely unused in #1 and #2, though. How would a combination of the boxes from #1 with the labels from #3 look?
It would be nice to have some consistency in the raised-top for most DB entries, especially with regards to the links. I like option #1, but perhaps with the image at the same place as for VN entries. My only concern here is that not all DB entries have an image - so the imageless #1 top will have to be used for other entries in any case.

VN styling improvement: Subtle, but definitely livens it up, I approve. :)
#69 by witchcapture
2018-07-13 at 10:14
Thanks! Good to be back :)

I'm not a huge fan of too-flat design, so #4 is out.

Sure, I'll keep that in mind for the other pages too. Is it the lack of depth you're not a fan of, or the lack of clear separation between the sections? - i.e is #3 the sort of thing you'd prefer to avoid too, due to the lack of depth?

I do like the raised Tags and Visual Novels boxes - which is nicely consistent with the form layout, too. It's a bit of a pity that the space for the sidebar is completely unused in #1 and #2, though. How would a combination of the boxes from #1 with the labels from #3 look?
It would be nice to have some consistency in the raised-top for most DB entries, especially with regards to the links. I like option #1, but perhaps with the image at the same place as for VN entries. My only concern here is that not all DB entries have an image - so the imageless #1 top will have to be used for other entries in any case.

Great, so something like this maybe? link
For DB entry types without an image we could probably just shift the header content left and add a label for the description too: link
Though for the staff pages there's more columns than that in the table, so I guess it would need to be full width there (can come back to this after doing the listing/search pages when we have some better list styling): link
#70 by yorhel
2018-07-13 at 11:05
Is it the lack of depth you're not a fan of, or the lack of clear separation between the sections?
Lack of clear separation is a big part of it. #3 is alright, but I also find that a bit of depth does improve the layout a little. Of course there are limits, nested depth or having too many of those boxes will just make it look cluttered, but that's not a problem we're having yet.

@rest: Yup, all that looks like a good approach.
#71 by witchcapture
2018-07-29 at 11:59
Lack of clear separation is a big part of it. #3 is alright, but I also find that a bit of depth does improve the layout a little. Of course there are limits, nested depth or having too many of those boxes will just make it look cluttered, but that's not a problem we're having yet.

Great, makes sense.

@rest: Yup, all that looks like a good approach.

Cool, opened some PRs on Gitea:

Color/spacing tweaks: link
DB entry page CSS/HTML: link

Got a few options for the content page design:

No raised header: link
Raised header: link
Raised header and content in card: link

Also this idea for the login page:

Normal: link
Error: link

I'm working on a few ideas for the user page now.
#72 by yorhel
2018-07-30 at 15:47
Cool, opened some PRs on Gitea:
Thanks, pulled! (Seems like Gitea doesn't really like it that much when you pull outside of its UI, the email notification didn't make much sense to me. Oh well.)

Got a few options for the content page design:
Raised header for consistency, no real need for cards in this case, IMO. I had already implemented the doc pages in that style earlier (link), but didn't spend much time on layout and formatting - so feel free to make adjustments.

Login page: Cool, but I'm not sure the button needs different styling from the usual form submit button. Consistency is good here.
#73 by witchcapture
2018-08-25 at 05:02
Thanks, pulled!

Great! Also, great, doc pages look good.

PR for login page CSS/HTML: link

Also, I noticed the HTML for the character page that was supposed to be attached to my previous PR link got eaten by Gitea, so I've uploaded it to pastebin instead, should be in the comments on that PR.

Here's some concepts for the user details / list pages:

User detail: link
User list: link

I can't seem to come up with any (good) new ideas for the user detail page, so the concept here is just an updated version of the current one. List page is merged votes + list like we discussed before. Open to any suggestions to improve these :)

Also, doesn't interfere with any of the design stuff because I can just comment it out in the makefile, but the Elm build is failing for me: link - is there anything in particular I need to do here to get this working? Recreating the docker container didn't seem to help last time I tried.
#74 by yorhel
2018-08-25 at 05:23
Also, I noticed the HTML for the character page that was supposed to be attached to my previous PR link got eaten by Gitea
Ah! I was wondering how to use that CSS, but that explains it. Thanks!

User detail
Good enough, can always adjust later.

User list
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?

Also, doesn't interfere with any of the design stuff because I can just comment it out in the makefile, but the Elm build is failing for me
Odd, looks like elm/Lib/Gen.elm isn't being updated. util/elmgen.pl is responsible for that. Does 'util/elmgen.pl >elm/Lib/Gen.elm' give any errors?

Independant of that issue, I will (hopefully) be upgrading to Elm 0.19 pretty soon, which will require another docker rebuild.
#75 by yorhel
2018-08-25 at 05:30
Nevermind, I'm stupid. I had some uncommitted code in the TUWF repo. If you do a docker rebuild to get the latest TUWF, it should work now.

Reply

You must be logged in to reply to this thread.

2 Stupid Dogs | 3D Camcorder | Forever My Girl (2018) online latino