Christopher Baldwin

1
Longhorn User Experience

• Christopher Baldwin
• Architect Evangelist
• Microsoft EMEA DPE

2
Agenda
Presentation
Data
Communication
Base Operating System Services
3
Foundations for Creativity

• Change
• New things become possible
• Experience
• We understand the problems better
• We learn which solutions work and which dont

4
Longhorn Architecture
Presentation
Data
Communication
Base Operating System Services
5
Presentation

• Change
• Ubiquitous, powerful graphics processing units
  (GPUs)
• Better, more diverse monitors
• Experience
• People like web applications
• The line between application user interface (UI),
  documents, and media has blurred

6
Choosing a Client
Windows Forms
Browser
7
Avalon

• Empower Developers
• Flexible Framework
• Best of the Web / Desktop
• Integrating documents and UI
• Leveraging local machine

8
Avalon UI Basics

• A UI is built from elements, including
• Panels page layout and containers for other
  elements
• Controls user interaction
• Shapes vector graphics
• Documents document structure
• Elements have properties
• So behavior and appearance can be customized
• Elements raise events

9
Avalon Illustrating An Application
UI
Code or XAML
10
Avalon UI Using XAML
ltFlowPanel xmlns "http//schemas.microsoft.com/2
003/xaml gt ltButton BackgroundGreen
ClickEventYgt Yes lt/Buttongt ltButton
BackgroundRed ClickEventNgt No
lt/Buttongt lt/FlowPanelgt
XAML
11
Avalon Describing XAML

• An XML-based markup language for
• Application user interfaces
• Documents
• XAML elements correspond to Avalon classes, so
• ltButton Background"Red /gt
• No
• lt/Buttongt
• could also be expressed as
• Button btn new Button() btn.Background
  Brushes.Red btn.Content No"

12
XAML Fundamentals

• Mark-up Object Model
• XAML (Extensible Application Markup Language)
• Provides additional way to author
  content/applications.
• Applications can be pure mark-up, pure code or a
  combination of both (C, VB.NET etc)
• Potential separation of UI and procedural code
• UI can be developed by graphics design artists
• Toolable by design

13
XAML Basics
14
Panels

• Control the rendering of elements
• size, dimensions, their position, behavior
• Rendering is controlled by properties
• Avalon has support for 6 panels
• Everything in XAML uses panels
• ltBorder
• BorderBrush Green
• Background Lavender
• BorderTickness20
• Width100 Height100
• /gt

15
Avalon Panels

• Canvas
• Child elements explicitly placed relative to
  Canvas (x,y coordinates)
• DockPanel
• Child elements aligned to top, bottom, left,
  right, centre.
• FlowPanel
• Child elements arranged according to line breaks
• TextPanel
• Multiple lines of text in multiple text formats
• GridPanel
• Child elements arranged in rows/columns
• FixedPanel
• Child elements on fixed layout page (always same
  position regardless of device)

16
Panels
17
Avalon Single Page Apps
18
Avalon Multi-Page Apps
NavigationApplication
PageN.xaml
ltFlowPanel gt . . . ltHyperLink NavigateUri
"Page1.xaml"gt Home
lt/HyperLinkgt . . . lt/FlowPanelgt
Page1.xaml
ltTextPanel gt . . . lt/TextPanelgt
XAML
. . .
public class Logic1 . . .
XAML
Code
public class LogicN . . .
Code
19
Choosing a main app class

• Application
• User multitasks between many activities at once
• Offers very fast access to large number of tools

• NavigationApplication
• Presents large volume of interrelated information
• Progression through activitiesuser finishes one
  thing before starting another
• Often guides user
• Integrates with web pages

20
Navigation Types

• Explorer
• App runs inside the standard Explorer frame
• User can browse into and out of your apps pages
• Has many links to other apps or sites

• NavigationWindow
• Application runs in its own window
• Apps pages form self-contained world
• App used for long stretches of time
• Helps user perform their dedicated job function
• Default window style can be overridden for
  complete control

21
Applications
22
Avalon Document Basics

• XAML can be used to define documents for
• Viewing
• Printing
• XAML documents can be
• Fixed format
• Flow
• Adaptive flow, with
• Changing font sizes
• Differing numbers of columns
• Hyphenation
• More

23
Avalon An Example XAML Document

• ltDocument
• xmlns"http//schemas.microsoft.com/2003/xaml"gt
• ltAdaptiveMetricsContext FontFamily"Arial"
• ColumnPreferenceLowgt
• ltTextPanel Hyphenationtruegt
• ltSectiongt
• ltHeadinggtA XAML Documentlt/Headinggt
• ltParagraphgt
• Heres a ltBoldgtparagraphlt/Boldgt.
• lt/Paragraphgt
• lt/Sectiongt
• lt/TextPanelgt
• lt/AdaptiveMetricsContextgt
• lt/Documentgt

