Comparing the old and new site design - my feedback

edited June 20 in Updates
Hello folks,

As a regular visitor to the WOS site, I would like to offer a little feedback on the new-look design. I hope you won't take offence to any of my criticisms below - it is intended as constructive feedback to help improve the site.

First, some pics, so we know what I'm talking about

Archive list pages - old and new:

WOS-comparison-1.png

Game pages - old and new:

WOS-comparison-2.png

Things I like:

• First of all, I commend you for making the effort to update the design of this excellent site!

• The homepage is much simpler, clearer, and more streamlined, that's good!

• The new "filter" tools on the archive list are very useful.

• Archive list pages: The old archive list used a monospace (typewriter-style) font. This was, of course, reminiscent of the Spectrum, but it was a little ugly for a web page, so I think I'm glad this has gone.

• Game pages: The game's title at the top of the page is MUCH nicer now. (Although there seem to be two versions of the title - I'm not sure the top one is necessary?)

• Game pages: The new main menu at the top is very useful, as is the 'breadcrumbs' style navigation path at the top - this is EXCELLENT both as a navigational tool and to communicate the site's structure. The old style site made it hard to navigate around the site, or know where you were.

• Game pages: I really like how the main menu remains constantly at the top of the screen when you scroll down. That's a nice touch!

• Games pages: I much prefer the screenshot(s) being on the left side now.

• Games pages: The typography is much better now, with better spacing and better use of font weights.

• Overall: The update has brought about some excellent changes and in many ways the site feels fresher and more up-to-date.

Things I don't like (Apologies, this list is much longer!)

• Everything's so BIG now. Even a simple page requires a ton of scrolling. It all looks a bit cramped on my medium-res screen.

• Archive list pages: On the whole, I really do not like the new archive list page. The old page was a neat, simple, clear list of text. The new archive is too complicated, and too big!

• Archive list pages: Game titles are now HUGE, cramped into tiny table cells, forcing them to run across multiple lines. The fact that everything is so big now means you have to scroll, even just to see 10 games! On the old site I could see about 50 titles on screen at once - now I can see 9 at once!

• Archive list pages: The text colours are now way too soft. Game titles are in a soft green, while other cells contain grey text. It's all too hard to read. IMHO, those greys need to be much darker, and the green needs to be much stronger, or black.

• Archive list page: Why does the list default to displaying 10 games per page across 1,043 pages? I can't see any advantage to limiting results to only 10 games. The old site contained hundreds per page and that was just what you want.

• Archive list pages: One of the things that annoys me the most about the new design is that links no longer look like links. On the old site, links had underlines under them, to clearly show they were buttons/links. The new site has links everywhere that don't look like links - no underline, no rollover, leading to a frustrating user experience IMHO. Also, the huge "Filter" button is just a rectangle and doesn't look like a button. Those buttons at the top ("Show 10 Rows", etc) don't look like buttons, and when you roll over them, the cursor turns into a grabbing hand, not a pointing hand, which I find confusing.

• Archive list pages: Maybe some people like animation in GUIs and website, but for me, animation just makes it feel sluggish and less immediate. When I click something I want instant effect, not waiting for fancy animations to play. In my opinion, animated menus might be good for entertainment-based sites, but not for functional information-based sites like WOS.

• Game pages: I preferred it when both the screenshots were always visible, rather than having to click small green dots to see other images.

• Game pages: Once again, the text is too big, causing everything to be quite squashed (especially with the red menu on the left eating up more of the screen width).

• Game pages: I'm not sure why "Instructions" appears in a tab, while "Releases" and "Files" appear in collapsible menus. Perhaps there's some fundamental difference between these categories, but it's not obvious to me.

• Game pages: Also, I'm not sure if "Releases" is big enough to warrant being hidden in a drop-down menu? Isn't it just a couple of lines for most titles? Couldn't that just appear with the main info?

• Game pages: Speaking of the collapsible menus, again, I don't like how the buttons are just plain 'boxes' that don't look anything like buttons. I'm just not keen on "secret buttons" that don't look like buttons at first glance. I like buttons/links to be nice and clear, screaming: Hey, you can click on this! Even just rounding the corners would make them look more like buttons perhaps? Or a slight bevel? Or even just putting an ellipsis (…) after the text! But plain rectangles are not right for buttons IMHO.

• Game pages: Obviously, the Tipshop, Magazine reviews, and Magazine adverts have now been removed from the site. I can only guess there was some legal reason for them being removed? Such a shame as this was one of the best things about the site!

