```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FT9VME1PFRBbbQhR4QheF56OHoy73%2F4Lc07VfzIajEwfZbev07%2Fea3dba30-7570-4ad8-a42f-d0c32326b732.png?alt=media&token=0ece08d0-ff8e-4a06-beb1-0c059f39af27","id":"ea3dba30-7570-4ad8-a42f-d0c32326b732","width":816,"height":448,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

Do you ever pull up your phone and forget what you were about to search for? Yeah, me too.

Search for a long time has been defined in different ways based on how someone understands it but also based on the expert level someone has in using user interfaces thus some people always mix search with filter or even sorting.

## **But what exactly is search?**

This guide is made for people that have interest in knowing what search is and getting the tip of the iceberg knowledge. For deeper readings please refer to citations at the end

A couple of weeks back, I attended a workshop organized by Smashing Magazine titled “Designing Search UX in 2024” (content on YouTube) where Vitaly Friedman was breaking down search and the design patterns that are involved with it.

One of the opening slides stated.

> *“When users have a pretty good idea of what they are looking for, they use search: mostly via exact queries or broader topic queries (“D-2348” vs “climate change”).*

Which is true, over time people have developed mental models regards search and these are different for everyone that is very hard/challenging to design for because of the endless use cases.

It should be noted that.

> *Search quality always depends on the quality of the metadata. Search must be actively managed by editorial and technical experts. And: we should measure content findability. — Vitaly Friedman*

## **We first search, then filter and sort**

This is the “correct” way search should function thus it is important for designers and engineers to implement it like that as a way of customizing the mental models of users. Vitaly Friedman in his presentation presented different “patterns” related to search.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FT9VME1PFRBbbQhR4QheF56OHoy73%2F4Lc07VfzIajEwfZbev07%2Ff007619d-84e5-4201-84b1-cb5fe7fe7acb.png?alt=media&token=85977a79-fa23-4a2b-8b53-d7d7f71045f5","id":"f007619d-84e5-4201-84b1-cb5fe7fe7acb","width":828,"height":466,"filename":"image.png","type":"image/png","caption":"Search patters/user cases. (Courtesy of Smashing Magazine)","border":false}]}
```

The way people use search field however is dependent on how people read information, which patters they follow. Below are some patters on how people read information on sites and even apps.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FT9VME1PFRBbbQhR4QheF56OHoy73%2F4Lc07VfzIajEwfZbev07%2F30d81a7f-f368-41ca-850c-8f0be3159a0b.png?alt=media&token=8cb4e4c1-ed8f-4d34-b85f-c5ca0668ceec","id":"30d81a7f-f368-41ca-850c-8f0be3159a0b","width":828,"height":466,"filename":"image.png","type":"image/png","caption":"Eye tracking by Nielsen Norman group","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FT9VME1PFRBbbQhR4QheF56OHoy73%2F4Lc07VfzIajEwfZbev07%2F2953a79e-532d-4268-8cd3-32094617e599.png?alt=media&token=895e62f1-f419-48e6-8ccc-62e6e840904a","id":"2953a79e-532d-4268-8cd3-32094617e599","width":828,"height":466,"filename":"image.png","type":"image/png","caption":"How people read information on a website/in an app. (Courtesy of Smashing Magazine)","border":false}]}
```

From these patters, one behavior you can observe is people do not read information in a straight line but people ‘bounce’ between information looking for what exactly they are searching for (pinball pattern) and if they do not get it, they go away which presents the question **How to people look for information?**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FT9VME1PFRBbbQhR4QheF56OHoy73%2F4Lc07VfzIajEwfZbev07%2F7ea36fbf-1370-408e-8b2c-527816151ec3.png?alt=media&token=b7d48802-87b3-4c60-8058-a1ed866d2c45","id":"7ea36fbf-1370-408e-8b2c-527816151ec3","width":828,"height":466,"filename":"image.png","type":"image/png","caption":"The Pinball pattern (Courtesy of Smashing Magazine)","border":false}]}
```

## **How do people look for information?**

Have you ever entered your room/house looking for this exact thing but can't figure out what yet so you keep looking around and hoping you can remember it, so you keep looking for clues to help?

That is how users use search inputs as well that is why it is important to make technology work as much as the real world as stated in Jakob’s second heuristic “Match between system and real world.”

By understanding how people use the search bar, we can understand how people actually look for information.

