Ayende @ Rahien

Refunds available at head office

How should the RavenDB UI look like? (There is a prize!)

Update: The offer is now closed.

Currently, RavenDB comes with a builtin user interface which is HTML/JS based. The UI is nice, but it has limitations. Getting real applications on to of HTML/JS requires a lot of work and expertise, and while I understand how it is done, I find it painful to do so. Another problem is that the UI is already becoming cluttered, and we can’t really offer high end UX with the type of options that we have in a web interface without a ridiculously high investment in time and effort. But I still want the no-deploy option, so the next UI for RavenDB is going to be done in Silverlight. For example, giving syntax highlighting for editing index definitions would be trivial in Silverlight and very hard in HTML/JS.

Hibernating Rhinos (my company) is going to sponsor professional UI developed for RavenDB using Silverlight. Think about it like Management Studio. The work is going to be done in Silverlight, with the idea that you could gain all the usual benefits of being able to host your own UI. I was talking today with a few people about that, and everyone agrees that the actual process of implementing this is fairly simple.

The problem is what sort of UI we should do. One option, which we will not take, is simply copy the current web UI. But that is something that I strongly oppose. I think that the web UI is nice, but that we can do much better.

One of the things that bothers me is that I do not want to do is to give your a grid at any point in the UI. RavenDB is all about documents, and I want to UI to direct you toward thinking in documents.

I have all sort of crazy ideas about representing documents as a series of documents in an infinite space. Something like this:

image

And then zoom on a particular document to be able to work on it effectively, literally paging between different documents with page turns, etc.

I am not sure if I am going with the right direction or if I am just doing the equivalent of build an interface made of nothing by <blink/> tags.

So, here is how it goes. I would really like to get ideas about how to do a good UI for RavenDB. But I don’t think that just talking about this would work. I would really like to see a prototype that I can look at. Doesn’t have to be actually workable, I would gladly look at hand drawn pictures. It doesn’t even have to look good, because I am more interested in seeing UX rather than UI, and how we can focus users toward document oriented thinking.

To facilitate that, I am going to offer a prize. Your choice of the a profiler license or RavenDB license if you send me your ideas about how to build such a UI. I am going to send a free license to either the profiler or RavenDB regardless if I‘ll choose your suggestion or not (as long as the suggestion itself is serious), this isn’t just for the winner.

Comments

Alex Norcliffe
10/11/2010 04:08 PM by
Alex Norcliffe

Interesting idea. I totally get the principle behind avoiding grids, but I disagree they should be banned totally: thinking in terms of documents should not preclude being able to deal with data en masse. It's a poor UX to have to flick through every page in a book to add the same note, for example, and this is where computers are supposed to come in...

Ayende Rahien
10/11/2010 04:11 PM by
Ayende Rahien

Alex,

Let me rephrase things:

  • Documents should not be shown in grids.

  • Projections from documents can be shown in grids.

Ayende Rahien
10/11/2010 04:12 PM by
Ayende Rahien

Although I am not sure that I understand what you mean by saying that you want to add a note to every page.

a) that never happens.

b) we are talking about how the UI for the admin will look like, not how users interact with systems using RavenDB

Alex Norcliffe
10/11/2010 04:18 PM by
Alex Norcliffe

@Ayende Ah OK. In terms of UX I was imagining that you were banning the use of a grid to represent a list of documents, in order to be able to act on them all in a batch in your UX. So you're not banning this?

Ayende Rahien
10/11/2010 04:22 PM by
Ayende Rahien

Adrian,

That is certainly a good example. I can see how we can project from that.

We already have the notion of collections in raven, which can be used as the high level stuff.

So you would have database -> collection -> document...

Thanks for the sample, it will give me something to think about.

Ayende Rahien
10/11/2010 04:30 PM by
Ayende Rahien

Alex,

I am not sure what you mean by that.

But to answer your question, the only batch operation allowed would be delete.

Howard Dierking
10/11/2010 05:00 PM by
Howard Dierking

