Keeping it All in the Family
Upcoming SlideShare
Loading in...5
×
 

Keeping it All in the Family

on

  • 636 views

Keeping it All in the Family: Presentation by Rachel Sengers and Lesley Humphreys from Design for Context at User Focus 2012 in Washington, DC. ...

Keeping it All in the Family: Presentation by Rachel Sengers and Lesley Humphreys from Design for Context at User Focus 2012 in Washington, DC.

Many enterprises grow organically, with diverse products managed by different teams. Style guidelines provide a way for the organization brand itself and ensure consistency across its family of apps while leaving in flexibility to accommodate different contexts of use. A repository of guidelines can include interaction design guidelines and patterns, as well as visual design specs. This presentation at User Focus conference provided an overview of the process of developing, maintaining, and utilizing UX design guidelines. A list of resources is at the end.

Statistics

Views

Total Views
636
Views on SlideShare
460
Embed Views
176

Actions

Likes
3
Downloads
16
Comments
0

2 Embeds 176

http://www.designforcontext.com 173
http://designforcontext.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Keeping it All in the Family Keeping it All in the Family Presentation Transcript

    • Keeping  It  All  in  the  Family  DEVELOPING  STYLE  GUIDELINES  FOR  SUITES  OF  APPLICATIONS    October  19,  2012      |      User  Focus  Conference   Rachel  Sengers   www.designforcontext.com    Lesley  Humphreys  
    • Background   RACHEL  SENGERS   LESLEY  HUMPHREYS  2   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • Our  design  challenge:  Many  enterprises  grow  organically,  with    DIVERSE  PRODUCT  LINES  managed  by  different    teams  who  may  be  geographically  dispersed.    How  does  an  organizaVon  BRAND  itself  and    ensure  CONSISTENCY  across  its  family  of  apps    while  leaving  in  FLEXIBILITY  to  accommodate    different  contexts  of  use?     3   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • Our  design  challenge:  A  common  piYall  when  developing  style    guidelines  is  to  assume  that  they  only  include  a  logo,  font,  and  a  set  of  colors.    User  interface  design  goes  deeper  than  that.  It’s  about  both  VISUAL  and  INTERACTION  design.   4   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • Example:  Omni  products   www.omnigroup.com/blog/entry/unified-­‐app-­‐icon-­‐style  5   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • Example:  Omni  products   OmniGraffle   OmniPlan  6   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • Benefits?    n  Strengthen  your  brand  promise.   •  Reinforce  your  differenVators   •  Build  credibility  and  trust     n  Remain  compeQQve.   •  ConVnue  to  define  and  hone  your  products   •  Maintain  current/fresh  visual  and  interacVon  styles   n  Gain  efficiencies.   •  Developers  don’t  need  to  “reinvent  the  wheel”   •  Encourages  buy-­‐in  across  product  teams   •  Cuts  down  on  end-­‐user  training  Vme  7   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • COMPONENTS  OF  A  STYLE  GUIDE   Intro   APPLICATION     Brand  &  Mission   CORPORATE  BRAND     INTERFACE   AND  MARKETING   UX  Design  Principles   Brand  Guidelines   UCD    Process   Interface  Design          visual          interacVon          voice          code/assets   8   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • BBC  Gel     Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • GETTING   CREATING   THE  STYLE  GUIDELINES   APPLYING  THE  STARTED   GUIDELINES   REPOSITORY   GUIDELINES   MAINTAINING     &  EVOLVING     THE  STYLE  GUIDELINES  10   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • Geng  started  (thinking  about  the  effort)   n  What’s  your  organizaQon’s  needs  and  culture?   •  Centralized  or  distributed?   •  Should  style  guide  be  part  of  a  larger  usability  effort?   n  Get  management  buy  in   n  Core  group  +  broader  team   n  Start  small(er)  –  don’t  bite  off  everything   You  will     need  to  get       BOTTOM  UP  and   TOP  DOWN   support  during     the  process  11   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • GETTING   CREATING   THE  STYLE  GUIDELINES   APPLYING  THE  STARTED   GUIDELINES   REPOSITORY   GUIDELINES   MAINTAINING     &  EVOLVING     THE  STYLE  GUIDELINES  12   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • CREATING  DRAFT  GUIDELINES   BROADER  TEAM    -­‐  Cross-­‐funcVonal   CORE  TEAM    -­‐  Reps  from  product  teams   Drae  goals,     Feedback,     Workgroups     UX  design  principles   drae  the  guidelines,   work  on  parts   help  prioriVze   Collect    interacQon   ITERATE   design  examples   Organize,  prioriQze   Think  of  it  as     a  DESIGN  PATTERN   Show  and     tell  sessions   LIBRARY…  tailored   to  your  own     Prepare  paferns  w/   company   usage  guidelines   ITERATE   13   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • CREATING  GUIDELINES  –  FEEDBACK  &  ITERATION   Drae  guidelines,  visual  design  look,   interacVon  design  paierns   iew   r  rev R eady  fo Review  with  broader  team   user  tesVng  +  reality  checks   ITERATE   Review  with  stakeholders   (in  stages)   e.g.  product  teams,  brand  team,     marke6ng  &  sales,  execs   ITERATE   Pilot  it  on  a  project   ITERATE   14   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • GETTING   CREATING   THE  STYLE  GUIDELINES   APPLYING  THE  STARTED   GUIDELINES   REPOSITORY   GUIDELINES   MAINTAINING     &  EVOLVING     THE  STYLE  GUIDELINES  15   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • THINGS  YOU  MIGHT  FIND  IN  A  STYLE  GUIDE  …    (your  mileage  may  vary!)     Intro   APPLICATION     Brand  &  Mission   CORPORATE  BRAND     INTERFACE   AND  MARKETING   UX  Design  Principles   Brand  Guidelines   Logo  /  idenVty   UCD    Process   Interface  Design   Corporate  web  site     Photography,  illustraVon,  icons   UCD  techniques,  training          visual   Social  media   Usability  heurisVcs          interacVon   Collateral,  signage,  packaging   User  profiles   MulVmedia   Usability  tesVng,  templates            voice   Voice  /  tone          code/assets   16   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • THINGS  YOU  MIGHT  FIND  IN  A  STYLE  GUIDE…    (your  mileage  may  vary!)   UX  Design  Principles   Interface  Design          visual    interacVon            voice      code/assets   Color  paleie   COMMON  DESIGN   Screen  text     Code  snippets,   PATTERNS   references,     Typography   Online  help,     CSS,  UI  control  libraries   Accessibility   user  manuals   Icons,  buions   guidelines   Cut-­‐up  artwork   Common  branding   Coding  standards   elements   Wireframe  assets   Specs  for  UI   components   Flow  diagram  templates     (these  may  be  links  to     other  repositories)     17   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • MULTI-­‐PLATFORM  ENTERPRISES   …may  segment  guidelines  by  plaYorm     mobile   UX  Design  Principles      visual      interacVon   UCD    Process   Interface  Design   code/assets   UCD  techniques,  training          visual   web   Usability  heurisVcs          interacVon      visual   User  profiles   Usability  tesVng,  templates        interacVon          voice   code/assets          code/assets   desktop  somware      visual      interacVon   code/assets   18   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • MULTI-­‐PRODUCT  ENTERPRISES     …may  have  global  and          product-­‐specific  documentaVon   UX  Design  Principles   UCD    Process   Interface  Design   Product-­‐specific     detailed  UI  documentaVon,   UCD  techniques,  training          visual   specificaVons,  assets   Usability  heurisVcs   (product  team)   User  profiles          interacVon   Usability  tesVng,  templates            voice          code/assets   Enterprise-­‐wide  global     guidelines  and  design  paierns   (applicable  to  all  products)   19   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • The  repository   n  A  living  document   n  Make  it  a  reference,  not  a  narraQve   n  Make  it  look  good…  to  inspire  people  to  use  it   n  Reusable  UI  code,  CSS,  &  common  use     of  a  JavaScript  UI  control  library    20   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • EXAMPLE:  Design  principles   BBC  Gel  
    • Design  paierns   Types  of  paferns   UI  components   Page  templates  and  grids   NavigaQon,  structure   Page  flows     Combos  of  page  flows     (e.g.  ecommerce,  scheduling,  user  management,  search)  
    • EXAMPLE:  Design  paiern  
    • EXAMPLE:  Design  paiern  Oracle  –  Individual  component   SAP  –  NavigaVonal  structure  (higher-­‐level  paiern(  
    • Design  paierns:  Sample  fields       RelaQonships     Basic  fields   Extras   &  metadata   Name   RaVonale   Component  paierns   DescripQon   Inappropriate  use   Related  paierns   When  to  use  it   VariaVons   Where  the  paiern  is   Example  screenshots   Accessibility  notes   currently  used   How  it  works     Usability  tesVng  &   Category,  tags   (interacVon  &  usage  specs)   research   Author,  date   Visual  specs   Status   Links  to  assets  for   History   •  coding     •  wireframing   •  visual  design   Discussion  (comments)   Every  organizaVon  uses  different  fields.  
    • EXAMPLE:  Visual  design  guidelines   Xerox  
    • EXAMPLE:  Visual  design  guidelines   Xerox  
    • EXAMPLE:  Screen  language  guidelines   Yahoo,  Microsoe  –  used  as  references   SAP  
    • GETTING   CREATING   THE  STYLE  GUIDELINES   APPLYING  THE  STARTED   GUIDELINES   REPOSITORY   GUIDELINES   MAINTAINING     &  EVOLVING     THE  STYLE  GUIDELINES  29   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • APPLYING  GUIDELINES   AWARENESS   BAKED  IN   Rollout  /  publicity   1st  projects   Ongoing  use   Training   at  rollout  &  ongoing   ITERATE,   IMPROVE  PROCESS   30   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • Approach  to  applying  the  guidelines   n  “Requirements”  vs.  “RecommendaQons”   •  Decide  how  strict  you’ll  be   •  Which  items  will  be  mandated,  which  recommended   n  Two  major  points  of  use   •  During  design   •  During  QA   •  Will  there  be  formal  checks  during  design  and  QA  phases?   n  Procedure  for  when  changes  are  made  to  the  guidelines  31   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • Consistency   Don’t  be  too  dogmaVc  about  consistency.   DON’T  SACRIFICE  USABILITY     FOR  CONSISTENCY.     Context  of  use  must  be  taken  into  account.    32   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • Bake  it  in   UX  Design  Principles:   INCORPORATE  THEM  INTO   DAILY  SPEAK.    33   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • Retrofit  exisQng  products  vs.  new  products  May  be  easier  to  apply  style  guidelines  to  new  products.  For  older  products:     n  Quick  wins  /  low-­‐hanging  fruit  to  bring  flavor  of  the  brand     n  Pick  and  choose  the  apps  to  upgrade   •  Flagship  products   •  Upgrade  products  that  tend  to  be  used  together     •  Don’t  upgrade  ones  that  will  be  reVred   n  Tie  it  into  an  upcoming  release  cycle  (with  new  features)  34   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • GETTING   CREATING   THE  STYLE  GUIDELINES   APPLYING  THE  STARTED   GUIDELINES   REPOSITORY   GUIDELINES   MAINTAINING     &  EVOLVING     THE  STYLE  GUIDELINES  35   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • Maintaining  &  evolving…   n  Keep  it  fresh;  welcome  “subscribers.”   n  Try  centralized  and/or  distributed   contribuVons.   n  Structure  and  technology  maier,  for  ease   of  contribuVon.   n  Make  contribuVng  part  of  job  descripVons.   n  Invite  feedback!  Incorporate  product  test   results  and  test  the  guide  itself.  36 Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus    
    • WRAP  UP  37   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus  
    • Helpful  resources  ArQcles  &  discussions   Example  style  guides  from  companies  Defining  User  Experience  as  Brand  Experience     Oracle  www.oracle.com/webfolder/ux/applicaVons/spyrestudios.com/defining-­‐user-­‐experience-­‐as-­‐brand-­‐experience/   index.html    Brand-­‐driven  design  www.slideshare.net/reduxd/branddriven-­‐design   IBM  hips://www-­‐01.ibm.com/soeware/ucd/Brands  as  Paferns  10x10.method.com/brands-­‐as-­‐paierns/   index.html  Brand  as  Context  in  InteracQon  Design     BBC  Gel    www.bbc.co.uk/gel  www.live.bbc.co.uk/uxmag.com/arVcles/brand-­‐as-­‐context-­‐in-­‐interacVon-­‐design   frameworks/gelui  Blackboard’s  Design  Principles     Fannie  Mae  hips://www.efanniemae.com/usability/www.slideshare.net/robfay/design-­‐for-­‐the-­‐rudes-­‐the-­‐value-­‐of-­‐design-­‐principles-­‐7549638   Cisco  www.cisco.com/en/US/docs/security/ise/1.1.1/Building  a  Befer  Style  Guide  www.wqusability.com/arVcles/beier-­‐style-­‐guide-­‐paper.pdf   user_guide/ise_ui_intro.html  www.wqusability.com/arVcles/beier-­‐style-­‐guide-­‐slides.pdf   Bank  of  America  seeminglee.com/porYolio/bank-­‐of-­‐The  Bull’s-­‐Eye:  A  Framework  for  Web  ApplicaQon  User  Interface  Design  Guidelines     america/index.html  dl.acm.org/citaVon.cfm?id=642697   SAP  www.sapdesignguild.org/resources/SalesForce  postcard  pafern  process  www.slideshare.net/iswinson/ixda09-­‐postcard-­‐paierns   ByD_UI_Styleguide_2012_FP35.pdf  www.ixda.org/resources/ian-­‐swinson-­‐postcard-­‐paierns-­‐agile-­‐ui-­‐paiern-­‐creaVon-­‐process   Apple  developer.apple.com/library/mac/CreaQng  Successful  Style  Guides     #documentaVon/UserExperience/Conceptual/johnnyholland.org/2010/02/creaVng-­‐successful-­‐style-­‐guides/   AppleHIGuidelines/  ArQcles  on  Boxes  and  Arrows  www.boxesandarrows.com/view/are-­‐design-­‐paierns     developer.apple.com/library/ios/#DOCUMENTATION/www.boxesandarrows.com/view/so-­‐you-­‐wanna-­‐build-­‐a   UserExperience/Conceptual/MobileHIG/  Analyzing  the  HCI  Design  Pafern  Variety  dl.acm.org/citaVon.cfm?id=2371736.2371745   Microsom  msdn.microsoe.com/en-­‐us/library/Guidance  on  Style  Guides:  Lessons  Learned     windows/desktop/aa511258.aspx  www.stcsig.org/usability/newsleier/0104-­‐style.html   msdn.microsoe.com/en-­‐us/library/windows/apps/The  Art  of  Style  Guides:  Process,  PoliQcs,  &  Public  RelaQons     hh779072.aspx  Wilson  &  Smith,  UPA  2009  Conference   Generic  pafern  libraries  eCram  case  study  /www.scribd.com/doc/29180579/Developing-­‐a-­‐UI-­‐Design-­‐Paiern-­‐Library-­‐ Books  &  sites  by  Jennifer  Tidwell,  Pawan  Vora,  A-­‐Case-­‐Study-­‐at-­‐eCrae-­‐Master-­‐s-­‐Thesis   Theresa  Neil,  Bill  Scoi,  ui-­‐paierns.com,  Yahoo!,  etc.  Enterprise  UI  Design  Paferns   Tools  to  make  your  own  pafern  library  arVcles.thoughVntodesign.com/2012/01/enterprise-­‐ui-­‐design-­‐paierns-­‐part-­‐i.html   Wikis  (or  other  CMSs),  Paiernry,  Quince,  GUIGuide  IXDA.org  and  IXDA  on  LinkedIn  –  Check  out  the  discussions  on  guidelines  and  paierns,  such   CSS/HTML  paiern  tools  like  pea.rs,  adacVo  paiern  as  www.ixda.org/node/21624  ,  29801   primer    UIE.com    –  ArVcles  on  design  paierns    38 Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus    
    • Thanks  for  the  inspiraQon!   n  Duane  Degler   n  Carol  Smith   n  Rob  Fay   n  Mobile  UX  Camp  DC  2012  39 Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus    
    • GETTING   CREATING   THE  STYLE  GUIDELINES   APPLYING  THE  STARTED   GUIDELINES   REPOSITORY   GUIDELINES   MAINTAINING     &  EVOLVING     THE  STYLE  GUIDELINES  40   Keeping  It  All  in  the  Family  |  October  19,  2012  |  User  Focus