Why / Anecdote
I'd like to begin this update with a brief anecdote. Imagine this scenario: you enter this new sports club. You wanted something new and, most importantly, to find a passion you’d enjoy for many days to come. Until, at some point, you realize one thing is off. Is it this environment? No, I really like it here. Do I find passion in this sport? Well, I don’t like it that much, but everything around it seems great, right? It's already been half a year, and you’re still there at the club. Meanwhile, when walking around, there are other amazing sports outside your club. You realize the most important point wasn’t met all this time. Two years pass, and you’re still inside the club, wondering when that passion will ever reach you.
Initially, I was planning to work on designing a portfolio section for my website. However, I have been sharing my website with some people in my direct environment. And the feedback was concerning, why though? Well, they were not able to navigate some parts of the website. I already had some knowledge about signaling affordance; here’s an interesting article on it, “Affordance”, so I wanted to improve my website. Simply, 'cause I care about design, not mainly for UI or aesthetic, but from a human-centered perspective. Human-centered design is how I was raised as a designer; I still believe and stand by it to this day. So, to no surprise, this month is dedicated to interaction and UX, before I even think about my portfolio.
How / Affordance
Research
Recently, I have been deliberate and methodical about my design system. I cannot add or change something to it without a clear reason or decision. For now, the goal was to enhance interaction and spark curiosity among visitors to my website.
That brings me to do some research and orientation. Before I consider adding interaction tokens, rules, and components, I wanted to take some inspiration again. However, it wasn't just any source of inspiration; I went back to my childhood and teenage years. One notable example is Nintendo and its video game console, which are accessible and inclusive. I wasn't able to find much official documentation. Based on videos, images, and my own gaming consoles from Nintendo, one thing stood out to me. For something that lived on a flat screen, their UI felt tactile.
So I moved on to one of my favorite Nintendo game franchises, Rhythm Heaven. This franchise is basically burned into my mind and soul. Visually and sonically speaking, it is very playful, iconic, and it has pop. If you are familiar with Wario-Ware or Nintendo's UI design in general, you could expect the experience is very much alive. There is one distinct aspect that makes Rhythm Heaven special compared to your average Nintendo game: the physical and hardware constraints the developers had to work within. Researching how they make this game playable, accessible, and easy to interact with made me learn that
constraints should provide clarity in what choices you're allowed to make.
The way they use colors, shadows, borders, and sounds makes their games very intuitive and engaging. I took some of the elements as inspiration in my archive section, though very lightly, as their system is too bright and expressive for my archive section.
The other day, I watched a small commentary video about liquid glass and flat design. And it made me reflect on this system. Most criticism was about how Apple made UI harder and less appealing to understand and use over the last decade. What resonated with me was the argument that the newer design philosophy isn’t humble, nor intentionally shaped around what humans actually need. Another point was that the modern designers hated the old 2000's design that Apple had for the iPhone before iOS 7. I didn't like it visually; however, it was usable. What I don't like about liquid glass, 'cause I don't think it's genuine UX-wise, is that it's mostly aesthetically focused and Apple's way to flex their hardware performance. I just like how Apple's earlier designs were more humble and intentional, which I try to achieve with my designs as well.
Obviously, I reflect this back to how I'm designing this system or the language I have for my website. At the moment, my website is an archive and very document-based; I barely have any UX or interactive elements. That isn't necessarily a problem, 'cause if I were to try to fit everything "common" into the system, I'd just create more unnecessary complexity. Which leads me to a bigger question: once I add human interaction to my website, how do I design it correctly?
Which is a broad question by itself. I noticed this when I invited people around me to interact with it. It seems rather difficult for them to perceive affordance. Common remarks or signals that occurred:
- "Can I click the pictures?"
- "Well, only the label is clickable for now."
- "Oh, I can click the text?"
- "Yes, it leads to a different page."
What is available now in the system isn't wrong or meaningless. But testing Human-UI and interaction on it, concepts like navigation are clearly not incorporated predictably. I'd like to develop a new layer to this system, which is at least intentionally human-friendly, yet also fits my visual aesthetic.
Build
And that brings us to the decisions. As of writing this update, I have a few components that involve interaction. I had text links, a thumbnail link, and a zine viewer. Before I had made a choice based on my document/stationery aesthetic. If you've ever held a notebook, you know that paper and ink are flat… I just happened to follow this aesthetic very well, which led to the following issues:
- Text-based links looked similar to normal text.
- Thumbnail links were flat; not inviting enough.
- The zine viewer was flat and blended in with the background.
This leads to visitors wondering, "Should I click here?" or "Is this zine a separate document?" The issue that was present was basically,
The visitor is surrounded by affordance, but has no visual guidance to perceive it.
In a systemic way, I decided to introduce a layer to my design system: The interaction layer. Two simple points came to mind: show the user there is something to interact with (signal possibility), and acknowledge the user's choice to interact (confirm action). For that, I made use of shadows, borders, icons, and animations, not for decoration but to create a more immersive and tactile experience. I want to write an in-depth entry about this soon, which explains the tech behind my design system.
Connection
Now comes one of the best parts after building an entire website: sharing the website. To be sure about the effects of my design choices, I asked some of my developer friends to test my work. Peer reviewing and having a fresh pair of eyes is definitely helpful. As it can prevent some surprise feedback that might come around from users. The added knowledge and recommendations that they provide also create an environment open for collaboration, progression, and constructive feedback.
This month, I did a lot of zine sharing, which felt both vulnerable and exciting at the same time. I had some physical copies of Ghost Emerge left. I decided to share those with friends at gatherings or during casual catch-ups. However, now I can also share my zines digitally! So to some friends, colleagues, and acquaintances, I gave or texted them the link to my zines. Now I can hand someone a physical copy or send a link in seconds. That makes distribution feel almost unfairly powerful (evil laugh emoji)
What / Clickable
After discussing the concept of interactivity and affordance with one of my developer friends, I realized I went a bit too hard on affordance and interactivity. In an almost obsessive way, I wanted to express affordance as clearly as possible. But he told me that you can expect users to at least know about what’s clickable or tappable, to some degree. Which is a point you should also consider. You don’t have to guide users everywhere and every time; put some trust in them.
In between all the tweaking of the design system, I did find some time to sketch out my vision for the portfolio section of my website. The core idea is there, and the necessary aesthetic flair is present in my concept. Though there’s someone who has been quietly stressing about my portfolio. The time that has been ticking. For the longest time, I’ve been fully aware that the next step toward becoming the designer I want to be is building that portfolio.
To end on a light note, doing research on the UI & UX of video games and consoles comes with the added field research. Basically, I get the benefit of playing video games, and to no surprise, I enjoyed it. One funny distraction was playing the very first rendition in the rhythm heaven franchise, Rhythm Tengoku, for the Game Boy Advance. It came with a drum lessons section, it was really addicting, and now I really want to buy and learn playing on a drum set. Just another hobby I need in my life. I hope I can get a set in the future and start jamming.