Crowdsourcing UI & Design Update

Posted in

#1 by yorhel
2017-11-26 at 09:49
I've hinted in t9711 that I felt it high time to give VNDB a major facelift, but the more I try the more I realize that I can't really do that on my own, so here's an attempt at some crowdsourcing.

First, a disclaimer: That I'm trying doesn't mean we're definitely getting a facelift. If it's not a significant improvement over the current design, we'll just stick with the what we have. (For some arbitrary values of "significant" and "improvement"). I know there are many who have come to love the minimalism and conciseness of the current design - don't worry, I aim to replicate that in the new design.

Second: I don't only plan to update the layout & design; I also intend to rethink many interfaces in order to make parts of the site friendlier or more efficient to use.

Now, to guide further discussions and development, here's a quick FAQ with some thoughts.

What's wrong with the current design?
- Font is too small
- Looks fugly on very wide screens
- Not mobile-friendly
- Looks like it was made in 2003 (not that this is always a bad thing)

What do I like in a good design?
- Brutal simplicity & minimalism, both from UI and maintenance standpoints
- Functional > Beautiful
- Structure of the site is easy to discern; Easy navigation
- No surprises. In particular, should not need a widely different "desktop" and "mobile" experience
- Consistency
- Bright colors probably suit VNDB better than the current dark design. But this is likely controversial, so a light/dark option is preferable.

What are the technical requirements of a new design?
- Looks good with screen sizes up to 1000px; Empty vertical bars for wider screens is fine.
- Not too much bloat; ~100k of CSS before compression is more than enough
- No custom fonts (certainly not for icons, SVG works well enough)
- All resources must allow self-hosting
- Browser support: Tier 1 (everything works as intended): Latest Firefox & Chrome; Tier 2 (things may look fugly, but usable): Edge, Safari, 2yo Firefox & Chrome

What do I NOT want to replicate from "modern" websites?
(This is where I rant about some straw man hipster website)
- Bloat & slowness
- Large amounts of negative space
- Lack of structure
- Shitty overdone animations

I'm open to change everything about the VNDB user interface, including the entire structure, UI elements, etc. But for now I'll start with soliciting for feedback, ideas and early proposals. What'll really help is a good front-end developer with strong opinions on UI/UX and lots of free time. Either way, community input is a valuable start.Last modified on 2017-11-26 at 10:06
#2 by sakurakoi
2017-11-26 at 11:32
this reminds me... I browse the site with 175% magnification on a mere 1920x1080 monitor, while 150% is still readable, the font looks a tad weird and imho lines appear to be too long

(for comparison, taking the last paragraph of #1 as example:

175%
line 1: I'm open to change everything about the VNDB user interface, including the entire structure, UI elements, etc. But for now I'll start with
line 2: soliciting for feedback, ideas and early proposals. What'll really help is a good front-end developer with strong opinions on UI/UX and
line 3: lots of free time. Either way, community input is a valuable start.

vs 150%
line 1: I'm open to change everything about the VNDB user interface, including the entire structure, UI elements, etc. But for now I'll start with soliciting for feedback, ideas and
line 2: early proposals. What'll really help is a good front-end developer with strong opinions on UI/UX and lots of free time. Either way, community input is a valuable start.

vs 100%
line 1: I'm open to change everything about the VNDB user interface, including the entire structure, UI elements, etc. But for now I'll start with soliciting for feedback, ideas and early proposals. What'll really help is a good front-end developer with strong opinions on UI/UX and lots of free time. Either way,
line 2: community input is a valuable start.

I only browse one other website at 150% to actually have it fit my wide screen but otherwise I have no other problems while browsing around the web/felt no need to magnify)

Apart from that, yeah, I personally quite prefer the dark style which is softer on the eyes but welp... if there are options I have no reason to complain.

now if you want to avoid negative/empty space, I'd suggest to move the name of the poster, post number and time stamp from the left to the top and differentiate from posts through another slightly different color. While the magnifications increases the empty space to like one fifth instead of like a tenth, I think that space is wasted.

Otherwise, I pretty much also like the simplicity and I did not really find any non-intuitive designs or clicks&time wasted because one has to go through 3 sub menus that always pop up in the opposite corner. Sadly, I'm not one who can implement wide screen support and better/bigger fonts, not even sure how one would move the stamps.

