Category Archives: Interface Design
Pancake People
But today, I see within us all (myself included) the replacement of complex inner density with a new kind of self-evolving under the pressure of information overload and the technology of the “instantly available”. A new self that needs to contain less and less of an inner repertory of dense cultural inheritance—as we all become “pancake people”—spread wide and thin as we connect with that vast network of information accessed by the mere touch of a button.
via Richard Foreman via Nicholas Carr
which is interesting and everything but then I came across this quote by Steven Johnson:
But the truth is most of our information tools still have a fuzziness built into them that can, in Richard Foreman’s words, “often open doors to new worlds.” It really depends on how you choose to use the tool. Personally, I have two modes of using Google: one very directed and goal-oriented, the other more open-ended and exploratory. Sometimes I use Google to find a specific fact: an address, the spelling of a name, the number of neurons estimated to reside in the human brain, the dates of the little ice age. In those situations, I’m not looking for mistakes, and thankfully Google’s quite good at avoiding them. But I also use Google in a far more serendipitous way, when I’m exploring an idea or a theme or an author’s work: I’ll start with a general query and probe around a little and see what the oracle turns up; sometimes I’ll follow a trail of links out from the original search; sometimes I’ll return and tweak the terms and start again. Invariably, those explorations take me to places I wasn’t originally expecting to go—and that’s precisely why I cherish them. (I have a similar tool for exploring my own research notes—a program called DevonThink that lets me see semantic associations between the thousands of short notes and quotations that I’ve assembled on my hard drive.)
which I thought was relevant to Clearspace (the word serendipitous comes up more often than you’d think in product conversations) because it shows how search is more than just a directed, singular focus kind of activity that lots of people assume it to be. The first quote is telling too: all the iPhoning, Facebooking, Twittering, Flickring, Clearspacing and Emailing leaves us stretched thin: when was the last time you sat down to read something or write something longer than a single page?
RSS, Processing Instructions and Firefox 2.0
A couple weeks ago I posted an article that describes how you can use XML stylesheets with ROME to create RSS / Atom feeds that are ‘user friendly’ (like the ones that FeedBurner produces). Firefox 2.0, released just this past week, has a new feature which renders my article moot. The “Previewing and subscribing to Web feeds” feature, is a good one for most non technical users: click on a link that results in an RSS feed and Firefox will recognize the RSS content type and show you the RSS styled with their own style sheet even if the feed has provided a style sheet. The current workaround, should you want your visitors to see your style sheet instead of the default Firefox 2.0 stylesheet, is to
“…put in a comment ranting about the evils of sniffing web content and overriding the desires of web developers which is long enough to move “<rss” or “<feed” out of the first 512 bytes, since that’s all we sniff.”
(source)
There’s an extremely lively discussion going on in the mozilla.dev.apps.firefox newsgroup and on bugzilla about this behavior.
XSL / CSS Processing Instructions using ROME
Have you seen the way that the smart guys at FeedBurner display RSS feeds in a browser (here’s a sample if you haven’t)? If you’re like me, the first time you see a feed they manage, you’ll probably think that you’re viewing a page that contains a link to an RSS or ATOM feed, not the actual feed. In fact what you’re seeing is the feed transformed by your browser using XSL and CSS. Take a peek at the source and you’ll see that the XSL and CSS transformations are produced by what are technically called processing instructions. I won’t go into the work that they’ve done to create that look (but if you poke around the source it’s not trivial), but the inclusion of the processing instruction… now that’s something I can help you out with. I’ve used ROME on a couple different projects now because it is trivial to create RSS, RSS2 or ATOM feeds with only a couple lines of code. There are a number of tutorials up on the ROME site that show you how to create a feed and then write to a String, a File or a Writer which you should check out if you don’t have any experience with ROME. Assuming that you do however and given that you have a feed (technically a SyndFeed in ROME), you would write it out in a servlet like this:
SyndFeedOutput output = new SyndFeedOutput(); output.output(feed, response.getWriter());
ROME abstracts you from having to work directly with an XML document, which is handy most of the time. But if you want to add a processing instruction to style your feed, it takes a little fiddling with the source. If you peek at the source of SyndFeedOutput, you’ll see that it wraps WireFeedOutput. WireFeedOutput uses a JDOM Document and the XMLOutputter class to create write the feed. Conveniently, the Document class has methods for adding processing instructions, in fact it has a ProcessingInstruction class. Putting all these things together, you’d get this if you were creating the RSS feeds for FeedBurner using ROME:
WireFeedOutput feedOutput = new WireFeedOutput();
Document doc = feedOutput.outputJDom(feed.createWireFeed());
// create the XSL processing instruction
Map xsl = new HashMap();
xsl.put("href", "http://feeds.feedburner.com/~d/styles/rss2full.xsl");
xsl.put("type", "text/xsl");
xsl.put("media", "screen");
ProcessingInstruction pXsl = new ProcessingInstruction("xml-stylesheet", xsl);
doc.addContent(0, pXsl);
// create the CSS processing instruction
Map css = new HashMap();
css.put("href", "http://feeds.feedburner.com/~d/styles/itemcontent.css");
css.put("type", "text/css");
css.put("media", "screen");
ProcessingInstruction pCss = new ProcessingInstruction("xml-stylesheet", css);
doc.addContent(1, pCss);
// write the document to the servlet response
XMLOutputter outputter = new XMLOutputter(format);
outputter.output(doc,response.getWriter());
So now that I’ve made that easy for you, who’s going to show me the website that has a bunch of easy to use CSS and XSL templates for transforming RSS and ATOM feeds? Better yet, when are browsers going to have this kind of logic baked in so that my mom doesn’t have to look at an RSS feed that looks like a bunch of gobbly gook XML?
WebWork and meaningful URLs
Personal pet peeve: meaningful URLs (which tonight I found out go by many names: pretty URLs, RESTian URLs, SES URLs, hackable URLs, etc…). At work, we use WebWork extensively but up until this point we haven’t made an effort to create meaningful URL’s. As with any well designed framework, it turns out that there are a couple of ways you can create meaningful URL’s, with different levels of meaningfulness.
Version 2.2 of WebWork introduced the ActionMapper interface and a class called RestfulActionMapper, which gives you the ability to create URLs that might look something like this:
http://bookstore.com/books/category/java/keyword/webwork
instead of the more common:
http://bookstore.com/books.jspa?category=java&keyword=webwork
The nice thing about the RestfulActionMapper implementation is that you don’t have to write any code to parse the URL: you set up your WebWork actions with the appropriate setters and the RestfulActionMapper handles the rest. The downside is that this still isn’t really a truly hackable URL. For example, although this URL:
http://bookstore.com/books/category/java/keyword
and this URL:
http://bookstore.com/books/category
would probably work, they don’t really make sense. Why are ‘keyword’ and ‘category’ hanging around at the end? Both of the words are extra information required by the implementation that don’t add any value to the user.
The second way you can create meaningful URLs is by creating your own ActionMapper. You can get a good start by checking out the source code for the DefaultActionMapper and the RestfulActionMapper. To set properties on your action instances, you’ll want to create a HashMap,, add the appropriate properties from your URL to the map and then either create and return a new ActionMapping using the action name and map or call the setParams() method on an existing mapping. The end result is that you should be able to create and use meaningful URL that looks like this:
http://bookstore.com/books/java/webwork
Also of note:
- User-Centered URL Design
- URL as UI
- What is interesting about LibraryLink
- Representational State Transfer
- Cool URIs don’t change
- Updated 8/1/2006: Great quote by David Gelernter via Bill Dehora: “If you have three pet dogs, give them names. If you have 10000 head of cattle, don’t bother.”
Transparent PNG Charts with JFreeChart
If you’re one of the 3 people in the world that need to create a transparent PNG image using JFreeChart, you’ve come to the right place:
JFreeChart chart = ChartFactory.createXYBarChart(...);
chart.setBackgroundPaint(new Color(255,255,255,0));
...
KeypointPNGEncoderAdapter encoder = new KeypointPNGEncoderAdapter();
encoder.setEncodingAlpha(true);
encoder.encode(chart.createBufferedImage(width, height, BufferedImage.BITMASK, null));
The key is that you must use the KeyPointPNGEncoderAdapter, which is slower for big charts, but is the only one of the two PNG encoders that JFree ships with that has the ability to do alpha transparency. On systems running JDK 1.4 and above, the ImageEncoderFactory will return the SunPNGEncoderAdapter, which does not support alpha transparency.
Also, if you’re planning on using alpha transparency in a web application that needs to support IE, you’ll want to check out this JavaScript fix by Bob Osola.
Adaptive Path interview with Jared Spool: how to ask questions
Great story from an interview that Adapative Path’s Peter Merholz did with the founder of User Interface Engineering Jared Spool:
PM: Any other mistakes, in terms of how tests are structured?
JS: There are many problems I see in terms of people not
understanding the effects of testing affecting results.
Here’s a simple example that we discovered. We were working with a
client, testing a website that sold furniture. And the client had
already done some testing. They had created some simple tasks, and
one of the tasks was basically asking users to come to the site and buy
a bookcase they might want to buy.Every user in that study went to the search box, and typed in the word “bookcase,” immediately. So they were off trying to improve the hits on the word “bookcase,” and get the results better. We did a subsequent test, and instead of asking people to look for a bookcase, we gave them a slightly different task.
We said imagine you have 300 different paperback and hardcover books in
cardboard boxes, all strewn through your living room. You need a way to
organize this stuff such that you can find the stuff you like, and
people who come over can be impressed with your collection. What do you
do? People would go to the site, and then click on links. They’d click
on furniture links; they’d type into the search engine storage systems,
and then type in shelves. Not a single user in our phase of the study
typed in the word bookcase. So by changing the description of the task,
we got a completely different result.
Shallow comparison of ASP.NET to Flex
Flex seems pretty interesting when you realize how similar it is to something like ASP.NET. Look how similar this snippet of Flex:
<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:script>
function copy() {
destination.text=source.text
}
</mx:script>
<mx:TextInput id="source" width="100"/>
<mx:Button label="Copy" click="copy()"/>
<mx:TextInput id="destination" width="100"/>
</mx:Application>
to this snippet of ASP.NET code:
<script language="C#" runat="server">
public void Copy(Object src, EventArgs e) {
destination.Text = source.Text;
}
</script>
<form runat="server">
<asp:textbox id="source" size="30" runat="server" />
<asp:button id="copy" OnClick="Copy" text="Copy" runat="server" />
<asp:textbox id="destination" size="30" runat="server" />
</form>
I can’t wait to see the IDE rolled out for Eclipse and the .NET version. Cool stuff Macromedia!
Web pages you can speak to and gesture at
Couple guys from my work are going to this W3C seminar tomorrow. If you’re in Boston, come on down, should be fascinating!
On a related note, my friend Joe worked at Lobby7 (which makes a multimodal application server) for a couple months, although I’m not sure that he was actually involved in the interface design (check out their demo for a better idea of what multimodal is).