For French readers / pour les lecteurs français : A partir d’aujourd’hui, certains de mes articles seront en langue anglaise. Ils ne seront pas forcément traduits en anglais. Je vais créer un flux par langues pour ceux qui souhaitent lire uniquement les billets en français.
If you are reading this post, you have probably already heard/installed/used Mishra Reader, a new Google Reader RSS reader client for Windows. In the last weeks, we have already published several versions, and gathered few great interests & feedbacks:
- Relay on tech news websites (like LifeHacker),
- More than 13000 visits on our website,
- More than 5000 installs
- More than 50 features requests
- Few screens mockups from users (just wow),
- Some people taking inspiration from us for a concept (just wow #2)
In this post, I will discuss about this project, the origin, and our work around the new UX and design proposal for the future versions.
The background
MishraReader has started as a one-person initiative, David Catuhe (a Microsoftee). The initial credo for this app was:
A Google reader client developed using WPF with focus on ergonomics and smooth animations.
The actual design, explained on a previous blog post, was created by a Non-Designer coder, taking inspiration from the Metro design language.
After the first public version, David released the project as an open source software on Codeplex platform, and started build a team around this project to continue the development.
During the last weeks, the team has been split in two, to get two things done:
- Publish the first Beta version,
- Work on the UX.
That’s how we started to work on the UX of Mishra.
Starting point
The UX described here has been a team work from two people :
- Olivier Courtois (on @ocourtois and on his blog), Consultant and UX Lead at Bewise,
- Christopher Maneu (yes, me :), on @cmaneu and here), Project manager and MVP at Bewise too.
As often, our starting point was not a blank sheet – as a first public version has already been released – and in our case, few things were not so easy to handle.
First, the existing version. apart from the brand new apps, you always work with an existing base that you have to take in account. Users have their habits, and drop-everything-rebuild-from-scratch is generally not a good approach. But we have a chance here : our base is very narrowed, and we have only weeks of history. It’s not too late to make a great leap.
Second, we are designing for an open-source project. All the team is working on free time, and with a very limited process : a team member take a work item/feature request, implement it, and put it on the code for the next version. Of course, we do have some discussions about which items we have to develop or not, how a specific feature should work in some case. But, we are all very autonomous.
The UX design process occurs in parallel with the development of the new functionalities. We have to reconsider our design during all the process with these new functionalities and the broad feedback we got from first-time users (some of them send us Photoshop mockups with their ideas). This was my first contact with a “semi-Participative Design process”.
Last but not least, we really want to make a giant difference between Mishra Reader and all the others RSS readers available on Windows.
Our proposal
Tired of waiting ? This is our design proposal for Mishra Reader Beta 2 ! Oh wait, just a few security instructions before departure. This is a design work in progess. I’ll explain what points are still in (heavy) work. Moreover, we will starting implementing this design starting…right now. We will keep you updated when a first version is ready for testing ;)
Let’s launch Mishra. As you can see, a few things have changed :
We have redefined the information architecture, the ux and the design of the application. That’s a lot of things to discuss. At the first sight, we can already note few interesting things.
The default Windows 7 window chrome has been removed and we have redesigned the header. (this was one of the most asked “feature”). With the new design, we reduced by more than 60% the space used by the header. Nothing paranormal here, but this simple adjustment have a quite big impact.
The contents of the header is slightly different. Exit the mishra reader log, the about button is now a part of the settings (we will see the settings in details later), and a new category have been added : shared items.
The main view
Let’s go back to the this main view. As you can see, we have changed the way feeds/posts/post content is presented. In the actual version, the way you navigate between categories, feeds and post content is not natural. You first get a Category/feed + post preview view and, when you click on a post, you switch to a feed + post content.
In the new design, we have decided to bring back the content on stage. you will always get the most of the screen for the content, while it’s still easy to switch to another category/feed/post. The screen is divided in two columns : the list of posts and the content.
The list of posts
The list of posts shows you the feeds by categories. It also give you some actions :
- Add a feed to a category,
- Modify a feed (name, category)
- Delete a feed from a category
This is a good start, but we wand few more actions that we consider as mandatory.
With the new design, you have still access all these actions. Moreover, you can mark as read all posts in one feed/folder…and you just discover another action : show by folder (category) or show by feed.
MishraReader beta 1 provides an auto-refresh feature. With this UI, you can refresh at anytime the list of posts.
Note on autorefresh : Google has created a “Rss push protocol” called pubsubhubbub. This is a good way to get realtime updates without annoying the user. We may keep in mind for futures versions. We are a Google reader client, not a RSS Reader :).
In a future post, I’ll jump in details about this list (Jump….:) )
The post content
In the beta 1, we have used NReadability component to remove clutter from HTML pages before display them. Some users have send feedback about rendering issues with this component. We are currently investigating them, but we have kept the principle for the next design.
The new post viewer is pretty the same than the older. It’s more integrated with the design, and the actions have been moved on a “toolbar” on the right side. We have now 4 actions : Mark as read, Mark as starred/unstarred, Share (twitter, facebook, …), Keep for me (instapaper, readitlater, …).
Share the content
Sharing must be quick and easy. We have designed a three step workflow for sharing/keeping action (but we are still unsure about the necessity of the first step). Start by choosing on which network you want to share the post.
Then, you can edit the text and link, add another social network (you can share on Twitter and facebook in one time) and then click to Share.
When we are sending the post on the selected social networks, you can go back to reading ready to share another post.
A lot more to cover
We have a lot more areas to show you : settings, animations, the metro design language applied to desktop applications, etc… We will cover them in the next posts.
Give us your feedback !
We really want to hear from you ! If you want to give us your feed back, write a comment on this blog or, a better way :) – create an issue on the codeplex project or drop us a line on the discussion.