AdaptiveFlowDoc.xaml
24
Documents

• Not just a Scroll world any more
• Different views, same data
• Designed to enhance the reading experience
• Adaptive Flow
• Fixed Layout

25
Documents
26
Todays Multimedia APIs

• Multiple SDKs
• SDKs have overlap and gaps and do not derive from
  a common base technology
• Difficult to integrate components from each into
  cohesive solution
• Overly Complex Architecture
• ISVs are often forced to make big investments for
  relatively simple solutions
• Poor factored access
• Hard to get at bits and functionality, large
  footprint required for simple needs
• Wheres the .Net?
• Few managed APIs are available for multimedia

27
Avalon Media Basics

• UIs and documents can contain various kinds of
  media

28
Animation
ltButton.Backgroundgt ltSolidColorBrush
Color"Blue"gt ltSolidColorBrush.ColorAnimationsgt
ltColorAnimation From"Red" To"Blue"
Duration"7" RepeatCount"500
AutoReverse"True"/gt lt/SolidColorBrush.ColorAnim
ationsgt lt/SolidColorBrushgt lt/Button.Backgroundgt

• Attract users attention
• Change properties over time
• Color
• Angle
• Width
• Size
• Location
• Opacity
• Can be XAML or code

29
Audio, Video Animation
30
The look and feel

• Theme
• Look defined by the operating system
• Applies to all applications
• Helps support system-wide consistent application
  look and feel
• Style
• Look defined by application author
• Only applies to single application
• Helps support application-wide consistent look
  and feel

31
Setting Property Values

• Simplest form of styling is by setting properties
  directly
• Not very flexible
• You can use a ltStylegt instead.
• flexible
• As use syntax
• Can be applied on a document by document basis
• Hosted on a server and shared

32
Styles
33
Sidebar
34
Sidebar tiles

• Peripheral awareness
• Live data
• Minimal controls
• User controls which tiles appear and where
• Consumes valuable screen real estate make the
  tile worth it!

35
Sidebar flyout

• Quick access to more details and controls
• Made for one quick interaction

36
Sidebar icons

• For very compact representation of status
• Regular tiles that cant fit also take on icon
  form
• Not a launcher

37
Efficiency in sidebar tiles

• Make tile as small as possible
• Auto-hide controls
• Tile should be self-explanatory
• Dont show a title
• Minimum text
• Branding in flyout, not in tile
• Info is live, detailed, contextual, useful
• Okay 500615 pm Presentation
• Better In 5 minutes Presentation
• Hide tile if theres nothing to show

38
Avalon What To Do Now

• Use managed code
• Build and deploy Windows Forms applications
• Use No-Touch Deployment
• Separate visual presentation from application
  logic
• It will help when you replace your visuals for
  Longhorn

39
Longhorn Architecture
Presentation
Data
Communication
Base Operating System Services
40
Data

• Change
• Much cheaper disk space
• Much more data
• And much more diverse data
• Experience
• We cant find things
• Organizing by folders isnt enough
• Applications dont share data well

41
Illustrating NTFS
File
File
File
File
File
File
42
WinFS Basics

• WinFS stores items
• Items have properties
• Properties can be integers, strings, XML, etc.
• An items properties depend on its type
• Each item type is defined by a schema
• An items schema can be extended
• An item might have a file stream
• But its not required
• Items are associated via relationships

43
Illustrating WinFS
WinFS
Properties
Item 1
Item 2
Item 3
. . . . . .
Item N
44
WinFS Example Types
Item
Types
Properties
45
WinFS Example Relationships
46
WinFS Where Its Applied
Desktop
My Documents
My Computer
. . .
Local Disk (C)
My Pictures
Program Files
. . .
47
WinFS Application Interfaces
Application
NTFS
WinFS
48
WinFS
49
WinFS What To Do Now

• Use managed code
• Look at the draft WinFS item schemas
• http//msdn.microsoft.com/ longhorn/understanding/
  pillars/winfs
• Do they meet your needs?

50
Key Longhorn Ideas (1)

• Improved fundamentals
• Especially security
• Much better client applications with Avalon
• Combining the good things from web-based and
  Windows applications
• Schematized data with WinFS
• For better storage, searching, and sharing

51
Key Longhorn Ideas (2)

• Service-oriented applications with Indigo
• And interoperability with non-Windows systems
• A common API with WinFX
• Managed code everywhere

52
Between Today and Longhorn Whidbey

• The Whidbey release of Visual Studio and the .NET
  Framework is scheduled to ship late this year
• It includes
• Version 2 of ASP.NET
• New language features, e.g., Edit and Continue,
  generics
• The first release of ClickOnce installation
• Tools for SOA design

53
Ranking Creativity
Idea Leadership
1980s
1990s
2000s
54
(No Transcript)