UI Spec: Photo Slideshow Upload Tool

Transcription

1 UI Spec: Photo Slideshow Upload Tool Version History v0. 05/ Initial Document v.0 05/4 Changes on UI.06 / 07, Added user flow

2 User Flow UI.0 RTE field UI.0 UI. Select file to upload Yes UI.0 Browse Window UI.04/05 UI. Back Uploading... No Cancel Upload UI.4 UI.06 Back Upload Complete clicks on Next Done UI.07 Add Description Back UI.08 clicks on Next Done Sort Photos Back UI.09 clicks on Next Done Done clicks on Done UI0 Back to RTE Edit UI Delete Delete Alert DB UI.0 Compose a Blog Entry UI.0 Slideshow Default Screen UI.0 Browse Window UI.04 Uploading UI.05 Uploading Continues UI.06 Upload Complete UI.07 Add Description UI.08 Sort Photos UI.09 Finish Ui.0 Back to RTE UI. Upload More Photos UI. Uploading More Photos UI. Delete Confirm Dialogue Box UI.4 Cancel Upload Confirm Dialogue Box UI.5 Finish Confirm Dialogue Box

3 UI.0 - Compose a Blog Entry. RTE toolbar. Visual & HTML tab. Add features (Slideshow & Poll) Slideshow and Poll buttons are grouped as 'Add features' in the RTE toolbar. Visual treatment on these buttons will be different from the RTE buttons (combination of icon and text). Hover state Upon hover, 'Add Slideshow to your post' message displays. Click state Clicking on 'Slideshow' goes to UI.0 - Slideshow default Screen Compose a Blog Entry Page Note: Slideshow and Poll buttons' functional behavior is different from the RTE insert items buttons. i.e.) When users click on the Slideshow button, the content field completely transform into an embedded Slideshow UI screein the field. It will not be a overlay dialogue box appeared as the RTE insert item buttons work. See UI.0 UI Spec: Photo Slideshow Upload Tool Author. Hyunju Lee Wed May 4 008

4 UI.0 - Slideshow Default Screen. Header Slideshow - static Back to Post goes to UI.0 - Compose a blog entry. Wizard Steps The current step is highlighted. All the other stops are grey-out, indicating inactive. Wizard steps take users to go step by step.. Upload Photo Users can upload a max of 0 photos. Jpeg and Gif files are accepted. File max size is MB If system detects Windows, display a message saying, 'hold down 'CTRL' key.' If system detects Mac OS, display 'Apple' key in the message. UI Spec: Photo Slideshow Upload Tool Author. Hyunju Lee Wed May 4 008

5 UI.0 - Browse Window. Header Same as UI.0 - Slideshow Default Screen. Wizard Steps Same as UI.0 - Slideshow Default Screen. Browse Window Title the browse window as 'Select file(s) to upload by shine.yahoo.com As soon as users enter 'Select' button, uploading process begins automatically and goes to UI.04 - Uploading If users select more than 0 photos from the browse window, system keeps the first 0 photos from users' selections and goes to UI.04 - Uploading. UI Spec: Photo Slideshow Upload Tool Author. Hyunju Lee Wed May

6 UI.04 - Uploading 4. Header Same as UI.0 - Slideshow Default Screen. Wizard Steps Same as UI.0 - Slideshow Default Screen. Progress Bar Update a number of uploaded photos of the total number of selected photos (e.g. 0 of photos) as uploading process continues 5 'Cancel Upload' goes to UI.4 - Cancel Upload Confirm Dialogue Box The graphic bar can be animated and shows an approximate % of uploading progress 4. Circular progress indicator Indicate per photo's uploading in progress 5. Photo List View The selected photos are displayed in the stack orders. Each photo bar displays a number, a thumbnail placeholder and a file name. UI Spec: Photo Slideshow Upload Tool Author. Hyunju Lee Wed May

7 UI.05 - Uploading Continues 5. Header Same as UI.0 - Slideshow Default Screen. Wizard Steps Same as UI.0 - Slideshow Default Screen. Progress Bar Same as UI.04 - Uploading 4. Circular progress indicator Same as UI.04 - Uploading 5. Photo List View When a photo is uploaded, a thumbnail of the photo is displayed 4 UI Spec: Photo Slideshow Upload Tool Author. Hyunju Lee Wed May

8 UI.06 - Upload Complete 4 5. Header Slideshow - static From this step on, 'Back to Post' goes to UI.0 - Back to RTE. The slideshow that the user has created so far will be stored. The slideshow placeholder bar will be displayed in the RTE field.. Wizard Steps Same as UI.0 - Slideshow Default Screen. Wizard Buttons When upload is complete, the progress bar disappears and the wizard buttons appears in the area. No page refresh is required. The buttons also are displayed at the bottom. 'Back' goes to UI. - Upload More Photos. In the Upload UI screen, display a message saying, 'Want to upload more photos? You can upload 8 more' '8' is dynamic - indicates the number of photos that users can add more 'Next' goes to UI.07 - Add Description 'I'm finished' goes to UI.09 - Finish 4. Upload more message 'Upload 8 more photos' goes to UI. - Upload More Photos '8' is dynamic - display a number of photos that users can upload more. 5. Photo List View As soon as upload is complete and Wizard buttons appears, Delete buttons (x) appears in the right side of each photo bar. Clicking on delete button, it will remove the corresponding photo bar immediately from the list. UI Spec: Photo Slideshow Upload Tool Author. Hyunju Lee Wed May

