Ask HN: What's the best webapp UI you've seen and what was used to make it? | Hacker News Reader

Ask HN: What's the best webapp UI you've seen and what was used to make it?

52 pointshuyegn77 comments

Whether it's flex, gwt, cappuccino, sproutcore, jquery or mootools, where have you seen extremely exceptional UI on highly sophisticated webapps? I'm talking about interactive, stateful webapps, not the standard list-of-things kind of webapps.

View on HN

For some reason Gmail came immediately to mind. I know it doesn't seem flashy or amazing these days, but I think it was the first one that really convinced me that web apps were here to stay. I have no idea what they used though, tons of javascript I assume.

If im not mistaken gmail's interface is written in GWT.

You are mistaken. Gmail greatly predates GWT.

Though I remember reading somewhere they rewrote the entire thing with GWT. Can someone find source or tell me if I'm wrong?

Around GWT's 1.5 release I heard the GWT team was trying to get the gmail developers to switch from pure js. I don't believe they had any luck though =)

+1 for Gmail and google.com itself

I found Google Wave to be somewhat impressive. It uses GWT.

There's a presentation about it's implementation using GWT here (I haven't watched it): http://code.google.com/events/io/2009/sessions/GoogleWavePow...

You think google wave has good UI? My reasonably technology literate girlfriend couldn't figure out how to do anything, or the actions she did discover were too complicated or unintuitive (why does pressing enter not send a message?). She gave up after 5 minutes.

The front end technology is definitely cool, but the UI sucks.

It's impressive technically but it's a terrible UI.

it will probably be customizable not too long from now; i'd like a chance to test it out, see if it's good for organizing your thoughts; what does it look like on a mobile device?

Yep, Gmail's interactivity with its keyboard shortcuts, navigation, settings, chat application and etc is extremely impresive. What's even more amazing is that most of this stuff is all done on one page cross-browser. This is the kind of application I'm talking about. What tools do you use to keep the complexity of such an app under control?

It's interesting, because as well made as gmail is, I simply can't bring myself to think of it as a good UI. I just don't find the interface particularly usable.

I spend ages looking through the buttons trying to remember where the one is for creating a new message. It seems arbitrary what's a button and what's a link. Grouping of 'concepts' seem utterly arbitrary (notably the list of choices presented in the dropdown next to 'reply' in a message chain).

I just don't think I've ever been hugely impressed with googles UI credentials - everyone always seems to put them up as some kinds of genius in terms of usability but I just don't see it.

Ok, google maps is a notable exception.

Thank you. It doesn't even have a preview pane. And almost everything about it is as unintuitive as humanly possible. I have the same problem with composing new messages, and emptying spam folder.

I've never understood the idea behind the "preview pane", all you do with email is read it, so what does a preview do other than show you the message? And how is that any different from simply reading the email? Then again I've never been a power email user so maybe I just don't "get" it.

Try turning on the keyboard shortcuts and learning them. I can't imagine wasting time hunting for 'c'ompose, or 'C'ompose for a new window. Some are a little odd ('#' for delete and 'e' for archive), but I think there's a Lab you can turn on to tweak them. I am not even aware of where buttons or links for doing anything are anymore.

Yup, there is a labs item to customize your shortcuts. I couldn't use Gmail without them, for the most part. It's not a great visual UI, but the workflows behind it are amazing. It's kinda like emacs in that aspect, I suppose...

OK, the drop-down next to the reply button and that button itself are a bit wonky, but I never use them. I think the grouping of the other elements is one of the nicer aspects of Gmail.

Buttons represent actions. Clicking a button mutates the world. Links represent places and views. Clicking a link takes you somewhere or changes the appearance of something.

Links along the left are global. Buttons along the top and bottom of the center panel pertain to the current conversation or selection of conversations (depending on view). Links and buttons on each message operate on, oddly enough, that message.

Maybe Google's general style doesn't meld well with the way you think, but for many (most?) people, it does. It's a fantastic design.

http://280slides.com/ - Cappucino

Not sure I would necessarily use Cappucino myself, but to me, it demonstrated that treating javascript+DOM as a target for a higher level interface can work, and can work well.

I guess Outlook Web Access should get an honourable mention - I guess that was the first widely available app. that demonstrated that is was at least possible and was useful.

In my experience I've found running a Cappucino app to be rather slow, but definitely +1 on the mention of 280 slides, I really respect the work their doing, especially making such a great UI Web app.

I'll stick my neck out and say Facebook has an awesome UI. (No idea what was used to make it.) When I first joined Facebook some weeks ago, I was floored by how many features there are and how every single one is usability-optimized for me the newcomer, catching my eye exactly when I need it. The attention to detail is amazing. Sure, it's all just text, pics and videos, but... I'd been making online maps for years, have some fairly advanced stuff under my belt, and still felt like a newbie when I saw Facebook.

I have soo many issues with Facebook - I think the usability is dreadful - for example the actual amount of screen real estate used for 'actual' content is tiny, the IM windows are tiny and hidden away in the corner, every page looks the same, I'm still not exactly sure what 'my wall' is, and the difference between that and my 'home', it is also very unclear if a message is available to everybody or an individual, also getting a simple list of your friends seems to be almost impossible - you click 'friends' and you are taken to a page that does not contain your friends. And I wont even get started on picture uploading/sharing

Facebook just seems to be an extremely complicated bulletin board. Can't the world just use gmail and picassa!?!? I must be getting old... :-)

Facebook is a usability nightmare. Hide someone in your newsfeed and then figure out how to unhide them.. you'll see what I mean.

Here's a Facebook facelift: http://www.aguynamedvernonmac.com/2009/10/17/facebook-faceli...

I can only dream Facebook would look like that.

I am surprised no one's mentioned http://www.thesixtyone.com/ yet...

insanely good overall experience. still blows my mind how finely tuned everything has become.

Yeah, so true, especially considering it's the tab immediately left of this one in my browser.

The music never stops playing - the entire website is implemented in AJAX? Wow!

Almost. Music playing engine is flash, controlled by JS.

Sometimes the best UI is the one you don't remember.

I am just wondering who are u and why are u using the handle "kniwor". It means nothing in no language and has been used by me for years before you started using it recently. I've no copyrights on the same and u are free to use the arbit jumble of words, buy why do u choose this?

You mean trademark.

lol.. no I don't mean to mean anything, just curious.

Yea, actually very nice interface. Thanks for the heads up on this site! :)

