DRAFT

Meta info: In this outline, large caps (A,B,C etc) denote a major page type (different design, different presentation). Page types may have different instantiations (A1, A2, etc). Roman numbers (I, II, etc.) denote different functional areas on a page. Small letters (a,b,c) denote individual controls in a functional area. Numbers (1,2,3) denote interaction steps. Small roman numbers (i,ii,iii) denote implementation comments.

General Strategy

There are four levels of page:
Top Level
Contains entree to all functions (lookup, search, etc.).
  • Actions within a functionality can be totally user-defined (type in search terms and click context button, etc.)
  • Some actions may also be partially pre-defined (click on news topic to get a search results page for that topic, direct access to "top stories".)
Top level is actually six pages, presenting the same layout and functionality with different activism contexts. Navigation between contexts is orthogonal to all other functions. ("Trunk Node")
Results Level
Shows results of a function/action (search results, etc.), includes banner ad and other information generated by keywords in action (search for "kitchen" pops up ad for cookbooks, etc.) Replaces existing contents of browser window. Primary navigation by expanding trees and clicking on a specific link, "next results page" button. ("Branch Node")
Content Level
Shows contents of clicked-on link (news story, other website, catalog page, etc.) Opens in new browser window. Primary navigation by scrolling. ("Leaf Node")
Help Level
Shows additional site/interaction information on demand, when help button is clicked (how to search, who we are). Opens in new, smaller window. Includes button to dismiss the window.

A - Top Level

A1 - Opening Screen

