EarthLink

News & Update Zone Functional Spec

Chris Altman Interface Architect
Tom Harris Product Manager
Changes:
  1. March 23, 2007 | Chris Altman | Updated “Change from our list…” and “Rename” copy to reply to Michael’s comment
  2. March 22, 2007 | Chris Altman | Updated All Screen Shots to include copy
  3. March 21, 2007 | Tom Harris | Section 5.3: Added not to use new Topix API for local news
  4. March 21, 2007 | Tom Harris | Section 5.1: Specified that feed update times should be as specific as update times in Reader
  5. March 20, 2007 | Tom Harris | Section 5.8: Added requirement that any feed a user adds to the News and Updates Zone, separate from the universal defaults (e.g. AP feeds), should show up in the catalog in the “Your Reader Sources” folder.
  6. March 20, 2007 | Tom Harris | Sections 5.3 and 5.4: Added requirement that any specialized feeds (local news feeds) we automatically add as tabs to the user’s page should also be automatically added to Reader.
  7. March 20, 2007 | Tom Harris | Section 5.8: Removed requirement for “All Recently Updated” from Reader option in the feed catalog.
  8. March 20, 2007 | Tom Harris | Section 5.8: Added requirement that no folder be pre-selected by default in the add-a-feed catalog
  9. March 19, 2007 | Chris Altman | Created Document

1 Overview


2 Scenarios

2.1 Classic PSP User Trying New PSP:

Tony Soprano is a classic PSP user who regularly reads the headlines in the current “News Headlines” feature. He has also customized the Local News feature on the classic PSP so that it shows headlines from Newark, NJ; New York, NY; and Miami, FL. He checks these feeds daily, and he also clicks on EarthLing stories when they appear in the Today at EarthLink feature. He regularly reads a waste management blog, and gets to the URL by searching for it from the PSP. He don’t know nothing about no RSS.

Tony clicks on an ad on the classic PSP to try the new myEarthLink start page. The new myEarthLink page comes up in a new browser window, and the News and Updates zone is pre-populated with several feeds, organized by tabs. Tony sees several tabs for AP News categories, a tab for Newark headlines, a tab for New York headlines, a tab for Miami headlines, a tab for Earthling headlines and a tab for the myEarthLink Product blog headlines.

Tony notices the “Add/Edit Sources” link in the News and Updates zone, and clicks it. He searches “waste management blog,” finds the source and adds it as a new tab.

2.2 New Open PSP User:

Paulie Walnuts is a heavy Web user who has never used an EarthLink product. He has heard of RSS and tried out the bloglines reader. In the past, he’s used the AOL start page.

While searching for shovels online, Paulie Walnuts sees a sponsored link promoting the new myEarthLink PSP. He clicks the link and gets to the new PSP in its logged out state. In the News and Updates zone, he sees tabs for several AP news categories, the Earthling blog and the Portal Product blog. After checking out the site, he registers, and enters his zip-code – 07030, in Hoboken, NJ, as part of the registration process.

When he is finished registering and returns to the PSP, he sees a new tab, listing news headlines for Hoboken. This spurs him to click the “Add/Edit” link. He browses through a catalog of RSS sources and starts adding favorite blogs. When he has filled up fourteen available tabs, he gets a message saying he has run out of room and that he needs to delete a tab if he wants to add another source. Paulie is more interested in his favorite blogs than the default AP headlines, so he removes all the AP default tabs to make more room. Paulie doesn’t find The Bada Bing Blog in the catalog, but wants to add it. He brings it up in a new window, clicks the rss icon, and pastes the RSS URL into the search box to add that blog as another tab.


3 Non-Goals

The News and Update Zone is not a miniaturized RSS Reader embedded in the Start Page. In other words, the goal is not to replicate the functionality of Reader. The goal is to enhance the News feature on the classic Start Page, which displays the most recent news headlines from a particular source. The major enhancement over the classic PSP News feature is that users are not limited to EarthLink’s partner sources and Topix feeds for their updated headlines.

The News and Update Zone is not a status update for a user’s Reader feeds or a comprehensive view of a user’s Reader feeds. As such, it is not a “Reader Zone,” but a headline-oriented zone that leads users into Reader when they want to see more headlines.

The News and Update Zone does not send users into Reader to see individual stories. In order to get users to the content they want as quickly as possible, individual headlines point to the original story, at the original source site. Instead, the feature sends users into Reader to see the entire feed.


