XWiki UX - Call to Arms

XWiki had always had some nice feedback about its interface. But things are not that honey pink, we have many inconsistencies in our user interface, some of them caused by the fact that we're developing in an open source environment.

Our goal is to improve the user experience of XWiki and we'd like you to get involved. We need to improve the usability of the XWiki platform and we would be very happy if the community got involved in helping us making this happen.

All the decisions we make directly imply and affect our community which is why we're eager to get your feedback before we start working further on these topics.

• We would like to know what are your main usability problems when using XWiki - we badly want to fix them


• We would be super-happy to receive bold and creative ideas that we might be able to incorporate into XWiki's look and feel

Want to get involved? Yay! We’d love to have you aboard! It doesn't matter whether you're a developer who’s interested in participating, an UX person or someone with an eye for design as long as you come up with great ideas.

You can add your mockups and videos to our Flickr group or to our Vimeo group. These groups can be used to show off your ideas or just to point the problems you had using XWiki.

Let’s make XWiki amazing !!

If you would like to help improving XWiki interface please contact me at evalica [at] xwiki [.] com or just join our mailinglists.

XWiki Design Proposals

Motivation
My Work

Motivation

I always wanted my work to influence, inspire and help other people. This is why I am currently involved in creating applications that simplify the workflow and make a difference in the way people collaborate and communicate. XWiki is one of the projects I am working on.

XWiki is an open source project with an amazing active community of people that use the software and want to make it better. In an open source project you get more exposure and recognition for your work and you get to work with the best/passionate developers out there. If you're interested in how XWiki's development is done you can read more about it in our development section.

When you work in an open source project you get to see many people's style squeezed in the patches they submit. There are lots of things that need improvement and the everyday development rhythm can make you dizzy. Everyone in the team has a great desire to make XWiki a top-class project and we are putting our hearts into making this goal a reality.

If you want to work for XWiki you need to be curious about what happens everywhere. You need to be able to solve your problems and not wait for a miraculous guy to save you. That's why is best if you are a bit of a designer, a bit of a database administrator, a bit of a developer, etc. But the most important thing is that, even if you are a bit of everything, you need to rock at something. I love to make things pretty and easier to use. That's why I decided to work on user interface improvements.

When you have to make an improvement you get to see its good and dark sides. Good side because you need to understand/see what was the component's intent and how it should work/behave, so you already have a starting point. Dark side because obviously you are making an "improvement" so something must be wrong, so you need to make it better and try to integrate as many existing things as you can. XWiki has lots of users and you can't come with an out-of-space interaction paradigm. All the improvements have to fit in a larger perspective and strenghten the existing interaction.

The best thing about working for XWiki is that you can make design decisions for almost any functionality you can imagine. XWiki is not just a simple application that can't do more than add/edit/delete with events/photos/documents.

XWiki is very complex and can be adapted for lots of situations. Its feature set includes a Wiki, a Blog, User Rights, LDAP Authentication, Comments/Attachments/Version Control, PDF Export, Integrated Statistics, Skin management, Internationalization and many more. And the best part is that it has powerful extension capabilities through plugins/applications. So I can add to the core applications like Calendar, PhotoAlbum, Pool, Scheduler, ToDo, WikiManager, etc.

As you can see there are lots of places where I can make good use of my creativity and skills.

XWiki worked hard to have a strong foundation that can incorporate all the things their developers and users would need and to have the right mechanisms to make these components work together. The next steps are to polish them and make them user-friendly, which is where I come in.

My Work

In the past 3 months I got to work on 4 XWiki components: search results, live table, login/notice boxes and blog.

I had to make specifications, analysis, mockups, partial prototypes and even final versions of the proposals. Once I have drawn and suggested an interface proposal, I get feedback from the XWiki community. I integrate all the changes and then I can decide if I want to implement them or just go to another improvement. I'm still a beginner in XWiki implementation mechanisms, so right now I stick to CSS, HTML, Velocity, JavaScript and design.

Some of my concepts are still waiting for implementation:

Search Results

Some have already come to life and are integrated in XWiki core:

LiveTable (you can also see the Live Table in action)

And some concepts are waiting to be integrated in the next release:

Login / Notice Boxes

Currently, I am working on improving the XWiki Blog, trying to think about all the things that are wrong with other blog products, select the best interaction models and integrate them smoothly.

