SharePoint UI Advancement

OutlineIntroducing the new User ExperienceThe SharePoint Fluent User InterfaceSites as Collections of PagesManaging Data with SharePoint 2010

SharePoint 2007 Command Surfaces

Commands EVERYWHERE

SharePoint 2007 Navigation

Microsoft Confidential

Page reloads and navigations

SharePoint 2007 Web Part Interaction

Microsoft Confidential

Web part interaction? …a choice of

displaying one command or full toolbar

which adds visual clutter

SharePoint 2007 Page Editing

Page Editing – difficult just to add text and your own images

Feedback on SharePoint 2007

“SharePoint design is not intuitive and it is difficult to learn and use.”

“Lack of customization is due to difficulty, not lack of desire.”

“End users are not adequately trained on SharePoint. Many obtain little to no training.”

The SharePoint 2010 User Interface

OutlineIntroducing the new User ExperienceThe SharePoint Fluent User InterfaceSites as Collections of PagesManaging Data with SharePoint 2010

The Server Ribbon

Consistent Streamlined Familiar

Server Ribbon ControlsIN

ButtonSplit button menu

StaticStated

Drop down & Flyout menusCustomizableHierarchical

CheckboxToggle ButtonLabelTextboxCombo boxSpinnerTable controlColor picker

Out In-ribbon gallery control

Drop down grids are our answer

Status Bar and Notification Area

Status Bar

Notification

The Dialog Framework

In-Place Editing

Popup dialog

AJAX refresh

Multi-Level TargettingNo context switching. Edit content where you see it.

Bulk Operations on List Items

Custom?

Dialogs

demo

OutlineIntroducing the new User ExperienceThe SharePoint Fluent User InterfaceSites as Collections of PagesManaging Data with SharePoint 2010

sites are collections of pages

Pages EverywhereEvery team site has a pages libraryCreate a new page with a single click

Just enter a nameReady to go

[[Wiki Linking]] to PagesListsItemsDocuments

1

2

3

Edit Like in WordSingle click editing experience

Transition to edit is quick and seamlessType into page and format text like in Word

Full set of rich text controls for formatting and layout

Streamlined insert experience for images, links

Asset libraryEdit Pick Content Insert

Safe and SimpleAuto-save every minute, no data-loss

Only save if user made changes

Edit\Stop Editing – no promptsWhoops Protection

Rich Text Editor has undo stackVersioning turning on, in case you want to revert

Master Pages

•Team site masterpage•User content pages (lists\content pages\etc)•_layouts pages (site settings, etc)

v4.master

•For app experiences, like Search or Office Web Applications•If you do not need site navigation•If you do not have a ribbon•If your app needs the spaceminimal.mast

er

•For error pages or login pages•Not customizable, but pages can be replacedsimple.master

•Show site using legacy interface•No Ribbon, no fluencydefault.maste

r

Branded Application Pages

Multi-Lingual InterfaceDisplay one site in multiple languages

Language Pack basedEnd-user translations

Primary language set during provisioningSecondary language set by end-userOM Support

PLACE HOLDER FOR IMAGE OF

ADMIN UX

Standards CompliancyWell-Formed XHTML 1.0

Cross-BrowserTier 1 support: IE, FirefoxTier 2 support: Safari

WCAG 2.0 AA

New Rich Text Editor supporting XHTML.

Light Up with User Custom Action

Add commands to common locationsECBRibbonForm ToolbarsView ToolbarsSettings pages

Scoped to list / site / site-collectionSharePoint Designer / Object Model supportDeclarative, no User / Custom Controls

User Actions

demo

OutlineIntroducing the new User ExperienceThe SharePoint Fluent User InterfaceSites as Collections of PagesManaging Data with SharePoint 2010

Customer Asks Related to Forms

I want to be able to create richer forms

more easily.

I want more types than just new, edit and view forms.

I want to change the Web Part in my forms.

SharePoint 2010 Form SupportMultiple forms per typeUser Actions for navigationNew Web 2.0 view technologyReplace default view / edit Web PartInfoPath integration

Multiple Form SupportCreate an arbitrary number of forms for

DisplayNewEdit

Set default forms to show

WebPart

BaseXsltData

WebPart

DataViewWebPart

(V2)

DataFormWebPart

(V3)

BaseXsltListWebPart

(v4)

XsltListFormWebPart

(V4)

XsltListViewWebPart

(V4)

ListFormWebPart

ListViewWebPart

XsltListViewWebPartReplaces ListViewWebPartWeb 2.0 View FrameworkSchema agnosticBetter UX In-Place Editing

Comparing View TechnologiesList View List Form Data

FormXSLT List

ViewRendering Technology

CAML ASP.NET XSLT XSLT

Render Lists X X XRender Items X X XAggregate Data X XRender External Data

X X

Browser Editing X X XSPD Editing X XParameterizable X XConditional Formatting, High customizability

X X

Performance X X X

Inside the XsltListViewWebPart

XmlDefinition

ListName

XSL

SPDataSource

HTML

XsltListViewWebPart

XslCompiled

Transform

CAML Query

List Schema

View Transform

XML Data

InfoPath 2010 and SharePoint 2010

Improved Field

Picker

List Data Connectio

n

Library Data

Connection

List Forms

Creating an InfoPath List Form

XsltListViewWebPart

demo

SummaryIntroducing the new User ExperienceThe SharePoint Fluent User InterfaceSites as Collections of PagesManaging Data with SharePoint 2010