Building Blocks For Your Modules Ui
41
Building blocks for your module's UI Bojhan Somers & Roy Scholten
-
Upload
roy-scholten -
Category
Design
-
view
3.246 -
download
0
description
There are more interface patterns available to Drupal module developers then ever before. Drupal has standars for writing code. But what about the interface? Tabs, accordions, fieldsets, overlays, hover links etc. When to use which? Join Bojhan Somers and Roy Scholten from the UX-Team for a tour of the available options and some advice on when to use each one. Consider this talk the kick-off for getting our ui-pattern library in shape. It's been asked for a lot. We will cover the following topics : * UI-Pattrens * Best practices (designing for context) * Users mental model vs. Drupal's implementation model * Experiences from the field With the Drupal 7 release on the horizon and the excellent D7CX initiative, *now* is the time to take advantage of these new patterns.
Transcript of 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
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
• [email protected]• [email protected]
• Or #drupal-usability freenode IRC