You can view the list of issues I'm involved in right now.

XWiki is a good place to apply your creativity and create something amazing. You get to test your skills and see if the community agrees with your design vision. Feel free to give me a hand in improving the current XWiki interface and you will have the satisfaction to see your work as part of something that is used by many users.

If you would like to help improving XWiki interface please contact me at evalica [at] xwiki [.] com or just join our mailinglists.

Thoughts on Mozilla's Design Challenge Spring 2009

About my prototype
About the experience
Design Challenge Summer 2009

I won Mozilla's Design Challenge Spring 2009 in the entry Best in Class: Innovation, for the solution that has "the newest / most original interaction model".

For more information on the selected prototypes, a complete list of all submitted prototypes, information on the panel and videos from the tutoring sessions, you can visit Design Challenge Spring 2009 landing page.

"The Mozilla Labs Design Challenge is a series of events to encourage innovation, and experimentation in user interface design for the Web. Our aim is to provoke thought, facilitate discussion, and inspire future design directions for Firefox, the Mozilla project, and the Web as a whole."

There were more than 40 students actively participated and 18 prototypes submitted for the challenge. The task was to propose solutions to the question "What would a browser look like if the Web was all there was? No windows, no unnecessary trappings. Just the Web."

About my prototype

You can view my prototype or read more about the ideas behind the prototype. If you want to interact with the prototype, you can find a map of hover zones or a map of click zones.

All the mockups and the prototype are made in W3C standard SVG (Scalable Vector Graphics) format using Inkscape tool. Just like Firefox, Inkscape is a free and open source vector graphics editor application, which is fully compliant with the XML, SVG, and CSS standards.

The nice thing about the SVG is that the containing images and their behaviors are defined in XML text files. This means that all my prototype's code is just in one place, so you can search for certain elements to see how they are made, or you can just take the whole code and modify it.

All the work done for Mozilla is licensed under a Creative Commons Attribution 3.0 United States License. So if someone else likes my idea, they can take it further.

In our tutoring sessions we were encourage to make our prototype as a Firefox extension. If you want to learn how you can make a Firefox extension and you don't know were to start, you can take a look at the Development Focused videos that were held during our tutoring & mentoring phase.

If I would have decided to make my prototype as an extension I should have stripped Firefox of all its chrome and put pictures in it. Another option was to make it using pictures + HTML + JavaScript, or Flash (proprietary tool).

Because SVG already had everything I need and because of the large number of objects in my prototype, especially in the isometric view, I decided I'm going to try to work directly on the SVG DOM. One big ace is that Firefox has SVG support included and this was a Mozilla Challenge (if you have IE you need Adobe SVG Viewer). All I needed to do was to edit the code generated with Inkscape and have JavaScript integrated.

The final prototype uses SVG with JavaScript + CSS + HTML's iframe element (so I can load web pages when tabs are clicked). Because I needed to make all sorts of modifications (after I added some JS) to the objects I encountered some problems.

You need to search for the JavaScript part in the code (is somewhere in the middle), cause it didn't work to put the CSS/JS in another file and import it like I would do in a normal HTML file (maybe I was doing something wrong). So I had to let them together, in the same source and if you modify something with Inkscape it gets appended in the beginning of the file. It's a good thing that it doesn't overwrite the foreign code you add.

I would not recommend this approach (overwriting the SVG structure) on future prototypes, without having a special editor to do it. It's very nice that you have all the skeleton and you just need to add the interaction, but it's very hard/slow to find the desired code without a proper editor that knows to work with SVG + JS + CSS + HTML in the same place. Problems:

• could not put the CSS and JS external;


• Inkscape appends recent modification in the beginning of the file, so your CSS and JS keep going down and you need to search for it. I also tried to give objects ID's from original Firefox interface (taken with DOM Inspector). The actual Firefox implementation uses different notation styles (delimiter-separated or CamelCase) for the containing elements, because of all the developers that worked on it. This means I had a piece of paper with the ID's so I don't forget them and know what to search for;


• if you group some elements in Inkscape and give them an ID, and then you ungroup, the ID is lost and needs to be set again;


• if you modify from the code some style properties or add some JS events - and then you also modify the element from Inkscape, your changes will be overwritten with Inkscape's initial representation (but this is normal).

