ESM Interface Re-DesignESM Interface Re-Design

HCI Undergraduate Project Team HCI Undergraduate Project Team

Bei Yang Bei Yang

Derek ParhamDerek Parham

Wenyao HoWenyao Ho

Our GoalsOur Goals

Identify the needs of different broadcast Identify the needs of different broadcast users (i.e. novice, advanced)users (i.e. novice, advanced)

Redesign the Redesign the broadcasting processbroadcasting process to to incorporate the needs of those usersincorporate the needs of those users

Design a new Design a new broadcaster interfacebroadcaster interface to to match those needsmatch those needs

What the users wantedWhat the users wanted

We questioned a number of users and We questioned a number of users and created user profiles based on the created user profiles based on the information.information.

We created different We created different IntentsIntents and and ExpectationsExpectations that Novice and Advanced that Novice and Advanced users would have.users would have.

Basic UsersBasic UsersIntentIntent ExpectationsExpectations

Setting up a broadcast Setting up a broadcast ““I want to broadcast my I want to broadcast my video easily and as quickly video easily and as quickly as possible (or now!).” as possible (or now!).”

Communicating the Communicating the broadcast to others broadcast to others

““I want to tell my family I want to tell my family and friends about this and friends about this video that I am video that I am broadcasting (through broadcasting (through phone, email or IM).” phone, email or IM).”

Monitoring broadcasting Monitoring broadcasting ““I want to see if everyone I want to see if everyone can view the video can view the video successfully.” successfully.”

Advanced UsersAdvanced UsersIntentIntent ExpectationsExpectations

Setting up a broadcast Setting up a broadcast ““I would want to set the video/audio output I would want to set the video/audio output options.”options.”

““I want to set my video to be broadcasted I want to set my video to be broadcasted every hour.”every hour.”

Communicating the Communicating the broadcast to others broadcast to others

““I want to advertise (on posters, I want to advertise (on posters, billboards, television, radio, Internet, billboards, television, radio, Internet, etc) this event that will occur next etc) this event that will occur next

Saturday at 3pm.”Saturday at 3pm.”

Monitoring broadcasting Monitoring broadcasting ““I want to view statistics (e.g. I want to view statistics (e.g. number connections, QoS, etc) number connections, QoS, etc)

about the people tuning in.”about the people tuning in.”

Our first conceptsOur first concepts

We started out by creating a ‘ticket’ metaphor:We started out by creating a ‘ticket’ metaphor:The ESM config file was called a ‘ticket’, like you The ESM config file was called a ‘ticket’, like you get at the movie theaterget at the movie theater You could e-mail tickets to friendsYou could e-mail tickets to friends You could put the ticket on a webpageYou could put the ticket on a webpage

From the broadcaster, you would ‘publish’ tickets From the broadcaster, you would ‘publish’ tickets after setting up a broadcast.after setting up a broadcast. The ticket file was generatedThe ticket file was generated The user would be responsible for sending the files The user would be responsible for sending the files

out (e-mail or webpage), or they could be put on the out (e-mail or webpage), or they could be put on the ESM main server.ESM main server.

Basic userBasic user

The basic user had a step The basic user had a step by step wizard to configure by step wizard to configure the broadcast.the broadcast.

These windows were These windows were sequential and only basic sequential and only basic settings could be setsettings could be set

Basic user - PublishingBasic user - Publishing

The ‘Publish’ screen The ‘Publish’ screen gave options to the gave options to the user to either:user to either: Publish through ESMPublish through ESM Publish through E-mailPublish through E-mail Publish to other sitePublish to other site Export FileExport File

Advanced userAdvanced user

The Advanced The Advanced interface used a interface used a MDI interface so MDI interface so multiple events multiple events could be viewedcould be viewed

Configuration could Configuration could be done fast and be done fast and easily using tabs in easily using tabs in each of the each of the windowswindows

Basic + Advanced Basic + Advanced Connections screenConnections screen

