Download - Building Blocks For Your Modules Ui

Building blocks for your module's UI

Bojhan Somers & Roy Scholten

Who are we?

Drupal 7 User Experience Maintainers UX Team

Pattern

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

Why Pattrens?

2500+ modulesconsistency

Why Patterns?

Proven interactions

Lets get started!

Forms...

Checkbox

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

Copywriting

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

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

• [email protected]• [email protected]

• Or #drupal-usability freenode IRC