Comment by jjoonathan | Hacker News Reader

Comment by jjoonathan | Hacker News Reader

Hamburgers and Hieroglyphs! Ahhhhhhhhhhh!

I get why they are used on mobile. If you only have room for content, it makes sense to tuck actions away into a hamburger menu except for a small number that you assign to tiny little hieroglyphs. Fine. However, if you have space, this is a terrible way to use it. At best it adds steps, at worst it invites experimentation and disaster to figure out what the heiroglyphs do (which wouldn't be so bad if undo worked but we've apparently decided undo is fine to break too). Like the Apple HIGs used to say, on Desktop you should want to get the most common actions out of menus and onto labeled buttons so that users can answer "what can I do?" without playing hide and seek. Undo should be baked in from the very start (it's hard to retrofit) to reduce the consequences of experimentation.

Unfortunately mobile design has taken over so completely that even on apps which will be used almost entirely on desktop, even on apps with an internal advocate for Desktop design, UI designers go for the hamburgers and heiroglyphs and broken undo because it's standard these days. Sigh.

Oh, and modals are back with a vengeance, but I need to stop here or my blood pressure is going to get unhealthy.

I don't think there's any excuse for hieroglyphs. Even a low-end 5 year old phone like the moto e4 has a 1280x720 display; there's plenty of pixels available to label the icons. Hieroglyphs are a "we hate our users and want them to know it" first design.

Hamburger menus could also frequently be done away with when you look at how many options they have. Like Gmail's app has them when it could fit the icons across the screen as a bar. And it's hard to argue that real estate was important since they put in a bottom bar for chat, video, and spaces whatever that is.

I deal with some legacy web apps and ticketing system at work. They could use a hamburger menu or two. 10 buttons, 15 tabs, and a million inputs most people don’t use.

> Hamburger menus could also frequently be done away with when you look at how many options they have. Like Gmail's app has them when it could fit the icons across the screen as a bar.

Just cracked open Gmail to check this. In the hamburger side menu, there's 18 items not even counting labels. No shot you fit this across the screen as a bar.

I was specifically looking at when an email is open. There's 9 menu options. Move To and Change Labels do the same thing, and it has a UI element on screen already. There's also Mark Important which is apparently different from star. Consolidate Move To/Change Labels and move help to the bottom, and everything should fit on top.

Then there's another menu below that with 8 items, 4 of which also already have UI elements. Give the other 4 icons. There's plenty of space on the show pictures line.

You need a menu for label filtering since the user can create many, but let's look at settings. There's a mostly blank screen with a ... menu with 2 options (why is it sometimes hamburger and sometimes ...?): manage accounts and help. Just put them on the screen. Now look at general settings. Enough stuff that I have to scroll, but for some reason 4 of them are in a ... menu. Two are the same as the last screen, with clear search and clear picture approvals added. Now go back to settings. Suddenly settings has all 4 options in the ... menu! The hidden options on the same screen are different depending on where you were before, when they could all just fit on the screen.

In general, scrolling is much faster than clicking on an icon. Lots of web UIs (e.g. navigation menus) could benefit from just putting the links at the bottom.

>1280x720

screen resolution vs browser resolution

the most common mobile browser resolution is 800x360

also, 5 years is not that old

> the most common mobile browser resolution is 800x360

Really? You're saying most people are using their mobile phone in landscape mode?

I matched OP's orientation to avoid confusion

your highlighting of the confusion only adds to the confusion

congrats

Pixel density isn't the problem, physical size is. Phone screens are small and many people have poor vision. Some even scale up the contents of their browser 25% or 50% or even 100%.

The more text you have, the more difficult it is to ensure a usable UI on small screens, let alone a good one. Don't be upset about the use of symbols instead of text, but about the use of bad symbols. Nobody needs the "play" button on a video widget to say "play" - they know what the right-facing triangle means. (Ironic because I don't know if it makes geometric sense to even say the triangle has a facing, but as a symbol it's well understood.)

I suggest “right-pointing triangle.” Indicating direction with the vertex on the longer axis is a common idiom.

An unlabeled bespoke icon is useless for everyone though, which is strictly worse than text being unhelpfully small for people with uncorrectably poor eyesight.

Put the text below the icon in whatever size you can. It's a strict improvement in usability.

I like having greater content area by default, and the text next to an icon in the Gmail Android app is nice too. (The spam button, with its explanation mark, could easily be mistaken for an important button otherwise.)

It's one of the reasons I prefer how Vim and VS Code look over Intellij and Visual Studio standard. Let me better see what I'm focusing on without distractions (the content) instead of shoving a gazillion buttons on your UI in the default view.

Edit: I was too harsh about Intellij I think. The old UI I was thinking of doesn't look bad in my opinion, but I still think I would have enjoyed my experience with Visual Studio more if it had a stronger focus on content (the code) visually.

I built the nav bar at the top of my website[0] to be scrollable if the content doesn’t fit horizontally. I’m slightly concerned about users not realizing there are more options to scroll over, but I prefer it to a hamburger menu that has to open and cover the content since you can see every option and read the corresponding word. No need for any of that when visiting on a desktop however.

[0] https://www.winstoncooke.com/

It looks to me like any device with at least 300 horizontal CSS pixels can see your whole nav bar, which should be nearly everyone.

On the other hand, hamburger menus typically have a lot more entries than this, enough that a horizontal menu wouldn't look good even on desktop.

Yeah I only run into the issue when using an iPhone mini with an increased font size. But it’s ready to go if I add more routes. If the list grew to be too large, I would switch to a two-column layout on my homepage for the primary points of interest.

I’m a big fan of collapsible table of contents. That design paradigm allows for the higher level to use a word to indicate what it contains and then can open up to a list. But it does really depend on the type of information conveyed. I can currently get away with always avoiding hamburger menus but that might be tougher for something like a banking app to avoid.

I agree hieroglyphs make discovery difficult. But I believe designers like them because they allow for consistent design across different languages. E.g. accommodating for German localisation can be difficult.

Yep. Real localisation is too expensive, English-labelled buttons will get you shouted at for being noninclusive (even though, speaking as an immigrant, a labelled button that I can translate with a browser plugin is much nicer than an inscrutable icon), so everyone is in this pit of awfulness.

> Hamburgers and Hieroglyphs!

Hieroglyphs sums it up so nicely. Lol. I'll also add hidden, context sensitive options to that list. I like having options that are disabled (aka greyed out) if they're unusable because at least I can see there's a possibility to do something if I get conditions right. Instead, modern designs will hide those options and, if you don't know the magic conditions needed to expose them, you'll never see them.

An example of this is Ubiquiti with their Unifi stuff. If you go to manage switch ports, the page they give for that doesn't have an option to "Select All" ports. You need to select at least one port first, and then the "Select All" option magically appears. So not only is it hidden, it gets the context wrong. Think of having it as a disabled checkbox. Everyone would immediately realize the context is wrong because having the "Select All" checkbox disabled when no ports are selected would be obviously dumb.

I think the biggest opponent to what you're advocating are new users, they are so easily intimidated by too many things on the screen. These are the people that dominate focus groups and so designers seem to have wrapped themselves around the axle over this one (terrible) rule.

Reply on news.ycombinator.com