Developing observation skill, how to practice your typography skills, and framework for discovering use cases & corner cases
Monthly Issue #1
It’s already April.
2024 is flying by fast!
How are you getting on? I hope this newsletter finds you well.
Apart from my full-time job, I've been creating content on Instagram. It’s been fun, combining storytelling, video angles, and some editing.
As mentioned in the previous newsletter, I want to test a new concept: a monthly newsletter where I'll share 3 different topics. Meanwhile, I share shorter, more visual content on Instagram every week.
In this monthly issue, I want to share insights on:
Observation is a skill that can fundamentally help create more meaningful, impactful, and successful designs.
How to practice your Typography for UI Design skills.
A framework for exploring use cases and corner cases.
1) Improve your designs to be more meaningful, impactful, and successful by sharpening your observation skills.
I’ve realized that observation is an underrated skill that is rarely discussed in the design field.
For design researchers, observation is their best friend.
Yet, for designers, observation can be an essential skill that serves as a window to notice, pay attention to, and gather information or understanding that feeds into the design process.
Ultimately, it enables you to craft creative and meaningful solutions.
Imagine a design process, as simple as an input, process, and output.
What you feed into the process is what you get out of it.
You feed your crafting process with an understanding the problem, users, and competition, along with data, inspiration, product vision, and principles.
You probably think, isn’t it the same as the first step of the design process: 'discovery' or 'empathize'.
Perhaps, what I want to share with you is not something new. You already have it in you. I want to amplify it by making you more aware that observation is essential in the design process.
As someone who appreciates language, I like the word ‘observation.’ It’s not just an act of gathering, finding, or seeing. To me, observation means seeing the unseen. You reflect. You add your interpretation by connecting it to your past experiences. Then, finally, you conclude it.
Observation is rich. It activates other skills like critical thinking, empathy, reflection, and curiosity.
I will share a framework to help you practice this skill and embed it into your process. This way, when you observe other designs, you can get the most out of them.
Practice #1: Things around you
Let’s warm up a bit. Check your surroundings and find any simple physical product with a user interface. It could be your microwave, fan, rice cooker, power bank, or anything else.
I have my microwave here.
What do you see? Always start with what you can immediately see, feel, and touch. Write them down to process your observation.
From what I see:
“It’s a microwave with two knobs on the left and right, some buttons with icons to give hints about their functions, and a monitor to provide feedback on what I have selected or pressed. The left knob is used to select different functions, while the right knob is used to adjust the desired amount, whether it be the time, heat, or weight of the food – ultimately determining how long and how hot the food will be cooked.”
Next, let’s go a bit deeper. Reflect on these questions.
Is this product easy to understand for the first time without trial and error?
Is this product easy enough to use, even for everyday use?
How effective is the design of this feature/product in communicating its function and purpose?
Why do you think this feature/product is designed like this? What might be the designer's intention? What could be the constraints?
How can I make this better?
If there’s one thing I’m curious about, what is it?
These questions act as criteria to guide you in the specific areas of your observation. Without criteria, it’s harder to focus, because observation allows you to zoom into a particular area.
Here are some of my answers to those questions:
Is this product easy to understand for the first time without trial and error?
It's not easy to use it for the first time without reading the manual. Even after a couple of attempts, you still need to refer to the manual. I suppose most physical products anticipate that we'll need to consult the manual, especially the first few times. What makes it challenging are the various modes represented by icons on the left knob. Unfortunately, I no longer have the manual with me. I tried searching online, but it appears that microwave icons aren't standardized like washing machine icons.How can I make this better?
To be honest, I don’t understand the ins-and-outs, nuances, and constraints of industrial product design. If I aim to improve this, perhaps when selecting different icons, they could be more informative. Additionally, I wonder if it would be beneficial to have standardized information available when visiting the brand’s website. For newer products, it could be useful to include a QR code somewhere on the product. This way, whenever you need the manual or have misplaced it, you can retrieve it online.
You can also use digital products (apps/web) to practice this if you want to be more relevant to what you do.
I suggest you write down your observations. It doesn’t have to be a good long sentence. It could be just short ones, as long as it's descriptive enough about what you are observing.
Next, I'll share how you can practice observation to analyze UI design, focusing on specific topics such as typography, colors, and layout.
Additionally, I'll provide an example of observing a broader topic, including a case study that reflects real-world scenarios.
2) How to practice your Typography for UI Design skills.
There are a lot of typography resources out there, but I’ve decided to write one.
Fingers crossed, it’s less boring, gives you insight into how I see typography and offers unique ideas for practicing it.
By ‘unique,’ I mean something different from the typical design practice: jumping onto Figma straight away to design something.
Since I researched and wrote my book, ‘The Practice of Design Practice,’ I’ve been exploring different ways that might be useful to hone design skills.
Without further ado, here they are!
What’s included:
Typography guide for UI Design pt.1: The Basics
Discover the basic ideas that matter for typography in UI, and learn how you can practice analyzing typography. (Includes a practice example so you can follow and replicate my method.)Typography guide for UI Design pt.2: Composing an effective visual hierarchy with text
Learn how to create hierarchies in your designs with typography: a step-by-step guide including 3 practices you can emulate.
Note: I'm still writing part 3. If you download parts 1 and 2 now, you'll be notified when part 3 is ready.
3) Discovering use cases for your design
Use cases describe different ways people might use a product or system. They help designers make sure their designs work well for everyone in various scenarios.
For example, some writers on Substack may send a short newsletter, while others may send a long one. Substack has limitations. When you hit the limit, you will see a warning to notify you.
With an understanding of different use cases in mind, you anticipate how the product or system will interact with people in various situations.
Although, the responsibility of discovery shouldn't all be on your shoulders. It's a team effort. You can always make sure your design is robust, covering all the different cases.
I use a simple framework that has always been my go-to for discovering potential use cases.
Happy case (Usage, Intentional):
Someone uses the system or product as designed to achieve a specific goal.
For example, someone visits the login screen, enters their email address and password correctly, and gains access to their account.
Corner case (Usage, Unintentional):
Someone might unintentionally encounter abnormal conditions or exceed normal capacity, even though they are using the system or product as intended.
For example, someone attempts to log in under poor network conditions.
Misuse case (Misusage, Unintentional):
Someone might unintentionally misuse the system or product because of errors or misunderstandings, resulting in unintended or incorrect outcomes.
For example, someone attempts to log in using an incorrect email or password.
Abuse case (Misusage, Intentional):
Someone may deliberately misuse the system or product in ways that violate its intended use policy, exploiting features or capabilities for harmful outcomes.
For example, someone attempts a brute-force attack on the login screen, trying to gain unauthorized access.
Here are three ways I can support your growth as a designer:
Purchase my book, "The Practice of Design Practice," to adopt mindsets and practical tips on how designers can engage as lifelong learners.
Purchase my UI Kit and Design System, Nucleus to level up and accelerate your process. I also share tips, and ideas on Nucleus Substack.
Design Buddy is a free publication supported by readers like you. Subscribe to have my next post delivered directly to your inbox and consider pledging your support to help this independent publication thrive. You won't be charged unless you enable payments.
Your support makes all the difference. Subscribe and support Design Buddy today!