[tinus_hn]

A big part of the problem is people just not following the guidelines. If you have a toolbar with buttons that have labels, it’s not going to fit. But if you’re following the guidelines, you don’t have labels and it fits.

If you have a list with a refresh button on the bottom you have to scroll to see that button on a small screen. But if you use the standard pull to refresh control, you don’t even need the button.

If you use these smart hamburger menu overlay or scroll controls, they look bad on untested devices. Don’t use hamburger menus.

Most of the screenshots in this article are from iOS apps that show Google Material Design. It’s not too surprising this doesn’t work properly on Apple devices, the design doesn’t fit and you can’t implement it using the toolkit Apple designed, built and tested to work on all their devices.

Edit:

By the way you don’t even need to get a tiny phone to test this because most of the problems also show up when you increase the operating system font size which you’re also supposed to test.

[tyfon]

The custom buttons without labels are a pet peeve of mine actually. I can never guess what the buttons do when they only have pictures and each app use their own icon set.

There are some apps that use standard buttons that I recognize but far too many want to be fancy and roll their own making the app practically unusable unless you guess correct or press all buttons to see what they do.

But you are correct in that if everyone followed the guidelines, used the standard UI elements and images etc it would be much better. I could even forgo button labels if that happens :)

[tinus_hn]

But if you consider the app in the example, the ‘Globe’ carrier app, you’ll almost immediately see that the problem is that it is a confusing navigational spaghetti that is designed to force users to explore an app littered with ‘promotional offers’.

Why else would you need a special ‘discover these precious diamonds’ button in the toolbar, with the useful paths hidden in the hamburger menu and then patched over with parallel navigation from the ‘quick action’ buttons on the ‘dashboard’ (of which half is dedicated to ‘Offers & Promos’ and ‘Lifestyle’)

It’s almost as if the app has a fixed position ad that floats over half the screen and the article is complaining the useful information is so hard to see because they didn’t test on small iPhones.

[Nextgrid]

The main problem here isn’t that apps/services don’t follow the guidelines per-se but that more and more software is designed not to solve a particular problem efficiently and get paid honest money for that effort but to waste as much of the user’s time as possible showing them “offers”. The industry calls this “engagement” and a large chunk of people’s salaries and careers (including mine at the beginning) is based on that.

[tinus_hn]

This is kind of kicking an open door but the guideline explicitly is to design your app ‘to solve a particular problem efficiently’

[ballenf]

Problem: our customers don’t get exposed to our special offers often enough but they do spend time checking their bills.

Let’s stop sending paper bills because ads on there are too easy to ignore and make a labyrinthine app where the bill can be eventually accessed if users know the menu cheat code which will change regularly.

Did the guidelines mean you should solve a problem of the users or the company?

[Nextgrid]

The problem is why is that company in the business of "special offers"? The job of the telecoms company should be to provide reliable phone/internet service and otherwise disappear in the shadows. There should be no reason to "engage" with them other than paying your bill or changing some settings, just like there's no reason to "engage" with your power, water company or trash collection company.

[mnahkies]

For software that you only occasionally use custom icons with no labeling is a real productivity killer.

It's so much worse on mobile without tooltips as well, maybe we need to standardise a long press giving a description or something similar

[frosted-flakes]

Android already has that standard. Long press almost always brings up a tooltip.

[mnahkies]

I guess much like aria attributes it varies based on the quality of the product/motivation of the business.

I just tried one of my banking apps and a Reddit client and found neither provided tooltips - perhaps they thought those particular icons are too self explanatory or perhaps they didn't bother/used a cross platform tech that didn't make it easy.

Actually even on Google maps I don't seem to get tooltips for the fab icons for center map / directions.

I do remember this being a thing but it feels like it's fallen out of fashion.

Pixel 3a / android 11

[bartvk]

You say "even Google Maps", and something surprised me when I explored their SDK. So I don't know about Android, but the Google Maps SDK on iOS does not use the iOS widgets. They draw everything themselves. Integrating Google Maps is a pain, because standard layout techniques don't work (for example for labels on markers). The whole thing felt really ancient.

It doesn't surprise me in the least that it didn't work as expected.

[iudqnolq]

Writing a map view is like writing a game, you have no choice but to draw everything yourself if you want decent performance.

[chrismorgan]

On Android, by convention you can long-press icon-only toolbar buttons and the label will show as a tooltip. Non-native apps (fuzzy definition) lack this far too often, but it’s always worth trying. Not sure if iOS has something like this.

