HN Explorer

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

52 points by huyegn ↗ HN
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.

79 comments

[ 3.1 ms ] story [ 148 ms ] thread
cschep
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.
gertburger
If im not mistaken gmail's interface is written in GWT.
snprbob86
You are mistaken. Gmail greatly predates GWT.
ique
Though I remember reading somewhere they rewrote the entire thing with GWT. Can someone find source or tell me if I'm wrong?
csytan
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 =)
vgurgov
+1 for Gmail and google.com itself
pufuwozu
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...

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

jlees
It's impressive technically but it's a terrible UI.
annoyed
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?
huyegn
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?
steerpike
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.

mattmaroon
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.
Kejistan
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.
gcv
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.
Travis
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...
snprbob86
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.

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

incomethax
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.
kierank
Kohive: https://www.kohive.com/
peoplerock
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::

hiroaki
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.
mping
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 :)

jmtame
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).
mping
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.
jmtame
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).
eli_s
I've been using ExtJS for a couple of years now. It's a great gui framework and it looks really good too.
alexsolo
Google Maps. The first time I saw the scrollable tiles, I was blown away.
ivenkys
Google Maps, very very good. Honourable mention , Apps from 37Signals.
felixmar
+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.
Andi
Google Maps is - next to Flickr's photo organizer - the best RIA
kniwor
I am surprised no one's mentioned http://www.thesixtyone.com/ yet...
jmtame
insanely good overall experience. still blows my mind how finely tuned everything has become.
steerpike
Yeah, so true, especially considering it's the tab immediately left of this one in my browser.
mhansen
The music never stops playing - the entire website is implemented in AJAX? Wow!
deno
Almost. Music playing engine is flash, controlled by JS.
amr
Sometimes the best UI is the one you don't remember.
[deleted]
(comment deleted)
kniwor1
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?
dangrossman
You mean trademark.
kniwor1
lol.. no I don't mean to mean anything, just curious.
scumola
Yea, actually very nice interface. Thanks for the heads up on this site! :)
vdm
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.
jmtame
grooveshark.com - beautiful ui, good experience minus the delays in screen transitions. but really smooth and clean ui
bkbleikamp
Agreed, Grooveshark is the best music web app I've seen. Kicks Pandora's ass.
mhansen
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.

bkbleikamp
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

cousin_it
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.
tcarnell
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... :-)

tcarnell
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

tcarnell
opp, forgot the important part: it's been done in PHP, jQuery,jQueryUI
danrfhughes
What do people think about www.drsusers.nhs.uk/clininppattern.aspx ? It's used to design compliant work patterns for uk doctors.
ivenkys
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.
danrfhughes
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.
ivenkys
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.
danrfhughes
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?
recurser
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.
[deleted]
(comment deleted)
allbutlost
Campaign Monitor has an excellent UI, giving short client training sessions as a result. Built in .NET with jQuery
alexkearns
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.

huyegn
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?

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