Download - QuickShare UI Metro App

Paul Hilburger4/03/2013

QuickCast Windows 8 v2.0UI Design Spec 2.1

2012 LENOVO CONFIDENTIAL. ALL RIGHTS RESERVED.2

Table of Contents

Launching QuickCast Pages 3-5 QuickCast Interface Page 6Launching QuickCast Pages 3-5NFC messages Page 7Scan for Devices Pages 8-10Connecting to Device Pages 11-16Selecting Files Pages 17-18Sending Files Page 19File Icons 0Cancel Send Page 21 -22Pause Send Page 23Progress Bar Page 24QuickCast Alert Page 25Receiving Files Pages 26-28Error Messages Pages 29-30Delete Record Pages 30-32

Send/Receive at the same time Page 33-35Playing Files Pages 36-37Viewing Photos Pages 38-40Deleting Files Pages 41-43File Types Page 44Stream from Windows 7 User Page 45Scrolling Page 46Status Icons Page 47Settings Page 48Different Views Pages 49-50Font Sizes Page 51-52Colors Page 53Hub/Snap/Portrait Spacing Pages 54-56Upcoming Features Pages 58-68


Launching Quick Cast : User clicks QuickCast tile in Metro to launch app V2.0


Launching Quick Cast Alternate : User clicks QuickCast in Windows 8 apps screen V2.0


Metro Loading Screen V2.0


QuickCast metro interface at first launch for user of x220-Leon

1. Find Devices button

2. Send Files button

3. Info graphic

4. User’s device name displayed along with instructions.

V2.0


Extra message for devices with NFC.

1. If user’s system has NFC, a message is displayed in the right hand column.

“Learn More” link goes to section of Help explaining how to use NFC devices.

V2.0


QuickCast automatically searches for devices on launch.

1. Scanning animation appears. Use can also start a new scan by pressing the Find Devices button.

V2.0


Scanning process start to find devices

1. As devices are found, they appear one after the other in the far left column. QuickCast displays devices on the same LAN network first (the strongest connection).

Then it displays WiFi devices.

Sorting in these categories is done alphabetically.

V2.0


List of found devices is complete.

1. Icons indicates the type of connect (LAN, etc)

V2.0


Connecting to a device Part 2: Connect button appears

1. Use clicks Connect button to start connection to that device.

V2.0


Connecting to a device Part 3: Device starts to connect

1. Connection animation appears

V2.0


Connecting to a device Part 4: User of tablet-vivan alerted

1. The user of Tablet-Vivian gets an alert notifying them that another QuickCast user wants to connect to their device. The user accepts the connection.

V2.0

User of Tablet-Vivian


Connecting to a device Part 5: Device is successfully connected.

1. Device icon appears (Tablet in this case) and checkmark icon appear once device is successful connected.

V2.0


Alternate connection type : Connecting to a device with PIN Number

1. If a device has a PIN number for security reason, a text entry filed will appear next to the device. Once the correct pin number is entered, the device is connected.

V2.0


Alternate connection type: Connection Method with NFC V2.0

With NFC compatible devices, tab one device to another to instantly launch QuickCast and connect the two systems..


Selecting files to send Part1

1. User clicks Select files to choose files to send

V2.0


Selecting files to send Part 2: User selects fours files and clicks Send V2.0

User selects sever files.

Sending starts the moment the user clicks “Send”, if QuickCast is connected to a device already.


Selecting files to send Part 3: Starting the send process

1. Chosen files start to send automatically if QuickCast is connected to a device

2. A bar shows progress of files being sent.

V2.0


4 states for files selected V2.0

1. Successfully sent file has dark green icon

2. File in the process of being sent have an animated lighter green icon. See example below:

3. Files waiting to be sent have the status “pending”, and a gray icon.

4. Files that have been cancelled from the send process, have a red X icon

5. Items that have encountered an error have a red triangle alert icon and message describing the issue.


Cancel sending individual file: Step 1

1. User selects file to cancel. Submenu appears.

For files being sent, there are two options: “Cancel Sending” and “Delete Record”.

“”Cancel Sending” stops the send process for the selected file, but the record remains. “Delete Record” will cancel the send process for that file if it hasn’t been sent yet, and remove the record.

Use chooses “Cancel Sending”

V2.0


Cancel sending individual file: Step 2

1. File message indicates that send process has been cancelled.

V2.0


Open Item: Pause Function

1. The ability to “pause” the entire send process has been requested. Not sure of about the technical issues with adding this feature yet.

2. “Clear” is grayed out, since the sending files process is happening. If the user pauses the file send session, the Clear All button will again it available to the user.

V2.0


Progress bar indicates all selected files have been sent

1. Once send process is completed, the progress bar fades out after 5 seconds.

2. Status on each file will indicate that the file has been successfully sent.

V2.0


Receiving Files Alert for other user of tablet-vivan device: Scenario 2 V2.0

1. If the receiving user doesn’t have QuickCast open, a toast message appears in the upper right hand side, which alerts them that someone wants to send them files.

Clicking the alert takes the User back to QuickCast.

User of tablet-vivan


Receiving Files Part 1: User of tablet-vivan accepts and starts to receive files V2.0

1. The receiving user sees a progress bar showing how many files they have received.

2. Status icon and message indicate if file has:Been receivedIn process of being receivedIf receiving file was cancelled

3. Status icon of files being received animates. See below:



Receiving Files Part 2: User of Tablet-Vivian receives all files V2.0

1. Progress bar shows all files have been received.