I hadn't heard of this. It's seriously slick, the music is surprisingly good, and all I did was click on your link and started hearing music... I started apple-tabbing to find out where the hell it was coming from.

http://dabbledb.com/demo/ wowed me when I first saw it (still does). It was developed using the Seaside framework which has clean support for continuations.

My housemate made http://www.guestlistapp.com - fairly awesomesuace jquery ui. Snappy fast too.

Google Calendar. I tried to do a google calendar clone in GWT, and I came to admire many features of google calendar, like dynamically selecting a range on the mini calendar and gcal will update the main view.

Its so simple and intuitive yet so sophisticated :)

seriously. I built an app before doing graffitigeo and it never launched because calendars are harder than they look to build (I wasn't using a framework, just building purely from scratch at the time in php and javascript).

Were you trying to do something like google calendar? Right now, after all these years, the only thing I see that comes pretty close is zcal from ZK.

i was building an online booking system, so it had a ton of custom calendar and payment capabilities built into the calendar. i hand-coded everything, right down to calculating whether it was a leap year or not, and how many days were in the existing month. stupid idea, should have just used a library to do it (although not many were available at the time).

We think we did pretty well on EnStore (www.enstore.com). We built it using Cappuccino, you can check it out here: http://cappuccino.org/discuss/2009/10/06/cappuccino-in-check...

wow nice ui,I noticed you used jquery for the actual stores but cappuccino for the actual application.

Google Maps, very very good. Honourable mention , Apps from 37Signals.

+1 for Google Maps. I've noticed several times that Microsoft's map technology is more accurate, but i keep using Google Maps because of the superior UI.

Google Maps is - next to Flickr's photo organizer - the best RIA

Facebook. The whole experience is so tight.

And the chat program/shortcut bar at the bottom is very impressive, and must have been so hard to get right cross-browser.

I agree with this. I think Facebook's design is great because it is:

* Consistent across the whole site (for the most part)

* Clean, there are no gradients or extra flashes

* Fast, they focus on things loading quickly and make the site feel as snappy as possible

Google Maps. The first time I saw the scrollable tiles, I was blown away.

Seems like most comments here talk about the "intuitive" aspects of the design. Which I agree with -- an app should ideally be intuitive.

That said, being intuitive really only is an issue during the user's learning curve. As every vi/emacs user knows, sometimes you can be way more productive once you adapt to the computer, rather than the other way around. Gmail, for instance, has a very poor UI from a traditional perspective, but I find it very easy to be productive once I learned the keyboard shortcuts.

Intuitive is generally a good thing, but in and of itself isn't the most critical requirement for being usable, IMO. I prefer clustering of concepts, simplicity of presentation, and workflow optimization much more important.

But I still try to design my apps to be intuitive. After all, why not build on common concepts?

Campaign Monitor has an excellent UI, giving short client training sessions as a result. Built in .NET with jQuery

Filespots: http://www.filespots.com/en/index.html - ExtJS

Beatiful display of a pure JavaScript application, that not only looks great, but also works great.

http://www.getballpark.com

I really like the simplicity and 'cue card' approach of Femtoo.com, it also tackles tricky concepts for non-techy users in a non-assuming way.

http://www.femtoo.com

opp, forgot the important part: it's been done in PHP, jQuery,jQueryUI

I'm also a big fan of http://fizy.com/ but I dont know what technologies were used.

I don't think it matters what it was made in. You can use ANY language, tool, JS, whatever, as long as you are a talented UI designer. I think people tend to think that they can make these great UI's faster and easier by using certain tools, but I don't believe that is the case. YUI may make it faster to create Javascript tables that can be sorted and searched on the client-side, but you still have to learn that system and integrate it into what you have already created. Pick a language, a JS framework, etc, and master it and any UI will be easier and faster to create.

I can't really say whether the ui is good, because I created it, but here you are anyway

http://gambolio.com/#/library/

The ui and animations were done entirely using Javascript (with help from jQuery), HTML and CSS. The actual games are flash but the ui is all done using standard web technology.

wow, awesome UI, I looked at source but saw that you minified most of your js. How did you do that sliding panel nav? Do any jquery plugins that you recommend?

I do a lot of jQuery as well but have been frustrated lately by how it's simplicity sometimes also makes it hard to maintain. For example as your app grows, you'll inevitably run into problems where your selectors no longer work because of refactoring and etc... Have you faced the same challenges? If not, what do you do to keep down the complexity?

I minified JS for performance reasons, rather than to obscure the code. Indeed, you can find a large chunk of the code at http://usejquery.com/sites/315

I tend to avoid jQuery plugins because I like doing as much of the code as possible, so I am afraid I can't recommend any plugins. I largely use jQuery as a selector engine (at which it is brilliant), for event binding and for basic animations.

In terms of refactoring messing up your javascript, I have not suffered major problems with that but I can imagine it happening often on big projects involving lots of people.

Thanks for your interest and good luck with your projects.

http://otherinbox.com -- she's nice. UI is Sproutcore, I believe.

I was really impressed with fluxiom.com (media management app, from the scriptaculous guy I seem to recall) when I first saw it, although I haven't looked at it for a year or two. Beautiful design and lots of attention to detail. The flickr organizer is pretty incredible too.

Kohive: https://www.kohive.com/

It might be awesome... at whatever it does.

But I have a real UX concern when I land at a site and... WTF: I can't even tell what it is about, what services it offers, is there any possibility that I might be a target audience?

Attractive landing page, but totally flumoxing.

[edit]PS: Okay, now I give in and click on "overview". That page has the phrase "a single place to collaborate..." A simple tag line like that is needed on masthead.

Plus [it's flash-based, is it?], I'd like to highlight copy and copy the phrase "a single place to collaborate". Well, that's not going to happen: text not in html :( ::something to think about UI-wise::

http://almost.at is great

http://www.mint.com/

I have a couple of faves:

- MindMeister (brilliant and almost entirely JS+html - not sure which framework though)

- SlideRocket (Flex - almost like using KeyNote on the web)

I like FireRift:

http://www.firerift.com/

Great looking CMS with ajax (oooh! ajax!!) everywhere

What do people think about www.drsusers.nhs.uk/clininppattern.aspx ? It's used to design compliant work patterns for uk doctors.

Cardinal mistake, its not obvious what it does. I bet users have to be specifically trained to use the UI , which in this day and age is not acceptable.

I take your point, but it's more that users have to have to fit a particular profile, ie have a desire to design work patterns - so they have to know what a pattern is, and that it will include duties. Be interested to know what you think on that basis.

Hmm , i think i understand what it does and what its used for but i still think the UI Design can be improved a lot and made more intuitive, as a first pass: Wasted page space,very small font sizes, colour combination can be better, too many tool tips.

Thanks for that ivenkys, I appreciate your thoughts. It's pretty clear you're right about font, colour etc. The tool tips were a response to the challenge of making information imediatley available, without cluttering, and whilst not perfect, I can't think of another technique that would provide that accessability. What do you think?

grooveshark.com - beautiful ui, good experience minus the delays in screen transitions. but really smooth and clean ui

Agreed, Grooveshark is the best music web app I've seen. Kicks Pandora's ass.

www.perqworks.com I wrote it, jQuery to the nth-power.

wikispaces (uses jquery)

Gmail.

I've been using ExtJS for a couple of years now. It's a great gui framework and it looks really good too.

Reply on news.ycombinator.com