Skip to content Skip to navigation

Discussion: Application UI (& Show & Tell)

January 30, 2015 - 3:00pm to 4:00pm
Knight Management Center C223

UXers is a community of practice for members of the Stanford Community.

Let's discuss Application UI and interaction patterns (for things like forms, status bars for processes, etc.) best practices and try to dig up some examples.

Also feel free to bring what you're working on to get feedback from the group.

Not able to make it to the GSB?
Join UXers over Bluejeans:



What if.... we had a central, Stanford-branded, thorough and deep style and interaction guide for application UI/UX?

Some things we should get right and do the same all the time:

  • Multiple authentication login options (e.g. for StanfordWho directory)

  • Status indicators

Would be awesome if:

  • Provide code examples of full flows for interactions in a Github repo, with HTML, CSS, Javascript -- assume you would need to modify it or find a matching library

  • Share code for different application frameworks/platforms (e.g. Force)

  • Community driven - developers contribute back

  • List of anti-patterns -- don’t do this!!! instead do XYZ

What format would be best for hosting a component guide like this?

  • Github

    • github pages

  • Drupal

    • This could let us have discussions, like

If we could choose five interactions to be the same everywhere at Stanford:

  • Logging in

  • Save/submit/cancel - Form submit

  • Alerts & error handling

  • Contextual help

  • Loading/pending - Status indicators

  • When to use what kind of form element (radio vs. select list)

  • What do you hide advanced options? Threshold for complexity

Adoption is hard.

  • What if we start within our various groups, but coordinate together to choose best practices for key patterns

  • Would need to make sure it’s in a format that is useful -- like Bootstrap, not Dreamweaver templates!!

    • must be chunked into components code

We want flexibility, but we also want identifiable UI for central applications.

Form code is what matters, how it acts matters.

UIT applications look the same.

GSB applications look the same.

Might need a skin for things in BETA


  • Responsive

  • Accessible

You are designing something when you deliver software. Unconscious design.

You may as well get the basics right. Pattern libraries can help with that.

“Design” and “design” are the same thing.

Being a designer is being a COACH.

Next steps:

  • Workshop through some of the top patterns to decide on best practices and document them

  • Find examples of pattern libraries that exist (we don’t want to make this up!)

  • Collect contacts for an interest group (mailing list, hosted at UXers bi-monthly?)

    • GSB

    • CRC

    • AS

    • UHR

    • SoM

  • Look at IT Unconference session notes to find interested people

  • Mobile Awareness project group might also have people

  • Announce another discussion at UXers, bring some stuff to work on (Megan & Scotty - AWS)