• Game pages: I don't see the point of the huge blank space at the end of each game page with the logo? It gives a false impression about how big the page actually is, and forces you to scroll every page down… for nothing!

• Game pages: I really don't like the green button at the bottom which takes you back to the top of the page. First of all it's pretty pointless as you can easily scroll back up yourself, or hit the 'Home' button. Plus, when you click it, the page ANIMATES scrolling - quite slowly. Personally, I find that annoying. The jump to the top should be instant.

• Left menu - In the red menu on the left, what are those green arrows for? Intuitively I expect them to lead to more options - a drop-down menu, or a pop-up menu. But they don't seem to do anything, so why have them there?

• Colours - I really don't like the left menu having red titles. It looks disturbing and alarming - like there are 'errors' or 'warnings', trying to get your attention. The old site looked completely relaxing to use. I also don't like how the menu text is red but the arrows are green.

• Colours - My apologies, but I MUCH preferred the old blue colour scheme. The old site used a a strong, attractive blue, just like the Spectrum's blue, which made the site feel more connected to the Speccy. The new site uses dull colours which don't appeal to me. It all looks a bit sad and gloomy.

• The WOS logo looks equally gloomy - all very drab, which I think is the opposite of the ZX Spectrum with its bright palette. Those dull pastel colours just don't say "Spectrum" to me.

Sorry about all the negatives! I hope they are not taken personally. Once again, this is intended to be constructive and I only want the best for the site. As a graphic designer, it's my job to scrutinise over details like these, so I'm just trying to help out.

And I want to repeat that I really like some of the changes and think WOS is a fantastic site! :-)

Cheers,
Lee
Post edited by Lee Bee on
Thanked by 21024MAK Loxley
«1

