Introduction to SharePoint Information Architecture and Branding
Download as PPTX, PDF2 likes776 views
Derek Cash-Peterson presented on information architecture, user experience, branding in SharePoint. He discussed how to structure content and navigation for different users, and introduced common branding techniques like skinning, custom CSS, purchased themes, and complete customization. Various tools for branding were also covered.
Introduction to SharePoint Information Architecture and Branding
- 1. Introduction to SharePoint IA & Branding Derek Cash-Peterson Architect BlueMetal Architects
- 3. Agenda • Information Architecture • User Experience • Why brand SharePoint? • Introduction to SharePoint Branding • Common Tools
- 4. Derek Cash-Peterson • SharePoint Architect/Developer • Information Architect • User Experience Designer • The Branding Guy
- 5. I Take This • SharePoint Architect/Developer • Information Architect • User Experience Designer • The Branding Guy
- 6. And Turn It Into This
- 8. Information Architecture The Right Content
- 9. Information Architecture To The The Right Right Content User
- 10. Information Architecture To The At The The Right Right Right Content User Time
- 11. Information Architecture Quickly!
- 12. Information Architecture Home General & Business Managed Consulting Project Purchasing Time Tracking Administrative Development Services Services Management HR Finance Sales Marketing LYNC SharePoint CRM Projects Internal Site Internal Site Internal Site Internal Site Internal Site Internal Site Internal Site Project 1 Project 2
- 13. Information Architecture • New Employee No institutional knowledge Needs to find our the expense reimbursement policy • HR Admin Has institutional knowledge Needs to add a new policy and run it through workflow
- 14. Information Architecture Home My Project Departments Policies Forms Department Central Department Project 1 Project 2 1 Internal Site
- 15. User Experience • How users interact with the page • Navigation structured • Components on the page • Consistency is key!
- 16. Why Brand SharePoint? • Governance • User Experience • Messaging
- 17. Introduction to Branding • Skinning • Custom CSS/HTML or Purchased Package • Complete UI Customization
- 18. Introduction to Branding • Skinning Easy to achieve UI or PowerPoint 13 editable fields SharePoint still looks like SharePoint
- 20. Introduction to Branding • Custom CSS Can create a custom look and feel Can start to move things around on the page Requires HTML/CSS skills Can be overwhelming Can break some OOB functionality
- 22. Introduction to Branding • Purchased Theme Low cost of entry More advanced look and feel Relatively easy to install Work with some OOB templates You get what you pay for
- 24. Introduction to Branding • Complete UI Customization WCM Based Heavy Customization Requires Custom Development Works best for non-OOB sites
- 25. Introduction to Branding • Screen Shot 1
- 26. Introduction to Branding • Screen Shot 2
- 27. Level of Effort Low Medium High Components Out of Box themes Custom CSS Custom master pages, page layouts, HTML/CSS Pros End-user editable themes, Leverages existing CSS Highest flexibility, most can easily modify color and classes and IDs tailored user experience fonts. Cons Rigid in what can be Limited to existing classes, Requires extensive custom customized. Can lead to a requires CSS/HTML resource managed code. Can be rigid disjointed user experience. in what templates you can use.
- 28. Common Tools • Firebug (Firefox) • Jquery • IE Developer Toolbar • SPServices • Yslow • SPXSLT • Fiddler • U2U CAML Designer • SPDisposeCheck • SPManager
- 29. Contact Information Contact Information Derek Cash-Peterson Email: derekcp@bluemetal.com Twitter: @spdcp Blog: www.spdcp.com Web: www.bluemetal.com Handy Links Starter MasterPages: http://bit.ly/7UDZbb SPServices/SPXSLT: http://bit.ly/12gHek OOB Styles: http://bit.ly/q4c8Fz
Editor's Notes
- #8: IA and UX are huge fields and mean many different things to different people. In general the concept is
- #13: This site is organized by business unitThe user is looking for the travel reimbursement policyThey need to know the business unit in order to find what they are looking forThey need to know what department in the business unitThe user needs institutional knowledge to find what they need
- #14: Who are your users? Think about who they are and what they need to do.
- #15: This site is organized by needThe user is looking for the travel reimbursement policyThey can go to the policy centerFind all policies in one spot maybe grouped by departmentRequires no institutional knowledgeEmployee Center can aggregate content from all departments to allow new users a one stop shop for new hire related info.
- #16: Clothes cover you. Cars move you from place to place. Yet while we care that products have some basic features, all things being equal we choose the one that delivers, or at least appears, to deliver the user experience we desire.Websites are no different. All else being equal, we’ll choose the Website that helps us achieve our desired experience. In more concrete terms, a good user experience will:Increase conversions: Successful redesigns can increase conversions by up to 100% or more. Increase adoption: Empirical research shows that perceived ease of use and usefulness are primary drivers of technology adoption.Enhance customer satisfaction: A good user experience will increase customer satisfaction and therefore drive repeat and referral business.Key differentiator: Apple elevated the user experience to a high art and look what it did for them.
- #17: What is branding: Branding usually means the feelings and response when you see a product or name. E.g. you ask for a Coke (or Pepsi) usually not a cola. In SharePoint branding means incorporating some level of customization to the look and feel, colors, and layout of your SharePoint site.Governance: Make sure that things look the same across the site and there is uniformity.User Experience: Make the site easier to use for the end user. When the colors, fonts, navigation change on a page by page basis the user gets confused. They need to figure out where everything is again on every page.Messaging: Consistency across multiple web properties. Not saying that your collaboration site needs to look like your public web site but having it have the same fonts and colors create unification, and users feel like they are part of the same company and same application
- #19: Skinning or theming means to put a new look and feel on a SharePoint siteAdds new colors to the existing SharePoint UI Great for OOB sitesEasy to changeThe goal is to change the appearance of SharePoint while having as little impact to existing functionality as possible
- #24: Curved user interface2kDid require some level of customization
- #25: Curved user interface2kDid require some level of customization
- #26: Curved user interface2kDid require some level of customization
- #27: Curved user interface2kDid require some level of customization
- #28: Curved user interface2kDid require some level of customization
- #29: Curved user interface2kDid require some level of customization
- #30: Curved user interface2kDid require some level of customization