Archived entries for Design

Receipts via Email from Wells Fargo ATMs

A couple months ago, Wells Fargo ATMs added the ability to have a receipt emailed to you instead of printed out on the spot. The present a menu screen where you can choose to view the receipt on the screen, print it out, send it to your Wells inbox, or have it emailed to your personally email address on record.

I get an outsized amount of enjoyment from this simple little feature. Part of me wonders why it hasn’t been such before — it’s so simple! Another part of me enjoys the physical convenience — no paper, no trash. And part of me gets a silly little feeling of cleverness — that we /are/ actually living in the future.

In general I hate Wells Fargo because they continually charge me extra hidden fees and make me jump through silly hoops repeatedly even though I’m a long time customer holding, I believe, nine different accounts with them (our TIC/condo group in part of that).

But while the bank may such (don’t they all?), their ATMs are cool. (For those interested in UX and Interface design, Pentagram studios did the redesign and Physical Interface has the story / case study.) In addition to the emailed receipts, I like that

  • the screen options are personalized with your most common transactions (how much to withdraw; from which account; receipt preference);
  • you can deposit checks without an envelope, and print a receipt with a scanned image of the check;
  • and that you can buy postage stamps.

Anyways, I write this because I’m up early on a Saturday morning waiting on a phone call to come in. Uggh. Scanning Techmeme while I wait and this post reminded me about the WF feature and that many other hadn’t seen it (apparently only testing in Northern California and Colorado)…. So there you go…back to my coffee…

Wireframing with Balsamiq Mockups

Thanks to Pras for the pointer to Balsamiq’s Mockups application. I was sketching wireframes quickly within minutes of finding the product.

I believe in low-fidelity sketching at the wireframe stage. Balsamiq makes it easy with its large library of UI control stencils, its auto-complete driven keybroad stencil selection, on-screen snap-to alignment guides, a powerful inspector for precise control when rarely needed, and, more of all, a simplicity that makes it easy to start sketching or tweaking your mockup immediately.

The output is Balsamiq files, PGN or flattened image files, and XML. Because it exports XML it’s possible to use Balsamiq as a programmatic ingredient for downstream engineering systems and tools (such as partially automating the creation of detailed functional specifications, or using it as source for the automated building on the actual interface.

There is a rumor that they’ll be announcing clickable output files shortly, which might allow for the fast creation of clickable wireframes for usability testing (and other) needs.

I haven’t noticed, but it should be possible to customize what’s in the included UI Widget Library to a) take on a different visual skin; b) reflect new or fewer interface widget options.

All and all, I’m pretty intrigued. It seems there’s a market for consumer-friendly ways to design interfaces. Once more people catch on how to much fun we’re having, they’ll want a shot at designing and realizing all the apps they’re dreaming up, too!

I’d love to hear what you think of this approach. Have you tried it? Does it work for your teams”

Balsamiq Mockups For Desktop - * New Mockup

Yahoo! Opens Search and Supports Developers

Marshall over at Read Write Web has a great review up posted covering the exciting news that Yahoo! has opened up our search index and engine. I’ll point you to his coverage, and pull out my favorite gems.

Update: Vik Singh had the idea for BOSS, and posted Yahoo! Boss – An Insider’s View. It’s money line is this, and describes the big idea succinctly: “I think users should be confident that if they searched in a search box on any page in the whole wide web that they’ll get results that are just as good as Yahoo/Google and only better.”

First, here’s what happened tonight:

Yahoo! Search BOSS

Yahoo! is taking a bold step tonight: opening up its index and search engine to any outside developers who want to incorporate Yahoo! Search’s content and functionality into search engines on their own sites. The company that sees just over 20% of the searches performed each day believes that the new program, called BOSS (Build Your Own Search Service), could create a cadre of small search engines that in aggregate will outstrip their own market share and leave Google with less than 50% of the search market.

Might this impact things? He thinks so:

