This document provides an overview of designing user experience for SharePoint internet sites. It discusses understanding user experience, how it applies to SharePoint, and a case study of how Chippewa Valley Technical College improved their site. It also covers development tools and tips, web analytics and optimization, demos of master pages and branding techniques, and resources for further information. The goal is to make SharePoint sites look and feel less like SharePoint and more like custom-designed websites.

1. Designing your SharePoint
Internet site: The basics

2. Quick Facts
About Us Approach Partnerships
• 22nd Year • Vendor • Microsoft Gold
• Grand Rapids & Independent • VMware Enterprise
Royal Oak • Non-reseller • Citrix Silver
• 30 Staff • Professional • Cisco Registered
Services Only • Novell Gold

3. Expertise

4. Microsoft Gold Partner
Competencies Successes Pinpoint
• Four Gold • Customer Excellence • Microsoft’s official
• Eight Silver Award partner directory
• Virtual Technical • 5-star rating
Specialist (VTSP)
• Managed Partner
• Numerous Partner
Awards

5. Get Social with C/D/H
C/D/H Talks Tech C/D/H Tweets Tech

6. Your Presenter
Jeff Kinnelly
Consultant, Design / Development
JeffK@cdh.com

7. Agenda
• Understanding user experience
• User experience in SharePoint
• Case study: Chippewa Valley Technical College
• Development tools and tips
• Web analytics and optimization
• Demo: Master pages & page layouts
• Demo: Methods for branding SharePoint sites
• Resources

8. The Goal
Make It Not Look Like SharePoint!
8

9. Fiat.com

10. Sharpie.com

11. Brembo.com

12. AMD.com

13. UX. What is it?
User Experience
n. the overall experience and satisfaction a
user has when using a product or system

14. UX. What is it?
User Experience is
multifaceted!

15. UX. What is it?
User Experience is…
a multi-disciplinary process of design
• Accessibility
• Information Architecture (IAI)
• Information Design (IDA)
• Interaction Design (IxDA)
• Technical Writing (STC)
• Usability Engineering (UPA)
• User Research (HFES)
• Visual Design / Branding
• Web Analytics (WAA)

16. UX. What is it?
• Differentiates a product or service
• Creates business opportunities
• Improves efficiency

17. The Proof is in the Returns
10
9
Design Organizations
8
7
6
S&P 500
5
4
3
2
1
0
Year 1
Year 3
Year 5
Stock performance of 63 “Design Oriented Companies” versus the S&P 500 over 1, 3 and 5 years
Source: Peer Research , Fast Company,

18. A Valuable Investment
• “Every $1 invested in usability returns between
$10 and $100” -- IBM, Cost-Justifying Ease of Use
• Investing 10% of a total project budget yields:
Metric Return
Sales/ Conversion rate 100%
Visitors/ Traffic 150%
User Performance / Productivity 161%
Use of (Key) Features 202%
Jakob Nielson, Return on Investment for Usability

19. UX with SharePoint

20. What Users Want
1. Users don’t care about how the software is built. They
want performance, convenience and results
2. Unless it allows them to get their work/task done faster,
they don’t want to learn a new/different way of doing
something
3. They want a responsive UI with visual clues as to ‘what
next’. They don’t want to guess what to do (or hunt for it)
4. As far as they’re concerned the experience is the
product

21. What Users Expect: Conventions
Marcy Kellar / Universal Usability Guidelines

22. Successfully Improving User
Experience
• Use Web Analytics to identify when usability issues occur
(e.g. funnel analysis)
• Find reasons why usability issues occur (e.g. expert review)
• Evaluate different design solutions (e.g. usability testing)
• Validate design solutions (e.g. multivariate testing)
• Use Web Analytics data to optimize navigation (e.g. order
of navigation items)
• Interdisciplinary teams of Information Architects, User
Researchers, Designers, and Web Analysts can fulfill these
requirements best
Source: Nicolas Mohr - SapientNitro