So if you even consider this approach for your prototype, apply the JS only when you know you don't have any SVG modifications to make. Otherwise it's more complicated and time wasting.

The good thing is that I didn't need to export them as images and reassemble them again. I had the power of DOM, CSS (there are special properties like fill, stroke, opacity etc) and JS in one place.

The great thing about the final prototype is that it has over 17k lines of code (most of them generated automatically) and it's created only using open technologies. Also I had a lot of fun doing it :)

About the experience

We needed to submit a mockup from January 27 until March 1st, 2009. This is the part were I felt the competition and the pressure. There were a lot of submissions, a lot of comments and ideas with a great potential. So I was very happy to find out that I was being accepted in next phase of the challenge. I always dreamed I could be a part of Mozilla's community.

The first thing I could observe was the diversity. Everyone had a brilliant idea, everyone had a different background. There were people from Argentina, Australia, Brazil, Bulgaria, France, Germany, India, Morocco, Poland, Romania (me), UK and many USA students. Even more, there were lots of students that were studying Interaction Design or Human-Computer Interaction and were more familiar with concepts like mockups, wireframes, etc.

The person that put the Design Challenge together is Pascal Finette. He was always there answering our e-mails and questions, introducing people in their sessions, moderate the Q&As, giving the news, making an extra feedback session and requesting feedback. He was very attentive to every participant and gave a sense of order in the things needed to be done.

We had a mentoring and tutoring phase that contained 11 tutoring sessions, over a 3-week period. You can also view and download the videos presented.

Session Track 1 - Design:

• Design Fundamentals - Alex Faaborg


• Interaction Seduction - Aza Raskin


• Designing for Mobile - Madhava Enros


• Open Source Design, Mozilla and You - John Slater


• Design or Die - Innovation, UCD, Web and Life - Wei Zhou

Session Track 2 - Development:

• Extension Bootcamp: Zero to Hello World! in 45 Minutes - Myk Melez


• Stupid/Awesome Extension Development Hacks - Jono DiCarlo


• Making Prototypes with Canvas - Jono DiCarlo


• Making Prototypes with jQuery - Atul Varma


• Engineering Prototypes - Atul Varma


• Ship It (or: Coffee is for Closers) - Mike Beltzner

I attended all the sessions and the thing I liked the most was the atmosphere Mozillians created. The Mozilla guys are great, very communicative, always looking to help and putting their heart in what they do. You can sense the passion in their voice, the desire to share their knowledge and they all have a perfect American accent, even Pascal, who is German :p

Some people had to wake up at 5 a.m to attend the tutorial sessions, so for some was early in the morning and for others, like me, was after a hard day, in the evening/night. But I was very eager to attend every session and on 3 occasions I brought friends over to share the experience. Everyone took the challenge very seriously, tried to address as many questions and to fully benefit from this opportunity.

We also had the possibility to discuss with other participants about design, sessions and to give each other feedback on the mailing list. You could always ask questions to the #labs channel or send an e-mail if you had any problem (thanks Atul).

Thanks to Pascal there were some slots in the Mozilla Labs Night or Mozilla Design Lunch time to receive some direct feedback on our mockups/prototypes. I want to thank Jono for giving me great feedback and helped me be less nervous when I was presenting my idea to the Labs people.

After the deadline for submitting our prototypes we had to wait for the judging period.

After the results were announced, we received feedback on our prototypes from the panelists who judged the submissions. The feedback was very detailed, helpful and contained a very experienced / objective opinion. We also got to see how our prototype scores (on a 1 to 10 scale) for each of the four categories (Innovation, Execution, Interaction and Producible).

The Design Challenge was an awesome opportunity to learn more about open-source design, development and innovation. I got a better understanding on how design processes work and how people from different cultures around the world can collaborate and make great things. I also got to indirectly know some of the most amazing people from Mozilla like Pascal Finette, Jane Finette, Jono DiCarlo, Alex Faaborg, Aza Raskin, Atul Varma, John Slater, Myk Melez, Sean Martell, Mike Beltzner, Madhava Enros or Wei Zhou. Mozilla showed again the open manner it does things, always bringing the community in first place and trying to make a difference in the development industry.

Design Challenge Summer 2009

Mozilla announced the next Design Challenge (this time in collaboration with IxDA and Johnny Holland):