2. “Clear All” below received files allows user to remove all records of files received. NOTE: This does not remove files from hard drive

User of tablet-vivian


Receiving Files Part 3: Progress fades from screen

1. 5 seconds after all files have been received, the progress bar fades from the screen.


Music files go the Library’s Music folder, Images go the Library’s Pictures folderVideos go to the Library’s Videos folder. All other files go to the Downloads folder


Error Message appears if file could not be sent

1. Icon and status message inform user if there was problem sending the file.

Possible error scenarios:• Connection lost during send process. • Receiving user doesn’t have enough

hard drive space for the files.

V2.0


Error and Cancel icons and messages

1. If there was a error in sending or receiving a file, a red triangle with “!” appears.

2. If the sender or receiver cancels the process, the icon is a red circle with “X”.

V2.0


Deleting individual record of sent file: Part 1

1. User clicks on file, selecting it. Submenu with “Resend” and “Delete Record” “ record appears, and user selects “Delete Record”

V2.0


Deleting individual record of sent file: Part 2

1. Individual record is deleted.Use can click on “Clear All” to delete the entire rest of the records.

V2.0


View of user who has sent files, then receives them from a connected device

1. Bar shows progress of files being received appears.

2. Received files have a different background color from sent files.

NOTE:In this version files can not be sent and received at the same time.

V2.0


1. Progress bar states all files have been received.

V2.0View of user who finished receiving files: All files received


1. Progress bar fades out 5 seconds after all files have been received.

V2.0View of user who finished receiving files: Progress bar fades….


1. User touches or clicks on file to select it.

2. Submenu appears. Options are:

“Play “ plays file in QuickCast

“Open” Opens file in default application

“Delete Record” Removes the file record from QuickCast

“Delete File”Which both deletes the file from the hard drive and removes the record.

From here the user selects “Play”

V2.0Playing Received File: Part 1


1. Media player appears over QuickCast.

User can click outside the player to close it.

V2.0Playing Received File: Part 2


1. Photos received have a different icon.

V2.0View Received Photo: Part 1


1. User selects a photo received from another user.

Options are:

“View“ Views photoin QuickCast

“Open” Opens file in default application

“Delete Record” Removes the file record from QuickCast

“Delete File”Which both deletes the file from the hard drive and removes the record.

From here the user selects “View”

V2.0View Received Photo: Part 2


1. Photo viewed in Quick. User can click arrow to return to main QuickCast interface.

V2.0File Type Icons


1. User selects “Delete” file from the sub-menu

V2.0Delete File part 1


1. When deleting a file, user gets a message asking them if they want to proceed, since it will remove the file from their system.

2. User chooses “Yes”



1. File is removed from their system.



1. QuickCast use Microsoft’s default icon for files types.

2. QuickCast use the systems' default applications to open music, photos and videos in QuickCast.

Example: Music Files are played by Windows Media Player, JPGs are view by Microsoft Picture viewer.

Other file types are open outside of QuickCast by the default application.

Example: Excel opens spreadsheet, etc

V2.0File types


Open Issue: Win 7 user streaming file to Win 8 user

The 2.0 Windows 8 version of QuickCast would not have the streaming media feature available.

In cases were a Windows 7 QuickCast user tries to stream a file to a Windows 8 user, this message will appear.


If more than 5 total files are shown, a scroll bar for that column appears.

1. Scrollbar appears if there are more than 6 devices shown.

2. Scroll appears if more than 4 files are display in send/receive column.

3. “Clear All” button appears outside of the scroll area, so the user can still see it.

V2.0


Icons and color indicate status

1. Status message and icon show device is connected.

2. Status icon and message show file has been sent. Uses color #E4E4E4 for background .

3. Status message and icon indicate if there has been an error in the send or receive process.

4. Status icon and message show file has been received. Uses color #F3EAD6 for background

V2.0

#F3EAD6

#E4E4E4

#E4E4E4

#E4E4E4


Swiping from the right side of QuickShare brings up default settings menu

Here the user can access Settings, Help, About, Permissions and Rate and Review.

V2.0


Portrait View V2.0


Snap View V2.0


Font Sizes V2.0


Fonts sizes based on Microsoft Basic Text Styles. V2.0


Colors


Spacing -hub V2.0


Spacing -Snap V2.0


Spacing - Portrait V2.0


UPCOMING FEATURES V2.1-2.2


PIN Security Part 1

1. User clicks on device.

V2.1


PIN Security Part 2

1. A text field appears where user can enter the requested PIN.

V2.1


PIN Security

1. After correct PIN is entered the device is connected.

Error message would appear in the status row if the wrong ping number was entered.

V2.1


Individual progress bar for each file being sent

1. Bar shows the amount of the file that has been successfully sent and how much is remaining.

2. Other bar shows the progress of all the files being sent.

V2.1


Device Properties Screen: Part 1 V2.1

1. Use clicks on connected device, and selects “Properties”


Device Properties: Part 2 V2.1

User is taken to the device properties screen, here they can give the device a nickname, and add to their favorite devices. That option will me the device will always be displayed.


Sharing files using Windows 8 Sharing feature part 1 V2.1

1. With files selected in QuickCast, the user can swipe from the right side of the screen to bring up the charms bar.



1. From the list of options, the user chooses “SkyDrive”



1. User chooses the folder to and click Upload.



Files start to upload.


Settings options

Users will have the ability to change which folders QuickCast saves folders to.

User can view send/receive log history.

V2.0

Download - QuickShare UI Metro App

Top Related