On the MSDN Magazine collection, I'll be posting all of that code to bitbucket shortly (and finishing the blog series) - just need to externalize some Azure auth information :)

_howard

Demis Bellot
10/11/2010 05:05 PM by
Demis Bellot

You may be able to get some ideas from my attempt at an management Interface with the Redis Admin UI here:

www.servicestack.net/RedisAdminUI/AjaxClient/

I only spent a couple of weeks developing it though it takes advantage of the tree and autocomplete widgets in Google's Closure Library which I think makes it pretty functional, fast and easy to use. The root tree nodes lets you visualize the entire dataset, at the same time being able to drill down further, letting you view JSON data in a tabular and form data views where appropriate.

I am also interested to hear what UX ideas that people come up with for RavenDB's NoSQL Admin UI :)

Ayende Rahien
10/11/2010 05:12 PM by
Ayende Rahien

Howard,

I think that this is probably the most interesting suggestion so far.

Looking forward to seeing how it works from a code perspective.

Ayende Rahien
10/11/2010 05:14 PM by
Ayende Rahien

Demis,

I really don't want a tabular view.

The UI looks efficient, but it is a read only model. I need to allow edits, and I need to allow what is effectively browsing.

Demis Bellot
10/11/2010 05:33 PM by
Demis Bellot

@ayende

The tabular view is read-only but is only the first high-level view for a collection of entities (aka index in RavenDB).

From there you can view and filter a large collection of like documents/entities at in a single page which is familiar to RDBMS users.

You can still drill down further and view a single entity/document in detail and edit/delete the contents. It could do with a friendlier edit screen since at the moment it lets you edit the raw JSON payload, but you get the idea.

I think the problem with NoSQL entities/documents is that it is pretty free-form and structureless. So in order to support all documents generically, you might need to do a recursive view payload view like jQuery's $.dump().

Anyway I know that its a pretty raw interface (and I should probably devote some more UX love to it when I get the time), but I find it pretty useful in its current form as it lets me visualize and manage all my entities in Redis pretty quickly.

Frank Quednau
10/11/2010 07:22 PM by
Frank Quednau

What's the deadline?

Is there any online installation of the current interface to have a look at the required features?

Ayende Rahien
10/11/2010 07:37 PM by
Ayende Rahien

Frank,

Tomorrow.

And you can just download RavenDB, start it and visit localhost:8080

Wyatt Barnett
10/11/2010 08:05 PM by
Wyatt Barnett

Comedy Option: make it look just like Sql Server Management Studio. Bonus points if you can make it a plugin to said studio.

That will make the hearts and minds of server admins stage easy . . .

Ayende Rahien
10/11/2010 08:57 PM by
Ayende Rahien

I am familiar with the concept.

I don't really see the point for what I need here.

Adam
10/11/2010 09:48 PM by
Adam

I would go completely crazy with the UI, in order to differentiate from anything that is related to relational data.

I'd envision being able to switch between different views of any set of documents (which would be a result of a query):

  1. A view similar to Google Picasa "Timeline" (I'm sending a "screenshot" in an email)

  2. A "Library" view - something like Robby Ingebretsen's books.show ( http://thinkpixellab.com/casestudy/books-show/)

  3. ...

In addition to those fancy views, a query builder which would allow you to filter the documents that you are viewing (i.e. instead of typing a query, you could just select "field A between value x and y", etc.)

Hope it makes sense :)

configurator
10/11/2010 10:03 PM by
configurator

When you say "Hibernating Rhinos is going to sponsor a professional UI", do you mean you're going to do it, or to outsource it?

Ayende Rahien
10/11/2010 10:58 PM by
Ayende Rahien

Configurator,

I am the last guy that you want to see doing any UI. Hiberanting Rhinos is going to pay to get it done.

Ayende Rahien
10/11/2010 10:59 PM by
Ayende Rahien

Adam,

I like the first suggest, but it really is more than UI trick. I am looking more in terms of UX

Ishaan
10/12/2010 12:49 AM by
Ishaan

Hi Ayende,

Take a look at MongoVUE - http://blog.mongovue.com. It renders documents in 3 separate views:

