MIT OpenCourseWare: User Interface Design
I was very interested to see that MIT have released many of their courses in a new venture called MIT OpenCourseWare. From their FAQ:
1. What is MIT OpenCourseWare?
The idea behind MIT OCW is to make the courses materials that are used in the teaching of almost all the undergraduate and graduate subjects taught at MIT available on the Web, free of charge, to any user, anywhere in the world. This venture continues the tradition at MIT, and in American higher education, of open dissemination of educational materials, philosophy, and modes of thought. Educators in the U.S. and the developing world utilize the materials for curriculum development, while students and self-learners around the globe draw upon the materials for self-study or supplementary use. With 1100 courses now available, MIT OCW is delivering on the promise of open sharing of knowledge.
MIT & Usability
Well I looked through their Comp Sci section and found MIT 6.831 User Interface Design and Implementation, Fall 2004, which is an excellent introductory course to user interfaces with detailed course notes in PDF format. The notes cover both web page UI as well as normal desktop application UI. Some things hold true regardless of whether you are designing for the web, or the desktop application; such as these Guidelines for Good Graphic Design:
- Simplicity
- Contrast
- White space
- Balance
- Alignment
UI really is one of the most important aspect of web design; without it, your users won’t return, and your web site will fail. Up until this point however, designing web page UI was only slightly hard. It had to be neat, easy to read/follow, and contain just the right amount of information. Obviously there was more to it than that, but at least whenever the user clicked a link or button, the web page reloaded, giving the UI very defined steps between states.
Flash removed some of this simplicity, and as a result we got to see some terribly designed UI in it. Yet it was different enough from normal HTML that developers didn’t often attempt to replicate a standard web page in flash.
Then entered the new usability monster…
AJAX: the badly designed desktop application
User interface design for the web has become more important than ever with the advent of the so called AJAX application. AJAX attempts to replicate the feel of the desktop app by doing a lot of the loading of data in the background. Yet, latency over the internet ensures that an AJAX application will behave like the slowest desktop program, to the point where a visual representation of activity is always a requirement.
The problem we have with AJAX application, is that they are being developed by web developers; many of whom have never studied user interface design for the web, let alone the desktop. Web developers think in terms of clicking a button or link, and waiting for the result. The bits in between have always been dealt with by the browser, and were thus never something that needed thinking about. Now we have a situation where action and UI event have been seperated.
With a normal web page, it is often quite easy to click a second link after the first, but at least the browser would always show you it was busy. Clicking buttons in forms would bring an hourglass up immediately, and most users knew to wait for the page to reload.
The Invisible Click
Recently I’ve seen several comment/submission forms on blogs and websites that utilise AJAX. Some have been excellent, but many have not. More and more we will get to see what I call “The Invisible Click”. You’ve just finished typing out your message, you click the submit button, and nothing happens! Sometimes, some text changes on the screen, often far away enough from the button for the user not to notice; other times the screen will clear, only after the post has been successfully posted (and you’ve already clicked a second time). What never seems to happen however, is the button disabling/disappearing; or even an easily visible progress bar.
Increasingly web designers will have to take into consideration how to clearly show the current state of the application, since the browser will no longer be doing it for them. As the possibilities for the user to break the application increase, so will the time spent on UI design. So go read the course notes, they are good, they are free, and you won’t regret reading through them.
RSS Feed