[tyfon]

Yeah I used to be on android, I had less issues there. This is my first iPhone (version 11) and I'm not sure if I will keep with apple. The tracking of google is bothering me big time though so I might just accept a worse user experience to avoid that.

[tinus_hn]

What is the advantage of this? If you can long press a toolbar button to get a label that states what the button is for, it’s easier to just tap the button and see what it is for.

[jkaplowitz]

What if you're not sure if you want to trigger the effect of the button?

[e_proxus]

Unless I’m missing something we’re talking about a tab bar? The worst thing that can happen is that you switch to that tab. Switching tabs should never be destructive.

[chrismorgan]

Toolbar, not tab bar. You will regularly get mutating actions there, though any mutating actions should either prompt or be undoable.

[thegeomaster]

I have to pile on the rant - OK, maybe the screen real estate is precious and you don't have space for buttons - but allow me to somehow discover what they do!

In desktop applications, you can over over a toolbar button and you get the label underneath. Why can't I long press a button in a mobile app and get a toast that says what it does? (I see the sibling says this should work, but I don't remember the last time I wasn't disappointed by trying this and failing.) You're making me miss the useless-90%-of-the-time question mark button at the top of every window in Windows!

[gregoriol]

Hover is quick and natural on desktop, but why would you want to long press a tab bar button on mobile? That's long and unnatural. Just press it (quick and natural) and see what it does!

[spaetzleesser]

“Just press it (quick and natural) and see what it does!”

And if it deletes something you wanted to keep you have learned a valuable and lasting lesson :)

[mnahkies]

Hmm I wonder if this button sells all my shares at a steep loss, guess there's only one way to find out

[gregoriol]

If a button does that kind of critical action, it better have a better and much more visible explanation + confirmation than just a hidden hover tooltip

[tinus_hn]

At least it’s supposed to be red

[m-p-3]

Some Android Material Design guidelines (which are often not followed..) specifies that you should be able to press-hold a button and have a popup label shows up to describe its function.

I don't remember exactly where I've seen it, but for example in Android you can press-hold some buttons without labels and you see a toaster-style popup indicating its function.

[homero]

Ob Android, long holding a button usually tells you what it does

[sangnoir]

> Most of the screenshots in this article are from iOS apps that show Google Material Design. It’s not too surprising this doesn’t work properly on Apple devices[...]

I can't help but feel a bit of schadenfreude after visiting many websites clearly designed on - and for - Apple devices. Those gossamer-thin font weights are unreadable on anything else.

Also unrelated, amazing how the tables turn: I remember back in the day when small iPhones where considered to be "the ideal phone size" but the technorati, there even was a doctored graphic to go with it that showed how a thumb would reach the very top of an iPhone screen. It was doctored because the phones were not to scale, in favor of the iPhone - and this was before Apple had a larger phone.

[faitswulff]

I would find this a more compelling argument if some of the apps in question weren’t from Apple themselves (Apple Shortcuts, Apple TV). If Apple can’t get it right, then how can we expect anyone else to?

[tinus_hn]

The Apple TV example looks a bit disingenuous, the huge black space normally holds an image promoting one of the shows. That’s why it has so much space. I don’t know why in his situation the header is empty but that has nothing to do with layout on small screens. You could complain the promotional image is too large but it’s really obvious you can scroll down to reveal the rest of the content and I don’t think anyone is contesting the conclusion that yes, a small screen fits less content without scrolling.

The Apple Shortcuts (which by the way is an acquired app that was not originally designed by Apple) problem indeed is a bug in the way the sheet works, probably because of the custom keyboard like icon picker at the bottom, which is really poorly designed anyway. If you have an iOS device, here’s a riddle:

If your device has a larger screen than the one in the article and you try to recreate it (on ‘My shortcuts’ navigate back, then tap the add folder button), you can choose from a larger set of icons. Someone with an even larger device than yours would see a palette with even more icons. But on your device you can get to these icons as well, try to find out how!

[djrogers]

> But on your device you can get to these icons as well, try to find out how!

Uhh, I scrolled just like the emoji keyboard (which every iPhone user has figure out) and it worked? There are also partial icons at the edge hinting of more to the right. This wasn’t/isn’t exactly hidden.

[tinus_hn]

