
Introducing U.S. Web Design Standards - tswicegood
https://medium.com/@USDigitalService/introducing-u-s-web-design-standards-aff21383afd6
======
danso
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
>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
Disclosing the vulnerability - what law could they prosecute you under?

~~~
Ntrails
Depends how you found/testes/found it. In general it's a case of being
uncertain what they could do if they decided to.

~~~
chris_wot
Holy Typo Batman!

------
mbesto
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
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
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.

~~~
STRML
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.

------
scoot
_" 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/#color...](https://playbook.cio.gov/designstandards/visual-
style/#colors)

~~~
philliphaydon
Gov.UK is a terrible website.

[https://medium.com/@prenticemathew/ux-specialists-are-
killin...](https://medium.com/@prenticemathew/ux-specialists-are-killing-web-
design-50b7d7607c13)

~~~
callum85
That article is bullshit. You can't judge gov.uk by its homepage, because
that's almost never where you land.

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](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.

------
hiharryhere
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
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
Good reasons, no, but check out what getting a .gov domain looks like:

[https://www.dotgov.gov/portal/web/dotgov/registration-
proces...](https://www.dotgov.gov/portal/web/dotgov/registration-process)
[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.).

~~~
toxican
The process looks about as bureaucratically complicated as I would expect.

~~~
acdha
Yeah, and I'm not even sure that's wrong: trusted top-level domains should be
hard to get since they'd make great phishing sites.

There are something like 5,300 domains on the list currently:

[https://github.com/GSA/data/blob/gh-pages/dotgov-
domains/201...](https://github.com/GSA/data/blob/gh-pages/dotgov-
domains/2015-03-15-full.csv)

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.

------
JorgeGT
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
Which country?

~~~
JorgeGT
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.

------
Animats
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.

~~~
zeckalpha
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
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
GSA, the General Services Administration, is the purchasing, construction, and
building operations unit of the US Government. They're a huge operation, with
a $20 billion budget and operations all over the US. The Office of Management
and Budget is a White House staff unit with about 500 employees, most in an
office building next to the White House.

GSA has forklifts. OMB has clout.

------
kin
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.

------
chuckgreenman
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?

------
rymndhng
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)

------
Havoc
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
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.

------
Numberwang
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
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.

------
ampersandy
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.

------
jlukic
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.

------
dfar1
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.

~~~
krschultz
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
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...](http://www.fs.usda.gov/Internet/FSE_DOCUMENTS/stelprd3810021.pdf)

~~~
noir_lord
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.

~~~
Symbiote
The British standards for road signs and markings are also online, and with
much better typography :-)

[https://www.gov.uk/government/publications/traffic-signs-
man...](https://www.gov.uk/government/publications/traffic-signs-manual)
(chapter 7 is best, for kerning rules, and making and face the right way).

------
mattchue
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
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.

------
SeeDave
Nice work Mollie and team!

------
rootedbox
Thanks Obama.

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

~~~
coldtea
No, it's fullfilled. The design of the average table, pencil, glass, fork,
spoon, text-based book etc. is fairly standard (save for few ornamental
details).

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.

~~~
jsnk
> average table, pencil, glass, fork, spoon, text-based book etc. is fairly
> standard (save for few ornamental details).

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.

~~~
coldtea
> _Except that 's the point of the OP's comment._

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.

------
Duhveed
"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.

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

~~~
coldtea
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...

------
Animats
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/i...](https://playbook.cio.gov/designstandards/assets-
styleguide/img/home/example_VAappeals_full_mock.png)

~~~
benaiah
> 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!).

~~~
tptacek
This would have been a great comment without the word "bullshit", which made
the whole thing read needlessly venomous.

~~~
benaiah
Re-reading this a couple hours later, I agree. I responded to needless
negativity with more needless negativity. Guess my IRC habits have been
leaking into my other hobbies. I'd edit it, but it's been too long since it
was posted.

~~~
philliphaydon
There's no need to apologise for using the word bullshit. It's bullshit that
we have to be PC about words we use.

~~~
tptacek
This is nothing to do with political correctness. The word "bullshit" is
perfectly fine; it's the way it was used here.