The current task is: “Reinventing Tabs in the Browser - How can we create, navigate and manage multiple web sites within the same browser instance?”

The submission deadline for mockups & videos is June 21st, 2009 and you should definitely try this experience on your own.

Mozilla's LizardFeeder Proposal (2) - Win Lose Charts

These days I was thinking more about Mozilla's LizardFeeder and was inspired by Alfonso Bozzelli's proposal.

I always liked Edward Tufte's sparklines and all the variations: small columns charts, line charts, point chart, area chart, etc. But the real nice ones are the win-lose charts (in my opinion).

So I separated the categories in:
- orange: bugs, code, add-ons;
- blue: bookmarks, wiki, blogs, microblogs, discussions;
- green: events, photos;

This is an example of variation over time of the feed entries:
You will interpret all positive numbers (deducted from the average) as a win, and zeroes and all negative numbers will be interpreted as a loss. The grey bars, are negative entries from the average, this means that in that period of time were less posting entries that the domain average.

In the right, with black, is the selected time frame (in this example - today - last day in chart, but you can select months, years, etc). The number from right signifies the number of entries for that category. You can see from the chart if it was a good day or a bad one.

The win-lose charts can be integrated in my previous proposal.
Thanks for reading. Hope you like it.

Mozilla's Design Challenge Spring 2009 Proposal

Mozilla Lab’s Concept Series launched an open call for the community with the aim to provoke thought, facilitate discussion, and inspire future design directions for Firefox, the Mozilla project, and the Web as a whole. The question for the challenge is: “What would a browser look like if the Web was all there was? No windows, no unnecessary trappings. Just the Web.”

My proposal ("Collaborative research on a virtual desk") is divided in two parts: chromeless elements and collaborative multitasking.

Collaborative Multitasking

The hardest thing about designing for Firefox is that the solutions have to meet the needs of everyone, and everyone is different. The best thing is to focus on one thing rather than the whole experience, so I want to be able to use my browser as my virtual desk.

As a student I need to work during a day or a week on multiple subjects (testing, programming, designing, etc), so I must undertake several tasks in the browser at a time, each of which in turn may require performing several dependent sub-tasks. In average I have more than 50 tabs opened for a given task.

My concept of tabs and bookmarks are some kind similar. I have two types of bookmarks that I manage:

• Delicious bookmarks - where I collect pages that I like and need for a longer period of time (actually I don't intend to erase them - they are my vault of precious things I found);


• Firefox bookmarks - where I group the tabs in folders, depending on what topic I need them (testing, programming, etc). I use Foxmarks to sync between school and home. After I finished the homework or research I completely delete all the tabs (lightweight bookmarks) related to the topic.

Tabs are also separated in :

• tabs that I need for a certain subject, and I bookmark in Firefox;


• tabs in that I just browse, and that have a very short life cycle.

I think that we need to make a separation between the two types of tabs. I'm especially interested in my Firefox bookmarks (tabs) because they get my work done, so I introduce the concept of organizing tabs in working spaces. A working space lets you save tabs in task based contexts.

So I would like to go in the collaborative direction, having friends sharing experiences and being able to get your friends insight on research and work. Mozilla tried something in that direction with The Coop and with Weave, in the collaborative bookmarking use case.

I would like something like this: I work on my testing project with my friend Raluca. Each one has a different path flow to make searches and get things done (R for Raluca's flow, C's for my flow).

Tree Style Tab is a great add-on that does something similar and lets you see your flow in a tree style. This helps you see the relation between pages, having connectors between tabs that have an opening relationship. I colored siblings with the same colors, going in a gradient from root to leaves (the coloring of tabs is already done with Chromatabs).

If I could use and see my friend's shared flow on the same research I could find out (through recommendation) about TestNG (R1.1.2) and I could share with Raluca the Cobertura (C1.1.1) tool, having as common point the JUnit page (C1.2 = R1.1.1.1). Seeing this flows as sets (or multisets), user could do unions (we divide the research in parts R and C, I have to research C, but I need the whole flow (R+C) to study), intersections (have we reached a common result?), etc.

Having access to the user's flow, you can find relevant information like user habits (using the tab life cycle, bounce rate, time spent, etc), preferences and also I could know how the user solves problems from a specific topic (I can browse randomly when looking at design inspiration, but I'm very accurate when it comes on programming topic). This flow would be useful for ubiquity recommendations on future actions that need to be done in a certain step. Another thing that would be interesting would be version control on collaborative sessions.

