8 ms·

Introducing U.S. Web Design Standards

327 points by tswicegood 11y ago

ampersandy 11y ago
This post doesn't address the most important thing: when can we actually expect all of the government's websites to start using these common patterns? Creating a library/set of guidelines that you expect other developers to use is great and all, but not impactful in and of itself. Right now it looks like the library's authors are more focused on making their library useful than used, which is a thousand times more important.
JorgeGT 11y ago
That's a great initiative. Being from a country that changes the URLs of a bunch of ministries (and breaks half of them) each time a new government takes charge, I envy it! Now, for improved consistency, adopt the metric system.
- bsimpson 11y ago
  Which country?
  - JorgeGT 11y ago
    Good ol' Kingdom of Spain. Governments tend to rearrange ministries (fusing them, eliminating some and embedding their competences in another, or simply renaming them) and the URL changes accordingly, but most of the times links break, the styles of a former deleted ministry are different from the new host, etc.
- dfar1 11y ago
  Plus one for "adopt the metric system". There have been past attempts to do so, but I think it's a lost cause. https://en.wikipedia.org/wiki/Metrication_in_the_United_States https://en.wikipedia.org/wiki/Metrication_in_the_United_Stat...
- Symbiote 11y ago
  I saw a presentation from the Gov.UK folk about keeping URLs working, when they migrated from the 2000s-era site. They tried to keep everything going somewhere useful, and had examples of URLs printed on mouse mats, mugs, notebooks etc -- as well as the obvious official forms which might remain valid for decades.
Animats 11y ago
The Medium article says to visit the site for the standards.[1] That yields: MAX.gov Application Unavailable If you are seeing this message and it is not Sunday 2AM-8AM ET then please contact MAX Support by clicking here. If you’re trying to access MAX Community, please use our snapshot site: MAX Snapshot Community Site "MAX.gov" appears to be some kind of in-house cloud service for the Federal government. [1] https://playbook.cio.gov/designstandards/ https://playbook.cio.gov/designstandards/ Update: now it's up.
- skybrian 11y ago
  And now it's down again.
  - Zikes 11y ago
    It came back up, but in case it goes down again here's a link to the GitHub for it: https://github.com/18F/web-design-standards https://github.com/18F/web-design-standards
- zeckalpha 11y ago
  It's not fully in house. The idea is to centralize management of services (both in-house and external) for budgeting reasons, since MAX is part of GSA which is part of the OMB (Office of Management and Budget).
  - lefler 11y ago
    MAX.gov was kind enough to run us a proxy in order to support https, and that proxy had a bad day under load. Described more here https://github.com/18F/web-design-standards/issues/733 https://github.com/18F/web-design-standards/issues/733 Btw, GSA and OMB aren't connected the way you describe. They just happen to be the respective parent agencies of 18F and USDS-HQ. Here's a tree. POTUS ├── GSA │ └── 18F └── OMB ├── USDS-HQ └── MAX
    - Animats 11y ago
dfar1 11y ago
Hopefully this guide will be updated as time goes on to stay relevant as technology changes. Otherwise in a few years from now, everything will look outdated again.
- timdorr 11y ago
  It's all open source and in the public domain: https://github.com/18F/web-design-standards https://github.com/18F/web-design-standards They're also pretty active with the pull request system: https://github.com/18F/web-design-standards/pulls https://github.com/18F/web-design-standards/pulls and have a CONTRIBUTING guide: https://github.com/18F/web-design-standards/blob/18f-pages-staging/CONTRIBUTING.md https://github.com/18F/web-design-standards/blob/18f-pages-s... I attended a presentation by one of the people working on the project last week and they put a lot of thought into both how to make this a usable guide for now and how to keep it growing into the future. The USDS has attracted some really great people lately, and it shows!
- krschultz 11y ago
  Looking outdated isn't the worst thing in a world. I think National Forest signs look like hotel signs from the 1950s, and that's probably not a coincidence. What's more interesting is if this will lead to better maintainability. Since this includes code as well as guidelines, hopefully it will reduce the variation between various agencies' websites. That in turn should make future upgrades more uniform and therefore less costly.
  - dbarlett 11y ago
    If you're curious, Forest Service signs are specified by Sign and Poster Guidelines Engineering Manual EM7100-15 [1]. [1] http://www.fs.usda.gov/Internet/FSE_DOCUMENTS/stelprd3810021.pdf http://www.fs.usda.gov/Internet/FSE_DOCUMENTS/stelprd3810021...
    - noir_lord 11y ago
      That standard is incredible, I had a good flick through it just in awe of the level of specification that goes into signage, I love that type of stuff, it's a hidden world.
