
iOS Menu - jarenstein
https://codea.io/blog/the-ios-menu/
======
happybuy
UI 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.

~~~
fredsted
I feel that what Apple is doing with the iPad is trying to create a whole new
separate paradigm of computing with glass slabs, without re-using the good
ideas from the Mac. Whether it's pride or something else, they simply can't
make themselves do a dual-use operating system (e.g. support for overlapping
windows, mouse, file management - while still having good support for touch),
so they are forced to come up with totally new ways of interacting with
devices. While that's pretty interesting and totally fine, there is also a
reason why modern MacBooks (and computers in general) are the way they are, so
all the solutions are second-rate, and it's why professional users will always
feel limited when using the iPad for things that are not just watching YouTube
videos.

~~~
katbyte
I would love a MacBook with touch, and even better a MacBook that transforms
into an iPad.

~~~
zozbot123
There are plenty of PC's with touchscreens and loosely MacBook-like design
aesthetics. Some of them can even fold over and let you use them very much
like a tablet (with the keyboard out of the way). (Unfortunately, OS support
for such "hybrid" devices is lacking. But I think Linux will get there shortly
- you can already tell that GTK3 was built for touch use, not just for the
mouse.)

~~~
voidmain0001
I don't agree that touch is lacking. I use a Samsung Galaxy Book Win10 device
which has a detachable keyboard and touch screen and I think it is great.
Granted, it is far heavier than a tablet, but when I need a terminal or
console to get some scripting or programming done it is ready as I don't have
to use an on screen keyboard to get the pipe or carat keys. By removing the
keyboard the tablet has an acceptable weight. Plus it naively supports and
comes with the S Pen for on screen drawing. The touch and drawing capabilities
in W10 are fluid and always accurate for me. I enjoy having a desktop OS which
brings computing without caveats in such a portable format. Kudos to Microsoft
for continuously advancing Windows.

~~~
zozbot123
> I don't agree that touch is lacking.

"You don't agree", but people are saying as much in this thread. See the top
comments about how the Surface touch experience sucks in comparison with the
iPad (and this somehow proves that a "touch-first" device is inherently
superior).

There is no _technical_ reason for this; the reason why touch interaction
sucks on both Win 10 and current Linux desktop (yes, including GNOME 3) is
that we've only _just_ begun caring about it, as hybrid devices have come out
(and, to take a slightly different angle, people have started caring more
about having a real Linux desktop on mobile, largely touch-driven devices--
see the postmarketOS effort).

I'm confident that Linux desktops will be able to reach feature parity with
the touch UX of both AOSP and ChromiumOS with relative ease and in a short
period of time (provided that GPU acceleration works properly, of course - the
aforementioned OS's do rely on it). And iOS is not far beyond that.

------
crazygringo
> _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
Imagine sunshine from an oblique angle on matte glass. The matte surface
defuses the light, making the translucent object brighter than the background.

~~~
crazygringo
Yes, 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.

------
interpol_p
Hey 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)

~~~
mch82
Great work on Codea! I think you’re pushing the boundaries on making an iPad a
standalone professional tool.

Any chance Codea support for other programming languages is on the horizon?

What do you think about graphical languages like Blockly, Blueprints,
Workflow, and WebGME?

