Results tagged “HCI” from kwc blog

MovableType 4: Categories demoted?

|

I'm going to put on my UI hat to talk about the MovableType 4 beta once again. MovableType has long had distinction between 'primary category' and 'secondary categories'. There's not much distinction between the two other than the primary category is the one you see listed in the MT entry management menus. This has lead to a progression of category-entry widgets in MT to try and project this distinction to the user. The side-effect of this progression is that the primary category has also had the distinction of being the category you can enter quickly.

MT4 shakes up this long-held distinction. For a brief summary of the category widget, analysis of the new widget, and suggestions for improvement (in other words, another of my rants), please read on.

MovableType 4, my attempted redesign

|

I'll have some more thoughts on the MovableType 4 beta, but for now I wanted to focus on one of the major changes for MT4: the new UI. MT4 looks similar to some of the early Vox UIs, which clusters the menu items at the top of the screen in pulldown menus. MT3 and MT2 used a combination of left-hand sidebar and top navigation. This reorganization has its pluses and minuses: it dedicates more page width to the focal content (e.g. your new entry screen), but it also takes a lot longer to access menu items -- with MT3 every menu item was visible and immediately click-able. The MT4 designers clearly recognized this sacrifice and added a dedicated "Write Entry" button so that it would remain quickly accessible.

You spend more time writing an entry than navigating, so it seems a good trade-off to reclaim pixels from navigation buttons. But I feel like the potential isn't fully realized with MT4. If navigation speed is going to be sacrificed to optimize content space, there is a lot more that could be done. The new entry-editing box is only ~25% wider (686 pixels vs. 554) and only about 14% taller (131 pixels versus 115). With some 5-minutes of quick redesigning in Photoshop, I came up with a layout that is 75% taller than the MT4 design: 14 lines of editable content instead of just 8. That's a lot less scrolling to see what you've written. My 'redesign' is just a quick hack job, but I think it demonstrates the potential.

Here's my reorganized layout (~174 pixels above the entry editing box):

editingscreen.mt4kwc.jpg

Update: m has already implemented this design with a modified structure.css

I've put more side-by-side comparisons in the extended entry.

CHI Wednesday notes

|

CHI Tuesday notes

|

CHI Monday notes

|

Photoshop multitouch

|

