6 ms·
PatternFly: An open source design system
- illiarian 4y agoWhat is it with modern "designers" and their visceral hate towards text input boxes: https://www.patternfly.org/v4/components/text-input https://www.patternfly.org/v4/components/text-input For all their talk about accessibility they go out of their way to make basic input as inaccessible as possible. Remember how Google needed a user study with 600 people to arrive at common sense conclusion that text input has to look like text input? (And sti failed to make it be that) Yeah
- jmholla 4y agoWhat's wrong with the text boxes?
- setr 4y agoMy own issue with these is that they handle excessive input by horizontal scrolling, which can only be considered a solution by someone who prioritizes the consistency/alignment of their layout over usability (a truly villainous prioritization)
- cush 4y agoYou want your browser's address bar to wrap and expand vertically?
- cbsks 4y agoThat would be great! Could you imagine being able to see the entire URL at once? That’s the dream…
- graypegg 4y agoI would especially love that on mobile devices, trying to align a cursor in a URL in the tiny iOS safari URL input is the worst. Worse than most inputs, it had the audacity to sling you back to the start if you look at it the wrong way while trying to scroll right.
- soulofmischief 4y agoBut that's the default text input behavior... Maybe you are thinking of the textarea element? https://www.patternfly.org/v4/components/text-area/#textarea https://www.patternfly.org/v4/components/text-area/#textarea
- Scarbutt 4y agoThey only have a bottom border that stands out.
- illiarian 4y agoModern "designers" hate that input boxes are just that: visually recognizable accessible input boxes. They go out of their way to make it anything but an easily recognizable input box. "Oh, why don't we make it just a white field on a white background with just an underlines and perhaps invisible light gray borders. And for disabled state we'll make it an unreadable gray on gray" You see it everywhere. That 600 people study that Google did for Material Design? It's infuriating, through and through: "Enclosed text fields with a rectangular (box) shape performed better than those with a line affordance" https://medium.com/google-design/the-evolution-of-material-designs-text-fields-603688b3fe03 https://medium.com/google-design/the-evolution-of-material-d... Compare and contrast with people who actually think about these things: https://design-system.service.gov.uk/components/text-input/ https://design-system.service.gov.uk/components/text-input/
- SebastianKra 4y agoIf contrast is an issue to you, check out accessibility options or monitor settings. Maximizing contrast everywhere usually sacrifices readability elsewhere. (Almost like everything in design is a trade-off.) Gov.uk is a government site that has to accessible to absolutely everyone, including tech-illiterate users. It also has a comparatively low density.
- illiarian 4y ago> If contrast is an issue to you, check out accessibility options or monitor settings. No. It's not the job of the user to make thin near-invisible lines or gray-on-gray text legible > Gov.uk is a government site that has to accessible to absolutely everyone, Exactly. And how is this a bad thing?
- SebastianKra 4y agoIf a design was chosen to work best for the majority of users but it doesn't work for you, then accessibility settings can help to accommodate you. I think the "Increase Contrast" setting on MacOS does exactly what you want. The one in Windows 11 also seems quite decent. Maybe if you try it out, you'll realize why it isn't the default. > how is [the uncompromising accessibility of Gov.uk] a bad thing? It only works because of it's low density. There's very little consideration for hierarchy or depth.
- 4dayworkweek4u 4y agoGood point!
- thangngoc89 4y agoYou reminded me of all those Google Form inputs that only have a single line but expecting me to fill in more than a short sentence. It’s even more frustrating on mobile (Safari, iOS) that I can’t move the cursor anywhere
- rickette 4y agoSince it isn't clearly mentioned on the site: PatternFly is founded by RedHat (now part of IBM) and serves as a foundation for https://ux.redhat.com/ https://ux.redhat.com/. Formerly PatternFly was rather RedHat specific but it looks like they've spin-off the RedHat parts and made PatternFly general purpose (which is great ofcourse).
- awesomegoat_com 4y agoYes. IIRC, Patternfly started many years ago, because many open source project (of Red Hat interest), had inconsistent ui. The idea was to develop a common guideline that other open source projects could use and be somewhat consistent with each other. To have a framework, artwork and guidelines that would be available on permissive terms forever.
- justusw 4y agoSorry if I may seem ignorant, but how is this different from Storybook? Is one a finished design system, and the latter one just a tool do document your design system?
- majestic5762 4y agoPatternFly is a UI lib with premade components that you can use to build your app with. Storybook is used to showcase your app's UI and people often use it to showcase their own design systems
- sergiomattei 4y agoI love when companies open source their design systems like this. It’s great for learning how to build consistent design language, like picking colors and such.
- seymon 4y agoHow does patternfly compare to the carbon design system? https://carbondesignsystem.com/ https://carbondesignsystem.com/ Since red hat now belongs to ibm and patternfly is from red hat ans rhe carbon design system is from ibm i wonder which one will stay!?
- re-thc 4y agoWho's the boss? :)
- gjvc 4y agofrom https://www.patternfly.org/v4/ux-writing/numerics https://www.patternfly.org/v4/ux-writing/numerics "When you represent the date as a numeric value or label, use MM-DD-YYYY." possibly the dumbest date format known to man. ISO 8601 for time format is eschewed, but they do go on to make a gesture towards internationalisation with: "Use a currency's ISO three-digit numeric code when writing for computerized systems or for countries that don't use Latin scripts." (That's ISO 4217 for all the standards buffs.)
- xupybd 4y agoFor completeness https://xkcd.com/1179/ https://xkcd.com/1179/
- sshine 4y agoThe neatest thing about YYYY-MM-DD is that it disambiguates between American and European dates.
- gjvc 4y agothat's rather the point of my original comment...
- rad_gruchalski 4y agoAnd is sorted correctly as string.
- butz 4y agoWhat are other similar UI component libraries, that have "enterprise" oriented components, like data tables and decent accessibility? Being JS framework agnostic (web components) is a pro too.
- awesomeMilou 4y agoMaterial Design has web components now.
- illiarian 4y agoNo one should ever recommend Material Design for anything. In their original iteration they had to do a study with 600 people to find out that text inputs should look like text inputs: https://medium.com/google-design/the-evolution-of-material-designs-text-fields-603688b3fe03 https://medium.com/google-design/the-evolution-of-material-d.... (Edit: and their text fields by default still don't look like text fields, you have to specifically set them to `outlined`) Their latest abomination has almost nothing aligned optically: https://twitter.com/dmitriid/status/1643607965935476737 https://twitter.com/dmitriid/status/1643607965935476737 When there are 5 elements, they follow 5 different guidelines: https://twitter.com/dmitriid/status/1643682248959328258 https://twitter.com/dmitriid/status/1643682248959328258
- illiarian 4y agoTaber is probably the only UI framework that has tables and such: https://preview.tabler.io/ https://preview.tabler.io/ It's not too easy to work with because you need to learn its idosyncrasies and classes etc., but design-wise it's very decent.