As a happy transient fom the world of record stores to downloading my tunes happily from emusic, Loronix, moistworks and other fee based or file sharing sites, I am interested in how the music world is balancing art with commerce. With iTtunes being my least favorite way to get music, yet for convenience, it has surpassed 5 billion downloads, the pricing structure still seems broken. Radiohead made everyones news with releasing their record as a “how much would you like to pay” model. My problem with this was how difficult, confusing and somewhat rinky-dink the download/pay experience was handled. It actually made me not want to pay. Now comes the same idea done right – the ‘mashup’ artist Girl Talk, who put out one of my favorite records last year, has a pay what you like model done right.

The first page offers a clear value proposition, name your price – but if you pay 5 bucks you can get lossless versions. Pay 10 and get a ‘real’ cd whenever they create it. Then process the transaction using paypal, so no messy credit card transactions. Download at the same time so paying is not tied to actually getting the files (you can still bail on paying) However, being a fan I settled on $2.50, a tip so to speak. How about you, does the straightforwardness and ease of use make you want to pay at least something? Or to be profound – does ease of use translate into profits? I’m banking on yes, since the site was being hit so hard that it won’t even load the cover picture, and it is my profession as well. I would love to see statistics on how this works out for Greg, but being a ‘pirate’ music site, we may never know what the ratio of payers to moochers is, which is a shame.

Share/Bookmark

The New York Times has unveiled an archival service called Times Machine which archives the past 100 years of the newspaper of record. Along with the benefit of seeing ads for trusses, we see a very sophisticated and robust interface using HTML + CSS + Javascript of a very easy way to scan large amounts of printed text. There have been so many of these kind of apps, almost always using Flash with proprietary back end processing, it’s refreshing to see these sorts of interfaces with the code all public and easy to steal learn from.

In this case, the clever interaction design (and a hurdle for HTML) is to pair the actual article image (spanning multiple columns) with the text summary. The implementation makes scanning the paper a breeze and has a great visual clue of highlighting the image and overlaying the summary text. I’m delving into the markup to see how they managed to dynamically pair the images with the representative text, and seeing what other magic is under the hood.

Another nice feature was the rotating ‘share’ button, which takes care of not prominently promoting digg or reddit, but subtly reminding users that if they like to vote, here’s where to do it. The only bad feature is that this is for paying customers only, but NYT has made free its online articles, hopefully in time this will follow suit, the days of microfilm readers may be numbered.

In the oxymoron that was mobile web design for many years we struggled to try our HTML pages out on different mobile devices only to have to resort to stripping out anything resembling good design or usabilty. On my trusty RAZR phone, I was content with using java apps to display things in a meaningful way, but having to learn the arcane hotkeys for each app became a chore, and they went little used. With the iphone, the promise was that regular sites look like their BS (big screen) brethren, where users can not have to learn new interaction conventions for their favorite sites outside of zooming and moving around to fit the screen. However, there is a second wave of web apps that optimize their site for the iphone. Using conventional xhtml, css, and some javascript, with a few unordered lists you can distill most complex sites into something new, and in many cases are easier, faster, and better user experiences than the ‘real’ sites! I hope this gives notice to web designers to pare down things that users rarely need and keep things simple. You may have your favorites, please add them to the comments, and non-iphoners can usen this emulator to try out the alternate sites:

5. iPhlickr – http://www.chandlerkent.com/iphlickr/
What sets this apart is a seeming blur between the iphone features and the browsing world, when you select a photo, you can then share it, send it, or view it within the flickr world, unfortunately when iphone apps become available next month, flickr will probably become an ‘app’, but until then, this is a very ingenious and useful approximation.

4. Wikipedia

Iphones aren’t fast in downloading data (yet) so when I want some info, I don’t want a huge load time with lots of info that isn’t getting me to my goal, this interface is very fast, and also does a great job in reformatting wikipedia content to take advantage of show/hide heading behaviors, which is a new iphone ‘standard’, and one that helps parse long documents quickly.

3. Amazon

