13 ms·
iOS Menu
- abalaji 8y agoJust want to say that this quite an amazing solution to a problem that has plagued pro apps for years.
- miguelrochefort 8y agoI don't see how it's significantly different from the ubiquitous UIPopoverViewController: https://developer.apple.com/design/human-interface-guidelines/ios/views/popovers/ https://developer.apple.com/design/human-interface-guideline...
- panic 8y agoThe follow-up article goes into detail about some of the differences: https://codea.io/blog/detailing-the-ios-menu/ https://codea.io/blog/detailing-the-ios-menu/
- interpol_p 8y agoIt's different from popover controllers. I used to use these in Codea quite a lot, but they are pretty heavy-weight. I created the menu because there are a lot of subtle details that aren't really obvious until you use it often. For example, you can't initiate a drag gesture into a popover controller easily — it's a full view controller presentation and will kill your gesture as it presents. So with the menu, for example, you can touch the menu item and drag directly to the item you want to select. Same goes for dismissal — you can't interact with background content until you tap to dismiss. Even Procreate, a well known painting app, uses their own custom popover controllers for this reason.
- jhammer 8y agoVery nicely done. Here is part 2: https://codea.io/blog/detailing-the-ios-menu/ https://codea.io/blog/detailing-the-ios-menu/
- hmexx 8y agoit just needs a little refinement, where the menu contents shift to the left/right, and out of the way of your finger when you swipe down through them.
- ryanbertrand 8y agoI don’t think they were expecting the traffic boost. Videos don’t play for me making it hard to visualize. Anyone else?
- bredren 8y agoWhole site is down for me. Here's the text: https://web.archive.org/web/20190105061617/https://codea.io/blog/the-ios-menu/ https://web.archive.org/web/20190105061617/https://codea.io/...
- interpol_p 8y agoI certainly wasn't expecting the traffic, sorry about the page going down.
- agildehaus 8y agoSince the website is down: https://bgr.com/2019/01/03/mac-vs-ipad-pro-developer-creates-macos-style-menu-bar-for-ios-app/ https://bgr.com/2019/01/03/mac-vs-ipad-pro-developer-creates...
- chrismorgan 8y ago> The result is a beautiful menu bar on an iPhone app […] Is that really what it looks like? The first screenshot that follows is genuinely the ugliest UI screenshot that I have seen in months (and the two that follow are only slightly better). It is just so messy.
- theon144 8y agoMaybe a bit orthogonal to your point, but I feel that oftentimes "usable" trumps "pretty".
- noitsnot 8y agoI agree, but that's contradictory to the quote. > The result is a beautiful menu bar on an iPhone app
- interpol_p 8y agoThat's harsh, I spent quite a bit of time on the appearance and the feel of the UI. But I can get that it's not for everyone. Edit: perhaps if you see it in context you might judge it differently? Here's the menu being used in the new version of Codea https://twitter.com/twolivesleft/status/1074989429817626625 https://twitter.com/twolivesleft/status/1074989429817626625 Here is the menu being displayed in our two apps, Shade and Codea (though it's not being used much in this video) https://twitter.com/twolivesleft/status/1078541508742045696 https://twitter.com/twolivesleft/status/1078541508742045696 And a few more in-context uses of this menu https://twitter.com/twolivesleft/status/1047882889046589441 https://twitter.com/twolivesleft/status/1047882889046589441 https://twitter.com/twolivesleft/status/1040965832036167680 https://twitter.com/twolivesleft/status/1040965832036167680 https://twitter.com/twolivesleft/status/1040898996623990784 https://twitter.com/twolivesleft/status/1040898996623990784
- walterbell 8y agoOpen-source code is here: https://github.com/TwoLivesLeft/Menu/ https://github.com/TwoLivesLeft/Menu/
- happybuy 8y agoUI experiments like this show that what a lot of pro users want for iOS on the iPad is for it to become a Mac. Maybe a Mac with a touch UI mode and a more modern architecture, that is cleaner and has a more restrictive security model - but still a Mac. They'll say they don't for purity reasons, but their desires show otherwise: - Add ways to show multiple apps on screen at once (e.g. windows – but because they don't overlap, oh except for slide-over items, then it's new and therefore they don't have to admit they are asking for windows) - Add a hardware keyboard - Make the hardware case with keyboard into a laptop form factor - Add a touchpad - Add a way to drag and drop items between on screen apps - Add keyboard shortcuts - Add the Finder, oh sorry, I mean Files.app - Add a menu bar for Pro apps - Next they'll ask for a menu item to appear onscreen when an item is force touched; e.g. right click contextual menus Congratulations, you've invented a MacBook. At least you'll feel good about yourself as you can now think you're using "the future of computing" instead of simply an evolved version of what everyone was using a decade ago. This is a pessimistic but IMO true evaluation of how techies who are proud of themselves for using an iPad for 'real computing' self evaluate the decision.
- bunnycorn 8y agoThere's no touchpad, and the iPad is still very different from the Mac in ways that are more significant than your list of details. For example, yes, there's a finder, but the places where you put files are 100% abstract, can be a hard drive, can be a SFTP, can be a cloud service that when offline, saves to the local storage and then uploads, can be a lazy extracting zip file, etc. The most significant way that iOS differs from macOS (or Windows 10 or whatever) is that in iOS every action is accounted for and proper permission is enforced.
- happybuy 8y ago> There's no touchpad Yet... with many of the Apple technorati asking for one and saying it's a necessary next step. > in iOS every action is accounted for and proper permission is enforced Yes, so this is the Mac with a more restrictive security model as referenced in the first comment. Apple is moving the macOS towards this with the Sandbox and how app extensions are structured.
- username3 8y agoAndroid has menus.
- miguelrochefort 8y agoiOS has menus. https://developer.apple.com/design/human-interface-guidelines/ios/views/popovers/ https://developer.apple.com/design/human-interface-guideline...
- interpol_p 8y agoHey everyone. I wrote this menu system for my app Codea (and upcoming shader editor, Shade). The traffic from here has killed my site, so I've posted some tweets showing it in action and am happy to talk about how it works / what purpose it serves. I'll post the details and media in this twitter thread if anyone is interested https://twitter.com/twolivesleft/status/1081485321588531201 https://twitter.com/twolivesleft/status/1081485321588531201
- subfay 8y agoGet a CDN from Cloudflare, takes 5min + 5min distribution and makes many people happy.
- interpol_p 8y agoThank you for the advice, doing it now
- subfay 8y agoNice and looking fwd!
- mch82 8y agoEdit menus in iOS feel clunky, especially with overflow options, but the contextual relevance feels right. Did you experiment with improving on the Edit menus on your way to choosing a custom solution? Edit menus: https://developer.apple.com/design/human-interface-guidelines/ios/controls/edit-menus/ https://developer.apple.com/design/human-interface-guideline...
- interpol_p 8y agoYeah the overflow really kills them. But they are really well known by iOS users so it's a big step to not have them in a text editor. I haven't tried writing a replacement, but these new menus came more from a need for non-contextual features. Access to code tabs, dependencies, documentation, and assets being the main ones. The contextual features in the code editor were often handled by the keyboard accessory in Codea (the bar that sits above the on-screen keyboard, or at the bottom of the screen if a hardware keyboard is attached). The new "Edit" menu also gave me an opportunity to make contextual features (comment selection, indent code, etc) more explicit and less hidden.
- subfay 8y agoPage doesn't load... Edit: Just saw in another comment that the website has problems for 2h. How can a submission from a for 2h down server be on number one at HN? Why the downvote, I made a valid point, just reply and tell what I got wrong.
- KineticLensman 8y agoNot all submissions to HN are made by the people who made or host the referenced website- it's quite common to see a reply along the lines of "Hi I'm the author of X, really pleased to see it on HN". If someone isn't expecting a lot of traffic, it's not surprising that sometimes their sites are overwhelmed. Disclaimer: I don't know the affiliation (if any) between jarenstein (the poster here) and codea.io (the website that went down), and nor am I checking.
- bdcravens 8y agohttps://news.ycombinator.com/item?id=18830267#18830773 https://news.ycombinator.com/item?id=18830267#18830773 from the author suggests they are different.
- AbuAssar 8y agosince the site is down, here are the videos: https://twitter.com/twolivesleft https://twitter.com/twolivesleft
- meggar 8y ago3D Touch could be an alternative to the menu bar.
- madeofpalk 8y ago3D Touch is synonymous with right click - open a secondary _contextual menu_ for the thing you're interacting with.
- bdcravens 8y agoExcept that a current iPhone, the XR, doesn't have 3D Touch.
- jayd16 8y agoIt's just a long press accelerator anyway. They could fall back to that.
- steve_taylor 8y agoExcellent work and really looking forward to Shade and Codea 3. Is there a public beta of Codea 3 yet?
- jordansmithnz 8y agoThis looks really nice, to the point that it almost looks like a 'missing' iOS UI component. A few thoughts: - It could be nice to add 'bottom' mode support, where the menu appears above the menu indicator. At the moment the menu requires users to reach to the top of the screen, but the one-touch interaction could become even more accessible if the menu was at the bottom of the screen. - There's one point of detail that is a really, really nice solution for a problem that lots of apps have: "What I ended up doing was choosing a light or dark tint for the menu title text and buttons based on the area of overlap with the underlying view, and the darkness of that view". The result looks fantastic. Hey Apple devs, if you're reading this... you should add system level support for this! i.e. dynamic contextual blur effects, I guess with some kind of callback or content effect to adjust content color as the underlying blur type changes. - Although there's a lot of attention to detail already, the one-touch edge drag seems a little jerky to me. I'm not sure whether it's just the video, or the use of a Timer to accomplish this (I'd suggest a CADisplayLink, especially for supporting faster refresh rates on new iPads), or because every intermediate item immediately highlights as you scroll through - but perhaps disabling highlighting/selection during this auto-scroll interaction would help. Overall it looks really great - thanks to the author for sharing this!
- timpark 8y agoAnother thing about bottom support... It seems like one reason the menu usage is divided into two taps is that your finger would be partially obscuring the items. If it's on the bottom, you can tap the title, hold, then drag to the menuitem with a clear view of the items.
- crazygringo 8y ago> I knew what I wanted from the beginning: a rounded, translucent menu with a drop shadow. Minor nit, but I hate this effect because it's not how lighting works. As the author discovers when it's implemented: "But what if your view casts a drop shadow? Yeah, you get a nice blurred shadow. Gross." There's no such thing as any physical material which lets light through... and magically casts a shadow surrounding it but not behind it. It's uncanny-valley wrongness. The way translucency is handled in macOS is bizarre. For example, the Finder side panel lets a small amount of your desktop image through... even when there's another window in the way. Which makes zero sense physically and hurts my brain. I don't mind translucency if it's not overused... but I mind it when it doesn't obey physics. You can't unsee it.
- droopyEyelids 8y agoImagine sunshine from an oblique angle on matte glass. The matte surface defuses the light, making the translucent object brighter than the background.
- crazygringo 8y agoYes, that's exactly what the original article called "gross" because it's casting a shadow behind, as real physics would do (because the translucent object is brighter and reflecting light back). The author wants to have a shadow around the edges but somehow not a shadow behind the object itself, which is what doesn't make sense.
- ianai 8y agoI like that sort of thing because otherwise I never see my background image. Being able to see what’s behind a window through correct transparency does have usability features, though.
- seltzered_ 8y agoFunny, a couple years ago I thought a lot about pulling off visualeffectviews with rounded edges when making thimblemac.com, https://stackoverflow.com/questions/26518520/how-to-make-a-smooth-rounded-volume-like-os-x-window-with-nsvisualeffectview/28256073#28256073 https://stackoverflow.com/questions/26518520/how-to-make-a-s... goes a bit into the various os-version-specific ways people have done this
- pkamb 8y agoThe Microsoft "ribbon" got a lot of flack circa 2007, but it was essentially a menu / menu bar but with icons and large tap targets. Something like that would be far more appropriate for iOS than just aping the Mac text menu. They should honestly bring icons/targets to the Mac menu as well.
- Yhippa 8y agoIn retrospect I wonder if the ribbon got flack because it was "different" and "weird". The best thing about it is that you don't have to guess at what buttons do which is a major problem I have with mobile, desktop, and web applications.
- addicted 8y agoThe original version of the Ribbon had no way for it to be minimized, and did not display the keyboard shortcuts that could do the same job. I’m not sure about this, but at the time I believe you could not use the Alt key to access any menu item the way you could before and still can now (IOW, it also killed the menu bar completely). At a time when laptop sales were eclipsing desktop sales, using up all that valuable vertical real estate for the menu, combined with seriously gimping the power user experience, and also definitely, suddenly changing the experience, it was unsurprising it received a lot of flack. Later versions of the ribbon showed how powerful the concept was, but it may have been a better idea for MS to have introduced it with their non power user apps first (I.e. Not Office, or at least, not Excel) until the kinks were worked out, and they may have avoided a lot of the initial flack. Personally, as someone whose primary computer was a desktop with a massive screen, and was already adept with all the KB shortcuts, I was always a fan of the ribbon