User Centered Design and SharePoint Publishing Portals
Download as PPTX, PDF1 like958 views
The document details a presentation on user-centered design and SharePoint publishing portals, highlighting the speaker Tom's extensive experience in user experience design. It outlines the user-centered design process, emphasizing the importance of understanding user needs and the implementation of effective design strategies in SharePoint solutions. Additionally, it covers design principles, project management, and the roles of various stakeholders in the user-centered design process.
User Centered Design and SharePoint Publishing Portals
- 1. User Centered Design and SharePoint Publishing Portals Incorporating User Centered Design and SharePoint Publishing Portals CAP Area SharePoint Interest Group Meetup, 8/19/2015
- 2. About the Speaker Tom is a User Experience Designer, and is very active in the User Experience community. He has devoted countless hours to being entrenched in projects and engaged with local organizations. He learns and shares industry best practices, while applying them into his own work. To advocate the value of usability, he works closely with stakeholders. His belief is that great design is intentional. Tom has nearly 20 years of experience in Graphic and Web Design. Following trending technologies, he shifted his focus to incorporate SharePoint into his work. Since2007, he successfully delivered numerous SharePoint solutions. These projects range between Intranet Portals and Developing Roadmaps, and its respective User Interface, for Communities of Practice and Collaboration Spaces. www.ptdesignsllc.com tom@ptdesignsllc.com linkedin.com/in/tpham211 @tpham211
- 3. PT Designs Design Corporate Branding Web Presence Graphic User Experience UX Exercises Usability Analysis SharePoint Consulting Training O&M Development Front-end Development Custom 25% 30% 45% SERVICE OFFERINGS Design UX SharePoint
- 4. Agenda User Experience User Centered Design Process (UCDP) From Abstract to Concrete Measures of Success UX Team SharePoint Publishing Portals Master Page, Page Layouts, CSS, JS, XSLTs, Search WP CSS Frameworks Responsive Web Bootstrap
- 5. “ ” …pay attention to what users do, not what they say — Jakob Nielsen Start with the end in mind. The end is not completed solution. The end is the user’s satisfaction.
- 6. User Experience Design Information Design Visual Design Interaction Design Information Architecture Usability Design Copywriting Marketing & Communication Technology Considerations
- 7. User Centered Design Process Taking Abstract ideas to Concrete solutions. 5 Planes Strategy, Scope, Structure, Skeleton, Surface Checkpoints, Outputs and Milestones This and more can be found in The Elements of User Experience by Jesse James Garrett
- 8. Strategy User Needs Externally derived goals for the site; identified through user research, etc. Site Objectives Business, creative, or other internally derived goals for the site
- 9. Scope Content Requirements Definition of content elements required in the site in order to meet user needs Functional Specifications “Feature set": detailed descriptions of functionality the site must include in order to meet user needs
- 10. Structure Information Architecture Structural design of the information space to facilitate intuitive access to content Interaction Design Development of application flows to facilitate user tasks, defining how the user interacts with site functionality
- 11. Skeleton Navigation Design Design of interface elements to facilitate the user's movement through the information architecture Interface Design As in traditional HCI: design of interface elements to facilitate user interaction with functionality Information Design Designing the presentation of information to facilitate understanding Wireframe Tool: www.flairbuilder.com Sample wireframe: Conference Portal
- 12. Surface Visual Design Visual treatment of text, graphic page elements and navigational components Graphic treatment of interface elements (the "look" in "look-and- feel")
- 13. Players/Roles Stakeholders Business sponsor Client PM User centered design team Business analyst Information Architect Solutions Architect UX Designer Interface Designer Development team Developer SharePoint Administrator
- 14. Aligning Roles to the User Centered Design Process STRATEGY SCOPE STRUCTURE SKELETON SURFACE ABSTRACT CONCRETE BUSINESS ANALYSTS INFORMATION ARCHITECTS UX/UI DESIGNERS OUTPUTS EXERCISES Design Composition 1 Design Composition 2 Design Composition 3 Wireframe Click-through Wireframe Content Mind Map Content Inventory Site Structure Solution Design Document System Requirement Specifications Business Needs Requirements Functional Requirements Content Mining UX Review Wireframe review with Client Design Comps review with Client Technical Review Meeting Kick-off Meeting Internal Business Needs Review Meeting User Needs Site Objectives Content Requirements Functional Requirements Interaction Design Information Architecture Information Design Interface Design Navigation Design Visual Design UX Team Poster
- 15. Measures of Success What are the project objectives? What are the project’s measure of success? What are your contribution’s measure of success? How can you align measures of success to objectives?
- 16. SharePoint Publishing Portals The “technology”
- 17. SharePoint Publishing Portals Microsoft’s Content Management System Activate Server Publishing Infrastructure Site Collection Administration -> Site Collection Features Activate SharePoint Server Publishing Infrastructure Site Actions -> Manage Site Features Activate SharePoint Server Publishing 2 Major Players in consideration when developing SharePoint Portals. Consumers (site visitors) Accessible Producers (content owners) Manageable
- 18. Publishing Pages Publishing pages differ in that their content is stored separately from the page in the different fields of the Pages library. Traditional pages like those created in the Site Pages library store the page and its contents as a single entity within the library. The publishing page hosts special field controls that read the data from the page item fields and display it on the page. Designers then take control of the Page Layouts to set how content is displayed.
- 19. Page Layouts The advantage of this system is that the actual layout page can be changed out without affecting the content it is displaying. The data from the Pages library item is simply read and displayed in the new layout.
- 20. Master Page
- 21. Leverage CSS Frameworks CSS Framework Comparison Bootstrap http://getbootstrap.com/ Bootstrap Tutorial: http://www.w3schools.com/bootstrap/ BINDTUNING Bootstrap Theme Eric Overfield SharePoint 2013 Branding Bootstrap 3
- 22. Don’t Forget “I didn’t know we had to do that.”
- 23. Security Model Owners Contributors Visitors Owners Full Control Access 2 to 3 users Site Gate Keepers Contributors Contribute Access Content Owners Visitors View Access All Authenticated Users or Internal Group
- 24. Configure Search Search Center Configuration Uses system.master Build Your Own Search Results Create Page Add Search Web Parts Configure Web Parts Configure search settings
- 25. Communication Plan Plan early Align plan with milestones and deliverables Audience Stakeholders Content Owners Users Frequency
- 26. Q & A
Editor's Notes
- #3: Almost 20 years of Graphic and Web Design That path took me to user experience and HCI (human computer interaction) Since 2007 been working with SharePoint at various capacities, team/collaboration sites, 2007, 2010, 2013, publishing sites, InfoPath, workflows This presentation will be made available afterwards so you don’t have to copy the info
- #4: Quick Plug about PT Designs I’m primarily solutions architect Work with a team of designers, information architects, copy writers, developers and engineers The majority of our work is in SharePoint – we have a niche because of our ability to marry visual design and SharePoint technologies Partnerships for contract vehicles
- #5: What you need to put together a UX Team. Not a ‘know a guy’. Then we’ll delve into portals and how SharePoint plays a role in all of this.
- #6: This does not mean “don’t listen to the users” It means to pay closer attention to their actions, in web and software development, that means how they are interacting with the system Are the users happy? Are they delighted by the experience?
- #7: User Experience Design is a collection of all of these things Information Design – content types Visual Design – what the users see, colors, usability guidelines, corporate guidelines Interaction Design – ease of use Information Architecture – information structure that is easy to understand and easy to find Usability Design – text contrast, 508 compliance, readers for the visually impaired Copywriting – writing and language for the web Marketing & Communication – build excitement and anticipation for something better Technology Considerations – understanding capabilities and limitations to help govern how solution is built
- #8: User Centered Design is an approach to designing solutions centered around the user It breaks up into 5 phases/planes Each plane has objectives, exercises, outputs and milestones Most projects start by getting the resident ‘graphic’ guy to come up with a mock-up of the new solution. By doing this, you’re missing the mark completely. If you haven’t already go check out The Elements of User Experience
- #9: Exercises: Kickoff Meeting Business Needs Document review Measures of Success Possible Output: Business Requirements Document
- #10: Exercises: Technical review internally Solution approach vet with Programmers and Admins Possible Output: Functional Requirements Document
- #11: Exercises: Card Sorting Contextual Inquiries Possible Output: Mind Map
- #12: Exercises: Wireframe Session Real Estate Discussion Use Cases Possible Output: Wireframe
- #13: Exercises: Review of logos, fonts, brand assets Look in the “look & feel” Possible Output: Design Comp
- #15: This is a poster I created and it can be downloaded
- #26: Set expectations Build Excitement