Admittedly, not all of this made intuitive sense to me at the first get-go and some of the interactions seemed like they required too much slow, deliberate movement (that may have just been a director's choice -- update: or its possible that this is just a conceptual mockup, i.e. fake), but an interesting take on how to port a Photoshop interface into a multitouch world. But I would be happy just to have a screen that big in the first place.

Update: eric dolecki on John Nack's blog points out that this may be a fake (i.e. concept mockup) as the UI sometimes leads the gesture.

via John Nack

Mortal Kombat for Wii

|

Gamespot has an interview and demo video with Ed Boon of Mortal Kombat: Armageddon. Watching Boon swing around the controller forward and back to throw Scorpion's spear has me pretty excited to see the fighting game genre adapted to Wii controls, even if I was more of a Street Fighter II player than Mortal Kombat back in the day. Quarter-circles, semi-circles, and forward-back motions look far more graceful when executed with a Wiimote.

Mortal Kombat is the first game that I've seen to take a different control perspective for the Wiimote. Wii Sports, Warioware, SSX: Blur and Madden: 07 are all first-person control systems that requires you to think of the characters on the screen as your avatar. Mortal Kombat appears to have chosen a god-perspective control system that makes the character on the screen your puppet. Instead of flinging the Wii controller forward as you would if you were Scorpion in the game, you flick it from left-to-right or right-to-left depending on whether Scorpion is facing right or left. The Mii Creator shares this same god perspective and I'm sure that there are others, but this video was a fresh take for me.

A few links

|

MareNostrumchurch.s.jpg nielsenstrike.jpg jackpc.jpg

Free Web library = Hot

|

Yahoo has released several ui libraries. Open APIs are pretty cool, but free (Creative Commons) code gives you more options. I've been considering a redesign of this site for quite some time; the ajax, animation, and dom libraries might be of some use. They've also released a series of user interface guidelines that they call 'design patterns,' which I found interesting in that such things are now considered important enough to share.

Book: Design of Everyday Things

|

meta warned me that when I read The Design of Everyday Things, I would learn very little. This is a compliment to the book, rather than a criticism. We both worked at PARC at the time and much of what is in the book is ingrained within the PARC culture. Thus, to say that I would learn very little is to say how influential the ideas of this book are. According to the Director of User Experience at TiVo, the book is somewhat of a bible. You'll find my own attempt at being Norman in "Affordances of a Seven-Foot Egg."

Another compliment I will pay this book is, in retrospect, the ideas presented seem like commonsense. As Norman dissects bad doors and light switch arrangements, the criticisms are intuitive, yet we must wonder, if this truly was commonsense, why is it so easy to find examples of bad design in everyday things? It's not hard to find a doors with "push" or "pull" signs taped on because the wrong type of handle was used. It's not hard to remember being confronted with an array of light switches and not knowing which light went with which. Sometimes the explanation is that someone was being cheap. Or lazy. But we also see simple principles violated in expensive, intensively designed products like airplanes and cars. Bad design comes with any price tag.

The most valuable aspect of the book for me is that it provides a vocabulary for being more specific about evaluating design. Norman once said something akin to, if it has poor usability, it probably got a design award. We don't do a good job separating out aesthetics and usability when we use the term design. The iPod is cited again and again as an example of "good design," but there are many usability problems. It's mappings are poor: press the center button and the next menu scrolls in from the right; press up and the previous menu scrolls in from the left; pressing left or right changes the track that's playing; rotating the scrollwheel wheel moves a linear menu up and down. The visibility is also poor: two weeks ago I taught two long-time iPod users that you can fast-forward/rewind, rate songs, and view album art if you press the center button while a song is playing.

I look forward to reading Norman's Emotional Design. I'm sure it will provide a vocabulary for discussing the good aspects of the iPod design, and then at last I can make my $billions.

Partial/ongoing notes in the extended.

Beyond Menus and Toolbars in Microsoft Office
Jensen Harris, MS Office UE Team
http://blogs.msdn.com/jensenh/
BayCHI

Office 12 is an upgrade I wouldn't mind paying for, that is, assuming that work didn't let us get free copies. Those are big words for me, considering my "I Hate Microsoft" series of blog entries. I can imagine making documents faster with Office 12, or at least I can imagine making better looking documents in the same amount of time. Excel, which has been less functional for me than the spreadsheet program I used on my Apple IIe, looks like it will be come a useful tool for data analysis.

I felt that Harris made a convincing case as to why they are doing the UI revamp, that it's more than a marketing trick. The conventional wisdom out there is "Everything I need was in office [95, 97, 2000]." (For me it was Word 95). They collected a ton of data (including over a billion Office sessions) that told a different story. On a list of the top ten most requested features for Office: four of them were already in Office. Their conclusion was that "Office is good enough in that people have made peace with it." Another observation from the data was that the average user spends more time with Office (2.6 hrs/day) than they do with their spouse (2.4 hrs/day). When you take 400 million users * 2.6 hrs/day, it seems worth improving that experience. Harris rhetorically asked, "Have we reached the pinnacle of software that people use to get their job done everyday?"

It was also clear from the evolution of the Office design that a revamp was in order. The number of toolbars and taskpanes was getting out of control: they were create user interfaces to manage their user interface. There simply wasn't a good menu+toolbar paradigm for managing programs with 1500+ commands.

My notes are in the extended. I transcribed a lot of the new Office 12 elements, but text doesn't do a very good job of describing user interface. Overall, it's a more visually oriented interface: large gallery icons show what a command does and hovering over the icon gives you a preview of the result, e.g. if you hover over a font, your select is shown with that font. The UI is also much more contextualized. What you think of being on your right-click menu is now the focus of your toolbar menu. One of the most important design constraints introduced is that the UI is confined to a fix region of the screen and doesn't do any of the silly auto-hiding or auto-rearranging of Office past.

If you're really curious about the Office 12 UI I recommend visiting Harris' blog. You will find out that yes, they fixed the stupid start presentation button in Powerpoint. Also, new fonts!. Death to Times New Roman!

Summary tidbits: * "Is it worth taking this pixel away from the user?" * You must remove to simplify * Is there a classic mode? No. * They were trying to figure out what some of the commands in Excel did. Found out some options in Excel weren't hooked up into any code: "They didn't do anything!" * On Office 2000's 'auto' features: "The computer looks at the things you use the most and moves them around all the time." * On Office 2002 task panes: "New features aren't being invented, but I bet they will if we create a whole new rectangle"

Results-Oriented UI

|

I didn't realize that the style of interaction in the upcoming Office 12 had a name: "results-oriented user interface." I learned it's name and more from Jakob Nielsen's alertbox column on What You Get is What You See (WYGIWYS). According to Nielsen, Word 2003 has over 1,500 commands. A results-oriented interface says screw these basic commands that you can't locate anyway -- you tell me what you want and I'll put together the variety of commands necessary to do that. The Office 12 screenshots are my first exposure to this approach and I've liked what I've seen so far, but full judgement comes when I can actually play with it.

Good design - Weber

|

I just used the Weber Web site to order some replacement parts for a grill and I have to say I was impressed enough to write this short review. The highlights:

  • They have a simple pictoral guide to help you figure out what model you have.
  • You're also given the choice of ordering the replacement part online or finding a nearby dealer.
  • When you click on an individual dealer it shows what they models of grills they carry.

A search with no 'enter'

|

Yahoo has launched Instant Search, it's attempt to one-up Google Suggest. Instead of trying to autocomplete your search terms for you, the top search result appears for you as you type, i.e. you don't hit enter or click 'search.' I can see this approach solving a lot of usability problems for Web search for the average user (where average user is probably not someone reading this blog). According to Nielsen, 40% of the search population is not search literate, which he demonstrated by showing a video of an example user in this 40% attempting to do a search query. The number of different ways other than the correct way the user tried was impressive, though understandable.

The elimination of one the search steps should be beneficial to the 40% crowd. Also, this could be merged with a Google Suggest-like autocomplete -- the autocomplete to speed text entry and reduce spelling errors, and the instant search to eliminate problems with clicking the correct button or typing the correct key.

As currently implemented, though, the Y! Instant Search isn't ready to help that many people. The number of queries for which there is an actually instant search result is very small, so small that you have to adapt their examples searches to figure what works. I see this as a big impediment to my general use because the instant search is just slow enough that it's hard to tell whether the instant search is still being fetched or there is no instant search result. Also, I find the general Yahoo! Search results page (the page you get if you do click 'search') extremely annoying. On my laptop screen the top search result isn't even fully visible without scrolling down due to all the ads at the top. A search engine that places most of its results 'below the fold' is rather worthless.

Affordances of a Seven-Foot Egg

|

egg

"What are the affordances of an egg?"

gus, coming from his HCI background, asked this question after I couldn't help bringing up the Seven-Foot Art Egg (note: this post won't make any sense unless you read my original Art Egg Post).

