Introducing U.S. Web Design Standards
medium.com
medium.com
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
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.
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."
[0] - https://playbook.cio.gov/designstandards/getting-started/
[1] - http://bourbon.io/
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.
I couldn't write a damn thing in Ruby and I utilize it every day via SASS/Compass
Yup: http://gov.uk
They even copied the colour scheme: https://playbook.cio.gov/designstandards/visual-style/#color...
https://medium.com/@prenticemathew/ux-specialists-are-killin...
Now that we have gov.uk, whenever I google something about doing my tax, or registering to vote at a new address, or any other arduous governmental admin shit, I usually end up on a beautifully simple and focused gov.uk page, and I'm in and out in 2 minutes. That's what a government website is about.
I agree the homepage looks like a parked domain but whatever. Take a random page like this: https://www.gov.uk/alter-a-will-after-a-death
Look at how brief and clear the writing is. Look at how straightforward its URL is. Have a look at some more pages, look how consistent the design language is. This is exactly what a government website should be like.
The introduction to the article shows several different styles of registration or login button used across different US govt departments, but the key point here is that they're all separate user identities requiring separate logins. Making visually identical login flows that actually require different credentials to log into separate services actually makes things worse for periodic users of multiple government sites. What's needed as an even higher priority than changing the buttons is a uniform OpenGovernmentID everywhere it makes sense to do so
Priority number two for ease of use in government websites would probably be fixing link rot, since government websites have a horrible tendency to deep link to other departments just before that department's site gets reorganised or renames (and departments whose sites were replaced by the gov.uk platform unfortunately are no exception)
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'.
https://www.dotgov.gov/portal/web/dotgov/registration-proces... 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.).
There are something like 5,300 domains on the list currently:
https://github.com/GSA/data/blob/gh-pages/dotgov-domains/201...
I'm curious how many of those are actively supported and secure – I'd bet there are a least a few where almost nobody even remembers registering it.
Now, for improved consistency, adopt the metric system.
https://en.wikipedia.org/wiki/Metrication_in_the_United_Stat...
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.
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
[1] https://playbook.cio.gov/designstandards/
Update: now it's up.
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
└── MAXGSA has forklifts. OMB has clout.
>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...
Open source UI components and visual style guide to create consistency and
beautiful user experiences across U.S. federal government websites.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.
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.
They're also pretty active with the pull request system: https://github.com/18F/web-design-standards/pulls and have a CONTRIBUTING guide: 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!
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.
[1] http://www.fs.usda.gov/Internet/FSE_DOCUMENTS/stelprd3810021...
https://www.gov.uk/government/publications/traffic-signs-man... (chapter 7 is best, for kerning rules, and making and face the right way).
Sometimes you just have to trust that people are going to pay attention before submitting sensitive information on the net.
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.
You can think about it as of Twitter Bootstrap for government websites.
That's not because its purpose is lost for design conformity, but because those are peak designs that work best for what they need to do.
The only purpose design for government sites has is to be able to give information quickly and in a legible and accessible way. No artistic ambitions here. That can be standardized very well.
Except that's the point of the OP's comment. These items actually do not have any explicitly declared standard like this design standard published by the government. Design became standardized through people landing on a good design, not through a government mandate.
I don't think that that's his point -- I see this as orthogonal to whether there is a standard or not.
The reason those don't have a standard is merely because they are so simple they don't need a full document to describe them.
And I don't see a clash between a "goverment mandate" and "design", since in this case the government mandate is exactly a design, that is, the work and output of a set of designers working for the government.
It's not like some random bureucrat that knows nothing about the web created the standard.
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) designs is not that more difficult...
(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/i...
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!).
Interaction design is what it's all about. This page would work equally well with the browser's default fonts and colors.