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.
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.
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.
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.
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 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?
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 =)
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... :-)
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 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.
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?
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.
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).
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).
+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.
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?
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.
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.
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.
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::
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?
