Upload
tracey-nolte
View
1.015
Download
0
Embed Size (px)
Citation preview
SHAREPOINT 2013
USER EXPERIENCE
SharePoint TechFest | April 4, 2013
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
INTRO
DENNIS JACKSONSolution Architect
� Soccer Player
� Father of 3 amazing kiddos
� Husband to a beautiful wife
� @dennisjjackson
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”
TWITTER1. Tweet questions @dennisjjackson
2. His COOL watch will show us the tweets
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
AGENDA
The Story of
CrossboneCrossboneCrossboneCrossbone
Why
UX?
Approach
& Tools
Demo
Wrap-
Up
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
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
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
:// . . / /http www youtube com embed 6Ls5j5iz2eA
STEP 2
WHY UX?
USER EXPERIENCE IS ABOUT PEOPLE.
•••••
USER EXPERIENCE IS ABOUT PEOPLE.
When things are well designed, intuitive, easy and fun
.People are delighted
WHAT ISUSER EXPERIENCE?
INFLUENCE DECISIONSTASKS AND THINGSCONSEQUENCES WHICH
AFFECT BUSINESS GOALS
AFFECTHOW PEOPLE FEEL
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
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
STEP 3
APPROACH & TOOLS
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))
TOP TOOLS
DISCOVERY, PLANNING & DESIGN
TOP TOOLS
TESTING and VALIDATION
TOP TOOLS
VISUAL DESIGN
TOP TOOLS
DEVELOPMENT
TOP TOOLS
TOP TOOLSGuiding Principles Guiding Principles Guiding Principles Guiding Principles are a well-defined credo
that can steer .your business to success
TOP TOOLSPersonas Personas Personas Personas represent major groups of users
to help focus on their tasks and needs
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
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
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
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
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
TOP TOOLS
TOP TOOLS
TOP TOOLS
TOP TOOLS
TOP TOOLS
TOP TOOLS
TOP TOOLS
TOP TOOLS
TOP TOOLSCREATE DESIGN with LAYERS
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
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
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
TOP TOOLSHTMLAND IMAGES
TOP TOOLSHTMLAND IMAGES
TOP TOOLS
TOP TOOLS
STEP 4
DEMO
WORKING WITH THE
DESIGNER
� Break down the wireframe or design
WORKING WITH THE
DESIGNER
� Look for main functional areas
WORKING WITH THE
DESIGNER
� Figure out div spans based on framework selected
WORKING WITH THE
DESIGNER
� Identify the functional areas
WORKING WITH SHAREPOINT� Basics
� Dev environment
� Cloudshare
� Approach
� App deployment
� Farm based solution
� Design Manager
� Source Control
� What to control
� Dev Team Communication
� Documentation
WORKING WITH SHAREPOINT� Start with Content
� Metadata
� Site Columns
� Content Types
� Lists and Libraries
WORKING WITH SHAREPOINT� Moving to Structure
� ( )Master Page s
� Page Layouts
� WebParts
� Content by Search
WORKING WITH SHAREPOINT� Style
� Frameworks
� .960 gs
� Twitter Bootstrap
� JQuery
� Customize
� CSS
� JS
� Jquery
WORKING WITH SHAREPOINT� Debugging tools
� Cloudshare
� Fiddler Tool
� Chrome Dev tools
� /Firefox Firebug
WORKING WITH USERS� Governance
� Soft Governance
� Hard Governance
� Content Loading and Training
STEP 5
WRAP UP
STEP 5
WRAP UP