nokia music is, like, awesome
DESCRIPTION
Nokia Music is, like, awesome. The Story of Bringing Nokia Music to Big Windows. Matt Cooper, Ben Buttigieg, Craig Pugsley Senior Architect, Senior Code Monkey, Principle Pixel Pusher Nokia Music, Bristol, UK 2-219. Agenda. Where we started Design approach Architecture approach - PowerPoint PPT PresentationTRANSCRIPT
Nokia Music is, like, awesome
The Story of Bringing Nokia Music to Big WindowsMatt Cooper, Ben Buttigieg, Craig PugsleySenior Architect, Senior Code Monkey, Principle Pixel PusherNokia Music, Bristol, UK2-219
Where we startedDesign approachArchitecture approachDevelopment challengesDesign tips and tricks
Agenda
Nokia Music for Windows Phone demo
Windows Phone design
Central application hub with home page menu
Information Architecture
Information Architecture for Nokia Music
Information Architecture for Nokia Music
Original architecture
Windows Phone Application Architecture
Nokia Music REST API
Shared Libraries (WP7)
API Wrapper
Utilities and Business Logic
Windows Phone 7 Application
Views
View Models
Models
Windows Phone 8 Application
Views
View Models
Models
Target architecture
Target Architecture
Nokia Music REST API
Shared Libraries (PCL)
API Wrapper
Utilities and Business Logic
Platform Abstraction Interfaces
Windows Phone 7 Application
Views
Platform Specifics
Windows Phone 8 Application
Views
Platform Specifics
Windows 8 Application
Views
Platform Specific
View Models
Models
Shared Libraries (PCL)
API Wrapper
REST API and C# APIs
Nokia Music REST API
Public REST API
WP7 API
Public API wrapper
WP8 API
Public API wrapper
Win 8 API
Public API wrapper
Makes it easy for you to integrate music data into your app.MusicClient api = new MusicClient(AppId);var artists = await api.GetTopArtistsAsync();list.ItemsSource = artists.Result;// when user selects artist... artist.PlayMix();
Nokia Music C# API
Initial design approach
SIMPLESupreme ease of use from FTU onwardsNo registration. Click: play
DELIGHTFULContent is kingPersonally relevant
EFFORTLESSFocus on the casual user
LOVE THE PLATFORM
Know what’s important.
It helps when making design decisions.
Design Principles
Know HOW you’re going to be used
Microsoft have lots of information on this in their design guidelines.
Ergonomics & Gestures
Know WHERE you’re going to be used
Know WHO will be using your app
“If you want a great site, you’ve got to test. After you’ve worked on a site for even a few weeks, you can’t see it freshly anymore. You know too much. The only way to find out if it really works is to test it.”
- Steve Krug Krug, Don't Make Think: A Common Sense Approach to Web Usability
What we did first
Cut-out-and-stick IA demo
WP8 <> W8 demo
The harsh reality…
Original Windows 8 application architecture
Nokia Music REST API
Shared Libraries (WP7)
API Wrapper
Utilities & Business Logic
Windows Phone 7 Application
Views
View Models
Models
Windows Phone 8 Application
Views
View Models
Models
Windows 8 Application
Views
View Models
Models
Windows 8 Libraries
API Wrapper
Utilities & Business Logic
Current application architectureNokia Music REST API
Shared Libraries (WP7)
API Wrapper
Utilities & Business Logic
Windows Phone 7 Application
Views
View Models
Models
Windows Phone 8 Application
Views
View Models
Models
Windows 8 Application
Views
View Models
Models
Portable Libraries
API Wrapper
Utilities & Business Logic
Ben Buttigieg(Senior code monkey)
What is it?What was the problem?What was the solution?
Connected Standby
Screen OFF
Network ON
Connected Standby Flow
Song 1 Song 2
Device enters connected standby. Screen shuts off, device enters lowest power mode that supports audio playback.
MediaElement opens network connection and starts buffering Song 2. We use this is our opportunity to request next set of tracks to stream.
Network ON
Low Power Audio Platform State
Screen ONScreen ON
Network ON
Device exits connected standby. Screen turns on and network is brough out of it’s low power state.
Low Power Audio Platform State
MediaElements indicates that it no longer requires network connection so device re enters low power audio playback mode and drops network connection. Any requests made after this point is likely to cause the app to be terminated.
What is it?What was the problem?What was the solution?
Semantic Zoom
SemanticZoom views bound to CollectionViewSource used to perform the sorting and grouping. Automatically synchronizes scroll position when switching between the two views.
Typical Semantic Zoom Implementation
SemanticZoom Control
Zoomed In View
Model
CollectionViewSource
Zoomed Out View
XAML
Database
Dedicated virtualized collections with no grouping and bound to each view independently. Ensures virtualisation can still be enabled. But requires scroll position to be manually synchronised between views.
Our Semantic Zoom Implementation
SemanticZoom Control
Zoomed In View
Database
Albums Virtualized Vector
Task<int> GetCountAsync();Task<T> GetItemAsync(int index);int GetIndexOf(T item);
Zoomed Out View
Artists Virtualized Vector
Task<int> GetCountAsync();Task<T> GetItemAsync(int index);int GetIndexOf(T item);
XAML
Top 10 design tips & tricks
Top 10 design tips & tricks
1. Make some principles2. Make your app consistent
Share: visual styles iconography naming conventions copy style
Consistent Brand Experience
Top 10 design tips & tricks
1. Make some principles2. Make your app consistent3. READ THE GUIDELINES!
FLAT
Understand Windows 8 Interaction Models
HEIRARCHICAL
Understand Windows 8 Interaction Models
Top 10 design tips & tricks
1. Make some principles2. Make your app consistent3. READ THE GUIDELINES!4. Use the apps5. Don’t fear long Hubs
Top 10 design tips & tricks
6. Sweat the details7. Know how components map8. Flatten your IA9. Be aware of resolution & scaling
Top 10 design tips & tricks
6. Sweat the details7. Know how components map8. Flatten your IA9. Be aware of resolution & scaling10. Leave snap view to last
That’s it!
Q&A
ResourcesWindows 8 Design Guidelineshttp://msdn.microsoft.com/en-us/library/windows/apps/hh779072.aspx
Nokia Music APIhttp://nokia.ly/wpmusicapi
@craigpugsley
@benbtg @mcooperg
Evaluate this session
Scan this QR code to evaluate this session and be automatically entered in a drawing to win a prize!
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.