So I start playing with trees representations. You can see two examples that show the same trees represented with different visualizations. The numbers associated with the nodes represent the number of children the node has.

In games, you enjoy the experience of the game and continue your flow without interruption (full view), but when you get lost you can access a map or see what quest you're on. This is done using multiple views of the content you're working on, especially a general view of activity. Humans are better at remembering through visual maps than by scanning linear lists of tabs, so I choose the tab's isometric view for the bird's eye sense of control and the compression of used space.

Chromeless Elements

The browser window is separated in three parts:

1. address bar;
2. menu;
3. tabs.

that auto-hide when not needed, but always present in a new blank tab (so that the user can learn their position). The parts are overlaid on the web page, so no resizing is needed when auto-hide is done.

1. The address bar

You have the buttons: "back", "stop", "go to", "close current tab", "add new tab". The browser should have multiple ways to access the functionality (from buttons, from the menu, key shortcuts) depending on how advanced the user is. You can have different functionalities on double clicks or single clicks (example "back" button: 1 click = go one page back; 2 clicks = navigation history).

The address bar integrates the existing awesome bar + ubiquity + stuff like: "history" (H), "bookmarks" (B), "find" (F), the search engine - this way you integrate all the components in one (also you don't need to have separated search for bookmarks or history, you integrate them in the awesome bar). The awesome bar is gonna be the heart of the browser, the command center for all your actions.

The desired direction is that the user should be able to give commands in natural language from the awesome bar. For this to happen, the first step is to replace the URL (formal representation) in the address bar with the title (informal representation of page), especially because we don't have a titlebar in a chromeless environment. Having this in mind, the awesome bar should integrate searches on page titles that have not been visited before (example "intitle:" just like Google's "inurl:" ). The beginner user don't need to remember the exact address for his favorite web site. The advanced user still has access to it (hover - show URL, copy, edit).

2. Firefox Menu

The menu is in the right corner, with a gray tone so it doesn't distract the user. When you hover it it becomes bigger and colorful. It has the main functionalities that have associated an icon (you can select from the Preferences if you want your menu to be "icon+text" or just "icon"). It can have more actions presented (like Help, etc).

All the other actions are contextual:

• page: save as, print, zoom, etc;
• text selected: copy, paste, etc; (also the awesome bar is gonna suggest (arrow down) actions like translate, highlight, etc).

I've noticed that people are trying to integrate pie-menus for the contextual actions. Instead of arranging them in a circle you can put it like a dial keypad with icons instead of numbers.

You close Firefox by selecting the most upper right X (visible when hovering the logo, or key shortcut).

3. Tabs

In the down-left corner you have the "Space selector" that enhances context switching. A working space lets you save tabs in task based contexts. The spaces that I propose for this example are Programming, Design, Testing and Mozilla, which contains tabs regarding the specific topic. If the folder icons is gray it means you don't work in a current space.

The spaces work with sessions. In the current session the browser saves the opened tabs to the selected space. If you gonna receive funny pictures from messenger friends, the life cycle of the tab is gonna be very short (you gonna close it after you view it). This way you can replace the "one-click" bookmark with "auto-bookmark" per session. If you don't want any tab to be saved you can work outside spaces. Also you could add Personas to personalize spaces (to get in the work or hobby mood).

Double clicking the folder icon will activate the isometric (perspective) view. The isometric view could show me different aspects (multiple views - selecting one will reorganize the content) of my tabs, differentiated by relevance or grouped in meaningful clusters like:

• "Flow view" that shows the user's path to the pages (this is the only view I made mockups for - see below);
• "Personalized view" where I could be able to arrange my tabs how I want (just like you can do on your desktop). This could be done by drag&drop.
• "Domain view" that has a domain separation (all tabs from mozilla.org domain) of tabs (this is already done by ColorfulTabs).
• "Semantical view" where tabs are grouped in semantically related groups (this is definitely a future aspect, related to the adoption of semantic web).
• "History view" where you can see the browsing history of the tabs grouped by days, months (time perspective) etc. This way you combine history + bookmarks in the same view.
• "Social view" where you can see what tabs your friends are sharing with you. You could also group friends in groups. The groups could be also semantical determinated by XFN.