In Donna Spencer’s book “A Practical guide to Information Architecture” in chapter 9 (link at the end), she lists out the different ways people look for information and how to best design for such people and these are the ways:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FT9VME1PFRBbbQhR4QheF56OHoy73%2F4Lc07VfzIajEwfZbev07%2F18598887-8f6f-4f36-98ea-043b4a643c3c.png?alt=media&token=f491de54-7d07-4d81-a18d-cf69296bd3c5","id":"18598887-8f6f-4f36-98ea-043b4a643c3c","width":828,"height":552,"filename":"image.png","type":"image/png","caption":"As extracted from A Practical guide to Information Architecture","border":false}]}
```

## **Finding known items**

This is one of the most common patters used by most people who use search bars. For instance, when using Uber the chances of me typing in a name of a place I know are higher than me not doing so does not matter the way I type it what matters is that I know what “item” in this case the location I am going to.

When integrating a search bar/option it is important to ask, “do my users know what item they would search?”. What users type into a search bar in Jira is not the same as what they would type into a search bar on the website of a university library.

However, these types of users are usually “expert” users when searching. Expert because they know enough about a topic to make it known to them that they just input that knowledge they have in a search box. Users like this know that there is an answer to their query and know when they see it to stop searching.

Examples of such cases can include.

* Searching how many Goals Cristiano Ronald scored against Granada.

* Searching the Samsung Frame TV

* Checking the price of products among others.

## **Design guides.**

* Implementing an A-Z index (involves having the correct metadata on items like multiple labels on products. For instance, on an ecommerce platform a 65' TV can have tags like “big TV screen” ([A-Z Website Indexes Explained — SitePoint](https://www.sitepoint.com/a-z-indexes/))

* Implement a persistent search bar based on context to enable users find whatever whenever.

* Show a “No results” state instead of an error.

* Use filters as user would want to fine tune results to their liking.

* Consider localization (other languages) as sometimes users can better describe something in their native language.

* As a user types, historical search suggestions can be shown beneath the search bar.

* When displaying results, the search text field remains visible, but not in focus to shift user attention to the results.

* Implement categories to allow users to search within categories.

* Add a label in the search field to show users clearly that “this is where you should type your query”.

## **Exploring**

Growing up we did not really have a computer at my house so I always walked to the one cafe around my neighborhood to surf the internet and what that basically meant was just scrolling and scrolling through whatever I could scroll about.

Users that search by exploring are more like me back then. Such users may have an idea of what they need to know but may not really know how to articulate it to make sense in the search bar as they may not know what terminology to even use at such a point not even have an idea of where to start from when looking.

Such users usually read content halfway and if it does not make sense to their inner self, they leave and do the same elsewhere.

> *In this mode, the information need will almost certainly change as you discover information and learn, and the gap between your current knowledge and your target knowledge narrows. - Donna Spencer*

It's important to note that such users may not be shacked by presenting to them large amounts of information at once.

The best way to design for these kinds of users can be through making sure that they can move through information, back and forth so pagination in such a case would make sense to them, links (make sure links change color when clicked) to show them that they have been here before among others.

Pagination is a debated idea because it's hard to fine tune results but showing a range below the pagination is good UX.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FT9VME1PFRBbbQhR4QheF56OHoy73%2F4Lc07VfzIajEwfZbev07%2F23a8ba85-3ce7-4e85-96e3-62afeb3f2360.png?alt=media&token=5722b9b9-63bc-4c24-a790-f627348252f1","id":"23a8ba85-3ce7-4e85-96e3-62afeb3f2360","width":828,"height":466,"filename":"image.png","type":"image/png","caption":"An example of good pagination (Courtesy of Smashing Magazine)","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FT9VME1PFRBbbQhR4QheF56OHoy73%2F4Lc07VfzIajEwfZbev07%2F17a976a4-182c-4edc-a442-921f0f2eed0e.png?alt=media&token=353f28f7-3d50-428e-b131-a90840d25137","id":"17a976a4-182c-4edc-a442-921f0f2eed0e","width":816,"height":448,"filename":"image.png","type":"image/png","caption":"Pagination from the Moon Design system","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FT9VME1PFRBbbQhR4QheF56OHoy73%2F4Lc07VfzIajEwfZbev07%2Fa58dfbde-093d-4ed1-8637-25bc12b8fdeb.png?alt=media&token=e05d6529-f434-440f-971d-21e434a2de42","id":"a58dfbde-093d-4ed1-8637-25bc12b8fdeb","width":828,"height":466,"filename":"image.png","type":"image/png","caption":"(Courtesy of Smashing Magazine)","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FT9VME1PFRBbbQhR4QheF56OHoy73%2F4Lc07VfzIajEwfZbev07%2Fd0c28a06-4bde-49a1-a633-372f0ef707e0.png?alt=media&token=55d02cc0-b640-4304-9c10-4788511c35d4","id":"d0c28a06-4bde-49a1-a633-372f0ef707e0","width":828,"height":465,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

Pagination has overtime come to mobile user interfaces as well presented as a carousel controller (I failed to find a name for this UI component).

## **Design guides.**

* Use page controls to represent movement between an ordered list of pages.

* For more complex navigation, consider using a sidebar.

* Center a page control at the bottom of the view or window. To ensure people always know where to find a page control, center it horizontally and position it near the bottom of the view.

* Although page controls can handle any number of pages, don’t display too many.

There is quite a number of types of page controls out there so do get something that works for you and your users.

## **Refining and narrowing**

I sometimes dress up my young sister for occasions but picking clothes has forever been an issue, so well usually get a number of clothes out of the closet and throw away one by one until we get to desired results.

There are users like her, people that want to grade stuff. This is so common with library websites and e-commerce platforms to help users get to the bottom of things.

But this raise a question, **what is the difference between search, filter and sorting?**

It should be noted that all the three are interconnected but users move in a sequence we stated up there.

> *In a searching scenario, a user inputs a search term for a specific thing they’re looking for. In a filtering scenario, a user generally knows what they’re looking for, but may not have a specific thing in mind.*

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FT9VME1PFRBbbQhR4QheF56OHoy73%2F4Lc07VfzIajEwfZbev07%2F370e34bd-6fb9-4cfb-989d-37e638bbb89a.png?alt=media&token=77f54870-4ea6-4ef2-9e8c-3a25659c59cf","id":"370e34bd-6fb9-4cfb-989d-37e638bbb89a","width":828,"height":466,"filename":"image.png","type":"image/png","caption":"Sorting (Courtesy of Smashing Magazine)","border":false}]}
```