azeirah 11y ago
When design becomes a standard, is its purpose not lost?
- JeffreyKaine 11y ago
  As a designer, my job isn't to "design a website," it is to design patterns of UI/UX and a framework to build new features and interactions for a particular application. Basically, a designer's first job is to design the lego blocks. Then she can build stuff with it. The application in this case is the U.S. Government. The purpose of this design is to provide the lego blocks and framework for developers and designers to build an interaction layer for the federal government.
- SapphireSun 11y ago
  It depends on what you're trying to achieve. US Government sites aren't about creating an artistic experience. It's more important that digital services are delivered consistently and give citizens a good UX. As an experience, the design hinges on creating trust, accessibility, and being able to carry what you've learned about the interface to different sites. These things won't degrade easily with time. For instance, the significance of the color blue won't change rapidly (barring a large scale invasion by blue extraterrestrials).
- hippich 11y ago
  You might be thinking about different "design". In this particular case USDS tries to "design" (as in engineering or architecture) efficient, cross-organizational set of guidelines to keep look consistent across all government websites. This should lead to same standard of UX and AX, which should lower amount of confusion of customers and lower costs building new projects. You can think about it as of Twitter Bootstrap for government websites.
- gopowerranger 11y ago
  I think this is a "style guide" and not a "design standard".
- Bjartr 11y ago
  Not if the purpose is to communicate more effectively and be more usable to more people.
Animats 11y ago
OK, now that it's back up, let's take a look at the examples. There's a "register to vote" page, but that's trivial. Here's a more difficult one - a mockup of a Veterans Administration form.[1] This is clearly for use by a Government employee, not the public. (The first question one asks is, if an appeal is "certified", why does it also have to be "activated" by a human before anything happens? But that's the organization's problem, not web design.) It's a high-contrast layout, to support the visually impaired. Although it does have both white on black and black on white buttons, visually it seems OK. The form has a pull-down for "Confirm type action". This isn't a "Confirm" button, it's a selection option, for selecting the type of bureaucratic action. There are several documents mentioned, "Form 8", "Form 9", etc. These are in bold sans-serif blue text. The "NOD" document is apparently missing, so you couldn't view it, but the text for it is the same as for the documents you can view. At the end of each line is the word "Change", in the same font and color. It's not clear if "Form 8" is clickable, leading to a view of the form. "Change" is presumably clickable, and ought to lead to a popup. It's not clear whether changes commit immediately, or when the final buttons at the bottom ("Reassign" or "Activate Appeal") are clicked. The "POA" heading is misaligned. You can tell they used table-less design - things don't line up right. This form is useful only if the user has paper materials on hand against which they are checking. Functionally, this form is exactly equivalent to something on a green-screen IBM 3270 terminal from 30 years ago, which may be what it is emulating. This is their example of good Government web design. [1] https://playbook.cio.gov/designstandards/assets-styleguide/img/home/example_VAappeals_full_mock.png https://playbook.cio.gov/designstandards/assets-styleguide/i...
- tcdent 11y ago
  You're probably better off submitting an issue on GitHub than dropping a bug report here.