Using your mouse you can zoom in or out through the spaces, just like in a game or in Google Maps.

You need the colorful tabs representation to better identify the relationship between tags, but once identified you can switch to the "Preview Mode" that shows thumbnails of pages (with the border in the color of the selected view). Hovering on one element you can visualize more information about it, like thumbnail, page title, number of children. If the selected page is a root, you gonna see highlighted (with gray shadow) the domain of children.

Trying to have an authentic virtual desk, I would like to see in my browser not only web pages, but pdfs, images, videos that are related to the space I'm working in (towards the Web OS). You can bookmark the page or see other spaces that contain the same page.

Once you select a space or subspace the tabs are gonna be colored according to the current view you have (flow, domain, semantical, etc). You have the current page highlighted and you can see the related tabs (on flow, semantical, domain, etc). You could also highlight tabs that haven’t been looked at yet.

Viewing a page from the Mozilla space is gonna look like this:

Another nice aspect would be to see statistics about your space activity. If we consider that deleting all tabs means I finished my research, we need to monitor the variables:

• red = number of deleted tabs;
• gray = number of tabs from previous session that are still in the space;
• space color = number of recently added pages.

Having this number I can calculate what percentage of the space is finished.

I could continue drawing mockups on different aspects of this concept but please let me know what you think. I hope you like it.

Mozilla's LizardFeeder Proposal

The LizardFeeder pulls together and archives activity streams from a wide variety of Mozilla community sources. The goal of the LizardFeeder is to create a visual representation of the Mozilla community using data feeds from sources like Bugzilla, blog posts, Twitter tweets, code check-ins and more.

Mozilla launched an open call for the community to generate new concepts and prototypes for the LizardFeeder. The aim is to create a compelling visual metaphor that effectively depicts the dynamic nature and breadth of activity happening right now across planet Mozilla.

I was inspired by a Stamen concept called “authors vs entries”, which sorts the data by linking individuals with the actions they’ve taken (bug fixes, blog posts, etc).

The current look of LizardFeeder

My Proposal

Options for the Lizard

The original Lizard is dividing the information in categories like:

• wiki
• code
• blogs
• bugs
• discussions
• microblogging
• bookmarks
• addons
• events
  

For every category there is a color associated, like blue, black, orange, etc. Colors are good for giving contrast and visual organization, but is hard to learn the color signification. The original Lizard was grouping the feed entries with both colors and words (ex. bugs with a red background).

Another solution is to use icons (like a block for code, a calendar for events, etc). This way you don't need to memorize the color signification and you can figure out from the icon what kind of entry it is. Still, icons are not very good at giving enough contrast in the entries list (depending on the icon type), but contrast is not mandatory for the Lizard, because you can filter very easy the entries (selecting only bugs and code, etc). The icons used are Silk icons.

The checkboxes can be replaced with on/off selectors that can be activated to filter the results.

The options from the right side are used by the Lizard to narrow the results starting from a particular point in time. But the general Lizard function is to give information about Mozilla activity that happens "right now".

Entries View

This is an example of how the entries list would look like:

Would be nice to be able to click on the author name and receive only the entries that he posted. Clicking on the icon could set the filter to show only entries belonging to the icon's category. The timestamps show posting time in minutes (for the recent entries) and in date/hour format.

Contributors

One of goals of the Lizard could be "celebrating Mozilla's contribuitors". The contributors can be taken from the data sources Lizard inspects (see Planet Mozilla subscriptions for a list of contributors).

Using this panel you can see contributors statistical activity over the current day (using the time selectors from the options the date range can be extended). Because of the aligning you can browse much faster to see who is taking care of the code&bugs or who is a marketer. Because of space issues, this panel should hide/show on request (just like the options panel).

Just like the data categories (code, bugs, blogs), the contributors can be divided in categories (developers, designers, etc) that could be filtered out (from the options). There should be a category for the Mozilla's blogs activity (how many posts, discussions, photos or events were posted) or Mozilla's code repository (you could see how many bugs were resolved during the day). The more filter options you give, the more the information clutter is reduced. You could also provide a search feature.

Using the tag cloud you can see the general statistic for the categories in that given day (on hover show the total number). The tag cloud entries could be used too for setting the filter.

