How we built a take-away menu image search engine in just 50 lines of code
June 24th, 2010I often want to Google my flat. Especially when I’m ordering take-away and can’t find the menu.
This would be handy:
We almost built that.
I often want to Google my flat. Especially when I’m ordering take-away and can’t find the menu.
This would be handy:
We almost built that.
For a while Claus and I have been talking about how disjointed the reading experience is from the online experience. Sometimes reading on the web is like reading behind those glass walls researchers use when examining dangerous material.
Interaction is learning
I recently heard Dr. Jan Borchers say something like “you should be able to tell if a book is yours from a distance of 20 meters”. The point is kind of obvious; the more you interact with a text, the faster and better you absorb its contents.
So we built Marksaved so you can interact with and annotate websites you read. Highlights today, notes in the near future.
The annotation swarm
And then there’s the flood of cool stuff you can do with thousands of highlights and notes on webpages. Ultra-compact summaries of long articles is one. Spotting trends is another. Using highlights as search ranking is a third.
Here’s a longer version of the video on the site. We decided it may become too boring and long for the front page, so I’m posting it here instead:
Check it out for yourself at Marksaved.com
When I’m in a meeting room I typically sketch people on the whiteboard. Today I made an animation.
It turned out to be quite a quick process, so I thought I’d share how I did. The fact that I spent less than 10 minutes on this one could be promising for quick visual explanations using animation.
The nice people on the Google Docs team asked me to write a guest post on their blog explaining how to use my wireframe kit. Read the full post on the official Google Docs blog.
We also had a good chat about how Google Drawings can be improved for wireframing, so maybe we’ll see an even better cloud-based wireframing option in the future.
Thanks so much for all the positive feedback on the Wireframing in Google Docs post. I’m sorry if I haven’t yet responded to your reply, you’re always welcome to ping me on @mortenjust.
One of the questions I got was if I had a set of iPhone stencils coming up. I do.
Like in the ones for the web, there is an empty one, and one with a template. This one is a typical iPhone drill-down pattern; groups > items > item.
In other words, to make your first iPhone wireframe, all you need to do is to add text.
I’ve added both templates to the shared folder. Have fun.
I’ve been playing around with the newest addition to Google Docs, Google Drawings, and I’m quite liking it. I tried drawing a few diagrams and even a wireframe, and it turns out the basic drawing interactions are just as good – in some cases even better – than what I’m used to in Omnigraffle and Fireworks.
5 reasons Google Drawings beats Viso and Omnigraffle
We know the cloud computing arguments, and they certainly apply to wireframes
We need stencils
One thing was missing though: Stencils. Omnigraffle has stencils coming out of its ears, and Fireworks has some excellent built-in ones. But Google Drawings in its current early and simple form simply doesn’t have it. So I made one.
Leaving the stencils in the gutter
An interesting limitation is the fact that
One solution, it seems, is to clone one of the wireframe kits and thereby also cloning the stencils into each document. To not print or export the stencils, I’ve left them in the gutter area of the document. Seems to work quite okay.
Kind of blue
I’ve been wanting a blue kit since I left a project years ago where we used blue stencils (the idea was Peter‘s). As you may have experienced, some customers simply don’t understand wireframes. The blue color gives that well-known blueprint feel, and shouldn’t prompt questions like “I like it, doesn’t it need a splash of colour?”
The templates
To make it even easier for you (ehm, me) I’ve begun making simple starting point templates.
Main blank template
Product detail page
Landing page
Item list view
They’re all in this shared folder on Google Docs, and it will be updated when there are new templates. If you make one, let me know and I’ll add it to the folder so everyone can use it.
UPDATE: I just added a few wireframe stencils for iPhone
I sometimes wish I could put myself, the designers and our stakeholders on a button budget. Just like we’re already on a time and a salary budget, we should introduce scarcity on another limited resource – brain cycles in the heads of our users.
Introducing a scarcity would make … (continued)
As I mentioned in the iPhone vs. Windows Phone post, I’ve been curious finding out how the Vodafone 360 phone would stack up, side by side. I finally found out how to do screenshots, so here it is.
Since I work on the 360 project, I’m not going to be the judge. Instead, I’ll show you the interface, and then you get to decide in the comments.
On the business side, the phone is a bit different from the two other phones in that it targets a younger audience – also reflected in the price: Free, and with a 15 pounds/month contract, which includes data traffic.
On the interface side, note how the interface, mainly the buttons, on the screen tries to look like the actual buttons on the hardware. Once bought in to, it’s hard imagining why you would want to design an operating system that is separated from its immediate hardware. With this principle in mind, a black case makes a black background. Unlit pixels are good for many things – among them saving battery, demonstrating the OLED crispness – and, as mentioned, integrating with the black hardware.
Anyway, here we go:
When I first saw the homescreen on the 360 phone …
So you’ve done all your GTD karate today. Hundreds of mails out of the way. The balls are at their court, just waiting for their follow-up. Because they do follow up right? What if they don’t, how do you catch them, then?
One of the biggest problems of getting things done is other people. And that’s not going to change.
The people I’ve talked to all have different ways of doing this. They all work. But they’re also wrong.
The last one underlines what’s wrong with the rest. It’s adding to my load what should be in yours. The ball is in neither court, floating somewhere over the net, and the person with the most incentive will follow up. If they remember.
Enter the marketplace
The GMail extension mocked up above would be a good way to make it okay that the ball floats over the net. Even simpler could also do just fine. The only real problem with it is that it’s not real yet. I’m hoping the rise of the Google Apps Marketplace will join GMail labs in improving email in small ways like this.
Or maybe I should integrate it into my half-done, half-abandoned calendar project?
UPDATE: What do you know, an almost exact version of this appears in the Etacts browser extension. I installed it and it actually appears. To things though: How do I get the actual reminder, other than going to Etacts? I’d love for this feature to be available without having to breach my entire email database to a third party. Anyway, thumbs up.
UPDATE II: An interesting comment thread over at the Consumerist blog is unfolding. Please note that the “re-send” option in the mockup is not really the point of this idea. In fact, I agree, it’s a pretty terrible addition.
It’s a well known fact that TV ads, and even tracks when played on the radio all run through audio processing, such as a compressor, to make the sound more lively and in-your-face.
Here’s an example from the latest iPad ad
Is it just me or is the ad version slightly more interesting?
Google scanned all previous issues of Popular Science from 1929 to 2009. Irresistible if you’re a tech geek, yes, and maybe just as interesting if you’re into typography.
Apart from carrying the best illustrations of their times, the magazine’s logo development is a showcase of the shifting trends in typography and graphic design.
And, as we’ll see here, even typography history repeats itself. It’s worth noting how the magazine is striving to preserve hints and styles over the years.
The indented “Science” version would in a later iteration become the most non-perishable form. It returns in 1963 and survives – in various versions – on the cover until 1995.

