5 ms·
Ask HN: What's the best webapp UI you've seen and what was used to make it?
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.
- portis 17y agoGmail.
- cschep 17y agoFor 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 17y agoIf im not mistaken gmail's interface is written in GWT.
- snprbob86 17y agoYou are mistaken. Gmail greatly predates GWT.
- ique 17y agoThough I remember reading somewhere they rewrote the entire thing with GWT. Can someone find source or tell me if I'm wrong?
- csytan 17y agoAround 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 17y ago+1 for Gmail and google.com itself
- pufuwozu 17y agoI 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/GoogleWavePoweredByGWT.html http://code.google.com/events/io/2009/sessions/GoogleWavePow...
- thomaspaine 17y agoYou 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 17y agoIt's impressive technically but it's a terrible UI.
- annoyed 17y agoit 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 17y agoYep, 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 17y agoIt'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 17y agoThank 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 17y agoI'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 17y agoTry 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 17y agoYup, 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...
- samlittlewood 17y agohttp://280slides.com/ 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 17y agoIn 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.
- Derferman 17y agohttp://www.getballpark.com http://www.getballpark.com
- kierank 17y agoKohive: https://www.kohive.com/ https://www.kohive.com/
- peoplerock 17y agoIt 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 17y agohttp://dabbledb.com/demo/ 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.
- quentinZ 17y agoFilespots: http://www.filespots.com/en/index.html http://www.filespots.com/en/index.html - ExtJS Beatiful display of a pure JavaScript application, that not only looks great, but also works great.
- mping 17y agoGoogle 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 17y agoseriously. 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 17y agoWere 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 17y agoi 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 17y agoI've been using ExtJS for a couple of years now. It's a great gui framework and it looks really good too.
- alexsolo 17y agoGoogle Maps. The first time I saw the scrollable tiles, I was blown away.
- ivenkys 17y agoGoogle Maps, very very good. Honourable mention , Apps from 37Signals.
- kniwor 17y agoI am surprised no one's mentioned http://www.thesixtyone.com/ http://www.thesixtyone.com/ yet...
- jmtame 17y agoinsanely good overall experience. still blows my mind how finely tuned everything has become.
- steerpike 17y agoYeah, so true, especially considering it's the tab immediately left of this one in my browser.
- mhansen 17y agoThe music never stops playing - the entire website is implemented in AJAX? Wow!
- deno 17y agoAlmost. Music playing engine is flash, controlled by JS.
- amr 17y agoSometimes the best UI is the one you don't remember.
- deleted 17y ago[deleted]
- kniwor1 17y agoI 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 17y agoYou mean trademark.
- jmtame 17y agogrooveshark.com - beautiful ui, good experience minus the delays in screen transitions. but really smooth and clean ui
- bkbleikamp 17y agoAgreed, Grooveshark is the best music web app I've seen. Kicks Pandora's ass.
- mhansen 17y agoFacebook. 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 17y agoI 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 17y agoI'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 17y agoI 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... :-)
- Gibbon 17y agoFacebook 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-facelift-by-barton-smith/ http://www.aguynamedvernonmac.com/2009/10/17/facebook-faceli... I can only dream Facebook would look like that.
- tcarnell 17y agoI 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 http://www.femtoo.com
- danrfhughes 17y agoWhat do people think about www.drsusers.nhs.uk/clininppattern.aspx ? It's used to design compliant work patterns for uk doctors.
- ivenkys 17y agoCardinal 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 17y agoI 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 17y agoHmm , 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 17y agoThanks 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 17y agoI 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.
- koenbok 17y agoWe 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-checkout-3/ http://cappuccino.org/discuss/2009/10/06/cappuccino-in-check...
- huyegn 17y agowow nice ui,I noticed you used jquery for the actual stores but cappuccino for the actual application.
- poptarts 17y agohttp://www.mint.com/ http://www.mint.com/
- deleted 17y ago[deleted]
- allbutlost 17y agoCampaign Monitor has an excellent UI, giving short client training sessions as a result. Built in .NET with jQuery
- anguslong 17y agohttp://otherinbox.com http://otherinbox.com -- she's nice. UI is Sproutcore, I believe.
- 3pt14159 17y agoMy housemate made http://www.guestlistapp.com http://www.guestlistapp.com - fairly awesomesuace jquery ui. Snappy fast too.
- alexkearns 17y agoI can't really say whether the ui is good, because I created it, but here you are anyway http://gambolio.com/#/library/ 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 17y agowow, 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 17y agoI 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 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.
- fuelfive 17y agohttp://almost.at http://almost.at is great
- dpcan 17y agoI 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.
- rabidsnail 17y agowikispaces (uses jquery)
- sacha 17y agoI like FireRift: http://www.firerift.com/ http://www.firerift.com/ Great looking CMS with ajax (oooh! ajax!!) everywhere
- herval 17y agoI 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)
- Travis 17y agoSeems 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?
- matterco 17y agowww.perqworks.com I wrote it, jQuery to the nth-power.