a) A hierarchical tree view

b) a table view (for 2D documents)

c) text view

Ishaan

lexx
10/12/2010 07:49 AM by
lexx

Ayende,

U can see plenty of examples in the industry when something with a good UI failed and something with simple one became a number one app.

What I want to say is :

  1. Silverlight was born dead. And I really doubt that Raven DB would benefit if u go this way. What u need is to work on the usability and listen to users.

  2. I think 3 years ago u would just start an open source project aiming to build this UI but now... Oh, man, I am afraid soon we will see only marketing posts in this blog.

One more thing to emphasize - nobody wants your free licenses (for an open source project - are u kidding ???), good job costs real money and u know it yourself. )

David
10/12/2010 08:36 AM by
David

I like the notation used on the Raven Db site, where you show the JSON documents.

it was simple to understand, by the looks of the monovue its similar to the treeview.

JB
10/12/2010 08:56 AM by
JB

@lexx

I want one of the free licenses...

Also - as Ayende has noted before: this is /his/ blog. He doesn't have to write about what /you/ want him to write about.

I don't see a problem with it - I've learned so much from so many of his blog posts (even ones explaining the non-free products that his company produces) and he's contributed so much of his time to real open source projects that we all benefit from that I think he's quite entitled to a little self promotion every now and then.

Ayende Rahien
10/12/2010 11:31 AM by
Ayende Rahien

Lexx,

1) I disagree on your assessment of SL. And I think that I am certainly working on usability. As for listening to users...

2) I am pretty sure that reading this blog is voluntary.

Ayende Rahien
10/12/2010 11:32 AM by
Ayende Rahien

David,

Yes, the actual document view is going to be showing you the JSON / JSON Like view.

Jakub
10/12/2010 03:22 PM by
Jakub

Could we please not do it in Silverlight? That would exclude quite popular devices/browsers:

No Silverlight on Chrome for Mac, no Silverlight on iOS, no silverlight for Android... I can't believe in days of projects like HIGHLIGHT.JS ( http://softwaremaniacs.org/soft/highlight/en/ ) syntax highlighting would be that big of an issue...

Eric
10/12/2010 03:25 PM by
Eric

@lexx,

You are talking out of your ass, Ayende is trying to make a living with his talents and to some people it's not good enough to work for someone else for the rest of their lives. Oh and btw, you work for someone else because, that "someone else" is doing exactly what Ayende is doing, making hard choices that are risky, and its called business! Everyone wants free, free, free, man you people are so f'ing greedy its just sickening!

@Ayende,

I think Silverlight is a solid choice for the rich experience and sheer ease of development, not to mention that as a Windows Phone 7 developer you could easily write a WP7 app to remotely manage a RavenDB for emergencies or monitor it from your phone if you need such a thing which I think would be pretty cool and could leverage much of your existing UI if you went with Silverlight for this...

Just some thoughts!

Ayende Rahien
10/12/2010 03:34 PM by
Ayende Rahien

Jakub,

I am talking about the admin interface. I am willing to have you open that one up directly, rather than via a browser.

And I think that you missed the part where I said that it is possible in JS, just too expensive.

Jakub
10/12/2010 03:39 PM by
Jakub

@Eric

If we are planning on creating separate project for WP7 and leveraging existing code for Raven UI why not create it all on HTML/JS and have all devices covered up front without the need of maintaining separate codebasis.... just a thought....

Ayende Rahien
10/12/2010 03:41 PM by
Ayende Rahien

Jakub,

Because it is going to cost more.

And because I find that it is easier to work with SL than JS.

Jakub
10/12/2010 03:47 PM by
Jakub

I absolutely agree that cost of development and complexity of the project will be higher... the benefits of HTML/JS reach will outweigh these tenfold...

Ayende Rahien
10/12/2010 04:10 PM by
Ayende Rahien

Jakub,

We already have a HTML/JS interface. You are more than welcome to spice it up properly.

But since it is very easy to spend other people money, I think that I'll stick with the original plan.

Ayende Rahien
10/12/2010 04:12 PM by
Ayende Rahien