I’ve been playing around with a closed beta version of Mouseflow during the last week. It tracks visitors’ movements on a website and lets you play them back, exactly as they were performed.
Think of it as a think aloud test without the sound.
My real-world problem
I wondered if people actually read the text paragraphs in my previous blog post comparing iPhone and Windows Phone – or if they were just looking at the photos (they read it, thankfully).
A few highlights from this 21 mins session with a user from India, 5 timezones away follows after the video
And another surprising fact? This user didn’t even as much as take a glimpse of the comments. It’s as if the blog metadata section says “nothing more to see here”.
Giving away 100 invites
The good people at Mouseflow gave me 100 invites to give to whomever comes first. The invite is good for 10,000 free recordings, and you will be asked to complete an online survey at one point.
Create your account here and use this invite token: 3RUS4E
Inspired by this post about information density in the interfaces of the two phones, I decided to compare the two in more detail. I may do a similar 360 phone comparison, as it is, in some points, similar to the Windows one.
The lock screen is up first, and a first example of the elimination of what Tufte would call interface debris. No controls here.
To get unlock a Windows phone, simply slide the screensaver upwards with your thumb. The phone is in there, sitting behind the screensaver image.
I remember when I first saw the iPhone and thought “oh, finally, no more remembering obscure keyboard patterns to open a phone”. Seeing the Windows unlock mechanism, well, caused a similar response.

To see the latest version of the below tips, jump on this Wave.
First impressions
Non-US issues
Kindle-friendly websites
Feeds
Desktop software
Free books
Paid books
Digitising paper books
Amazon Web resources
iPhone app
Screensavers
Emailing documents directly to the Kindle
Third party extensions
Other web sites
Speech
Troubleshooting