

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

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

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

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

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

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

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

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

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

------
3pt14159
My housemate made <http://www.guestlistapp.com> \- fairly awesomesuace jquery
ui. Snappy fast too.

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

------
koenbok
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...](http://cappuccino.org/discuss/2009/10/06/cappuccino-in-checkout-3/)

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

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

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

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

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

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

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

------
Derferman
<http://www.getballpark.com>

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

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

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

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

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

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

------
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::

------
fuelfive
<http://almost.at> is great

------
poptarts
<http://www.mint.com/>

------
herval
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)

------
sacha
I like FireRift:

<http://www.firerift.com/>

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

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

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

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

------
rabidsnail
wikispaces (uses jquery)

------
portis
Gmail.

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