It's such a great way to frame the Giant Egg that I can't resist carrying out an analysis. After all, if it is going to be "subject to other thoughts/acts of violence typically inflicted on seven-foot tall egg sculptures," perhaps the psychology of industrial design can shed some light on what fate(s) await Egg II (Egg I died glass-bubbly in a warehouse fire).

A popular discussion of affordances is in Don Norman's book, The Design/Psychology of Everyday Things, which serves as a bible for companies like TiVo attempting to do consumer-oriented product design. As Don Norman defines it, affordance "refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used." For example, "plates are for pushing," and "knobs are for turning."

Drawing from Palo Alto Daily News quotes, Don Norman, and my own pompous assertions, here is my list of "The Affordances of a Seven-Foot Egg":

Cracking/breaking

The most common usage of an egg is, of course, cracking it open to access the contents inside. One of the acts of vandalism the PADN noted was teenagers ramming a shopping cart into the Egg, and I personally witnessed a passerby adjust his path through the plaza so that he could deliver a swift kick.

This leads us to the next affordance:

Containing (corollary to cracking/breaking)

Whether it be eggs we eat or the plastic easter eggs with their candy surprises, eggs contain stuff we want. This is a Giant Egg, so one must assume that the affordance of a Seven-Foot Tall Egg is that it contains something really good -- it's big enough to give birth to full-sized Shaq. Symbolically the Egg is supposed to contain Silicon Valley innovation, but the crowd quotes from the PADN were more mundane.

