His blog is amazing (Start > Documents > Blogs). I love being able to open multiple blog posts in different windows. And the most amazing thing: it doesn't even feel like a website. The windows open almost instantaneously.
Interesting collection. Between the veritable homages (AV notification included) [0] and reinterpretations for various purposes (e.g., music player [1]), it's a fun mix!
It also reminded me of the Nielsen Norman article exploring flat design and comparing it to three-dimensional design [2]. While it's becoming less and less possible, it would be interesting to compare the experience across different UX patterns for first-time computer users. It seems hard to separate familiarity and nostalgia from truly superior UX.
These are interesting resources, thank you. One sentence stuck out to me in [2]:
> Early pseudo-3D GUIs and Steve-Jobs-esque skeuomorphism often produced heavy, clunky interfaces.
I think that this is an aesthetic assessment, not one that speaks to usability. And while older interfaces were aesthetically clunky, newer interfaces are functionally clunky - often hiding functionality (hamburger menu) and wasting content space in exchange for the whitespace necessary to separate elements without skeuomorphic signifiers.
Unfortunately, in the new post-hamburger menu Android, the options that used to be available in the hamburger menu are now even harder to find. When they're still available in the main screen, they're also less useful--you have no idea what they do until you use them (I know I can long press, but family can't).
The best app UI I've seen, FBReader, has a menu, a drawer, and an action bar, and you can move elements between all three of them through settings, and for normal reading use the UI is hidden altogether. If you want to do anything advanced, it gets more difficult though--it has nested menus, though they're well organized IMO. Another UI that I like is Perfect Viewer's tap zones--it has settings for 3, 5, 11 tap zones on screen, and you can set what happens separately for long-press, single and double tap in each zone, plus swipe the top for brightness and bottom for progress control (like dragging a scrollbar, but for ebooks); probably overkill for most people though.
I think the Hamburger was a good solution to a real problem: that mobile phones simply have less screen space (physical, if not in pixels) than desktops and laptops. The problem is that people then seem to blindly apply the solutions where they aren't needed. Too much cargo culting, not enough thought.
Early Android devices had a hardware menu button, press it, get a menu, simple and consistent. It can be related to the menu bar in desktop applications.
Android 3 and 4 broke it. Google noticed that many apps didn't know what to do with that button, and when they stopped relying on physical buttons, instead of trying to make things more consistent, they simply threw it the towel and removed the button. The hamburger menu replaced it. But unlike the physical button, it can be anywhere, or absent, or hidden behind a swipe gesture, or whatever the "UX designer" thought of.
Normally, the way you do it in a desktop app is to use the OS provided menu bar, preferably with standard labels like "File", "Edit", "View" and "Help". But in a web page, you can't do that, the menu bar is property of the browser, and because HTML never standardized menus, you take inspiration from where you can, and already messy mobile apps is the closest thing you have.
The problem is that now, people design their desktop apps like web pages, in fact, with Electron and the like, they are web pages. So every OS convention and standard widgets that help make things consistent go out of the window (pun not intended).
I think Google - which is at core a web company - couldn't consider mobile apps alone. By having an hardware button, apps and websites inevitably worked differently. Removing the button allowed for uniformity: everyone uses the hamburger.
Microsoft tends to use the waffle menu for switching between apps, and many of those apps will have a hamburger menu at various screen sizes. Some of those apps will also have ellipsis menus in various places, and that leads to my favorite of the silly food names for menu icons as these are often called qebab menus, especially the vertical ellipsis which is rare in text but common for menu icons so some people don't even realize they are meant to be ellipses, but they definitely look like a skewer of qebabs.
(ETA: Also yes, it is sort of weird that Microsoft feels a need for three levels of menus: waffle, hamburger, qebab. Though in practice it seems better than the Android apps I've seen with 2+ Hamburger menus. Which one is which? Which one does what? The hierarchy of waffle, hamburger, qebab offers some context.)
Thanks for posting the last article. I recently found an interesting post from Jeff Atwood about the Uncanny Valley of User Interfaces (2008)[1] where he explains how web apps that mimic desktop UI conventions is rarely a good idea.
Wow, there's so much stuff in the Dosbox emulator. I fired up Turbo C for the first time since 1990! (the compiler didn't work at first though -- had to change the INCLUDE directory settings)
Many webdevs have used systems like those for their development work. Today, the web can nicely represent them right in the browser. This makes it quite easy for the new generations of devs to take a feel of those systems. Feels like the Web is giving something back. Thanks for sharing!
It's neat to see themes reminiscent of Irix and Solaris as well.
The vast majority of people have only been exposed to Windows and Mac graphical operating systems and might not realize that lots of these ideas had roots in not-so-personal computers.
For some reason i was reading something on the CERN website a few days ago and while noticing the layout was odd, it never really clicked it was modelled after a desktop GUI. That's pretty cool though.
The choice of the Windows 9x “My Computer” iconography for the sites is nice and appropriate, but there’s one thing missing. It just feels like they should require a double-click to launch!
Reminds me of an app I saw in the late 90's developed with Delphi. I never used Delphi, but apparently it had the ability to compile an app to an ActiveX plug-in and run a full desktop-like application in Internet Explorer. Of course, ActiveX had major security problems, but the UX was amazing.
I was a heavy Delphi user back in the day (late-90's/early 2000's) it was way ahead of the curve in terms of RAD that didn't gimp you as a developer.
Shame they decided to go for the large enterprise insanely expensive end of the market, if they'd done a decent commercial version for a 10th the price they'd have done much better.
Though the writing was on the wall as the cost of development tools trended towards zero - JetBrains have continued to prove that if you provide enough utility competing against free can be profitable.
Thanks! That brought a huge smile to my face. I was a total Palm nerd back in the late 90's; I remember buying a gigantic clip-on cellular modem for one to get email on it.
I'm curious about the tech in some of these. Probably a mix of straight up HTML reinterpretation, probably some web assembly, feels like at least one or two are running a full win9x dist in either docker or something...
There's some frameworks that are available for old Windows desktop apps to run in the browser. It's main use is for old ERP systems that were originally written for on-premise to be deployed in the cloud and browser based without needing to essentially rewrite everything.
The one tech stack I know of that does this is IBM Websphere for Java apps (https://en.wikipedia.org/wiki/IBM_WebSphere). One that isn't as smooth as the site in OP is Microsoft's Remote Desktop Service.
I'm using a Macross Plus Winamp skin for QMMP as I write this, so it was funny to read your comment...I got so sick of iTunes that a few years ago I went back to the old way. I wrote some scripts to select & generate playlists and bound the scripts to keyboard shortcuts like Ctrl+Super+Media Keys. QMMP has been really solid.
I (author of Webamp) worked with the internet archive to archive ~50k Winamp skins. The collection even features Webamp integration is you can try them out in the browser. https://archive.org/details/winampskins
I always preferred Geiss, but either way, I wish such visualisation capabilities were built in to Spotify... Or is there a suitable in_xxx plugin for Winamp that will let me use its visualisations with Spotify?
Thanks for including it in your list! You’ve done a great job collecting so many of them. We have a Discord with a few people interested in this type of thing. You can find a link in the Webamp readme if you are interested
This took me back to one morning early in my career, where I arrived at work following an Easter weekend still heavily under the influence of ecstasy. I hid under my desk from the boss, with Prodigy playing from Winamp into my headphones.
Taxi straight from party to the office. I didn't realize until I was sitting at my desk how fucked I was
A major accessibility problem with this: the list uses <div>s with click handlers, rather than links. This makes it not respond properly to clicks with modifiers (e.g. Ctrl+click), not have the right context menu options, not show the href in the status bar, and be completely unusable to users of tools like screen readers or those that would navigate by keyboard.
Never ever do this. If it opens a new page, it’s a link. <div> with a click handler is the wrong thing >99.99% of the time: it should be a link or a button.
Accessibility is super important, but gosh your comment here is downright horrible.
It's neither not constructive, nor friendly. Nothing about the contents of the page itself. You're basically, rude and borderline hostile with italics emphasizing something the author /should not/ do. Horrible.
Where's your #1 Hacker News site? Where's your awesome collection of awesome sites that you shared with people. I don't see one.
I think it could maybe be worded a little more politely, but your comment seems far worse in that regard. At least the parent offers some advice about what to do instead.
It appears you are conflating criticism of the project with a personal attack on the user. There is a certain irony in your attempt to do so when you call the commenter an ass!
I found it concise, well-explained, informative and helpful. Hopefully many other people learned something useful from it. The author of the original site certainly got value from it given their reply. You don't always have to sugar coat code review feedback with a meaningless "This is awesome but..." - it's usually disingenuous at best. Surely as hackers we should all appreciate good, useful feedback like this?
187 comments
[ 3.9 ms ] story [ 143 ms ] threadhttps://ash.ms/
[1] http://www.marianopascual.me
It'd be cool if it randomly BSOD'ed.
It also reminded me of the Nielsen Norman article exploring flat design and comparing it to three-dimensional design [2]. While it's becoming less and less possible, it would be interesting to compare the experience across different UX patterns for first-time computer users. It seems hard to separate familiarity and nostalgia from truly superior UX.
> Early pseudo-3D GUIs and Steve-Jobs-esque skeuomorphism often produced heavy, clunky interfaces.
I think that this is an aesthetic assessment, not one that speaks to usability. And while older interfaces were aesthetically clunky, newer interfaces are functionally clunky - often hiding functionality (hamburger menu) and wasting content space in exchange for the whitespace necessary to separate elements without skeuomorphic signifiers.
The best app UI I've seen, FBReader, has a menu, a drawer, and an action bar, and you can move elements between all three of them through settings, and for normal reading use the UI is hidden altogether. If you want to do anything advanced, it gets more difficult though--it has nested menus, though they're well organized IMO. Another UI that I like is Perfect Viewer's tap zones--it has settings for 3, 5, 11 tap zones on screen, and you can set what happens separately for long-press, single and double tap in each zone, plus swipe the top for brightness and bottom for progress control (like dragging a scrollbar, but for ebooks); probably overkill for most people though.
Early Android devices had a hardware menu button, press it, get a menu, simple and consistent. It can be related to the menu bar in desktop applications.
Android 3 and 4 broke it. Google noticed that many apps didn't know what to do with that button, and when they stopped relying on physical buttons, instead of trying to make things more consistent, they simply threw it the towel and removed the button. The hamburger menu replaced it. But unlike the physical button, it can be anywhere, or absent, or hidden behind a swipe gesture, or whatever the "UX designer" thought of.
Normally, the way you do it in a desktop app is to use the OS provided menu bar, preferably with standard labels like "File", "Edit", "View" and "Help". But in a web page, you can't do that, the menu bar is property of the browser, and because HTML never standardized menus, you take inspiration from where you can, and already messy mobile apps is the closest thing you have.
The problem is that now, people design their desktop apps like web pages, in fact, with Electron and the like, they are web pages. So every OS convention and standard widgets that help make things consistent go out of the window (pun not intended).
(ETA: Also yes, it is sort of weird that Microsoft feels a need for three levels of menus: waffle, hamburger, qebab. Though in practice it seems better than the Android apps I've seen with 2+ Hamburger menus. Which one is which? Which one does what? The hierarchy of waffle, hamburger, qebab offers some context.)
[1] https://blog.codinghorror.com/avoiding-the-uncanny-valley-of...
http://eeerik.com/
And GW-BASIC!
10 PRINT "Hello World"
END
RUN
The vast majority of people have only been exposed to Windows and Mac graphical operating systems and might not realize that lots of these ideas had roots in not-so-personal computers.
I wish I could see more classic Mac OS style sites; the platinum interface really appealed to me.
Shame they decided to go for the large enterprise insanely expensive end of the market, if they'd done a decent commercial version for a 10th the price they'd have done much better.
Though the writing was on the wall as the cost of development tools trended towards zero - JetBrains have continued to prove that if you provide enough utility competing against free can be profitable.
[1] https://gowder.io
The one tech stack I know of that does this is IBM Websphere for Java apps (https://en.wikipedia.org/wiki/IBM_WebSphere). One that isn't as smooth as the site in OP is Microsoft's Remote Desktop Service.
[1] https://en.wikipedia.org/wiki/Sonique_(media_player)
https://getwacup.com/
https://github.com/jberg/butterchurn
Taxi straight from party to the office. I didn't realize until I was sitting at my desk how fucked I was
Comes with a game, paint and notepad.
Never ever do this. If it opens a new page, it’s a link. <div> with a click handler is the wrong thing >99.99% of the time: it should be a link or a button.
It's neither not constructive, nor friendly. Nothing about the contents of the page itself. You're basically, rude and borderline hostile with italics emphasizing something the author /should not/ do. Horrible.
Where's your #1 Hacker News site? Where's your awesome collection of awesome sites that you shared with people. I don't see one.