Buttons

[fisicx]

I'm experimenting with navigation systems on small screens.

If you only have a couple of links in the main menu there is no need to hide it away on a small screen (because there is lots of room) and it's a much better UX (people don't have to guess). But if the number of links increase you end up with 2-3 line of links on your phone and it can take up a lot of screen space.

A common method is to hide it away as a hamburger which opens the navigation menu in a variety of ways.

I'm using a 'menu' button which displays the links in one of two ways: tiled or a grid:

This is the grid:

Home Page | Testblog Testblog Testblog

this is a test

testblog.co.uk

These are tiled:

The free wordpress tradesman theme

An easy to use theme for trades and small businesses. Built in SEO, testimonials and contact forms

tradesman-theme.co.uk

Both options have minor bugs that need fixing, it's the concept I'd like an opinion on. Which do you prefer? Or don't you like either?

 

[JamaC]

Grid is simple and clean.

I 100% agree on a clear menu button over the hamburger symbol. A practice that makes a huge difference but hardly used.

Many designers add a hamburger icon, assuming all website visitors will know what it is....well.. they don't.

It's not a very smart gamble, as a percentage of potential sales can easily be lost due to this.

Business owners have no idea what that designer may have just cost them.

 

[Fagin2021]

Life would be much easier if you could 'hover' on a mobile.

I've never liked hamburgers so much prefer your approach.

My gut reaction was to like the tiled screen better, but I think the test might introduce bias. The tradesman theme has attractive content beneath the menu whilst the 'test' page is very stark. If the content was swapped I might well prefer the grid.

Perhaps a fairer test would be to have the same content beneath each menu type?

 

[fisicx]

Perhaps a fairer test would be to have the same content beneath each menu type?

A more attractive grid:

What’s going on | Windsor Forest TR Group

The website of the Windsor Forest TR Group

wftr.co.uk

 

[Fagin2021]

A more attractive grid:

What’s going on | Windsor Forest TR Group

The website of the Windsor Forest TR Group

wftr.co.uk

Yes - I like that better. The caveat being that I'm a pretty crap judge of anything visual!

 

[fisicx]

Yes - I like that better. The caveat being that I'm a pretty crap judge of anything visual!

Same here. Which is why I try not to design anything.

 

[fisicx]

Came up with a simple answer to the question. In the theme customiser you now have a choice of tiled or grid.

 

[fisicx]

Found a bug. When you scrolled the menu no longer worked.

Can you go to the site using your phone, scroll down and see if the menu still works. Ta.

The free wordpress tradesman theme

An easy to use theme for trades and small businesses. Built in SEO, testimonials and contact forms

tradesman-theme.co.uk

 

[JamaC]

If you are referring to the sticky nav, it's all good