everything goes fully across the screen, except where noted.
  1. Context Tabs
    1. Tabs to specify opening page context, for example: Human Rights, Hunger, Environment, ??? what else ???, Extreme
      1. IF User clicks on any tab:
      2. Opening page is re-drawn using the tab context to weight choice of features like news stories and products. (Also Ads?)
      3. Tab clicked now appears marked as chosen (greyed out or raised up)
      4. Other tabs including "General" now appear unchosen
      1. Context names appear like file folder tabs at top of page
      2. Page opens with "General" marked as chosen
      there is a question about whether or not context tabs should be above or below the header - this really needs to be decided by evaluation of the prototype.
    2. Header
      1. Padra logo:
        1. Memorable, repeated throughout site, matches site style
        2. contains name "Padra"
      2. About us bar: One strip of links (NOT folder tabs) for Padra internal contact.
        1. User clicks on one of the choices for information
        2. Information opens in new browser window (design same as information window).
        1. Links should be "About us, Join us, FAQ, Advertise, Get Listed, Contact us"(More than seven choices on an un-nested menu is hard to navigate.)
        2. e-mail link if appropriate
    3. Search
      1. search box:
        1. user types keywords/phrases/patterns into text box
        2. user types return or clicks on [search] button at right
        3. results replace contents of current browser window (results page description below)
        1. should appear at uppermost of page, directly under banner and logo.
        2. text space should be as long as possible
        3. text space should be centered
      2. how to search button:
        1. user clicks on [how to search] button
        2. explanation of wildcards etc. pops up in a second smaller browser window (up/down scroll).
        3. user clicks on exit button at bottom and/or top of smaller window to dismiss it.
        1. [how to..] button should appear to the right of the search box.
        2. labeled as "Search Tips" or similar
        3. explanation window should NOT block the search box. If possible should not recieve locus of control.
        how to search box can also be generated spontaneously in some cases (null search result, for example). Option to not show if personalization is implemented
      3. search sources:
        1. User clicks on checkbox
        2. Clicked boxes specify what databases a search will be conducted on.
        1. consists of checkboxes directly under the search box/tips button. "Search: ()the news ()the web ()catalogs ()non-profits"
        2. by default news and web are checked
        eventually also include maplink, phone/e-mail finder here, or as separate links. Not this version.
    4. News
      everything above this is fully across the page. Below this news and action are on the left, shop and stocks are on the right..
      1. subject heading:
        1. IF user clicks directly on a subject heading a search is performed for that subject using "news" as the search source.
        2. The search result replaces the contents of the current browser window. (result page description below)
        1. subject headings could be "Top Stories, World News, Business, Technology/Science, Sports, Entertainment"
        2. in future versions, users should be able to specify topics and return to the site for personalized news.
        3. In this version, it might be cool to have local news as a heading with a place to type in your zip code.
      2. story headline
        1. IF user clicks on a story headline the story opens in a new browser window
        1. three story headlines appear under each subject heading (chosen by recency, popularity, combination? - algorithm to be discussed)
        2. headlines are followed by an icon(text? in parentheses?) naming the source. In addition to AP. UPI, etc. we could include press releases by Greenpeace, etc.
        On context pages the first news subject head will be news relevant to that context. ("Environmental News" etc.)
    5. Stocks
      1. quote box
        1. User types company name or ticker symbol into text box
        2. User clicks on "find quote" button at right
        3. IF symbol is found OR company name is unambiguous:
          • Stock quote and chart(plus recent relevant news headlines and releases) opens in a new browser window
        4. IF symbol is not found or company name is ambiguous:
          • Stock lookup opens in a new browser window
        1. stock results description below
        2. lookup description below
      2. symbol or name specifier
        1. user clicks on radio button to specify symbol or company name database to search.
        1. symbol is default
    6. Shop
      this really needs to be played with some more
      1. category name
        1. user clicks on a category name
        2. vendor page for that category opens in a new browser window
        1. Category names are things like "automotive, travel, auctions, books, music
        2. Ideally there are thumbnails interspersed for individual featured products. If so, context pages have different thumbnails.
        3. Ben references MSN. I prefer cataloglink
      2. Product search
        1. Unclear if this kind of search should appear on front page, or if so, if it should be rolled into the general search function. Wait until afer prototype to decide.
      1. description of products/results page is below
    7. Action
      "Action" means what's going on in the world right now that should get immediate attention from concerned activists. On the main page this will almost always be war or natural disaster (if no ongoing crisis we can choose a non-profit at random). On context pages this will be context-relevant. (there are two things that are psychologically compelling to all humans - sex and threat)
      1. Event description
        1. user clicks on event description
        2. search result for that event (news and websites) replaces contents of browser window.
        1. search result described below - MUST include links to non-profit/activist organizations.
    8. Footer
      1. footer should mirror about-us bar in header above

    A2thruA6 - context screens

    mirror of opening screen accessible by tabs on opening screen. Identical layout, but context of search, news, products, etc. to be specialized. Possible contexts: Human Rights, Hunger, Environment, ??? what else ???, Extreme.

    B - Results pages

    B1 - Common Elements

    All results pages will contain the following common elements, in addition to those specified.

    1. Search appropriate banner ad.
      eventually to update as sub-topics are chosen - see below
    2. Header
      across full width of page
      1. padra logo as above
      2. aboutus bar as above
    3. Non-profits
      In narrow right side column
      1. !! If Non-profits is one of the search sources, no non-profit listing is shown in the right column.
      2. If any non-profit organizations in the database fit the search context for other search sources, they should be listed in the right column. If more than five, they should be listed in the nested tree form.
      3. Listing is of the form: Name, One line description, where "Name" is a live link to the NP's page or to an info/contact page registered with us (see below).
      4. Clicking on live link opens that NP's page in a new browser window.
      5. If no NPs fit the search criteria, no listing is shown (not just chosen at random).
    4. product list
      Below NP listing on right side column
      1. Associates links, including context note - for example Amazon link labeled "books about search topic" (reference www.altavista.com). Clicking on link opens site in new window.
      2. live links to businesses in our vendor database found by specific or generalized keyword search ("cookbooks" brings up Frontier Herbs, for example). Clicking on link opens vendor info in new window.
      1. !! if "catalogs" is one of the search sources, the vendors shown in the right column should only be those with offsite links or thumbnails (Amazon, e-toys, etc.). All others will show up in search result.
    5. Footer - mirrors "about us" in header above

    B2 - Search results page

    1. news search results
      In wide column on left side of page
      IF "news" was chosen as a search source:
      1. Topic Header
        1. Articles appear in a nested topic tree (reference netscape bookmarks, or the frames version of this document). The topics and sub-topics will have to be chosen by a human - volume of stories will give a clue as to how many are necessaryope. Topic Headers are not links. Cannot be clicked.
      2. Expansion triangle
        1. Topic Headings and subheadings (ie anything that isn't a leaf node) have a navigation triangle at left. Clicking on the triangle expands the topic to show first news story links (leaves) and then furtherly recursive sub-topics listed underneath and indented. Clicking again closes the expansion. Everything else in the tree moves down to make room, and up again if closed. If the topic is expanded, its triangle points downward. Otherwise the triangle points right.
      3. Story Headline
        1. General stories (leaves) about the search topic appear at the top (trunk) level, more specialized story/leaves appear under topic sub-headings (branches).
        2. News Story links are the FULL TITLE of the article, presented as a live link (if it doesn't fit, wrap it). Clicking on the link opens the news story in a new window. Can we spawn a new window only once, and re-use it if another link is clicked in the results window?
        3. Articles are marked as to source (AP, UPI, GREENPEACE, etc.). We will accept and solicit press releases from activist organizations. This database will also be used in stock lookup results.
      4. More
        1. Up to five news stories are shown under each single topic node, most recent story first. If there are more than five, they are followed by the word "more" with an expansion triangle at right. In this case, the word "more" acts as a sub-topic, with additional stories shown if the triangle is clicked.
      5. Next page
        1. Below list of links is right arrow labled "next n thru n+foo results out of total". If clicked, the current page is replaced by a full page of news results (described below). Number of results per page to be decided after evaluation of prototype. In future versions, results per page can vary depending on client.

      Example: Search for "Bosnia" pops up a general story, "Bosnia - history of the conflict (Reuters)" as well as subtopics "Bosnia - Children" "Bosnia - US Military" etc. Clicking on the triangle to the left of "Bosnia - Children" causes the stories "Pediatric surgery - saving the littlest victims (AP)" and "Red cross asks for emergency donations (Red Cross)" to be shown. Clicking on "Red Cross etc." causes that press release to be opened in a new window.

    2. Web Results
      In wide column on left side of page
      IF Web was specified as a search source:
      1. URL top levels
      2. URL lower levels
        1. Web results are live links to found URL's, with the title of the page as the link name (this is standard). Clicking on the link opens the URL in a new browser window.
        2. Results appear using the same directory tree structure as above under news. Sites are stacked by domain - if many pages on the same domain match the search, the highest level page (or pages) that match the search criteria are shown and the other below it are collapsed (this can also be recursive by the URL's directory structure). Note that pages on the same domain where the directory is preceeded by a tilde should be treated separately.
        because websites are not strictly temporally ordered, order of results will depend on search engine parameters. "more" function (see above under news) needs discussing. Because of the number of websites, a hierarchy by topic instead of domain is unrealistic at this time. Eventually we can do the Yahoo thing and let people pigeonhole their own websites. For now, we're doing an altavista type search.
      3. Next Page
        1. below last link is right arrow labeled: "next n thru n+foo results out of total". If clicked, the current page is replaced by a full page of web results (described below). Number of results per page to be decided after evaluation of prototype. In future versions, results per page can vary depending on client.
    3. Catalog Results
      In wide column on left side of page
      IF Catalog was specified as a search source:
      1. Item link
      2. Catalog Link
        1. IF one item from a vendor matches the search criteria (search for "tuning fork", for example), the name of that item appears as a live link to that item's catalog page.
        2. IF several items from a vendor match the search criteria (search for "musical instrument", for example), the name of the vendor appears as a topic subheading, and the names of individual items are listed using the nested triangle tree described above. (Hidden until clicked)
        3. Vendors should have a greenness rating to show how much they are donating back to the cause. (I suggest a globe as pie-chart, with 10% shown as a full globe.
      3. Next Page
        1. below last link is right arrow labeled: "next n thru n+foo results out of total". If clicked, the current page is replaced by a full page of product results (described below). Number of results per page to be decided after evaluation of prototype. In future versions, results per page can vary depending on client.
    4. Non-profit search results
      1. same nested strategy as products. We will need human hands to determine the keyword list for each non-profit.
      2. Name of NP is live link to an information page for that NP.

      other search source results (usenet, yellow pages) to be added eventually, using similar strategy, in future versions.
    5. refine search
      full width across bottom of page.
      1. text box, checkboxes and help and search buttons appear identically to search box on the top level page.
      2. Existing search terms and checkbox settings are reproduced, and can be edited by the user.
    6. widget to run search on other search engines
      full width across bottom of page.
      1. Checkboxes labeled as "Search ()Yahoo ()Excite ()Altavista ()Lycos (etc)."
      2. [Search] button at right (same button as Padra Search)
      1. User clicks on checkboxes to choose which portals to search.
      2. User clicks [Search] button
      3. Results page replaces existing contents of browser window, lists matches found on each portal, plus live link to that portal site. (Reference ask.com.) Further description below.
      4. If no checkboxes are chosen, error message is generated ("You have to choose which search sites to search"). probably easiest to pop up a box with the message and a dismiss button, could use same functionality with all errors of this type.

    B2a - Second page of results

    Second page (and third, etc.) of search results is identical to first page, with the following changes:
    1. Results listing shows results for only one search source (depending on which arrow was clicked on the first results page). The above-described tree structure is used. Total number of results per page will eventualy depend on client, but in this release will be a static number decided on after evaluation of the prototype. (I would guess ten).
    2. "next N results" now has a right and a left arrow, to show next bunch but also previous bunch of results.
    3. If download time becomes an issue, we may lose the ad listings in the right column, and just go with the banner.

    B3 - stock results

    1. Quote
      top of broad left hand column, under banner
      1. No interactive functionality - Stock symbol, name and current (or delayed) ticker price shown.
    2. Charts
      Three charts, side by side, across left column under quote

      DJIA, Stock, and appropriate index for the stock (S+P 500, Internet/tech stock index etc. Financial types will know better than I). Same setup for each chart:

      1. Label: Dow Jones Industrial Average, Stock Name, Index Name
      2. Chart: Chart of price vs time, for TODAY. (Standard format -see any quote portal.)
      3. Historical: Pull-down menu with TODAY showing as choice. Other choices: "This Week, This Month, Three Months, Six Months, One Year, Five Years"
        1. IF user chooses a different historical timeframe from the pull-down menu (click - drag - release) that chart is re-drawn for the timeframe chosen.
    3. Stories
      Across left column, under charts
      1. results of a news search on the stock name and symbol, INCLUDING SEC filings and press releases by activist organizations mentioning the stock.
      2. Presentation mirrors presentation of news stories above.
      3. comment - some PR people have started including gratuitous lists of other stock symbols in press releases about their companies, clearly to get the attention of investors who search for stories about their stock. It would be value added to cull these out, if we have the hands.

    ###construction###

    other portals search

    reference ask.com

    C - Content pages

    product/vendor info pages

    nonprofit info pages

    D - Support Pages

    These pages will open in a different, smaller browser window, and be things like search tips, stock symbol lookup, etc. Unlike other results that open in a separate window, they will be generated by padra, not an off-site link.

    about us: aboutus, join, FAQ, advertise, get listsed, contact us

    how to search

    stock symbol lookup

    BUGS


    where is the general non-profit search?
    how to keep vendor/product list from being overwhelming?