20 ways to design a navbar

“Oh, I’m supposed to click that?!”

We are in the process of implementing our redesign into the Spill app. I’ve taken a break to write about what I’m doing, and explain how our meticulous approach led to our designer almost strangling me.

I’ll be looking at our navbar, which I thought would be a simple job.

But first, to give some background information. Our navbar is at the top of each page in the app (like a header), and contains 3 buttons in order to navigate between 3 screens. The pages are for “settings” like “log out” and “suggest a feature”, the actual “chat” page, and lastly a “mindfulness” page, which contains all our activities and exercises.

The key to a successful navbar, for us, was having logos which were simple, yet reflected the purposs of each page (relevant), and were obviously “clickable” — how I felt about “clicking” a button.

Navbar number 1

That was our first design, made by Helen. In fact, all our designs were made by Helen — big kudos to her for dealing with our obsessive pettiness!

First, we had to tidy things up — it was all a bit raw. We inverted the background colours such that we had a grey “selection” bar and a white background:

Now to the button images — a list style logo for settings was obvious, if a bit cluttered. The central speech bubble logo was a hit from the off — it’s clean, to-the-point and fairly clickable.

The third button (circular arrows) was designed to reflect how you feel “refreshed” after a session of mindfulness. The problem was that it wasn’t obvious this would go to the mindfulness section — it looked just like a refresh button. Oops. (The idea was there at least!)

Time for better buttons

We looked at the buttons in more detail, and Helen got to work with some ideas:

As already discussed, we needed a new settings image, and the classic “cog” style approach both does the job, and is a simple design. People know to click it — they’ve seen it before.

This highlights an important point that we learnt: you don’t have to reinvent the wheel with everything you do. In other words, some things are the way they are for a reason. After much deliberation about losing “creative freedom”. We decided this was the case for our settings image. A cog was the way to go!

However! For mindfulness — we realised there isn’t a well known symbol of mindfulness — so it could become what we made it. Basically, our users will begin to associate mindfulness with our logo, no matter what it is (within reason.) This led Helen to the lotus flower — a symbol of spirituality I guess. It also just looks pretty nice.

That’s what we thought, but that was irrelevant, what mattered was what a potential user would think. So we went around the office getting “clickability” scores for each button design from our colleagues. This exercise, after the initial confusion by the terminology, proved very useful to us.

As a result of our office research, and after a bit more tinkering, we reached our next major design stage:

(Tinkering^)

(Major design stage^)

Looking back, we could have settled there. But in true Spill fashion, it wasn’t perfect, so we weren’t happy.

We agreed (for once) that the colour combination was wrong. We tried different combinations:

(This one has a white background in the settings logo if you can’t tell.)

(This one uses a variant of the message logo, and shows a central selection.)

An underlining breakthrough

The yellow selection bar was an instant hit. For me, I think it works because it is reminiscent of an internet link. I also think that it improves the “clickability” of the navbar as a whole.

Alternatively, we had these, which I shall not comment on:

Taking the combination of a line underneath the logo, with a colour in the logo when selected, Helen made these two beauties:

Custom colours

We knew we were on the right tracks with these designs, so we tried different colour combinations, highlighting and selection colours. Sorry Helen!

We were going for bright, and obvious, but we wanted to avoid a clash [of colour.] That’s why we quickly disregarded designs with both yellow and green. Yet we knew we needed colour, which meant we had to have some green or some yellow.

In the end, we went for logos which had no colour fill when not selected, and were filled white when they became selected. We opted for a green underline (not a yellow one.) See our final navbar below:

In review

And there you have it, a journey through a creative process.

I like our new navbar, and I hope you do too! (Thanks again and sorry, Helen!)