Keeping it All in the Family
3 likes1,124 views
The document discusses the challenges enterprises face in creating consistent style guidelines for diverse applications developed by different teams. It emphasizes the importance of both visual and interaction design in style guidelines, and outlines the benefits of having a cohesive design approach, such as stronger branding and efficiency in development. Additionally, it provides a step-by-step approach to create, apply, and maintain these guidelines while encouraging feedback and adaptation.
Keeping it All in the Family
- 1. 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
- 2. Background RACHEL SENGERS LESLEY HUMPHREYS 2 Keeping It All in the Family | October 19, 2012 | User Focus
- 3. 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
- 4. 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
- 5. Example: Omni products www.omnigroup.com/blog/entry/unified-‐app-‐icon-‐style 5 Keeping It All in the Family | October 19, 2012 | User Focus
- 6. Example: Omni products OmniGraffle OmniPlan 6 Keeping It All in the Family | October 19, 2012 | User Focus
- 7. 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
- 8. 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
- 9. BBC Gel Keeping It All in the Family | October 19, 2012 | User Focus
- 10. 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
- 11. 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
- 12. 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
- 13. 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
- 14. 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
- 15. 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
- 16. 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
- 17. 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
- 18. 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
- 19. 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
- 20. 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
- 21. EXAMPLE: Design principles BBC Gel
- 22. 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)
- 24. EXAMPLE: Design paiern Oracle – Individual component SAP – NavigaVonal structure (higher-‐level paiern(
- 25. 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.
- 26. EXAMPLE: Visual design guidelines Xerox
- 27. EXAMPLE: Visual design guidelines Xerox
- 28. EXAMPLE: Screen language guidelines Yahoo, Microsoe – used as references SAP
- 29. 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
- 30. 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
- 31. 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
- 32. 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
- 33. Bake it in UX Design Principles: INCORPORATE THEM INTO DAILY SPEAK. 33 Keeping It All in the Family | October 19, 2012 | User Focus
- 34. 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
- 35. 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
- 36. 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
- 37. WRAP UP 37 Keeping It All in the Family | October 19, 2012 | User Focus
- 38. 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
- 39. 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
- 40. 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