The Beautiful Simplicity of Hollow Knight (and How to Improve It Even Further)

TL;DR: Hollow Knight is mainly characterized by dual-purpose design and general minimalism. A particular feature is the use of fluid builds based on charms that can be (un)equipped rather than a skill tree. However, changing builds can be too much blind trial and error while geo (the game’s currency) becomes too abundant too early in the game. One solution to this could be having the player pay geo for (un)equipping charms.

Hollow Knight is the story of a nameless bug who explores the depths of a fallen kingdom, thereby slaying countless foes with his nail and uncovering the history of the mysterious place as well as his own fate. It is a Metroidvania type of game released in 2017 and—as far as I’m concerned—one of the best (if not the best) installations of this genre so far.

One factor that makes this game so great is that it builds a lot on the concept of dual-purpose design. Dual purpose design, as the name suggests, means that one game mechanic serves two different purposes, e.g., Super Mario’s jump, which is used for platforming as well as defeating enemies. If you want to learn more about this concept, Mark Brown made a video about it for his awesome channel Game Maker’s Toolkit, from which I draw a lot of my design inspiration.

Apart from that, Hollow Knight also generally employs a rather minimalistic approach. There are only two weapons in the game and the primary weapon—the nail—can be upgraded a total of only four times. When you hit enemies with the nail, you take HP from them and at the same time gain soul (dual purpose!). Soul is used for both, healing and using one of the three spells you can collect during the game. This simple set-up has two particular effects that make Hollow Knight exciting: First, during fights, you have to decide between healing and attacking with the powerful spells. Second, when low on health (which is very limited) and out of soul, you are forced to risk approaching enemies and hitting them.

The second resource in Hollow Knight besides soul is geo, which is the kingdom’s currency. Since there are no health and magic potions to be bought (because soul), geo is exclusively used for purchasing items that let you advance in the game or make you more powerful (such as mask shards, which upgrade your health Zelda-style). Therefore, geo is essentially experience.

Finally, one of the most distinguishing features of Hollow Knight is the lack of a skill tree. Instead, you buy charms. These give you certain powers and upgrades—such as an increased nail range or a shield—and can be equipped and unequipped every time you rest on a bench. The number of charms you can equip at the same time, however, is limited. Charms make your build fluid, so unlike in similar games (e.g., Salt and Sanctuary), you don’t have to decide for or against a certain build early in the game. This is one of the strengths of Hollow Knight because you can (and have to) use wildly different strategies for each boss. Yet, in my opinion, it is also one of the games few weaknesses since equipping and unequipping charms before boss fights is too much trial and error and too little “living with the consequences”. The last boss fight didn’t work out? Just throw in some other charms and try a face tank. Didn’t work either? Don’t worry, I got some more charms for you!

Hollow Knight
Charms … so many charms!

Now, how would it be possible to prevent this? Let’s have a look at two potential solutions. As for the first one, I think a relatively simple design change could do the trick. What if (un)equipping charms would cost geo (starting with the second time a charm has been equipped to still facilitate some playing around)? This would solve two problems at once. First, it would prevent the blind trial and error with different builds. Second, geo becomes too abundant too early in the game. At the very beginning, you still have to pay some attention to your balance, but later, you just buy all the upgrades you can find and still have plenty in your bank account. The second solution could be simply reducing the amount of charms, but make each charm more impactful, and making geo less abundant—that would be more like the Cuphead approach. Less charms, less trial and error. Pretty straightforward, isn’t it?

However, there is a another issue. The excessive trial and error is not only caused by the sheer number of charms and the fact that it comes at no cost but also the often not really informative descriptions of what a charm can do for you. That is, a charm’s capabilities are not visible until trying it out, also in different combinations. Therefore, the above solutions would only work if the game had a way to better visualize the certain powers and advantages of charms. This could be achieved by, e.g., showing a little loop animation of your character performing all the actions possible with your current build plus the charm that you would add to the selection.

In conclusion, despite some little flaws, Hollow Knight is awesome. However, it is not just an awesome video game. It is also a lesson in good design and how “less is more”. I believe that every designer—no matter their focus—can learn some valuable lessons from this game—and from good game design in general.

Acknowledgments

Special thanks to Martin and Snuck for their valuable feedback.

Advertisements

The Design Philosophy Behind My New Website

TL;DR: After analyzing my old website, I decided to put more emphasis on (1) identifying and highlighting the pieces of information that are actually useful and (2) a two-dimensional approach to displaying my CV along traditional categories and skills/topics. Moreover, I set myself design constraints that forced me to keep my new website as clean and simple as possible, following the design philosophies of brutalism and Mies van der Rohe.

