confidential and proprietary © 2007 blast radius inc. ia for rich interaction: tools and techniques...

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


Access to full profile + account info

General interest and prospect-focused

Above; promotions may be targeted


Above, promotions may be targeted based on profile


Targeted; member-focused; general interest


RECOGNITION ACCOUNT ACCESSCONTENT

Recognizes registered member from session login

Assumes prospect

Assumes prospect



None

None

Access to limited user profile / saved configuration






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



Authenticated (registered prospect)





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

Blast Radius: Clients

http://www.brandsoftheworld.com/brands/0004/3514/Fairmont.eps

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


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.





DIRECTV Subscriber(Has DIRECTV)

May or may not be a member of

DIRECTV.COM

YES

X

X

n/a

X

n/a



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




YES

X

X

NO

X

X

X

X

X

X

X

RECOGNITION



member?

ACCOUNT ACCESS


after login?

CONTENT


arrival?

Assumes prospect


Assumes prospect


Assumes prospect


None

None












RECOGNITION ACCOUNT ACCESSCONTENT


Assumes prospect

Assumes prospect



None

None







System BehaviorConditionsActor

Anonymous

Return prospect

Anonymous (registered prospect)

Registered prospect


Registered member


Anonymous prospect

Return prospect

Anonymous registered prospect

Registered prospect

User Type

Descriptive name for user and related system behavior




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.





YES

X

X

n/a

X

n/a



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

X

NO

X

X

X

X

X

X

X

RECOGNITION



member?

ACCOUNT ACCESS


after login?

CONTENT


arrival?

Assumes prospect


Assumes prospect


Assumes prospect


None

None

















Assumes member Targeted; member-focused; general interest None

Mapping user type transitions

Registered member

Authenticated 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


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)


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.


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



SOUND

Mute > <

RESOLUTION

Hi Lo






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


Remove from Favorite Shows



Show Title

Close window x



Video Preview tab appears if there is a video preview asset associated with this title.

Video Lounge >>

SOUND

Mute > <

RESOLUTION

Hi Lo




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





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.


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



SOUND

Mute > <

RESOLUTION

Hi Lo






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



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



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.


2 hours

Remind MeCancel

[email address]

Close window x



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



Send Email Reminder

A reminder to watch [Series Title / Movie Title] [Episode Title] was sent to [emailAddress].

Close window x



Cancel Email Reminder

You have requested a reminder to be sent to [email address] at [time].

Cancel Email ReminderClose window

Close window x




Are you sure you want to cancel the reminder to be sent to [email address] at [time]?

Yes, cancel it.

Close window x



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.


2 hours

Remind MeCancel

[email address]

Immediate reminder Future reminder

Close window

xclose

x

Close window x




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


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


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



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



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





See all results for “TV Shows”

1.2.3.4.5.

Found [n] listings matching “[searchTerm1] [searchTerm2]”. Listings sorted by relevance.

My Favorite Shows


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





[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]







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:


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.


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).


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



My Favorite Shows Entertainment Direct









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 has a Download link


All Branded Listings

Each detail has a Download link

Search BBVDO:

Search BBVDO:

Search

Search


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



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/

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

[email protected]

Adrian Chong Interaction Architect

[email protected]

mailto:[email protected]

mailto:[email protected]

Discussion / Questions

confidential and proprietary © 2007 blast radius inc. ia for rich interaction: tools and techniques...

Documents

system cookieuser

member of directv

hyperlinking user flows

member access

saved system configuration

multiple types

member features

limited access