Comments

  • You could have made the "likes" a longer list than the "don't likes" :(

    I'm not going to address everything, but have take it all into consideration.
    Everything's so BIG now. Even a simple page requires a ton of scrolling. It all looks a bit cramped on my medium-res screen.

    There were complaints about it being too small on mobiles or smaller devices, so I increased it.
    Archive list pages: On the whole, I really do not like the new archive list page. The old page was a neat, simple, clear list of text. The new archive is too complicated, and too big!

    This is a trade off. The old list didn't have search, filters. or sorting. This is handier if you want to download or view specific lists. One comment I had was that there was no A-Z listing, so I added one to the filter.
    Archive list pages: The text colours are now way too soft. Game titles are in a soft green, while other cells contain grey text. It's all too hard to read. IMHO, those greys need to be much darker, and the green needs to be much stronger, or black.

    I hadn't given that much thought! You are the first to mention in. I'll take a look at the colour scheme at some point.
    Archive list page: Why does the list default to displaying 10 games per page across 1,043 pages? I can't see any advantage to limiting results to only 10 games. The old site contained hundreds per page and that was just what you want.

    You can change the number of rows returned. Most devices and browsers will remember that setting next time you visit.
    Game pages: I preferred it when both the screenshots were always visible, rather than having to click small green dots to see other images.

    This is deliberate. The new site now allows us to upload *every* screenshot rather than just one. When we start to receive them, we will have a separate screenshots section for them. And you will hate it as it will also function as a gallery :)
    Game pages: Once again, the text is too big, causing everything to be quite squashed (especially with the red menu on the left eating up more of the screen width).

    It looks like your screen is right on the edge of the breakpoint that moves the menu down on smaller devices.
    Game pages: I'm not sure why "Instructions" appears in a tab, while "Releases" and "Files" appear in collapsible menus. Perhaps there's some fundamental difference between these categories, but it's not obvious to me.

    I can't recall my thinking at the time tbh. I know it was when I was adding instructions to the pop-up player.
    Game pages: Also, I'm not sure if "Releases" is big enough to warrant being hidden in a drop-down menu? Isn't it just a couple of lines for most titles? Couldn't that just appear with the main info?

    When the data is fully sorted, we will be linking releases with related material, so that section will potentially be quite large. Where you see files now, these will be split into each release... and the files we have are very comprehensive.
    Game pages: Speaking of the collapsible menus, again, I don't like how the buttons are just plain 'boxes' that don't look anything like buttons. I'm just not keen on "secret buttons" that don't look like buttons at first glance. I like buttons/links to be nice and clear, screaming: Hey, you can click on this! Even just rounding the corners would make them look more like buttons perhaps? Or a slight bevel? Or even just putting an ellipsis (…) after the text! But plain rectangles are not right for buttons IMHO.

    These are fairly standard bootstrap panels. Generally, the bootstrap ones, you have to click the + sign which is more confusing.
    Game pages: Obviously, the Tipshop, Magazine reviews, and Magazine adverts have now been removed from the site. I can only guess there was some legal reason for them being removed? Such a shame as this was one of the best things about the site!

    Nope - just not done yet. With Tipshop, the intention is to have the tips on the page rather than a link.
    Colours - I really don't like the left menu having red titles. It looks disturbing and alarming - like there are 'errors' or 'warnings', trying to get your attention. The old site looked completely relaxing to use. I also don't like how the menu text is red but the arrows are green.

    Red is a Speccy colour!
    The WOS logo looks equally gloomy - all very drab, which I think is the opposite of the ZX Spectrum with its bright palette. Those dull pastel colours just don't say "Spectrum" to me.

    We did play with this years ago when it was put on the forums. It was too garish with Speccy colours.

    Thanks for the feedback :) I'll start going through things when I've done other things lol
    My test signature
    Thanked by 1Lee Bee
  • Hey Lee, thanks for taking the time to reply. Excellent name by the way! :-)
    You could have made the "likes" a longer list than the "don't likes" :(
    Sorry dude! I really do think the new design has a lot going for it and is an overall improvement. I'm also really glad to hear that this is a work in progress and it sounds like you'll be making further improvements, which is great!

    Please take my feedback with a pinch of salt. It's just my opinions, others may disagree. I just wanted to chip in as I love WOS and if we're going to be looking at this design for years, I figured I may as well say what I think. The Spectrum is my favourite gaming machine of all time!

    I'm VERY happy that you're going to add the magazine reviews etc back in - it is such a great feature of the site. I also like the idea of there being more screenshots, and perhaps something like a gallery, that is great. I just think we should always be able to see the title screen + 1 ingame screenshot, to give an overall impression of what the game's about.
    Red is a Speccy colour!
    LOL, I know, I know, but red-on-white can be very attention-grabbing, and that menu isn't meant to be the centre of attention on the page is it.

    Red-on-white can look a bit strong for a menu - even on the Speccy eg:

    red.gif

    I've just tried doing a little colour tweaking and wanted to share this image. I've made the left menu duller, the game title red (you wanted red!), changed a bunch of the colours, including the logo. Just some ideas for you to consider!

    Colour-tweak.png
    Thanked by 11024MAK
  • I was going to ask if you wanted to mock something up, but didn't want to impose :)
    My test signature
  • OK, apart from the logo, I've changed the colours. One thing... Publishers link you have blue, but the roles links are green...
    My test signature
    Thanked by 1Lee Bee
  • OK, apart from the logo, I've changed the colours.
    Oh wow that's great! IMHO just that little change has made a big difference! I really appreciate that, Lee :-)
    One thing... Publishers link you have blue, but the roles links are green...
    Oh yes, I see what you mean. I didn't think about that really, I just went with what looked nice. Perhaps what you could do is swap the colours of the 'roles' and game info (name, year etc), that way the roles would be blue, and they're links, while the game info would be green, and they're not links?

    If I may make another tiny suggestion, the words "Title:", "Also known as:" etc - since this is a bold font, and not the main information, I don't think it needs to be as dark - I would suggest a grey like #9d9d9f.

    Also, it might look nice if the game info (title, year) could all line up, maybe? But you'd need to have more horizontal space as it looks a bit cramped like this currently. Here's an image of these 3 suggestions combined:

    ideas.png
  • Done. Apart from the spacing.
    My test signature
    Thanked by 1Lee Bee
  • Wow, thank you sir! People called Lee really are the best! LOL
  • Hi Lee, I hope you don't think me a nuisance but I'm back with a few more humble suggestions… (pics below of how it looks)

    5 small tweaks

    1. The game title in the top bar - could this be moved right so there's the same gap as the one on the far right?

    2. Also, could the title's font be increased from 25 to 30pt, maybe changing the weight from light to regular? (And if you can do font tracking, maybe something like +10 tracking?)

    3. I looked at the main green and blue (for the panels, links, game info, etc) and tweaked them to be VERY SLIGHTLY darker, for improved readability. My suggestion for them would be:

    Main Green = #4bc229
    Main Blue = #4396ee

    4. I also think the page may look a little more consistent if the headings in the left menu "Software", "Material", etc) used the same Main Blue (#4396ee).

    5. As for the green-blue bar running across the top, I actually think these colours would benefit from being just a touch brighter than the main green and blue, to give the top of the page a little more strength and energy. My suggestion would be:

    Top bar Green = #49d119
    Top bar Blue = #3cabff

    Here's how those 5 changes would look:

    more-changes.png

    Left menu colours

    I've also been looking at the colour of the left (blue) menu - I think it could also work in green, or a soft red, or perhaps you could cycle sections between red and blue - or red, blue and green? Up to you I guess.

    The colours I'd recommend are

    Left menu - red (header): #ff4853
    Left menu - red (items): #e66d78

    Left menu - blue (header): #4396ee
    Left menu - blue (items): #7d9cbf

    Left menu - green (header): #5dcd3d
    Left menu - green (items): #75c65e

    I've also picked out a magenta and yellow, in case you wanted 5 colours!…

    Left menu - magenta (header): #f868c7
    Left menu - magenta (items): #cc80b1

    Left menu - 'yellow' (header): #e4a62a
    Left menu - 'yellow' (items): #d7af78

    Here's a visual of all these menu colours:

    Menu-colours.png
    Thanked by 1rich_chandler
  • Try now :D
    My test signature
    Thanked by 2Lee Bee 1024MAK
  • I hope you don't mind, but I changed the links colour to change to green on hover so that it matches the panel hovers
    My test signature
    Thanked by 1Lee Bee
  • Wow, fantastic, thank you!

    \:D/ \:D/ \:D/

    It all looks so great now. I really think these subtle changes have made a big difference. (Certainly to someone like me who is obsessed with colour!)

    Thank you for hearing my feedback and taking the time to respond!
    I hope you don't mind, but I changed the links colour to change to green on hover so that it matches the panel hovers
    Great idea!

    Looking back through my original criticisms, I feel that there isn't really anything major still bothering me. Some of my negatives were only minor points. But it all looks great now, and I feel very positive about the new design. I'm even starting to like the animated menus!
    Thanked by 11024MAK
  • How about a green background panel? This isn't a request, just an option to consider. I'm happy either way.

    Left one = as it is now
    Other two = with green panels

    Green-panels.png

    Left one = solid colour
    Other two - textured

    Green-panels-texture.png

    Panel colours used here =
    #e3efdb
    #e7f7e7
    #d9efd4
  • How about a pale yellow?
    My test signature
    Thanked by 1Lee Bee
  • If I was going to go for a texture, it would be the first one (second image)
    My test signature
    Thanked by 1Lee Bee
  • I think the green used for the fields could do with being a bit darker to give better contrast.
    I wanna tell you a story 'bout a woman I know...
    Thanked by 1Lee Bee
  • I think the green used for the fields could do with being a bit darker to give better contrast.
    Good call! I agree that the text could do with being a little darker. (Nice to have a third person in this thread.)

    Lee, would it be possible to use this slightly darker green: #3cb31b just for the green 'field' text—but leave the green panels/rollovers as they are (#4bc229).
    How about a pale yellow?
    Good call! It has to be a very soft yellowy cream colour or else it looks garish, but I really like this actually…

    Yellow-background.png

    So really it comes down to whether the pure white background is better, or a creamy yellow background. I'll let you decide, maybe you could ask a few users what they think of the image below?

    (I've extended the white panel around the images as I think they really ought to be on white.)

    White-or-cream.png
  • Oh and here are a few variations of the yellow-cream colour:

    (Textured on the left, smooth on the right.
    Greener at the top, yellower at the bottom.)

    Pale-yellows.png
  • ok, apart from the background, those changes are done.
    My test signature
    Thanked by 1Lee Bee
  • Wonderful!
  • I'm 100% delighted with everything thats been done to improve the site, many years ago I ran a BBS and trying to keep my users happy especially with constant pleas for more and better graphics.

    I tried software after software, some quite promising but they always fell down eventually through requiring users to upgrade which most weren't up to anyway - this was in the days of CGA when that was the best you could hope for. We tried BBS software promising vector graphics and various front end embelishments all of which were a nightmare to get running properly in DOS..

    However the biggest and most constant problems were caused by the users, viruses were new then and a constant nightmare to locate and destroy which buggered the database. The most reliable software for a BBS was Wildcat but installing and maintaining that was no picnic either. I wish I had all that time wasted back again to use more wisely than before!

    So I can thoroughly appreciate all the work that Lee and Co, have put into this. I for one am a grateful user of WoS. Thanks for all your work everyone. I do mean EVERYONE your contributions keep WoS alive and invaluable - ignore the whiners. They can always try doing a resource like this themselves...heh heh...best of luck with that one.
  • Cheers Mike, it's been a long road but we're not there yet. But we're getting there...
    I wanna tell you a story 'bout a woman I know...
  • I am sorry.. but the old version was MUCH better.. totaly confuzing layout ..
  • Dasse wrote: »
    I am sorry.. but the old version was MUCH better.. totaly confuzing layout ..
    What is confusing?

    This is a feedback thread, you need to given reasons why you think that way.
    I wanna tell you a story 'bout a woman I know...
  • For an example it was much easier to find the games before. You had almost that menu with A-Z right away and so much easier to find what ya looking for.
  • Dasse wrote: »
    I am sorry.. but the old version was MUCH better.. totaly confuzing layout ..
    What is confusing?

    This is a feedback thread, you need to given reasons why you think that way.

    For an example it was much easier to find the games before. You had almost that menu with A-Z right away and so much easier to find what ya looking for.
  • Hi again folks, back with some more humble suggestions…

    Dasse wrote: »
    I am sorry.. but the old version was MUCH better.. totaly confuzing layout ..

    I know where Dasse is coming from...

    I really do like the new archive page and new functionality - I think it's looking better all the time, with tweaked colours. But my initial reaction to this page was that it was really complicated and confusing, and many aspects of it still bug me.

    I've had a good think about it, and think the new archive table could be greatly improved with a few tweaks…

    1. Smaller text
    Can the text in the main table be a little smaller? Even if only slightly?

    2. Filter controls
    The four main filter controls are: A-Z, Title, Publisher and Year - these are way more important than the other filters, and should be taken out from the collapsible menu so they're always visible. The other filters can remain below them in the collapsible menu, renamed to "More filter options..."

    3. Fewer default columns
    Fewer of the columns should be visible by default. (I would stick to just Title, Publisher, Release Year and Entry Type). This would make the table simpler, and more friendly and understandable for new users. Fewer columns would also be good for folks like me with a narrower browser window - it would stop cell data running over onto multiple lines, which looks squashed and irritating!

    4. More width for game Title column
    For me, the most 'important' part of the whole page is the game title name, so I think this column should have more width, even if the text doesn't fill the width.

    5. Column rename
    Could "Entry Type" be renamed to "Genre" as it's more easily understood?

    6. Change the black line
    For the main table, I'm not keen on the black line under the top row. It's a little harsh. It currently looks like this:

    Table-1-original.png

    I think it would be better if it were 2 pixels tall, and a grey colour (#b8b8b8), like this:

    Table-2-grey-line.png

    Or, slightly more cheerful, use the main green colour (#4bc229):

    Table-3-green-line.png

    7. Change the colour of the selected column

    Currently, the selected column is just slightly darker than the other columns. I think this looks slightly messy and confusing:

    Table-1-original.png

    I would suggest changing the selected column to a stronger colour, such as this:

    Table-4-blue-selection.png

    Text colour = White
    Cell colour = #4396ee (Main Blue colour)
    Lines between cells = #90bae5

    Then again, that might be a little harsh. This softer option might be easier to read:

    Table-5-light-blue-selection.png

    Text colour = #0063cb
    Cell colour = #bed6f0
    Lines between cells = #ecf3fb
    Thanked by 11024MAK
  • Most - if not all of those can be done. I'll get onto them later.
    My test signature
    Thanked by 2Lee Bee 1024MAK
  • do you get the error message aswel:
    A Database Error Occurred
    Error Number: 1292
    Truncated incorrect DOUBLE value: '101-projects-for-the-z80'
    UPDATE `default_wos_books` SET `pdf_file` = '34aaa9104924d27' WHERE `id` = '101-projects-for-the-z80'
    
    my old website http://home.hccnet.nl/c.born/ has changed to http://www.cborn.nl/zxfiles/ so just click it and select a file
  • Crisis wrote: »
    do you get the error message aswel:
    A Database Error Occurred
    Error Number: 1292
    Truncated incorrect DOUBLE value: '101-projects-for-the-z80'
    UPDATE `default_wos_books` SET `pdf_file` = '34aaa9104924d27' WHERE `id` = '101-projects-for-the-z80'
    
    What were you do to cause the error? It'll help Lee fix the problem.
    I wanna tell you a story 'bout a woman I know...
  • Crisis wrote: »
    do you get the error message aswel:
    A Database Error Occurred
    Error Number: 1292
    Truncated incorrect DOUBLE value: '101-projects-for-the-z80'
    UPDATE `default_wos_books` SET `pdf_file` = '34aaa9104924d27' WHERE `id` = '101-projects-for-the-z80'
    

    Fixed - thanks for the bug report!
    My test signature
Sign In or Register to comment.