4 Flowchart


5 Screen by Screen Specification

5.0 News and Updates Wireframe

The News and Updates Zone is 450 pixels wide and is positioned in the main column. All removing and re-ordering zone rules apply to this zone.

Wireframe

5.1 News and Updates View Mode

When a user brings up the start page, the News and Updates zone is in View Mode (as opposed to Edit Mode).

In View Mode, the user sees Tabs along the left side of the zone, and headlines along the right side of the zone. The text in each tab is the name for an RSS feed. Some of these are be headlines from a single source (e.g. Techcrunch). Some of these are an aggregation of headlines from multiple sources (e.g. news headlines related to Pasadena, gathered by Topix).

The user can see the headlines for one source (tab) at a time, by clicking on the tab ( View Mode Prototype ). Clicking on a tab changes the graphic of the tab to highlight it, and refreshes the right-hand side of the zone to show only headlines from that tab. The 12 most recent headlines from that feed will display on the right-hand side of the zone. Headlines display in a bulleted list. Long headlines wrap to a new line. Line-spacing between headlines is greater than between the two lines of a wrapped headline.

The date for the last time the feed updated displays above the top headline. For example, if the last new post was added to the feed on August 19th, then this text displays above the top headline: “Last updated on August 19th, 2007”

If the last update was on the current calendar date, the elapsed time since the last time the feed was updated displays above the top headline. For example, if it is 5:00 and a new update was added to the feed at 4:05, then the text would say “Updated about 1 hour ago.” This should be as detailed as the time updates in Reader (i.e. time updates in minutes).

Question to be answered: how granular can we get? Is hour the smallest increment we can track?

For an RSS feed from a single source (e.g. Slashdot), only headline text displays. For an RSS feed aggregating updates from multiple sources (a Topix feed for a particular city, for example), there is also text below the headline noting the source.

Each of these headlines links to the direct, permanent URI for that story. For example, a Techcrunch headline links to the URL for that specific Techcrunch story, on Techcrunch.com. In the case of default AP headlines, the headline link to the news story displayed on the myEarthLink news page.

When a user clicks on a headline, the news story opens in a new browser window/tab, unless it is from a default AP feed. In the case of a default AP feed, the story opens in the same window, since the user is staying within the myEarthLink portal. In either case, the link text changes color to indicate the user has clicked to read the story.

Under the headlines for a tab other than a default AP feed, there is a link pointing to the source page for that RSS feed as displayed in Reader. The text should read “See more from SOURCE NAME in Reader” – for example, “See more from Perez Hilton in Reader.”

