building blocks for your modules ui
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
![Page 1: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/1.jpg)
Building blocks for your module's UI
Bojhan Somers & Roy Scholten
![Page 2: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/2.jpg)
Who are we?
Drupal 7 User Experience Maintainers UX Team
![Page 3: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/3.jpg)
About
![Page 4: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/4.jpg)
Pattern
• Common design problem• Solution• Solution rationale• Visual examples
![Page 5: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/5.jpg)
Why Pattrens?
2500+ modulesconsistency
![Page 6: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/6.jpg)
![Page 7: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/7.jpg)
Why Patterns?
![Page 8: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/8.jpg)
Proven interactions
![Page 9: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/9.jpg)
Lets get started!
Forms...
![Page 10: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/10.jpg)
Radio
![Page 11: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/11.jpg)
Checkbox
![Page 12: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/12.jpg)
Checkbox
![Page 13: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/13.jpg)
Select list
![Page 14: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/14.jpg)
Select list
![Page 15: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/15.jpg)
List box
![Page 16: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/16.jpg)
And buttons, text fields, text areas…
![Page 17: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/17.jpg)
Grouping form elements
![Page 18: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/18.jpg)
Fieldsets
![Page 19: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/19.jpg)
Vertical tabs
![Page 20: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/20.jpg)
Machine name
Clicking on “Edit”
![Page 21: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/21.jpg)
Listing pages
![Page 22: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/22.jpg)
Tables
![Page 23: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/23.jpg)
Table: Drag & Drop
![Page 24: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/24.jpg)
Table: Emtpy state
![Page 25: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/25.jpg)
Filter
![Page 26: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/26.jpg)
Filter
Boolean Interface
![Page 27: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/27.jpg)
Local tasks: Tabs & Actions
![Page 28: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/28.jpg)
And
![Page 29: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/29.jpg)
Copywriting
![Page 30: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/30.jpg)
The fastest way to improve your interface is to improve your copy-writing
![Page 31: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/31.jpg)
![Page 32: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/32.jpg)
Omit needless words
![Page 33: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/33.jpg)
Omit needless words
![Page 34: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/34.jpg)
Active wording
Passive:
Allows enabling of…
Active:
Enable…
![Page 35: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/35.jpg)
Consistency
Don't use different words that point to the same thing: post, node, content…
![Page 36: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/36.jpg)
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
![Page 37: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/37.jpg)
Summary
• Forms• Grouping items• Listing pages• Copywriting
A libary of pattrens.
![Page 38: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/38.jpg)
Feel free to break!
![Page 39: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/39.jpg)
Drupal 7• New Information Architecture• New pattrens• Yet to be tested
![Page 40: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/40.jpg)
Drupal 8?Futher abstraction
![Page 41: Building Blocks For Your Modules Ui](https://reader033.vdocuments.us/reader033/viewer/2022061119/546a91e5af79597f788b7058/html5/thumbnails/41.jpg)
Thanks
• We are working pattren libary want to help out
• [email protected]• [email protected]
• Or #drupal-usability freenode IRC