Case Study – Redesign of the SAS Flash Cards Application from iOS* to Windows* 8 UI

Tan Phan, Development Lead, SAS Institute Inc.
Priya Vaidya, AE Lead, Intel Corporation

I. Summary

The software development team at SAS has been involved in re-designing an existing iOS Flash Cards application to take full advantage of the new features available on tablets and devices based on the Intel® Core™ and the Intel® Atom™ architectures running Windows 8. The various tablets and performance profiling provided by Intel allowed SAS to quickly identify and correct low-performing areas such as app startup and content preview downloads. This case study outlines the lessons learned in doing the successful redesign of the SAS Flash Cards application to Windows 8 Modern UI.

II. Introduction

SAS Flash Cards gives players the ability to increase their knowledge on a large number of subjects and grade levels. SAS Flash Cards was first available in iOS and has been functionally ported to Windows 8.

III. Architecture, Content, and Methods

In this document, the following terms are used.

  • The names “Flash Cards” and “SAS® Flash Cards” are used interchangeably.
  • “Windows 8 UI” refers to the Windows 8 User Interface technology on which Flash Cards for the Windows 8 tablet can run.
  • “iOS” refers to the UI technology on which Flash Cards for the iPad can run.

Flash Cards is not an all-graphics-based game; it is a word-based, content-browsing, educational application that must adhere to standard UI guidelines and established presentation strategies.

A. User Interface

Flash Cards for Modern UI was a complete UI rewrite to ensure a beautiful fit for Windows 8 and to provide users the best possible experience on Windows 8-based tablets. The goal, of course, is to build and ship first-class products.

Organization and presentation

Flash Cards for iOS has multiple views with each providing hierarchical but compartmentalized access to user downloaded decks or to server search functions and search results. The Home page displays icons for the high-level sections of the app. For example, tapping the Search icon expands to show only search functions and results.

The Home page of Flash Cards for iOS*

Flash Cards for Windows 8 essentially flattens the iOS UI. Flash Cards for Windows 8 combines both the downloaded decks and server contents onto its Home page and prioritizes one-touch access to the most recently played decks, the most popular decks on the server, and the highest-rated decks. The design also speeds user access to decks grouped by subject and by grade level.

The Home page of Flash Cards for Windows* 8

More of the Windows* 8 Home page

From app startup, the user can start or resume with one touch, preview recently uploaded decks with one swipe, or drill down to browse for more content with one tap.

Other organizational functions such as sorting, categorical grouping, and semantic zooming are available from the appbar via a quick flick from the bottom edge of the screen.

Navigation

In Flash Cards for iOS, to get from the downloaded decks to the search results, the user must navigate up the page hierarchy to Home and then down to the search page.

Flash Cards for Windows 8 integrates both downloaded and server decks into its pages. Simply by tapping the page header, a menu drops down allowing users to quickly side-navigate from one page to another page anywhere in the page collection. The combination of these design features significantly reduces the number of user interactions needed to locate content.

Content preview

The deck collections in Flash Cards for iOS present content in a traditional list table, with one deck per row, and with static icons to hint deck content type alongside the name and description.

My Decks listing in Flash Cards for iOS*

In keeping with Microsoft’s design paradigm, Flash Cards for Windows 8 presents decks in collections of rectangular tiles. To make the most of the available space, each tile displays the image of the first card (if available) as the tile background, the name and description, and the ratings and grade level for the server deck or the score if the deck has been played. The tiles are also color-coded to visually hint content type such as the subject or grade level.

Making optimal use of space in this tile presentation highlights and provides the user with instant access to the most pertinent information for each deck in any deck collection.

The group listing of the popular decks in Windows* 8

Flash Cards for Windows 8 also simplifies the details page for each deck to:

  • Previews contents prior to downloading
  • Simplify display of session statistics and ratings
  • More intuitively access the practice and quiz settings
  • More quickly start or resume of a session
  • Display a prominent download button

The details page for a deck in Windows* 8

Search

Flash Cards for iOS provides filtering for downloaded decks and server deck searches as separate pages.

Search page for iOS*

Flash Cards for Windows 8 provides integrated deck filtering and server deck searches using the search box on the top right corner of every page.

Embedded search results for the eight most popular decks as shown on the Windows* 8 Home page

The Windows 8 Charms bar hosts another dedicated server search capability for Flash Cards. A quick flick from the right edge of the screen activates the Windows 8 Charms and Search. The results from this server search can be further filtered by subject and/or tuned by grade level.

Application Behavior

The card play sequence remains unchanged between Flash Cards for iOS and Windows 8. Each deck can be played in either practice or quiz mode. In practice mode, the user has access to the answer key, can replay cards, and can move freely between the cards. In quiz mode, the card sequence is randomized and the user’s answers are timed and scored.

The quiz and solution cards in Windows* 8

The card play UIs are very similar with the exception of the presentation of the quiz score and detailed report. Flash Cards for Windows 8 makes the quiz scores and report “front-and-center” at the end of each session.

The score card in Windows* 8

B. Content

As mentioned earlier, both iOS and Windows 8 Flash Cards clients access the same server and use the same web services. Both clients process the same lists of decks and deck contents. Porting the application to Windows 8 did not require any changes to the server web services or server content.

IV. Effort required and timelines

The first release of Flash Cards for Windows 8 required two months of development (with testing in parallel) followed by two additional weeks for testing and packaging. The internal SAS legal review and the Windows Store submission took another two weeks. Microsoft approved Flash Cards in less than three days after the submission.

V. Scope/Impact/Relevance to SAS and Intel

The hardware/software collaboration between SAS and Intel greatly contributed to successful performance tuning of Flash Cards for Windows 8. The various tablets and performance profiling provided by Intel allowed SAS to quickly identify and correct low-performing areas such as app startup and content preview downloads.

VI. Leadership/Innovation

Starting with the iOS client implementation as a reference, several innovations have been incorporated into Flash Cards for Windows 8. Many features take full advantage of the new Windows 8 design paradigm.

  • Preview of deck contents used as the tile background
  • Optimized use of space for each deck tile to show score and stats or ratings and grade level

  • Powerful presentation of deck collections via Windows 8 grouping and semantic zoom

Grouping

Semantic zoom

  • Custom and direct access to important decks via Live Tiles from the Windows 8 Start page
  • Flexible sharing of deck and quiz reports via Share from the Windows 8 Charms bar
Pour de plus amples informations sur les optimisations de compilation, consultez notre Avertissement concernant les optimisations.