My new website has been up and running for a few weeks now and I suppose it might seem unusual to some of you. Therefore, in this post, I want to explain how I ended up with what I did. What motivated me to create a new website was the fact that OpenShift v2 was shut down by Red Hat and the new version of their hosting service was so unsatisfying that I decided to move to Github pages instead. This, however, also meant that I could not build on a Node server anymore, so I took the opportunity to start over with a blank slate and create something completely different.

Core Questions

As a first step, I analyzed my old website, and I noticed two things. First, it was more or less structured exactly like my CV, which is, to be honest, not the most creative way to lay out an online presence. Second, my publications were listed in a format that I would also use in the reference section of an actual research paper. However, that format was only really understandable and readable for scientists, which—as I could safely assume—excluded a certain amount of my visitors. After all, the only necessary pieces of information are the title (plus a link for those who want to have a closer look), the list of authors, and which topics the paper is actually about. From a title like “Ensuring Web Interface Quality through Usability-based Split Testing” one may conclude that I’ve done work on usability, but how would you know that this publication also addresses analytics and machine learning without reading it? The acronym of the conference where it was published or the CORE rating of that conference certainly don’t help the average user.

MaxSpeicher.com v1

Therefore, the two central questions that informed the design of my new website were:

  • How can I present my work and skills in a better, more useful, and more memorable way than the standard paper CV structure—projects, work, education, etc.?
  • How can I more effectively communicate to people the topics I actually worked on and which skills I acquired rather than just telling them that I was an “Intern R&D at Unister”?

Design Constraints

Additionally, I set myself the following design constraints to ensure I had to come up with something completely different and create a novel, unusual, and more memorable experience. The main drivers for these constraints were my love for minimalism and a desire to prevent unnecessary overhead as much as possible.

  • Make it brutalist. Originally, brutalism was an architectural movement known for “its ruggedness and lack of concern to look comfortable or easy”. Accordingly, brutalist websites have a rough, simple, and unfinished look. They are almost nihilistic towards user experience.
  • Make it as simple as possible. I chose this constraint in accordance with Mies van der Rohe’s architectural philosophy of “extreme clarity and simplicity”. He made his buildings purely functional and refrained from using anything ornamental.
  • Don’t use icons or images. Standalone icons are a bad idea in most of the cases anyway (as this nice summary explains). This led me to using smaller text with a solid, edgy border in places where I used icons for social media sites and the different sections on my old website.
  • Use only one primary color. The rest must be kept in black, white, and gray.
  • Work with typography as much as possible. Apart from the one primary color and white space, I tried to use only different font sizes and weights for structuring and highlighting information.

Finally, I came up with and realized a concept that is largely based on hashtags to communicate my skills and the topics I’ve worked on. Every CV entry on my website—be it a university degree, a job, or a publication—is annotated with a set of such tags. The entry about “Ensuring Web Interface Quality through Usability-based Split Testing” now tells the visitor that the paper is about #analytics and #machine learning, among other things. At the top of the page, I feature a list of skills that enables users to filter the page and hide everything that’s not related to a specific skill or topic they’re interested in. Moreover, I chose a two-dimensional approach to presenting my CV. That is, the visitor has the chance to display it either according to the traditional structure of a CV, or grouped by skill/topic. In the latter case, all CV entries that feature a certain tag are displayed in the corresponding section to be able to view them at a glance.

Technology-wise, my new website is based on standard web technologies, Less, and gulp.

MaxSpeicher.com v2

Why I Don’t User Test My New Website