Yitzchok,

That isn't really what I have in mind.

Jakub
10/12/2010 04:42 PM by
Jakub

So current UI will not be deprecated event in the instance of braking changes? I have used it once or twice through my phone already... not a great experience but doable...

Eric
10/12/2010 04:46 PM by
Eric

@Ayende,

I have gone through this route with clients before and the HTML/JS route sounds really great on paper but in reality its really not all that flexible. You have to have various branching statements in the code to detect what mobile device, use these images, or use this css, you will have up to 12 different CSS files that you are maintaining for a dozen or so devices, one for iPhone one for iPad, for WP7 for Blackberry, etc. and then you need to support each type of browser, if they are using Android with Opera v10.1 or whatever, 10.2 then you need to take that into account. If you use Silverlight you don't need to deal with ANY of that! Also you have a native WP7 application, if you want to support the iPhone you could develop a native iPhone app and IMO this is still more cost effective because the codebase for those apps do not change often, and they are extremely small and easy to maintain, while your web apps code base would change very often and would grow to be very large and get hard to maintain.

Those are some compelling reasons IMO! You can agree with me or not but I have been there done that!

Jakub
10/12/2010 04:57 PM by
Jakub

@Eric

If taking HTML/JS route (which I'm assuming is off the table) I would not tailor the app to all the devices since new mobile browsers including WP7 can browse full blown site successfully... The only browser specific anomalies would be handled by jQuery and if the browser of your choice is not capable of handling the UI then maybe it's time to upgrade your browser. At least you have an option of changing the browser... when SL is not available on you device then you're SOL...

Demis Bellot
10/12/2010 11:09 PM by
Demis Bellot

@Eric

CSS files that you are maintaining for a dozen or so devices, one for iPhone one for iPad, for WP7 for Blackberry, etc. and then you need to support each type of browser, if they are using Android with Opera v10.1 or whatever, 10.2 then you need to take that into account. If you use Silverlight you don't need to deal with ANY of that!

Man that is a whole lot of crap to fit in one sentence. I hope you even know yourself that Silverlight only runs on one of the devices you've mentioned, which has less than <1% of the total mobile browser market share. And all this crap about Opera (which is actually a very good compliant browser) where Silverlight isn't even officially supported.

I don't know how long its been since you've written anything for the web but I haven't had to do any branching statements for desktop browsers in years. Write compliant code and use a well-tested framework like jQuery, Closure Library, ExtJs, Dojo, whatever - they all have good support across browsers.

if you want to support the iPhone you could develop a native iPhone app and IMO this is still more cost effective because the codebase for those apps do not change often, and they are extremely small and easy to maintain, while your web apps code base would change very often and would grow to be very large and get hard to maintain.

Wow this crap just keeps on flowing - it's almost too hard to read. Are you actually seriously advocating to build native apps for each mobile platform because its somehow more cost effective?? Like with different programming languages and UI toolkits??

I'm seriously concerned how someone can think that. Do yourself a favour checkout PhoneGap / SenchaTouch or jQTouch and see how easy is to support multiple mobile platforms with a single codebase.

Demis Bellot
10/12/2010 11:20 PM by
Demis Bellot

@Ayende

Even though I'm generally pro-web, I actually think that building a RavenDB app is probably better done with Silvelight. It generally goes without saying - You're target audience will be .NET developers and most likely accessed within a controlled Intranet environment so you wont be penalized by Silverlight's market-share. It will also likely be an edit-heavy data-driven / binded app which Silverlight excels at. You'll also be able to re-use a significant amount of your client library .NET code and tests - so its pretty much a no-brainer.

Jakub Borys
10/12/2010 11:27 PM by
Jakub Borys

I love the concept of sourcing the idea from the community for UI. This could turn out to be kick ass! Total innovation in web UI space. Could the technology used for it be decided after having actual design concept on hand?... Just a thought...

Ajai Shankar
10/12/2010 11:44 PM by
Ajai Shankar

This post is so confusing, you talk about UX and then this turns into discussion about Silverlight / Javascript HTML.

What is the UX you are talking about - something like a bookshelf organized by document types.

You let user pick an index and type out the query (which has intellisense by the way about the fields)

Then you get a list of filtered documents, which you "flip" through like you said, and then zoom into say "linked"/related documents?

And I agree with Jakub, Silverlight may not be the best way to go.

I am just commenting for my free license by the way :)