\- Blockly:
[https://developers.google.com/blockly/](https://developers.google.com/blockly/)

\- Blueprints: [https://docs.unrealengine.com/en-
us/Engine/Blueprints](https://docs.unrealengine.com/en-us/Engine/Blueprints)

\- Workflow: [https://www.workflow.is/](https://www.workflow.is/)

\- WebGME: [https://webgme.org/](https://webgme.org/)

~~~
interpol_p
Thank you!

I've been working on a new app called Shade that's a visual shader editor.
It's really made me fall in love with the node graph representation of logic.

[https://twitter.com/johntwolives/status/1081513719694159873/...](https://twitter.com/johntwolives/status/1081513719694159873/video/1)

I enjoy using Workflow (now Shortcuts). And I'm continuously impressed with
Blueprints.

I think there's still something emotionally different about writing code. Like
it hooks in to the part of your brain that deals with language in a way that
visual tools don't.

I don't think that makes it better, but it makes it feels different.

Whatever visual systems we experiment with, I hope to keep thinking about
writing and the feeling of writing when we build tools to solve logical
problems.

------
agildehaus
Since the website is down:

[https://bgr.com/2019/01/03/mac-vs-ipad-pro-developer-
creates...](https://bgr.com/2019/01/03/mac-vs-ipad-pro-developer-creates-
macos-style-menu-bar-for-ios-app/)

~~~
chrismorgan
> _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_.

~~~
interpol_p
That'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)

~~~
airstrike
First of all, fantastic work. Developers as passionate, brave and talented as
you are the ones who move this whole platform forward and eventually change
paradigms.

The other guy was unnecessarily harsh and offered zero constructive criticism,
so I'm left wondering what is it that he could have disliked so much. I think
if there's one thing that might strike as a bit jarring on those iPhone
screenshots it would be the light green tint. Why not gray or white? Menus are
at a lower hierarchy than the actual content and the use of color makes them
stand out too much based on everyone's years of experience with them

~~~
interpol_p
That's a good point. I use the tint because then the menu buttons match the
rest of the buttons. Each app (Shade, Codea) has a variation of that green
tint that goes all the way from the app icon to the web site (Codea.io).

I might experiment with what a completely neutral editor looks like.

------
walterbell
Open-source code is here:
[https://github.com/TwoLivesLeft/Menu/](https://github.com/TwoLivesLeft/Menu/)

------
jordansmithnz
This 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
Another 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.

------
abalaji
Just want to say that this quite an amazing solution to a problem that has
plagued pro apps for years.

~~~
miguelrochefort
I don't see how it's significantly different from the ubiquitous
UIPopoverViewController:

[https://developer.apple.com/design/human-interface-
guideline...](https://developer.apple.com/design/human-interface-
guidelines/ios/views/popovers/)

~~~
interpol_p
It'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
Very nicely done. Here is part 2: [https://codea.io/blog/detailing-the-ios-
menu/](https://codea.io/blog/detailing-the-ios-menu/)

~~~
hmexx
it 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.

------
pkamb
The 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
In 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
The 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

------
seltzered_
Funny, 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-s...](https://stackoverflow.com/questions/26518520/how-to-make-a-smooth-
rounded-volume-like-os-x-window-with-nsvisualeffectview/28256073#28256073)
goes a bit into the various os-version-specific ways people have done this

------
AbuAssar
since the site is down, here are the videos:

[https://twitter.com/twolivesleft](https://twitter.com/twolivesleft)

------
ryanbertrand
I don’t think they were expecting the traffic boost. Videos don’t play for me
making it hard to visualize. Anyone else?

~~~
bredren
Whole site is down for me. Here's the text:
[https://web.archive.org/web/20190105061617/https://codea.io/...](https://web.archive.org/web/20190105061617/https://codea.io/blog/the-
ios-menu/)

------
steve_taylor
Excellent work and really looking forward to Shade and Codea 3. Is there a
public beta of Codea 3 yet?

------
meggar
3D Touch could be an alternative to the menu bar.

~~~
bdcravens
Except that a current iPhone, the XR, doesn't have 3D Touch.

~~~
jayd16
It's just a long press accelerator anyway. They could fall back to that.

------
username3
Android has menus.

~~~
miguelrochefort
iOS has menus.

[https://developer.apple.com/design/human-interface-
guideline...](https://developer.apple.com/design/human-interface-
guidelines/ios/views/popovers/)

------
subfay
Page 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
Not 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
[https://news.ycombinator.com/item?id=18830267#18830773](https://news.ycombinator.com/item?id=18830267#18830773)
from the author suggests they are different.