Header Variation

This a header variation that integrates the category filter near the contributors activity (better icon signification readability).

Please tell me what you think about the proposal and if you like it.

XWiki's XWatch Proposal

The proposal was made for the "XWiki Watch: UI & Ergonomics Improvements" project for XWiki, as part of the Google Summer of Code 2008 open-source programme.

XWiki Watch (XWatch) is XWiki's collaborative RSS reader. It is designed to provide teams with a competitive intelligence tool they can use together in real-time.It allows organizations to find, analyze and distribute relevant information.

XWatch makes it easier to keep up with your ever-expanding reading list of content from across the web. You add RSS feeds from sources you want to watch to the reader. You 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.

XWatch Mindmap

The look of the current implementation

Proposal: New User Interface

XWatch Purposes

• Collect and retrieve information on the Web
• Simplify the reading experience
• Organize the information
• Enrich it with tags and comments
• Analyze and filter it to best suit your needs
• Deliver only what is relevant

Components

• Feeds Panel
  • Retrieve RSS Feeds
  • Organize them in groups
  • Easy access to common used groups


• Articles Panel
  • Read through articles in real time
  • Favourite, tag or comment on important articles
  • Delete unwanted articles
  • Export articles in RSS, HTML, PDF format, or e-mail as a review


• Filters Panel
  • Run a Text Analysis on content
  • Search for keywords
  • Filter on date, tag or article type

Feeds Zone

With XWatch you can read the latest articles from your favourite feeds all in one place.These feeds can be organize in groups to manage similar content.

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.

The number of new articles are presented between brackets.

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

Add Group, Add Feed, Drag & Drop (Move|Copy feed to group)

New groups and feeds can be created easily (from the menu) with:

• One Step Add Group
• One Step Add Feed (+ advanced steps)

Drag & Drop is used for moving feed from one group to another but also to organize the importance of the groups (maybe you want GroupN to be the first one in tree).Because there is possible multiple groups selection, you can move one feed to another with simple drag&drop or "copy" the feed to another group (this is made using the CTRL key) - this means the feed is added to another group.

Feed Advanced Properties - Entering a Name, Multiple Group Selection, Using a Search Engine

You can add feeds into groups:

• during the feed's adding process, within the properties
• editing a feed's properties
• select a group and press "Add Feed" button
• with drag&drop

You can also have feeds outside groups (this is an implication of using the One Step Add Feed - where you mention only the URL and not other properties).

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

Selected Group, Hovered Group, Edit Group Action, Delete Group Action

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.

Selected Feed, Hovered Feed, Edit Feed Action, Delete Feed Action

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)

Articles Zone

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.

The articles are visually represented by colors (grey - read, blue - active, black - new). The pagination helps browsing by page and shows the number of total articles. You can sort the articles by "Most Recent" (date), "Source" (group, feed), "Alphabetical" (article name) or "Reverse Sort".

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.

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

Summaries View, Headlines View, Deleting an article

Deleting an article won't ask for confirmation. The deleted articles can be retrieve from the "Deleted" group in the Feeds Zone.

Full View with comments management, Adding | Deleting a Tag, Go to Original Article

Articles can be favourite or deleted depending on their interest. You can comment directly under the content and add tags to provide a quick overview of the article.

Comments enrich the information and help team members make decisions about the article's content. 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.

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.

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.

Filters Zone

Filter Zone, Text Analysis, Multiple Type filter selection, Archive option

Filters can be applied to feeds in order to narrow results by specific information.Filters provide you quick access to relevant data.

You can filter articles by keyword, type, date or tag.

• 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.
• 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).
• The Date option has commonly used date periods (Today, This Week, This Month) or you can select a specific period using the archive feature.
• The Tag Cloud option reflects the status of tags frequency and allows simple or multiple filters selection.

You can reset all filters before starting a new filtering process or you can save the current filters for later reuse. This way you automate and reuse an usual search or a combination of filters. The saved filters are available in their own folder. When 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".

Text analysis posts the words that appear most frequently in the displayed articles, providing a fast outline of occurring content. You can select the language of the content to analyse (different words have less importance in different languages).

Conclusions

The proposal is concentrated on interaction, not necessarily on design. Different colour schemes can be applied.

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.

entia non sunt multiplicanda praeter necessitatem