Under the headlines for a default AP feed, there is a link pointing to the corresponding myEarthLink subchannel page, with the text “See more from _” (e.g. “See more from AP International”

When a user switches between tabs, the header above the headlines on the right side of the zone changes to match the RSS source name. The first part of the header is always “News & Updates,” and the second part is the name of the tab that is currently open. So, if you were looking at the Slashdot tab, you would see:

News & Updates | Slashdot

In each tab, there is space for 16 characters to display for the source name. In the header, there is space for 24 characters to display for the source name. When a source name is longer, the tab or header will display as many characters as possible with ellipses at the end. The full source name should display in the tooltip for each tab.

Each tab and the “Add/Edit Sources” link has a rollover state (see prototype).

When a user begins a new start page session, the last tab viewed in the previous session should be open.

When a user leaves Edit Mode after adding a tab or multiple tabs, the last tab added opens in view mode or the last tab viewed if no tab has been added.

When a feed URL is not valid for an existing feed, an error message displays:

“This source is currently unavailable. The provider may have discontinued the feed, or it may be down only temporarily. Click “Add/Edit Sources” if you wish to remove this source.”

When a feed URL has no updates associated with it, this error message should display:

“This source currently has no articles or updates.”

When a feed hasn’t loaded after one second, the system displays a moving spinning “processing” icon in the upper right-hand side of the zone until the feed loads. Click EarthLink Blogs Tab to see icon in action

5.2 Default Tabs Without Known Zip-Code and Without Previous Local News Prefs

When a new free user arrives at the signed-out version of the PSP, the system does not know his zip-code. His News and Content zone is set to these “location-blind” defaults, in this order:

The EarthLink Blogs feed should be an aggregation of Earthling and all product blogs. If this is not available for launch, we can display Earthling only, and the name for the tab should be “Earthling”

5.3 Default Tabs With Previous Local News Prefs and Known Zip Code

When a user who has set up local news on the classic PSP comes to the new PSP, we already know what local news they are interested in. In addition to the “location-blind” defaults, we will add each previously entered city as a separate tab at the top of the list, above the location-blind defaults.

The headlines for these pre-set city tabs come from a Topix feed, and display headlines from multiple sources, from most recently updated to least updated. Since this feed is an aggregation of headlines from multiple sources, we display the source name in addition to the headline text for each headline.

The text on each pre-configured city tab is written like this “CITY NAME News,” without a state abbreviation or zip-code. For example, we would display “Mos Eisley News” not “Mos Eisley, TN, News” or “45930 News.”

These feeds should also be added to a user’s Reader feeds.

TECHNICAL NOTE: Please use the new Topix API. Don Roberts can provide details.

5.4 Default Tabs With Known Zip-Code but Without Previous Local News Prefs

When a new PSP user has not set up local news on the classic PSP but has given us a zipcode at some point, the system automatically adds a city news Topix feed to the user’s News and Update zone.

This zipcode information can come from multiple sources, such as:

Basically, if a user hasn’t already set up a local news feed on the old PSP or new PSP, we should automatically set up a feed the first time they give us a zip-code by any other means.

These feeds should also be added to a user’s Reader feeds.

5.5 Edit Mode

When a user clicks the “Add/Edit Sources” text link, the News & Updates zones switches from View Mode to Edit Mode.

In Edit Mode, a user’s tabs still display in the same place as in View Mode, on the left side of the zone, but are not clickable and have no rollover state. The word “Rename” and a trashcan icon are to the left of each tab.

Any “open tabs” show “empty” in grayed out text. The maximum number of tabs is 14. So, if a user already has 9 sources set up, there are five “empty” tabs at the bottom of the tab list on the left.

The header title appears in the same place as in View Mode, but reads “News & Updates | Add or Edit Sources.”

Below the header, there is a three-column catalog of feeds that users can add. The text “Choose from our list of recommended sources” appears above the catalog on the left side: The text “Powered by Reader” appears above the catalog on the right side. The words “Reader” is linked to reader.earthlink.net, and the link opens in a new browser window.

Below the catalog, there is a search field, with a search button to the right.

The text “Or, search for a source by keyword or location (like “baseball,” “Los Angeles,” or “90210”) or enter an RSS feed URL (like http://blogs.earthlink.net)” appears above the search field.

Below the search field, there is a link, with the text “close.” Clicking this link returns the News & Updates Zone to View Mode. Clicking anywhere on the page outside the Edit Mode lightbox also returns the zone to View Mode.

5.6 Deleting an Existing Tab

To delete an existing tab, the user clicks on the trashcan icon to the left of the tab name. When a user mouses over a traschcan icon, the icon darkens, the cursor turns into a finger and the user sees a tooltip with text “Click to Remove Source.” When the user clicks the trashcan, the tab disappears immediately. The tab below the deleted tab shifts up, and a new open slot appears at the bottom of the column.

5.7 Editing an Existing Tab

To edit an existing tab, the user clicks the word “Rename” to the left of the trashcan, which is to the left of the tab. When a user mouses over the word Rename, the text is underlined, the cursor turns into a finger, and a tooltip pops up with this text “Click to rename this source.”

When the user clicks the Rename text, the tab turns white, the text becomes over-writeable and a blinking cursor appears after the text. The user can delete the current tab text, write a new name and click “Save” to the left of the tab to save the changes. Clicking “Save” changes the text on the tab and returns the user to the initial Edit Mode screen.

If a user deletes all characters from the tab name, the “Save” text disappears so that the user does not have the option of creating a tab with no name.

5.8 Adding Source From Catalog

The left-hand column in the catalog is a list of folders for rss feeds. This includes a folder for “Your Reader Sources,” followed by the same list of subject-specific folders now found in Reader. Clicking a folder name brings up the contents of the folder in the middle column. The contents of a folder in the left-hand column may be individual feeds, or the contents may be sub-folders. Clicking on a sub-folder in the middle column brings up the feeds in that sub-folder in the right-hand column.

When the user brings up the Edit interface, no folder is pre-selected by default.

The “Your Reader Sources” folder includes any feeds the user has already added to myEarthLink Reader.

If the user hasn’t added any feeds to Reader, the text “You haven’t added any
sources to Reader.” appears in the middle column. The word “Reader” is linked to reader.earthlink.net, which opens in a new browser window.

To add a feed from the catalog, the user clicks on the “Add” button to the left of the feed name. This replaces the first open slot at the bottom of the tab column with a new tab, listing the added feed’s name. The feed’s name fades into the open slot just like a new favorite site fades in.

In the catalog, the text for the added feed becomes bolded and the “Add” button turns into a check mark icon.

When the user returns to View Mode, this tab will display the most recent updates from the selected feed, as described in the “Edit Mode” section.

The feed is automatically added to the user’s Reader account as well. If a user has not set up a Reader account, the system automatically sets one up the first time the user adds a feed to the News and Updates Zone.

When a user adds a feed to the News & Updates zone, that feed shows up in the “Your Reader Feeds” folder in the site catalog. This does not apply to universal defaults (e.g. AP feeds) but does apply to specialized defaults (Local News tabs).

5.9 Adding Source by URL

To add a new feed using an RSS URL, the user either types or pastes the URL into the search field below the catalog and clicks the “Search” button. The system checks to see that the URL is a valid RSS feed.

If the URL is valid, then the system replaces the first open slot at the bottom of the tab column with a new tab, listing the added feed’s name. The search field clears.

When the user returns to View Mode, this tab will display the most recent updates from the selected feed, as described in the “Edit Mode” section.

The feed is automatically added to the user’s Reader account as well. If a user has not set up a Reader account, the system automatically sets one up the first time the user adds a feed to the News and Updates Zone.

If the URL is not valid, an error message displays in red just below the catalog. The text reads “We could not find the source you entered. Please check the URL (address) and try again.” The search field does not clear the original URL text, but the user can overwrite it.

5.10 Adding Source by Search

As in Reader, users can also search for feeds using keywords. To search for a feed, users enter a keyword in the search field and click the “Search” button. This search logic works the same basic way as the search in Reader.

The search results appear in a single column list below the search bar, with this text above the results: ‘Search results for “QUERY”’ (e.g. “Search results for “waste management”)

An “Add” button appears to the left of each feed name. To add a source, the user clicks on the “Add” button to the left of the feed name. This replaces the first open slot at the bottom of the tab column with a new tab, listing the added feed’s name. In the catalog, the text for the added feed becomes bolded and the “Add” button turns into a check mark icon.

When the user returns to View Mode, this tab will display the most recent updates from the selected feed, as described in the “Edit Mode” section.

The feed is automatically added to the user’s Reader account as well. If a user has not set up a Reader account, the system automatically sets one up the first time the user adds a feed to the News and Updates Zone.

The user can add multiple sources from the search results by clicking “Add” next to multiple feed names. The results list is visible until the user executes another search, searches for a URL, clicks the “close” link to close Edit Mode or clicks on the start page outside Edit Mode to close Edit Mode.

5.11 Reaching Maximum Number of Tabs

When the user has 14 tabs, a message appears above the catalog, saying “You have reached the maximum number of sources (14). To add another, please remove a source first by clicking on the trash can icon to the left of the tab name.”


6 Notes on the Connection Between News and Updates Zone and Reader

As soon as a user has any feed in the News and Updates zone, other than the AP news defaults, the user automatically has a Reader account.

Adding any feed, including Topix local news feeds, sets up the same feed in Reader. This is true whether the user has added the feed manually, or whether the system has added the feed based on previous local news settings or zipcode knowledge.

When a user views any of the headlines under any tab other than the AP news defaults, a link below the headlines points to the source page for that feed in Reader, which displays the full feed. This gives the user a way to see all the recent headlines/updates from a particular feed

When a user removes a feed in Reader, and the user has previously added that feed to the News and Updates zone, the system does not delete the feed in the News and Updates Zone. It removes the feed from the user’s list of feeds in Reader and removes the feed from the “Your Reader Feeds” tab in the News and Updates Zone catalog. When the user clicks on the “See all __ updates in Reader” link below the headlines for that feed, then the user will still see all the feed updates in Reader. Removing a feed from Reader simply means removing it from the user’s feed list in Reader.

When a user removes a feed from the News and Updates Zone, the system does not remove the feed from the user’s Reader account.

When the user renames a source name in News and Updates, it does not change the source name in Reader.

When the user edits a source name in Reader, it does not change the source name in News and Updates.


7 Prototypes and Visual Design

Prototypes and Visual Design: (Please Use FireFox When Viewing Prototypes)
View Mode Location Blind Prototype