Eric
10/13/2010 12:32 AM by
Eric

@Demis,

Normally I try to be civil on here but you were so blatantly rude to me that I am just going to come out with my comments here:

First You can call it crap all you want, your blind acceptance that these new technologies work like magic is proof enough to me that you have absolutely no idea what your talking about. I have used them extensively and they are no magic bullet and you ABSOLUTELY still have to do branching statements even if you use the frameworks.

Secondly I was advocating native app support, not web support for mobile devices! So why would I possibly be interested in those solutions you mentioned? There are several reasons to choose native app support over web support for mobile platforms, its why people write apps in the first place! Additionally yes I am saying it would be cheaper because I have done it, you don't change the code often, the code base is small, and its easy to maintain! So low cost!

Thirdly your blog doesn't even render correctly in Chrome so why the hell would someone listen to you who can't even get their own site to render properly on one of the three major browsers? Next time spend the time to make sure you actually practice what you preach, it does actually count towards credibility!

Pat
10/13/2010 01:36 AM by
Pat

This is an interesting problem, because as an admin tool you probably could get away with showing documents in a grid.

The best i could think of was a coverflow style document browser ( http://imgur.com/w9MIs). This will put across the idea of discrete documents, though not sure how usable it would actually be.

kamran
10/13/2010 01:42 AM by
kamran

I am seeing more companies adopt Silverlight for LOB apps for the same reason.

Another benefit for companies that don't have graphic designers is that you don't need any graphic design skills to develop a really nice looking app in SL.

Its just common sense to use SL for many businesses.

Ayende Rahien
10/13/2010 06:16 AM by
Ayende Rahien

Pat,

Nice look.

Unfortunately, this won't really work. CoverFlow type of UI doesn't give you enough details about the other items to be viable to data display.

Demis Bellot
10/13/2010 07:24 AM by
Demis Bellot

@Eric

First You can call it crap all you want, your blind acceptance that these new technologies work like magic is proof enough to me that you have absolutely no idea what your talking about.

Again your comments contain all FUD and no substance.

Secondly I was advocating native app support, not web support for mobile devices! So why would I possibly be interested in those solutions you mentioned?

If you actually went to those links without shooting your mouth off again you would realize that you use PhoneGap to make native applications using web technology.

Additionally yes I am saying it would be cheaper because I have done it, you don't change the code often, the code base is small, and its easy to maintain! So low cost!

Ok bud, I'll bite, lets see the pudding, where are these magical cost-effective native apps in which you speak of??

Thirdly your blog doesn't even render correctly in Chrome so why the hell would someone listen to you who can't even get their own site to render properly on one of the three major browsers? Next time spend the time to make sure you actually practice what you preach, it does actually count towards credibility!

Wow more crap, Up to your old tricks again eh? I use chrome extensively which my blog renders fine in. Also If you had sleuth skills of a 10yo you would find the author of my blogs WordPress theme at the bottom, not I.

Pat
10/14/2010 12:07 AM by
Pat

CoverFlow type of UI doesn't give you enough details about the other items to be viable to data display.

I thought that might be the case, but was inspired by the similarity between an mp3 collection and a document collection (

my first attempt was this - http://imgur.com/HjKBD - creating a windows explorer for raven, though the directories are a bit of an artificial construction.

Your battle against grids is in some ways also a battle against familiarity. This being an admin app, that is both good and bad. Admin users will take the time to learn your interface, as long as you provide increase power to do things.

Sam Martindale
10/14/2010 03:40 AM by
Sam Martindale

Something with deep zoom seems like it would be cool. Agree with @Adrian Cockburn that something like getpivot.com would be cool.

Comments have been closed on this topic.