Interface Design
Here’s an excellent post-iPhone announcement overview and history of multi-touch systems by Bill Buxton of (gulp) Microsoft who has been working on this stuff for a while (like 20+ years).
Stop wasting your time doing customer research, figuring out what users really want to do with your application, and fretting about requirements. Giant Ant has solved the interface problem once and for all. Our trademarked “Universal UI (v0.1)” will work for any application, no matter what tasks your users might actually want to do. Problem. Solution. Best of all, we’re releasing it for FREE.
Wow, what can’t Google do better than everyone else? Just took a look at Google calendar, their latest perpetual-beta offering. What’s so impressive to me, as I was discussing with one of Giant Ant’s clients, is not what they are able to make a web app do technically, but what they choose to make it do. The apps are behavior-changing. The calendar’s “Quick add” feature, for example, lets you add events by typing in simple english (e.g. “Meet Wendy for coffee at Farley’s next tuesday at 9am”). This is not a brand new idea (in fact, we designed something similar for a financial services client a few years back), and I’m sure other calendar-designers have thought of doing this, but Google had the hubris and ability to make it work and work beautifully. Other niceties include smooth drag and drop and resizing of events, keyboard shortcurts (Day, Week, Today, etc.), and the ability to share calendars (including editing, something Apple’s mediocre iCal can’t handle).
Come to think of it, the emergence of the GoogleOS is maybe most encouraging to me, as a Mac user, because it frees me from having to rely on Apple’s often stunted offerings like iCal.
Your bad database design is not my interface problem
The Command Line - The Best Newbie Interface? describes one computer instructor’s experience teaching a group of people completely new to computers a Command Line UI. The author suggests the preferability of the CLI to the GUIs we’re all used to and I think it’s an interesting thing to point out, though limited. It made me think of the way domestic life has been changed by “labor-saving” technologies like the vacuum cleaner and dishwasher: The promise was that your work would get easier, but what really happened is that you could get more done. The command line is straightforward (you do one thing at a time, there’s only one point of interaction, etc.), but to do anything comparably complex to, say, retouching a photo would be near impossible. So, don’t start pining for the “good old days” of the VAX just yet.
Here are the slides from Amy Jo Kim’s Etech talk about applying video game mechanics to functional application design: Putting the Fun in Functional. You’ll find yourself nodding along as if you already knew it all, but it’s well worth a read because she does such a nice job pulling it all together into a well-illustrated, coherent narrative.
Amazon now has what they’re calling a “product wiki” on each product page. It’s basically a single user-editable chunk of the page. It’ll be interesting to see how this plays out.
I assume this’ll be old news in a few minutes, but Yahoo recently released and open-sourced their previously-internal set of UI design patterns and JavaScript widget library, as well as a companion blog:
Yahoo! User Interface Blog
(with a nice live search bar)
Yahoo! Design Pattern Library
Yahoo! User Interface Library
Congratulations, Nate!
I just noticed this on last.fm:
It’s Long Tail as interface. My first reaction is to wonder if “obscurity” is really so important of a parameter (I’d rather have a control to nudge the recommendations by genre or some other attribute like instrumentation). And, of course, the algorithm is inherently suspect. But it’s kinda interesting nonetheless.
This is still sketchy, but I wanted to get it down: What I’ve been calling the “fluidity” of an interface is made up of 3 things:
- transparency (don’t make me think)
- responsiveness (don’t make me wait)
- “gestural efficiency” (How efficiently I can complete common multi-gesture acts)
- distance betweeen gestures (literal and cognitive)
- necessary precision of each gesture
- interruptions
I won’t bore you with a long rant, but I just wanted to express my ongoing annoyance with the Apple Mail search mechanism. Choosing “Entire Message” really means only search in the body of the message. Which is silly. Why not just say “Message” or “Message body”? 
Finally Amazon lets me have multiple wishlists. While I appreciate UI simplicity (maybe not quite as much as these guys), sometimes adding complexity is the right thing to do. In this case, it means I can have a wishlist for other people to buy me stuff and I can have a “remember this for later” list for things I might or might not actually really want. Oh, and of course a list for my little boy.
No comment:
I really like the interface of eyebeam.org. Props to Method for doing something different with an HTML/CSS web interface.
Peter nicely uses the idea of document genres (from library science) to explain why certain information tasks work better in certain UI contexts. I think, as one of the comments suggests, that it’s important to analyze tasks at the right level of granularity when evaluating the importance of things like portability or trust, but it’s really a useful model for considering the relationship between task and presentation. It’s also a helpful way to explain to information architects and librarians why graphic design is important to usability.
OK, about this ajax thing… I’ve seen a few posts implying that Adaptive Path is trying to claim ownership of something they didn’t invent, but c’mon: there’s no way AP is going to “own” something this ubiquitous. What Jesse has done, however, is to establish AP as a company that is responsive to new developments in web application technology and demonstrate that the company is able to articulate the value of those developments. Not surprising that AP would be so positioned, since this has always been one of Jeff’s talents; he is brilliant at describing what’s going on at the intersection of business, technology, and design. You can complain that that doesn’t produce anything of value, but I strongly disagree. There is great power in explaining, in popularizing, and in naming.
Which brings me to the name “Ajax.” I’ve also seen complaints that it is a bad name because it’s “owned” by a company that produces soap. To those people, I’d like to point out first that we’re not trying to name a company, so we can call it whatever we want; there’s no one to sue. And second, that there’s a little poem called the Iliad which used the name a few years before Colgate-Palmolive.
What I thought was a more interesting critique came from Rajat, who pointed out that the name has everything to do with the technology and nothing really to do with the experience. In fact, it’s actively misleading wrt the experience, since the effect is one of syncronousness (i.e. responsiveness). But maybe this is due to the idea that the UI designer is an ambassador or translator between human and machine (I know very few (no?) successful interface designers who don’t know at least significantly more than the average person about the way the code they deal with functions). The trouble comes when UI designers move too far from the interface and think too much in human or machine terms. On one side they lose effectiveness when they can’t push developers to find technical solutions that support the UE. On the other side, they forget that the technology is a means and fall into the trap of thinking in terms of “best practices.”
To end a rambling post, let me just say phooey to “best practices.” That way mediocrity lies.
Jesse has a nice concise description of what he’s calling Ajax, a much, much better name than “dynamic interfaces using JavaScript and XMLHTTP” (which is what we used to call it back in 2000). This capability has been around for years, but it’s taken Google (yeah, sure, and flickr, but really it’s all about Google) to push everyone to take it seriously. I actually think one big reason behind the change is that the push for CSS+XHTML for presentation has gotten folks to jettison support for older browsers (yeah, yeah, they can still access the data, blah, blah, blah, but that’s just what you tell the CEO; no one really cares about those poor Netscape 4 users anymore). Still, I’ve been looking forward to this for years, and can’t wait to break free of that damn call-and-response model of application design we’ve been stuck in. As Jesse says, “It’s going to be fun.”
I wanted to point out a practice I’m calling “Behavior Modification UI” (please suggest a better term) where the interface of an application is intentionally made difficult to discourage specific behavior. An obvious example is iTunes, where it is possible to convert secure AAC files to MP3s in order to circumvent their file-sharing limitations, but it is made extremely cumbersome to do so (you have to burn the AAC files to a CD, then rip them back to iTunes as MP3s).
Similarly, I’ve worked on several projects where someone suggested making something “hard to do” because the company didn’t want people to do it but recognized that the actual people using the product would want to do so.
I just wanted to point this phenomenon out and suggest that designers do everything they can to avoid it.
UPDATE: Eric rightfully wrote to admonish me, pointing out that it’s not constructive to dismiss this practice entirely when there are cases where it may be useful. He also sent a link to this excellent page on “Soft Security.” I still believe that behavior mod UI should generally be a last resort because it tends to punish the innocent many without stopping the guilty few (I mean, who out there hasn’t copied files off an iPod?). But Eric’s right. Maybe the correct approach is just to question the practice when it’s suggested, asking yourself whether there’s a better way to discourage the behavior than by making it difficult to do in the UI. Many of the techniques on the above Soft Security page, for example, use the power of the collective to modify behavior by making it visible or allowing it within a safe space. I think it’s not the idea of using UI to modify behavior that bothers me (because all UI does that), but the idea of making it “physically” harder.
I’ve been trying for a week or so to figure out what flickr is. I mean I know it’s a photo sharing site, but what makes it so damn interesting? Then, last night, I finally figured it out: flickr is a MMORPG.
Really, it should have been obvious, since the site is literally a MMORPG (it’s built on the old Game Neverending code, which is why you’ll see files ending in .gne on flickr). And Ludicorp says as much on their homepage (“Groupware for Play. We’re building a better platform for real time interaction online.”), but for some reason I was tricked into thinking it was more like iPhoto crossed with Friendster than Ultima Online.
Why does this make flickr successful where Friendster, Orkut, et al fall flat? I believe it’s because flickr’s designers are among the first (I can’t think of others but they surely exist) who have grokked video game design and (more to the point) figured out how to translate it to the web. What does this mean? It means that, unlike say Zoto, which is just a tool for storing and sharing photos, flickr is inherently, down-to-its-bones about play. If you look at a list of the elements of a successful game, they are all present in flickr: a sense of space to explore, a range of challenges, a range of abilities which can succeed, the need for preparation and skill, a variable feedback system.*
The most intersting part to me (as an interface designer) is how this plays out in the UI. Flickr is an example of what I think of as “vertebrate” or “narrative” or “trunk-and-branch” UI. In contrast to most web sites and apps which simply present a list of options (usually in a brutally straightforward way), flickr’s UI has a backbone. It presents a primary “plot” (upload photos and look at other people’s photos). This backbone gives users an immediate sense of the “story” of the site. But this central narrative exists in a space which allows for relatively freeform interaction, and the UI also helps nudge users off the main path with teasers like “Do you have a Cameraphone? Learn how to send photos to Flickr.” Like a video game, there’s a sense of progressive disclosure.
The downside of this style of interface is that some features are hidden. I used to reload my flickr home page until the “Do you have a blog?” teaser showed up; that was the only way I knew how to get to that feature. And flickr addresses this by including a mini-sitemap at the bottom of the screen. But the advantage is that the site feels less like an application and more like a Dungeon Master. (A role made explicit on the flickr blog for those who want a little extra hand-holding as they explore the gamespace.)
There’s lots more food for UI-design thought here, but this post is too wordy as it is. Let me just say kudos to the Ludicorp team for what they’ve built and good luck dealing with the player killers.
* List taken from A Theory of Fun for Game Design
Speaking of Fibonacci, Rajat linked to a project he designed for IBM, with a very clever use of the Palm screenspace:
The interface design of the PIM in the Squarepusher is inspired by the Golden Rectangle. As new functions are brought into the primary workspace (the large square at the top of the display), prior functions spiral downward through progressively smaller squares until they “disappear” into the black sun in the center.Nice. (Black Sun, eh?)
A collection of User Experience Venn diagrams from Veen (that’d be a “Veen” diagram) to Negroponte (via)
I’m looking forward to Apple Mail’s new Smart Mailboxes feature. It’s the Collections feature from Remail I was jonesing for a while back.
For all you web sites out there… Please, please tell me whether it’s my username or my password that’s causing the trouble. That way, maybe I can figure it out myself instead of calling you on the phone. Please!?
GUIdebook is “a website dedicated to preserving and showcasing as many Graphical User Interfaces as possible.”
Attention product designers: please stop making buttons that must be pressed and held to function. Yeah, I’m looking at you and you.
Dan Hill has an excellent thought-piece on the merits and pitfalls inherent in Apple’s design ethos of perfection. He’s also collected thoughts and links on the idea of adaptive design (i.e. designing for adaptation). From the article:
In essence, adaptive design is about designing to enable the user to change things. You strive for ‘good enough’ as a starting point, such that the user feels they have a ‘way in’, almost an implicit goal of working through the finished design themselves. It sees design as a social process, developing over time, via a relationship with the user. It draws heavily from [Stewart] Brand’s idea of separating a building’s architecture into 6 different layers, from slowly developing layers through to relatively quickly moving layers.
In interface design, as in architecture, both god and the devil are in the details, battling things out. Take, for example, the align/distribute palette in Illustrator.
The top row provides controls for aligning objects. On the left are the 3 horizontal controls; on the right are the 3 vertical controls. Below this row is a row of controls for distributing objects. On the left are the 3 vertical controls; on the right are the horizontal controls. Why, oh why, didn’t they put the vertical controls on the same side in each row?! This is especially problematic because the lower (distribution) icons are nowhere near as successful as the alignment icons above them. If the palette had been better organized, it would be possible to use the top row of icons to orient yourself and then just drop down to the bottom row to distribute objects rather than aligning them. (fwiw, I think Adobe generally has done a remarkably good job with their UI, which makes something like this stand out).
An interface is a boundary object between people and machines. (More on boundary objects).
Christina’s Widgetopia collects, annotates, and categorizes web UI tools (“article tools”, “ratings”, etc.).
This has been written about to death, but I really think email clients need to be organized around faceted classification. It’s actually surprising given how data and context rich emails are that email clients have lagged behind photo and audio file browsers in the sophistication of their classification schemes.
Search (across and within mail folders) is a major improvement, but it sure would be helpful to assign keywords to individual messages and then be able to filter by keyword or date or author etc (and the distinction between filter and sort is an important one). Mike’s slider idea and interfaces like this make so much sense for email. I assume someone will email me a link to Lifestreams, but I’ve always been turned off by the way Lifestreams privileges Date over other organizing principles (although it probably makes more sense for email than other types of documents). There are other projects, but still I’m using folders within folders to manage most of my documents.
This is not to say that I see this as a lost cause; it’s easy to see that metadata-organized file browsing is around the corner. I think I’m just surprised how far behind the major email clients are.
Update: Thanks to Andrew for the link to Remail, a next-gen email project out of IBM. While many of the ideas (e.g. threads) have surfaced elsewhere, I haven’t seen anything like Remail’s Thread Arcs feature. I also like that it can incorporate RSS feeds. And, as expected, there’s a faceted classification mechanism called Collections.
Web Design Practices is a well-presented survey of the interface design practices of 79 prominent E-commerce sites. As Jeff points out, examining the solutions other folks have come up with can save much design time and effort. Just don’t get lazy and forget to think about the specific site and users at hand.
While Learning to Love the Pixel: Exploring the Craft of Icon Design is ostensibly about designing icons, it is the discussion of craft in interface design that I find most satisfying. I have long felt craft to be undervalued in the context of corporate design projects. The article does a nice job of beginning the discussion of the role of craft in user experience design while implicitly raising the higher-level question of where it makes the most sense to prioritize craft in an interface design project.
I’ve always found heuristic evaluations one of the more useful usability methodologies. At first it seemed silly to me, but there’s something about forcing yourself to structure your evaluation of an interface that adds just the right amount of rigor to what is a fairly subjective process. Anyhow, Usability Heuristics for Rich Internet Applications is a nice discussion of how to apply Jakob’s standard heuristics to Flash interfaces.
On Ivrea’s new site: The seven virtues of the interaction designer. They are: pragmatism, audacity, lightness of touch, conviviality, quality, elegance, and friction.
Another gem from Scott at uiweb is his compilation of the Best of CHI-WEB and SIGIA-L, two lists that goodness knows need filtering.
Marc Rettig’s Interaction Design History in a Teeny Little Nutshell (3.2 Mb PDF) is a lovely snapshot of the present (by way of the past and future) state of human-computer interaction design.
Books with Voices describes a research project that uses books (you remember those arcane tree-based data storage mechanisms) as an interface to video files. Hurray for the physical world! (via nooface)
The mute button is one of the most frequently pressed buttons on a typical remote control, but since it isn’t obviously a primary function (such as power, volume, or switch channel) it’s often banished to some hard to find corner of the remote. More specifically, when a person uses the mute button, it’s likely done repetitively (e.g. twice per commercial break) and distractedly (a conversation may be going on at the same time). It may be done in the dark.
The problem, of course, is one of real estate, but not all buttons need to be accessed by touch and not all are accessed frequently. The power button, for example, is likely used only twice per “session” yet it’s often given an inordinately prominent placement. My only point here is that a use-based approach to design has great power to overturn long-established but faulty design conventions.
OK, pardon the interruption; back to watching Buffy.
Plumb Design has updated their Visual Thesaurus. Version 2.0 offers a much-expanded UI. Perhaps most interestingly, meanings are given entries along with the words themselves, so that links between words can be seen more explicitly.
For example, one of the meanings associated with the word “explicit” is given as “precisely and clearly expressed” which is in turn linked with the meaning “describing nudity or sexual activity in graphic detail” which is associated with the word “graphic.” So, rather than just showing that “explicit” is related to “graphic”, we see fairly clearly how they are related.
On the other hand, the original Visual Thesaurus had a certain elegant simplicity that the new version lacks.
OK, everybody. When you’re designing a drawing program (Illustrator, Visio, OmniGraffle, Painter, whatever), you need to use some basic UI: Spacebar = drag with the hand Cmd-Spacebar = zoom tool Cmd+Plus/Minus = zoom one step Go ahead and make up wacky new tools like the Healing Brush (bless your soul, whoever came up with that). But for basic gettin’ around the document, let’s just all adopt the standard Adobe UI.
I was talking today with Alex about the whole iTunes/iPhoto organization model and the rather obvious point came up that this kind of metadata-based interface to files is only as good as the metadata you have. The reason iTunes is (I think) way more successful than iPhoto is that a lot of the metadata can be automatically-generated via calls to the CD Database (e.g. song, album, artist, genre, year), and as Andrew pointed out, there’s room for so much more. Not so with personal photos, which require the user to enter meaningful metadata for this type of interface to work (which is presumably why iPhoto surfaces tagging tools more prominently than does iTunes). As I pointed out to Alex, email is more like mp3s than photos.
Papers and Articles on ZUIs (er, that’s Zoomable UIs)
eek! It’s the GUIOlympics. I feel decidedly ambivalent.
I just noticed an interface design pattern: the practice of displaying status as a way of clarifying actions. For example, compare the following: Add or remove fields 3 fields currently selected | Add or remove fields In the second example, it’s more clear that by clicking you’d be adding or removing fields from some set you’ve selected rather than from the system itself. OK, the earth’s not shaking, but it’s good to notice what we’re doing, right?
Anyone have favorite online timelines? I’ve always liked (aspects of) this one: http://www.motown.com/classicmotown/ and this one is pretty (if a little cumbersome to interact with): http://www.secondstory.com Any other favorites? Let me know.
Design Not Found, 37 Signals’ collection of “real-world examples of good and bad contingency design.” (via cam)
And good actual content on UIWEB.COM—Web and interaction design
Getting Back to Back: Alternate Behaviors for a Web Browser’s Back Buttons (via gleanings)
There’s a lot of excellent information in Val Casey’s Notes on Visual and Interaction Design (too bad the visual and interaction design isn’t stronger).
I haven’t had a chance to read it yet, but there’s an interview with Harry Saddler of MetaDesign, who is very smart, up as part of an interview series on Loop.
Nice article on Interface Usability in Flash. (via gleanings)
I think one of the best uses of DHTML is to provide contextual information without requiring people to open a new page. There’s a nice example of this on the hp search page, where search tips pop up like so:
If you’re interested, I wrote a bit o’ JavaScript for Apple’s dev site to do exactly this.
I haven’t yet poked around the Aqua Human Interface Guidelines, but I imagine they’re worth a look.
YA good Feed on interface: Cory Doctorow interview.
It’s good to see some interface variety, such as Relevare, which uses zooming to an interesting effect. So what if it’s imperfect, it’s something different, actually implemented in the world in a basically usable fashion (contrast with Denim, for example, a good idea marred by being unfinished), and it’s not another damn. branching. tree.
What a difference intelligent grouping makes:
Haven’t installed it yet, so I can’t try out the mouse gestures in Opera.
Taylor is looking for a better way to represent the concept of “store” or “save” iconically. Maybe someday it’ll be so ingrained that we can have something totally abstracted like the stop sign, but I wonder if the current floppy disk icon itself can just become abstracted into something like:
or even 
Pad++ : Zooming User Interfaces (ZUIs) has some really interesting ideas. The developers didn’t just stop with the single idea of a zooming UI, but they improved it by creating intelligent exceptions (for example, you can make portions of a document non-zooming) which vastly increase the usefulness of the tool. Check out the web browser they built. (via peterme)
Erin has graciously shared this UE design process flow diagram (developed at AltaVista; hope she doesn’t get in trouble).
Enough with Themes Already is a nice rant. I definitely agree in general, but I also think it’s no accident that we all consider ourselves interface designers at a time when we are all grappling with interfaces all the time. (via splorp)
Y’know.. I’ve never even considered installing a browser toolbar thingy before, but damn, Google’s toolbar is really useful. Aside from a persistent search box (that can search the text of the current page or site as well as Google), it has a button to hack up urls and a link to Google’s cached version of a page.
Links I missed logging while I was gone:
Evolt: Useful 404 pages
O’Reilly: The case against micropayments
Doors of Perception 6: Lightness
Gamasutra: Need-based AI
(links via various)
I’m sure this GUI timeline has made the rounds before. I think it’s funny how some companies got totally sidetracked trying to figure out scrollbars (check out the left-hand scrollbars on the X-windows pic). They seem so simple now but they’re obviously not.
Like I said, I’ve been poking around the Mac Human Interface Guidelines a bit. I love the fact that one of their guiding principles was “aesthetic integrity”. It’s remarkable because it acknowledges the role visual design plays in interface usability, in contrast to the current vogue for pitting “usability” against “design” as somehow diametrically-opposed disciplines.
I just needed to look something up in the Macintosh Human Interface Guidelines. It’s good to actually read the rationale for basic interface elements (like menus) we take for granted. A lot of careful thought went into those guidelines.
On the other hand, the past few days using a Mac makes me wonder where they went wrong (or stopped evolving the interface). There are so many annoyances, coming from (the also-annoying) Windows. Ironically (given Apple’s tight control over their hardware) many of the most annoying things are hardware issues (like the lack of a right mouse button or the inability to tap on the trackpad to click).
From Grant, a link to the graying but very worthwhile Human Interface Subtleties. This is exactly the type of positive criticism I’d like to see more of.
3.14159, 42, and 7+/-2: Three Numbers That (Should) Have Nothing To Do With User Interface Design … I’ve never been that fond of the 7 +/- 2 rule myself, mostly because (if applied out of context) it totally ignores the effects of chunking (i.e. if you have 5 groupings of 5 menu options, that’s not the same as 25 items). And then there’s the question (not really addressed in this still very fine article) of whether short-term recall is all that relevant to using a visual menu. (via webword)
It often feels to me that interface design is only noticed when it’s bad. This is unsurprising given the goal of interface transparency we often (rightly) strive for. However, it encourages many of us to design from fear rather than from hope; we try not to be immortalized by messing up (“I can’t believe they used tabs. Yuck!”) rather than freely striving for a truly excellent solution.
I don’t want to overstate the case here.. it’s not that we don’t try to come up with the best solution, but rather that we are perhaps overly
motivated from worry rather than exploration. And I think this is because most of what we read and write is negative, either overtly so or in the orm of proscriptive rules (make links blue, use tabs, don’t use tabs, etc).
So, basically, I want more positive feedback. I know of a few examples, such as:
- Interface Hall of Fame (but compare the amount of shame vs. fame in the left-hand nav)
- Tufte’s books
Nomenclature is important:
So, the whole pattern
language thing… It’s a favorite book and an immediately appealing
idea, I think because we find ourselves (web designers for example)
repeating the same situations and solving the same problems over and
over. Wouldn’t it be great if we could somehow get all that knowledge down
somewhere in a systematic and holistic way? And I think it could work if
there was a single, easy-to-add-to repository for all that knowledge and
some way of gardening it for credibility (that SOS
stuff peterme’s always on about).
But as it is, with multiple, competing,
incomplete
pattern languages, they’re totally useless (yeah, I recognize the irony of
my saying this after my 10/30 post about democratization of interface
design, so sue me).
But basically, when something pops into my head (or your head, or his head), such as how an
interface object can either show you the current state of the system or it
can allow you to change that state or both, there’s nothing for me to do
with that idea other than to use it in my own work and maybe plop it down
here on my weblog where it will immediately fade into the deep background
of a big hard drive somewhere. Sigh.
Another good set of slides from peter, this time a sort of basic intro to how interfaces communicate. This is where I would send a new graphic designer who wanted to learn how to do web design.
Democracy and Interface Design Manifesto, take 1
So, Jakob’s latest (Flash: 99% Bad) sort of got me riled up. It’s not the self-servingly inflammatory title so much as the whole idea of rigidly enforced usability standards and expertise. In Jakob’s view (and that of other usability guild members), the web has “fundamental interaction principles” so that “the specification of a new GUI widget is a major human-factors exercise” requiring “the world’s best interaction designers [to work] for years testing numerous design alternatives.” In short, interface design is the province of a highly technical priesthood of experts (such as Jakob et al).
The alternative, I think, is a democratization of interface design.* I applaud the fact that 15-year-olds everywhere are experimenting with interfaces. We’ve been stuck in the same WIMPy rut for far too long, with the usability priesthood overseeing the creation of every new GUI widget. And how they lament the fact that web design flaunts their crusty old standards. And the rest of us go along with it because we need the seal of approval, because we truly care about usability (a noble thing), and, well, because it’s easier to follow a set of rules (which grant us surrogate expertise) than it is to venture way out there where the punks and kids and amateurs are mucking things up.
I want to be clear here: I am not saying that much currrent Flash interface design is particularly good or usable, and I am not saying that we should stop paying attention to usability. What I am saying is that given a choice between the Win/Mac/Yahoo status quo and indiscriminate experimentation, I’ll take the latter, thank you, and “customer experience” be damned!
To put it another way, design is language. Do we want a rigid top-down legislation of design language (think French) or do we want a language that evolves to meet the needs of the people speaking it? If we choose the latter, we need to think about who gets to speak. And I say the more the merrier. Are you with me?
* It’s funny, because late in that same article, Nielsen suggests that “if all content creators could make a Flash object as easily as they write a standard Web page, then perhaps many of these problems would be alleviated.” So the problem on one hand is that a new scrollbar can be “designed over the weekend”, but on the other hand Flash is too hard.
Really interesting-looking article: The three mirrors of interaction: a holistic approach to user interfaces out of PARC. There’s something truly beautiful about this kind of humanistic approach. It almost needs its own term, like “human-centered design”. (thanks, xblog)
Adobe sues Macromedia over tabbed palettes… my only comment is to take a look at the UI the story appears in (although to be fair, there’s quite a bit more to the patent than just tabs). (via captain cursor and acute)
I’ve gotten some interesting suggestions in reply to my multiple views query. I haven’t come up with anything really satisfactory yet, but I think I have a better idea of what I want:
I guess the main point is that you need some control which presents all the choices (radio buttons, tabs, not pulldowns), conveys exclusivity (pulldowns, radio buttons, not tabs), /and/ looks like it would control the UI (tabs, not radio buttons or pulldowns).
The closest thing I’ve seen is on bigstep.com, where they use pairs of buttons.. the active of which appears to be pushed in:
Trouble is, I can never figure out which one is selected, but I think that’s probably a visual design issue which could be fixed. (Yeah, I know these are just radio buttons, but they look like they would change the UI, which regular radio buttons do not.)
Vincent pointed me to David Bliss’ site, where there’s some very thoughtful UE-related pieces, such as this one on narrative scenarios as a design tool.
ps—here’s a quick sketch of what I want to do, using radio buttons. Trouble is, this won’t work for even a slightly more complex application. There must be a better alternative.
I’m looking for examples of interfaces that deal with multiple views on the same or similar information. One option is a magic lens. The more typical method is tabs.
The application is a site where people need to make appointments. They can do this by time or by location, but not both, so I’d rather only one “method” be displayed at a time.
This doesn’t make sense to me as a magic lens since the two views are modally(?) and hierarchically equivalent (I see magic lenses making the most sense when there are multiple levels or modes or types of views).
The problem with tabs, on the other hand, is that when you’re on one tab it’s easy to assume what’s on the other tab still exists. But in this application they’re mutually exclusive.
What I want is something that communicates:
1) there are 2 ways of doing something
2) they’re mutually exclusive
Let me know if you’ve seen this done well?
I hate dichotomies like “Usability vs. Design.” The world is just so much more interesting than that. (er.. was that article tongue-in-cheek and I just didn’t get it?)
Good ol’ Microsoft research: Implications of Memory, Structure and Scent for Information Retrieval. (via good ol’ InfoDesign)
Lisa GUI Prototypes. Wow, it’s amazing how little things’ve changed in 20 years. (via camworld)
Heather Anne pointed to this paper on affordances in software design (which does a particularly good job of distinguishing affordances from conventions).
(… but subtract 3 points for parrotting Jakob’s silly insistence on default link colors.)
Recently posted on CHI-WEB: PalmOS User Interface Guidelines.
ps—I generally hate sliders. The mouse is far too crude of an input device to be practical in most cases. Sliders have the advantage of showing the full range of possible values for a given parameter, but in most cases that’s irrelevant. If I’m choosing a font size, for example, or a color, I don’t much care where on the scale I am (with the exception of the two end-points). There are a few cases—such as a volume control—where the affordances of sliders make sense. The following (from Fireworks) is not one of them:
From xblog, a link to razorfish reports, which I had seen at least one of before, but never thought to look for the index page. (don’t let this one, keep you from looking at the others).
The canonical (?) Interaction Design Patterns Home Page. (via vincent)
Beating a horse that refuses to die: Salon: DEN, Boo: R.I.P.:
“In the year 2000, there is no excuse for any professional Web site that expects to reach a wide audience of users to put on its home page an animation that requires a browser plug-in.”I disagree. I think, for example, that Animation Express (which I’ve worked on) is totally justified in having a Flash frontdoor. The site is a gallery of Flash (and some Quicktime and Shockwave) animation, and if you don’t have the plug-in, you’re not going to be able to see the content. That doesn’t mean you get a broken icon or a blank screen if you don’t have the plug-in. You just get redirected to a page that says it looks like you don’t have Flash and explains how to get it.
So, again, the problem is not using Flash or doing whizzy things, it’s doing them badly or foolishly. OK, I shut up now. (link via goodexperience)
I really like the discussion that boo.com has provoked. Plenty has been written about the site’s usability problems, but the reality is a lot more complex. My take (once I got over my initial horror on seeing the site) has always been that it’s a crying shame that boo was so poorly implemented because the impulse to push a bit at what a commerce site can be is absolutely right on. Not that all sites should include animated agents (or full-screen flash interfaces or whatever), but goddammit everything doesn’t have to look like amazon/yahoo/useit.com. And holding up boo as the example (bad website! bad!) is just disingenuous.
I just got back from a week in Hawaii, which was very relaxing, thanks for asking! I went on four dives and it occurred to me—as it does every time I dive—that SCUBA allows me to cross an interface, to inhabit both realms. Thankfully, its own interface is extremely transparent (open a valve, stick the regulator in your mouth and you can breathe). It reminds me of William Gibson’s depiction of jacking in and being able to interact with data constructs spatially.. diving in data.
I never found plumbdesign’s visual thesaurus particularly useful as a thesaurus, but I do find myself using it as an example (of various things) from time to time and I can never remember their domain name, so I’m putting it here.
Ok, so maybe I’m too lame to leave my computer… peter pointed out WordPerhect, which makes me love humanity and question both what computer applications are and what they could be. Cheers!
Patrick Lynch: Visual Design for the User Interface. (via xblog)
Um.. no, I’m not going to choose a new username for your lame-ass portal.
There’s a general feeling in the air that application UI-designers have a lot to learn from video game design. But for some reason it seems very hard to apply game-design theory to apps, except in a tentative or completely generic sort of way. Is this because, as Jef Raskin puts it, people who are trying to get their work done generally don’t want to be playing games? Or is it just for lack of experimentation? Or…?
Designing interfaces for online apps, I keep thinking about the confusion between where the browser ends and the application begins (or between a site’s meta navigation links and its application functionality). How can designers convey the difference between a web page and a web application?
Well, I asked about popping open new windows with no controls on CHI-Web and got a thoughtful post in favor of new windows and a thoughtful argument against ‘em.
Another old link: The Century’s Top 10 Interfaces.. imperfect, but what isn’t?
I was just reminded (by rebecca) of Bryan Boyer’s Utilizing Hidden Information Spaces, which will come in handy when I start preparing for an upcoming talk on scripting the UI.
It’s amazing how quickly the net evolves.. While I liked the impulse behind A Standard for Site Organization, the specific suggestion (standard directory names for common site sections) seemed downright archaic to me: Why wouldn’t you just have a standard XML site-description file that pointed to site resources, a la deepleap? But then I noticed the article’s from 1998. It makes me want some sort of ambient date representation, like documents that start to generate a smell as they decay.
I wish I had been reading lemonyellow all along. I guess that’s what archives are for. I just stumbled on a thought-provoking post from last year about adaptive reuse on the web. It’s a really interesting application of architecture to interface design. I guess the barrier on the web is that (with obvious exceptions that prove the rule) visitors to web sites don’t live in them. Any changes made over time must be made by the original designers (or their descendents) who interpret and apply the needs of the people using the site. Of course, there’s lot’s of feedback to go on, but it’s a pretty long way from designing a new feature based on customer support email to knocking down a wall in your very own living room.
But, of course, the point was how do you design for modification. And is there a solution more satisfying than YA set of modular blocks? [sadly lemonyellow is no more]
While I share a lot of the fears of this suck column on skins, I think a lot of good can come of them. First of all, it’s been noted that we are stuck in an imperfect UI paradigm, and I think it will be very hard for HCI professionals to break free without some pushing. Christina Aguillera skins notwithstanding, putting control of the entie UI in the hands of anyone with a text editor will certainly do some pushing on our notions of what is acceptable human-computer interaction. Second, by putting full control of the chrome in the hands of developers, XUL effectively does away with the browser as browser. Mozilla is a web-based application platform, and that is very interesting to me. Anything that gets me away from building every damn function on a site as a wizard-like loop is welcome at this point. The trouble is that (as usual) it’s not cross-platform.
Oh, and Jef Raskin’s site, which has a whole lot of wisdom. I’m really looking forward to reading The Humane Interface.
And, as long as I’m archiving old links: tim’s user interface guidelines.
An old, old link that I just found again: Interface Hall of Shame.
Via peterme, The Elements of User Experience (PDF), a sweet chart exploring the tension between “Web as software interface” and “Web as hypertext system,” which also gives a nice theoretical map of the different types of work involved in user experience design. Thinking about the app-hypertext tension makes me think we, as users, have a lot of unlearning to do (e.g. unlearn that you have to be really careful before clicking on a link because it’ll take a long time to download the next page).
There should really be a book or better yet a website in the form of a web UI cookbook, with annotated recipes for common interface situations. For example, shopping cart and checkout interfaces. The “recipes” don’t have to be perfect, but it’s so damn useful to have a starting point. Why should we have to keep redesigning shopping carts and search results from scratch?
I ran across this article about creating a UI “blueprint” and I think there’s definitely value to this sort of formal approach. But, I don’t like the tendency in many HCI discussions (and indeed in quite a few Web shops) to separate interface from visual design. In my view, “graphic design” that isn’t about how people will interact with it is simply illustration. So, here’s the pithy, oversimplified formula: Design == Interaction Design.