interactive design and drupal
Post on 28-Jan-2015
114 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
Do It With Drupal | December 2008
DRUPAL IS SO POWERFUL!
3
Do It With Drupal | December 2008
DRUPAL HAS TOO MANY OPTIONS.
4
Do It With Drupal | December 2008
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
Do It With Drupal | December 2008
SURE!
6
Do It With Drupal | December 2008
SURE!
6
_Commenting
Do It With Drupal | December 2008
SURE!
6
_Commenting_Navigation
Do It With Drupal | December 2008
SURE!
6
_Commenting_Navigation_Search
Do It With Drupal | December 2008
SURE!
6
_Commenting_Navigation_Search_Listing pages
Do It With Drupal | December 2008
SURE!
6
_Commenting_Navigation_Search_Listing pages_Friending
Do It With Drupal | December 2008
SURE!
6
_Commenting_Navigation_Search_Listing pages_Friending_Recent...
Do It With Drupal | December 2008
SURE!
6
_Commenting_Navigation_Search_Listing pages_Friending_Recent..._Calendar events
Do It With Drupal | December 2008
SURE!
6
_Commenting_Navigation_Search_Listing pages_Friending_Recent..._Calendar events_Date/time stamps
Do It With Drupal | December 2008
SURE!
6
_Commenting_Navigation_Search_Listing pages_Friending_Recent..._Calendar events_Date/time stamps_Rate + Review
Do It With Drupal | December 2008
NO.
7
Do It With Drupal | December 2008
NO.
7
_Too many variables
Do It With Drupal | December 2008
NO.
7
_Too many variables_Can’t cover all cases
Do It With Drupal | December 2008
NO.
7
_Too many variables_Can’t cover all cases_Can’t cover all needs
Do It With Drupal | December 2008
NO.
7
_Too many variables_Can’t cover all cases_Can’t cover all needs_Too prescriptive
Do It With Drupal | December 2008
NO.
7
_Too many variables_Can’t cover all cases_Can’t cover all needs_Too prescriptive_Not actionable
Do It With Drupal | December 2008
NO.
7
_Too many variables_Can’t cover all cases_Can’t cover all needs_Too prescriptive_Not actionable_Not in context
Do It With Drupal | December 2008
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
Do It With Drupal | December 2008
BUT WAIT...
8
CREATING USABLE WEBSITES using INTERACTION DESIGN PATTERNSDo It With Drupal!December 2008
Do It With Drupal | December 2008
WHAT’S AN INTERACTION DESIGN PATTERN?
10
?
Do It With Drupal | December 2008
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
Do It With Drupal | December 2008
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
Do It With Drupal | December 2008
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
Do It With Drupal | December 2008
ARCHITECTURE DESIGN PATTERNS
14
Do It With Drupal | December 2008
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
Do It With Drupal | December 200816
Do It With Drupal | December 2008
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
Do It With Drupal | December 2008
SOFTWARE DESIGN PATTERNS
18
Do It With Drupal | December 2008
INTERACTION DESIGN PATTERNS
19
Do It With Drupal | December 2008
COMMON GROUND
20
Do It With Drupal | December 2008
DESIGNING INTERFACES
21
Do It With Drupal | December 2008
DESIGNING INTERFACES
21
Do It With Drupal | December 2008
DESIGNING INTERFACES
21
Do It With Drupal | December 2008
UI PATTERNS
22
Do It With Drupal | December 2008
UI PATTERNS
22
Do It With Drupal | December 2008
UI PATTERNS
22
Do It With Drupal | December 2008
WELIE.COM
23
Do It With Drupal | December 2008
WELIE.COM
23
Do It With Drupal | December 2008
WELIE.COM
23
Do It With Drupal | December 2008
YAHOO! DESIGN PATTERN LIBRARY
24
Do It With Drupal | December 2008
YAHOO! DESIGN PATTERN LIBRARY
24
Do It With Drupal | December 2008
YAHOO! DESIGN PATTERN LIBRARY
24
Do It With Drupal | December 2008
DESIGNING SOCIAL INTERFACES
25
Do It With Drupal | December 2008
DESIGNING SOCIAL INTERFACES
25
Do It With Drupal | December 2008
DESIGNING SOCIAL INTERFACES
25
Do It With Drupal | December 2008
FLUID OPEN SOURCE DESIGN PATTERN LIBRARY
26
Do It With Drupal | December 2008
FLUID OPEN SOURCE DESIGN PATTERN LIBRARY
26
Do It With Drupal | December 2008
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
EVALUATION/RATING
30
RATINGS AND REVIEWS
31
RATINGS AND REVIEWS
31
RATINGS AND REVIEWS
31
VOTE TO PROMOTE
32
VOTE TO PROMOTE
32
VOTE TO PROMOTE
32
RATING
33
RATING
33
RATING
33
HERE’S ANOTHER ONE
HERE’S ANOTHER ONECollapsible panelsAccordion listsExpandy widget
I’M SURE IT’S IN HERE SOMEWHERE...
35
I’M SURE IT’S IN HERE SOMEWHERE...
35
CLOSABLE PANELS
36
CLOSABLE PANELS
36
CLOSABLE PANELS
36
COLLAPSIBLE PANELS
37
COLLAPSIBLE PANELS
37
COLLAPSIBLE PANELS
37
ACCORDION MENU
38
ACCORDION MENU
38
ACCORDION MENU
38
COLLAPSE TRANSITION
39
COLLAPSE TRANSITION
39
WHAT DOES THIS MEAN FOR THE DRUPAL COMMUNITY?Three potential options
Do It With Drupal | December 2008
1. IGNORE THE SUBJECT
41
1
Do It With Drupal | December 200842
CALL FOR A PATTERN LIBRARY
Do It With Drupal | December 200842
CALL FOR A PATTERN LIBRARY
Do It With Drupal | December 200843
22. PARTNER WITH SOMEONE ELSE
Do It With Drupal | December 200844
THE FLUID PROJECT
Do It With Drupal | December 200844
THE FLUID PROJECT
Do It With Drupal | December 2008
3. ROLL OUR OWN
45
3
Do It With Drupal | December 2008
_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
Do It With Drupal | December 2008
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
Do It With Drupal | December 2008
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
DESIGN PATTERNS SOURCES
49
DESIGN PATTERNS SOURCES
49
www.bondartscience.cominfo@bondartscience.com212-226-6344@bondartscience
Karen McGranekaren@bondartscience.com917-887-8149@digitrix6
THANKS!
top related