9 UI.07 - Add Description. Header Same as UI Wizard Steps The previous step visually indicates that it's clickable. The next steps are are grey-out, indicating inactive. '. Upload Photos' goes to UI. - Upload More Photos. 5. Wizard Buttons 'Back' goes to UI.06 - Upload Complete Data that users have entered in previous steps is stored and repopulated when they hit 'Back.' 'Next' goes to UI.08 - Sort Photos 'I'm finished' goes to UI.09 - Finish 4. Message Static 5. Photo List View Display a file name in each title form field. remove extension (.jpg or.gif). All the form fields are exposed. Hyper link is not available Entering meta data is optional. Users can go to the next step without filling any fields. UI Spec: Photo Slideshow Upload Tool Author. Hyunju Lee Wed May

10 UI.08 - Sort Photos. Header Same as UI.06 - Upload Complete. Wizard Steps The previous step visually indicates that it's clickable. The next steps are are grey-out, indicating inactive. 4 '. Upload photo' goes to UI. - Upload More Photos '. Add Description' goes to UI.07 - Add Descriptions. Wizard Buttons 'Back' goes to UI.07 - Add Description Data that users have entered in previous steps is stored and repopulated when they hit 'Back.' 5 'Next' goes to UI.08 - Sort Photos 'I'm finished' goes to UI.09 - Finish 4. Message Static 5. Photo List View Up and down arrows are displayed in the left for each photo stack. Clicking on the arrow will move one step up or down from its current order. Drag and drop functionality TBD: Right now, we cannot display anything in the proxy (the bar that user is dragging to) due to performance issue. UED wants to display at least a number or a photo title in the proxy to provide users some indication. Eng. will check into see the performance issue around this. # photo will be a default photo for the slideshow screen in blog post/index page. TBD: We added single text line in the st photo bar to explain this. per FE request, UED will come up with different visual communication for this matter than adding a text line here. UI Spec: Photo Slideshow Upload Tool Author. Hyunju Lee Wed May

11 UI.09 - Finish 4. Header Same as UI.06 - Upload Complete. Wizard Steps As this is the last step, all other steps visually indicate that it's clickable. '. Upload photo' goes to UI. '. Add Description' goes to UI.07 '. Sort Photos' goes to UI.08. Message & Display option Two display options in radio buttons:. above the blog content. below the blog content Radio button default is 'above the blog content' 4. Wizard Buttons Back goes to UI.08 - Sort Photos Add slideshow goes to UI.0 - Back to RTE field UI Spec: Photo Slideshow Upload Tool Author. Hyunju Lee Wed May

12 UI.0 - Back to RTE Back to RTE. RTE toolbar. Visual & HTML tab 4. Add features (Slideshow & Poll) Slideshow button is inactive. Users can add one slideshow and one poll per post. 4. Slideshow placeholder bar Icon and messages are static 'Edit' goes to UI.07 - Add Description 'Delete' goes to UI. - Delete Confirm Dialogue Box 5. Blog content 5 UI Spec: Photo Slideshow Upload Tool Author. Hyunju Lee Wed May 4 008

13 UI. - Upload More Photos Upload more photos. Header Same as UI.06. Wizard Steps The step that the user is currently in is highlighted. All other steps are clickable at this stage. Upload Photo Select Photos to Upload brings Browse window. If users select more than a max number of photos from the browse window, system automatically keeps the first 0 photos from the selection and moves onto uploading screen. UI Spec: Photo Slideshow Upload Tool Author. Hyunju Lee Wed May 4 008

14 UI. - Uploading More Photos Uploading more photos. Header Same as UI Wizard Steps The step that the user is currently in is highlighted. All other steps are clickable at this stage. Progress Bar Same as UI Circular progress indicator Same as UI Newly selected photos The photos that users select to upload more are displayed at the top of the list. Orders are changed Uploaded photos The photos that are already uploaded will stay below the newly selected photos that are uploading UI Spec: Photo Slideshow Upload Tool Author. Hyunju Lee Wed May 4 008

15 UI. - Delete Confirm Dialogue Box. Delete confirm dialogue box Clicking on Yes, a dialogue box will be disappeared and the slideshow placeholder bar will be removed. Clicking on No, a dialogue box will be disappeared and keep the slideshow in the post. UI Spec: Photo Slideshow Upload Tool Author. Hyunju Lee Wed May

16 UI.4 - Cancel Upload Confirm Dialogue Box. Cancel upload confirm dialogue box Clicking on Yes, it will cancel uploading and delete the photos that are already uploaded and go back to step. Upload photos Clicking on No, it will keep uploading and remain in the page. UI Spec: Photo Slideshow Upload Tool Author. Hyunju Lee Wed May

17 UI.5 - Finish Confirm Dialogue Box. Finish confirm dialogue box In any stage after upload is complete, if users leaves the slideshow space without confirming 'I'm finished' and moves to any of Compose a blog entry steps ('Submit my post to,' 'Tags,' 'More Options,' CoreID links, 'Preview,' 'Save As Draft,' or 'Post This Entry'), display Finish Confirm Dialogue Box. Clicking on 'Yes,' it goes to UI.0 - Back to RTE with displaying the slideshow placeholder bar. Clicking on 'No,' it goes to UI.0 - Compose a Blog Entry UI Spec: Photo Slideshow Upload Tool Author. Hyunju Lee Wed May