Wiki source code of XWatch User Interface Proposal
Last modified by Vincent Massol on 2011/10/10 22:45
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | XWiki Watch (XWatch) is XWiki's collaborative RSS reader. It is designed to provide teams with a competitive intelligence tool | ||
| 2 | they can use together in real-time. | ||
| 3 | It allows organizations to find, analyze and distribute relevant information. | ||
| 4 | |||
| 5 | XWatch makes it easier to keep up with your ever-expanding reading list of content from across the web. | ||
| 6 | You can add RSS feeds from sources you want to watch to the reader. You can read the articles and enrich them using comments and tags. Then you can deliver relevant information to other people based on their center of interest. | ||
| 7 | |||
| 8 | 1.1.1 XWatch Mindmap | ||
| 9 | |||
| 10 | {image:XWikiWatch.png|446|913} | ||
| 11 | |||
| 12 | 1.1.1 The look of the current implementation | ||
| 13 | |||
| 14 | {image:XWikiWatchMainBis.png|513|755} | ||
| 15 | |||
| 16 | 1.1.1 Proposal: New User Interface | ||
| 17 | |||
| 18 | {image:General.png|443|763} | ||
| 19 | |||
| 20 | 1.1.1 Components | ||
| 21 | |||
| 22 | *XWatch Purposes* | ||
| 23 | |||
| 24 | * Collect and retrieve information on the Web | ||
| 25 | * Simplify the reading experience | ||
| 26 | * Organize the information | ||
| 27 | * Enrich it with tags and comments | ||
| 28 | * Analyze and filter it to best suit your needs | ||
| 29 | * Deliver only what is relevant | ||
| 30 | |||
| 31 | XWatch is divided in three panels: Feeds, Articles and Filters. | ||
| 32 | |||
| 33 | *Feeds Panel* | ||
| 34 | * Retrieve RSS Feeds | ||
| 35 | * Organize them in groups | ||
| 36 | * Easy access to common used groups | ||
| 37 | |||
| 38 | *Articles Panel* | ||
| 39 | * Read through articles in real time | ||
| 40 | * Favourite, tag or comment on important articles | ||
| 41 | * Delete unwanted articles | ||
| 42 | * Export articles in RSS, HTML, PDF format, or e-mail as a review | ||
| 43 | |||
| 44 | *Filters Panel* | ||
| 45 | * Run a Text Analysis on content | ||
| 46 | * Search for keywords | ||
| 47 | * Filter on date, tag or article type | ||
| 48 | |||
| 49 | 1.1.1.1 Feeds Zone | ||
| 50 | |||
| 51 | {image:Feeds.png|433|196|left}With XWatch you can read the latest articles from your favourite feeds all in one place. | ||
| 52 | These feeds can be organize in groups to manage similar content. | ||
| 53 | |||
| 54 | You can navigate your articles in a number of ways. First of all you can have easy access to common standard groups like "All Articles", "Favourites", "Commented" or "Deleted". Also, you can browse all the articles within a group or individually browse each feed. | ||
| 55 | |||
| 56 | The number of new articles is presented between brackets. | ||
| 57 | |||
| 58 | The Loading Status (showing statistics about loading time, number of groups, feeds, articles) will be visible and accessible only in Admin mode (not displayed here). | ||
| 59 | \\ | ||
| 60 | \\ | ||
| 61 | \\ | ||
| 62 | \\ | ||
| 63 | \\ | ||
| 64 | \\ | ||
| 65 | \\ | ||
| 66 | \\ | ||
| 67 | \\ | ||
| 68 | \\ | ||
| 69 | \\ | ||
| 70 | \\ | ||
| 71 | \\ | ||
| 72 | \\ | ||
| 73 | {image:FeedsAdd.png|745|584|left|floatleft}{style:type=span|color=#0099ff}~~Add Group, Add Feed, Drag & Drop (Move|Copy feed to group)~~{style} | ||
| 74 | |||
| 75 | New groups and feeds can be created easily (from the menu) with: | ||
| 76 | * One Step Add Group | ||
| 77 | * One Step Add Feed (+ advanced steps) | ||
| 78 | Drag & Drop is used for moving feeds from one group to another but | ||
| 79 | also to organize the importance of the groups (maybe you want GroupN to | ||
| 80 | be the first one in the tree). | ||
| 81 | Multiple groups selection is possible. You can move one | ||
| 82 | feed to another with simple drag&drop or "copy" the feed to another | ||
| 83 | group (this is made using the CTRL key) - this means the feed is added | ||
| 84 | to another group. | ||
| 85 | |||
| 86 | {style:type=span|color=#0099ff}~~Feed Advanced Properties - Entering a Name, Multiple Group Selection, Using a Search Engine~~{style} | ||
| 87 | |||
| 88 | You can add feeds into groups: | ||
| 89 | * during the feed's adding process, within the properties | ||
| 90 | * editing a feed's properties | ||
| 91 | * select a group and press "Add Feed" button | ||
| 92 | * with drag&drop | ||
| 93 | |||
| 94 | You can also have feeds outside groups (this is an | ||
| 95 | implication of using the One Step Add Feed - where you mention only the | ||
| 96 | URL and no other properties). | ||
| 97 | |||
| 98 | The Add Feed feature provides the basic mode people will want to use upfront (One Step Add - you are requested only the URL, name is get implicit) and use gradual display techniques for advanced features (you can specify the feed's name, containing groups or use a search engine for collecting information). | ||
| 99 | |||
| 100 | {style:type=span|color=#0099ff}~~Selected Group, Hovered Group, Edit Group Action, Delete Group Action~~{style} | ||
| 101 | {image:GroupActions.png|410|866} | ||
| 102 | |||
| 103 | When a Group is selected it's gonna be displayed by changing its color. The group properties (Edit, Delete) will be displayed only when someone hovers the group and they are gonna be in-place available (not using modal dialogs). The configuration will disappear when you hit Cancel or change the focus to another panel. | ||
| 104 | |||
| 105 | {style:type=span|color=#0099ff}~~Selected Feed, Hovered Feed, Edit Feed Action, Delete Feed Action~~{style} | ||
| 106 | {image:FeedsActions.png|410|866} | ||
| 107 | |||
| 108 | By default, when you edit a feed you can change its name. If you want to edit other properties you can go to the "Details" (Advanced mode) | ||
| 109 | |||
| 110 | 1.1.1.1 Articles Zone | ||
| 111 | |||
| 112 | {image:Articles.png|598|908} | ||
| 113 | |||
| 114 | You can Select, Favourite, Delete or go to Original Article in one step. You can operate "Mark as Read", "Favourite", "Delete" on multiple articles. You can view the number of comments, tags, name, location, post date and hour for each article. | ||
| 115 | |||
| 116 | The articles are visually represented by colors (grey - read, blue - active, black - new). | ||
| 117 | \\ | ||
| 118 | The pagination helps browsing by page and shows the number of total articles. | ||
| 119 | \\ | ||
| 120 | You can sort the articles by "Most Recent" (date), "Source" (group, feed), "Alphabetical" (article name) or "Reverse Sort". | ||
| 121 | |||
| 122 | The sharing features lets you share articles through the export feature or favourite them so they will be available to users within XWatch. The export feature allows the creation of a list of filtered articles and makes them available for download in PDF, RSS, HTML format or to be e-mailed (through an compose message dialog) to external users. Whoever gets the review will get a full version of what you're seeing, along with links to the original story, assigned comments and options to subscribe to the RSS feed on XWatch. | ||
| 123 | |||
| 124 | If you really want to speed up the reading process you can select to browse articles in three views: Headlines, Summaries, Full Posts. Clicking on an article title makes the article expand to full view, displaying the full content. | ||
| 125 | XWatch gathers up what the content owners and publishers provide. Some sites send out updates with entire stories; others give just a headline or brief summary of the story. If you want to see the full version of the story, simply click on "Original Article" and you'll go directly to the source website. | ||
| 126 | |||
| 127 | {style:type=span|color=#0099ff}~~Summaries View, Headlines View, Deleting an article~~{style} | ||
| 128 | {image:ArticlesViews.png|421|906} | ||
| 129 | |||
| 130 | Deleting an article won't ask for confirmation. The deleted articles can be retrieve from the "Deleted" group in the Feeds Zone. | ||
| 131 | |||
| 132 | {style:type=span|color=#0099ff}~~Full View with comments management, Adding | Deleting a Tag, Go to Original Article~~{style} | ||
| 133 | {image:ArticlesCommentsTags.png|357|900} | ||
| 134 | |||
| 135 | Articles can be favourite or deleted depending on their interest. You can comment directly under the content | ||
| 136 | and add tags to provide a quick overview of the article. | ||
| 137 | |||
| 138 | {image:Keyboard.png| | | |floatleft} | ||
| 139 | Comments enrich the information and help team members make decisions about the article's content. | ||
| 140 | The proposal has a better organization of comments entries and tags then the actual implementation. You can individually delete or reply to comments. Each comment displays the author and the creation date. | ||
| 141 | |||
| 142 | Tags are a way to organize articles so they can be used for later filtering. Tags are comma separated. You can tag any article on the fly by clicking the tags button and you can delete each tag separately. Clicking on a tag activates the tag filter for the selected tag. | ||
| 143 | |||
| 144 | You can navigate through articles using keyboard shortcuts. Keyboard shortcuts save you time by helping you quickly explore your articles. You are able to select the view mode or mark articles in different states. | ||
| 145 | |||
| 146 | 1.1.1.1 Filters Zone | ||
| 147 | |||
| 148 | {style:type=span|color=#0099ff}~~Filter Zone, Text Analysis, Multiple Type filter selection, Archive option~~ {style} | ||
| 149 | {image:Filters.png|554|674} | ||
| 150 | \\ | ||
| 151 | Filters can be applied to feeds in order to narrow results by specific information. | ||
| 152 | Filters provide you quick access to relevant data. | ||
| 153 | \\ | ||
| 154 | You can filter articles by keyword, type, date or tag. | ||
| 155 | * The Keyword option is a search that can be defined and used to display only the articles containing the requested keywords. You can highlight the searched entries. | ||
| 156 | * The Type option allows you to filter articles by their status (All entries, Unread or Read entries). You can multiple select the type of an article (Favourite, Tagged, Commented, Deleted). | ||
| 157 | * The Date option has commonly used date periods (Today, This Week, This Month) or you can select a specific period using the archive feature. | ||
| 158 | * The Tag Cloud option reflects the status of tags frequency and allows simple or multiple filters selection. | ||
| 159 | |||
| 160 | You can reset all filters before starting a new filtering process or you can save the current filters for later reuse. | ||
| 161 | This way you automate and reuse an usual search or a combination of filters. The saved filters are available in their own folder. When | ||
| 162 | restoring a saved filter, the context where it was created (the feed or the group selection) is also restored. On reset, the standard folder to be displayed is "All Articles". | ||
| 163 | |||
| 164 | Text analysis posts the words that appear most frequently in the displayed articles, providing a fast outline of occurring content. You | ||
| 165 | can select the language of the content to analyse (different words have less importance in different languages). | ||
| 166 | |||
| 167 | 1.1.1 Conclusions | ||
| 168 | |||
| 169 | The proposal is concentrated on interaction, not necessarily on design. Different colour schemes can be applied. | ||
| 170 | |||
| 171 | The focus of the proposal is on organizing information and the space used by it. The features are easily visible and easy to use. The UI is concentrated on details and overall integration and consistency. | ||
| 172 | |||
| 173 | 1.1.1 Discussion | ||
| 174 | |||
| 175 | See the dev-list thread about this proposal: http://xwiki.markmail.org/search/?q=UI+Proposal#query:UI%20Proposal+page:1+mid:ud4iaktafuoix2wy+state:results . |
