Look at this screenshot of MacPaint from the mid-1980s. Now look at this screenshot of a current version of Microsoft Excel for Mac. Finally, consider just how different the two applications actually are. The former is a 30-year-old black and white first party application for painting while the latter is a current and unabashedly third party application for creating spreadsheets. Yet despite having been created in very different decades for very different purposes by very different companies, these two very different applications still seem a part of the same thread. Anyone with experience in one could easily find some familiarity in the other, and while the creators of the Macintosh set out to build a truly consistent experience, there is only one significant piece of UX that these two mostly disparate applications share – the menu bar.
The lack of a menu bar in (most) touch applications is really what sets them apart from regular, mouse-based applications. It makes it virtually impossible to add more complex functionality without resorting to first-run onboarding experiences (terrible) or undiscoverable gestures (terrible). While menus would work just fine on devices with larger screens such as tablets and touch laptops – I use touch menus on my Surface Pro 4 all the time and they work flawlessly – the real estate they take up is too precious on smartphones.
If touch really wants to become a first-class citizen among the mouse and keyboard, developers need to let go of their fear of menus. Especially for more complex, productivity-oriented touch applications on tablets and touch laptops, menus are a perfectly fine UI element. Without them, touch applications will never catch up to their mouse counterparts.
I find it very difficult to use traditional menus on touch interfaces. Maybe my fingers are too big or my eyes too old. I’d be interested in seeing non-traditional approaches such as radial menus used more frequently.
Agreed. I’ve been a fan of radial/circular menus for a very long time, but you only see them in a few touch apps and in PC games that are already mouse/keyboard controlled. They are a perfect interface for a touch based system where your finger is the focal point and the menu blooms from where you touch. Touch, drag to the menu choice, and if there’s a submenu it pops up in another layer. Simple, effective, easy to learn, nearly instant muscle memory. Yet, no one is doing it.
All you describe would be a perfect fit for the Surface Dial, wouldn’t it?
Radial/circular menus are indeed a great fit with the Surface Dial, but they are not a good replacement for a regular menu for non-touch/mouse driven commands.
So if you write an app that will be used almost exclusively with touch: Radial menu
If you write a program that will be used almost exclusively with mouse/keyboard: Classical menu
Having a UI that adopts to the users input methods is quite hard and thus very uncommon
Edited 2018-04-20 09:14 UTC
I suppose that is what styluses were used for. To make up for the physical shortfalls in touch. I was given a HTC HD2 that ran WM 6.5 and that used menus that required a stylus because the icons and drop down menus were so small. Even my slim fingers could not operate with them effectively.
Then the iPhone made styluses uncool for a while.
The stylus is problematic in many of the same ways that a mouse is. You’ve got to hold it in your hand, and that means that many of the good things about a touch interface are unavailable to the user while they’re holding it. It’s a pain to pinch or zoom, or do multi-finger swipe gestures.
And then of course there are the problems that plague me personally. My surface pen or apple pencil are always missing. I had the same problem going back to my Newton. I always needed to buy a half dozen backups just to make sure I had one handy.
I guess I am oldschool or something, I just prefer mouse or pen input
Same here, touch is a terrible interface most of the time. Wonder if pre-mouse, keyboard-only users were thinking the same about mouse
Depends what you’re touching.
I’m a pre-mouse, keyboard-only user (or rather was one) and when i bought my first mouse (Microsoft, ball, serial, 650 DeutscheMark) i was really exited :-). Deep in the last millennium…
Was it really _that_ expensive? O_o We’ve come a long way, much better in every way optical mouse can be had for few €…
Yes, for DOS a mouse was a terrible interface most of the time.
Then Windows came, DOS-Games started to use mice, Dos-Programs started to use mice efficiently, Windows 95 came which made mice almost a requirement, etc.
Whenever a new interface paradigm comes adoption and usefulness take a very long time. There are also many attempts at new interface paradigms that simply fail.
Keyboard and mouse are the primary inputs and touch is a distant third.
Screen is the primary output, with sound/printers being supplemental.
CPU is the primary processor, with GPU being supplemental.
Sound/Printers don’t replace a screen.
GPU doesn’t replace CPU.
Touch doesn’t replace a mouse! (on a pc/laptop)
Perhaps I wouldn’t put it that way, Statcounter stats show that Android gets more web usage than Windows…
I could have worded that better indeed. Web usage on mobile is much more common in emerging markets than in Europe/US though.
Total: http://gs.statcounter.com/os-market-share
Europe: http://gs.statcounter.com/os-market-share/all/europe
USA: http://gs.statcounter.com/os-market-share/all/united-states-of-amer…
Asia: http://gs.statcounter.com/os-market-share/all/asia
Not all of Europe / “you forgot Poland!” …and what looks to be Bosnia and Herzegovina:
http://gs.statcounter.com/os-market-share#monthly-201804-201804-map
…though that’s arguably also emerging market countries (and where I live… )
It depends on the application. Touch is good for “consumption” while mouse is better for “work”
Maybe on most of current GUIs, but I don’t think it has to be that way… (touch could be awesome for graphics, video or sound editing for example …hm, now that I think about it, sound technician at “culture house” / artistic cafe concerts in my city uses a pro sound equipment built around touchscreen interaction)
It is hard to write a UI that adjusts to different input types. Having a UI that works decently with both keyboard, mouse and touch is often the middle ground that work-software settles for.
Now if you know that your audience is going to use touch, you will of course optimise the input entirely for touch and great things are possible. That is why apps for phones/tablets are often better optimized for the way the user works than apps for the Windows/Mac stores.
Aye, that pro sound system that I mentioned definitely seems to be quite nicely optimised around touch input; can be both powerful and compact (because there’s no need for all the physical dials, sliders, LEDs, and such – they are displayed only when needed)
They HAD a menu button in Android, but apparently that was too confusing for people. Better to remove it and have every app role their own menu system, and leave it up to end users to hunt for it.
The one on the second screenshot is not really a menu bar. They are tabs on an abomination in user interface design they call ‘ribbon’.
The menu bar is the one at the top of the screen (Apple Icon – Excel – File – View – etc.)
No, it is a regular menu bar. The ribbon is the thing below it that you can simply hide if you don’t want to see it (CTRL+F1)
Also, both that “abomination” and the actual menu bar in Office have a nice switch between mouse/touch so you can actually use them properly depending on your preference.
If you want to complain about missing menu’s and touch-unfriendliness, look at modern browsers, not Office.
I used both for years and am forced to use the ribbon on a daily basis. A menu bar is something entirely different from the ribbon.
Apart from the fact that it wastes a significant section of valuable screen real estate, it is never possible to structure the functionality of the application by topic in a clear and rememberable manner with the ribbon.
2 tips:
CTRL+F1 hides/shows the ribbon
Alt+Q (since Office 2016) lets you search through all the functionality hidden in all the menu’s directly from the keyboard
I personally prefer the ribbon exactly because it does a better job at revealing functionality to the user, is context sensitive, and adjusts better to different input types
Ribbon > a trillion tiny buttons, toolbars, and nested menus in nested menus.
I kind of feel like ribbons appeal to the same people that are not good at keeping track of hierarchys. There are a lot of people, myself included, who are. And thus prefer the complexity of menus, sub menus, and sub sub menus.
But I also know there are others that struggle with them and prefer flatter access means.
I don’t think one is absolutely better than the other, but keyboard shortcuts are best of all. All hail Word Perfect 5 for DOS!
The author must have tiny fingers, or use a stylus all the time. In most Windows applications, the dang menus are too small for me to touch the right one. I can touch the ribbon in Microsoft Office for iPad just fine though, since they took sizing into account. Heck, to be honest, touch is the only place I think a ribbon even makes sense over a menu.
Touch input is inherently flawed. Either the screen is too small and upscaling inputs wastes valuable screen estate, or the screen is properly sized and I sit far enough that the screen is out of reach.
It takes a long time for standards to emerge. It took 80 years for QWERTY to become the standard type writer layout for example. It took decades for automobile headlamps to move into the front of the car, instead of being attached to the outside like an actual lamp, even though the change to electric lights happened much ealier. It just takes a long time for standards to emerge, and for a population to learn the idioms. Just think about how hard it is for your 80 year old grandparents to figure how how to move a window out of the way – even now.
Most recently we have new design standards. The hamburger icon was completely unrecognizable for a while, but it turns out, if you keep using it, people start to learn what it means – literacy is increasing around the hamburger menu.
Even today we still have emerging idioms, like force touch and hold and press, though we haven’t built up a set of visual “affordances” to let users know they can force touch or dwell on the button (I suggest a double lined border). Mouse over works if your interface uses a cursor, but we still need a way to let users know there is something beneath the item (Here is an example: https://material-ui-next.com/lab/speed-dial/ )
We’ll get there though, and menus will always have a place – but what we really need are a new set of affordances. It’ll take a few decades before we’ve settled this. 🙂