A old-time favorite (was iphonized pretty much right away), but Amazon should be applauded by honing down their value propositions to fit on this screen, that is product, price, ratings. Thats it, and thats what In need when I’m thinking about picking up that camera in Circuit City, i want to swoop in and Amazon it for comparison and this does the job.

2. Reqall – www.reqall.com

I mentioned how much I liked this the other day, a technologically amazing mashup of voice/text note taking, plus some nice keyword recognition make a pretty darn useful to-do list! Add on the iphone interface, with good integration of thick finger style tabs, gets a reasonable amount of navigation in a small place to seal the deal. Bummer is that it makes you login every time, but I am lobbying for that to be fixed

1. Google reader – www.google.com/reader/i

I could say the google iphone interface, but the reason for this post is a huge shout out to Google for their revamping of the RSS interface for the iphone. I am super picky about RSS readers, my copy of NewsFire broke the other day in an update and I was in a panic to find a replacement, to no avail (I fixed it by installing a previous version). The thing I dislike most about other RSS readers is using the metaphor of email. I think we all get too much email, and RSS is not email, its more like a very personalized newspaper. The google reader nails this, and has kept me busy on train trips really enjoying reading stories, with excellent ajax integration, which really shines on the iphone since refreshing the page can take 20+ seconds, keeping info inline is imperative.

I also want to give credit to the password filler-inner 1password for their iphone interface, and twistori that shows that the same design works on both BS and little if the concept and interaction are clear. If I had a wishlist for sites I wish worked on the iphone it would be cellartracker (their regular site is not too great either, but the content is invaluable on mobile) and chase – if you are really embracing mobile users, let me really bank online.

The environment will change in the next month with the introduction of iPhone apps, but the resourcefulness of these developers to take ‘plain ol’ HTML and make a good user experience in a very constrained environment shouldn’t be lost. Give your comments and contribute your favorites I may have missed.

Related Services: iPhone Application Development, Custom Software Development

It is one of the first problems of HTML markup that had no standard way to communicate to the user what they should do, I’m talkin’ about the required form field. Personally, I have used some sort of asterisk in the past, coloration can work as well, but anything eye catching can distract from an error state (hey, you didn’t notice we required that field, try again). So it caught my eye that the good people at reqall have an interesting pattern. In this case, make required fields have a bottom that is different from the non-required fields. This is fairly subtle, it took me a moment to figure out what it meant, but I give them kudos for trying something new. This is a long neglected design pattern of how to handle this in a consistent way, and this is a good a place to start. Its also a way to give a shout out to this service which mashes up text-to-speech, reminder lists, task distribution and has a nifty iphone interface as well, check it out!

How to do it

Here’s a capture from their stylesheet, an interesting element here is I didn’t know that you could restyle the drawn box of an input, so there is room for much variation. I also like the way they specified ‘solid’ to get rid of the horrid default ‘picture frame’ style of merging borders when they don’t match, which always makes me flashback to 1998 web design.

input.essential {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 3px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #016098;
border-right-color: #016098;
border-bottom-color: #990000;
border-left-color: #016098;
}

I encountered a similar situation to Noel’s when developing a site recenty. The design called for, or made reference to, a opening and closing header with details shown or hidden by a click on that header. I approached it in a different way, which may be interesting to compare the two, but leave it out there to debate the merits of each. When solving a problem, I normally begin with the same axiom that was mentioned in an earlier post – What is it? What is it’s nature? HTML markup, as you may know doesn’t have much in it, a mere 20 or so tags, but with the addition of ID’s or classes, you can uniquely identify everything the web has to deliver, which is pretty powerful.

In looking at the elements controlled by another element, the most fitting markup is a definition list. For some reason these elements are mysterious and not too often used. It is a list <dl> that can contain two elements <dt> and <dd>. Normally they have a default display of one element being bigger and the other slightly indented, as to look like a directory. So, with little or no work we can describe the two types of list elements, the ‘header’ – <dt> and the information that can be ‘opened’ the <dd>.