In both cases, Yahoo! BOSS is intended to level the playing field and blow the Big 3 wide open. We agree that it’s very exciting to imagine thousands of new Yahoo! powered niche search engines proliferating. Could Yahoo! plus the respective strengths and communities of all these new players challenge Google? We think they could.

And that part that was music to my ears (emphasis mine):

It is clear, though, that BOSS falls well within the companies overall technical strategy of openness. When it comes to web standards, openness and support for the ecosystem of innovation – there may be no other major vendor online that is as strong as Yahoo! is today. These are times of openness, where some believe that no single vendor’s technology and genius alone can match the creativity of an empowered open market of developers. Yahoo! is positioning itself as leaders of this movement.

Marshall, thanks for the great writeup. Yahoo!, thanks for making me proud.

FriendFeed’s Inline Media

FriendFeed is a great way to bring lots of information you care about onto one page. If you subscribe to me on FriendFeed you’ll see all the photos I post to Flickr, bookmarks I tag on del.icio.us, articles I share from Google Reader, events I’m attending on Upcoming, songs I like on Last.fm, blog posts and Twitter messages I write, and more. These are a small subset of the 41 services FriendFeed can pull in; they also take unlimited RSS feeds making nearly any shared record of my social activities online viewable in one place.

Subscribe to me on FriendFeed.

friendfeed logo

One feature as a user of FriendFeed is the inline media. MP3s and video can be played right within the page. Click “play” on an audio file to start listening and expose slim player controls. When you play a video the thumbnail grows to standard video player size. For photos / flickr thumbnails, clicking “more” displays the entire set or upload.

Because I’m testing out a new screen capturing process, here are some pictures of the inline media collapsed and expanded so you can see how it works inline.

Here’s what the audio looks like initially.

friendfeed-inline-audio-2

And here’s how it expands when you click play.

friendfeed-inline-audio-playing-1-1

Same for video. Initially you see a thumbnail of the move.

friendfeed-video-closed

And when you click play the player grows into view.

friendfeed-video-expanded

Works like a charm.

Slides: Professional Frontend Engineering

Update: Audio for this presentation is now available (mp3) from the conference’s site.

This year, my third presenting at @media in London (2006, 2007), Patrick offered me the morning plenary slot. I used the time to talk about a topic of great interest to me: Professional Frontend Engineering.

Over the last three or four years the role of Frontend Engineering has become more important, more respected, more challenging, and more in-demand than ever before, and so I wanted to put a stake in the ground clarifying what we do, how we do it, and why it’s so important to raise it to a professional level. I had four goals:

  • Put a stake in the ground.
  • Reiterate our values.
  • Advocate the discipline.
  • Nurture a healthy Web.

The goals were threaded throughout the four sections of the talk:

  • Historical Perspective
  • Our Beliefs & Principles
  • Knowledge Areas & Best Practices
  • Why It All Matters

The talk is embedded below (or download: keynote, pdf, quicktime).

I think this topic is critical to the advancement of the Internet. I’ll be writing more about this in these pages in the coming weeks and months, but for now enjoy the slides. And please share your thoughts and feedback in the comments.

Slides: High Performance Web Sites

The organizers of last month’s Kings of Code conference in Amsterdam asked me to talk about High Performance Web Sites. I discussed related material at last year’s @media conference, so for this new talk I was sure to use a bunch of new, updated, and expanded information. Luckily, the good people on Yahoo! Exceptional Performance team have been hard at work discovering new performance best practices.

The talk embedded below (or download: keynote, pdf, quicktime) covers several well-known optimization practices then quickly moves to review more recent findings and advancements. It concludes with a survey of tools for optimization and links for more information.

Enjoy, and please leave a comment with any thoughts you have.



San Francisco, California | Creative Commons By-2.5 License | Contact

RSS Feed. This blog is proudly powered by Wordpress and uses Modern Clix, a theme by Rodrigo Galindez.