I’m excited to be hearing so much positive feedback about the new site design. I’ve been working hard to make this into a meaningful improvement to the experience of people coming here for the first time or checking in on a regular basis.
Partly it’s been about aesthetics: things should look cleaner now, and we have more tools available for creating fully-responsive pages. Plus, if you’re on a compatible browser, you get to see these gorgeous polygon shards containing preview images, rendered on-the-fly.
It’s also about function. We’ve aimed to make it easier to see what we do at a glance. We want to encourage people to look around, and learn something new every time they visit.
Front-of-house search bar
Our search bar is now one of the first things you should notice when you land on the homepage. It’s big and bold, taking up the same sort of space that an image slider or a PR video would take up on most other sites. I’ve modelled this aspect of the site on my favourite library websites, such as Worldcat and CiiNii, and other impressively-designed educational resources, such as quran.com and tatoeba.org.
By putting search front and center, I want to show that Critical Distance is not just about collecting links to “good writing”. That’s just a means to an end. Critical Distance is a community educational resource, a hub for democratized learning, and a starting point for people who are setting off navigating an avenue of thought that is new to them.
When people ask “where is all the good writing on games” they are often directed to Critical Distance. When those people are immediately faced with that week’s long list of links, they can feel a little deflated — I know this because some of them email me telling me so. If somebody has come here full of enthusiasm and curiosity, I want to encourage them to keep them asking questions.
By the way, the background image for that fancy search bar, and all the generic geometric images used throughout the site, have been created in Icosa, an abstract art tool by indie dev Andi McClure.
Automatic search suggestions
Using the WordPress plugin Randomize, I’ve been able to get the search bar to auto-populate with a new suggestion each time you reload the page. I’m still adding to our list of suggested searches, keeping an eye on the data we get about our search traffic so that I can add in some interesting things that other people have searched for. My hope is that these suggested searches give an instant impression of the sort of question that we’re built to answer.
Try it now by going to the homepage.
Search term highlighting
With the rather impressive plugin Relevansii, search terms are highlighted not just in the search results, but in the posts themselves after you click through (as long as your security settings allow the origin page to be tracked). This finally gets close to solving a problem that we’ve had for years, whereby any user researching a topic had to constantly re-do their search in-browser in order to isolate the relevant part of each TWIVGB roundup. Now the relevant sections stand out, highlighted in orange.
Try it now with a search for the term “[search]sound[/search]”.
Preview snippets
I wanted browsing Critical Distance to be similar to browsing a title in Google Books. The Relevansii plugin has allowed me to achieve that. Instead of seeing the same standard excerpt for a post no matter what search term brought it up, now you see the most relevant excerpt for your search term – with most of the formatting left in, so that you can tell whether you’re reading a link title, a description, or a quotation (sadly, we have to leave out the link tags for now). These extracts are so helpful, you can get a good grounding in a topic just by reading through a page of search results, without clicking to open a single post.
Try it now with this page of results on the word “[search]killing[/search]”.
Easily surface Critical Compilations
If you search for a game that has been featured in its own Critical Compilation, our search results are tweaked so that it will usually be the first result on the page. Additionally, all Critical Compilations have neat little green boxes to make them stand out on the search results page! Hopefully this should make it much easier for people to find exactly what they need.
Try it now with a search for [search]Bioshock[/search], [search]Fallout[/search], or [search]Metroid[/search].