confidential and proprietary © 2007 blast radius inc. ia for rich interaction: tools and techniques...
Post on 13-Jan-2016
215 Views
Preview:
TRANSCRIPT
Confidential and Proprietary © 2007 Blast Radius Inc.
IA for Rich Interaction: Tools and Techniques from the TrenchesAnthony Hempell | Manager, Usability & Interaction
Adrian Chong | Interaction Architect
Persistent cookie found on computer?
This determines if the system recognizes the user when they
return to the site.
Registered for limited access (through newsletter
or saved system configuration)?
This determines if the system allows users to view a limited
profile and functionality.
DIRECTV Subscriber(Has DIRECTV)
May or may not be a member of
DIRECTV.COM
YES
X
X
n/a
X
n/a
Registered for member access?
This determines if the system allows access to member features and information
Non-subscriber (prospect)
NO
X
X
n/a
X
n/a
X
YES
X
X
X
NO
X
X
X
X
X
X
YES
X
X
X
NO
X
X
X
X
X
X
YES
X
n/a
X
NO
X
X
n/a
YES
X
X
X
NO
X
X
NO
X
X
X
X
X
Authenticated?If the user has entered their
username and password during the session and has not been idle for more than ten minutes,
the user is authenticated.
YES
X
X
NO
X
X
X
X
X
X
X
RECOGNITION
Does the site assume prospect, return
visitor, registered visitor or registered
member?
ACCOUNT ACCESS
What account details can the user access
after login?
CONTENT
What kinds of content are presented on
arrival?
Assumes prospect
Recognizes return visitor
Assumes prospect
Recognizes registered visitor; auto login
Assumes prospect
Recognizes registered member; auto login
None
None
On user login, access to profile; saved data
On user login, access to full profile + account info
On user login, access to full profile + account info
Access to full profile + account info
General interest and prospect-focused
Above; promotions may be targeted
General interest and prospect-focused
Above, promotions may be targeted based on profile
General interest and prospect-focused
Targeted; member-focused; general interest
Targeted; member-focused; general interest
RECOGNITION ACCOUNT ACCESSCONTENT
Recognizes registered member from session login
Assumes prospect
Assumes prospect
Recognizes return visitor
Recognizes registered visitor; auto login
None
None
Access to limited user profile / saved configuration
On user login, access to profile; saved data
General interest and prospect-focused
Above; promotions may be targeted
General interest and prospect-focused
Above, promotions may be targeted based on profile
System BehaviorConditionsActor
Anonymous
Return prospect
Anonymous (registered prospect)
Registered prospect
Anonymous registered member
Registered member
Authenticated registered member
Anonymous prospect
Return prospect
Anonymous registered prospect
Registered prospect
User Type
Descriptive name for user and related system behavior
Recognizes registered prospect from session login
Access to limited user profile / saved configuration
Above, promotions may be targeted based on profile
Authenticated (registered prospect)
On user login, access to profile; saved data
Recognizes registered prospect from session login
Access to limited user profile / saved configuration
Above, promotions may be targeted based on profile
Authenticated registered prospect
YES
X
NO
X
X
X
X
Generic memberAssumes member Targeted; member-focused; general interest None
is accessing site from a targetted email send to subscriber; no
member cookie found
Introductions
Anthony Hempell, Manager of Usability and Interaction Architecture, Blast Radius
Adrian Chong, Interaction Architect, Blast Radius
San Francisco Vancouver New York Amsterdam Toronto
Founded in 1996 Customer Experience Innovation: Consumer-Focused 350 Employees
Blast Radius
What we’re going to talk about
Anthony: documenting user types and complex interactions in
wireframes.
Adrian: hyperlinking user flows; using drawing tools to demonstrate interactive
content; using prototyping.
User types and complex interactionsAnthony Hempell
Client: DIRECTV
Largest satellite TV service in the US 15+ million subscribers
DIRECTV.com: full redesign; 18 months Branding, IA, usability, functional redesign, new
features
Documenting user types: issues
Communicate different user types (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
User Personas
Customers Sports Fans Movie Watchers Variety Seekers Loyal, but risk of moving to
better offers
Prospects DISH Subscribers Cable Subscribers Looking to switch or to
upgrade TV experience
Anonymous
Prospects Members
Return prospect
Registered prospect
AuthenticatedRegistered prospect
Registered Member
Authenticated Registered
Member
Generic Member
Anonymous Registered prospect
Anonymous Registered Member
Return prospect
“Registered Prospect”
“Return Prospect”
Anonymous(registered prospect)
Anonymous(return prospect)
Generic memberRegistered
member
Generic memberGeneric member Generic memberGeneric member
Generic member
“Prospect”“Registered
Member”
Anonymous
Authenticated registered prospect
Registered member
Authenticated registered member
Registered prospect
Anonymous(registered member)
User has not registeredUser has registered for a “light” (prospect) account
User has registered for a full DIRECTV.COM
account
User is not recognized by
system (no cookie)
User is recognized by
system (cookie)
User has authenticated during session
User is directed to site by an email to
DIRECTV subscribers
ActorsS
yste
m P
re-c
on
dit
ion
s
user is not recognized by
system (no cookie).
user is recognized by
system (cookie).
User has previously visited DIRECTV.COM
User type definition
Persistent cookie found on computer?
This determines if the system recognizes the user when they
return to the site.
Registered for limited access (through newsletter
or saved system configuration)?
This determines if the system allows users to view a limited
profile and functionality.
DIRECTV Subscriber(Has DIRECTV)
May or may not be a member of
DIRECTV.COM
YES
X
X
n/a
X
n/a
Registered for member access?
This determines if the system allows access to member features and information
Non-subscriber (prospect)
NO
X
X
n/a
X
n/a
X
YES
X
X
X
NO
X
X
X
X
X
X
YES
X
X
X
NO
X
X
X
X
X
X
YES
X
n/a
X
NO
X
X
n/a
YES
X
X
X
NO
X
X
NO
X
X
X
X
X
Authenticated?If the user has entered their
username and password during the session and has not been idle for more than ten minutes,
the user is authenticated.
YES
X
X
NO
X
X
X
X
X
X
X
RECOGNITION
Does the site assume prospect, return
visitor, registered visitor or registered
member?
ACCOUNT ACCESS
What account details can the user access
after login?
CONTENT
What kinds of content are presented on
arrival?
Assumes prospect
Recognizes return visitor
Assumes prospect
Recognizes registered visitor; auto login
Assumes prospect
Recognizes registered member; auto login
None
None
On user login, access to profile; saved data
On user login, access to full profile + account info
On user login, access to full profile + account info
Access to full profile + account info
General interest and prospect-focused
Above; promotions may be targeted
General interest and prospect-focused
Above, promotions may be targeted based on profile
General interest and prospect-focused
Targeted; member-focused; general interest
Targeted; member-focused; general interest
RECOGNITION ACCOUNT ACCESSCONTENT
Recognizes registered member from session login
Assumes prospect
Assumes prospect
Recognizes return visitor
Recognizes registered visitor; auto login
None
None
Access to limited user profile / saved configuration
On user login, access to profile; saved data
General interest and prospect-focused
Above; promotions may be targeted
General interest and prospect-focused
Above, promotions may be targeted based on profile
System BehaviorConditionsActor
Anonymous
Return prospect
Anonymous (registered prospect)
Registered prospect
Anonymous registered member
Registered member
Authenticated registered member
Anonymous prospect
Return prospect
Anonymous registered prospect
Registered prospect
User Type
Descriptive name for user and related system behavior
Recognizes registered prospect from session login
Access to limited user profile / saved configuration
Above, promotions may be targeted based on profile
Authenticated (registered prospect)
On user login, access to profile; saved data
Recognizes registered prospect from session login
Access to limited user profile / saved configuration
Above, promotions may be targeted based on profile
Authenticated registered prospect
YES
X
NO
X
X
X
X
Generic memberAssumes member Targeted; member-focused; general interest None
is accessing site from a targetted email send to subscriber; no
member cookie found
Mapping user type & system actionsPersistent cookie found
on computer?This determines if the system
recognizes the user when they return to the site.
Registered for limited access (through newsletter
or saved system configuration)?
This determines if the system allows users to view a limited
profile and functionality.
YES
X
X
n/a
X
n/a
Registered for member access?
This determines if the system allows access to member features and information
NO
X
X
n/a
X
n/a
X
YES
X
X
X
NO
X
X
X
X
X
X
YES
X
X
X
NO
X
X
X
X
X
X
Authenticated?If the user has entered their
username and password during the session and has not been idle for more than ten minutes,
the user is authenticated.
YES
X
X
NO
X
X
X
X
X
X
X
RECOGNITION
Does the site assume prospect, return
visitor, registered visitor or registered
member?
ACCOUNT ACCESS
What account details can the user access
after login?
CONTENT
What kinds of content are presented on
arrival?
Assumes prospect
Recognizes return visitor
Assumes prospect
Recognizes registered visitor; auto login
Assumes prospect
Recognizes registered member; auto login
None
None
On user login, access to profile; saved data
On user login, access to full profile + account info
On user login, access to full profile + account info
Access to full profile + account info
General interest and prospect-focused
Above; promotions may be targeted
General interest and prospect-focused
Above, promotions may be targeted based on profile
General interest and prospect-focused
Targeted; member-focused; general interest
Targeted; member-focused; general interest
Recognizes registered member from session login
Recognizes registered prospect from session login
Access to limited user profile / saved configuration
Above, promotions may be targeted based on profile
On user login, access to profile; saved data
Assumes member Targeted; member-focused; general interest None
Mapping user type transitions
Registered member
Authenticated Registered member
Anonymous registered member
Non-Secure Page (prospect / anon
state)
Secure Member-only Page
Non-Secure Page (may be enhanced
for members)
Times out
Warns user that they
will time out
Login Page (Member)
Successful Login
Successful Login
Click on link to secure member-
only page
Click on link to non- secure member-only page
OR
Login from Status Module
Non-Secure Page (may be enhanced
for members)
Enter DIRECTV.COM
Click on link to
secure member-
only page
Times out
Successful Login
Click on link to non-secure page
X minutes of non-activity
Y minutes of non-activity
X+Y minutes of non-activity
Example of user status “degrading” in the background – page will not refresh. User will only be prompted to re-login if they click on a secure link.
Enter DIRECTV.COM
Click on link to secure member-only page
Example of system timeout in the foreground, when user is on a secure page. User must login again to re-access the system. 2 3
1
1
If user is coming from a timeout situation, this page will contain text explaining why the user must login again.
Adding user types to site maps / flows
6.2.0.x Entertainment
Article
6.2.0.x Entertainment
Article
AnonymousReturning prospect
Authenticated registered prospectRegistered prospect
Registered memberAuthenticated registered member
6.0 Entertainment
Central
6.2 Entertainment Direct (Default
timeframe)
6.0.2Program Guide
(member)
6.1.2 My Favorite Shows
6.1.2 My Favorite Shows
6.0.1 Program Guide
(prospect)
6.2.0.x Entertainment
Article
Adding user types to wireframes
Show Title
Close window x
Program Details Video Preview
[Series Title / Movie Title]
Video Preview tab appears if there is a video preview asset associated with this title.
Video Lounge >>
SOUND
Mute > <
RESOLUTION
Hi Lo
[video – high resolution size]
[video – low resolution size]
[Short Description Text] Lorum ipsum dolor sit amut etc. lorum ipsum. Lorum ipsum dolor sit amut etc. lorum ipsum. Lorum ipsum dolor sit amut View Details
User can switch between high and low resolution versions if available. If user clicks ‘high’ or ‘low’, that preference should be saved in their profile.
When a user returns to a video player page, the system should set resolution in this priority:- last user selected preference, if available;- determined by connection speed, if detected;- default to high resolution if the above are not available.
Play button switches to pause when playing
Sound controls: mute, volume up/down
Takes user to the video lounge. If this video preview is associated with a set (e.g. HBO, PPV), then the lounge view will be open to that set, with the next video in sequence ready to play.
If possible, the browser should detect connection speed and display high resolution for broadband users and low resolution for dialup users (this functionality is currently used w/ the feedroom).
See more previews! Visit the Video Lounge:
Anonymous Returning prospectRegistered prospectAuthenticated registered Prospect
Send Email Reminder
Order Now
Add this channel to my lineup
Action button(s) allow user to send an email reminder, or add program to their My Favorite Shows.
For Pay Per View movies or events, an “order now” button to take the user to the ordering process for this item.
For members who are viewing content that is not in their channel lineup. This link takes the user to the PDT.
Registered memberAuthenticated registered member
Links to 3.4.8 PPV Ordering
Reverse state of action buttons: user can delete email reminder; remove program from My Favorite Shows.
Email reminder to be sent to [emailAddress] at [date] [time].
Show Title
Close window x
Program Details Video Preview
[Series Title / Movie Title]
SOUND
Mute > <
RESOLUTION
Hi Lo
[video – high resolution size]
[video – low resolution size]
[Short Description Text] Lorum ipsum dolor sit amut etc. lorum ipsum. Lorum ipsum dolor sit amut etc. lorum ipsum. Lorum ipsum dolor sit amut View Details
Takes user to the video lounge. If this video preview is associated with a set (e.g. HBO, PPV), then the lounge view will be open to that set, with the next video in sequence ready to play.
If possible, the browser should detect connection speed and display high resolution for broadband users and low resolution for dialup users (this functionality is currently used w/ the feedroom).
Video Lounge >>
See more previews! Visit the Video Lounge:
Future airings of [Series Title / Movie Title] on your channels:Day mm/dd 00:00 AM [channel] [##]Day mm/dd 00:00 AM [channel] [##]
Send Email Reminder
Add to Favorite Shows
Add to Favorite Shows
Remove from Favorite Shows
Anonymous Returning prospectRegistered prospectAuthenticated registered Prospect
Registered memberAuthenticated registered member
Show Title
Close window x
Program Details Video Preview
[Series Title / Movie Title]
Video Preview tab appears if there is a video preview asset associated with this title.
Video Lounge >>
SOUND
Mute > <
RESOLUTION
Hi Lo
[video – high resolution size]
[video – low resolution size]
[Short Description Text] Lorum ipsum dolor sit amut etc. lorum ipsum. Lorum ipsum dolor sit amut etc. lorum ipsum. Lorum ipsum dolor sit amut View Details
User can switch between high and low resolution versions if available. If user clicks ‘high’ or ‘low’, that preference should be saved in their profile.
When a user returns to a video player page, the system should set resolution in this priority:- last user selected preference, if available;- determined by connection speed, if detected;- default to high resolution if the above are not available.
Play button switches to pause when playing
Sound controls: mute, volume up/down
Takes user to the video lounge. If this video preview is associated with a set (e.g. HBO, PPV), then the lounge view will be open to that set, with the next video in sequence ready to play.
If possible, the browser should detect connection speed and display high resolution for broadband users and low resolution for dialup users (this functionality is currently used w/ the feedroom).
See more previews! Visit the Video Lounge:
Anonymous Returning prospectRegistered prospectAuthenticated registered Prospect
Send Email Reminder
Order Now
Add this channel to my lineup
Action button(s) allow user to send an email reminder, or add program to their My Favorite Shows.
For Pay Per View movies or events, an “order now” button to take the user to the ordering process for this item.
For members who are viewing content that is not in their channel lineup. This link takes the user to the PDT.
Registered memberAuthenticated registered member
Links to 3.4.8 PPV Ordering
Reverse state of action buttons: user can delete email reminder; remove program from My Favorite Shows.
Email reminder to be sent to [emailAddress] at [date] [time].
Show Title
Close window x
Program Details Video Preview
[Series Title / Movie Title]
SOUND
Mute > <
RESOLUTION
Hi Lo
[video – high resolution size]
[video – low resolution size]
[Short Description Text] Lorum ipsum dolor sit amut etc. lorum ipsum. Lorum ipsum dolor sit amut etc. lorum ipsum. Lorum ipsum dolor sit amut View Details
Takes user to the video lounge. If this video preview is associated with a set (e.g. HBO, PPV), then the lounge view will be open to that set, with the next video in sequence ready to play.
If possible, the browser should detect connection speed and display high resolution for broadband users and low resolution for dialup users (this functionality is currently used w/ the feedroom).
Video Lounge >>
See more previews! Visit the Video Lounge:
Future airings of [Series Title / Movie Title] on your channels:Day mm/dd 00:00 AM [channel] [##]Day mm/dd 00:00 AM [channel] [##]
Send Email Reminder
Add to Favorite Shows
Add to Favorite Shows
Remove from Favorite Shows
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)
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
Solution? Cram as much stuff onto one page as humanly possible!
xclose
Cancels action, closes window.
x
Send Email Reminder
1 hour
4 hours8 hours24 hours48 hours
2 hours
User can choose to have the reminder sent immediately or delayed by the time period specified. Note that if there are less than 48 hrs between the current time and air time, that option will not be available; also applies to other options. If there is less than 2 hours before the program air time, the option to send a future reminder will not be given.
1
Day mm/dd 00:00 AM [channel] [##]Day mm/dd 00:00 AM [channel] [##]Day mm/dd 00:00 AM [channel] [##]Day mm/dd 00:00 AM [channel] [##]
Day mm/dd 00:00 AM [channel] [##]
If there are multiple next episode or program air dates, they will be populated in a drop-down box (note only channels that member subscribes to will appear here)
Close window x
Program Details Video Preview
[Series Title / Movie Title]
Send Email Reminder
Send me a reminder by email of this future airing of [Series Title / Movie Title] [Episode Title]:
Send the reminder:
Immediately before program airs
This email reminder will be sent to [emailAddress]. Change my email address.
Day mm/dd 00:00 AM [channel] [##]
2 hours
Remind MeCancel
[email address]
Close window x
Program Details Video Preview
[Series Title / Movie Title]
Send Email Reminder
Edit Default Email address:
Current email address:New email address:Confirm new email address:
Note that changing this address will update your default email for your DIRECTV.COM profile.
[emailAddress]
UpdateCancel
Close window x
Program Details Video Preview
[Series Title / Movie Title]
Send Email Reminder
A reminder to watch [Series Title / Movie Title] [Episode Title] was sent to [emailAddress].
Close window x
Program Details Video Preview
[Series Title / Movie Title]
Cancel Email Reminder
You have requested a reminder to be sent to [email address] at [time].
Cancel Email ReminderClose window
Close window x
Program Details Video Preview
[Series Title / Movie Title]
Cancel Email Reminder
Are you sure you want to cancel the reminder to be sent to [email address] at [time]?
Yes, cancel it.
Close window x
Program Details Video Preview
[Series Title / Movie Title]
Send Email Reminder
Send me a reminder by email of this future airing of [Series Title / Movie Title] [Episode Title]:
Send the reminder:
Immediately before program airs
Your email address was updated successfully.This email reminder will be sent to [emailAddress]. Change my email address.
Day mm/dd 00:00 AM [channel] [##]
2 hours
Remind MeCancel
[email address]
Immediate reminder Future reminder
Close window
xclose
x
Close window x
Program Details Video Preview
[Series Title / Movie Title]
Cancel Email Reminder
Your email reminder was cancelled.
Close window
No, don’t cancel.
If a pending email reminder exists, this page (and tab name) will be the state for the Email Reminder tab. Once the email reminder is sent, the tab state reverts to #1.
2 1b
2 3 4
Update default Email Send Email Reminder w/ updated email.
Reminder confirmation Reminder confirmation / Cancel Email Reminder Confirm Cancel Reminder
5 Confirm Cancel Reminder
note change!
[email address][email address] [email address]
3
3 Rly Cool Basketball Court1234 Washington St.Anytown, ST 99999 USAFacilities: Outdoor, wood backboards, chain mesh, asphalt.Best times: Sat afternoon; Sunday morning; Wednesday evening.
Rate it
Edit infoEmail Address / Login ID:
Password:
Forgot your login ID?Forgot your Password?
LOG INAlready a member of Nike.com or Jordan?
Rly Cool Basketball Court1234 Washington St.Anytown, ST 99999 USAFacilities: Outdoor, wood backboards, chain mesh, asphalt.
Your rating:
Submit
3
3 Rly Cool Basketball Court1234 Washington St.Anytown, ST 99999 USAFacilities: Outdoor, wood backboards, chain mesh, asphalt.Best times: Sat afternoon; Sunday morning; Wednesday evening.
Edit Your RatingEdit info
Report as Bogus
Report as Bogus
3
Rly Cool Basketball CourtCourt / Park Name:Address:City:State:Zip/Postal Code:Country:
Facilities:
1234 Washington St.
Anytown
ST
99999
United States
Indoor Outdoor
Concrete
Location:
Surface:
Backboards:
Nets:
Asphalt Wood
Glass Wood
String Chain No nets
Choose… Choose...
Choose... Choose...
Submit
Rly Cool Basketball Court1234 Washington St.Anytown, ST 99999 USAFacilities: Outdoor, wood backboards, chain mesh, asphalt.Best times: 2pm-4pm Sat; 12pm-2pm Sun; 6pm-8pm Wed.
Report as bogus?
Please only use this feature to report a listing that does not exist or is offensive.
We will review this listing and may delete it.
Reason for reporting:
Submit
3
3 Rly Cool Basketball Court1234 Washington St.Anytown, ST 99999 USAFacilities: Outdoor, wood backboards, chain mesh, asphalt.Best times: Sat afternoon; Sunday morning; Wednesday evening.
Rate it
Edit info
Report as Bogus 3
3 Rly Cool Basketball Court1234 Washington St.Anytown, ST 99999 USAFacilities: Outdoor, wood backboards, chain mesh, asphalt.Best times: 2pm-4pm Sat; 12pm-2pm Sun; 6pm-8pm Wed.
This listing has been reported as bogus and is being reviewed.
Submit
x
x x x1.1.1.1 Add Rating 1.1.1.2 Edit Info 1.1.1.3 Report as Bogus
Jordan/Nike forgot login/password flow in new window
“Rate it” changes to “Edit Your Rating” if user has entered a rating.
Thank you for your rating.
Information updated successfully.
CancelCancel
Weekday Time
1.0.1 Log In1.1.1 Court Descriptions
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).
Basketball court Training facility
Rated 5 times
Rated 5 times Rated 5 times
Not a member?Register
Your favorite times to play:Choose… Choose...
Weekday Time
MondayTuesdayWednesdayThursdayFridaySaturdaySunday
MorningAfternoonEveningLate
Choose... Choose...
Examples of drop-down selections for ‘favorite times to play’:
Jordan/Nike registration flow in new window/layer
Storyboard transitions: Add element
Storyboard transitions: “filmstrip”
H
PROMOTION / MODULE TITLE
Tagline lorum ipsum dolor.
More Info
D
EF
G
HIJ
KL
A
B C
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. If user clicks on play button, go to State C.
Promo / trailer “strip”: User will have five promotional spots available at any one time, but can cycle through the entire number of promos / trailers available.
There may be a greater or fewer number of promotional spots available to the user depending on the page or user profile (number of spots shown below is for illustrative purposes only).
Item title
Short description / tagline
‘More Info’ link to detail page
Play / Pause button
NOTE THAT THE ABOVE DIAGRAM ILLUSTRATES THE ‘CIRCULAR’ NATURE OF THE MEDIA ELEMENT STREAM ONLY AND DOES NOT INDICATE THE MINIMUM OR MAXIMUM NUMBER OF ELEMENTS TO BE IN THE STREAM. Blast Radius recommends that a minimum of 10 elements and a maximum of 30 be used at any one time.
DIRECTV will be able to control the following using business rules and scenarios in ATG:
1. What media element will appear in “C” (default first-to-play)2. What media elements will appear in spots A, B, D, E3. 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).
K L M N O….. ….. …..…..…..
Order Now
H
PROMOTION / MODULE TITLE
Tagline lorum ipsum dolor.
More Info
K L N O….. ….. …..…..…..
Order Now
MPromo Title
M
M
K L O….. ….. …..…..…..
NPromo Title
M
[still image]
[still image]
[video playing]
[video playing]
Volume control appears on click
See previous set of promos
See next set of promosPromotion
thumbnailsCurrent set of 5 promos in filmstrip
Current item in main promo area
Promotion thumbnails
State B: roll over promotion thumbnail. User rolls over thumbnails in filmstrip; on rollover each enlarges and the promotion title appears. On click, the thumbnail moves to the large state and begins playing (State C).
State C: Main promotion playing. Filmstrip recedes on the bottom, video is playing in main window. User can pause video (goes back to State A, with video paused in main window. Moving mouse down to the bottom of the frame will cause filmstrip to come back up (while video is still playing); go to State D. If promotion finishes playing, return to state A with finished promotion still image in main window.
State D: Main promotion playing, filmstrip active. User can roll over other thumbnails and go back and forward in the filmstrip. If user clicks pause, return to State A. If user clicks on a filmstrip item, go to State C with new item playing. If promotion finishes playing, return to state A with finished promotion still image in main window.
Clicking on another set of promos changes thumbnails to that set.
….. ….... Odd numbers of promos will be represented with partial sets.
H
PROMOTION / MODULE TITLE
Tagline lorum ipsum dolor.
More Info
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. If user clicks on play button, go to State C.
Item title
Short description / tagline
‘More Info’ link to detail page
Play / Pause button
K L M N O….. ….. …..…..…..
Order Now
[still image]
Volume control appears on click
See previous set of promos
See next set of promosPromotion
thumbnailsCurrent set of 5 promos in filmstrip
Current item in main promo area
Promotion thumbnails
Storyboard transitions: Selection bar
Your DIRECTV System
Startup Costs
Your Monthly Bill
Save Print E Mail
Enter Promotion Code (optional):
No items selected yet.
Total Startup Costs $ 0.00
No items selected yet.
Total Monthly Bill $ 0.00
Update
Update
Your DIRECTV System
Startup Costs
Your Monthly Bill
Save Print E Mail
0947363Promotion Code:
Line Item More Info $ xx.xxLine Item $ xx.xxLine Item $ x.xx
Total Startup Costs $xxx.xx[explanation text appears here if
necessary].
Line Item More Info $ xx.xxLine Item $ xx.xxLine Item $ x.xx
Total Monthly Bill $xxx.x[explanation text appears here if
necessary].
FREE Gift: a pony! More Info
Update
Update
Your DIRECTV System
Startup Costs
Your Monthly Bill
Save Print E Mail
Call 1-xxx-xxx-xxxx to order
by phone.
Line Item More Info $ xx.xxLine Item $ xx.xxLine Item $ x.xxLine Item $ x.xxLine Item $ x.xx
Total Startup Costs $xxx.xx[explanation text appears here if
necessary].
Line Item More Info $ xx.xxLine Item $ xx.xxLine Item $ x.xxLine Item $ x.xxLine Item $ x.xxLine Item $ x.xxLine Item $ x.xxLine Item $ xx.xxLine Item $ x.xxLine Item $ xx.xxLine Item $ x.xxLine Item $ xx.xxLine Item $ x.xx
Total Monthly Bill $xxx.xx[explanation text appears here if
necessary].
FREE Gift: a pony! More Info
Update
Online Check Out >>
Update
0947363
Promotion Code:
0947363
Promotion Code:
Change
Entry state: no previous selections.
If user is entering the wizard with no offers selected, or has removed all items, all solution bar elements will be in an unselected state.
If there are no solution items, the save, print and email functions will be disabled.
No items selected state; update button is disabled. Also occurs if user has just saved and has not made any changes.
Area that can be used for messaging about free gift and/or promotion, if desired.
Area that can be used for messaging about free gift and/or promotion, if desired.
Order any sports subscription and get a FREE PONY!!! More Info
If user has not entered a promotion code, text entry field will appear.
Enter
If solution is not complete (user has yet to complete a valid programming + hardware package), the checkout button will be disabled.
Solution buttons will become active as soon as one item is in the solution bar.
More info link if required
Area for short explanation text if necessary (e.g. to explain special pricing, etc.)
Clicking update button reloads page with both Startup Costs and Monthly Bill totals updated.
After save, “update” buttons are greyed out until user makes a change to the solution.
If promotion code has been entered, it is shown. Clicking on change link will allow user to edit.
0947363
The promotion code you entered is not valid. Please try again.
UpdateCancel
If user enters an invalid promotion code, error state is shown. If user cancels, state returns to “no code entered”
Active state: user has added items but does not have a valid system yet..
Solution bar elements appear and totals update on page load and/or pressing the ‘update’ button. Button to go to checkout is still disabed.
Active state: user has added items and had a valid system.
Solution bar elements appear and totals update on page load and/or pressing the ‘update’ button. Button to go to checkout is enabled.
Once user has gone to the checkout page, the online checkout button becomes active. Continues in this state unless the user makes a change that requires them to follow all steps again (e.g. user changes offer selection).
Phone number is dynamic depending on data such as zip code, referring site, etc. If no data is available, default to the general 1-800 number.
[Legal text / disclaimer] taxes not included; subject to credit approval, etc.
You have not saved a system yet. You have not saved a system yet. You have a saved system. LoadIf user does not have a saved system, this message appears.
If user has a saved system, this message appears. Note that in this state the user must be a registered prospect or authenticated registered prospect.
If user is registered prospect, user will be asked to login in a popup:
User can only save one system profile. Should they load another system profile, their existing profile will be lost.
On a request to load, the system will recognize if there is a currently active system profile and pop up layer with the new content listed below:
Answering [Yes] would result in closing the popup window and loading the saved profile.
Answering [No] will result in closing the popup window with no changes.
Load Saved System
Forgot your username?Forgot your password?
[username]
Load RecommendationCancel
Enter Username:
Enter Password:
“You currently have an unsaved recommendation. There is a maximum of only one saved recommendation per user name. Do you wish to delete the current recommendation and load the saved one?”
Yes No
Call 1-xxx-xxx-xxxx to order
by phone.Online Check Out >>
[Legal text / disclaimer] taxes not included; subject to credit approval, etc. Call 1-xxx-xxx-
xxxx to order by phone.
Online Check Out >>
[Legal text / disclaimer] taxes not included; subject to credit approval, etc.
Change
Cancel UpdateClear
ClearIs promotion code valid?
no yes
Storyboard transitions: too much detail
Program Guide
Listings For:
Fri Apr 22 8:00 PM
Starting at:
Pacific go
90210
Zip Code: Channel Listings:
x Sports Entertainment + MusicNewsMovies + Events Family + KidsAll Categories
Time Zone:
Edit Preferences
Entertainment Direct
Locals
custom channels A
Search Listings All Categories searchNext 24 Hours
My Favorite Shows
My Favorite ShowsProgram Guide
Your Favorite Shows
You do not have any programs in your Favorite Shows list.
To add programs, use the “search listings” tool above.
Search Listings All Categories Next 24 Hours
Search for programs to add to your Favorite Shows List:
Program Guide
Search Listings [searchTerm1] [searchTerm2] All Categories search
TV Programs matching “[searchTerm1] [searchTerm2]” Showing 1 to 5 of [x]
Next 24 Hours
Title Channel Start Time
[channel name]###Show Title xx:00 pm Pacific
[channel name]###Show Title xx:00 pm Pacific
[channel name]###Show Title xx:00 pm Pacific
[channel name]###Show Title xx:00 pm Pacific
[channel name]###Show Title xx:00 pm Pacific
See all results for “TV Shows”
1.2.3.4.5.
Found [n] listings matching “[searchTerm1] [searchTerm2]”. Listings sorted by relevance.
My Favorite Shows
My Favorite ShowsProgram Guide
Search Listings All Categories searchNext 24 Hours
Search for programs to add to your Favorite Shows List:
Your Favorite Shows For [timeperiod] Next 7 days Eastern
[channel name]###Show Title xx:00 pm Pacific
Title Channel Start Time
[channel name]###Show Title xx:00 pm Pacific
[channel name]###Show Title xx:00 pm Pacific
[weekday], [month] [dd]
[channel name]###Show Title xx:00 pm Pacific
Title Channel Start Time
[channel name]###Show Title xx:00 pm Pacific
[channel name]###Show Title xx:00 pm Pacific
[weekday], [month] [dd]
[channel name]###Show Title xx:00 pm Pacific
Title Channel Start Time
[channel name]###Show Title xx:00 pm Pacific
[weekday], [month] [dd]
Remove
6.1.1.1 Program Detail
Delete email reminder
User clicks on ‘My Favorite Shows” tab in the top tab row of the program guide.
search
Program Guide
Search Listings [searchTerm1] [searchTerm2] All Categories searchNext 24 Hours
TV Programs matching “[searchTerm1] [searchTerm2]”. Listings sorted by relevance. Showing 1 to 5 of [x]
Title Channel Start Time
[channel name]###Show Title xx:00 pm Pacific
[channel name]###Show Title xx:00 pm Pacific
[channel name]###Show Title xx:00 pm Pacific
[channel name]###Show Title xx:00 pm Pacific
[channel name]###Show Title xx:00 pm Pacific
See all results for “TV Shows”
1.2.3.4.5.
Added to My Favorite Shows.
If user does not have any programs in their Favorite Shows, they will be prompted to add them using search.
All EPG search results will allow user to add eligible programs to their Favorite Shows list.
User clicks on My Favorite Shows tab to see Show List
If the user has programs within the specified time period, they will display sorted by day (if multiple days selected).
User can remove programs by clicking on the “remove” button.
Remove
Remove
Remove
Remove
Remove
Remove
Remove
90210
If no results are available, user is shown status message, with links to expand search if applicable:
My Favorite ShowsProgram Guide
Search Listings All Categories Next 24 Hours
Search for programs to add to your Favorite Shows:
search
Your Favorite Showst For [timeperiod] Next 7 days Eastern 90210
None of the programs in your Favorite Shows List are playing within the time period specified.
Try out your search over: 48 hours | 7 days | 12 days [time periods shown if greater than time period requested]
xclose
What do you want to add to your favorites list?
2 hours
[Program Title], Episode “[Episode Title]”, showing on Channel xxx at [air time].
All showings of [Program Title], Episode “[Episode Title].”
All episodes of [Program Title]
First-run only
Add to My Favorite Shows
First-run and re-runs.
Add to My Favorite Shows
Eligible programs will have an ‘add to My Favorite Shows’ button on the program detail.
In the case of programs with multiple episodes and showtimes, a clarification dialog will appear (similar to ‘edit’ dialog; see 6.1.2 My Favorite Shows (Member) for more details).
Add to My Favorite Shows
Favorite Shows Not Found In the Next 7 Days
Title Episode(s)
Show Title Episode Name Remove Edit
Show Title All Episodes (first run only) Remove Edit
Edit
Edit
Edit
Edit
Edit
Edit
Edit
Edit
Entertainment Direct
Entertainment Direct
My Favorite Shows Entertainment Direct
Entertainment Direct
Entertainment Direct
Add to My Favorite Shows
Add to My Favorite Shows
Add to My Favorite Shows
Add to My Favorite Shows
Add to My Favorite Shows
Add to My Favorite Shows
Date
Mon Jan 31
Tue Feb 1
Wed Feb 2
Thu Feb 3
Thu Feb 3
Date
Mon Jan 31
Tue Feb 1
Wed Feb 2
Thu Feb 3
Thu Feb 3
Mapping Flows: too many on one page
BBVDO “Branded” PageBBVDO “Branded” Page
BBVDO “Aggregate” Page
Top 10 Downloads
FAQ
My Settings
Promotion?
BBVDO “Branded” Pages
Promotion?
FAQ
Order Summary
Order details
Links from promotions / filmstrip / EPG Channel 1000
Each listing links to a program Detail
Selected listings could also be branded and link to branded page?
Generic BBVDO link
Branded link
Each listing links to a program Detail
Each listing has a Download link
Each listing has a Download link
All Branded Listings
Each detail has a Download link
Search BBVDO:
Search BBVDO:
Search
Search
Each listing links to a program Detail
EPG
Show BB Listings
All Listings
Features
Search EPG:
[‘EPG’ listings]
[BBVDO Listings]
Search
(from aggregate page)
(from branded page)
Error Message(s):
- billing problem- parental lock
- hardware conflict
D/L success D/L fail
Title $priceSee more HBO Description
BBVDO “Branded” PageBBVDO “Branded” PageBBVDO Program Detail
Program Detail Video Preview
DownloadDownload
All Listings-----------------------Genre1Genre2Genre3Genre4
Features
Download
Search
TV Shows
Broadband Video
Movies
Pay Per View
See more HBO
All Listings-----------------------Genre1Genre2Genre3Genre4-----------------------Weekend WarmupLast Chance AlertsNow Available BBVDO “Branded” PageBBVDO “Branded” PageBBVDO Program Detail
Program Detail Video Preview
Confirm Download Selection
Title / Description etc.
Select Set-Top Boxes
Download
Billing Info / Download info
6.8.2 Broadband Programming
6.8.3.x Branded Broadband Page(s)
6.0.2 Program Guide
6.1.1.6 BBVDO Program Detail
6.8.2.3 Broadband
Search Result
Search
TV Shows
Broadband Video
MoviesPay Per View
6.1.6 EPG Search Result
6.1.1.8 Download Broadband Video
Each listing has a Download link
Each listing has a Download link
BBVDO Index Page (Home)
6.8 Broadband Index
Search BBVDO:
Browse BBVDO
Promotion Promotion What’s Hot
Weekend Warmup
Latest Added
Last Chance
Promotion Promotion Promotion
State transitions / storyboards: solutions
Purpose is to communicate flow Try to keep one flow per page Use diagrams to draw attention to similarities
and differences between states Include only relevant detail
Hyperlinking, Tracing, and PrototypingAdrian Chong
Hyperlinking with Visio 2007
Visio 2007 has an export to PDF function This allows for PDFs to hyperlink from one page
to another. No more saving as a web page Agnes Misiurny has put together a tutorial that
talks about hyperlinking and a few other tips with Visio which we will make available.http://www.anthonyhempell.com/papers/RIA/
Canadian Tourism Commission
Lessons Learned
Hyperlinking can be useful for orientation It would be nice to highlight parts of the flow
diagram
Need for Speed Carbon
Autosculpt
Anchor PointPen Tool
Hold the Alt key
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
EA Madden 07
EA’s largest sports franchise
Coaches Corner
Stats
Gamecast
Ideas in here
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
Documentation Landscape
Contacts
Anthony Hempell Mgr of Usability and Interaction
anthony.hempell@blastradius.com
Adrian Chong Interaction Architect
adrian.chong@blastradius.com
Discussion / Questions
top related