creating usable websites with interaction design patterns: do it with drupal!

CREATING USABLE WEBSITESDo It With Drupal!December 2008

Do It With Drupal | December 2008

Bond Art + Science_Founder and Partner

School of Visual Arts MFA in Interaction Design_Interaction Design History_Design Management

Razorfish_First information architect_VP and National Lead for User Experience

Clients_The New York Times_Fast Company_The Atlantic_Condé Nast _New York Public Library_Disney Internet Group_Encyclopedia Britannica

2

KAREN MCGRANE


DRUPAL IS SO POWERFUL!

3


DRUPAL HAS TOO MANY OPTIONS.

4


Drupal makes so many options available that developers have a hard time knowing how to choose the right ones so that the site makes sense to the user. Could you pick some common interactions and describe how to make them more usable?

—Jeff Robbins

5


SURE!

6


SURE!

6

_Commenting


SURE!

6

_Commenting_Navigation


SURE!

6

_Commenting_Navigation_Search


SURE!

6

_Commenting_Navigation_Search_Listing pages


SURE!

6

_Commenting_Navigation_Search_Listing pages_Friending


SURE!

6

_Commenting_Navigation_Search_Listing pages_Friending_Recent...


SURE!

6

_Commenting_Navigation_Search_Listing pages_Friending_Recent..._Calendar events


SURE!

6

_Commenting_Navigation_Search_Listing pages_Friending_Recent..._Calendar events_Date/time stamps


SURE!

6

_Commenting_Navigation_Search_Listing pages_Friending_Recent..._Calendar events_Date/time stamps_Rate + Review


NO.

7


NO.

7

_Too many variables


NO.

7

_Too many variables_Can’t cover all cases


NO.

7

_Too many variables_Can’t cover all cases_Can’t cover all needs


NO.

7

_Too many variables_Can’t cover all cases_Can’t cover all needs_Too prescriptive


NO.

7

_Too many variables_Can’t cover all cases_Can’t cover all needs_Too prescriptive_Not actionable


NO.

7

_Too many variables_Can’t cover all cases_Can’t cover all needs_Too prescriptive_Not actionable_Not in context


NO.

7

_Too many variables_Can’t cover all cases_Can’t cover all needs_Too prescriptive_Not actionable_Not in context_I don’t have all the

answers


BUT WAIT...

8

CREATING USABLE WEBSITES using INTERACTION DESIGN PATTERNSDo It With Drupal!December 2008


WHAT’S AN INTERACTION DESIGN PATTERN?

10

?


A pattern describes an optimal solution to a common problem within a specific context.

—Christian Crumlish + Erin MaloneAuthors, Designing Social Interfaces

Curators, Yahoo! Pattern Library

11


Design patterns describe best practices in design.

—Jenifer TidwellAuthor, Designing Interfaces

Curator, UI Patterns and Techniques

12

Luke Wroblewski, Design Patterns: Introduction, 22 May 2006

http://www.lukew.com/ff/entry.asp?347



A design pattern is a repeatable design solution, that’s been tested, reviewed, and verified.

—James ReffellUI Design Manager, eBay Inc.Curator, eBay Pattern Engine

13

Luke Wroblewski, Design Patterns: Introduction, 22 May 2006




ARCHITECTURE DESIGN PATTERNS

14


ConflictPlacing the main entrance (or main entrances) is perhaps the single most important step you take during the evolution of a building plan.ResolutionPlace the main entrance of the building at a point where it can be seen immediately from the main avenues of approach and give it a bold, visible shape which stands out in front of the building.May be part of: Site Repair (104), South Facing Outdoors (105), Wings of Light (107), Circulation Realms (98), Family of Entrances (102).

May contain:Family of Entrances (102), Entrance Room (130), Entrance Transition (112), Shielded Parking (97), Car Connection (113).

15

110 MAIN ENTRANCE


Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice.

—Christopher Alexander, A Pattern Language

17


SOFTWARE DESIGN PATTERNS

18


INTERACTION DESIGN PATTERNS

19


COMMON GROUND

20


DESIGNING INTERFACES

21


UI PATTERNS

22


WELIE.COM

23


YAHOO! DESIGN PATTERN LIBRARY

24


DESIGNING SOCIAL INTERFACES

25


FLUID OPEN SOURCE DESIGN PATTERN LIBRARY

26


1. Identify common design problems2. Describe solutions that work in practice3. Explain why those solutions work in terms of

general principles4. Show a variety of concrete visual examples that

demonstrate the range of the pattern

27

INTERACTION DESIGN PATTERNS

WHAT DOES THIS MEAN FOR ME?How to use pattern libraries

LET’S PICK A COMMON PROBLEM

LET’S PICK A COMMON PROBLEMRatingsReviewsVoting

EVALUATION/RATING

30

RATINGS AND REVIEWS

31

VOTE TO PROMOTE

32

RATING

33

HERE’S ANOTHER ONE

HERE’S ANOTHER ONECollapsible panelsAccordion listsExpandy widget

I’M SURE IT’S IN HERE SOMEWHERE...

35

CLOSABLE PANELS

36

COLLAPSIBLE PANELS

37

ACCORDION MENU

38

COLLAPSE TRANSITION

39

WHAT DOES THIS MEAN FOR THE DRUPAL COMMUNITY?Three potential options


1. IGNORE THE SUBJECT

41

1


CALL FOR A PATTERN LIBRARY


22. PARTNER WITH SOMEONE ELSE


THE FLUID PROJECT


3. ROLL OUR OWN

45

3


_Give Drupal developers tools to help build more usable websites

_Educate teams on a common vocabulary and rationale for design decisions

_Address issues unique to Drupal or give specific instructions for how to implement solutions

_Put patterns where developers will find them_Take one small step toward more consistency_Create a sense of community and ownership

46

WHY DRUPAL.ORG NEEDS ITS OWN PATTERN LIBRARY


WHY DRUPAL.ORG SHOULDN’T BUILD A PATTERN LIBRARY_Many pattern libraries already exist; no need to reinvent the wheel

_Patterns already exist as “modules” on Drupal.org_No real community support for the effort_Pattern libraries are too generic and don’t help solve the real problem

_Hire an interaction designer, already

47


HOW WE MIGHT GO ABOUT BUILDING A PATTERN LIBRARY_Start soliciting “usability problems” on Drupal.org_Create a working group to filter and prioritize_Ask people to upload screenshots of sample solutions

_Hold a “Pattern Camp” to review and edit_Encourage commenting and tagging on Drupal.org

48

DESIGN PATTERNS SOURCES

49

[email protected]@bondartscience

Karen [email protected]@digitrix6

THANKS!

creating usable websites with interaction design patterns: do it with drupal!

Technology