I asked some friends to have a look at what I created and they immediately came up with the idea of having a sticky menu—as they are used to from other websites—so that they wouldn’t have to go back to the top of the page (using the #top button in the bottom right corner) when they wanted to change the current filter or the way the CV is displayed. I started implementing this supposed improvement yesterday, but became more and more dissatisfied the more I progressed. While it would have made the website slightly more usable (sparing users a click from time to time), a sticky menu would violate the constraints that define my design and would make my website less unique in my opinion. After all, the average user prefers being confronted with and using things they already know. Therefore, I abandoned the idea and did not deploy the changes.

In this sense, the design of my new website is clearly not 100% user-centered, but rather an experimental piece of art.

Did I manage to intrigue you? Feel free to have a look at http://www.maxspeicher.com/v2.

why i’m a minimalist

(the funny thing is: i can’t really explain why. but i’ll try anyway.)

i believe that there’s sth. inherently beautiful to minimalistic design & content. this is what my sense of aesthetics tells me. i’d always prefer t. capote’s Summer Crossing over f. schätzing’s Limit, ’cause the former tells a beautiful story in 149 pages (🇩🇪 ed.) while the latter requires 1304 pages (🇩🇪 ed.) for telling a story most of which isn’t worth telling. probably the fact that it’s way harder to communicate sth. meaningful with as few resources as possible is what makes the exceptional beauty of minimalism—less is more (mies vd rohe; sorry for borrowing this cliché).

also, as so. who’s not uneducated in cosmology, i believe that our universe is so ‘astonishingly simple’ that who/whatever has created it must be a minimalist, too. so in fact, the most beautiful existing thing dictates us the way to go. thus, i also believe that there’s an exceptionally simple—and hence also elegant—theory of everything.

(btw, i’m rather dissatisfied with how many words this post contains.)

motherfuckingwebsite.com Redesigned. My Other Poster Presented at #ICWE2014

(Disclaimer: motherfuckingwebsite.com was not made by me!)

Device-agnostic design poster presented @ ICWE 2014From my original post about redesigning motherfuckingwebsite.com (see here), I have created a poster along with a corresponding short paper, which have been presented at the 2014 International Conference on Web Engineering (ICWE).

The short paper will be included in the conference proceedings published by Springer: Maximilian Speicher (2014). “Paving the Path to Device-agnostic and Content-centric Web Design”. In Proc. ICWE (Posters).

Special thanks go to Fred Funke, who helped with designing the poster!

This is a motherfucking website. And it’s not completely fucking perfect

(Disclaimer: motherfuckingwebsite.com was not made by me!)

motherfuckingwebsite.com
The motherfucking website.

I recently stumbled upon motherfuckingwebsite.com, which is the most pragmatic and minimalistic approach to website creation I’ve seen so far (except for plain TXT files, of course). The first two lines read “This is a motherfucking website. And it’s fucking perfect.” The site has raised quite some attention on different social media platforms with lots of people stating that the guy who created it is absolutely right.

Basically, he says that the site is perfect because it loads fast, is accessible to everyone, is dead responsive (without using media queries), has content (i.e., it gets its “fucking point across”), uses semantic HTML5 tags etc. Most of the statements he makes are indeed right and there are undoubtedly lots of web designers out there who should take them to heart. The creator’s final note is that motherfuckingwebsite.com is “fucking satire”. His aim is to convey that websites are not broken by default. Instead, developers break them.

“Good design is as little design as possible.”
— Dieter Rams

Based on the facts that lots of people like the idea behind the site and that the creator makes a whole bunch of true points, I want to point out three things in which he is not completely right or that he passed over. These would bring a site of this kind closer to perfection, assuming that we follow a text-centric and device-agnostic approach.

  1. Line length: Text lines on motherfuckingwebsite.com span across the whole width of the viewport. This is particularly disadvantageous on large screens. An optimally readable line should contain only ~66 characters, which corresponds to ~30 em.1 To reduce the amount of scrolling, this must can (Update July 23, 2016) be augmented with a multi-column layout and pagination.2
  2. Navigation: motherfuckingwebsite.com does not make statements about navigation. However, a website featuring larger amounts of content would require a navigation bar, optimally fixed to the top of the viewport.3 This navigation bar should adapt to smaller screens without device- or resolution-specific break points (= device-agnostic design).
  3. Aesthetics: motherfuckingwebsite.com follows a completely technical/functional point of view. Yet, this does not completely cover perfectness from the users’ perspective. Particularly, research has found that visual aesthetics are a crucial factor concerning user satisfaction.4 Even without excessive use of graphics this can be reached by leveraging more sophisticated color schemes and typography rather than just black/white coloring and default fonts.

Keeping the above points in mind, motherfuckingwebsite.com is for sure a good starting point for “back-to-the-roots”, minimalistic and device-agnostic web design.

Update (November 28, 2014): Please also pay attention to the follow-up posts based on this article, as well as the conference article published by Springer:

1 http://goldilocksapproach.com/article/
2 Michael Nebeling, Fabrice Matulic, Lucas Streit, and Moira C. Norrie (2011): “Adaptive Layout Template for Effective Web Content Presentation in Large-Screen Contexts”. In: Proc. DocEng.
3 Cf. http://www.dartlang.org/
4 Talia Lavie and Noam Tractinsky (2004): “Assessing dimensions of perceived visual aesthetics of websites”. International Journal of Human-Computer Studies, 60(3), pp. 269–298.