23. Content is King
Facets of content relevant to SharePoint
– Governance & Ownership - Who owns, creates content?
When does content get created or removed? Is it
centralized? Does it need approval?
Format (that content is in)
– Textual documents, articles,, newsletters, audio &
videos, etc.
– Volume
– How big is your website going to be? How many content
contributors do you have?
Dynamism
– What is the rate of growth of content? Should it expire?

24. How Pages Work

25. Design Best Practices
• Master Pages
– 2 or 3
• Home page
• Landing page
• Content Subpage
• Content Types
– 1 – very generic and broad type
• Page Layouts
– Optimal number 5 to 7
• Less than 5  Limited layout options
• More than 7  Difficult to support and train end-users
– Consider maintenance

26. Design Best Practices
• Build your own templates
– Site definitions
– Master pages
– Style sheets
– Content types
– Page layouts
• Leverage SharePoint Community resources
• Randy Drisgill - MVP SharePoint Server
– Starter Master Pages for SharePoint 2010

27. Case Study:
Chippewa Valley Technical College
• Public website
• Rich-media enhancements
• Leverages OOTB functionality
• Leveraged staff’s knowledge
• Rich integration with data systems
• Measureable objectives
– Process Automation
– Centralized course catalog

28. http://www.cvtc.edu/

29. Analytics & Optimization
Performance Goals: Reduce page weight (wait)
Dev/Optimization Analytics SP2010 Techniques
• Yslow • Reinvigorate • Output Caching
• Fiddler • Omniture • CSS Sprites
• Firebug • Consolidate JS & CSS files
• Hammerhead • Google Analytics • Cache JS, CSS and image
• Aptimize • Web Trends files in browser
• Minification of JS and CSS
• Anonymous access for
CSS, JS and image files
• Javascript Suppression

30. Advanced Tips & Tricks
Remove specific content from Search Results
<div class=“footer noindex”/>
<!--- footer content --->
</div>
Security controlled content
<Sharepoint:SPSecurityTrimmedControl runat="server"
Permissions="ManageWeb">
<!--- content here --->
</Sharepoint:SPSecurityTrimmedControl>

31. Advanced Tips & Tricks
Including a footer in your design?
Add s4-notdlg for HTML elements that you don’t want to show in the
dialog boxes
<div class=“customFooter”>
<div class=“customFooter s4-notdlg”>

32. Easily show a Favicon in
SharePoint 2010
Easily show a Favicon in SharePoint 2010
SharePoint 2007 approach
<link rel=“shortcut icon” href=“/Style Library/images/favicon.ico”/>
SharePoint 2010 approach
<SharePoint:SPShortcutIcon runat=“server” IconUrl=“/Style Library/images/favicon.ico”/>

33. Improve Performance

34. Javascript Optimization
The problem…
– SP2010 Javascript payload is large (480k)
– Script On Demand framework (SOD)
– Removal / suppression isn’t currently
supported
The solution…
– A custom control
– Improves page load times by 16%-25%
Chris O'Brien - SharePoint MVP (www.sharepointnutsandbolts.com)

35. Javascript Optimization
Chris O'Brien - SharePoint MVP (www.sharepointnutsandbolts.com)

36. Aptimize
• Automates many optimizations
– Image sprites
– Combining/minifying JavaScript & CSS
• Filter is installed on WFEs
• Good option where no optimization
expertise?
• Project decision – spend $ on product or
implementation effort?

37. Aptimize

38. In Conclusion
• Design should be about making business
sense and achieving business objectives
• Users aren’t concerned about the
technical solution
• Users want performance, convenience
and results
• Every Web CMS has its quirks
• SharePoint remains an evolving and
flexible solution

39. Questions about whether design is
necessary or affordable are quite
beside the point. Design is inevitable.
The alternative to good design is bad
design, not no design at all.
Douglas Martin
Book Design: A Practical Introduction

40. Thank You
Royal Oak Grand Rapids
306 S Washington Ave 15 Ionia SW
Suite 212 Suite 270
Royal Oak, MI 48067 Grand Rapids, MI 49503
p: (248) 546-1800 p: (616) 776-1600
www.cdh.com
(c) C/D/H 2007. All rights reserved