SharePoint User Experience Best Practices


Published on

In this presentation, Perficient leverages its extensive SharePoint user experience design, customization, and implementation expertise to guide you in understanding the criticality of SharePoint user experience (UX) in driving user adoption, and to provide you with user experience best practices in the areas of information architecture and visual design, technical configuration and customization, and user experience server deployments.

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Enterprise PortalsBusiness IntelligenceInteractive Design
  • Walter will cover all the way up to and through this slide and then transition to Sean.
  • Often creates a “first impression” for employees of a company and how they conduct business internally; it establishes credibilityIn order to accomplish this, we must understand the client’s business objectives (GOALS) and the intended behaviors (SCENARIOS) of each audience (PERSONAS). Without this knowledge, the interface design will not be effective. (RELATE THIS TO OUR NR PROCESS)Clinical definition from
  • Many facets to User Experience, i.e. Technical Architecture, Info Arch, Features & Functionality, Interactive Design, Content Management, and Development & Maintenance – Only covering the “front-end” aspects of UX today.The core of what we do and how we begin to understand what the “right solution” is for you:Users – Defining the personas and scenarios of an application ultimately decides what the architecture will be and what content is necessary.Design – The look-n-feel plays a big role in an application. A user needs to connect emotionally to the application in order to completely adopt the tool and use it on a day-to-day basis. In most cases, this is commonly understood for public-facing websites but it’s only recently that companies are beginning to learn that this applies to internal applications as well.Usability – How an application works plays an equally large role for an application. Something can look sharp, professional and on-brand but if it’s confusing as to where to find information, download resources or find personal information, the application will soon be deemed a failure and lose adoption quickly.(Interactive Design – Mention Silverlight possibly.)
  • Master Pages – Defines the overall page structure for common elements such as Header, Footer, and Navigation.Page Layout – A page layout is a template that is used in conjunction with a master page to control the look, feel, and content of a page. Each page layout has an associated content type that determines the kind of content that can be stored on pages based on that page layout.Themes – (Not pictured) Are the most basic form of SharePoint UI customization and are a simple way of changing the color scheme of a site in 2010. PROS: - They are easy to create by non-designers. CONS: - It’s easy to lose a professional look-n-feel - Only screen colors can be changed using themes. - Themes cannot be inherited by parent sites. They must be applied to each individual sub-site. - In order to update a Theme, you have to reapply it on every site that uses it. RECOMMENDATION: - Themes can be appropriate for team sites, when employees wish to customize their own corner of the site. Themes are not an appropriate choice for site-wide customization.
  • These are “common” content areas, although each set of content is specific to each page, company and department so these may/not apply to your organizationRECOMMENDATION:Rolling up content to top level pages (fewer clicks, more efficient users)Featured contentSummary / Recent ListsRelated Links
  • Web Part - added to page, reusable within site in web part zones or content areas in 2010Component – built into master page or page layout
  • In determining how much customization you need and which route to take, you have a few decisions to make. Think about:Maturity of businessIs this your first SharePoint intranet? If so, you may want to keep it light.What kind of budget to you have set aside for the project?Scope of IntranetAre you simply looking to use as a document repository? If so, you may want to keep it light.Do you have a lot of integrated applications? Do your employees “live” in your Intranet? If so, you may want to consider heavy customization.Have you considered the importance of your brand through this initiative and that it will serve as an extension of it?Is there a clear Return-On-Investment? Will this improve productivity or increase user adoption? What are your key goals & objectives? What defines success for the project?
  • Full screen width – critical in SharePoint sites that will be using Out-Of-the-Box web parts, because some web parts can become quite wide (e.g., a document library with many columns)
  • Custom headerDesign for full screenStylized “chrome”Custom Web Parts with CSS for each… you’re still going to haveareas/pages where you’ll utilize out-of-the-box web parts, so this doesn’t necessarily take care of everything
  • Set of Master Pages.
  • Solution Integrity:Do you have source control or do you use document versioning features in SharePoint Designer?Source control is the better choice when dealing with development teamsSharePoint Designer:A powerful tool, but can be problematic when used in complex environments (b/c it can affect the design greatly and have a ripple effect, plus it can effect source control and even possibly affect things in production)Consider disabling access for SharePoint Designer to design elementsStaging & Live Servers:Staging (Test) Server is a must for custom solutionsDesign changes (master pages) can severely impact site so you’ll still want to test them prior to production.Process for Maintenance & EnhancementsYou need to be responsive to usersAs well as stick to creative visionBe sure to Monitor & Analyze your application regularly to learn: Who is using what? What are they searching for? Etc.
  • Determine how much you want to invest in customization – Is this just a better look-n-feel? Or is it more of a strategic move?Who is going to “own” the new application? Marketing, Corporate Communications or IT?What resources do you have to support? Think about Content Admins, Help Desk, Technical, etc. This needs to be thought about early in the process, rather than near Testing & Deployment (last minute).A few other thoughts:Consider structuring your intranet based how your users may be searching for information, not necessarily your Org ChartYou may want to consider taking more advantage of collaboration tools that SharePoint offers to increase user adoption and generate new, relevant content.Document Sharing vs. Idea SharingSearch & TaggingBlogs, Wikis, My Sites &Team SitesWhat is working and not working for your current Intranet? Have you bolstered feedback from your employees, distributors, stores, clients – whomever is using the application? THIS is where you will get your real drivers for redesigning your application, from a visual and technical perspective.What should the overall design theme and tone be for the new Intranet? What kind of feelings are you looking to emote?
  • AAA Cooper TransportationMeijerPacific LifeChick-fil-A
  • These are more-or-less out of the box implementations. There may be some custom work here but it’s very minimal.
  • Information ArchitectureUser Interface DesignSharePoint Development & ImplementationInfrastructure DesignTraining & DeploymentOngoing Management & Support
  • Information ArchitectureUser Interface DesignSharePoint Development & ImplementationInfrastructure DesignTraining & DeploymentOngoing Management & Support
  • Custom look and feelOut-of-the-box calendaring, announcements, and discussionsCustom web parts for managing store information with additional employee hierarchyCustom web part to calculate and roll up store daily sales totals
  • Information ArchitectureUser Interface DesignSharePoint Development & ImplementationInfrastructure DesignTraining & DeploymentOngoing Management & Support
  • Information ArchitectureUser Interface DesignSharePoint Development & ImplementationInfrastructure DesignTraining & DeploymentOngoing Management & Support
  • Information ArchitectureUser Interface DesignSharePoint Development & ImplementationInfrastructure DesignTraining & DeploymentOngoing Management & Support
  • Information ArchitectureUser Interface DesignSharePoint Development & ImplementationInfrastructure DesignTraining & DeploymentOngoing Management & Support
  • Unified branding for public website, customer portal, and intranetSharePoint to Flash integrationSharePoint integrated OCS ChatInfrastructure Design to support OCS and SharePoint
  • SharePoint User Experience Best Practices

    1. 1. SharePoint User Experience Best Practices
    2. 2. About PerficientPerficient is a leading information technology consulting firm serving clientsthroughout North America.We help clients implement business-driven technology solutions that integratebusiness processes, improve worker productivity, increase customer loyalty andcreate a more agile enterprise to better respond to new business opportunities.
    3. 3. Perficient Profile Founded in 1997 Public, NASDAQ: PRFT 2011 Revenue of $260 million Major market locations throughout North America — Atlanta, Austin, Charlotte, Chicago, Cincinnati, Cleveland, Columbus, Dallas, Denver, Detroit, Fairfax, Houston, Indianapolis, Los Angeles, Minneapolis, New Orleans, Philadelphia, San Francisco, San Jose, Southern California, St. Louis and Toronto Global delivery centers in China, Europe and India 2,000+ colleagues Dedicated solution practices 87% repeat business rate Alliance partnerships with major technology vendors Multiple vendor/industry technology and growth awards 3
    4. 4. Our Solutions Expertise & ServicesBusiness-Driven Solutions Perficient Services• Enterprise Portals  End-to-End Solution Delivery• SOA and Business Process Mgmt  IT Strategic Consulting• Business Intelligence  IT Architecture Planning• User-Centered Custom Applications  Business Process & Workflow Consulting• Interactive Design  Usability and UI Consulting• CRM Solutions  Custom Application Development• Enterprise Performance Management  Offshore Development• Customer Self-Service  Package Selection, Implementation and• eCommerce & Product Information Management Integration• Enterprise Content Management  Architecture & Application Migrations• Enterprise Resource Planning  Education• Management Consulting  Interactive Design• Industry-Specific Solutions• Mobile Technology Perficient brings deep solutions expertise and offers a• Security Assessments complete set of flexible services to help clients implement business-driven IT solutions
    5. 5. Our SharePoint Expertise is #1SharePoint is HOT!Perficient is one of the strongest, largest, most trusted SharePoint partners in theUnited States. 400+ professionals in the SharePoint practice area Leader in cloud-based SharePoint Online implementations 500+ SharePoint projects One of 20 companies worldwide on Microsoft Partner Advisory Council for SharePoint Hired by Microsoft to build SharePoint 2010 demo for Microsoft Technology Centers (MTC) Early access to software and training via Product Group relationships Defined competencies in infrastructure, development, design, and strategy Strong partnerships with Nintex, NewsGator, AvePoint, Telligent, Metalogix, and Yammer 5
    6. 6. What We Will Cover• What is SharePoint• What Are Our Assumptions for Today’s Presentation• What is User Experience (UX)• Common SharePoint Project Types• The Anatomy of a SharePoint Page• Deconstructing the SharePoint Page• SharePoint Quality of User Experience By Level of Customization• Examples and Associated Best Practices• Key Considerations for Deployment & Maintenance• Key Questions to Ask Yourself• Case Studies 6
    7. 7. What is SharePoint? Websites & Portals Comprehensive information • Intranet, Extranet, & Internet Sites • Collaboration & Productivity Solutions platform for the enterprise. • On-premise, Cloud-based, & Hybrid Models • Cross Browser, Offline, Mobile, MS Office Integration Business Applications Sites Social Networking• Program & Project Management• Custom Business Application • Communities, My Sites, Blogs & Wikis Development • Tagging, Tag Clouds, Ratings, Activity• Read / Write Integration w/ Line Feeds, Social Bookmarking of Business (LOB) data Composites Communities • Profiles & Expertise• Visual Studio Support • Organizational Browsers• Data Exposed Through Web Services & APIs Web & Enterprise Content • Web Content Management Insights Content • Enterprise Document, Records, Audio/Video Management Business Insight & Analysis • Workflows & Routing, Metadata• Dashboards & Scorecards Taxonomies and Folksonomies Search• BI Reports • Document Imaging & Capture• Incorporation of LOB Data from Data Warehouse Enterprise Search• Web Analytics • Search Structured & Unstructured Content• PowerPivot, Excel Services, Visio • Search Content w/in SharePoint, File Shares, Websites, Services Email Folders, Databases, LOB Systems (FAST Search) • Social Relevance & Phonetic Search
    8. 8. Our Assumptions for Today’s Presentation• SharePoint can be leveraged as a comprehensive information platform for the enterprise. This includes Public Websites for digital marketing (“in front of the firewall”), and Intranet and Extranet portals (“behind the firewall”)• Today, we are focusing on SharePoint User Experience primarily in a “behind the firewall” context.• Today’s topics apply to the SharePoint 2007 or 2010 platforms.• Today is not a presentation or overview of the complete, end-to-end SharePoint platform capability set. 8
    9. 9. What is User Experience?Lexical Definition User Experience (UX) is about how a person feels about using a system. It highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership, but it also includes a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system. User experience is subjective in nature, because it is about an individual’s feelings and thoughts about the system. User experience is dynamic, because it changes over time as the circumstances change. 9
    10. 10. How Does It Work?Process for achieving the proper front-end UX Users Visual Informational Interactive Design Design Design • Branding • Information Architecture • Navigation (menus) • Creative Design • Calls-to-Action • Video & Rich Media • Content • Tagging & Search • Ratings & Comments Presentation • Messaging & Content (Social) • Content Relationships & Page Flow 10
    11. 11. “Questions about whether design is necessary oraffordable are quite beside the point: design is inevitable.The alternative to good design is bad design,not no design at all.” - Douglas Martin 11
    12. 12. Why Invest in User Experience?Advantages • Increase User Adoption • Improve Productivity • Improve Team Collaboration • Empower Employees • Brand Reinforcement • Delight Your End Users 12
    13. 13. Common SharePoint Project TypesTypical SharePoint Applications “Behind the Firewall” Corporate Collaboration CommunicationsSales, Marketing, Human Resources Team Sites, My Sites, Extranets Line of Business Insights & AnalyticsLOB Solutions that Improve Processes BI Reports, Dashboards & Scorecards 13
    14. 14. The Anatomy ofa SharePoint Page Master Page Page Layout Web Parts
    15. 15. Deconstructingthe SharePointPage• Way Finding• Content Areas• Web Parts & Components
    16. 16. Shows the current logged in user.Way FindingThe Company Logo/Portal Title lets the user know what site they’re visiting. Global navigation shows the other sections available and highlights the current section selected. This headline text also reinforces to the user the current section selected. Breadcrumbs provide the path to the current page. This local navigation shows all the other pages at this same level in the site hierarchy while also highlighted the current page.
    17. 17. SearchContent Areas Employee Directory Important Links Employee Highlight Department Updates Department Program Highlights Department Documents News List
    18. 18. SearchWeb Parts &Components Navigation Breadcrumb Link List Document Libraries News List
    19. 19. SharePoint Quality of User ExperienceBy Level of Customization
    20. 20. Example #1: LightBasic out-of-the-box approachw/ custom Master Page styling• Custom header, navigation and footer• Design for full screen width• Styled web part wrapper, i.e. “chrome”• Light Page Styling
    21. 21. Example #2: LightSame as Example #1 but withOOB web part placed on it• Custom header• Design for full screen• Styled web part wrapper, i.e. “chrome”• Basic CSS (Title 1 & 2, Body)• No Custom Web Parts
    22. 22. Example #3: HeavySame as Example #1 but withall custom web parts• Custom header, navigation and footer• Page Layout Design for full screen width• Styled web part wrapper, i.e. “chrome”• Custom Web Parts with Layout and Styles for each• Additional Considerations: • Default Styles • My Sites
    23. 23. Example #4Suite of Master Page designs
    24. 24. For Go-Live & Ongoing SupportKey Considerations for Deployment & Maintenance • Solution Integrity (Source Control vs. Document Versioning) • SharePoint Designer (Powerful, Potentially Problematic) • Staging & Live Servers • Process for Maintenance & Enhancements 24
    25. 25. Questions to Ask YourselfBefore beginning a SharePoint UX project, think about: • Who are the different users? • What kind of content do you want them to have? • What kind of content do they want? • Are you ready to invest in customization? • Who will take ownership of the business needs and governance? • What resources do you have to support the solution? 25
    26. 26. SharePoint UXPortfolio
    27. 27. Portfolio :: SharePoint :: Intranets/Portals
    28. 28. Portfolio :: SharePoint Out-of-the-box :: Intranets/Portals
    29. 29. PORTFOLIO :: Corporate Intranet :: SharePointAAA Cooper Transportation SharePoint Content Administration Toolbar
    30. 30. PORTFOLIO :: Corporate Intranet :: SharePoint 2010Pacific Life
    31. 31. PORTFOLIO :: Corporate Intranet with BI :: SharePointGoodwill
    32. 32. PORTFOLIO :: Corporate Intranet :: SharePointMercer
    33. 33. PORTFOLIO :: Corporate Intranet :: SharePointMolnlycke Health Care
    34. 34. PORTFOLIO :: Corporate Intranet :: SharePointNewell Rubbermaid
    35. 35. PORTFOLIO :: Sales & Marketing Intranet :: SharePointTime Warner Cable
    36. 36. PORTFOLIO :: Intranet :: SharePointEmory University: Development and Alumni Relations
    37. 37. PORTFOLIO :: Intranet :: SharePointEmory University: Board of Trustees
    38. 38. PORTFOLIO :: Integrated Solution Across Public Website, Customer Portal, and Corporate Intranet :: SharePointJAS Forwarding Worldwide Customer PortalPublic Website Corporate Intranet
    39. 39. Contact Us Thank You!Follow us on our Microsoft blog: Or on Twitter: @Perficient_MSFT 39