Drupal 7 User Interface PatternsBojhan Somers & Roy Scholten

Reusable solutions to recurring design problems

About design patterns

What is a design pattern?About design patterns

• Common design problem

• Solution

• Solution Rationale

• Visual examples

Why?

• Consistency

• Sanity check

• Self-service

The basics

Form element

Common problemsForm elements

Choosing the right one for the job

Radio buttonsForm elements

Radio buttonsForm elements

Don’t use them forYes/No options

Radio buttonsForm elements

Don’t use them forYes/No options. Use a checkbox instead

CheckboxForm elements

CheckboxForm elements

Select listForm elements

Select listForm elements

Beware overloading itMake it clear that a selection is needed

List boxForm elements

Avoid whenever possible

Fieldsetitus

Grouping elements

Common problemsGrouping elements

• Overloading the grouping pattern by adding too many elements to a single grouping

• Unnecessary groupings: fieldsets with 1 checkbox

FieldsetsGrouping elements

FieldsetsGrouping elements

• Avoid Fieldsetitus

• Keep them within one scroll

• Avoid nested fieldsets, it disorientates the user

• Position collapsed fieldsets below expanded

Vertical tabsGrouping elements

Vertical tabsGrouping elements

• Avoid using it for the main interaction (skip able)

• Avoid long panes

• Avoid long descriptions

• No less then 3, no more than 9

Machine nameGrouping elements

Machine nameGrouping elements

• Use for all machine names

• Avoid using it for other occasions

SummaryGrouping elements

Use fieldsets for chuncking functionality, vertical tabs to hide a lot of functionality. Avoid overloading patterns, or adding unnecessary groupings.

Pattern indexFieldsetsVertical tabsMachine name

Operations

Listings

Common problemsListings

• Lack of overview

• Too many operations

• Too many columns, with duplicate or unnecessary information

• No empty table state

TableListings

TableListings

• Standardize order of columns

• Order operations, edit first and delete last.

• Avoid adding columns with similar data

Table emptyListings

Table emptyListings

• There are no [things] available/yet. Add [thing]

• Action should be the same as the local action

Drag & DropListings

SummaryListings

Listing are mostly about adhering to standards (positioning columns, operations), avoiding unnecessary columns and empty table messages.

Pattern indexTable (empty)Drag and dropFiltersAdmin listing (Structure/Config)Weighted listing (Appearance)Sectioned listing (Blocks, permissions)

Navigation

Information architecture

Common problemsInformation architecture

• New information architecture concept, so a lot of misplaced items

• Not applying new patterns (contextual links, action links)

Information ArchitectureInformation architecture

Information ArchitectureInformation architecture

SectionsContentStructurePeopleConfigurationReports

Principles• Content and people for listings related to the object

• Structure is for frequently accessed site building functionality (max 7)

• Configuration is for infrequently accessed site building or configuration functionality

• Don’t decide purely on your interpretation of section label

Configuration sectionsInformation architecture

SectionsPeopleSystemContent authoringUser interfaceMediaSearch and metadataDevelopmentRegional and languages Web services

Configuration sectionsInformation architecture

PrinciplesPeopleSystemContent authoringUser interfaceMediaSearch and metadataDevelopmentRegional and languages Web services

How to choose• The functionality (modules)

already placed in this category.

• The label assigned to the category.

Local actionsInformation architecture

Local actionsInformation architecture

• Keep the task label short, start with a verb “Add”.

• Preferably only one task, avoid more then two

TabsInformation architecture

TabsInformation architecture

• If the main tab is a listing, call it “List”

• Group similar tabs

• Avoid creating more than 4 tabs, consider broader groupings

• Avoid secondary

navigation

Contextual linksInformation architecture

Contextual linksInformation architecture

• Primarily used in the front end

• Short labels (2/3 words)

• Avoid more than 6 tasks

SummaryInformation architecture

With all the new patterns, it mostly comes down to choosing the right labeling.

Pattern indexInformation architectureConfiguration sectionsLocal actionsTabsContextual links

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

User interface text

Common problemsUser interface text

Too much of itJargon & difficult wordsNot instilling confidence in the userDocumentation instead of guidanceExplaining a broken user interface

Omit needless wordsUser interface text

Omit needless wordsUser interface text

Omit needless wordsUser interface text

Omit needless wordsUser interface text

Jargon: developer docs in the UIUser interface text

Node, taxonomy, truncate, enabled, disabled, modifications, execute, retain, retrieve…

User interface text

Jargon and other difficult words

No confidence in the userUser interface text

No confidence in the userUser interface text

Note that…Please…Don’t…If enabled…Shouldn’t…You may now…Allow…

Explaining a broken UIUser interface text

Explaining a broken UIUser interface text

SummaryUser interface text

Focus on the task at hand. Use the simplest word possible. Omit needless words: cut 50%, then cut 50% again. Be nice.

Pattern indexPage helpForm element labelForm element descriptionMessages: error, warning, confirmButton labelsFieldset legend

IndexIndex

Grouping elementsFieldsetsVertical tabsMachine name

ListingsTable (empty)Drag and dropFiltersAdmin listing (Structure/Config)Weighted listing (Appearance)Sectioned listing (Blocks, permissions)

Information architectureInformation architectureConfiguration sectionsLocal actionsTabsContextual links

User interface textPage helpForm element labelForm element descriptionMessages: error, warning, confirmButton labelsFieldset legend

Pattern library

How do we make it happen?

What did you think?http://chicago2011.drupal.org/sessions (“Take the Survey” link)

@bojhan ,@royscholten

Thanks!