SharePoint Techfest 2013
-
Upload
tracey-nolte -
Category
Technology
-
view
1.018 -
download
0
Transcript of SharePoint Techfest 2013
![Page 1: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/1.jpg)
SHAREPOINT 2013
USER EXPERIENCE
SharePoint TechFest | April 4, 2013
![Page 2: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/2.jpg)
INTRO
Tracey NolteUser Experience Practice Area Lead
� Photographer, Videography and loves TRAVELING – pic is in New Orleans
� Owns 2 Pomeranians
� Sci-fi and gamer fanatic
� @traceynolte
![Page 3: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/3.jpg)
INTRO
DENNIS JACKSONSolution Architect
� Soccer Player
� Father of 3 amazing kiddos
� Husband to a beautiful wife
� @dennisjjackson
![Page 4: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/4.jpg)
YAMMERyammer.com/dallassharepointtechfest2013
1. Set up your account
2. Check email to confirm
3. Login to Yammer
4. Request an invitation
5. WAIIIIIIIIIT FOR IT > approval
6. Join our Group �“SharePoint 2013 User Experience Design”
![Page 5: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/5.jpg)
TWITTER1. Tweet questions @dennisjjackson
2. His COOL watch will show us the tweets
![Page 6: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/6.jpg)
SHAREPOINTIS LIKE SKIING…
� It’ .s feels cold and unnatural when you first try it out
� .You could spend a lot of money for the equipment
� It’s something you experience alone but much more !fun with a group of people
� You can never get enough training – face it an instructor and bunny hill will not .make you an expert
� If you don’t plan which path before you get started .you can end up falling off a cliff
� .It takes a lot of courage to try the harder stuff
� The whole time, you are trying NOT to fail – .or die
� There aren’t always gondolas at the top to take you .down if you chicken out
� You can’t always backup
� If you don’t plan ahead you could crash and break ..something
![Page 7: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/7.jpg)
AGENDA
The Story of
CrossboneCrossboneCrossboneCrossbone
Why
UX?
Approach
& Tools
Demo
Wrap-
Up
![Page 8: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/8.jpg)
THE STORY OFCROSSBONE
Crossbone, Crossbone Brands, and all creative designs are the exclusive property of Slalom Consulting, LLC. Reuse, modification, or
redistribution without the explicit permission of Slalom Consulting is strictly prohibited
![Page 9: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/9.jpg)
WHAT IS…
CROSSBONE� It is a fictitious company –that’s way cooler than CONTOSO
� It’s about uniting extreme sports enthusiasts with music and gear
� We will showcase common business problems and demonstrate how to solve them
Crossbone, Crossbone Brands, and all creative designs are the exclusive
property of Slalom Consulting, LLC. Reuse, modification, or redistribution
without the explicit permission of Slalom Consulting is strictly prohibited
![Page 10: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/10.jpg)
CROSSBONEPROBLEMS
� Existing site looks outdated
� Low visitor count, hard to find information, search results aren’t .great and want to increase community
� No success .criteria and measure it ongoing for improvements
� Wasteland of disorganized content and frustrated shoppers
� Employees cant connect with customers
� They want user to be able to listen and buy music online
� Desire to use the latest SharePoint 2013 environment
� And they wanted to “HAVE A GOOD TIME”
Crossbone, Crossbone Brands, and all creative designs are the exclusive
property of Slalom Consulting, LLC. Reuse, modification, or redistribution
without the explicit permission of Slalom Consulting is strictly prohibited
![Page 11: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/11.jpg)
:// . . / /http www youtube com embed 6Ls5j5iz2eA
![Page 12: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/12.jpg)
STEP 2
WHY UX?
![Page 13: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/13.jpg)
USER EXPERIENCE IS ABOUT PEOPLE.
•••••
![Page 14: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/14.jpg)
USER EXPERIENCE IS ABOUT PEOPLE.
When things are well designed, intuitive, easy and fun
.People are delighted
![Page 15: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/15.jpg)
WHAT ISUSER EXPERIENCE?
INFLUENCE DECISIONSTASKS AND THINGSCONSEQUENCES WHICH
AFFECT BUSINESS GOALS
AFFECTHOW PEOPLE FEEL
![Page 16: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/16.jpg)
User Experience is the design of TASKS AND THINGSTASKS AND THINGSTASKS AND THINGSTASKS AND THINGS to influence users to make decisions that align to business
goals – like profitability, .engagement and efficiency
WHAT ISUSER EXPERIENCE?
INFLUENCE DECISIONSTASKS AND THINGSCONSEQUENCES WHICH
AFFECT BUSINESS GOALS
AFFECTHOW PEOPLE FEEL
![Page 17: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/17.jpg)
HOW DOES THIS APPLY TO…
� Store Documents
� Share Knowledge
� Create Content
� Learn About…
� Follow People
� Search Information
TASK + THINGSAFFECT
HOW PEOPLE FEELINFLUENCE DECISIONS
CONSEQUENCES WHICHAFFECT BUSINESS GOALS
SHAREPOINT
� Feels easy to use
� Trusted information
� Confident in creating
� Fun to learn
� Easy to find experts
� Intuitive and can find what I need
� I WILL STORE INFO
� I WILL RELY ON IT
� I WILL CREATE IN IT
� I WILL ENJOY IT
� I WILL SEEK PEOPLE
� I WILL RETURN TO IT
� User Delight & Adoption
� Return on Investment
� Improved Communication
� Enrich company culture
� Employee engagement
� Increased efficiencies
![Page 18: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/18.jpg)
STEP 3
APPROACH & TOOLS
![Page 19: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/19.jpg)
OUR APPROACH?1. Set measurable business goals
2. Talk to their users – DON’ !T ASSUME YOU KNOW THEM� Learn their needs, preferences, ,tasks the equipment they use to
.access the site and other things that affect them
3. Combine user requirements with business goals
4. Prioritize features to user priorities
5. Content audit and strategy
6. Select DESIGN FRAMEWORK (Twitter Bootstrap, 960 GS))
7. ( )Wireframe FOCUS ON FUNCTION NOT BEAUTY
8. Technical feasibility review with developers
9. Test and validate with real people
10. Visual Design (now… you can make it pretty))
![Page 20: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/20.jpg)
TOP TOOLS
DISCOVERY, PLANNING & DESIGN
![Page 21: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/21.jpg)
TOP TOOLS
TESTING and VALIDATION
![Page 22: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/22.jpg)
TOP TOOLS
VISUAL DESIGN
![Page 23: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/23.jpg)
TOP TOOLS
DEVELOPMENT
![Page 24: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/24.jpg)
TOP TOOLS
![Page 25: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/25.jpg)
TOP TOOLSGuiding Principles Guiding Principles Guiding Principles Guiding Principles are a well-defined credo
that can steer .your business to success
![Page 26: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/26.jpg)
TOP TOOLSPersonas Personas Personas Personas represent major groups of users
to help focus on their tasks and needs
![Page 27: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/27.jpg)
TOP TOOLSTask analysis Task analysis Task analysis Task analysis 'learning about your users
,goals what they want to do in the system
and how they work
![Page 28: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/28.jpg)
TOP TOOLSA use caseuse caseuse caseuse case is a description of how users will
.perform tasks on your site A use case includes two main
:parts
• Steps a user will take to accomplish a particular task
• The 'way the site should respond to user s actions
![Page 29: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/29.jpg)
TOP TOOLSA Content StrategyContent StrategyContent StrategyContent Strategy ,includes a content audit content
inventory and planning for how to redistribute information in the new
, .site while focusing on priority ownership and information targeting
![Page 30: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/30.jpg)
TOP TOOLSA Wireframe Wireframe Wireframe Wireframe is a blueprint that demonstrates the
new layout of your site and should iteratively change
.based on thorough testing
![Page 31: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/31.jpg)
TOP TOOLSA Workflow Workflow Workflow Workflow ,is similar to a task analysis but
demonstrates FUTURE state task flow and should be
. ..tied to a wireframe action
![Page 32: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/32.jpg)
TOP TOOLS
![Page 33: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/33.jpg)
TOP TOOLS
![Page 34: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/34.jpg)
TOP TOOLS
![Page 35: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/35.jpg)
TOP TOOLS
![Page 36: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/36.jpg)
TOP TOOLS
![Page 37: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/37.jpg)
TOP TOOLS
![Page 38: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/38.jpg)
TOP TOOLS
![Page 39: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/39.jpg)
TOP TOOLS
![Page 40: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/40.jpg)
TOP TOOLSCREATE DESIGN with LAYERS
![Page 41: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/41.jpg)
TOP TOOLSCREATE FINAL DESIGN
Crossbone, Crossbone Brands, and all creative designs are the exclusive
property of Slalom Consulting, LLC. Reuse, modification, or redistribution
without the explicit permission of Slalom Consulting is strictly prohibited
![Page 42: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/42.jpg)
TOP TOOLSSLICE
Crossbone, Crossbone Brands, and all creative designs are the exclusive
property of Slalom Consulting, LLC. Reuse, modification, or redistribution
without the explicit permission of Slalom Consulting is strictly prohibited
![Page 43: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/43.jpg)
TOP TOOLSSave for Web
Crossbone, Crossbone Brands, and all creative designs are the exclusive
property of Slalom Consulting, LLC. Reuse, modification, or redistribution
without the explicit permission of Slalom Consulting is strictly prohibited
![Page 44: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/44.jpg)
TOP TOOLSHTMLAND IMAGES
![Page 45: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/45.jpg)
TOP TOOLSHTMLAND IMAGES
![Page 46: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/46.jpg)
TOP TOOLS
![Page 47: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/47.jpg)
TOP TOOLS
![Page 48: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/48.jpg)
![Page 49: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/49.jpg)
![Page 50: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/50.jpg)
![Page 51: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/51.jpg)
STEP 4
DEMO
![Page 52: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/52.jpg)
WORKING WITH THE
DESIGNER
� Break down the wireframe or design
![Page 53: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/53.jpg)
WORKING WITH THE
DESIGNER
� Look for main functional areas
![Page 54: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/54.jpg)
WORKING WITH THE
DESIGNER
� Figure out div spans based on framework selected
![Page 55: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/55.jpg)
WORKING WITH THE
DESIGNER
� Identify the functional areas
![Page 56: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/56.jpg)
WORKING WITH SHAREPOINT� Basics
� Dev environment
� Cloudshare
� Approach
� App deployment
� Farm based solution
� Design Manager
� Source Control
� What to control
� Dev Team Communication
� Documentation
![Page 57: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/57.jpg)
WORKING WITH SHAREPOINT� Start with Content
� Metadata
� Site Columns
� Content Types
� Lists and Libraries
![Page 58: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/58.jpg)
WORKING WITH SHAREPOINT� Moving to Structure
� ( )Master Page s
� Page Layouts
� WebParts
� Content by Search
![Page 59: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/59.jpg)
WORKING WITH SHAREPOINT� Style
� Frameworks
� .960 gs
� Twitter Bootstrap
� JQuery
� Customize
� CSS
� JS
� Jquery
![Page 60: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/60.jpg)
WORKING WITH SHAREPOINT� Debugging tools
� Cloudshare
� Fiddler Tool
� Chrome Dev tools
� /Firefox Firebug
![Page 61: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/61.jpg)
WORKING WITH USERS� Governance
� Soft Governance
� Hard Governance
� Content Loading and Training
![Page 62: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/62.jpg)
STEP 5
WRAP UP
![Page 63: SharePoint Techfest 2013](https://reader034.fdocuments.net/reader034/viewer/2022042707/587a73be1a28abf0468b497f/html5/thumbnails/63.jpg)
STEP 5
WRAP UP