Welp, what could by the by be changed and might be an improvement, or not, would be the search bar to allow for searching for producers, staff and characters from all pages instead of clicking those first on the left. It only searches for VNs atm and buttons could change that which light up to also tell that it is set to VNs, Producers, Staff or Characters. Though that'd mean to move it to the top right which at least would be in line with most other layouts (and we all know how newcomers like to miss the search feature... well, not here I guess).

I am not quite sure if one could move the whole menu in whatever way to the top right and get rid of the statistics, well, move them to a new page to save more space. (The whole UCP could certainly be a drop down menu imho). This would allow for more space for VNs, specifically Characters as well. To top that of, well, either a back to top button that scrolls with or having those pinned (optionally) would be advisable.

Needless to say, I am aware that I wrote that I personally rather not have so long lines of texts and those suggestions would result in lines then covering more of the screen, the entirety even but these are just ideas and empty space bothers me more. I hope I could help in some way at least.
#3 by savagetiger
2017-11-26 at 15:51
Besides making the default font a little bigger (even with my tiny laptop I have it zoomed in to 110) and being able to refine the sidebar search instead of it defaulting to vn I can't think of anything to change.
The simple design and dark theme are very easy on the eyes.
#4 by entra
2017-11-26 at 19:08
Are there any other similar sites people use similar to VNDB for other topics or subjects e.g. TV, anime, trains, stocks - anything? Perhaps VNDB can draw inspiration from parts or design that they rate highly.

Your design overview sounds great. Function over form is exactly what a database should be imo. A few high level things I think are lacking at current:
- Better discoverability, overlaps with easy navigation. It's not uncommon for VNDB to have features but for users to have no idea they are there. How many people never notice the tabs at the top of a VN or the characters tab? How many people know the wishlist notes feature exists? Contributing especially should be easy and obvious.
- More "quality of life" features. Little things like a cover or character image preview when hovering over a link. Information right on hand, e.g. when editing have a "?" next to each field that shows relevant editing guidelines. Help text like "Only the name is filled out, have you forgotten anything?" when editing entries. More icons to convey top level important info quicker. Showing character images right away when editing, like screenshots.

A bonus, as you did say entire structure...
- Changing to a release centric model vs the current vn centric model. Staff, characters and tags really belong to releases, not VNs. This is most apparent with all ages, remakes, special releases/patches with bonus routes/characters/features. VNs should almost be meta entries that link related releases together. How you do that and keep the site pleasant to browse and edit, I don't know :)
#5 by tigershark
2017-11-26 at 22:11
A few general suggestions:

- Reduce text, iconize.
For a lot of things, small icons are a hell lot clearer than the equivalent word, while occupying less space. A lot of them can be just unicode symbols which makes things super fast. This was created for another topic but is relevant here too:
link


- Layout/structure
The current layout of info for games is not bad, but I think it would be awesome if each user could:

1- Order slices: for example, put Screenshots over Releases and move Staff to the end of the page.
2- Decide which slices start collapsed. Example: I don't care about Staff, so I set it to be collapsed, saving space and bandwidth.

I call "slices" to:
-Releases
-Staff
-User stats
-Screenshots



What's the difference between this and tabs? well, there is no way to see 2 tabs at the same time, while with collapsible slices, we could put whatever we actually care about in the top and get them immediately.

For non registered users, a cookie could be used to remember which slices were collapsed last time, or simple stick to a default.



Edit: Some mention a release centric design. I think that's a bad idea. While it makes sense from a data/structure point, I don't believe there exists a way to achieve that without creating a mess...
searches would be plagued by multiple releases of the same games...
for a given game, a release might have 30 tags while other only 2, not because the content is different but because we were lazy....
a lot of releases would have identical info except for... packaging and media....
etc....

Now, adding tags and staff to the "release" entity in db and show that in the "releases" tab, but keeping the vn as the "main" object could work. (Not that I really care though :P)Last modified on 2017-11-26 at 22:20
#6 by rampaa
2017-11-26 at 22:45
"Just like we have release filters along with visual novel filters, would it be possible to have trait filters as well for visual novel searchs?