Grace, a registered nurse in San Jose, said "It's very ornate, like a time capsule -- somthing I want to open up and see if there's anything in there. It makes people think."

Another person quoted in the PADN noted the possible technological influence of the Egg on its contents:

"I like the shape, it's pretty cool," Geo said. "I wonder if there is a baby computer inside?"

$10,000 seems like quite a lot to hatch a computer -- I'm hoping for something more grandiose that still harnesses the technological potential, something representing the role of US government and Asian investment in the Silicon Valley, something like... MechaGodzilla.

The 1993 (from Heisei series) Super MechaGodzilla was designed by a joint American- Japanese project under the jurisdiction of the United Nations Godzilla CounterMeasures Center (UNGCC) to defend the world from Godzilla.

Rocking/Tipping/Rolling/Spinning

Admittedly, the role of eggs as food means that we don't too often play with it, but rolling as an affordance of eggs is strong enough to make it into an Easter tradition: Egg Rolls. An egg's oblong shape allows for other variations on rolling, including rocking, tipping, and spinning.

The PADN provides a supporting quote from the resident teenage contingent:

"[the Egg] begs to be rolled down the street" and "rocked from its base."

Even a administrative associate at Stanford Medical Center couldn't help mixing compliments and a test of its defenses:

[The administrative associate] caught sight of the egg after getting off work from Stanford Medical Center. "It's unique. It's very well put together," he said, while trying to rock the egg.

Writing

Norman, in discussing graffiti on British Rail platforms, notes that "Flat, porous, smooth surfaces are for writing on." While the archetypal egg is porous and smooth, it doesn't provide that much flat writing surface. However, a Seven-Foot Tall Egg is a whole new species of egg, and the artist has conveniently coated all the circuit boards with a nice, smooth sealant. The Egg also provides it own cues as to this affordance: the artist has already put various handwritten multilingual phrases across its surface.

Multiple PADN quotees noted this affordance:

Tom, from Los Altos said he'd be surprised if it survives in the plaza for a long time: "It practically says, 'Spray paint me," he said.

An employee of Pizza My Heart, Emilio, thought that it didn't fit in with the environment. "It's gonna become art with all the kids' graffiti," he said.

Approachable

This isn't an affordance of the egg itself -- it's more a lack of affordance by the choice of how it was installed. Many public sculptures are mounted on pseudo-pedestals, a slightly raised bit of concrete that sets it apart from the public walking area around it. These pedestals remove the affordance of walking in the area around the artwork, creating a virtual wall of the look-don't-touch museum experience.

The Art Egg is installed with no demarcations between it and the rest of the plaza, daring you to walk directly past it or approach it. It's there to be bumped into, shoved, rocked, or otherwise used within its affordances. Visit the Egg for a brief amount of time and you'll notice multiple people touching, bumping, shoving, and even kicking it as they walk past.

Hugging

It's slightly above average human height, it's round, and you can walk right up to it. After all it's been through and all the entertainment it provided me (via the PADN), I gave it a hug.

Blasted midnight

|

I was shopping for Episode III tickets online and came across this difficult-to-interpret listing:

screenshot

12:30am is listed last, which would seem to indicate that it means the morning of the 20th, but if I click on 12:30am it tells me that I would be purchasing tickets for "12:30am the evening of Thu, May 19."

parakkum has clarified that they actually mean "12:30am the morning of the Fri, May 20," as it appears that the real midnight showing tickets are listed when you choose Wed, May 18.

Peter Norvig, Google; Ken Norton, Yahoo!; Mark Fletcher, Bloglines/Ask Jeeves; Udi Manber, A9; Jakob Nielsen, NN Group

I went with bp and Neil to a BayCHI talk on "Recent Innovations in Search." I agree with bp's sentiment -- there were some interesting moments, but the talk was short on revelations or insights. I guess that is to be expected as the title of the talk is past focused ("Recent Innovations") rather than future focused ("Future Innovations"); it's hard to believe that the panelists would give away yet unrevealed technologies they were working on. I'm going to try and save as much effort as possible, given that bp posted his notes. In fact, as I am going to crib from his notes, or just omit what he already has, you should just go read them instead.

Talk: Tivo

|