Sorting (Courtesy of Smashing Magazine)

These types of users can be classified as expert users and thus want to customize details displayed by organizing how and which metadata is presented to them as they like.

Usually in such situations users have a certain criterion in mind to follow when filtering and sorting results.

## **Design guides.**

* Implement filters and a good filter lets you select a number of criteria and displays results for those criteria.

* Filters should update results as they get selected. This helps not to frustrate users by displaying zero results after spending so much time setting up filters but do not even know what caused the zero results.

## **Comparing**

Every time I am buying a new gadget for my desk setup, I always watch YouTube videos and open windows side by side to compare the two devices or compare one device two times.

Comparison is all about finding the similarities and differences then make a decision based on conclusion.

Users of this nature could have queries like;

* “Product A vs Product B”

* “Product A reviews” or “Product B reviews”

* “Best \[product type\]”

* “Product A features” or “Product B features”

* “Product A alternatives” or “Product B alternatives” etc.

Interfaces that give users the ability to compare two products could be hard to execute thus it's important to have a solid understanding of your user base through user research, usability testing and design thinking in general.

## **Conclusion to part 1**

I know that putting together a very long piece in the age of low attention spans is quite challenging thus I had to split up these two publications another which I am currently finishing up.

Thank you for reading this far. For comments or improvements i can make to my writing (which is just growing) please send me a message on [Twitter/X.](https://x.com/charzUX_UI) 

## **References**

[Designing Search UX In 2024 with Vitaly Friedman — YouTube](https://www.youtube.com/watch?v=OSihRRirLVk+)

[A Practical Guide to Information Architecture, Second Edition (uxmastery.com)](https://uxmastery.com/wp-content/uploads/edd/2019/01/PracticalIA.pdf)

[Search field — Spectrum (adobe.com)](https://spectrum.adobe.com/page/search-field/)

[Moon Design System](https://moon.io/)

[Design — Apple Developer](https://developer.apple.com/design/)

[Material Design](https://m3.material.io/)

How people search, a guide.

## The Intro

Hey, my name is Charz. I’m a twenty-something software designer from Uganda. Well, that’s how I explain it to my mom—what I really do is UX/UI design, and I’m terrible at coding (just so you know). I live in a suburb near the city and work as a freelancer.

## So, what are you working on?

Yeah, that classic question. I’ll give the usual answer: I’m working on some big stuff (¯\\\_(ツ)\_/¯).

But honestly, I’m currently working on green environment projects and helping South Africans understand their government better. There’s more coming soon. Hey I promise ;)

## What’s this article about?

Did I bring you here just to tell you about myself? Could have been an email, right? Nope. I wrote this article to break down the concept of time—not in the physics way, but more like a "you and me" conversation. This is where the real story begins.

## Are you behind in life?

Maybe.

This is one of those questions that haunts everyone—rich, poor, confused, hopeful—whether you’re in your 20s or 30s, it doesn’t stop. It keeps coming back, like a boomerang. So, what’s the answer?

Honestly, I don’t have one. I often wake up at 7 a.m. and do what many people my age do: check my phone, go through emails, and scroll through Google News. That’s when I see people my age making 400x what I make. And that’s the origin of my own question: "Am I behind in life?"

I don’t answer it though. I just get up, power on my laptop, and start working. But then, halfway through the day, I see a tweet from a fellow designer celebrating a gig worth more than my yearly earnings, and—yep—you guessed it, the question comes back.

So, I dive down the rabbit hole, searching for answers—how are they getting ahead, and why aren’t I? I end up on different sites, reading their stories, hoping to find some breadcrumbs. But it's like chasing carrots down a hole that just leads to more dirt.

By 6 p.m., it’s time to make dinner, so I grab some coins, head to the vegetable lady down the street, and overhear her talking about her son who just landed a job at a big company abroad. He’s only 19. And yeah, you guessed it, the question creeps back in like your phone’s dark mode toggling itself on.

## So, are you behind in life?

Honestly? Maybe. Maybe not. It depends.

Being "behind" implies there’s a race—and if there’s someone in front of you, there’s also someone behind you. It’s like a domino effect. But life isn’t linear like that. Everyone’s on their own path, with their own brain and story. We’re not like computers running on one server—we all process life differently.

This could be the answer to our question: "Am I behind?" Maybe you are. Maybe you’re not. But maybe you’re right where you need to be.

So, how have I concluded? You still haven’t given me a clear answer.

Here’s the thing: like Tupac said on Kendrick Lamar’s “Mortal Man,” “A true hustler in every sense of the word. I took nothing, I took the opportunities.”

Take the opportunities in every sense. When executed well, this question will disappear. But if you don’t, it’ll keep reappearing.

I’m not even successful enough to give advice, but this is the answer I wrote down before going to bed at 2 a.m.

Image credits; [Lummi — Free AI Stock Images & Photos](https://www.lummi.ai/illustration/serene-night-scene-with-shooting-star-g-_rt)

Are you behind in life? Maybe

Up and open for opportunities. Remote mostly because i can't afford moving to your country.  

Software designer

The small things in UI design that never get talked about enough

Talking about the most ignored things in design that doo not get talked about enough

Start the UX Design Process: Empathize, Define, and Ideate

Foundations of User Experience Design

Build Wireframes and Low-Fidelity Prototypes

Create High-Fidelity Designs and Prototypes in Figma

Responsive Web Design in Adobe XD

Conduct UX Research and Test Early Concepts

The goal of the project was to update the user interface of an existing app. This app was to launch first on Android only so I designed it entirely on Material design, a design system by Google.\
Project was handed off to the dev team at UIBFS and you can check for the latest version [here](https://play.google.com/store/apps/details?id=com.mypledge).

Mypledge app

From branding to software design, I’ve shaped the company's visual identity, including the logo and brand assets. While most products are still in development, you can explore the company website I designed and coded [here](https://karabo.app/). \
Currently head of product design.

Karabo App

Currently Head of Product & Design Lead at Lyanda\
Building a sustainable suite of apps for electric vehicle owners to easily find charging stations, make payments, and track battery health. Station managers get tools for orders and station management.\
Designed the company logo, app icon, brand identity, and UX/UI for both apps. Grew the product team from 1 to 3 members.\
(More details to come soon.)

Lyanda

These are screenshots from an app i designed at Gasfil as per project requirements. Role of app was to allow users find gas stations around them quickly. This project has however since been repealed by the client company

Gasfilup

Exploring UI for movie streaming platform.

Movie streaming

Brand identity for a USA based music band. Fun side project.

The Avant Garde

Collabo is a platform for designer, engineers and clients who want to collaborate on projects. Handling the project managment, payments and planning all in one place giving a chnace to creators to focus on the important things.

Collabo

This was a random redesign i did for the biggest spirit company in my country (yeah i do some branding sometimes)
At the time i was still the head of marketing at Famerise Marketing agency

Uganda waragi rebrand

Sendy is a fintech app that solves the problem of money transfer. Making receiving money from abroad to Africa easy by integrating with existing mobile money infrastructures making it easy for even the unbanked population of Africa to be able to receive international payments straight to their mobile money accounts without any hassle.

Sendy

Designed the company's logomarks and did other brand related content

Brand design

Re designed the company's website and lead the marketing role

Design/ Marketing lead

Leading product design and development for a next-gen ecosystem of apps, accelerating Africa's transition to sustainable electric mobility.

Head of product design

* UI revamp for the existing Mypledge app.

* Product direction

* UI design

* Product research

* Prototyping new features

Ssempijja Charles

2024