Oh yes. I can't wait to think of a product to build using this design system.
replies(2):
One bug: Firefox on Linux introduces an extra dotted rectangle on focused buttons (so they end up with two oddly overlapping focus indicators)
I am not a CSS ninja, how easy would it be to make this responsive? The example do not appear to be responsive.
I also really like the quotes about each component! Is there an online copy of this Microsoft Windows User Experience manual somewhere?
I wonder how many windows apps we can build out in a few lines of JS.
Adding to this: without any specification, the browser should, and does, use the operating system's native controls when rendering controls such as <button>.
https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-focu...
https://stackoverflow.com/questions/71074/how-to-remove-fire...
I'm thinking about refactoring it and I'll may incorporate windows color scheme to it. Here's the link if you wanna see what I am talking about.
I’d probably switch back to Windows if they did.
https://blog.chromium.org/2020/03/updates-to-form-controls-a...
All part of Google's master plan to commoditize desktop OSs. Everyone outside the US already uses Android, soon your computer will be a Chrome box instead of a Windows/Mac/Linux box.
First they did the browser title bar & tab bar integration/styling & removed the normal OS title bar, then they made Chrome OS, now they are removing the last traces of OS-specific styling for those who haven't already switched to Chrome OS.
And Gmail, Gdocs, and Chromebooks are huge in kids schools. The kids don't know anything outside the non-Google universe. Most of the kids I know think MS Word/Excel/PowerPoint are lame (not that I'm a fan, but you have to admit MS Office is unrivaled in its abilities).
20 years from now they will have a gigantic monopoly over a huge range of computing.
One minor nitpick: the title bar buttons actually need to be a pixel or two larger in each direction (so 2 or 4 pixels more of height and width, while remaining centered).
I'm hoping Firefox Foundation or something like that will do some work in this area.
And I think that web applications should be like this. They may be delivered differently, but they should be part of the system like everything else. Making the UI elements look like the OS ones is good.
I especially notice it on KDE, since on the default KDE theme the checkboxes and radiobuttons and scrollbars look a bit different from most other OSs and the Gnome default theme. But in the browser my checkboxes and radiobuttons and dropdowns look exactly like every other checkbox and radiobutton and dropdown on my computer, and the scrollbars have the distinctive KDE look too.
Most web apps do behave differently from normal applications, and also have stupid company-specific theming, but it's nice having at least parts of them fit in.
I suspect those who come from a Windows background will not have the same opinion, because on Windows basically every app is a mess of different themes and window decorations.
The waves of nostalgia are sure coming on hard. Thank you to the author of this. This whole site is a work of art!
Now that CSS and Javascript are so widely used, it would be interesting for OS vendors to provide a default OS theme along with their packaged browser, that allowed some kind of sane default for web applications to use. You could use a native skin, or load your own CSS to customise it. Microsoft kind of tried this with ActiveX controls, and then Java Applets tried it, and then Flash was fun by ultimately not a good idea, and now we're here with thousands of themes to choose from and a rough set of guidelines that some follow and many don't.
:-)
The mistakes a driving me crazy. I assume the fonts are just issues with me not having the right font installed. The command menu should be flat and the bar in it should be longer, rectangular and with a drop shadow. The minimize/maximize buttons don't look at all right (no highlight, too stretched). When you move the window, the frame looks wrong - i think the grains are too big and widely separated.
Making a webfont out of the original 8pt Tahoma sounds fun, but I am unsure if I have to do it manually. I was worried about having to provide bold glyphs, and wasn't sure how to make it scale while still looking pixelated. (That is, if I need to hand-draw an 8x7 lowercase 'e' do I also need to hand-draw the 24x21 version?)
Anyway, I cut it but agree I should get this right!
So what remains is either black or white. White seems to be a more rational pick.
I'm not worried. Mozilla/Microsoft used to be in a similar position with Firefox/IE at one time.
Now they're both playing second fiddle to Chrome. The only constant in tech is that everything changes.
Wait until they reach the age and get hired in a corporation. I am a die hard linux user ( been on linux desktop more than i can remember ), but the latest stuff (=365) from MS is really appealing compared with gSuite. It has a level of sophistication that Google cannot reach.
it might be useful to boot real windows 98 (e.g. by visiting http://copy.sh/v86/?profile=windows98) and check how things interact with clicks, in particular how checkboxes and radio buttons look with mouse down.
They used vectors, looks like the Windows 95 aesthetics that was so connected to pixel survives this transition quite well!
People probably have rose-tinted nostalgia for the 95 era because of the nightmare that followed: Windows XP :)
Vaguely relevant: The FOX Toolkit implements the Windows 95 look for lightweight Linux/Windows GUI applications. [0] A pity we don't see more GUIs like that today.
I'm a bit disappointed they didn't use the "inset" or "outset" border-style [0] which pretty nobody uses anymore these days. I thought this kind of design is pretty much why these border-styles exist.
[0]: https://htmldog.com/references/css/properties/border-style/
Electron sounds nicer.
https://github.com/troxler/awesome-css-frameworks#class-less
And these seem to be the strictly frameworks without classes.
This site refers to them as "drop-in" frameworks (and lets you test them out live):
https://dohliam.github.io/dropin-minimal-css/
The ones here appear to not be strictly class-less, since I know at least some of those frameworks do have classes, but are probably optional/very light on classes. 98.css would also be a "drop in" in this case since you can see things like the title bar do use classes:
<div class="title-bar">
<div class="title-bar-text">A Title Bar</div>
<div class="title-bar-controls">
<button aria-label="Close"></button>
</div>
</div>XP was skinned like a very tacky Fischer Price toy, with garish colors and oversized elements that would have been more at home on a touchscreen. I don't think anyone called it a good theme unsarcastically. Why do we even need always visible scroll bars? They just take screen space and billions of people do fine without them on Macs and mobile OSes.
What if it's one of those webpages with a full height hero as the first element and no indicator you can actually scroll?
What if I want to click and drag the scroll to a specific location but have to take wild flailing guesses at where the scrollbar actually is because it keeps going invisible?
We design interfaces for the many first, and keep them as simple as possible but not simpler.
Knowing that a view is scrollable and there's more content to see is absolutely not an obscure edge case but a basic accessibility feature.
Relevant past discussion: https://news.ycombinator.com/item?id=20951580
Also relevant, what happens when the user doesn't realize more content is available: https://news.ycombinator.com/item?id=21353920
That seems more like retro/throwback fashion (which is always a thing, in every era) than the fundamental principles of that aesthetic being incorporated into modern design (which is what I would typically consider actually being "in fashion").
Still, nice to consider we're at the point where that's what we're framing as retro. No longer is it System 1 or CRT terminals.
An always visible scroll bar takes up a good chunk of screen space when you have multiple of them, and it's easy to develop intuition for what's scrollable and what isn't, just like we know what's right-clickable and what isn't.
It should be an option and it is, at least on Macs.
Actually, yes, when was the last time you looked at a page number in an e-book? They don't make sense anyway when you can resize the reader.
Here's the mixin I done https://github.com/padraigfl/packard-belle/blob/master/src/_...
My experience disagrees, as long as we're not talking about Electron or UWP applications. Your description sounds exaggerated.
Here's the attempt at a Windows 98 recreation I done with it feel free to take whatever from it:
http://packard-belle.netlify.app/
Tried doing a design system thing too but got lazy:
...and they did! https://github.com/bokuweb/react-rnd
https://www.google.com/search?q=windows+95+mystery+theme&cli...
Almost like the removal of scrollbars had nothing to do with saving space.
1. As a relative marker of a current position.
2. As an absolute number when your ebook/reader screws up saving its state.
This (yazz/pilot [i]) needs more exposure... the webapp form designer is gorgeous and useful.
As in "something even a child could use"? Indeed
> Why do we even need always visible scroll bars?
To know how long the page is, to know what state we are BEFORE we interact with it, to know that there is no such a thing as "above the fold" or other nonsense, etc.
Now allow me to ask you, with no intention to sound like an ass: why would you hide bars apart from saving 20px (which I assume was Windows' default, but let's say 100px for discussion' sake)?
The many being able bodied, literate, touch-device-carrying people? I am not sure interfaces should be designed like that.
They're doing it to sell adverts (removing the boundaries between content, forms and advertising), track where I'm looking (he's opened the scroll bar! our content is engaging/boring!), adopt fashions to make their competitors appear dated and justify their own careers.
Then again, I was a Memphis beta tester (legitimately, not the "I found these rars on a warez site" variety of "beta tester") So I "enjoyed" some of those features pretty early on.
Right now I'm running Outlook, Firefox, Solidworks Electrical, Solidworks, Skype for Business, and ECi M1. Outlook uses the latest style ribbon and flat UI, Firefox uses its own style for everything, Solidworks Electrical uses the old style ribbon UI with panes and stuff from I think .NET toolkits, Solidworks uses its own ribbon and UI theme that's unique to it, Skype is inexplicably blue with its own blue icons, M1 uses its own ribbon style and has somewhat standard controls on a gray background, with a custom tree view that scrolls horizontally when you click on things...
I also have PLC and HMI programming software. Omron CX-Programmer, Sysmac Studio, and NB-Designer, which all look different from each other and any of the other software I'm running.
I think it's harder for me to pick two programs that look alike than it is to find ones that look different.
Great work, I love this interface style!
I love that we arrived at the ~same solution using inset shadows for the buttons. Makes me feel validated.
[0] https://github.com/Baddaboo/ClassicKit/raw/master/Images/pix...
I was somewhat reminded of Wt [1], and I still wish that were open source. Also reminded a bit of Blazor [2].
[1] https://www.webtoolkit.eu/widgets/layout/
[2] https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=as...
Hilariously, this is quite a good example on why the Chrome monoculture is just repeating the IE monoculture of years past
Only when using it now is it clear how well they minimized ambiguity and cognitive load... everything is so frickin obvious. Contrast that with modern aesthetically obsessed UIs, ever ambiguous, lack of clear distinctions not in both spatial boundaries and UI states - it's a constant guessing game for the user, never certain about the outcome of an interaction, giving you this distracting sense of unease rather than just focusing on whats behind the UI.
2. There is no "absolute number" of pages on a e-reader app or device because the window or font size can change, changing all the page numbers. You can have 100 pages or 200 pages.
Looking at firefox and chrome side by side it's actually impressive how they look near identical other than a few stray pixels.
I’m tracking the fieldset and inner-focus ones (though unable to repro the latter on my machine). The third is new to me if you’d be so kind as to share some details about your system.
If you, the author of the page decide to respect it then it's fine, but I'd be a bit mad if the browser decided to override my page design to an arbitrary grey shade if I don't declare a background color for the body.
And as much as I like that Linux in many ways often keeps that type of UI around, I still feel like Win98 did it better (almost can't believe I'm saying that).
Will take the font discussion over there
Why? How often the first thing you do is look at the scroll bar and close a document because it's too short or too long?
If you're gonna read it you'll read it regardless of its length.
If you want to do anything else, like printing, you'll see the document size.
> to know what state we are BEFORE we interact with it
Why? If you open a new document you'll be at the top.
It's almost always immediately obvious that there would be more text.
If it's a previously opened document then you may be in the position you were in when you last opened it. In which case, you would remember that you're not at the beginning or end, and again it's usually immediately obvious that you're not at the beginning or end.
We come down to these facts:
- There's almost NO case that's ALWAYS improved by having always visible bars.
- Hidden bars always save screen space for more content and reduced clutter.
- Literally billions of people are fine with hidden bars (iOS, Android, Mac)
- If you need to see scroll bars, there's an option, at least on Mac.
Optional scroll bars are win/win.
Don't get me started.
Pros of a proper always-present scrollbar with appropriately-styled thumb:
- It indicates that the thing you're viewing even is scrollable. - You can see at once where you are in a document, and how large it is relative to your viewport. - It offers a convenient UI to scroll in both small or large amounts, or scroll to the very top or bottom. For lots of uses the scroll wheel on your mouse is a substitute, but certainly not for everything.
Cons:
- It takes a tiny bit of screen real estate - It offends some people's esthetics taste, I guess
> Why? How often the first thing you do is look at the scroll bar and close a document because it's too short or too long?
> If you're gonna read it you'll read it regardless of its length.
Something short, looking remotely interesting, I'll probably read in full. Something long, I'll probably skim to see if there's anything interesting buried in there. If I'm reading it completely, glancing at the scroll bar tells me where I am in the document so it tells me if the document is reaching its conclusion, or perhaps just going on a side note.
If you read a book, don't you first see how thick it is, and while reading sometimes watch how far in the book you are?
>> to know what state we are BEFORE we interact with it
> Why? If you open a new document you'll be at the top.
A bit later, when I have read a page or two, how far have I advanced? How much more is there to come, or not?
> It's almost always immediately obvious that there would be more text.
It's most certainly not always immediately obvious. And even when it is, it is very useful to know how much more text (or other content).
> - There's almost NO case that's ALWAYS improved by having always visible bars.
Perhaps not. But there lots of cases that are almost always improved by proper scroll bars.
> - Hidden bars always save screen space for more content and reduced clutter.
A tiny amount, certainly on today's screens.
> - If you need to see scroll bars, there's an option.
Where? I mean, are we talking about UX design in general, or do you have an explicit implementation in mind where you can optionally enable scroll bars? I don't think I've ever seen such an option, and certainly not easily accessible.
2. Most users read from fullscreen readers on their phones or ebooks, so the window size doesn't really change. I also strongly advice setting on a font for a particular book and stick to it. From my POV (unbacked by science) it helps with recall. If you don't change the font or other layout settings, the "pages" retain their numeration.
Stole that filter off codepen mind, nowhere near that clever... this one but toned down a bit https://codepen.io/lbebber/pen/XJRdrV
You'll see the hidden scrollbars when you're reading through something anyway.
> A bit later, when I have read a page or two, how far have I advanced?
You'll see the hidden scrollbars as you scroll through the pages to begin with.
> do you have an explicit implementation in mind where you can optionally enable scroll bars? I don't think I've ever seen such an option, and certainly not easily accessible.
It's right there in Mac general preferences, defaulting to visible if you use a non-Apple mouse.
So you agree that there's an alternative solution to page numbers, but you want to go back to page numbers?
> 2. Most users read from fullscreen readers on their phones or ebooks, so the window size doesn't really change.
Font sizes can change, changing the number of pages.
Fieldset doesn’t allow inset box-shadows on Firefox, but you can fix that relatively easy:
fieldset {
position: relative;
}
fieldset::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
::-moz-focus-inner {
border: 0;
}
input[type="radio"], input[type="checkbox"] {
visibility: hidden;
}Funny enough, just yesterday (before seeing this post), I was searching for re-creations of the Macintosh interface.
Here's the best one I could find:
Apple Macintosh System 7 UI in CSS - https://github.com/pfcode/system7css (Screenshot: https://imgur.com/ZEKolbS)
Aah, that nostalgic comfort.. Makes me dream of building my next toy "OS in a browser" from this.
You are more likely to intuitively get this once you have some experience attempting to design effective UIs (and actually trying to care about it).