Open stgraveyard opened 6 years ago
nguillaumin
commented
6 years ago Yeah agreed that needs some thinking. Unfortunately I don't have much time to spent on this right now, but I think we should think about having separate pages for each release. That will also help with our indexing in Google and make AL a bit different to the other sites that try to cram everything in a single page.
stefanjl
commented
6 years ago The general idea was as i understood an idea from you Nico and that was to have a "main game page" with all data from what differ the releases apart as well as the general game info... basically you should then be able to "filter" the page by selecting a specific release. So the screenshot and box scans of a release you should be able to select wich screenshots that will appear on the "main game page" and it should be those that really differ from the other.... or just show a different level... the only thing to think of is not to select screenshots that are identical... i mean not having 13 screenshots of the titlescreen that is no different from 13 of the releases... but the 14:th is different and should be selected (and only one of the other 13 of course).
About the other data like memory, protection, disks and such do i not know right now how they should be displayed on the "main game page". But... before moving on to that... right now i want to know if i made my self understood with "main game page" and screenshot? I just don't want to discuss many different things at one :)
stgraveyard
commented
6 years ago So the screenshot and box scans of a release you should be able to select wich screenshots that will appear on the "main game page" and it should be those that really differ from the other....
I don't understand what you are saying here.
What I'm looking for are actual mock ups. If you have an idea, put it on paper and scan or make a picture. Or if there are example websites with ideas or good parts, let me know.
stefanjl
commented
6 years ago ah.. i was thinking how it was to be working internally... you want some visual design examples.. i get it now :)
quite a big thing to design though... i felt a bit stressed yesterday when trying to add my opinions :)
stefanjl
commented
6 years ago May the top bar with the logo be halved in size to save some vertical space?
stgraveyard
commented
6 years ago Convince me... That would be a big change...
nguillaumin
commented
6 years ago Yeah I tend the agree the header is a bit too high :wink: but my design skills suck so it's hard to suggest an alternative!
stgraveyard
commented
6 years ago I am not gonna say 'No' to any change anymore. Although I do like our top bar. When I created AL, I wanted to make something with a nice mix between oldschool look and new functionality (responsive design, ajax ...). The top bar is in the oldschool look department. Today on the web, I miss the playfulness of yesterday. I think the little animations, and the change in artwork when you refresh are just cool. I would really miss that kind of stuff. But again, if you have a good new fitting design, sure, I will try to build and implement it.
Cheers, Maarten
stefanjl
commented
6 years ago About the header... i do like the playfulness of yesterday... thats why i have been doing these trivia pictures and i do want more of that stuff, like i suggested to have more game quotes and such :) but in the same way i felt a bit more vertical space is needed. i have no intention to suggest what changes to the header right now though as focus is on the game detail page ATM.
I need to know a bit about the unofficial (cracks/hacks) releases though and how we should treat them before suggesting a design. My proposal is that we sort of hide them with a "click here for all releases" or similar... i mean the game detail page will not list them all until the viewer has clicked that option. The reason i want the unofficial ones to be a bit out of sight is that we are having all these great interviews on the site and it might get difficult to get new interviews if the creators of the games checks out their games and over 20 cracks is listed immediately... it gives them a non-serious feeling regarding the site and if agreeing to an interview.
nguillaumin
commented
5 years ago Some work on this:
An example with fake data:
I've moved the release info in the central column and made it a tab based system. Not sure how we would tackle screenshots and box scans yet, but I think that's still an improvement compared to the current design?
stgraveyard
commented
5 years ago @nguillaumin Thanks for picking this one up again. Here is my opinion. Although this might be better than we currently have, I personally think we have to throw the current 'tilt' design we have now ON THIS PAGE a bit overboard. You see, I honestly think the CPANEL looks better, and that contains only data. Because the detail page has to be more 'playfull' on the main site, I think it COULD be better if we use the complete width of the screen for a big tile with tabs. This tile would contain the data as seen in the cpanel with visual content. And stuff which is not directly linked to the game or release, like the interview tile, or the review tile, or even the 'you might like this game' tile, and the comments, they could be added below or somehting. Or perhaps just use 1 side tile from now on on this page. 1 side tile, and tiles below a bigger main tile with tabs...
Is this making any sense?
I also think the release tile you have made here, should be more in the visual field of the user, like the first thing he sees, because that is where all other data is related with, no?
nguillaumin
commented
5 years ago Yeah I see what you mean. I'm not completely sure we can fit everything into a single page however, that's a lot of data, event with tabs. I'll think about it...
I do think though that we won't be able to come up with a good design until we move the box scans to the release, and allow for release-level screenshot (otherwise the release tabs will be pretty empty). I'll start working on this, but in the meantime do we want to keep the current design, or use the new one I suggested, even if it's for a few weeks/months?
stgraveyard
commented
5 years ago Hmmm ... Maybe we should work on a better design and release that. This is a pretty big change, and when we keep changing in that magnitude, people might get confused. However, what you have made we can use in the new design, as Indo think the base of the releases here looks pretty good. I just don't like how it looks integrated in the whole of the page...
stgraveyard
commented
5 years ago Ok, I have made some little sketches today, I will explain a bit to make it more clear.
Here we go. Some the way AL is built is always a bit in 4 parts, if we take the game detail page, for example, we have a left side, the middle and the right. Now you will say "hey, that is only 3 parts" but the middle is actually twice as wide as the side. I use this way of working to make everything fit in all resolutions. The left and right tiles fit a phone nicely, and the data in the middle is placed beneath eachother when we make it smaller. Don't know if I make sense but anyway, it will be come clearer soon.
So because we are dealing with so much data now with all the releases and stuff, we should find a way to make it fit better on screen. So I think we made go from a 3 part game detail page to a 2 part, containing the left and right, like this :
So lets start with the left. We have the release selection (like at cpanel) and below that the box scan of that release. If there is no boxscan, we can add another tile like similar game, interview, review ... The main tile contains the screenshots of the game (not the release specific shots) like we have now. Next to it is where the difference start. There I would add a box containing tabs. Tab 1 will contain all the DEV info, we have another tab with the EXTRA info, FACT, REVIEW, INTERVIEW ... and so on. As you can see, I added a note. I was thinking if there is not enough data how do we fill the box in tab 1? We can highlight a user comments, add a fact, add the game series info ... whatever. MAybe a cool graph? We need to think about those things.
Below the GAME part we add a big RELEASE part, which will be refreshed when using the box on the top left.
As you can see from the shot, this can look a lot like the cpanel. For example, the dump section in the cpanel look this good, we can perhaps take a big chunk in the game detail page :
On the left we could add some cool stats of the download ...
I would also like to think about how to make it more fun and interactive. how many times it is downloaded, who downloaded it. Perhaps add user scores ... I just don't know, some fun stuff.
Another thing I was thinking about is how do we build the screen for games with almost no data. We need to think it through a bit.
Also, please check out this template : http://akveo.com/ngx-admin/#/pages/dashboard
This may inspire you as well. We have a lot of space on screen, and this templates even makes the tiles flip around. A neat effect we could 'steal' is we could use it to display even more data.
I'm looking at example sites on the net, but I just don't find anything that looks good. LEmonamiga is dated, AM is not my thing, Exotica is dated, demozoo is a fantastic DB but the website is just horrible imo, mobygames isn't bad I guess ... I think AL look way better than all the rest ...
Please post as much as you can ... I need opinions! Let's make this site awesome. @nguillaumin @stefanjl @stsilversurfer @Brume-AL @MugUK ...
And once this is done, we seriously need to start working on our search engine, search result page and statistics stuff ...
stefanjl
commented
5 years ago How about "Guardians of the Past" as an example... do you like that design? ;)
I would personally have as much info as possible on the main page... for example the info now seen in "main info" and "releases" tiles joined together in one long tile and the release specific info is marked in some way just so you know it does not go for all releases... and when you select a specific release so does the list shrink only to show the info specific for that release.
About what i said earlier to make the header smaller... maybe it should be done and then the buttons for "news", "games", "reviews", "interviews".. etc, could be used for the releases? sorted by year with drop down menus to select specific release?
stefanjl
commented
5 years ago Here is a smaller header example.. i included the original as comparison... i guess i could have done the button links at least twice the width but i guess you get the idea :) I tried to show the diagonal design just like the function keys of the ST.
stefanjl
commented
5 years ago And the dropdown menus example:
The data is not relevant to Xenon 2.. i just used that to get a screenshot.
stgraveyard
commented
5 years ago Thanks for the input @stefanjl . Honestly, I really don't like this idea :-) I understand we could make the top smaller, but you are changing the complete interface here. I personally would not want to use the top bar for page specific stuff, I want the top bar to be the main interface for the whole site. We could of course expand using drop down buttons, but then again, I would not add screen specific functions as this would become a mess.
Now, in my new design, this is based on the cpanel. I also would not like to mix game and release related options in one tile, that would be too complex. When you select a release from the left, the complete 'release' tile would change with all the options of the release. Nice and clean. The top stuff would stay the same.
I do like the Guardians of the Past layout and look, from what I remember, as I can not find the site online ...
To me it is clear that you are the person with the knowledge to make this site from a content POV perfect so we can be measured up to site like HOL. But the design is something I hold very dearly :-) I do want to change it, but I really want to stay proud of the look. I want more input and ideas from you all.
Oh, and about the F keys layout. Not a bad idea to perhaps make the current buttons like them. Could be neat ... Or maybe wait and activate the skin function again and build a complete Guardians of the Past look over the AL code, could also be a neat project. Or a little green desktop tribute look ... or ...
nguillaumin
commented
5 years ago Thanks for taking the time to move this one further and to do some mock-ups!
On the layout, I wonder if the way it's organized won't be confusing: We have a "menu" with releases on the left, but the main tile on the right is about a game (if I understand correctly). That may be confusing to users because you expect the item that you selected on the left menu (a release) to be what's displayed just next to it, but with this layout the release data is actually below the main tile.
I think if we wanted to use a layout like this, we need to make sure that the release menu is "connected" to the box containing the release info. They should sit next to each other.
Another thing: That's a lot of tabs :wink: Generally speaking that's a lot of info to display on a single page. I still think we should investigate keeping the page simple and playful for the game, with the option to digging into a release for more details, in a separate page.
The information is somewhat hierarchical (Game → Release → Media → Dumps) and I feel we should represent that either in the layout or in the navigation.
With all that being said, I don't have a better idea or a mock-up to present. I want to spend some time on this, but I'm not sure if I'll have it.
Regarding @stefanjl suggestions:
I'm in favour of reducing the header height too. I would do a full width menu bar though, perhaps just move the main menu at the very top of the page? Here's a quick draft:
In any case we don't necessarily need to do that now, I think we can do it independently than these changes.
I'm not a fan of drop down menus, they are not "discoverable" (i.e. users can't know there's a menu until they discover it by chance). Plus I'm not sure we would have enough releases to need drop down menus. I think only a handful of games have more than 2 or 3 releases currently...
stefanjl
commented
5 years ago Maarten could you clean up your sketches a bit... i can't read the handwriting :)
stgraveyard
commented
5 years ago I will come back to this ... I'm used to a keyboard, my handwriting sucks :-)
stgraveyard
commented
5 years ago Ok let's forget my designs. Let's forget the border. I was thinking about this.
So how about this (as @nguillaumin suggested). 1) We create a main game detail page containing only game info. The boxscans will be removed from this page, but a small box containing the overview of the releases (like on CPANEL) is present with clickable links. The page is filled with the game options, and the tiles we have now like review, similar game ... 2) When a release is clicked, we enter a new page with all the release data. this page contains a box with the main game back link, and optionally, the page can be filled with some tiles of the game itself. This way, we have more than enough space. A design is needed.
Another thing. What about the search engine. I would like the option to have a main game search, searching on the game table. Optionally, we could do a release search with extra release search features like STe enhanced and stuff. But I do think we should make it clear and seperate both or it will be a mess (as seen on AM, I don't like thart at all).
What do you guys think?
stefanjl
commented
5 years ago Maybe we should discuss the search engine in a seperate thread... just so i don't get so confused with the design discussion ;) I will think a bit about the design this weekend :)
stefanjl
commented
5 years ago Ok i promised to much for this wekend... there are some personal stuff why... i will write at facebook messenger because it is not public like here (or to be).
I do like to have the release selection as high up on the page as possible... maybe not just like the dropdown menus i suggested earlier as they don't show a good overview of the releases as Nico pointed out.
nguillaumin
commented
5 years ago Here's my take on it. The game page:
The list of releases below the screenshot allow to navigate to each individual release page:
I'm not super happy with the media/dump section yet but that's a start.
I've used an online tool to make the mockup, I have annotated some parts of it. They will show with an orange grid, please mouse over them to see the details to better understand some parts:
Here's the link: https://wireframe.cc/pro/pp/548de3f0c212049 . You can also leave comments on the mockup directly. You can also switch between the 2 mockups with the left/right arrows on the top right.
nguillaumin
commented
5 years ago Hm, didn't realize that the tool I used was not completely free so I only got a 7 days trial!! Better hurry then...
stgraveyard
commented
5 years ago Ah, this is a very nice way of working.
The first thing I notice. You are now using full screen with only 2 tiles, but the tiles don't need any enlarging. My concern now, expecially for the game page, is that it will have a lot of empty space. The screensnhot tile is something that does not need to be enlarged, same for the boxscan. So how will this fit and look good. Don't get me wrong, what you have made is nice and clean, but how does it fit in the 16:9 aspect without too much dead space? Also, the boxes below are a good idea, as very few games have a review, a similar game or comments, so only the submit box stays, but it is at the bottom, so that is kinda ok. We could fill with some extra tiles like the interview and ... OR we could make a releases box on the left and below that a small submit info box? The dev data above the shots, we can also replace. You understand my concern?
Same for the release page. I love the overall look but how do you make it fit nicely?
nguillaumin
commented
5 years ago "Please excuse the crudity of this model. I didn't have time to build it to scale or paint it." :wink:
It's definitely not to scale, it's more to explore ideas.
That being said why not enlarge the screenshots or box scans? I suspect a lot of people come to AL for the images. We could put the box scans thumbnails on the right rather than below to reclaim horizontal space.
If we don't want to do that I don't mind if we switch back to 3 columns. I would put a releases box on the far right though to respect the hierarchy of information (Game > Releases). Especially since on mobile what is on the left is what will be displayed first, we would want the game details first, then screenshots, boxscans, and finally the releases.
stgraveyard
commented
5 years ago I mean no offense at all of course. I have spent countless ours on the layout (also because of my incompetence ofcourse ;) ) and I know from experience it needs dead space filling. But I agree with what you say and also, the breadcrumbs and stuff you made, are simple yet genious.
Would it be stupid of me if I say, if you feel like it start with this design and we tweak while we/you are at it?
I have been doing 12 hour days for work lately so I am a little bit on a code hiatus for the days to come anyway...
nguillaumin
commented
5 years ago No problem, discussion is good :+1: I'll see if I can try a mockup over 3 columns.
I'm not sure about starting the design. I'm not comfortable with the way the CSS is done currently :wink: I'll try to have a look if time permits.
stgraveyard
commented
5 years ago Thanks Nico.
stgraveyard
commented
5 years ago Oh, and if you want to completely redo the CSS, I'm all for that. Maybe it is good to start with the game detail page css anyway. This way, mulit skinning might be put back on the table for 2019, once the base CSS is as it should ... could be cool. ;-)
nguillaumin
commented
5 years ago Thanks I'll have a look. I'm not sure I'll have all the skills, I should be able to build the grid/layout, but I don't think I can put the level of polish you used everywhere! We'll see, I can pass it on to you once I have the basics working.
stefanjl
commented
5 years ago Made a rough sketch... using Nicos release example...the game release is a big tile with screnshots and boxscans... the empty space below release selection is for dumps and media/goodies scans. Using smaller game screenshot but using two instead of one.
stgraveyard
commented
5 years ago @Stefan, thanks for this, but I want to see what YOU like. Try and think out of the box, and don't be restricted with the current layout or the way the page is set up (apart from the top bar). In the end, we take all the best bits of everybody's ideas and make one final design we all like ... or at least we try...
stefanjl
commented
5 years ago it is just easier to edit an existing design thats why... easy for me do make an fast mockup :) But yes i know what you mean. The "many tiles" system is very flexible... like it is now on current AL... so it is hard to come up with something that is just as flexible.
stefanjl
commented
5 years ago I like the idea with two medium sized screenshots more than using one big screenshot though.
nguillaumin
commented
5 years ago I started to work on a high fidelity mockup for this, have a look here: http://guillaumin.me/al/
I'm not completely happy with it, but it's a starting point. One difficulty is that the game title and info are not in a "tile". I think it's not bad, but it's not aligned with the rest of the site. I tried to put it in a tile but I felt it didn't work very well...
Perhaps grab the files and try to tweak the HTML and CSS a bit to see if you can improve it?
nguillaumin
commented
5 years ago I realized I got the responsive breakpoints wrong, so it won't look nice on mobile yet. I'll continue working on it
nguillaumin
commented
5 years ago Ok that should work on small screens a bit better now.
stgraveyard
commented
5 years ago Hello Nico,
This is a good way of working. It gives a clear view. I need to let it sink in some more. There are good points, and bad ones. Personally for now, I think the tiles are way to big. The screenshot tile and the boxscan tile on my 16:9 laptop screen at 1920px are just too big. That being said, maybe it is the original design that is restricting everybody? I am currently very tired and don't have many ideas, so I am gonna let you fool around a bit with this design, because historically, you are always right. This is a good start. I will let it sink in some more and if I have ideas, I will share them.
Maarten
nguillaumin
commented
5 years ago Fair enough, one issue for me is that I only have access to my laptop for the next ~2 months, and it has a small screen so I won't be able to test the layout on a large screen...
stgraveyard
commented
5 years ago Atari Legend is completely created on my HP laptop. As long as it has full hd width (1920px), there is no problem IMO...
nguillaumin
commented
5 years ago It doesn't :wink: only 1366px wide. Also only 12.5'' size...
stgraveyard
commented
5 years ago Ok, indeed...forget it...that is not the way to go...
stgraveyard
commented
5 years ago Here is a question. Let's say we keep the tile system one way or the other, but what if we add, only on the detail page, an extra menu bar on the left, like this admin panel as example : http://akveo.com/ngx-admin/#/pages/dashboard
Wouldn't that be doable? We could have the user simply click all options on the left and still keep tiles and go responsive ... WE could have a GAME and RELEASE option and when you click on it, all sub categories pop out ... Something like that ... Or is that the same drawback as working with tabs?
stgraveyard
commented
5 years ago @nguillaumin @stefanjl
Guys, I'm looking back into all of this. I've been looking at the mockups @nguillaumin made on 11-12-2018. Also the HTML you made Nico.
The info displayed if very good, But here is the thing I don't like. The positioning. We now have only 2 tiles horizontally (and I know that I proposed this for my tab idea) but I think it doesn't look good in full hd 1920p width.
BUT, now just looking at the GAME detail page (not the RELEASE details yet). I actually only see a few new things :
Apart from these bits, it stays the same.
So here is my question. The current layout is fully responsive and does look kinda neat in all resolutions. Wouldn't we able to stick with this system if we do the following changes listed above but we stick with this tile system.
Once that is done, we build a new release page, also in tile form but keeping in mind releases have way more info than the actual game, so tiles migh be bigger, or maybe only 2 tiles horizontally or exactly what you designed if it looks good in real life (postions and stuff) ...
some more remarks :
Let me know what you all think.
Maarten
nguillaumin
commented
5 years ago I'm not a big fan of adding a left menu like the dashboard, except if we do it everywhere on the site. Otherwise it adds a new way to navigate that's not consistent with the rest of the site (similar to the breadcrumb I put in my mockup "Home > Games > Dungeon Master", if we do this we need to do it on every page).
For the boxscans, the idea was to show all the boxscans of all the release (in turn, or random). I suspect a lot of people won't click through each individual release, so it's nice to show the boxscans on the game page. And yes we should mention for which release it is.
For the other game info (multiplayer, extras, etc.) I would put that with the rest of the data at the top, with the controls, sound hardware, etc. I don't like having too many tiles, each with just a little bit of info.
I'm not sure about keeping 3 columns. What's nice with 2 tiles is that we have a lot of room to show the game title, info, etc, which was the initial problem (too much info to put in a narrow tile on the left). I think if we'd want to use 3 columns, the game info would have to be on a "wide" (i.e. 2 units) columns, like the screenshots currently are.
Perhaps could you make a quick mockup (on paper is fine) of a 3 columns layout?
stgraveyard
commented
5 years ago You make some valid points ...
I'm not a big fan of adding a left menu like the dashboard, except if we do it everywhere on the site. Otherwise it adds a new way to navigate that's not consistent with the rest of the site (similar to the breadcrumb I put in my mockup "Home > Games > Dungeon Master", if we do this we need to do it on every page).
I agree here. Forget the sidebar. I do really like the breadcrumbs and I wouldn't mind implementing it everywhere if the rest agrees.
For the boxscans, the idea was to show all the boxscans of all the release (in turn, or random). I suspect a lot of people won't click through each individual release, so it's nice to show the boxscans on the game page. And yes we should mention for which release it is.
Another neat idea actually and the only change needed than is the addition of the actual release info in the boxscans tile.
For the other game info (multiplayer, extras, etc.) I would put that with the rest of the data at the top, with the controls, sound hardware, etc. I don't like having too many tiles, each with just a little bit of info.
I'm not sure about keeping 3 columns. What's nice with 2 tiles is that we have a lot of room to show the game title, info, etc, which was the initial problem (too much info to put in a narrow tile on the left). I think if we'd want to use 3 columns, the game info would have to be on a "wide" (i.e. 2 units) columns, like the screenshots currently are.
Perhaps could you make a quick mockup (on paper is fine) of a 3 columns layout?
Well, this is only useful I think if you agree that the mockup you made with 2 tiles does look "ugly". Don't get me wrong, thanks to this mock up I know see that I don't like it :-) My problem with the 2 tiles is that it will look very empty for the majority of the games. So keeping this in mind, and the fact that the actual releases are the parts with the multitude of data, I was think for the game itself, keeping 3 columns instead of 2 would look best. But again, it is true that the game info could use some more space. So perhaps we could focus on that within a 3 column layout? Hmmm. Maybe we could add the game data below or above the screenshots and use a left tile to list all the clickable releases (like we have now but without all the data)? Something like that ...
Like you say, I could try and make a mockup ...
nguillaumin
commented
5 years ago No problem, as I said I only have a small laptop screen for the next 2 months or so so I can't see how it looks on a large screen. I don't mind 3 columns, but I would like:
Perhaps we can have a 3 column layout with 2+1+1 (in terms of column width)?
For the breadcrumb I'll start looking into it, we can implement that as a starting point.
Hello team,
Since we now have added so many release features in the last update, and I would like to start with downloads and release specific screenshots and boxscans, I would like to open the discussion for a new design of the game detail page. I think this is necesarry to display all info in a fun yet coherent way. I need help from the team, as I don't really know how to. I'm thinking of a part of the screen which contains the main game data, as well as AL specific data for the game (reviews, interviews...) and a release part of the screen. We also need to be able to switch to other releases. I'm looking for ideas, input and example sites. I don't like mobygames, I don't like the look of HOL. I think we are doing pretty good on the cpanel, but for the main site, I would like to have a more 'playfull' look to it.
All input is welcome.
Maarten