1. New User Interface Possibilities in Longhorn
1/1/2019 6:19 AM
Session Code: CLI304
New User Interface Possibilities in Longhorn
Jan Miksovsky
User Interface Architect
Microsoft Corporation
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

2. New user interface ideas…
1/1/2019 6:19 AM
New user interface ideas…
Web-style navigation in client applications
Navigation-based tasks
Assistance alongside UI
Peripheral information awareness
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

3. … built into the platform
1/1/2019 6:19 AM
… built into the platform
Web-style navigation in client applications
Navigation-based tasks
Assistance alongside UI
Peripheral information awareness
NavigationApplication
PageFunction
Help pane (Help.Pane)
Sidebar (BaseTile)
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

4. Desktop Navigation System.Help 1/1/2019 6:19 AM System.Windows
Tools
Client Application Model
Web & Service Application Model
Data Systems Application Model
Mobile PC & Devices Application Model
Command Line
Compact Framework
Win FS
Yukon
System.Console
Avalon
Windows Forms
ASP.NET / Indigo
Mobile PC Optimized
System.Windows
System.Windows.Forms
System.Web
System.Storage
System.Data.SqlServer
System.Windows.Forms
System.Windows
NT Service
System.ServiceProcess
Presentation
Data
Communication
System.Windows
System.Search
System.Data
System.Messaging
System. Discovery
System.Collaboration
UI Element
Explorer
Media
Annotations
SqlClient
DataSet
System.DirectoryServices
RealTimeEndpoint
Documents
Controls
Animation
SqlTypes
Mapping
Active Directory
System.Remoting
TransientDataSession
Monitoring
Text Element
Dialogs
Controls
SqlXML
ObjectSpaces
SignalingSession
Desktop
Logging
System.Runtime.Remoting
Uddi
Shapes
Control
OdbcClient
ObjectSpace
Media
Relevance
Shape
Navigation
Notification
Panel
OleDbClient
Query
Activities
Ink
Design
OracleClient
Schema
System.Web.Services
System.MessageBus
Transport
Queue
System.Storage
Web.Service
System.Windows.Forms
System.Web.UI
Item
Core
Description
Port
PubSub
Forms
Page
WebControls
Relationship
Contact
Discovery
Channel
Router
Control
Control
Adaptors
Service
Policy
Media
Location
Protocols
Print Dialog
HtmlControls
Design
Peer Group
Audio
Message
Design
MobileControls
Video
Document
System.Net
System.Help
Images
Event
System.Web
System.Speech
HttpWebRequest
NetworkInformation
System.Xml
Personalization
FtpWebListener
Sockets
System.Drawing
Recognition
Synthesis
Caching
Schema
Xpath
SslClientStream
Cache
System.NaturalLanguageServices
Serialization
Query
SessionState
WebClient
Fundamentals
Base & Application Services
Security
Configuration
Deployment/Management
System.Timers
System.Text
System.Collections
System.Windows. TrustManagement
System.Web.Configuration
System.Security
System.Web
System.Globalization
System.Design
Generic
System.MessageBus.Configuration
Administration
System.Serialization
System.IO
System.Web. Security
Authorization
Permissions
System.ComponentModel
System.Configuration
Management
System.Threading
Ports
AccessControl
Policy
System.CodeDom
System.Resources
System.Message Bus.Security
Credentials
Principal
System.Management
System.Runtime
System.Reflection
Cryptography
Token
System.Deployment
Serialization
InteropServices
System.EnterpriseServices
System.Diagnostics
CompilerServices
System.Transactions
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

5. Navigation applications
1/1/2019 6:19 AM
Navigation applications
Client apps that users browse like a web site
One full-window page at a time
Hyperlinks, Back, etc.
Suitable for
Browsing interrelated information
Guiding users through tasks
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

6. Why navigation? Improve ease of use
1/1/2019 6:19 AM
Why navigation?
Improve ease of use
Focus user’s attention—unnecessary information and tools are out of the picture
Leverage familiarity with web browsing
Safe exploration with easy recovery (Back)
Reduce window management chore
Improve “flow” of the user experience
Build connections between features
Blend app UI with system, web sites, other apps
New design opportunities in full-window pages
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

7. AERO Application Archetypes
1/1/2019 6:19 AM
AERO Application Archetypes
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

8. 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 activities—user finishes one thing before starting another
Often guides user
Integrates with web pages
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

9. Hosting in Explorer App runs inside the standard Explorer frame
User can browse into and out of your app’s pages
Like a web site, the app owns the page, not the frame
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

10. Explorer Navigation Controls
1/1/2019 6:19 AM
Explorer Navigation Controls
Title
Address bar
(Favorites pinned by user)
Forward (when available)
Search
Favorites Menu
Back
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

11. Hosting in NavigationWindow
1/1/2019 6:19 AM
Hosting in NavigationWindow
Application runs in its own window
App’s pages form self-contained world
Default window style includes basic and consistent navigation controls—can be overridden for complete control over UI
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

12. Choosing a main window Explorer
Quick access into and out of app’s pages
Has many links to other apps or sites
NavigationWindow
App used for long stretches of time
Helps user perform their dedicated job function
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

13. Navigation-based features in traditional apps
1/1/2019 6:19 AM
Navigation-based features in traditional apps
Wizard dialog
Task pane
Navigable document window
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

14. 1/1/2019 6:19 AM
Wizard dialog
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

15. 1/1/2019 6:19 AM
Task pane
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

16. Navigable document window
1/1/2019 6:19 AM
Navigable document window
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

