Building blocks for your module's UI

Bojhan Somers & Roy Scholten

Who are we?

Drupal 7 User Experience Maintainers UX Team

About

Pattern

• Common design problem• Solution• Solution rationale• Visual examples

Why Pattrens?

2500+ modulesconsistency

 

Why Patterns?

Proven interactions

Lets get started!

Forms...

Radio

Checkbox

Checkbox

Select list

Select list

List box

And buttons, text fields, text areas…

Grouping form elements

Fieldsets

Vertical tabs

Machine name

Clicking on “Edit”

Listing pages

Tables

Table: Drag & Drop

Table: Emtpy state

Filter

Filter

Boolean Interface

Local tasks: Tabs & Actions

And

Copywriting

 

The fastest way to improve your interface is to improve your copy-writing

 

Omit needless words

Omit needless words

Active wording

Passive: 

Allows enabling of…

Active:

Enable…

Consistency

Don't use different words that point to the same thing: post, node, content…   

Banned words!

node (use content our 'piece of content')Drupalpost (as a noun, to post as a verb is ok)should, would, don't…   Starting a styleguide:

http://drupal.org/node/501452

Summary

• Forms• Grouping items• Listing pages• Copywriting

A libary of pattrens.

Feel free to break!

Drupal 7• New Information Architecture• New pattrens• Yet to be tested

Drupal 8?Futher abstraction

Thanks

• We are working pattren libary want to help out

• Bojhan@bojhan.nl• Roy@yoroy.com

• Or #drupal-usability freenode IRC