drupal 7 interface pattern
Post on 22-Apr-2015
4.454 Views
Preview:
DESCRIPTION
TRANSCRIPT
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!
top related