Revolutionizing Consumer Electronics: Welcome to the TiVolution´┐Ż! Paul Newby, Director of Consumer Design Margret Schmidt, Director of User Experience (UE), TiVo

I went to the TiVo talk at BayCHI/PARC. The best part of the night, perhaps, was that I have a bunch of great TiVo schwag: a TiVo doll and two new TiVo remotes -- one to replace honeyfield's remote, which has been mistaken for bunny food, and one to solve the problem we had last week of, when you lose the TiVo remote, there's no way for you to watch TV. The second best part of the night is that I learned a new TiVo feature that didn't exist on the Series 1 remote: if you press advance (the ->| button) in a list, it will jump to the end (very useful for Home Media Option).

I have detailed notes, but it's hard for me to put the effort into transcribing all of them, mainly because I've heard most of what she's said having worked at PARC for two years (big human-computer interaction focus) and having owned a TiVo for two years. As metamanda put it when I asked her if I should read Don Norman's Design of Everyday Things, she said it was good, but I've already heard everything in it multiple times. Seeing as Norman's book is somewhat of a bible for the TiVo User Experience team, I think the same applies here.

It's also hard for me to transcribe my notes because much of what was said has already been said in this interview Schmidt did for PVRBlog

There was an interesting semi-anecdote on TiVo's "overshoot correction" feature (where it jumps back a little after a fast forward). Many people think that TiVo is actually "learning" this (even across multiple users), i.e. when they fast forward and it doesn't jump to the spot that they wanted, they assume it was because they must have deviated from their normal reaction time (it's actually a hardcoded number based on the fast forward speed, derived from research).

My last thought before this switches into notes is that I wonder if TiVo is going to put an Apple-style clickwheel on the remote to replace the direction pad. The problem with navigating long lists was mentioned multiple times by them, and Margret did even mention a scrollwheel as a possibility, and it seems to me that the newest clickwheel comes the closest to carrying the TiVo direction pad concept forward.

Purple audio

|

I enjoyed this Jon Udell post that discusses adding the feasability of linking to any portion of a larger audio file, which can be viewed as equivalent to Purple Numbers for audio.

Tangible gum interfaces

|

gumMy 1010 bookmarklet is down, so I'll post this here.

In London they've come up with a new "tangible" interface, psychologically similar to the fly in the urinal interface. In order to encourage people to not put their gum under tables, on the ground, etc... posters featuring a grid of "celebrities" are being deployed with the message: "Who deserves your gum?" An astonishing $265M is spent every year in the UK cleaning up gum, which this solution hopes to cut into. Perhaps this could be used to replace Gallup polls.

BBC NEWS | England | London | Celebrities used as gum targets

Elephants

|

I really like this elephant graphic that Beth Mazur posted on her blog (from louis rosenfeld's bloug).
elephant graphic
- IDblog: Yet another UX/ED organization?

BayCHI at PARC

|

Cory Doctorow (of BoingBoing and Amazon.com: Down and Out... fame) will be speaking at BayCHI at PARC, so I thought I'd post a talk pointer:
- Tuesday, August 12, 2003: Monthly Program (BayCHI)

Section 508

|

This is the government's Web site on accessibility standards. Try viewing it in a non-IE browser and it gets even sadder. I guess they think that by merely putting in a widget that allows you to adjust the font size on the Web site it becomes more accessible. However, if you notice, the widget:
(a) doesn't change the font size of the menu links
(b) is in 12px text rendered over a mixed background

Apparently you also need the Flash plugin to view portions of the site, though I haven't found those pages yet.

Interaction Design Links

|

I made my way back over to IDblog and stumbled upon some interesting presentations (Thanks Beth Mazur!).

George Olsen of interaction by design has a nice presentation on IA and User Experience, which spouts some good common-sense-by-example principles.

Another presentation I just read was Is a picture worth a thousand words? by Jean-luc Doumont. A lot of it I skimmed over, but one interesting point I liked was that "nonverbal processing is fast and independent from verbal processing," which is important to remember when designing slideware. Another interesting side point is that abstract drawings are often better communicators than photos.

After reading all of these presentations, you might find this Powerpoint presentation of Tufte's Powerpoint critique.

Information Architect's Wiki

|

Nice Wiki effort that I found a link off of IDBlog: IAwiki.