style framework - sxsw2015
TRANSCRIPT
STYLEFRAMEWORKS
COLLABORATIVECREATING
STANDARDS
#STYLEFRAME #SXSW
THE #SXSW UPDATE
My name is Marti Gold. You can find me at @martigold I’m the Managing Director of User Experience for Tonic3. www.tonic3.com | @tonic3com We are a division of W3 Digital Agency www.w3americas.com Offices in Buenos Aires, Sao Paulo and Dallas
MARTI GOLDMANAGING UX DIRECTOR
TONIC3
@martigold@tonic3com
This is usability expert Jared Spool. At a BigD Conference a few years ago, my friend Adam Polanksy came up to me just before Jared Spool’s keynote address, and said, “Jared is gonna make you really mad.”
“Why?” I asked.
“I’ve heard this talk before. Just trust me - he’s gonna make you mad.” And then he walked away.
What Adam knew was that, as the Creative Director for Travelocity, I had been busting my rear end on a new Style Guide for about six months. I was convinced, and had told everyone in the company, that this was TRULY important work — it would cut down churn, give us a more consistent user experience, save development time, etc…
So Jared was breezing along, being very entertaining, and about half way through he began talking about something he called “Rules Based Design” - which he said was usually presented through Style Guides.
Then, in front of ALL my direct reports and colleagues, he said… <click>
–Jared Spool
style guides are createdso thatUNINTENTIONAL DESIGNERS can ACCIDENTALLYcreate great designs.
“
”
In RULE-BASED design,
This was my face. <pause>
But wait, its gets worse. My boss, the person funding all the resources necessary for me to create my Style Guide Masterpiece, was also in the audience.
Jared was kind enough to continue… <click>
I was pretending to be polite and pay attention to him, but inside I was doing this…
“The problem is thatdesign style guides
NEVER WORK.
”PEOPLE STOP
–Jared Spool
USING THEM.
#STYLEFRAME #SXSW
So, on Monday, my new personal TV show was titled, “I’ll Show Him!”
I told everyone Jared was CLEARLY now so far removed from real world, hands-on UX that he was just plain wrong. I managed to re-sell this idea to pretty much everyone.
So we kept working.
THE NEXT DAY WAS TITLED
“I’LL SHOW HIM!”
I was pretending to be polite and pay attention to him, but inside I was doing this…
HOW MANYOF YOU HAVE
#STYLEFRAME #SXSW
USED OR BUILTTHIS TYPE OF
STYLE GUIDE?
I was pretending to be polite and pay attention to him, but inside I was doing this…
I was pretending to be polite and pay attention to him, but inside I was doing this…
DID IT
#STYLEFRAME #SXSW
MAGICALLYMAKE YOUR SITE
CONSISTENT?
MINE
DID NOT.
I HAD TO ADMIT…
JARED WAS
RIGHT
WHY?BUT
#STYLEFRAME #SXSW
NEXT THREE YEARS?
THEQUEST
STYLEFRAMEWORK
BUT ANOT STYLE GUIDE,
#STYLEFRAME #SXSW
#STYLEFRAME #SXSW
RULESTHE
#STYLEFRAME #SXSW
MARKETINGSTYLE GUIDE
UXGUIDELINES
DEVELOPMENT CODE REPOSITORY
COLORS P P PFONTS P P PBUTTONS P P PLINKS P P PPAGINATION P P PNAVIGATION P P PERROR MESSAGES P P Pmore…
IN YOU ORG?OF OVERLAPPING ELEMENTS
PERCENTAGEWHAT’S THE
80%I GUESSED
OVERLAPIN MOST ORGANIZATIONS
THERE’S NO WAYITS THAT HIGH.
“
PROOF?”
#STYLEFRAME #SXSW
are defined in ALL 3 repositories84124 common elements & interactions*
are defined in 2 of the 332ITEMS HAD NO OVERLAP8ONLY
* started with Bootstrap and added items
CHARTTHE
93%THAT IS A
OVERLAPIN DEFINED ELEMENTS
#STYLEFRAME #SXSW
NO CONFLICTS?WHAT ARE THECHANCES OF
0%
SO GUESSWHAT?
CONFLICTS MEAN AT LEAST ONE IS WRONG.
THEY WILL IGNORE THEM.
EVERYONEMARKETINGUSER EXPERIENCE
PRODUCT MANAGERS
ACCESSIBLE TO
DEVELOPERS
OFFSHORE TEAMSEXTERNAL AGENCIESOUTSIDE VENDORS
ONE SOURCE
#STYLEFRAME #SXSW
#STYLEFRAME #SXSW
WHAT DO YOU DO?
YOU HAVE A SPRINT DEMO TOMORROW…YOU MUST KNOW THE COLOR OF THAT BUTTON…
THEEYEDROPPER
STANDARDSKILLER
AKA
#STYLEFRAME #SXSW
READ
BE HONEST….HOW MANY PEOPLEHAVE ACTUALLY
YOUR STANDARDS?
HAVE YOU?
HOLD ONLOOSELY
RULE #3
Logo
#STYLEFRAME #SXSW
“PERFECTION IS UNATTAINBLE”
#STYLEFRAME #SXSW
– Roy McAfee in Tin Cup
#STYLEFRAME #SXSW
#STYLEFRAME #SXSW
ANY“PIXELPERFECTIONISTS”
IN THE AUDIENCE?
WHAT IS THIS?
MODAL?POPUP?
OVERLAY?
POPOVER?
ALERT BOX?
LIGHTBOX?
THE STORY
#STYLEFRAME #SXSW
THEY CODED THIS…
SHE MEANT THIS…
#STYLEFRAME #SXSW
STORIES?
#STYLEFRAME #SXSW
IS THE AUTHORALWAYSRIGHT?
#STYLEFRAME #SXSW
#STYLEFRAME #SXSW
HOW MANY OF
THE RULESDOES YOURSTYLE GUIDE BREAK?
Mine broke ALL of them.
#STYLEFRAME #SXSW
GETTINGSTARTED
LET’S TALK
WHAT MIGHTTHIS LOOK LIKE?
SIMPLE
ORGANIZATION
LESS SIMPLE
WHY?
TOP LEVELLANDING PAGES
SHOW PICTURES!
PAGE MOST VIEWED STUFF
ONEPER STANDARD
LEAST VIEWED STUFF
#STYLEFRAME #SXSW
WHY?
WHAT’S IN?WHAT’S OUT?
“WE’RE GONNAHAVE A MONTAGE”
OR “HOW I LEARNEDTO SOLVE THIS PROBLEM
SPEED READERS GET READY…
GRID
SCAFFOLDINGCOLORSTYPOGRAPHY
MODULE SIZESRESPONSIVE BREAKS
TEXT LINKS
ELEMENTS
LISTSTABLES
BUTTONSCONTAINERS
ICONSDIVIDERS
OTHERS…
SHOW HIDE
INTERACTIONS
ACCORDIONDRAWERMODALS
TOOLTIPS
TABBED PANELS
SCROLL BARS
OTHERS…
SORTINGFILTERING
PAGINATION
NAVIGATION
BREADCRUMBSPREVIOUS-NEXTSEARCH BOXESPROGRESS BARSDROP DOWN MENUSOTHERS…
CONTENT
DATES & TIMESCURRENCYMEASUREMENTSPRICING
TRADEMARKSSPELLING & USAGEOTHERS…
IMAGESCHARTSMAPS
FORMS
FIELD LABELSTEXT FIELDSSELECT LISTSRADIO BUTTONSCHECK BOXESMANDATORY MARKER
OTHERS…
AUTO-COMPLETESTEPPERSGHOST TEXT
ERRORS
FIELD LEVELFORM LEVELPAGE LEVELNULL RESULTSNON-ERROR ALERTS404 PAGES
OTHERS…DISAMBIGUATION
FIXEDITEMS
HEADERSFOOTERSCUSTOMER BARLEGAL TEXTSHOPPING CARTSLOGINOTHERS…
OTHER
EMAIL SPECSMOBILE APPSMEDIA SPECSACCESSIBILITYSEO ISSUESOTHERS…
SITE-WIDESEARCH
WHAT’S ON
EACHPAGE
“WHAT IS THIS?”
BRIEFDESCRIPTION
PICTURE
NAME
FOLD
LAST UPDATED?
WORKINGEXAMPLE
OR
“TELL ME MORE”DETAIL
DESCRIPTION
SPECS
PLATFORMS
RELATED TOPICS
VOCABULARY
“I HAVE TO BUILD THIS”LINKS
TO UX ASSETS
EXAMPLE INPRODUCTION
TO CODE ASSETS
“I WANT TO CHANGE THIS”
OWNERS
ANY OTHERINFORMATION
LINKSTO TEST DATA
& BEST PRACTICE RESEARCH
whew!
THINK BACK…
DID THIS FRAMEWORK EVER
DEFINE A PAGE?
#STYLEFRAME #SXSW
NO
STYLE FRAMEWORKS DEFINE
TOOLS & MATERIALS
A BLUEPRINT FOR DESIGNNOT#STYLEFRAME #SXSW
WHO OWNS IT?
LET’S TALKOWNERSHIP
OWNER
RESEARCHINGWRITINGREPORTING TESTSUPDATING
COMMUNICATIONESCALATION
ANEVERY STANDARDNEEDS
SO… HOW CAN YOU PREVENT
DICTATORSHIPS?
DISTRIBUTEDWORKLOADDATA CENTERMODEL
CONSIDER…
BUSINESS
3USER EXPERIENCE
DEVELOPMENT
OWNERS
#STYLEFRAME #SXSW
FOR EACH STANDARD
#STYLEFRAME #SXSW
DISCUSSIONSTRANSPARENT
ALL COMMENTS AND DECISIONS SHOULD BE OPEN
COMMENTS ARE PUBLICMY SOLUTION?
OWNER RESPONSES ARE ALSO PUBLIC
NO MOREPRIVATE EMAIL DISCUSSIONS CLOSED MEETINGS “FORGOTTEN” CONSULTATIONS
TRANSPARENCY MEANS
WHATPLATFORM?
ONLINE
OUTSIDE FIREWALL
QUICKLY SCANNABLE
MUSTRESPONSIVE
SEARCHABLE
OPEN TO FEEDBACK & MODIFICATION
BE…MAINTAINED BY NON-PROGRAMMERS
REQUIRE MINIMAL DEV SUPPORTCHEAP (OK…. FREE)
#STYLEFRAME #SXSW
SERIOUSLY?
WHY NOT ASK FORWORLD PEACE TOO?
WHAT WOULDYOUUSE?
I CREATE MY STYLE FRAMEWORKS IN
WORDPRESS
EASY TO SET UPEASY TO MAINTAINEASY TO CUSTOMIZENON-CODERS CAN DO ITALL FEATURES BUILT IN
FREE
#STYLEFRAME #SXSW
BECAUSE I’M NOT A DEVELOPER
WARNING
DO NOT REINVENTTHE WHEEL
#STYLEFRAME #SXSW
HOW CAN YOUJUMP START
A NEW STYLE FRAMEWORK?
#STYLEFRAME #SXSW
STYLEFRAMEWORK.COM
HOW DO I GET
BUY IN?BUT….
LAYING THEGROUNDWORK
INSTALL THE TEMPLATEADD YOUR LOGO & COLORSEDIT A COUPLE OF PAGES
THIS PRESENTATIONSTEAL
(ITS ON SLIDESHARE)
KILL EVERYTHINGONE OBJECTION
FIREWALL?
WORDPRESS OBJECTIONS?NO WAY WE’LL REDO EXISTING GUIDES?
DON’T LET
PROPRIETARY INFO?
THERE CAN BE ONLY ONE.RULE #1
RULE #2YOU ONLY HAVE FIVE MINUTES.
SAY WHAT YOU MEAN.RULE #4
RULE #3HOLD ON LOOSELY.
THINK REPUBLIC, NOT DICTATORSHIP.RULE #5
REMEMBER…
#STYLEFRAME #SXSW