Alternatively, visual novel filters and release filters for character search would also do.

I don't know how hard it would be to implement or whether or not this is a reasonable request. So I apologise if this is somehow unresonable."

(I asked this recently: link .But thought asking it again wouldn't hurt.)
#7 by yorhel
2017-11-27 at 07:12
Uh, thanks for all the feedback so far. There's a few good suggestions in here, but while the suggestions are useful in getting a better picture of what we want, it doesn't really help us getting closer to that goal.

As a reminder: I'm just a stupid programmer, not a designer. I am utterly incapable of creating a design that satisfies all the mentioned constraints while not causing your eyes to bleed.

So if you're the creative sort, or happen to know such people who are willing to help out, I'd love to see some actual ideas and proposals to get us closer to a new design.

(Meanwhile, a friend of mine came up with a quick draft - It's a bit too complex and messy for my taste, but perhaps it can serve as some inspiration)

EDIT: And to clarify: I don't intend to make any major changes to the database structure as part of this UI update, so the VNs and releases will stay where they are, for now.Last modified on 2017-11-27 at 07:18
#8 by tigershark
2017-11-27 at 14:06
u#yorhel
As a reminder: I'm just a stupid programmer, not a designer. I am utterly incapable of creating a design that satisfies all the mentioned constraints while not causing your eyes to bleed.

So if you're the creative sort, or happen to know such people who are willing to help out, I'd love to see some actual ideas and proposals to get us closer to a new design.

(Meanwhile, a friend of mine came up with a quick draft - It's a bit too complex and messy for my taste, but perhaps it can serve as some inspiration)


From a programmer to another, try to focus on the structural and functional aspects of design, cuz u can deal with that. Only then, worry about the artistic side.

What I mean is, decide which info should take priority, decide if all info should be there at the same time or parts can be collapsed/omitted by users, decide if you want to use icons to save space or only text, etc.
Without worrying about the actual icons, the actual colors, fonts, sizes, etc., don't think in terms of 2D space, just a text list, a requirements write up.
After that, check if the parts u mention there are properly "modularized" (most of them already are), "collapsible", etc, if not, try to make them so.
Once you achieve that, changing the visuals would be just a matter of changing the divs positions and sizes with a css.



This is a db site, as such I think what we want from it is quick and easy to access data, a change on how it looks, w/o improving the functional aspect, just to make it "cuter", won't please a lot of people and so be a wasted effort.

For example, I would really, really hate if the site was like the draft u linked. Why?
Because:
- Tags are in a hard to find, hard to read place
- Personally, I don't want to see the characters data (I consider that mayor spoilers)
- U have to scroll waaaaay too much to see the screenshots (which are spoilers too but I like to have a glimpse of the art style).
- Personally, I don't care at all about the staff, but I do care about user stats, having the staff vertically listed means I'd need to scroll a lot to get the scores, and they are in a hard to spot place.
- Personally, I consider the "who voted" to be just clutter :P
- The releases table takes A LOT of space, but doesn't add any extra info compared with current version.
- Description gets the best spot, which makes sense until you remember A LOT of descriptions are just 2 lines or just missing.

I consider items that start with "personally" completely subjective while I consider the others rather general/objective.


To resume, u said "Functional > Beautiful" so think about individual functional improvements for little parts of the UI. Get people to help with those. Then try to work and get people to help with the overall layout and finally, the styles (fonts, colors, icon sets). I think u are trying to come up with a complete face lift in a single sweep and that's hard, really hard and prone to failure :P

Sorry if I sound condescent, u might be a far more experienced and talented programmer than me :P
(And sorry for the wall of text, my wall-o-text skill is max lvl)
#9 by warfoki
2017-11-27 at 14:28
@Yorhel:

I cannot help you much as I'm no designer or programmer, I'd just like to add my two cents on the linked draft. Which would along the lines of "Oh, hell no!" The VN pages are kinda busy and overly long occasionally already. If anything, we should make it more compact, not bigger. All the information should be either in separate tabs or should be collapsible. Adding character pages to the main page is a horrible idea. It just clutters everything.

Honestly, I think the current layout is good as is. Some minor changes (basically the first two points in Entra's first post and the entirety of Tigershark's post right after) would be nice, but a total overhaul is utterly unnecessary: if it isn't broken, don't fix it.Last modified on 2017-11-27 at 14:28
#10 by tigershark
2017-11-27 at 14:28
Personal example of the requirements I talk about earlier:


- Main pic, data and tags should take the best spot.
----- Because those define the vn more than anything.

- Overall ranking should be more prominent, probably included in the main data sections.
----- Because it tells a lot about the vn too.

- Some tags (basic genre ones) should be a different color, or appear first. Maybe share horizontal space with main info.
---- Cuz they tell a lot more about the game than other super specific ones.

- Releases table should show more info, maybe as icons(?)
----- To avoid having to switch to releases tab just to get basic info as "voiced/unvoiced"

- User stats could share horizontal space with something else.
---- Since the section is not using much.

- Sections should be collapsible and re-orderable by user settings.
---- Cuz customizable UIs beat even the most refined static one, and saves bandwidth/db throughput.

With such a list, small changes can be made rather quickly or at least discussed individually.Last modified on 2017-11-27 at 14:37
#11 by yorhel
2017-11-27 at 14:52
From a programmer to another, try to focus on the structural and functional aspects of design, cuz u can deal with that. Only then, worry about the artistic side.
That's what I've been doing for the past 10 years, and I'm rather unhappy both with the end result and with amount of time this takes (I'd much rather work on other aspects and let someone else work out the UI aspect. I was hoping VNDB got popular enough now that I didn't have to solo most development aspects).

I didn't really expect I'd have to argue the point of a complete redesign and how that seems like a better idea than incremental improvements to the current design. Perhaps incremental improvements are the way to go, but I'm very much not interested in doing that myself - I've hit the limits (or at least, my limits) with that I can do with the current layout, which is why I'm asking around for proposals for a new one. Yes, it will be a lot of work. And sure, to avoid failure it won't be an instant switch-over but a gradual replacement. But I'm not in a hurry at all.
#12 by roadi
2017-11-27 at 21:48
I hope I'm not the only one who absolutely loves the current look with its simplistic and clear layout...

If someone actually cares about the outer look that much, those ones can use custom CSS to make the necessary fine tuning.
Take the simplicity away and custom CSS becomes a fucking nightmare to apply - simplicity is a feature, not a lack (as ridiculous as it nowdays is).
You could, of course, consider adding some "easy-to-use" CSS hooks to make customising easier, but I'd change nothing more than that.

If you have time to waste on GUI/UX, please, use it for something that actually matters, like new features (e.g. game engine db) or bettering those already existing.

(For the record, I hate anidb's bloated UI shit.)

edit: typoLast modified on 2017-11-27 at 21:49
#13 by warfoki
2017-11-27 at 21:52
Second everything that Roadi have just said: minor upgrades, sure. However, a total redo is completely unnecessary.
#14 by superangelo128
2017-11-28 at 09:00
I've been all for a complete redesign of vndb for a long time. It's one of the main reasons I stuck with visualnovelver before it turned into a VN developer...

In any case, I do agree that things that large amounts of negative space, bloat and over the top UI animations are unnecessary.

However, contrary to what people are thinking it's certainly possible to have a simple design while stlill having it good on the eyes AND much easier to navigate and look it than this super old school layout.

It's hard for me to put all the things I'd want in a redesign into words but..

At the very latest the site that analyzes your vndb proflie (vnstat) is a great start:
link

It has a simple coloring scheme, adjusts the layout based on resolution, the pages with columns (like Novels) have a simple color scheme for the rows and columns but still reads well.

Obviously copying it 100% is a no-go but it gives a good baseline of what I think vndb would need.

Personal preferences but I'd like an option for

* Option for new and old layout. As you can tell, a handful of people are going to be upset if the old layout isn't an option, to appease both parties it'd be nice to have both options available just in case.
* A User Review section for each visual novel. The closest thing we have is the discussions tab but most of those are just questions. It's one thing to see the average score and which users score visual novels. Having people explain WHY they rate a VN as high or low as they did with reasoning is nice to have an in the main centralized hub. Right now you have to go to places like /r/visualnovels, Steam or Google searching to even find reviews of VNs.
* Some kind of way to mark certain visual novels/characters/voice actors as 'favorites' that show up on your profile. More of a personal thing I want.
* Maybe a way of communication between users directly besides Discussion boards. Either PMs or ability to comment on people's profiles?

Outside those I actually think a lot if not all of the functionality on vndb is great, we just need to make things like tag searching a lot easier to do.
#15 by sakurakoi
2017-11-28 at 11:00
simplicity is a feature, not a lack
Simplicity is only a feature if there is no lack and no excess but I dare to say in contrary to "popular believe" that the tag system here especially for bigger or popular works is not what one would consider as a good overview or good for the eyes but rather a mess. Like recently suggested, you should not abstain from having a separate genre system (which don't tell every detail... most works would not even have a dozen genre attached in contrary to several dozen tags in an arbitrary order) just to have more empty space.

Needless to say, there is no need for animated whatever but that ain't anything anyone did suggest. Personally however, I would get rid of the rating system and replace it with recommendations (recommended or not recommended, as simple as that and indeed reviews to clarify) based on whether a work fulfills it intended purpose and is for that target audience it aims for. It's too late for that though I guess...
#16 by yorhel
2017-11-28 at 11:07
Let's stick with the UI issue here. We have enough other threads for feature requests already.
#17 by aakari
2017-11-28 at 12:27
Add twitter log in.
#18 by eduarddato12
2017-11-28 at 13:05
I agree with tiger shark. A ranking list with box pictures of the VNs would be nice
#19 by denp4xlyr
2017-11-28 at 13:28
Couple minor ideas I have.

One thing I notice is that the VN list has a lot of empty space in the middle. Depending on the balance of functionality vs. clutter, I think this area could show information about the VN, e.g. major tags. This would make it easier to browse and find VNs you'd be interested in. Here's an example from a mock-up I made a while back: link

Another thing is use of color to separate tags or information. I use a userscript that gives tags on a VN page a colored box next to them, and this makes it a lot easier to find what I'm looking when browsing the tags. I like the density of information that vndb has and how information is presented for the most part, but I think color is underused in categorizing and distinguishing info.

The home page could have some extra content, since on a 1080p screen there is still space at the bottom. When I come to vndb, it's usually to do an advanced search, so I think the home page could benefit from having the search bar with filtering options that you see in the "Visual novels" area. In fact, every page has extra space at the top that could have a more advanced search bar. Quite often I want to search for a tag, company, or user while already looking at a VN, and rather than open another tab to do so, it'd certainly be easier to simply type into a search bar right there, select the category I want to search, and have the results open in a new tab.
#20 by denp4xlyr
2017-11-28 at 13:40
Another thing I'll add is that it'd be great if you could press back on the home page and see the previous 4 random VN images. I sometimes spend some time refreshing the home page to find VNs, but I skip over interesting screenshots often and then can't find out what VN it was.
#21 by roadi
2017-11-28 at 13:53
@15:
You do realize you are contradicting yourself there - asking for both better UI/UX _and_ new features.
If we are to have one and only one here, then, of course, that should be the latter one, no?

As for the suggestions, rewriting the CSS stylesheet in Less could make UI modifications easier and provide structure.
This is not a direct improvement, of course, but it could help in the long run.
#22 by tigershark
2017-11-28 at 14:33
@superangelo128
@sakurakoi
Reviews are a complex topic. It's hard to keep them clean ,as in, avoid trash/trolls/off-topics/mayor spoilers/user fights... etc...
Plus some people doesn't care about a peer review, just an aggregate number.


@yorhel
Man, don't take it bad but I lost track of what u really want to do, and what u are expecting potential collaborations to be...

U did not comment/agreed/disagreed on any suggestions, either design functional (collapsible content to name one) or design aesthetic.

Are u expecting someone to come with a complete redesign that:
- complains with your super high-level requirements of the first post
- that u (as the only one with decision power) like
- that works given the current code (perl/html)
and that very same person to do the coding to actually implement it???
Because that... is probably not going to happen....

Some design aspects are pure functional (like tabs, the fields of the tables, etc), that means coding perl/html, so a designer won't even touch it, u need a different person for that.

Other design aspect is the layout, that requires a mix of html/perl and CSS coding, because there's still a lot of divs without IDs or unique classes, so pure CSS is not possible.

Finally there's the "theme" design which is pure CSS.

As I proposed earlier, narrow the scope, divide the problem, come up with (or accept from others) more specific requirements and then try to get people to help with each thing individually, probably on a different forum (anime-sharing, hongfire, etc, vndb site is super popular, 10k world ranking in alexa, but this discussion boards are not).

Personally, I would divide this into different phases and seek collaborators for each:
Phase 0 - Clean up current html by wrapping things with more divs and giving them all unique ids and unique classes (even if empty).
Phase 1 - Implement little functional improvements (iconization as I proposed in a different topic, tabbed/collapsible content, etc)
Phase 2 - Add support for an scaffolding CSS library. This allows changing the layout from pure CSS in an easy way, with support for responsive designs.
Phase 3 - Run or encourage a theme creation contest/pool/thread/what-ever.
Phase 4 - Add the themes u liked and most popular from phase 3 into the site.


Remember, I'm NOT saying u should do this by yourself but as the owner/dev/<insert tittle here> u have to organize things and make them clear so we can collaborate.

Note: if u are worried about an scaffolding CSS library being too heavy (there are simple ones), know that most of them are hosted by big cdn networks and cached by browsers so it's 0 bandwidth on vndb behalf.

Again, I don't mean to be condesendent or anything, just talking from dev to dev :P
#23 by roadi
2017-11-28 at 14:59
If "all resources must allow self-hosting" is a requirement, I'd assume CDNs are out of question.
Besides, keeping javascript shit to minimum is admirable.
#24 by yorhel
2017-11-28 at 15:09
I'm reading the suggestions here, but I won't go in detail into the "incremental improvement" types, because they're not that interesting to me at the moment. That, and many of those suggestions have been in my head for ages, I just have trouble working them out.

And I've yet to see a suggestion on how to handle the biggest issue with the current design: Mobile.

Are u expecting someone to come with a complete redesign that:
- complains with your super high-level requirements of the first post
- that u (as the only one with decision power) like
- that works given the current code (perl/html)
and that very same person to do the coding to actually implement it???
Because that... is probably not going to happen....
Yes, with the exception that I am only expecting HTML/CSS and that it doesn't have to integrate with any existing code; And for now I'm fine with a quick overall draft. Why is this not going to happen?
(All of this seems less work than your phases, to be honest).

Note: if u are worried about an scaffolding CSS library being too heavy (there are simple ones), know that most of them are hosted by big cdn networks and cached by browsers so it's 0 bandwidth on vndb behalf.
I worry about lightweight client-side stuff to keep the site fast even on shitty networks, not to keep load off the server. CDNs wont work for from a reliability and security perspective, but there's no issue with self-hosting assets at all.Last modified on 2017-11-28 at 17:34
#25 by tigershark
2017-11-28 at 15:10
@roadi
good catch, well, a CSS library won't change so browser cache should suffice.

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

@yorhel
I say it's probably not going to happen cuz:
- the html code right now is not styling friendly
- designing everything with only high-level requirements in a way that you would like enough to implement is arbitrarily hard
- there's not enough people watching this mini forums

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

Phase 0 - Clean up current html by wrapping things with more divs and giving them all unique ids and unique classes (even if empty).
...
Phase 2 - Add support for an scaffolding CSS library. This allows changing the layout from pure CSS in an easy way, with support for responsive designs.

That solves the responsive problem and allows for easy creation of themes and layouts in pure CSS.

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

If u have all the functionality suggestions blocked in your head by whatever reason, they are probably going to be stuck there for a long time, why not "put them in words" (requirements), allow a little discussion/feedback session, then look for collaborators to implement them?? An issue tracking platform would help a lot.

For example, I didn't get any definition/decision on your part about the features I proposed (some iconizations).
I can't start working before having this well defined and knowing u will actually include at least part of what I do.Last modified on 2017-11-28 at 15:30

Reply

You must be logged in to reply to this thread.

Aquarian Age (0) | Supernatural 14ª Temporada Episódio 03 Online – LEGENDADO | 4 Things Show