So having my markup, well, marked up, I can set aside the HTML, produce some styles for the list, but what about the complicated part? Adding the behavior to hide/show, make the <dt> clickable, swap the GIF’s that indicate opening and closing, and while we’re at it why not a ‘expand all’ or ‘close all’. Finding it was no mean feat, but with some very creative google searching I found the script – http://www.tjkdesign.com/articles/toggle_elements.asp. So this handles all the heavy lifting, and basically degrades nicely in a non-javascript situation to show all elements. Problem solved.

The satisfying thing about this solution is that the code is clean, and easy to change, and any presentation issues are handled within CSS, along with any behavior in javascript, and handled by the client. I think the two approaches compliment and contrast each other nicely, add your own solutions to the comments if there are even better ones.

Over the past several years, the web has been innudated with blurry, hard to read text. Users are forced to squint, struggle and enter this text exactly in order to proceed with their goal. I’m refferring to a method called a captcha, an image that normally contains letters that are intentionally obscured so that computer programs cannot ‘read’ them. While the need for this is understood, security against malicious scripts, the burden it puts on the user has only increased since these letters are usually not a ‘word’ and bent ‘m’s and ‘l’s easily become unreadable. All of this is to tell the system you are actually a human being, hardly something humans feel necessary to prove.

The amazing thing in the research realm of computer vision is that some algorithms are becoming able to ‘read’ this obscure text, making it necessary to make them even more unreadable. Recently, I have found this alternate ‘maptcha’ – being used on a number of sites, replacing the text with a simple addition problem. Not only was it less burdensome on the eyes, it seemed a bit fun to do a small math or counting exercise. I am curious if this is terribly insecure, or just a small revolt against the difficulty many users have with the other method. Either way, a great pattern to emulate, and much easier to use.

I just had quite an enjoyable spring break trip with the family to Washington DC. For a town with lots of visitors, it was important to help people manage the different ways to get around, or more importantly get out of the way of the residents. Among many places, within the beautifully designed metro stations, there was often voice over assistance on different helpful topics. While I was surprised at the lack of multi-language support amongst these alerts, there was a particular custom that made me think of a similar pattern in software design, the help system.

Often designed separately, help in software systems is almost always out of sight of the actual user experience, and thus out of mind. On my projects I make it the habit to make room for, and design with inline help in mind. Inline meaning the help topic is written out on the page next to the area where it will be consumed. I find it keeps people from having to take fingers off the keyboard and mouseover a “?” icon to see if it anything helpful is there hiding. During planning, if the final text is missing, placeholder text is substituted. It helps show the developers that labels alone cannot help users determine how to proceed with completing the task. It also reminds us of what kind of help will be needed eventually in each interaction. I’m surprised at how much reaction it spurns in design meetings and helps clarify confusing procedures amongst other benefits. In short, the pattern is to provide some help where we are looking, rather than make users hunt, or worse, ask for it.

Back to DC, in the Smithsonian, as well as the metro, there are many escalators, and if you pay attention to the voice over, the helpful message is to “stand on the left and walk on the right”. Having been plowed into more than a dozen times by people trying to get past me, it finally dawned on me that this is lacking inline help. I took this (blurry) picture in the Smithsonian, which it had two footprints on each side of the tread. The ‘help’ actually contradicted the rule. With some bad photoshop I erased the footsteps to the version shown here. While reminiscent of some ancient dance chart, I thought if this was the way it was stenciled, that people pick up on the intended behavior because it is where their focus is, not on the announcement, but on their feet.

In a current project there is the need to use email to allow customers to ‘sign up’ for information updates. In working through the user experience I have been looking deeper into how different programs have enabled email to process and initiate workflow that it led me to solve a problem in a surprising way. It also reminded me of how in user research it can be nonsensical and even counterintuitive how people use software to help them with their tasks. Its all a strange rube goldberg like process, which gives me an excuse to share the “Pitagora switch” video, which always invigorates me when a software project seems to lose momentum.