17. Scenario: Order Management System
1/1/2019 6:19 AM
Scenario: Order Management System
LOB database client for taking orders
Used heavily by sales reps
Generally work with one order at a time
List Screen
Details Screen
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

18. Navigation in a database client
1/1/2019 6:19 AM
Navigation in a database client
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

19. Degree of user control Typical sales order User in control
1/1/2019 6:19 AM
Degree of user control
User in control
Typical sales order
Software leads user
Infrequent tasks
Regular activities
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

20. Putting the user in control
1/1/2019 6:19 AM
Putting the user in control
App or feature used for regular activities day in and day out
Emphasis on efficiency
Domain-specific
App offers features, user decides what to do
User invests in understanding UI for productivity gains
Typical sales order
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

21. Degree of user control Custom sales order Typical sales order
1/1/2019 6:19 AM
Degree of user control
User in control
Custom sales order
Typical sales order
Software leads user
Infrequent tasks
Regular activities
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

22. Putting the user in control
1/1/2019 6:19 AM
Putting the user in control
Typical sales order
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

23. Guiding the user App or feature used in infrequent task
1/1/2019 6:19 AM
Guiding the user
App or feature used in infrequent task
Emphasis on overall results
General purpose
App gives instructions or asks questions, user answers
User invests little or no time understanding UI
Custom sales order
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

24. 1/1/2019 6:19 AM
Degree of user control
User in control
Bad: User is confronted with bewildering tools and puzzling dialogs
Typical sales order
Software leads user
Infrequent tasks
Regular activities
Bad: User feels held back by software
Custom sales order
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

25. 1/1/2019 6:19 AM
Guiding the user
AERO guidelines include a UI model and design process for creating navigation-based tasks called “inductive UI”
Text guidelines
Layout guidelines
Suggested navigation topologies
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

26. Performing tasks in-frame
Order details page
Hyperlink
Hyperlink
Custom order task
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

27. Launching from multiple places
1/1/2019 6:19 AM
Launching from multiple places
Order list page
???
The task page has no easy way to know where the user came from
Order details page
Custom order task
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

28. Hyperlinks are GOTO statements
1/1/2019 6:19 AM
Hyperlinks are GOTO statements ≈
<a href=“Foo.html”>
GOTO Foo
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

29. Hyperlink return hacks
1/1/2019 6:19 AM
Hyperlink return hacks
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

30. PageFunctions are function calls
1/1/2019 6:19 AM
PageFunctions are function calls
PageFunctions
Are page(s) called like a function
Defined in markup/code like other pages
Can return a result to the caller
Return the user to where they started
Allow code reuse through clean functional encapsulation
Can let someone plug their pages into your app (and vice versa)
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

31. PageFunction call Order details page Custom order task
1/1/2019 6:19 AM
PageFunction call
Order details page
PageFunction invocation
Return from PageFunction
Custom order task
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

32. Returning to calling location
1/1/2019 6:19 AM
Returning to calling location
Order list page
Order details page
PageFunction invocations
Return from PageFunction —frame automatically returns user to wherever they started
Custom order task
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

33. 1/1/2019 6:19 AM
PageFunctions
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

34. 1/1/2019 6:19 AM
Help pane
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

35. Spectrum of interaction possibilities
1/1/2019 6:19 AM
Spectrum of interaction possibilities
Sidebar icon
Not interactive
Cursor change
Log entry
Sound effect
Status bar
Speech
UI text
Balloon tip
ToolTip
Notification
Instant message
Sidebar tile
Interaction possible but not required
message
Task pane/ Help pane
Notification with actions
Modeless dialog
Tool/Info Palette
App-modal dialog
System-modal dialog
Embedded dialog
Interaction required
Intrusive
Unobtrusive
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

36. 1/1/2019 6:19 AM
Sidebar
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

37. 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!
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

38. Sidebar flyout Quick access to more details and controls
1/1/2019 6:19 AM
Sidebar flyout
Quick access to more details and controls
Made for one quick interaction
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

39. Sidebar icons For very compact representation of status
1/1/2019 6:19 AM
Sidebar icons
For very compact representation of status
Regular tiles that can’t fit also take on icon form
Not a launcher
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

40. Efficiency in sidebar tiles
1/1/2019 6:19 AM
Efficiency in sidebar tiles
Make tile as small as possible
Auto-hide controls
Tile should be self-explanatory
Don’t show a title
Minimum text
Branding in flyout, not in tile
Info is live, detailed, contextual, useful
Okay: “5:00–6:15 pm Presentation”
Better: “In 5 minutes: Presentation”
Hide tile if there’s nothing to show
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

41. Creating a sidebar tile
1/1/2019 6:19 AM
Creating a sidebar tile
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

42. 1/1/2019 6:19 AM
Summary
Longhorn’s new AERO user experience guidelines directly supported by WinFX
Navigation client apps great for browsing information, guiding through tasks
New ways of delivering information to users, including Help pane and sidebar
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

43. Community Resources Track Lounge Newsgroup Longhorn Developer Center
1/1/2019 6:19 AM
Community Resources
Track Lounge
Newsgroup
microsoft.public.windows.developer.winfx.aero
Longhorn Developer Center
msdn.microsoft.com/longhorn/understanding/ux
Section on “Understanding AERO”
“Picking the Right Degree of Control for User Interfaces”
Sidebar guidelines
MSDN
Search for “inductive user interface”
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

44. © 2003-2004 Microsoft Corporation. All rights reserved.
1/1/2019 6:19 AM
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.

45. 1/1/2019 6:19 AM
© Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.