10 ms·
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
by tinus_hn 6y ago
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 6y agoThe 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 :)
- chrismorgan 6y agoOn 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 6y agoYeah 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 6y agoWhat 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 6y agoWhat if you're not sure if you want to trigger the effect of the button?
- e_proxus 6y agoUnless 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 6y agoToolbar, not tab bar. You will regularly get mutating actions there, though any mutating actions should either prompt or be undoable.
- thegeomaster 6y agoI 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 6y agoHover 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 6y ago“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 6y agoHmm I wonder if this button sells all my shares at a steep loss, guess there's only one way to find out
- gregoriol 6y agoIf 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 6y agoAt least it’s supposed to be red
- tinus_hn 6y agoBut 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 6y agoThe 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 6y agoThis is kind of kicking an open door but the guideline explicitly is to design your app ‘to solve a particular problem efficiently’
- ballenf 6y agoProblem: 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?
- 6y ago
- mnahkies 6y agoFor 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 6y agoAndroid already has that standard. Long press almost always brings up a tooltip.
- mnahkies 6y agoI 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 6y agoYou 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 6y agoWriting a map view is like writing a game, you have no choice but to draw everything yourself if you want decent performance.
- homero 6y agoOb Android, long holding a button usually tells you what it does
- m-p-3 6y agoSome 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.
- simias 6y agoYou 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.
- httpsterio 6y agoWhy? 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 6y agoIf 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 6y agoThere’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?
- dmckeon 6y ago
- faitswulff 6y agoI 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 6y agoThe 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 6y ago> 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 6y agoTo 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.
- hanniabu 6y ago> 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 6y agoThe 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.
- deleted 6y ago[deleted]
- atomicUpdate 6y ago> 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 6y agoExactly. 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.
- snarkyturtle 6y agoIcons with labels are best practice for accessibility.
- tinus_hn 6y agoNo, for accessibility icons have titles that are not on screen yet are read out by the screen reader.
- frosted-flakes 6y agoAccessibility is not just for people who use screen readers. It's for everyone, including you and me.
- bajsejohannes 6y agoI'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.
- valuearb 6y agoLet’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.
- ryandrake 6y agoYep, too many UX professionals spend 95% of their energy on the look and maybe 5% on the feel.
- notSupplied 6y agoI 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 6y agoFurthermore, 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 6y agoDon’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.
- baxtr 6y agoThat’s the core problem. Is there a specialized service you can submit your app to to test for guideline adherence?
- silvestrov 6y ago> 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.
- brundolf 6y agoWith 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
- sangnoir 6y ago> 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.
- SebastianKra 6y agoOut 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.
- rvba 6y ago> 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.