I started with a basic problem of the customer (In this case, me) who is a amateur oenophile. I try a new wine and would like to keep track of my thoughts and rankings in the easiest way possible. I have an account on Corkd, a wine rating site, but the customer experience is lacking in some ways, and adding wines is a chore. A friend mentioned that he only buys wine based on label, and that is important, so I would like to keep a photo for reference as well. Many sites do photos, many do blogs, but I wanted to do them both together. So I set up my own site with a bit of wordpress and a domain name, I was up and running. However, it still seemed a chore, if I was enjoying a wine, I would have to go to the computer, log in, write, set up, upload photos, remember which one… oh, again, too much work, and the site and content stagnated.

Armed with some experience in the email interfaces to these blogging/cms systems, I came up with a weird way to make the process easier. It does involve an iphone, but that is just to enable the ‘mobile’ experience. As I went through it, it worked perfectly, and was quite a bit of fun, not to mention a triumph of non-linear thinking! To summarize:

1. Enjoy some wine – be sufficiently inspired to blog something about it
2. Use the iphone (or I suppose any picture phone) to photograph the wine label
3. Email the picture to flickr (check flickr account details for your personal email address that posts the picture)
4. Set up flickr to be aware of the ‘wineskeptic’ blog by pointing it to a script within wordpress that will accept XML posts
5. This enables the little ‘blog this’ link above the picture, using the iphone web browser enter the tasting notes. Save.
6. Check the blog, notes and picture are posted, success!

I hadn’t really used the flickr service for anything but archiving and sharing photos before, and its a very cooperative model they enabled. The photo is not the main reason for the post. If you have experiences with similar ways you mashed up some technologies to solve a workflow problem, please comment!

In interaction design it is considered a noble pursuit to find metaphors that take real life interactions and mimic them onto the computer screen. There are some notable successes such as the desktop metaphor, as well as some notable failures, such as the desktop metaphor. It reminds me of a friend who was experiencing trouble with their hard drive (this was a macintosh) so they dragged all their files ‘out’ of the hard drive onto the desktop and then reformatted the drive. After doing this he understood that the metaphor didn’t hold up to this kind of use. As computer users become more savvy, metaphors that exist only in the computer realm are becoming more common and accepted.

I was perusing an online catalog, IKEA, and noticed they had dismissed the odd, yet well used idea of a page ‘flipping’ or ‘dog-earing’ when you clicked on the corner to advance. As seen in the movie, the advance takes place, shifts the page, then switches it with the next page. Not only does this transition take less time, it effectively communicates in shorthand the idea of ‘flipping’ without using a direct paper metaphor. Nicely done.

When to use

Pagination seems most useful when transitioning print to screen. Since many magazines and newspapers have abandoned the fidelity to print, and removed the need to screen capture print ready art, this is becoming rarer and rarer. I do think paginating between photos in an album is an experience not well handled in many photo sites web interfaces (I mean you flickr!).

How does it work?

Since this is flash, you can get away with the movement out of the constraining box, which is tougher in HTML, since absolute sizing is not as common, moving and swapping is probably available within a DHTML library, but movement across frames seems to be very flash specific behavior.

Calibri

In the oxymoron that is web typography, i want to give great praise to Microsoft that gave the world Georgia, Trebuchet MS, Verdana Tahoma and some other fonts I don’t care too much for. It is ironic that they have really pushed forward the world of web design far more than the “design oriented” mac crowd. They are continuing the good work with their new Vista font – Calibri. A lovely font that can rescue many sites from Arialville, and comes with install of IE 7 or of course Vista. It is also the default system font which saves default Word users from Times New Roman, which is a huge improvement. I also want to give a public “meh” to Apple for keeping their system fonts (I’m thinking “Lucida Grande” ) to themselves and not offering free downloads to Windows users. Come on, is there that much profit in this that we can’t rely on a base set of screen readable fonts for our users? Pretty please guys?

For mac users – I would love to link up where to download this, but searching seems to reveal you get it as part of installing a powerpoint 2007 viewer, and as a PC user, I think if you install Safari, they may bundle in Lucida, good luck!