To me it was completely non obvious; I know that there are much more emoji than shown in the first view, there’s category buttons that suggest there are more and the icons are layed out in such a way that most of the time you see half of an icon on the right, which suggests there’s more to find.

For this folder design where for the icon choice (which appears rather superfluous by the way) I have no idea how much icons there are supposed to be in the grab bag the developers provided, there’s no categories and they are layed out as a vertically scrolling list with icons neatly arranged flush against the right edge.

[e_proxus]

Completely agree. If you change the category it doesn’t even scroll to the new icons, it just instantly replaces the existing ones making it appear as if those are the only ones existing. It’s only if you actually drag your finger over the icons that you get any indication there’s more.

It’s even worse, tapping a category brings you to the first icons in that category. There’s no way to find the default set (which seems to be somewhere in the middle of “objects” because that’s where the folder icon is).

And there’s a bug too (at least on my 12 Pro). When you scroll past the category border the category button jumps back and forth between the two categories as if it can’t decide which category you’re viewing right now.

The whole icon picker is very non-standard and feels very un-Apple.

[valuearb]

Let’s not get me started on tiny tap areas. Virtually every graphic designer I have ever worked with is ignorant of Apples 44 by 44 point recommendation.

They just want their designs to look good, but give no though to how they feel, especially when trying to use them one handed or with disabilities.

[bartvk]

What's funny is that Apple themselves are not helping.

If I use the following SwiftUI code, I get a button that's 24.5 x 22.5.

    Button(action: {}, label: {
        Image(systemName: "magnifyingglass")
            .imageScale(.large)
    })

The .imageScale modifier is set to the largest! That button is abysmally small. You can use padding of course, and that's what I do. I suspect I'm missing something, but I can't see a reason why .large gives me an unusably small image.

[ryandrake]

Yep, too many UX professionals spend 95% of their energy on the look and maybe 5% on the feel.

[closeparen]

In my experience, designers work in Figma. Then they play with and give feedback on what the mobile engineers actually built, same as the rest of us. Their critiques become backlog items and it is ultimately up to the PM which of them to prioritize and whether they are launch blockers. They may very well be fanatical about feel, but at the end of the day there is a long line of people who want mobile engineers to change things and they will not always be able to skip to the front. With visuals, on the other hand, they provide the engineers with detailed layouts and assets, so their intentions are almost always carried out precisely.

[Sidetalker]

This sounds right on in my experience, though I would say a truly good UX designer should know the usability of what they're designing in Figma and understand those limitations enough to work with a developer during the design process if needed to refine a non-standard action/animation.

[notSupplied]

I agree with this. I think design has a serious principle-agent problem.

A beautiful design will live forever on your personal portfolio, but no one can directly experience usability there. So designers are fighting competing incentives to do what’s right for this product, and what’s right for their professional image. I think this is partly the cause for trend toward stylish-but-less-useable.

[ghaff]

Furthermore, many designers--at least those developing mobile apps etc.--are young people with good eyesight. There's also a general fashion element but I suspect this is one factor in the popularity of thin, small fonts today. (TBF, there's also a general trend towards simpler logos and the like which render well on mobile.)

[valuearb]

Don’t get me started on font sizes. I’m older now and theee designs hurt my eyes.

And on iOS if you use the system font and standard styles, text automatically adjusts to accessibility settings. So I always suggest that but every designer wants to “make their mark” with custom fonts that either font work with accessibility or require a bunch of extra coding that the product owner never gives time for.

[ryandrake]

That's the sad thing! If the developer would just stop coding for a minute, and use standard controls and fonts, you get a lot for free. Including proper resizing, accessibility, all the niceties that iOS provides built-in. The more you try to customize, write your own controls, and fight the standard tools; the more clever you try to be, the fewer and fewer things "just work".

[cageface]

Apple themselves mess this up. Try dragging the progress bar on Apple music to skip forward in a song, for example.

[hanniabu]

> If you use these smart hamburger menu overlay or scroll controls, they look bad on untested devices. Don’t use hamburger menus.

What is a good alternative to a hamburger menu? I can't think of anything that wouldn't have the similar issues.

[tinus_hn]

The alternative to hamburger menus is to design your app navigation so you don’t need them.

Use the settings app for settings, so they don’t clutter your app. Have the user tap an ‘account’ control to do account related things like logout or change passwords.

The problem is (oversimplified) these developers start with 20 things they want to show, and then they pick 4 things they can cram in the toolbar and the rest is tucked away in the hamburger menu. It’s a lot easier of course but it also looks like the lazy alternative to thoughtful design.

