Mobile menus on desktops

( Jakob Nielsen is presenting face-on to a live and recorded Zoom call, holding a paper sign with the words "#10 - Mobile design on big screens" printed. )

NARRATOR:
Okay, back in '21 UX gurus NN Group put out this top 10 list of web design mistakes, and instead of showcasing some of those mistakes in action, you can see Jakob here is just holding up a piece of paper to list what those issues are.

So I thought it'd be a good opportunity to step through this list. We'll do one video for each number that made it into the list, and give you a real world example of what what he's talking about here.

So mobile design on big screens - this is probably an issue that's the complete opposite of what used to happen when smartphones and web browsing on those phones was not much of a thing, where you'd have a desktop design and that you'd have to try and cram things down, down to mobile.

Now, with development design approaches treating mobile as the priority and then expanding out, you have this opposite affect where mobile design patterns are maintained for desktop.

So I've got two examples here that we'll go through and Jakob here in this video talks about the hamburger menu.

( The Clemens Hill website is screencast. )

So the hamburger menu exists because when you've got small screen real estate, you can't contain everything within one view. But here in Clemens Hill, you can see that this top bar has a lot of real estate to put menu items and really we're only just presenting the login and the cart at this stage.

( When the narrator says "see that top bar…", they indicate with the mouse cursor a long distance across the top of the browser window. )

( Narrator changes the website view to emulate a mobile screen size, and clicks the menu button. )

So if we looked at on mobile that looks all good, we click to expand the menu items out and we've got to say eight items that users can go through to. Now they've used the same approach on desktop. So you notice that that menu button slid-in from the right hand side, we've got this massive slide transition effect for desktop. So we've got all this screen real estate listed, and notice that every time now I want to go to a different page I do have to go through that transition phase, and click on the link.

So "join our wine club", if we want to switch to "their story", I've got to expand that view and go to "our story".

( The narrator changed the website view back to a desktop screen size and clicked the same menu button. When they mention "transition", a slow graphical effect slides from the right-hand side of the browser window to cover the whole window. The menu items themselves occupy only 25% of the window. The "wine club" and "story" are menu items. )

So each one of these items: one-two-three-four-five-six-seven-eight, could quite easily have fitted into the desktop view.

To demonstrate that a bit more clearly in a different site example.

( Narrator changes the screencast to the Pidapipo website. )

Here's a ice cream shop in Melbourne which serves a very delicious ice cream I might say, but Pidapipo, you can see again we now we've got the hamburger on the left we've got the logo here.

If we click on here it's simply a replacement for the logo with the menu items. So again you can see that the real estate definitely accommodates all these menu items, it's just hidden behind an extra click, so again if I want to go to "gelato", I can click that, or I want to go back to the "shop", I've got a click here and go to the shop.

( The logo is displayed in the center of the screen. When the menu button is clicked, the logo dissapears and is replaced by eight menu items. )

So it's just that double handling unnecessarily on desktop, which again works fine on mobile, but on desktop size, good to appreciate the design accommodations that you have.

All right, ciao!