IA for Rich Interaction: Tools and Techniques from the Trenches

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

2 comments

Comments 1 - 2 of 2 previous next Post a comment

Post a comment
Embed Video
Edit your comment Cancel

26 Favorites & 1 Group

IA for Rich Interaction: Tools and Techniques from the Trenches - Presentation Transcript

  1. Actor Conditions System Behavior User Type Persistent cookie found Registered for limited Registered for member Authenticated ? RECOGNITION CONTENT ACCOUNT ACCESS Descriptive name for If the user has entered their on computer ? access (through newsletter access ? user and related username and password during This determines if the system or saved system This determines if the system Does the site assume What kinds of content What account details the session and has not been recognizes the user when they configuration )? allows access to member system behavior prospect , return are presented on can the user access idle for more than ten minutes, return to the site. This determines if the system features and information the user is authenticated. allows users to view a limited visitor, registered arrival? after login? profile and functionality . visitor or registered member ? YES NO YES NO YES NO YES NO General interest and Assumes prospect None X X X X Anonymous prospect-focused Recognizes return visitor Above; promotions may be None X X X X Return prospect targeted On user login, access to General interest and Anonymous Assumes prospect X X X X profile; saved data prospect-focused (registered prospect ) Recognizes registered Above, promotions may be On user login, access to X X X X Registered prospect visitor; auto login targeted based on profile profile; saved data DIRECTV Subscriber Above, promotions may be Access to limited user Authenticated (Has DIRECTV) n/a n/a X X X Recognizes registered targeted based on profile profile / saved configuration (registered prospect ) prospect from session login May or may not be a X X X X General interest and On user login, access to full Anonymous Assumes prospect prospect-focused profile + account info registered member member of Recognizes registered On user login, access to full DIRECTV.COM X X X X Targeted member-focused; ; Registered member member; auto login profile + account info general interest n/a n/a X X X Recognizes registered Targeted member-focused; ; Access to full profile + Authenticated member from sessi n login o general interest account info registered member is access site from a targetted ing Targeted; member- Assumes member Generic member X X X X None email send to subscriber; no focused; general interest member cookie found YES NO YES NO NO YES NO RECOGNITION CONTENT ACCOUNT ACCESS General interest and Assumes prospect None Anonymous prospect X X X X prospect-focused Above; promotions may be Recognizes return visitor None X X X X Return prospect targeted General interest and On user login, access to Anonymous Assumes prospect X X X X prospect-focused profile; saved data registered prospect Non-subscriber Recognizes registered Above, promotions may be Access to limited user Authenticated n/a n/a X X X prospect from sessi n login o targeted based on profile profile / saved configuration registered prospect (prospect ) Recognizes registered Above, promotions may be Access to limited user X X X X Registered prospect visitor; auto login targeted based on profile profile / saved configuration IA for Rich Interaction: Tools and Techniques from the Trenches Anthony Hempell | Manager, Usability & Interaction Adrian Chong | Interaction Architect Agnes Misiurny | Interaction Architect Confidential and Proprietary © 2007 Blast Radius Inc.
  2. Introductions  Anthony Hempell, Manager of Usability and Interaction Architecture, Blast Radius  Agnes Misiurny, Interaction Architect, Blast Radius  Adrian Chong, Interaction Architect, Blast Radius Confidential and Proprietary © 2007 Blast Radius Inc.
  3. What we’re going to talk about Agnes:  methods for making interactive documents using Visio 2007. Anthony:  documenting user states and complex interactions in wireframes. Adrian:  hyperlinking user flows;  using drawing tools to demonstrate interactive content;  using prototyping. Confidential and Proprietary © 2007 Blast Radius Inc.
  4. Interactive documents using Visio 2007 Agnes Misiurny Confidential and Proprietary © 2007 Blast Radius Inc.
  5. User states and complex interactions Anthony Hempell Confidential and Proprietary © 2007 Blast Radius Inc.
  6. DIRECTV  Largest satellite TV service in the US  15+ million subscribers  DIRECTV.com: full redesign; 18 months  Branding, IA, usability, functional redesign Confidential and Proprietary © 2007 Blast Radius Inc.
  7. Documenting user types: issues  Communicate different user states (anonymous, non- member, member)  Show the material differences between states for front-end and back-end teams  One user can transition between multiple types over months, weeks or even during a session.  Complex business rules Confidential and Proprietary © 2007 Blast Radius Inc.
  8. Non-member Member Return prospect Anonymous Registered Anonymous Member Registered Member Authenticated Anonymous Registered Registered prospect Member Generic Authenticated Member Registered Registered prospect prospect Confidential and Proprietary © 2007 Blast Radius Inc.
  9. User type definition Actors “Prospect” “Registered Prospect”Member” “Return Prospect”“Registered “Return “Registered “Registered “Prospect” Prospect” Prospect” Member” User has registered for a User has previously User has registered for a User has not registered full DIRECTV.COM User has previously visited has for a User has registered registered for a full User visited DIRECTV.COM “light” (prospect) account account User has not registered“light” (prospect ) account DIRECTV.COM DIRECTV.COM account User is not User is not recognized by Anonymous Anonymous Anonymous recognized by Anonymous (registered (registered system (no (return prospect) system (no cookie) prospect) member) cookie) not user is User is recognized by directed to Usersystem (no System Pre-conditions user is not is Generic member Generic member Generic member Generic member directed cookie). recognized by to site by an site by an system (no cookie). email to email to DIRECTVuser is user is Registered recognized by Generic member Generic member system member DIRECTV subscribers recognized by (cookie). system subscribers (cookie). User is User is recognizedby recognized by Registered Registered Return prospect prospect member system (cookie) system (cookie) User has authenticated User has Authenticated Authenticated authenticated registered registered during session during session prospect member Confidential and Proprietary © 2007 Blast Radius Inc.
  10. Mapping user type & system actions Persistent cookie found Registered for limited RECOGNITION for member Registered CONTENT Authenticated ? ACCESS ACCOUNT Actor Conditions System Behavior entered their User Type If the user has on computer ? access (through newsletter access ? username and password during This determines if the system or saved system Does the site assume if the system This determines What kinds of content What account details CONTENT session and has not been Descriptive name for the recognizes the user when they access (through limitedconfiguration ? Persistent cookie found Registered for Registered for member Authenticated ? )? allows access to member RECOGNITION ACCOUNT ACCESS prospect ,password their and information presentedidle for more than ten minutes, access username and return are on can the user user and related If the user has entered on computer ? access newsletter return to the when they This determines ifsite. or saved system determines if the if the system This This determines system features during the system Does the site assume What kinds of content What account details the session and has not been features and limited visitor,more than ten minutes, idle for registered prospect , return arrival presented on user canauthenticated. are ? is the user access loginsystem behavior after ? the recognizes the user configuration )? allows access to member This determines allows users to view ainformation return to the site. if the system the user is authenticated. allows users to view a limited visitor, registered arrival? after login? profile and functionality. visitor or registered profile and functionality . visitor or registered member ? member ? YES NO YES NO YES NO YES NO YES NO YES NO X YES NO YES NO General interest and Assumes prospect None X X X Anonymous prospect-focused Recognizes return visitor Above; promotions may be None X X X X Return prospect General interest and targeted Assumes prospect X None (registered prospect) X X X prospect-focused and On user login, access to General interest Anonymous Assumes prospect X X X X profile; saved data prospect-focused Recognizes registered Above, promotions may be On user login, access to Recognizes return visitor X X X X Registered prospect Above; promotions may be None visitor; auto login targeted based on profile profile; saved data X X X X DIRECTV Subscriber Recognizes registered targeted Above, promotions may be Access to limited user Authenticated (Has DIRECTV) n/a n/a X X X targeted based on profile profile / saved configuration (registered prospect ) prospect from session login On user On access to full login, user login, access to General interest and May or may not be a X X X X General interest and Anonymous Assumes prospect Assumes prospect X X X prospect-focused X prospect-focused profile + account info profile; savedregistered member data member of Recognizes registered On user login, access to full DIRECTV.COM X X X X Targeted member-focused; ; Registered member member; auto login profile + account info general interest Recognizes registered Above, promotions may be On user login, access to Recognizes registered Targeted member-focused; ; Access to full profile +Authenticated n/a n/a X X X X X X X visitor ; auto login member from session login general interest account info registered member targeted based on profile profile; saved data is accessing site from a targetted Targeted; member- Assumes member Generic member X X X X None email send to subscriber; no focused; general interest Above, promotions may be Access to limited user n/a n/a X X X Recognizes registered member cookie found targeted based on profile profile / saved configuration prospect from session login X X X On user X General interest and login, access to full Assumes prospect prospect-focused profile + account info Recognizes registered On user Xlogin, access to full X X NO X Targeted; member-focused; YES NO YES NO member; auto NO YES RECOGNITION CONTENT ACCOUNT ACCESS login profile + account info general interest and General interest Assumes prospect None Anonymous prospect X X X X prospect-focused n/a n/a X X X Recognizes registered Targeted; member-focused; Access to full profile + Above; promotions may be Recognizes return visitor None X X X X member from session login general interest account info prospect Return targeted General interest and On user login, access to Anonymous Assumes prospect X X X X prospect-focused profile; saved data registered prospect X Targeted;targeted based on profile member- Non-subscriber Recognizes registered Above, promotions may be Access to limited user Authenticated Assumes member n/a n/a X X X X X X None prospect from session login profile / saved configuration registered prospect (prospect ) focused; general interestbe Recognizes registered Above, promotions may Access to limited user X X X X Registered prospect visitor; auto login targeted based on profile profile / saved configuration Confidential and Proprietary © 2007 Blast Radius Inc.
  11. Mapping types to state transitions 1 Enter DIRECTV.COM Anonymous Registered member If user is coming from registered member a timeout situation, this page will contain text explaining why the user must login again. Click on link to secure member-only page 1 Non-Secure Page Non-Secure Page Login Page (Member) Example of user status Enter DIRECTV.COM (prospect / anon (may be enhanced Example of system “degrading” in the timeout in the foreground, background – page will not state) for members) when user is on a secure refresh. User will only be page. User must login prompted to re-login if they 2 3 again to re-access the click on a secure link . system. Click on link to non- secure Times out Times out member-only Success page ful Login OR X+Y minutes Login from of non- Status Module activity Non-Secure Page Success (may be enhanced Click on ful Login for members) link to Click on link to secure non-secure member- Y minutes of page only page non-activity Click on link to secure member- X minutes of Warns user only page non-activity Secure Member -only that they Success Page ful Login will time out Authenticated Registered member Confidential and Proprietary © 2007 Blast Radius Inc.
  12. Adding user types to site maps / flows Anonymous Returning prospect Authenticated registered prospect Registered member Registered prospect Authenticated registered member 6.0 Entertainment Central 6.0.1 Program 6.0.2 6.2 Entertainment Guide Program Guide Direct (Default (prospect) (member) timeframe) 6.2.0.x 6.2.0.x 6.2.0.x Entertainment Entertainment Entertainment Article Article 6.1.2 My 6.1.2 My Article Favorite Shows Favorite Shows Confidential and Proprietary © 2007 Blast Radius Inc.
  13. Adding user types to wireframes Registered member Anonymous Authenticated registered member Returning prospect Anonymous Registered member Registered prospect Authenticated registered Prospect Returning prospect Authenticated registered member Anonymous Registered prospect Registered member Returning prospect Authenticated registered member [Series Title / Movie Title] Close window x Registered prospect Authenticated registered Prospect Authenticated registered Prospect Close window x Details Program Video Preview [Series Title / Movie Title] Send Email Reminder [Series Title / Movie Title] Close window x Video [video – /high resolution size [Series Title Movie Title] Close window x Preview tab appears if ] Program Details Video PreviewVideo Preview tab appears if Email Reminder Send there Program Details is a video preview assetPreview Program Details Video Preview Send Email Reminder Video Send Email Reminder there is a video preview asset associated with this title . associated with this title . If possible, the browser should [video – high resolution size] [video – high resolution size] [video – high resolution size] detect connection speed and display high resolution for broadband users and low If possible, the browser should resolutionconnection speed and detect for dialup users (this display high resolution for functionality isusers and low currently used w / [video – low resolution size] broadband the feedroom). dialup users (this resolution for functionality is currently used w / [video – low resolution size] [video – low resolution size] the feedroom). If possible, the browser should detect connection speed and display high resolution for broadband users and low [video – low resolution size] resolution for dialup users (this functionality is currently used w / the feedroom). If possible, the browser should User can switch between high and low resolution detect Mute connection speed and Sound controls: Mute Hi Lo Hi Lo > < versions if available . If user clicks ‘high’ or ‘low’ , > < Mute Hi Lo mute, volume up/ > < display high resolution for that preference should be saved in their profile. SOUND RESOLUTION SOUND RESOLUTION down SOUND RESOLUTION broadband users and low Lorum ipsum dolor sit amut etc . Play button switches to [Short Description Text] When a user returns to a video player page , pause when playing [Short Description Text] dialup. usersipsum dolor sit amutetc . lorum ipsum . resolution lorumLorum Lorum (this sit amut etc . for ipsum ipsum dolor the system should set resolution in this priority: - last user selected preference, if available; Show Title Show Title lorum ipsum . Lorum Lorumcurrently used w /View Details functionality is ipsum dolor sit amutetc . lorum ipsum . [Short Description Text] Lorum ipsum dolor sit amut etc . ipsum dolor sit amut - determined by connection speed, if detected; lorum ipsum . Lorum ipsum dolor sit amut etc . lorum ipsum. - default to high resolution if the above are not Lorum ipsum dolor sitTitle 00:00 AM Details Show amut the feedroom). View [channel] [##] Future airings of[Series Title / Movie Title on your channels ] : available. Day mm/dd Lorum ipsum dolor sit amut View Details Day mm/dd 00:00 AM [channel] [##] Future airings of[Series Title / Movie Title] on your channels : Takes user to the video loungeIf this . Day mm/dd 00:00 AM [channel] [##] video preview is associated with a set (e.g. See more previews ! Visit the Video Lounge : Takes user to the video See more previews ! Visit the Video Lounge : HBO, PPV), then the lounge view will be Day mm/dd User AM [channel] [##] 00:00 can switch between high and low resolution lounge. If this video preview is open to that set, with the next video in this Takes user to the video loungeIf . Video Lounge>> Sound controls: Mute Hi Lo associated with a set (e.g. > < versions if available . If user clicks ‘high’ or ‘low’ , Video Lounge>> sequence ready to play. HBO, PPV), then the lounge video preview is associated with a set (e.g. mute, volume up/ that preference should bethe Video Lounge: See more previews ! Visit saved in their profile. view will be open to that set, HBO, PPV), then the lounge view will be SOUND RESOLUTION with the next video in down open Action button orallow program to their My to that set, with theuser to video in (s) next send an sequence ready to play. Add to Favorite Shows email reminder, add Video Lounge>> sequence ready to play. Play button switches to Favorite Shows. When a user returns to a video player page , pause when playing the system should set resolution in this priority: Action button of action buttonsuser an Reverse state allow user to send: (s) - last user selected preference, ifFavorite Shows [emailAddress ] at [ date] [time]. Remove from available; Show Title Email reminder to be sent to Add to Favorite Shows email can delete email reminder; removeto their My reminder, or add program [Short Description Text] Lorum ipsum dolor sit amut etc . - determined by connection speed, if detected; program from My Favorite Shows . Favorite Shows. lorum ipsum . Lorum ipsum dolor sit amut etc . lorum ipsum. - default to high resolution if the above are not Links to 3.4.8 PPV Ordering available. Lorum ipsum dolor sit amut View Details Order Now ReversePay Per of action buttonsuser For state View movies or events, an : Add to Favorite Shows Email reminder to be sent to can delete now” button to take the user to the “order Remove from Favorite Shows email reminder; remove [emailAddress ] at [date] [time]. ordering process for this item. program from My Favorite Shows . See more previews ! Visit the Video Lounge : For members who are viewing content that Takes user to the video Add this channel to is not in their channel lineupThis link . Links takes the PPVto the PDT to 3.4.8 user Ordering my lineup lounge If this video preview is . . Video Lounge>> associated withFavorite(e.g. Add to a set Shows Order Now For Pay Per View movies or events, an “order now” button to take the user to the HBO, PPV), then the lounge ordering process for this item. view will be open to that set, with the next video in For members who are viewing content that Add this channel to sequence ready to play. is not in their channel lineupThis link . my lineup takes the user to the PDT . Confidential and Proprietary © 2007 Blast Radius Inc.
  14. Documenting user types: solutions  Create coded system representing user types for use on all documentation  Spend the time necessary to come up with the correct number of user types  How users think of themselves vs. how the system identifies users  Careful of the names you choose for your user types (controlled vocabulary) Confidential and Proprietary © 2007 Blast Radius Inc.
  15. DIRECTV: State transitions / storyboard Challenges:  Diagramming transitions between different interface elements based on user actions  Use of AJAX/Flash as presentation layer  Complex workflows  A lot of reviews were done over the phone Confidential and Proprietary © 2007 Blast Radius Inc.
  16. Solution?  Cram as much stuff onto one page as humanly possible! 1 2 1b Send Email Reminder Update default Email Send Email Reminder w/ updated email . [Series Title / Movie Title] [Series Title / Movie Title] [Series Title / Movie Title] Close window x Close window x Close window x Program Details Program Details Program Details Video Preview Video Preview Video Preview Send Email Reminder Send Email Reminder Send Email Reminder Send me a reminder by email of this future airing Send me a reminder by email of this future airing of [Series Title / Movie Title ] [Episode Title]: Edit Default Email address : of [Series Title / Movie Title ] [Episode Title]: Day mm/dd 00:00 AM [channel] [##] Day mm/dd 00:00 AM [channel] [##] [emailAddress] Current email address : New email address : Send the reminder : Send the reminder : Confirm new email address : Immediately Immediately Note that changing this address will update your default email for your before program airs before program airs 2 hours 2 hours DIRECTV.COM profile. This email reminder will be sent to [emailAddress]]. Your email address was updated successfully . [email address Cancel Update Change my email address . This email reminder will be sent to [emailAddress]]. [email address Change my email address . Cancel Remind Me Cancel Remind Me Cancels action, closes window. 2 3 4 Immediate reminder Future reminder Confirm Cancel Reminder Reminder confirmation Reminder confirmation / Cancel Email Reminder [Series Title / Movie Title] [Series Title / Movie Title] [Series Title / Movie Title] Close window x Close window x Close window x Program Details Program Details Program Details Video Preview Video Preview Video Preview Send Email Reminder Cancel Email Reminder Cancel Email Reminder note change ! close x Are you sure you want to cancel the reminder to be sent A reminder to watch [Series Title / Movie Title] You have requested a reminder to be sent to [email address ] [email address to [email address]] at [time]? [email address [Episode Title] was sent to [emailAddress]. [email address ] at [time]. No, don’t cancel . Yes, cancel it. x Close window Cancel Email Reminder Close window 5 Confirm Cancel Reminder [Series Title / Movie Title] Close window x 1 hour If a pending email reminder exists, this page (and tab name) will be the state for the Email 2 hours Reminder tab. Once the email reminder is sent, the tab state reverts to #1. Program Details Video Preview Day mm/dd 00:00 AM [channel] [##] Cancel Email Reminder 4 hours Day mm/dd 00:00 AM [channel] [##] close x 8 hours Day mm/dd 00:00 AM [channel] [##] 24 hours Day mm/dd 00:00 AM [channel] [##] 48 hours Your email reminder was cancelled . Day mm/dd 00:00 AM [channel] [##] User can choose to have the reminder sent immediately or delayed by the time period If there are multiple next episode or program air dates , Close window specified. Note that if there are less than 48 hrs between the current time and air time , they will be populated in a drop-down box (note only that option will not be available; also applies to other options. If there is less than 2 x channels that member subscribes to will appear here) hours before the program air time the option to send a future reminder will not be given. , Confidential and Proprietary © 2007 Blast Radius Inc.
  17. Storyboard transitions: Add element This page describes the states and transitions of the rating , editing and marking as bogus functions of the 1.1.1 Court Description layer. Example uses a basketball court entry ; training facility entry will use appropriate fields (see 1.2 Enter Court Data ). 1.1.1 Court Descriptions 1.0.1 Log In x Jordan /Nike forgot login / LOG IN 3 Rly Cool Basketball Court password flow in new Already a member of Nike.com or Jordan? 1234 Washington St. window Rated 5 times Anytown, ST 99999 USA Rate it Email Address / Login ID: Facilities: Outdoor, wood Edit info backboards, chain mesh, Password: asphalt. Best times: Sat afternoon; Submit Sunday morning; Wednesday Not a member? Forgot your login ID ? evening. 3 Register Forgot your Password? Report as Bogus 1.1.1.1 Add Rating 1.1.1.2 Edit Info 1.1.1.3 Report as Bogus Jordan /Nike registration x x x flow in new window/layer Rly Cool Basketball Court Basketball court Training facility Rly Cool Basketball Court 1234 Washington St. 1234 Washington St. Court / Park Name: Rly Cool Basketball Court Report as Anytown, ST 99999 USA Anytown, ST 99999 USA Address: 1234 Washington St . bogus? Facilities : Outdoor, wood Facilities : Outdoor, wood backboards, City: Anytown Please only use this backboards, chain mesh, chain mesh, asphalt. State: ST feature to report a listing Examples of drop -down selections asphalt. that does not exist or is Zip/Postal Code: 99999 for ‘favorite times to play’: offensive . Best times: 2pm-4pm Sat; Country: United States Your rating: 12pm-2pm Sun; 6pm-8pm We will review this listing Weekday Time and may delete it. Your favorite times to play : Wed. Facilities: Choose… Choose... Reason for reporting: Weekday Indoor Outdoor 3 Time Location: Monday Morning Tuesday Afternoon Choose… Choose... Concrete Wood Asphalt Surface: Wednesday Evening Choose... Choose... Glass Wood Backboards: Thursday Late Friday No nets String Chain Choose... Choose... Nets: Saturday Sunday Submit Cancel Submit Cancel Submit “Rate it” changes to “Edit Your Rating” if user has entered a rating . 3 Rly Cool Basketball Court 3 Rly Cool Basketball Court 3 Rly Cool Basketball Court 1234 Washington St. 1234 Washington St. 1234 Washington St. Rated 5 times Rated 5 times This listing Anytown, ST 99999 USA Anytown, ST 99999 USA Anytown, ST 99999 USA has been Edit Your Rating Rate it Facilities: Outdoor, wood Facilities: Outdoor, wood Facilities: Outdoor, wood reported as Edit info Edit info backboards, chain mesh, backboards, chain mesh, backboards, chain mesh, bogus and is Thank you asphalt. asphalt. asphalt. Information being for your Best times: Sat afternoon; Best times: Sat afternoon; Best times: 2pm-4pm Sat; updated reviewed. rating. Sunday morning; Wednesday Sunday morning; Wednesday 12pm-2pm Sun; 6pm-8pm successfully. evening. evening. Wed. 3 3 3 Report as Bogus Report as Bogus Confidential and Proprietary © 2007 Blast Radius Inc.
  18. Storyboard transitions: “filmstrip” State A: Main promotion not playing . Main area (H) shows still image with title, tagline and links (if appropriate). Filmstrip along the bottom shows other promos available in sets of five . Dots and dashes represent currently viewed promo links vs total number of promos available . . State C: Main promotion playing . Filmstrip recedes on the bottom, video is playing in main If user clicks on play button, go to State C. State A: Main promotion not playing . Main area (H) shows still image with title, tagline and Promo / trailer “strip” : User will have five window. User can pause video(goes back to State A, with video paused in main window . Item title links (if appropriate). Filmstrip along the bottom shows other promos available in sets of five . promotional spots available at any one time , Moving mouse down to the bottom of the frame will cause filmstrip to come back up (while Dots and dashes represent currently viewed promo links vs total number of promos available . . but can cycle through the entire number of video is still playing go to State D. If promotion finishes playing return to state A with finished ); , If user clicks on play button, go to State C. promotion still image in main window . promos / trailers available . Item title There may be a greater or fewer number of Short PROMOTION / Short PROMOTION / promotional spots available to the user description / description / depending on the page or user profile MODULE TITLE tagline MODULE TITLE (number of spots shown below is for illustrative tagline purposes only ). ‘More Info’ Tagline lorum ipsum dolor. link to detail page More Info Order Now ‘More Info’ Tagline lorum ipsum dolor. Volume H M C control link to detail D [still image] [video playing] B appears page on click More Info Order Now Play / Pause A E Volume button H control K L M N O [still image] appears F L ….. ….. ….. ….. ….. on click See See next K previous G set of Playset Pause / of Promotion Current item in Current set of 5 promos Promotion promos promos thumbnails main promo area in filmstrip thumbnails button H J I State D: Main promotion playing , filmstrip active. User can roll over other thumbnails and K L M N O State B: roll over promotion thumbnail . User rolls over thumbnails in filmstrip on rollover ; go back and forward in the filmstrip If user clicks pause, return to State A. If user clicks on a . each enlarges and the promotion title appears On click, the thumbnail moves to the large state . filmstrip item, go to State C with new item playing If promotion finishes playing return to state . , and begins playing(State C). A with finished promotion still image in main window . NOTE THAT THE ABOVE DIAGRAM ILLUSTRATES THE ‘CIRCULAR’ NATURE OF THE MEDIA ELEMENT ….. ….. ….. ….. ….. STREAM ONLY AND DOES NOT INDICATE THE PROMOTION / MINIMUM OR MAXIMUM NUMBER OF ELEMENTS TO BE IN THE STREAM Blast Radius recommends that a . MODULE TITLE minimum of 10 elements and a maximum of 30 be used at any one time. See Tagline lorum ipsum dolor. See next DIRECTV will be able to control the following using previous business rules and scenarios in ATG : set of More Info Order Now set of Promotion Current item in Current set of 5 promos Promotion 1. What media element will appear in “C” (default first-to- promos H M play) promos thumbnails main[still image] promo area in filmstrip thumbnailsplaying] [video 2. What media elements will appear in spots A, B, D, E 3. An algorithm and parameters that will created a relative rank of media elements: e.g. C, D, B, E, A, F, L G, K, H, J, I (for an example with 12 elements total as illustrated above). M N K L N O M K L O Promo Title Promo Title ….. ….. ….. ….. ….. ….. ….. ….. ….. ….. .... ….. … Odd numbers of promos will be Clicking on another set of promos represented with partial sets. changes thumbnails to that set. Confidential and Proprietary © 2007 Blast Radius Inc.
  19. Storyboard transitions: Selection bar Entry state : no previous selections . Active state : user has added items but does not have a valid Active state : user has added items and had a valid system . system yet .. If user is entering the wizard with no offers selected , or has removed all Solution bar elements appear and totals update on page load and /or items, all solution bar elements will be in an unselected state . Solution bar elements appear and totals update on page load and /or pressing the ‘update’ button . Button to go to checkout is enabled . pressing the ‘update’ button . Button to go to checkout is still disabed. Your DIRECTV System Your DIRECTV System Your DIRECTV System You have not saved a system yet. Solution buttons will become You have not saved a system yet. You have a saved system. Load If user does not have a saved If user has a saved system, this message active as soon as one item is in Save Print E Mail Save Print E Mail Save Print E Mail system, this message appears . appears . Note that in this state the user must the solution bar . be a registered prospect or authenticated Startup Costs Startup Costs Startup Costs registered prospect . More info link if required If there are no solution items , Line Item More Info $ xx.xx Line Item More Info $ xx.xx If user is registered prospect , user will be the save, print and email Line Item $ xx.xx Line Item $ xx.xx asked to login in a popup : functions will be disabled. Line Item $ x.xx Area for short explanation text if Line Item $ x.xx No items selected yet. Line Item $ x.xx necessary (e.g. to explain Line Item $ x.xx special pricing, etc.) Load Saved System Total Startup Costs $xxx.xx Total Startup Costs $ 0.00 Enter Username : Total Startup Costs $xxx.xx [explanation text appears here if [username] [explanation text appears here if necessary]. Update Update necessary]. Update Clicking update button reloads Enter Password : No items selected state; update page with both Startup Costs button is disabled . Also occurs Your Monthly Bill Your Monthly Bill and Monthly Bill totals updated . Your Monthly Bill Forgot your username? if user has just saved and has Forgot your password? not made any changes . After save , “update” buttons Line Item More Info $ xx.xx are greyed out until user Cancel Load Recommendation Line Item $ xx.xx makes a change to the Line Item More Info $ xx.xx Line Item $ x.xx solution. Line Item $ xx.xx User can only save one system profile . No items selected yet. Line Item $ x.xx Should they load another system profile , their Line Item $ x.xx existing profile will be lost . Line Item $ x.xx Line Item $ x.xx Total Monthly Bill $xxx.x On a request to load , the system will Total Monthly Bill $ 0.00 Line Item $ x.xx [explanation text appears here if Area that can be used for recognize if there is a currently active system necessary]. Line Item $ xx.xx messaging about free gift and /or profile and pop up layer with the new content Update Update Line Item $ x.xx promotion , if desired . listed below : Line Item $ xx.xx Area that can be used for Order any sports subscription FREE Gift: a pony! More Info Line Item $ x.xx messaging about free gift and /or and get a FREE PONY !!! More Info Line Item $ xx.xx promotion , if desired . Promotion Code: “You currently have an unsaved Enter Promotion Code (optional): Line Item $ x.xx If user has not entered a 0947363 Change recommendation . There is a maximum of only Enter promotion code , text entry field If promotion code has been one saved recommendation per user name . Do [Legal text / disclaimer] taxes not included ; Total Monthly Bill $xxx.xx will appear. entered , it is shown. Clicking on you wish to delete the current recommendation subject to credit approval etc. , [explanation text appears here if [Legal text / disclaimer] taxes not included ; change link will allow user to and load the saved one ?” subject to credit approval etc. , Call 1-xxx-xxx- Yes No necessary]. edit. If solution is not complete (user xxxx to order Online Check Out >> Call 1-xxx-xxx- Update by phone. has yet to complete a valid Answering [Yes] would result in closing the xxxx to order Online Check Out >> programming + hardware popup window and loading the saved profile . by phone. package), the checkout button FREE Gift: a pony! More Info Promotion Code: will be disabled. Answering [No] will result in closing the 0947363 Phone number is dynamic Promotion Code: popup window with no changes . depending on data such as zip 0947363 Change Clear Cancel Update code, referring site , etc. If no The promotion code you If user enters an invalid data is available, default to the [Legal text / disclaimer] taxes not included ; entered is not valid. promotion code , error state Once user has gone to the checkout page , subject to credit approval etc. , general 1-800 number . Please try again. is shown. If user cancels, the online checkout button becomes active . no yes Call 1-xxx-xxx- state returns to “no code 0947363 Continues in this state unless the user makes xxxx to order Online Check Out >> entered” a change that requires them to follow all steps Is promotion code valid ? by phone. Clear Cancel Update again (e.g. user changes offer selection ). Confidential and Proprietary © 2007 Blast Radius Inc.
  20. Storyboard transitions: too much detail User clicks on ‘My Favorite Shows” tab in the top tab row of the program guide . Program Guide My Favorite Shows Entertainment Direct If the user has programs within the specified time period , they will display sorted by day (if multiple days selected). All Categories Next 24 Hours search Search Listings Edit Preferences User can remove programs by clicking on the “remove” button . 6.1.1.1 Program Detail Channel Listings : Time Zone: Zip Code: Starting at: Listings For: g Fri Apr 22 8 :00 PM Pacific 90210 custom channels A o All Categories Locals Movies + Events Sports News Entertainment + Music Family + Kids x Program Guide My Favorite Shows Entertainment Direct Delete email Add to My reminder Favorite Shows If user does not have any programs in their Favorite Search for programs to add to your Favorite Shows List : Shows, they will be prompted to add them using search . Next 24 Hours search All Categories Search Listings Eligible programs will have an ‘add to My My Favorite Shows Program Guide Entertainment Direct Favorite Shows’ button on the program Your Favorite Shows For [timeperiod] Next 7 days Eastern 90210 Search for programs to add to your Favorite Shows List : detail. All Categories Next 24 Hours search Search Listings In the case of programs with multiple [weekday], [month] [dd] episodes and showtimes , a clarification Title Channel Start Time dialog will appear (similar to ‘edit’ dialog ; see Your Favorite Shows Show Title [channel name] xx:00 pm Pacific Remove Edit ### 6.1.2 My Favorite Shows (Member ) for more You do not have any programs in your Favorite Shows list . Show Title details). [channel name] ### xx:00 pm Pacific Remove Edit To add programs use the “search listings” tool above , . Show Title [channel name] xx:00 pm Pacific Remove Edit ### close x [weekday], [month] [dd] What do you want to add to your favorites list ? All EPG search results will allow user to add Title Channel Start Time [Program Title], Episode “[Episode Title]”, eligible programs to their Favorite Shows list . Show Title Remove [channel name] ### xx:00 pm Pacific Edit showing on Channel xxx at[air time]. Program Guide My Favorite Shows Entertainment Direct Show Title [channel name] xx:00 pm Pacific Remove All showings of [Program Title], Episode Edit ### “[Episode Title].” Show Title Remove Edit [channel name] xx:00 pm Pacific ### All Categories Next 24 Hours search Search Listings [searchTerm1] [searchTerm2] [weekday], [month] [dd] All episodes of [Program Title] Found [n] listings matching “[searchTerm1] [searchTerm2 ]”. Listings sorted by relevance . TV Programs matching “ [searchTerm1 ] [searchTerm2] ” Showing 1 to 5 of [x] First-run only Title Channel Start Time Title Channel Start Time First-run and re-runs. Date Show Title [channel name] xx:00 pm Pacific Remove Edit ### [channel name ] Show Title xx:00 pm Pacific Add to My Favorite Shows Mon Jan 31 ### 1. Show Title [channel name] xx:00 pm Pacific ### Remove Edit [channel name ] Show Title xx:00 pm Pacific Add to My Favorite Shows 2. Tue Feb 1 ### Favorite Shows Not Found In the Next 7 Days 3. [channel name ] Add to My Favorite Shows Show Title xx:00 pm Pacific Wed Feb 2 ### Title Episode(s) 4. Add to My Favorite Shows [channel name ] Thu Feb 3 Show Title xx:00 pm Pacific ### Show Title Episode Name Remove Edit 5. Thu Feb 3 [channel name ] Show Title xx:00 pm Pacific Add to My Favorite Shows ### Show Title All Episodes (first run only ) Remove Edit See all results for “TV Shows” If no results are available , user is shown status Program Guide My Favorite Shows Entertainment Direct message, with links to expand search if applicable : User clicks on My All Categories Next 24 Hours search Search Listings [searchTerm1] [searchTerm2] Program Guide My Favorite Shows Entertainment Direct 2 hours Favorite Shows tab TV Programs matching “ searchTerm1] [searchTerm2 ]”. Listings sorted by relevance [ . Showing 1 to 5 of [ x] Search for programs to add to your Favorite Shows : to see Show List Title Channel Start Time Date Next 24 Hours search All Categories Search Listings [channel name ] Show Title xx:00 pm Pacific Add to My Favorite Shows Mon Jan 31 ### 1. [channel name ] Show Title xx:00 pm Pacific 2. Tue Feb 1 ### Your Favorite Showst For[timeperiod] Next 7 days Eastern 90210 3. [channel name ] Add to My Favorite Shows Show Title xx:00 pm Pacific Wed Feb 2 ### None of the programs in your Favorite Shows List are playing within the time period 4. Added to My Favorite Shows. [channel name ] Thu Feb 3 Show Title xx:00 pm Pacific ### specified. 5. Thu Feb 3 [channel name ] Show Title xx:00 pm Pacific ### Add to My Favorite Shows See all results for “TV Shows” Try out your search over: 48 hours | 7 days | 12 days [time periods shown if greater than time period requested ] Confidential and Proprietary © 2007 Blast Radius Inc.
  21. State transitions / storyboards: solutions  Try to keep one flow per page  Include all relevant detail  Purpose is to communicate flow Confidential and Proprietary © 2007 Blast Radius Inc.
  22. Advanced documentation techniques Adrian Chong Confidential and Proprietary © 2007 Blast Radius Inc.
  23. Canadian Tourism Commission Confidential and Proprietary © 2007 Blast Radius Inc.
  24. Confidential and Proprietary © 2007 Blast Radius Inc.
  25. Confidential and Proprietary © 2007 Blast Radius Inc.
  26. Confidential and Proprietary © 2007 Blast Radius Inc.
  27. Lessons Learned  Hyperlinking can be useful for orientation  It would be nice to highlight parts of the flow diagram Confidential and Proprietary © 2007 Blast Radius Inc.
  28. Need for Speed Carbon Autosculpt Confidential and Proprietary © 2007 Blast Radius Inc.
  29. Confidential and Proprietary © 2007 Blast Radius Inc.
  30. Anchor Point Pen Tool Confidential and Proprietary © 2007 Blast Radius Inc.
  31. Hold the Alt key Confidential and Proprietary © 2007 Blast Radius Inc.
  32. Confidential and Proprietary © 2007 Blast Radius Inc.
  33. Confidential and Proprietary © 2007 Blast Radius Inc.
  34. Confidential and Proprietary © 2007 Blast Radius Inc.
  35. Confidential and Proprietary © 2007 Blast Radius Inc.
  36. Lessons Learned  Illustrating aspects of the interaction saves a lot writing  Useful when interaction cannot be described with boxes and arrows  Doesn’t take that long  Clients react very positively and get a better sense of what you’re trying to build Confidential and Proprietary © 2007 Blast Radius Inc.
  37. EA Madden 07  EA’s largest sports franchise Coaches Corner Gamecast Stats Confidential and Proprietary © 2007 Blast Radius Inc.
  38. Confidential and Proprietary © 2007 Blast Radius Inc.
  39. Lessons Learned  A working prototyping requires a client who has a lot of time to devote to the project  Takes time, money, energy  Results in a happy client who will get what they envisioned Confidential and Proprietary © 2007 Blast Radius Inc.
  40. Documentation Landscape Confidential and Proprietary © 2007 Blast Radius Inc.
  41. Contacts Anthony Hempell Mgr of Usability and Interaction anthony.hempell@blastradius.com Adrian Chong Interaction Architect adrian.chong@blastradius.com Agnes Misiurny Interaction Architect agnes.misiurny@blastradius.com Confidential and Proprietary © 2007 Blast Radius Inc.
  42. Discussion / Questions Confidential and Proprietary © 2007 Blast Radius Inc.

achongachong, 3 years ago

custom

4478 views, 26 favs, 1 embeds more stats

Techniques for documenting RIAs with complex user s more

More Info

© All Rights Reserved

Go to text version
  • Total Views 4478
    • 4459 on SlideShare
    • 19 from embeds
  • Comments 2
  • Favorites 26
  • Downloads 0
Most viewed embeds
  • 19 views on http://www.adrianchong.com

more

All embeds
  • 19 views on http://www.adrianchong.com

less

Flagged as inappropriate Flag as inappropriate
Flag as innappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel

Categories

Groups / Events