When an event was When an event was broadcasting, a broadcasting, a connections screen connections screen is shown, which is shown, which lists details like how lists details like how many people are many people are watching, and watching, and allows the user to allows the user to start/stop the videostart/stop the video

ProgressProgress

After user testing, we found that users did After user testing, we found that users did not understand the ‘ticket’ metaphor easilynot understand the ‘ticket’ metaphor easily

Users did not understand what exactly Users did not understand what exactly happened when they published an event, happened when they published an event, or what their responsibilities wereor what their responsibilities were

There was a large gap between Basic and There was a large gap between Basic and Advanced users where two different Advanced users where two different interfaces were used.interfaces were used.

New Overall InterfaceNew Overall Interface

We wanted one interface that both could We wanted one interface that both could be used by Basic as well as Advanced be used by Basic as well as Advanced users.users.

The Basic interface would allow easy The Basic interface would allow easy setups with few clicks, and very little setups with few clicks, and very little technical knowledge.technical knowledge.

The Advanced interface allows for The Advanced interface allows for complex tasks and configuration of every complex tasks and configuration of every variable.variable.

Changes - PublishingChanges - Publishing

Instead of publishing, we changed it to ‘Invitations’Instead of publishing, we changed it to ‘Invitations’

An invitation is now a text message containing a URL that links to An invitation is now a text message containing a URL that links to the ESM config file,the ESM config file,

This link can be placed in e-mails, AIM msgs, websites, postersThis link can be placed in e-mails, AIM msgs, websites, posters

The link can point to the host (broadcaster) or to the ESM websiteThe link can point to the host (broadcaster) or to the ESM website

Changes – MDI to Multiple Changes – MDI to Multiple Windows with TabsWindows with Tabs

Instead of using MDI, we change it so that each event is a Instead of using MDI, we change it so that each event is a separate window.separate window.

Instead of having 2 types of windows for Basic or Advanced Instead of having 2 types of windows for Basic or Advanced interface, both are accessible by tabs at the topinterface, both are accessible by tabs at the top

Changes – Streamlined Advanced Changes – Streamlined Advanced optionsoptions

Instead of using tabs to access different settings pages, we Instead of using tabs to access different settings pages, we now use a list.now use a list.

The clicking list brings up the config panel to the right of itThe clicking list brings up the config panel to the right of it

This allows for a simple view of the options with out congesting This allows for a simple view of the options with out congesting the top of the windowthe top of the window

Putting it all togetherPutting it all together

We have created a prototype from all the We have created a prototype from all the research we have done.research we have done.

Event Manager was created to be Event Manager was created to be thethe Main ESM InterfaceMain ESM Interface It is used by both the viewer and the It is used by both the viewer and the

broadcaster.broadcaster.

Event ManagerEvent Manager

It displays upcoming It displays upcoming events (to view, or to events (to view, or to broadcast)broadcast)

Allows anyone to start Allows anyone to start a broadcast. a broadcast. Clicking on the button Clicking on the button pops up a new pops up a new window…window…

New Broadcast ScreenNew Broadcast Screen

Starting ScreenStarting Screen

Event SetupEvent Setup

Video SourceVideo Source

SchedulingScheduling

PublicizingPublicizing

InvitationsInvitations

Advanced SummaryAdvanced Summary

Quick and easy setupQuick and easy setup

Broadcast ScreenBroadcast Screen

Lastly, we have theBroadcast screen.

All users (Basic andAdvanced) will see thisWhen the broadcast starts.

Users can see statistics,Start the video, or changeOptions on the fly.

From here on…From here on…

We are going to perform user test for the We are going to perform user test for the next few weeks to see how well users are next few weeks to see how well users are able to perform using this interface.able to perform using this interface.Specific tasks will be given and users will Specific tasks will be given and users will ‘talk aloud’ while they are performing ‘talk aloud’ while they are performing them.them.We will be looking for areas where users We will be looking for areas where users get confused, tripped up, or make a get confused, tripped up, or make a mistake.mistake.