Drupal 7 User Experience

Bojhan Somers & Roy Scholten

Drupal 7

• Fields (CCK in core)• Image handeling• Update manager• RDF• Database abstraction layer• Simpletest• Much more..

Drupal’s Usability

*sucks*

Drupal’s unusability

2008• 2 Usability lab tests• Dries zegt dat het gefixed moet

worden• UX-team vormt zich

2009: Drupal 7UX

Mark Boulton Leisa Reichelt

Grooste problemen

• Wat is de voorkant (site) en de achterkant (admin)?

• Waar vind ik mijn content?• Waar vind ik mijn functionaliteit?• Veel kleine problemen

Kern van het probleem

• Drupal 6 : focus puur op developer• Drupal 7 : focus ook op content

schrijver

Probleem 1

Wat is de voorkant (site) en de achterkant (admin)?

Probleem 2

Waar vind ik mijn content?

Probleem 3

Waar vind ik mijn functionaliteit?

Probleem 4

Kleine problemen• Teksten• Workflow

Before

After

Before

After

Contextual links

Actions

Module links

Nog veel meer…

• Dashboard• Shortcuts• Default installation profile• Vertical tabs• Password checker• Poormans cron• En nog veeeel meer…

Theming Drupal 7

Less is more…

Bye-bye ugly old themes

What about Garland?

 

New front-end theme in progress

New admin theme: Seven

New theming tools

New no-theme: Stark

More focus on front-end code

Cleaner core .tpl files CSS re-organised  More theming power / flexible rendering

tpl.php ("tipplephip")

html.tpl.php

Page anatomy

region.tpl.php

CSS

Dynamicly add classes

Everybody hates system.css

system.css splitup

system.css – for presentation system-behavior.css – for widgets like drag&drop, autocomplete textfields, collapsible fieldsets etc.

CSS code styleold                                                 new

 http://drupal.org/node/302199

php

Flexible rendering

themes can hook_form_alter

hook_page_alterbewerk de pagina voordat deze gerendered wordt

hook_form_alterbewerk formulieren voordat deze gerenderd worden

hook_js_alterjavascript wijzigen

hook_css_alterbewerk of verwijder CSS (-files) voordat de page gerenderd wordt

hook_form_alter example

hook_form_alter example, 2

And much much more…

Changes, changes

jQuery UI 1.8 in core D6: node-article.tpl.php       >         D7: node--article.tpl.php $footer, $slogan, $help vars turned into regular blocks

Main $content made into a block, with 'content' a new mandatory region All theme functions now take a single argument, $variables

Upgrade docs: http://drupal.org/update/theme/6/7

Is Drupal 7 ready yet?

Almost there…

For D6: Mothership theme Core:

Mothership:

For D6: Semantic views moduleBefore After

Tips for Drupal 6 fronteers…

Mothership theme – clean html css base themehttp://drupal.org/project/mothership

   Semantic views module – cleaner views outputhttp://drupal.org/project/semanticviews

Lichtgewicht CSS theming voor Drupal 6 – theming introductiehttp://www.yoroy.com/node/12

Theming docs & info

Upgrade docs: http://drupal.org/update/theme/6/7

Theme functions:http://api.drupal.org/api/group/themeable/7

Presentation video:Explore the glory of Drupal7s improved render and theming systems (http://ow.ly/1qw31 )

Design in open source

Few designers: pick your battles Communicating design to a large audience is hard "You are not your target audience" – 1 UX designer overrules 700 developer opinions…

Dank u!

vragen?

@bojhan / @royscholten