- benaiah 11y ago
  > The "POA" heading is misaligned. You can tell they used table-less design - things don't line up right. Um, that's not the case. Those look like table tags, as they should be (it's a table). The only problem is that that column header is left-aligned, not right-aligned like the rows are. Most of your complaints are bullshit, frankly, and the rest are about interaction design/UX, not visual design, which is all that this project claimed to be. The visual design and layout look fine, with the exception of that misaligned column heading (the horror!).
Numberwang 11y ago
I really like the look of this and think it is a great initiative. Especially as I am the only human on earth who don't love Material Design more than my own mother.
- tracker1 11y ago
  I think that material design works well for applications in particular... a lot of the time too much is shoveled into applications without a concern for information overload, material design enforces this to some extent. That said, even looking a step back towards, for example twitter bootstrap, it's about keeping things clean and orderly. One of the examples I appreciated was the password prompt, too often what is allowed in a password isn't clear, and to be honest, I'm almost in favor of allowing pretty much anything, I wish people would use "passphrase" instead of "password" and encourage multi-word phrases, even a full sentence. "Fear is the mind k1ll3r." for example.
mbesto 11y ago
Nice, they use SASS/Bourbon/Neat for their styling.[0][1] Huge fan and recommend it to anyone using Ruby for web development. [0] - https://playbook.cio.gov/designstandards/getting-started/ https://playbook.cio.gov/designstandards/getting-started/ [1] - http://bourbon.io/ http://bourbon.io/
- ksml 11y ago
  I second this recommendation, even for those not using Ruby! The Sass compiler is written in Ruby but that doesn't mean you have to know Ruby to use Sass.
  - rakk 11y ago
    If you can do without the latest of the latest in Sass I highly recommend using a libsass implementation. So much faster than the Ruby version! OT: I also like that they've used a BEM-like approach, although I personally prefer a double underscore as separator between elements.
    - tracker1 11y ago
      I've been using node-sass (libsass wrapper) recently, which hasn't been too bad compared to less (which is native to node/js). Seems to be working fine with bootstrap-sass, and surprisingly fast, compared to less, so I imaging the ruby sass implementation would be similarly slow by comparison.
    - STRML 11y ago
      Libsass is night & day vs Ruby Sass. No problems using libsass with Bourbon, Bourbon thankfully stays away from the bleeding-edge features (many of which can be emulated with clever functions). In a previous project, we saw Sass compiles go from ~15s to about 400ms by moving to libsass. Completely changes the development cycle (with HMR or livereload) as you see changes immediately.
- freshyill 11y ago
  I really used to love Bourbon and Neat, but they're unnecessary today. The vendor prefix mixins are mostly obviated by modern tools like Autoprefixer, and Neat itself can be mostly reduced to a Sass mixin.
danso 11y ago
I encourage people to check out 18F's Github repos...there's a lot of useful tools and libraries, for starters. And then there's full projects to learn from, such as APIs and front-facing static sites. I don't know if they use any other kind of project manager besides Github Issues, but their projects have among the most active Issues activity...it seems that the USDS/18F team uses them as project discussion rooms that also happen to be public...as they should be for government, public facing work. And they accept pull requests from the public...here's one I made to make their style guides more readable on mobile/non-traditional-browsers: https://github.com/18F/content-guide/pull/43 https://github.com/18F/content-guide/pull/43 They talked about it amongst themselves (in public) and then merged it in. I know that's part for course for most industry teams...but not for the federal government. Think about all the regulations and CYA-guideliens (cover-your-ass) that have built-up over the years that would've made accepting code, or any input, from a total outsider, to be...not a priority. A few years ago I remember finding a very obvious, easily fixable XSS vulnerability across all of the Department of Homeland Security sites...not only was it hard to find a point of contact, but I was pretty much ignored until I sent emails to US-CERT, and then also threatened to have a tech journalist write about it. With the USDS projects, it's a completely different paradigm to work via systems like Github. At the very least, you can more easily take credit for suggestions/fixes you made.
- rev_bird 11y ago
  >A few years ago I remember finding a very obvious, easily fixable XSS vulnerability across all of the Department of Homeland Security sites... I think if I were in this situation today, I just wouldn't say anything. Being ignored would be one of the good outcomes; I'd be terrified of getting chucked into court for being a "HACKER AGAINST HOMELAND SECURITY."
  - chris_wot 11y ago
    Disclosing the vulnerability - what law could they prosecute you under?
    - Ntrails 11y ago
deleted 11y ago
[deleted]
rymndhng 11y ago
Interesting. Another place where I've seen something similiarly done is for the Canadian Gov't. See https://github.com/wet-boew/wet-boew https://github.com/wet-boew/wet-boew
rootedbox 11y ago
Thanks Obama.
kin 11y ago
What a great step in the right direction. Every time I navigate through another government website in search of information, it is a different experience. I'm all for consistency and can't wait until this is well adopted in all the .gov's I find myself visiting.
jamie_ca 11y ago
Oh goodie, now there's a canonical description of how to make a US gov't website for all the phishers out there...
- coldtea 11y ago
  The design level is the wrong level to solve the fishing problem. Any site can be immitated, and 100 differently-looking sites can be immitated with almost the same ease as 100 same-looking ones... For one, you don't even have to create anything -- you just download the original assets, and merely inject some JS or change a form destination in your version. So mirrorring (wget -mkp http://foo.bar http://foo.bar) designs is not that more difficult...
mattchue 11y ago
Doesn't this make it incredibly easy for phishing websites to be created? I suppose such websites would exist anyway, but this would certainly diminish a user's ability to differentiate between a legitimate .gov or another page with malicious intent at a glance.
- chuckgreenman 11y ago
  That was my thought at first glance too, however it is already really easy to just download a sites assets and make a mock up. Sometimes you just have to trust that people are going to pay attention before submitting sensitive information on the net.
- lockes5hadow 11y ago
  Not any easier than it already is. There are tools like Social-Engineer Toolkit (SET) that make it dead simple to launch all sorts of phishing attacks.
Havoc 11y ago
When looking at a random website I expect to know roughly what I'm looking at within 20 seconds - max. Ideally 5 if not text heavy. >shared set of tools [...] government websites That is exactly what I wanted to know. Pity thats hidden on page 3 and I had to read credits & something about some Joanne's problems first. The narrative story flow is fine...but you've got to give something solid up front. e.g. Do the startup cliche and say how you're revolutionising the world in a short sentence. Then launch into the speech about Joanne's problems...
- straws 11y ago
  That's a bit unfair — you're talking about an expository and introductory Medium post. Compare that to the first sentence of the guide itself: Open source UI components and visual style guide to create consistency and beautiful user experiences across U.S. federal government websites.
Duhveed 11y ago
"It doesn't do anything useful and it only loads Saturdays at 3am, but it sure has some syntactically awesome stylesheets!" ...Anyway, it sounds good on paper.
jlukic 11y ago
Nice! I did notice some of the component definitions look like very close paraphrases to Semantic UI's component descriptions though, but I'll take that as a good thing.
scoot 11y ago
"is it possible to create a shared set of tools to provide consistent, beautiful, and easy-to-use government websites?" Yup: http://gov.uk http://gov.uk They even copied the colour scheme: https://playbook.cio.gov/designstandards/visual-style/#colors https://playbook.cio.gov/designstandards/visual-style/#color...
- sosuke 11y ago
  Imitation is the sincerest form of flattery. I thought of gov.uk as well. I hope 18F took influence from gov.uk's user testing on form design as well.
- z1mm32m4n 11y ago
  Not gonna lie, I confused this site for one of those sites you see on parked domains. I can see a resemblance with respect to the color scheme, but I think the entire design aesthetic is completely different.
  - comex 11y ago
    I had the same impression (on an iPhone). I'm not really sure what contributed to my unconscious snap judgement, but I think it has to do with the layout of the search box and list of links, along with the lack of images (other than a little icon in the corner) and the four copies of the domain name (in all caps) on the page.
    - huac 11y ago
      The "popular on gov.uk" links are in that perfect mix of random and search engine keyword that domain parkers love (SEO baby!)
- britta 11y ago
  These UK and US government tech efforts have a friendly relationship: https://www.whitehouse.gov/blog/2015/09/24/uk-and-us-meet-forge-new-steps-toward-even-closer-digital-collaboration https://www.whitehouse.gov/blog/2015/09/24/uk-and-us-meet-fo...
chuckgreenman 11y ago
I really like this, but as someone who recently went through the federal loans process I know that the interface isn't the only thing holding back our government's web presence. Can we adopt a standard work flow? Something that behaves as expected when you submit forms?
hiharryhere 11y ago
There's a number of comments here about this making phishing easier. The bigger issue is that the US gov doesn't consistently use .gov domain names. http://www.ustraveldocs.com/ http://www.ustraveldocs.com/ This is the official US gov site for applying for a visa. Given there are so many dodgy immigration agents operating with .com addresses it makes no sense as to why the official site is not just 'visa.gov'.
- huac 11y ago
  "© CGI Group Inc" - looks contracted out. Agree that something this important needs to look more official.
- toxican 11y ago
  Can anyone think of any reasons that any and all interaction with the US Government via the web shouldn't take place via a .gov website? If something like healthcare takes place on a .gov site, visas definitely should.
  - acdha 11y ago
    Good reasons, no, but check out what getting a .gov domain looks like: https://www.dotgov.gov/portal/web/dotgov/registration-process https://www.dotgov.gov/portal/web/dotgov/registration-proces... https://www.dotgov.gov/portal/web/dotgov/policy#10217335 https://www.dotgov.gov/portal/web/dotgov/policy#10217335 It's really easy to imagine a lowly staffer with an unrealistic deadline or contractor deciding to register a .com to use for a demo and thinking they'll go through simply learning who the official contact is, getting the agency CIO / agency head to sign off, dealing with internal politics[1], etc. later and then never actually getting around to that part. At some point the argument probably became “Now we've advertised it too much to change”. 1. At large organizations both public and private I've seen this kind of fragmentation happen because person A wanted a project to exist and person B, who controlled DNS, thought it should be included in their application (horrible vendorware, the first big Cold Fusion project they personally managed which will be upgraded over their dead body, etc.).
    - 11y ago
SeeDave 11y ago
Nice work Mollie and team!

327 points by tswicegood 11y ago

This post doesn't address the most important thing: when can we actually expect all of the government's websites to start using these common patterns? Creating a library/set of guidelines that you expect other developers to use is great and all, but not impactful in and of itself. Right now it looks like the library's authors are more focused on making their library useful than used, which is a thousand times more important.

JorgeGT 11y ago

That's a great initiative. Being from a country that changes the URLs of a bunch of ministries (and breaks half of them) each time a new government takes charge, I envy it! Now, for improved consistency, adopt the metric system.

bsimpson 11y ago
Which country?
- JorgeGT 11y ago
  Good ol' Kingdom of Spain. Governments tend to rearrange ministries (fusing them, eliminating some and embedding their competences in another, or simply renaming them) and the URL changes accordingly, but most of the times links break, the styles of a former deleted ministry are different from the new host, etc.
dfar1 11y ago
Plus one for "adopt the metric system". There have been past attempts to do so, but I think it's a lost cause. https://en.wikipedia.org/wiki/Metrication_in_the_United_States https://en.wikipedia.org/wiki/Metrication_in_the_United_Stat...
Symbiote 11y ago
I saw a presentation from the Gov.UK folk about keeping URLs working, when they migrated from the 2000s-era site. They tried to keep everything going somewhere useful, and had examples of URLs printed on mouse mats, mugs, notebooks etc -- as well as the obvious official forms which might remain valid for decades.

Animats 11y ago

The Medium article says to visit the site for the standards.[1] That yields: MAX.gov Application Unavailable If you are seeing this message and it is not Sunday 2AM-8AM ET then please contact MAX Support by clicking here. If you’re trying to access MAX Community, please use our snapshot site: MAX Snapshot Community Site "MAX.gov" appears to be some kind of in-house cloud service for the Federal government. [1] https://playbook.cio.gov/designstandards/ https://playbook.cio.gov/designstandards/ Update: now it's up.

skybrian 11y ago
And now it's down again.
- Zikes 11y ago
  It came back up, but in case it goes down again here's a link to the GitHub for it: https://github.com/18F/web-design-standards https://github.com/18F/web-design-standards
zeckalpha 11y ago
It's not fully in house. The idea is to centralize management of services (both in-house and external) for budgeting reasons, since MAX is part of GSA which is part of the OMB (Office of Management and Budget).
- lefler 11y ago
  MAX.gov was kind enough to run us a proxy in order to support https, and that proxy had a bad day under load. Described more here https://github.com/18F/web-design-standards/issues/733 https://github.com/18F/web-design-standards/issues/733 Btw, GSA and OMB aren't connected the way you describe. They just happen to be the respective parent agencies of 18F and USDS-HQ. Here's a tree. POTUS ├── GSA │ └── 18F └── OMB ├── USDS-HQ └── MAX
  - Animats 11y ago

dfar1 11y ago

Hopefully this guide will be updated as time goes on to stay relevant as technology changes. Otherwise in a few years from now, everything will look outdated again.

timdorr 11y ago
It's all open source and in the public domain: https://github.com/18F/web-design-standards https://github.com/18F/web-design-standards They're also pretty active with the pull request system: https://github.com/18F/web-design-standards/pulls https://github.com/18F/web-design-standards/pulls and have a CONTRIBUTING guide: https://github.com/18F/web-design-standards/blob/18f-pages-staging/CONTRIBUTING.md https://github.com/18F/web-design-standards/blob/18f-pages-s... I attended a presentation by one of the people working on the project last week and they put a lot of thought into both how to make this a usable guide for now and how to keep it growing into the future. The USDS has attracted some really great people lately, and it shows!
krschultz 11y ago
Looking outdated isn't the worst thing in a world. I think National Forest signs look like hotel signs from the 1950s, and that's probably not a coincidence. What's more interesting is if this will lead to better maintainability. Since this includes code as well as guidelines, hopefully it will reduce the variation between various agencies' websites. That in turn should make future upgrades more uniform and therefore less costly.
- dbarlett 11y ago
  If you're curious, Forest Service signs are specified by Sign and Poster Guidelines Engineering Manual EM7100-15 [1]. [1] http://www.fs.usda.gov/Internet/FSE_DOCUMENTS/stelprd3810021.pdf http://www.fs.usda.gov/Internet/FSE_DOCUMENTS/stelprd3810021...
  - noir_lord 11y ago
    That standard is incredible, I had a good flick through it just in awe of the level of specification that goes into signage, I love that type of stuff, it's a hidden world.

azeirah 11y ago

When design becomes a standard, is its purpose not lost?

JeffreyKaine 11y ago
As a designer, my job isn't to "design a website," it is to design patterns of UI/UX and a framework to build new features and interactions for a particular application. Basically, a designer's first job is to design the lego blocks. Then she can build stuff with it. The application in this case is the U.S. Government. The purpose of this design is to provide the lego blocks and framework for developers and designers to build an interaction layer for the federal government.
SapphireSun 11y ago
It depends on what you're trying to achieve. US Government sites aren't about creating an artistic experience. It's more important that digital services are delivered consistently and give citizens a good UX. As an experience, the design hinges on creating trust, accessibility, and being able to carry what you've learned about the interface to different sites. These things won't degrade easily with time. For instance, the significance of the color blue won't change rapidly (barring a large scale invasion by blue extraterrestrials).
hippich 11y ago
You might be thinking about different "design". In this particular case USDS tries to "design" (as in engineering or architecture) efficient, cross-organizational set of guidelines to keep look consistent across all government websites. This should lead to same standard of UX and AX, which should lower amount of confusion of customers and lower costs building new projects. You can think about it as of Twitter Bootstrap for government websites.
gopowerranger 11y ago
I think this is a "style guide" and not a "design standard".
Bjartr 11y ago
Not if the purpose is to communicate more effectively and be more usable to more people.

Animats 11y ago

OK, now that it's back up, let's take a look at the examples. There's a "register to vote" page, but that's trivial. Here's a more difficult one - a mockup of a Veterans Administration form.[1] This is clearly for use by a Government employee, not the public. (The first question one asks is, if an appeal is "certified", why does it also have to be "activated" by a human before anything happens? But that's the organization's problem, not web design.) It's a high-contrast layout, to support the visually impaired. Although it does have both white on black and black on white buttons, visually it seems OK. The form has a pull-down for "Confirm type action". This isn't a "Confirm" button, it's a selection option, for selecting the type of bureaucratic action. There are several documents mentioned, "Form 8", "Form 9", etc. These are in bold sans-serif blue text. The "NOD" document is apparently missing, so you couldn't view it, but the text for it is the same as for the documents you can view. At the end of each line is the word "Change", in the same font and color. It's not clear if "Form 8" is clickable, leading to a view of the form. "Change" is presumably clickable, and ought to lead to a popup. It's not clear whether changes commit immediately, or when the final buttons at the bottom ("Reassign" or "Activate Appeal") are clicked. The "POA" heading is misaligned. You can tell they used table-less design - things don't line up right. This form is useful only if the user has paper materials on hand against which they are checking. Functionally, this form is exactly equivalent to something on a green-screen IBM 3270 terminal from 30 years ago, which may be what it is emulating. This is their example of good Government web design. [1] https://playbook.cio.gov/designstandards/assets-styleguide/img/home/example_VAappeals_full_mock.png https://playbook.cio.gov/designstandards/assets-styleguide/i...

tcdent 11y ago
You're probably better off submitting an issue on GitHub than dropping a bug report here.
benaiah 11y ago
> The "POA" heading is misaligned. You can tell they used table-less design - things don't line up right. Um, that's not the case. Those look like table tags, as they should be (it's a table). The only problem is that that column header is left-aligned, not right-aligned like the rows are. Most of your complaints are bullshit, frankly, and the rest are about interaction design/UX, not visual design, which is all that this project claimed to be. The visual design and layout look fine, with the exception of that misaligned column heading (the horror!).

Numberwang 11y ago

I really like the look of this and think it is a great initiative. Especially as I am the only human on earth who don't love Material Design more than my own mother.

tracker1 11y ago
I think that material design works well for applications in particular... a lot of the time too much is shoveled into applications without a concern for information overload, material design enforces this to some extent. That said, even looking a step back towards, for example twitter bootstrap, it's about keeping things clean and orderly. One of the examples I appreciated was the password prompt, too often what is allowed in a password isn't clear, and to be honest, I'm almost in favor of allowing pretty much anything, I wish people would use "passphrase" instead of "password" and encourage multi-word phrases, even a full sentence. "Fear is the mind k1ll3r." for example.

mbesto 11y ago

Nice, they use SASS/Bourbon/Neat for their styling.[0][1] Huge fan and recommend it to anyone using Ruby for web development. [0] - https://playbook.cio.gov/designstandards/getting-started/ https://playbook.cio.gov/designstandards/getting-started/ [1] - http://bourbon.io/ http://bourbon.io/

ksml 11y ago
I second this recommendation, even for those not using Ruby! The Sass compiler is written in Ruby but that doesn't mean you have to know Ruby to use Sass.
- rakk 11y ago
  If you can do without the latest of the latest in Sass I highly recommend using a libsass implementation. So much faster than the Ruby version! OT: I also like that they've used a BEM-like approach, although I personally prefer a double underscore as separator between elements.
  - tracker1 11y ago
    I've been using node-sass (libsass wrapper) recently, which hasn't been too bad compared to less (which is native to node/js). Seems to be working fine with bootstrap-sass, and surprisingly fast, compared to less, so I imaging the ruby sass implementation would be similarly slow by comparison.
  - STRML 11y ago
    Libsass is night & day vs Ruby Sass. No problems using libsass with Bourbon, Bourbon thankfully stays away from the bleeding-edge features (many of which can be emulated with clever functions). In a previous project, we saw Sass compiles go from ~15s to about 400ms by moving to libsass. Completely changes the development cycle (with HMR or livereload) as you see changes immediately.
freshyill 11y ago
I really used to love Bourbon and Neat, but they're unnecessary today. The vendor prefix mixins are mostly obviated by modern tools like Autoprefixer, and Neat itself can be mostly reduced to a Sass mixin.

danso 11y ago

I encourage people to check out 18F's Github repos...there's a lot of useful tools and libraries, for starters. And then there's full projects to learn from, such as APIs and front-facing static sites. I don't know if they use any other kind of project manager besides Github Issues, but their projects have among the most active Issues activity...it seems that the USDS/18F team uses them as project discussion rooms that also happen to be public...as they should be for government, public facing work. And they accept pull requests from the public...here's one I made to make their style guides more readable on mobile/non-traditional-browsers: https://github.com/18F/content-guide/pull/43 https://github.com/18F/content-guide/pull/43 They talked about it amongst themselves (in public) and then merged it in. I know that's part for course for most industry teams...but not for the federal government. Think about all the regulations and CYA-guideliens (cover-your-ass) that have built-up over the years that would've made accepting code, or any input, from a total outsider, to be...not a priority. A few years ago I remember finding a very obvious, easily fixable XSS vulnerability across all of the Department of Homeland Security sites...not only was it hard to find a point of contact, but I was pretty much ignored until I sent emails to US-CERT, and then also threatened to have a tech journalist write about it. With the USDS projects, it's a completely different paradigm to work via systems like Github. At the very least, you can more easily take credit for suggestions/fixes you made.

rev_bird 11y ago
>A few years ago I remember finding a very obvious, easily fixable XSS vulnerability across all of the Department of Homeland Security sites... I think if I were in this situation today, I just wouldn't say anything. Being ignored would be one of the good outcomes; I'd be terrified of getting chucked into court for being a "HACKER AGAINST HOMELAND SECURITY."
- chris_wot 11y ago
  Disclosing the vulnerability - what law could they prosecute you under?
  - Ntrails 11y ago

deleted 11y ago

[deleted]

rymndhng 11y ago

Interesting. Another place where I've seen something similiarly done is for the Canadian Gov't. See https://github.com/wet-boew/wet-boew https://github.com/wet-boew/wet-boew

rootedbox 11y ago

Thanks Obama.

kin 11y ago

What a great step in the right direction. Every time I navigate through another government website in search of information, it is a different experience. I'm all for consistency and can't wait until this is well adopted in all the .gov's I find myself visiting.

jamie_ca 11y ago

Oh goodie, now there's a canonical description of how to make a US gov't website for all the phishers out there...

coldtea 11y ago
The design level is the wrong level to solve the fishing problem. Any site can be immitated, and 100 differently-looking sites can be immitated with almost the same ease as 100 same-looking ones... For one, you don't even have to create anything -- you just download the original assets, and merely inject some JS or change a form destination in your version. So mirrorring (wget -mkp http://foo.bar http://foo.bar) designs is not that more difficult...

mattchue 11y ago

Doesn't this make it incredibly easy for phishing websites to be created? I suppose such websites would exist anyway, but this would certainly diminish a user's ability to differentiate between a legitimate .gov or another page with malicious intent at a glance.

chuckgreenman 11y ago
That was my thought at first glance too, however it is already really easy to just download a sites assets and make a mock up. Sometimes you just have to trust that people are going to pay attention before submitting sensitive information on the net.
lockes5hadow 11y ago
Not any easier than it already is. There are tools like Social-Engineer Toolkit (SET) that make it dead simple to launch all sorts of phishing attacks.

Havoc 11y ago

When looking at a random website I expect to know roughly what I'm looking at within 20 seconds - max. Ideally 5 if not text heavy. >shared set of tools [...] government websites That is exactly what I wanted to know. Pity thats hidden on page 3 and I had to read credits & something about some Joanne's problems first. The narrative story flow is fine...but you've got to give something solid up front. e.g. Do the startup cliche and say how you're revolutionising the world in a short sentence. Then launch into the speech about Joanne's problems...

straws 11y ago
That's a bit unfair — you're talking about an expository and introductory Medium post. Compare that to the first sentence of the guide itself: Open source UI components and visual style guide to create consistency and beautiful user experiences across U.S. federal government websites.

Duhveed 11y ago

"It doesn't do anything useful and it only loads Saturdays at 3am, but it sure has some syntactically awesome stylesheets!" ...Anyway, it sounds good on paper.

jlukic 11y ago

Nice! I did notice some of the component definitions look like very close paraphrases to Semantic UI's component descriptions though, but I'll take that as a good thing.

scoot 11y ago

"is it possible to create a shared set of tools to provide consistent, beautiful, and easy-to-use government websites?" Yup: http://gov.uk http://gov.uk They even copied the colour scheme: https://playbook.cio.gov/designstandards/visual-style/#colors https://playbook.cio.gov/designstandards/visual-style/#color...

sosuke 11y ago
Imitation is the sincerest form of flattery. I thought of gov.uk as well. I hope 18F took influence from gov.uk's user testing on form design as well.
z1mm32m4n 11y ago
Not gonna lie, I confused this site for one of those sites you see on parked domains. I can see a resemblance with respect to the color scheme, but I think the entire design aesthetic is completely different.
- comex 11y ago
  I had the same impression (on an iPhone). I'm not really sure what contributed to my unconscious snap judgement, but I think it has to do with the layout of the search box and list of links, along with the lack of images (other than a little icon in the corner) and the four copies of the domain name (in all caps) on the page.
  - huac 11y ago
    The "popular on gov.uk" links are in that perfect mix of random and search engine keyword that domain parkers love (SEO baby!)
britta 11y ago
These UK and US government tech efforts have a friendly relationship: https://www.whitehouse.gov/blog/2015/09/24/uk-and-us-meet-forge-new-steps-toward-even-closer-digital-collaboration https://www.whitehouse.gov/blog/2015/09/24/uk-and-us-meet-fo...

chuckgreenman 11y ago

I really like this, but as someone who recently went through the federal loans process I know that the interface isn't the only thing holding back our government's web presence. Can we adopt a standard work flow? Something that behaves as expected when you submit forms?

hiharryhere 11y ago

There's a number of comments here about this making phishing easier. The bigger issue is that the US gov doesn't consistently use .gov domain names. http://www.ustraveldocs.com/ http://www.ustraveldocs.com/ This is the official US gov site for applying for a visa. Given there are so many dodgy immigration agents operating with .com addresses it makes no sense as to why the official site is not just 'visa.gov'.

toxican 11y ago
Can anyone think of any reasons that any and all interaction with the US Government via the web shouldn't take place via a .gov website? If something like healthcare takes place on a .gov site, visas definitely should.
- acdha 11y ago
  Good reasons, no, but check out what getting a .gov domain looks like: https://www.dotgov.gov/portal/web/dotgov/registration-process https://www.dotgov.gov/portal/web/dotgov/registration-proces... https://www.dotgov.gov/portal/web/dotgov/policy#10217335 https://www.dotgov.gov/portal/web/dotgov/policy#10217335 It's really easy to imagine a lowly staffer with an unrealistic deadline or contractor deciding to register a .com to use for a demo and thinking they'll go through simply learning who the official contact is, getting the agency CIO / agency head to sign off, dealing with internal politics[1], etc. later and then never actually getting around to that part. At some point the argument probably became “Now we've advertised it too much to change”. 1. At large organizations both public and private I've seen this kind of fragmentation happen because person A wanted a project to exist and person B, who controlled DNS, thought it should be included in their application (horrible vendorware, the first big Cold Fusion project they personally managed which will be upgraded over their dead body, etc.).
  - 11y ago

SeeDave 11y ago

Nice work Mollie and team!