[atomicUpdate]

> Use the settings app for settings, so they don’t clutter your app.

I’m glad most app don’t do this, except for where they have to for notifications, etc. It’s really unintuitive to go to another app to adjust settings for an app you’re already in.

[SiVal]

Exactly. Oh, you want to do something right here? Well, we could give you a menu right here of all the things that are relevant to this exact context--which was, you recall, the original "discoverability" advantage that was claimed to make a GUI better than a CLI. But, no, that would mean a hamburger menu, which "they say" is bad.

Instead, superior designers will show very little and explain nothing so the screen can look fabulous. If Apple has taught us anything, it is that fashionable appearance matters most. Users will just have to figure out that they need to leave this app, go open another app, navigate a few screens into it, see if there is an entry for this app, enter it, and scroll around hoping to see something in the master list that looks like it might be relevant to what you needed in the context that other app was in.

[e_proxus]

You can actually hotlink directly to the Settings page for your app (e.g. Slack does this in their settings).

[hanniabu]

That would require some type of.....menu gasp

[silvestrov]

> you [...] have labels, it’s not going to fit

or you have to localize in German.

Words don't translate 1:1 into another language. Sometimes labels are much longer in other languages.

[snarkyturtle]

Icons with labels are best practice for accessibility.

[tinus_hn]

No, for accessibility icons have titles that are not on screen yet are read out by the screen reader.

[frosted-flakes]

Accessibility is not just for people who use screen readers. It's for everyone, including you and me.

[SebastianKra]

Out of those apps, only 2-3 use Material Design. MD seems to attract a lot of poor copies, misunderstandings and projects that pay lip service to it, but have only superficial similarities.

[brundolf]

With how stringent Apple's review process and focus on user experience are, I'm surprised these apps got approved for the App Store at all in this state

[bajsejohannes]

I'm curious if even Apple follow the guidelines. It has been way too long since I read them, but I remember the minimum button size being quite large. A while ago, the pull up menu (with camera/light/volume/airplane mode/etc) was redesigned. As part of that the play/pause/skip buttons became so small that my iPhone SE frequently does something other than my intention.

[rvba]

> If you have a toolbar with buttons that have labels, it’s not going to fit. But if you’re following the guidelines, you don’t have labels and it fits.

But this doesnt make any sense. Often you need guidelines.

Typical Apple problem.

[baxtr]

That’s the core problem. Is there a specialized service you can submit your app to to test for guideline adherence?

[simias]

You make good points but IMO that's an Apple problem first and foremost, not an application designer problem. If an application doesn't follow the guidelines and breaks on some of the phones supported by the app store, then Apple should tell the application makers to fix it lest the app be removed.

Last week I defended the move by Apple to remove that "crab house" app because they're the custodians of their walled garden and get to enforce arbitrary standards of quality and safety on the behalf of their customers who bought into the ecosystem. With this same mindset I can only blame Apple here for failing to maintain the quality standard on some of their phone lineup.

So basically I'd frame this as "Apple failing to enforce the guidelines" instead.

[dmckeon]

Alternately, Apple could choose a different and non-binary way of curating apps. An app store with 4 or 5 scales of 0 to 9 scores: UX, privacy, cost/benefit, user reviews, etc. would be a lot more useful to me than a store with x00,000 apps all in an undifferentiated pile.

Even trying to find specific app from a specific vendor, while being sure to not get some lookalike evil clone from J. Random Hacker can be challenging.

[httpsterio]

Why? What if you're developing some app where you want to divert from the guidelines, you should be able to do that. Guidelines are just that, they're not rules.

Apps should follow some basic accessibility rules and be functional, but yij can in earnest say that you think that all games for example should follow the Apple design guidelines, can you?

[simias]

If not following the guidelines makes your app hard to use or glitchy on some of Apple's lineup, I don't see why you wouldn't expect Apple to reject the app. This reflect poorly on Apple because it makes it look that some of their devices are 2nd class citizens within their ecosystem.

They should follow the guidelines when not doing so causes usability issues. If your games is usable on all devices then obviously there's no problem.

[tinus_hn]

There’s a point there but it is a difficult balancing act. Some of the largest third party apps, like Google Maps, feature the Google Material Design that is alien on iOS. There is no way to force Google to use an iOS design. Would it be a smart move from Apple to ban Google Maps from the iPhone?