Public Lab Research note


Introducing a (draft) Style Guide for Public Lab

by warren with sylvan | May 07, 2019 20:07 | 262 views | 10 comments | #19270 | 262 views | 10 comments | #19270 07 May 20:07

Read more: i.publiclab.org/n/19270


For a long time, folks making new pages and interfaces at PublicLab.org have not had much (if any) guidance or direction, and, understandably, have brought their own ideas to the project. This is great initiative, but we could do a better job setting some clear design conventions, and the whole site would benefit from some more consistency.

@sylvan and I have been working on a Style Guide to serve this purpose. This guide is designed to support coders, designers, and writers building and designing pages on PublicLab.org.

We're at a point where we could use some input and feedback, so here's a draft!

Our goals include:

Simpler and more consistent design

  • Easier to understand and use: clear and well-explained guidance for design will make it easier to start doing UI work at Public Lab, and easier for people using PublicLab.org to use.
  • Less customization: using standard libraries like Bootstrap 4 (http://getbootstrap.com) and less custom code will make it less fragile, more compatible and accessible, and easier to upgrade. We strongly encourage using widely familiar interface design conventions, so people don't to have to "learn how to use PublicLab.org."
  • Easier to maintain: with a set of standards, it will be clearer what UI /should/ look like, and less likely that it will diverge and become inconsistent or messy. Less code will be easier to maintain at a high level of quality in the long term.
  • More support and guidance for people designing new pages/interfaces

Increased stability

  • Better organized UI code: cleaning up our code, reducing redundancy, and standardizing (and re-using) templates will make it easier for everyone to do good UI design overall.
  • Better UI tests: our new System Tests enable testing of complex client/server interactions exactly like a user will experience them. We aim for high coverage: https://github.com/publiclab/plots2/issues/5316
  • Fewer UI breakages: all of this should contribute to fewer bugs system-wide.

This guide won't cover every situation, but will establish an overall approach to UI design that all our work should build on cohesively.

Check out the draft style guide here -- comments and input are very welcome!

https://docs.google.com/presentation/d/1-XHlVn3KQxSjS5WzHgc1l1qvFwqUC5f3-7GXugUP9u4/edit?ts=5cab5403#slide=id.g58d9556a0e_1_523

We'll be adding more and more annotations as we go, so that it's clear /why/ we've made these recommendations, and how to apply them.

We'll also be following up in a later version with code samples and links to templates!


9 Comments

@warren has marked @sylvan as a co-author.

Reply to this comment...


Looks great! Also, is there a Barnstar for most impressive use of GooglePresentations for layout? You two would get it.

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


Notes from discussion with @pdurbin:

so, we can embed gists
i'd like to embed something where you can switch to see the rendered HTML too, though
anyone know a site like that?
best would be doing that through a GitHub repository even!
yeah maybe the slide deck will be the working document
with messier comments and such

Test of embedding code example Gists in a collapsible section:

Screen_Shot_2019-05-08_at_10.59.30_AM.png

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


Nice!

Reply to this comment...


Hi @warren I saw your comment in one of the slides regarding blue buttons everywhere. How about keeping blue for primary and main buttons but for other features like tags and all, we can have many more great combinations. I tried this in one of my PR. And this looks great 56470701-d71db180-6466-11e9-9c57-63ec612ffc70.png

Bootstrap has many button color classes, we can try them.

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


Oh, interesting -- can you share a screenshot? In general, I am wondering if we can be quite sparing with colored buttons so as not to overwhelm people with choices. But I'm open to suggestions and would love to see what you've got!

On Thu, May 9, 2019 at 1:22 PM \<notifications@publiclab.org> wrote:

Hi! There's been a response to your research note 'Introducing a (draft) Style Guide for Public Lab'. You can reply to this email or visit this link:

https://publiclab.org/notes/warren/05-07-2019/introducing-a-draft-style-guide-for-public-lab#c24087

lekhidugtal wrote:


Hi @warren I saw your comment in one of the slides regarding blue buttons everywhere. How about keeping blue for primary and main buttons but for other features like tags and all, we can have many more great combinations. I tried this in one of my PR. And this looks great Bootstrap has many button color classes, we can try them.


Look like spam? Mark this as Spam

Reply at: https://publiclab.org/notes/warren/05-07-2019/introducing-a-draft-style-guide-for-public-lab#c24087

Report abuse to: moderators@publiclab.org

Check out the blog at https://publiclab.org/blog | Love our work? Become a Public Lab Sustaining Member today at https://publiclab.org/donate If this email title has an ID in the format #0000, you can reply with the email you use at PublicLab.org and your response will be posted as a comment on the website.

Is this a question? Click here to post it to the Questions page.

Oh, sorry, i didn't see the screenshot in the email, maybe I didn't wait for it to load. Thanks!

So, on a very detailed technical page like the revisions page I'm not so worried. But on leading pages, especially "above the fold," I think the question of "too many choices" and too noisy colors is something to be cautious about.


Also noting, as I commented in https://publiclab.org/notes/warren/04-22-2019/user-interface-projects-update-and-dial-osc-project-recap, that this Style Guide has expanded upon and refined work from the DIAL UI projects (in that link), and we may need to update those designs a bit.

But fundamentally the Style Guide incorporates, refines upon, and "generalizes" a lot of the work that went into that project. So they largely still stand, but the Style Guide is an attempt to make a more holistic guidance document from them that can be applied to other pages as well!


I especially wanted to note the shift, which was a major breakthrough of the DIAL UI project, away from listing all posts in a single "firehose," and towards displaying our topics. This has some really serious and excellent ramifications:

  1. It presents Topics (formerly Tags) as a set of topically-focused communities, essentially like a forum. This is reflected in the card design for Topics.
  2. It orients many things around these Topics, like creating a post (within a topic, rather than just on anything), Subscribing, and may even be part of future plans for spam management (just within a topic you're "moderator" in, perhaps?). Wikis may start to "live inside" topics, conceptually.

This is all still evolving, but is an important part of our Style Guide so we'd love to hear input.

Screen_Shot_2019-05-09_at_2.00.47_PM.png

Is this a question? Click here to post it to the Questions page.


Reply to this comment...


Login to comment.

Public Lab is open for anyone and will always be free. By signing up you'll join a diverse group of community researchers and tap into a lot of grassroots expertise.

Sign up