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.

Read the rest of this entry »

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.

Read the rest of this entry »

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

1. It’s live. The entire team can work on the same document and see each other’s work instantly
2. The wireframes live in the cloud, no sending files around, no outdated documents
3. The risk of losing data is zero. It saves for every edit you make
4. It’s free
5. Most people already have a Google account, so no sign up required

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

• there’s no stencil library function and
• you can’t easily copy and paste from one document to another.

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)

Read the rest of this entry »

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 …

Read the rest of this entry »

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.

• In Entourage or Outlook, adding a task with a deadline to the email before sending it.
• BCC’ing oneself and letting that copy stay in the inbox until a reply comes in
• Simply trusting that the other part will reply (…)
• Various real-life actions such as phone calls and colleagues
• Moving the mail into a”for follow up” folder
• Adding the follow-up to one’s own todo lists

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?

The Blue Van’s albums are available on Spotify.

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.

1929

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.

Read the rest of this entry »

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

• 0:03 The user quickly scans the full article
• 0:15 Goes on reading the second paragraph from the bottom
• 0:37 Finds it interesting enough to scroll to the top
• 0:46 Begins “reading” with with the mouse pointer. This is an interesting and very frequent pattern. I guess we all do this; use the mouse for no particular reason while reading text.
• 2:42 The user has now finished reading the article.
• 4:05 Begins clicking words. I’m not sure if this is in hoping they’re links, but I don’t think so rather than merely keeping the hands busy. Also, there’s a chance that this might be because they’re selecting and copying text.

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.

Read the rest of this entry »

Read the rest of this entry »

To see the latest version of the below tips, jump on this Wave.

First impressions

• It’s thin and light
• The screen is crispier than I hoped
• Page turns are quicker than on my Sony Reader
• The cursor’s ghost-like effect compensates for the display’s low responsiveness

Non-US issues

• Kindle store checks for country before completing purchase. Users who change their address to a US one, will not be able to purchase without contacting the Kindle customer service.
• There are more items in the US store.
• (the browser now works with a Danish account!)

Kindle-friendly websites

• Most mobile-optimized sites are Kindle-friendly.
• For a start page linking to longer, Kindle-friendly articles, try www.mortenjust.com/kindle
• To detect a kindle, look for “Kindle” in the user_agent (full string is Mozilla/4.0 (compatible; Linux 2.6.22) NetFront/3.4 Kinde/2.1 (screen 600×800)

Feeds

• KRead accepts a feed URL and displays that feed, Kindle optimised
• Feedbooks creates an actual Kindle book with the contents of the feed(s), and even allows updating from within the book
• Instapaper offers sending directly by email to your Kindle when you add to Instapaper. Downside is that Amazon charges 1 USD for non-US transfers.

Desktop software

• Calibre converts almost everything to Kindle (and Sony, etc) format. It also transfers and enrich with meta data.
• Mobipocket Desktop 6.0 (and not older) also recognises the Kindle, however, Calibre is generally recommended
• Books can be transferred simply by dragging into the Documents folder when the Kindle is mounted.
• Rumors today (Oct 23) have it that Amazon is readying a desktop reader for the Mac

Free books

• Some books in the Kindle store are free. However, there’s a transfer fee outside of the US.
• Feedbooks offer a Kindle book with links to actually download and install free ebooks over the air.
• More free books to be found at Munseys
• Munseys also have a kindle-friendly mobile site with direct downloads

Paid books

• The amount of titles in Kindle store varies from country to country
• Users can download from other Mobipocket-compatible sites and read those books on Kindle. How and why.

Digitising paper books

• FineReader is quite impressive.
• An easy way to do this is with a digital camera, one spread at a time.
• Approximately 1 page per second.
• Some cameras can shoot in intervals.
• Combine that fact with a tripod and you’ll have a home digitising studio.

Amazon Web resources

• Media library. This is for all Amazon downloadable media, including Kindle
• kindle.amazon.com. Supposedly a place to manage bookmaks and notes (mine don’t show up)
• Manage my kindle. Lets users send media to other (owned) Kindles and iPhones.

iPhone app

• Not available yet in some countries, including Denmark
• Personal documents, magazines, newspapers and manually transferred books can not be sent to the iPhone app

Screensavers

• So far I haven’t seen two of the same. Are they stored online?
• Now I have. Don’t think they are.
• I’ve seen a custom screensaver extension

Emailing documents directly to the Kindle

• 1 USD. Emailing documents to (your.name)@kindle.com will send the converted document directly to the Kindle through Whispernet
• Free. Emailing them to (your.name)@free.kindle.com will reply to your email with the document. Use USB to transfer to Kindle.

Third party extensions

• Savory lets users convert from PDF to Kindle format on the device. It’s using the conversion engine from Calibre
• I read about one that allows changes tothe screensaver. URL?

Other web sites

• Kindle forums on Mobile Read
• Hacks and easter eggs
• Beginner’s guide to Kindle content

Speech

• I find the female voice sounds more natural

Troubleshooting

• If you get no connectivity bars, try resetting (switch and hold power slider until screen blanks, then turn on again)