Designing better user interfaces sets out to teach interface design by talking through concrete examples: what works, what doesn’t work. A good interface consists of a thousand details done right. This presentation is all about those details.

Based on my talk I prepared a web-friendly version with notes, which you can read and download on SlideShare.

You’ve probably seen the ads: Nokia released the Lumia 800 in Belgium this month. The Lumia has been called the best Windows Phone so far and the OS has received a lot of praise as well. Many of the UI mechanisms used Windows Phone will be present in the upcoming Windows 8. Naturally, as an interface designer wanting to stay on top of my game, I was curious.

I contacted Nokia and they sent me a Lumia to test (Thanks Nokia!). Unboxing the Lumia you’ll find a plastic cover similar to the iPhone’s bumper case, headphones and a power charger. Shipping a case by default is a sensible idea to me and it pleasantly surprised me.

After a couple of hours I already knew this device was going to be used way more than my Android phone (which I put in the closet after a couple of hours of disappointment). The UI direction is lovely and consistent: it’s fast, typing and keyboard accuracy is good and the hardware is beautiful. The device is clearly built with care and quality. It also feels very light, which is a plus for something you carry around and handle all day long.

Metro UI and interaction design

The Metro UI works very well and the minimal look is refreshing compared to the ‘gradient candy land’ that is iOS. The main font used everywhere (Segoe WP — the WP stands for Windows Phone) is a pleasure to ones eyes. I would love to show you screenshots but unfortunately Windows Phone does not offer a way to do this.

You can switch color schemes to your liking: there’s an option for a light or dark background and you can change the accent color (this mostly changes the color of the tiles on your home screen).

I personally prefer a dark background, especially because it blends in well with the black device. The black is very “black”, if that makes any sense. Nokia calls it “Clear Black” but it’s really just the same AMOLED tech that you’ll find in some Android phones too.

It may sound like a minor detail but the default wallpapers are very stylish pictures, which I liked more than the iPhone’s defaults. Props to the photography department!

Jon Gold notes:

Microsoft’s new visual language – is absolutely breathtaking. Metro makes almost all apps look fantastic, not just those by A-list developers.

I largely agree with this sentiment. But even A-listers can get it wrong. The FourSquare app is pretty ugly (screenshots here) proving that it’s also possible to misunderstand the UI completely. Interestingly enough if I look at screenshots of the first iteration of this app, things look much better.

Metro largely depends on spacing, font sizes and a solid app hierarchy. A lot of the 3rd party apps I downloaded were every bit as bad as most Android apps. The default apps get it right though and are a leading example every WP7 app designer should try to emulate.

I’d like to make a statement here saying that it’s way more important to make your app fit into the OS than making it look the same across all platforms. Nota that I’m talking about productivity apps here: a game like Angry Birds can look the same across platforms since the interactions don’t tie deeply into the OS.

The basic interaction design and screen flow is great, but when digging deeper and doing harder things it becomes clear Metro is not quite there yet.

There are tiny interaction problems that make a huge difference in practice. For example, tapping is not as accurate as on the iPhone: let’s say you want to hit a link in the Twitter app. Instead of going straight to the browser (like on the iPhone) sometimes nothing happens. I don’t think it’s a hardware problem but more of a software design problem. The tappable areas are sometimes just too small.

The UI for rearranging tiles is an exercise in frustration. I already hate rearranging apps on the iPhone (and I’m glad you can do that in iTunes instead); but because the multi touch interactions are just a tiny bit “off”, it becomes extremely frustrating if you’re forced to keep doing what you actually didn’t want to do, over and over again.

At the bottom of most applications you’ll find a row of icons. Just icons, no labels. For the obvious actions (+ for add for example) this is no problem but as I noted before not every action can have a clear icon, or an icon can have multiple meanings. For those interested, there’s a whole section on icons from slide 152 on in my Design for Developers presentation.

Comparing speed and task completion the iPhone wins hands down. e.g. for example, in the Twitter app the tweet detail screen does not have a ‘favorite’ option. The animations between every screens, albeit nice, make interactions slower. Main interactions are often hidden behind a “more” menu even though there is sufficient screen space to display them. In a lot of ways these apps feel like a v1 and I bet Twitter and Facebook are giving their iPhone apps more love and development time.

In the meantime iOS and Android development continues. There’s a point to be made that iOS and Android as a platform are one year, if not more, ahead of the competition.

Hardware

About the hardware then. I’ve already talked about the screen – obviously it’s not a retina display. If you look closely the the pixels are obvious.

There are 3 hardware buttons on the front: back, Windows (= apps) and search. The back button is a big win: it liberates you from thinking in terms of apps, it just simply goes back. If that means switching apps for that, it just does.

The middle button takes you to your list of apps, very similar to the home screen button in iOS and thus very natural to me.

The third hardware button is a search option, which uses Microsoft’s Bing search by default. This is a huge problem to me: Bing’s search results are crap compared to Google’s. For example, Bing is very bad at context: if I’m in Antwerp and I search for “These Days” in the maps application I want the advertising company, not the lyrics to the Joy Division song. Google handles these kinds of things perfectly.

It would be awesome if you could remap the search button to a Google app but considering the Nokia-Microsoft deal I don’t see that happening anytime soon.

Bing accepts speech input but it doesn’t work very well. Wolf’s Little Store was parsed as Wolf’s Liquor Store. To be fair the iPhone didn’t understand me either so maybe I should take some English dictation lessons (Siri does a good job at most input but not people or place names).

The Camera

There’s a dedicated hardware button on the right side to access the camera, which I think is a great decision. iOS’s “fast” way to get to the camera is not fast to me at all (double click the home button on the lock screen and then click the camera icon).

The camera itself is pretty good, but not great. The lens is a Carl Zeiss Tessar lens opening up to f/2.2. It’s very comparable to the iPhone 4 camera in terms of image quality. One thing to note: the white balance is seriously off sometimes in low light situations. I am spoiled here coming from an iPhone 4S of which the camera is mind blowing for a phone.

Photography nuts will be happy with settings for white balance, ISO, metering mode, exposure compensation and more. I feel this is a bit of an overkill for a phone; if you care about these settings you take pictures with a camera.

I didn’t try any video recording but apparently the camera records 720p video. There is no front facing camera but I don’t mind, I almost never used it on the iPhone. There are some WP7 phones out there that do have a front facing camera like the HTC Titan and Radar.

Default apps and commonly used functionality (calendar, phone, maps)

The calendar app looked great and I wanted to display my 4 calendars (home, work, birthdays, meetings) in the app. Turns out that by default only 1 calendar can be shown. The problem is supposedly at Google’s end and after a bit work I found an intricate solution which involved changing user agents and then changing settings to calendars on some obscure Google page somewhere. Not quite what you expect as the user.

On the home screen, you see tiles to launch app. Microsoft calls these “Live tiles”: some of them contain a bit of information e.g. the calendar tile displays up your next appointment, which I liked, especially when compared to the static iOS home screen.

I didn’t try the maps application yet. Because of the battery life problem (see later in this review) I mostly carried two phones, and I relied on the iPhone for Google Maps. The map application uses Bing Maps; one review I read about the Lumia states that it was frustrating that Bing Maps doesn’t always show every street at detail level, making it hard to find a specific place.

Bundled software

The Lumia comes with Nokia specific software. One of the bundled apps is Nokia Drive. It’s a GPS application, kind of like Android shipping with a Google maps with step-by-step directions. I like the idea of a bundled GPS app. I never dared to try the rather expensive TomTom iPhone app (currently €59,99 in the store). I talked about this before, no demo’s in the marketplace is bad for users, and is one of the biggest app store problems to me (especially when we talk about €100-€1000 software). Worth noting is that the Windows app marketplace does have a demo option for most apps.

I already own a dedicated TomTom GPS unit and just got my driver’s license so I didn’t really try Nokia Drive. It looked pretty solid but don’t take my word for it. In the initial setup the app asks you which country you want to download maps for and which voice you want (e.g. Dutch – Female). There’s a plethora of options.
There’s another app called Local Scout: it’s supposed to find restaurants and nearby highlights but it didn’t show any results for Antwerp. Bummer.

The marketplace: apps, apps, apps

I wanted to test the marketplace so I went looking for some games to download. There’s not a lot of games in store besides some major ones (e.g. Angry Birds and Fruit Ninja). There are some specific Microsoft games like Kinectimals. The first time I tried to download a game I got a weird error code. Parts of the marketplace are inexplicably in French even though I told the UI to be English. In a lot of ways “app shopping” on WP7 reminds me of app shopping on Android: walking through a store feeling disoriented while trying to find some hidden gems.

It’s as if every game I tried to download wasn’t available in my region… Why list them at all then? There are more oddities in the marketplace: an app named Facebook that is not the official client and lots of crap with shitty icons. Very reminiscent of the Android marketplace. iOS has a lot of crap on the market too, but generally the top lists of a category indicates a certain quality.

Kinectimals is a good demo to show off that the Lumia can do some cool 3D graphics. The last Nokia phone I used before this was the N95 and then before the N-gage. The graphics are a big step up. Unfortunately there are no games to actually enjoy those.

There is no built in timer app. This puzzled me when I was cooking rice. Siri is easy for this: just yell “set the timer for ten minutes” (that is the only usage I get out of Siri, I would recommend to people looking to buy an iPhone to get an iPhone 4 unless the camera is important to you).

The lack of apps is a problem. If you’re an iPhone user some things you’re used to are missing from the default apps (e.g. a timer). If you go to the marketplace there’s lots of apps but few quality ones: only the major social networks have a good Windows Phone 7 app.

As an example of an app I missed: the Train Info app on iPhone has no equivalent, except for an unofficial app by the iRail guys. There’s a lot of app ground that isn’t covered yet: from “local” media apps (newspapers, magazines) to specific functionality (software telephony).

I miss the iOS notification center. For example it’s 3 PM on a friday now and I have received 3 SMS messages and 4 e-mails. I didn’t know about any of them until I explicitly looked in the apps. Maybe this is a way to lead a more peaceful offline life?

There is an app for syncing contacts from an iPhone (and I guess most phones) to the Lumia via Bluetooth; it worked well and saved me a lot of transferring pains. Hooray.

As an OS and especially as a platform, Windows phone is not nearly as mature as iOS. Some features are missing and the third party app market is small and doesn’t fill the feature gap.

It sounds mighty obvious but Windows Phone is probably a better experience as a Windows user, just like I can imagine having an iPhone is a better experience when you own a Mac. There’s features in Windows Phone I’ll never use that might be handy to a Windows person e.g. Office, SkyDrive and Outlook/Exchange server sync.

There is no option as far as I found for internet tethering. When I was in an internet-less situation and needed internet for work, I switched back to my iPhone. I was told it’s in the works and you have to have a developer account to enable it.

Battery life

The battery is a big point of failure. The phone gave up on me twice before midnight. One night even when I just charged it that the evening! Even on days without much usage, something seems to be draining the battery. I have learned to live with the iPhone battery life in the past (approx. 1 1/3 days) but this is pretty bad. 2/3 day to a full day is not enough. 1 day is past the “tipping point” because I charge when going to bed.

(Note: this review was written before a software update was issued that supposedly fixes a lot of the battery issues)

Verdict

The Windows Phone 7 is a platform with a lot of potential. The OS has the basics nailed. Unfortunately, feature-wise WP7 lags behind Android and iOS, both in bundled apps and third party apps. Microsoft has a strong developer community: I’m very curious how this is going to develop. They have a chicken and egg problem here, where people won’t develop for the platform if there are few phones out there running on it; and few people will buy the phones because there aren’t enough (quality) apps for it.

In a lot of ways, the Nokia Lumia 800 is an impressive hardware feat. It’s beautiful and the screen is really black. The battery life however is a big issue, and this is why I can’t recommend it.

Cleaned the font cache in the font management app I use (FontExplorer X Pro).

Set the history & cache levels to Tall and thin (I work with a lot of files with tons of layers, don’t do this if you edit 100Mb photos).

Rebooted the system and everything was snappy again. Yeehaw.

(BTW, check out the recent sneak peeks at Photoshop CS6)

I realize I’m coming from a slightly odd perspective here: I know how to work fluently with the Adobe Creative Suite, as well as write HTML/CSS (and some basic JS) fluently, whereas most dedicated UX practitioners can’t do either.

Criteria

There are the things I find important in a wireframing tool:

Productivity: this is the #1 most important criteria: how productive does this tool make me? Does it have many shortcuts? It’s for this reason I don’t use any web-based software for wireframing. All of them have terrible shortcuts (bye bye Mockingbird and Mockflow!)

Handoff: if somebody else has to work on this wireframe, do they have an easy way to do it, what is the knowledge required? Your local project manager, client or dedicated UX practitioner might not be the Photoshop and CSS wizard you are and some projects require the wireframe to be editable by anyone. Some examples of easy-to-edit formats are Visio, Powerpoint and Google Docs drawings.

(It’s worth noting that if an app has a good “handoff score”, it probably doesn’t have a very good productivity score. E.g. a Google Docs drawing is great to hand off to someone with less specific tool skills, but sucks to be productive in)

Copy/paste ability: how easy is it to copy and paste text from the output file? Bonus points if the output file is the same file you need for the next “phase” (e.g. both wireframe and design are done in HTML and CSS).

As a testament to how important good copy/paste ability is: I once got a 10-page wireframe for a pretty well known Belgian usability expert that was an uneditable JPG, and was not able to get the source, so I ended up typing all of the text again. This happens all the time in business, and no, it’s not funny.)

Prettiness: I like to deliver a pretty product. Even if it’s a wireframe, I want it to be neat and clean. It should look like some thorough thinking went in it, not like someone slapped it together in 5 minutes (this is because, actually, some thorough thinking goes in my wireframes). Some software (e.g. Mockflow) makes it impossible to deliver a pretty products since their defaults are so bad (see: Powerpoint 2003).

Interactivity: how capable is the software of showing the interaction design in a good way? How easy is it (if possible) to make clickable wireframes?

Graphic tools: if the wireframing tool has vector drawing tools, that gives me a lot more freedom in drawing custom shapes. Using a tool that does not give you an easy way to draw any shape (e.g. HTML/CSS) is bound to lead you on to some very boxy designs.

Libraries: How many (good) libraries are available for this tool? Some tools like OmniGraffle and Axure have a lot of readily available templates and stencils (see: Graffletopia and Axure Widget Libraries page)

The wireframing tools I use:

HTML and CSS aided by a little bit of JS and PHP

• Great for websites obviously; gets rid of a lot of “double work”
• Very productive, can easily require a file with PHP, change it, and the change will be applied everywhere
• Obviously links make it very easy to create a clickable wireframe
• Not very pretty: hard to do anything custom: bound to lead to boxy designs (you can fix this in the design phase but for me the wireframing phase is very much an idea phase too)
• Handoff: sucks, few people deciding over wireframes are fluent with HTML/CSS
• Easy to share: just send over a URL

• Good for: big websites, web apps, stuff with a lot of text, stuff with common interactivity (modal boxes, tooltips hovers)
• Bad for: projects with a lot of custom shapes; projects with a lot of custom interactivity; projects where it’s really clear what you’re going to build

OmniGraffle/OmniGraffle Pro

• Works best for anything with a “special” interface: e.g. wireframing for something like a GPS. The iPhone/iPad stencils from zurb are great.
• There’s a very easy way to draw arrows, so good to explain a lot of custom flows
• Performance is OK, gets bad sometimes with a really big wireframe
• Handoff is bad, nobobody seems to use this software, files are in proprietary .graffle format, you export to PDF to show to client
• I haven’t tried the Pro version yet.

• Good for: custom interfaces, native app interfaces, custom flows
• Bad for: websites, anything with a lot of text, interactive prototypes

Photoshop

• Big plus: the text you use for wireframing is already in the document when starting to design
• Warning: requires solid shortcut knowledge to be productive
• Easy to get lost in the tiny details when they’re not important while wireframing
• Harder to manage multiple documents than illustrator. When you have to make a global change you can go and apply it a lot of documents
• Harder to share multiple pages: you have to make a separate screenshot of every file

• Good for: small websites, promotional websites, simple projects (1 pagers)
• Bad for: anything bigger than a few files

Illustrator

• Used Illustrator to wireframe for the first time this week, works pretty well
• Since it’s a vector tool, easy to build a library of shapes and widgets
• The artboards are great for getting a good overview of what you’re doing
• Big minus: relatively unstable and crashes often with large documents
• Warning: requires solid shortcut knowledge to be productive
• Love that I can just open the pen tool and draw what I want, I think this will lead to more original design solutions
• Good for: most wireframes really, too bad it’s so unstable with large documents

The wireframing tools I don’t use:

Aside from the web-based tools, here’s some wireframing software I don’t use, and the reasons why:

Axure RP

• Expensive ($589 + $149 yearly) (yes, Photoshop is also expensive, I already own it though)
• I couldn’t find any good (i.e. not ugly looking and has extensive amount of relevant widgets) widget libraries out there…: guess you have to build your own
• Obviously a Java app: performance blows. Creating a new document greets you with 10+ seconds of beachballing. Ugh.
• The standard output is extremely ugly.
• Some positives though: you can employ some interactivity to your wireframes, and I bet it’s good for large projects with a lot of repetition (i.e. websites with tons of repeating functionality)
• The prototype output nets you files that are hard to copy/paste text from (because of all the absolute positioning involved). (To be fair this depends on who made the file and how clean he/she worked).

Balsamiq mockups

• The sketchy feel doesn’t do it for me
• Also, Adobe AIR based, found it slow to work with, might give it another chance to see what they’ve been up to

My conclusion

The answer to the ultimate wireframing tool question is a bit disappointing: “it depends”. There is no ideal wireframing tool, most tools suck, and some tools are better for some jobs than others.

Here’s a shot of the Nokia Lumia 800 I’m testing. I’ve written an extensive review of it that will be published when I feel I’ve used the device enough to form a definite opinion. Overall I’m very impressed by it, but it also has major faults.

So much happened last year. I went freelance January 1st, and completed 60 varied projects so far. Some full websites, some website designs; helping small companies set up shop; sometimes working for a startup, digging deep into the HTML & CSS and iterating on features.

The most interesting project to me is one with national impact, which I hope I’ll be able to tell people about at some point in 2012. I’m striving for this year to be even busier than 2011 so if you need design work, get in touch.

I got my driver’s license. I moved to Antwerp. I re-visited New York for 2 weeks. I went to the Dutch Fronteers ’11 conference, and travelled to Ireland for Build. I organized two designer meetups: one informal get-together and one typographically themed evening with a professional speaker (Yves Peeters). I gave a talk called Design for Developers. I took up a big interest in photography.

I don’t have too many New Year’s resolutions, other than to keep doing what I love. 2012, onwards!

Said Android project never landed and now the phone is gathering dust on my shelves. I only ever use it to test websites in the Android browser (and only when doing — extensive — browser testing, it’s not part of my standard testing procedure).

Sometimes I think: maybe I didn’t give it enough of a chance. I tried to use it. I tried to love it. But I couldn’t.

My intention is not to anger Android fans. I don’t hate Android. I love the concept of an open platform that people can tinker with and use to create whatever they want. Apple’s walled garden is flawed in a lot of ways (no demos, censorship, no fair competition if Apple already created [your app functionality]).

But if I look at Android as a designer I see a lot of faults. It’s UI is inconsistent: there’s HTC’s UI stacked on top of Android’s default UI, then whatever developers came up with in their apps.

As a user I can’t help but notice that Android is extremely slow, not only in rendering UI and switching screens but also in browsing. Why sell a phone that runs an OS it can’t handle a 100%? The Desire S is certainly not on the lower end of Android phones.

By almost any measure my iPhone is a better phone: the only thing I like more about Android is the notification system and being able to make your dashboard/home screen useful (iOS is particularly bad). But mostly it looks like somebody tried to rebuild iOS but failed at a lot of points.

The only reason I’m keeping it is to be able to test Android apps for clients and/or test new apps that are Android exclusive ¹.

The nice thing about software is that it can improve. However, as a customer I’m locked out of Android improvements.

According to my twittering Android friends HTC is not likely to issue an update.

If I want Android 4.0 (Ice Cream Sandwich) on my phone I have to install a custom ROM, made by hobbyist coders, probably not very stable, which in turn voids my warranty. And if I do that, my device is not representative of the general population’s Android phone anymore, making it a bad testing device. Catch 22.

Maybe Android is a cool OS now – but if I want to see that apparently I have to buy a new €600 device. I just want to plug the phone into the computer and update it. This device is six months old. Why can’t I do this?

If you bought an iPhone 3GS 2,5 years ago you can still have iOS 5. Some features have been disabled, but you get most of the goodies.

Bing found a Wikipedia article on Vehicle Assembly Building (VAB) as the first result. The next 20-or-so results were not what I wanted. In fact, looking through all of the search results the VAB site (url is at www.vab.be) was nowhere to be found.

Tried Google then: VAB is the first result. Because I use Google every day I lost appreciation of how terribly good it actually is.

Now how can I remap the hardware search button to Google?

1. My presentation on Design for Developers gathered a whopping 77K views so far, making it the most popular piece of content I have ever created (a study on pagination from 2008 is the second most popular one). I am currently working on a new presentation about usability in general with lots of examples.
2. The Conversation We Keep Having, a reply to a genius blog post by a very anonymous person called “designdare”. About beauty and function and balancing the two. About making things that work.
3. The Magic Designer – an article about expectations: what a designer can and can’t do. Hint: it’s not magic. But talking helps.

Hopefully everyone is enjoying some time off these days. Happy holidays!

Looks awesome.

One of my favorite blogs, SplatF, interviewed David Cole recently; he’s a designer working for Disrupto. Dan asks “What’s something great you’ve read lately?” and he answers:

I can’t stop thinking about Mills Baker‘s blog post Design & Compromise.

So much has been written about the design process, satisfying clients, retaining artistic integrity. But that piece brings into focus what I could never quite put my finger on. It’s about why compromise in design is inherently flawed, and it takes the tack that designs are theories until they’re out in the world, and that really jibes with how I think.

I read that post front to back and again, and again. To me this thoroughly explains why the feedback process in designing ends up making the design worse in a lot of cases.

You see, when you create a design, you decide on a lot of things with a certain vision. You see things in a certain way: whoever you’re designing for, whatever problem you’re solving, you see this problem through glasses and what you see through these glasses is basically defined by what you know. The person on the other end — the client — who has to deliver feedback on your design sees things in a different way. He knows different things than you know. He probably sees his company or what he does through a different set of glasses.

If your visions don’t align, your design is compromised. It becomes a combination of two visions, where — as Mills Baker notes — the design is not the sum of its parts, but typically something much worse. Don’t get me started on designing by committee, where this problem is extrapolated to the nth degree.

It’s only when visions align that truly great design can occur. In the case of a new project, the designer and client probably don’t know each other very well. In the best case, the client chose the designer because their values and beliefs align: this creates a solid base for working together.

It should be a company value to truly understand the project problem and align visions with the client. This sounds obvious but most design proposals I’ve read list a lot of design hours but never mention research, information architecture and strategy. The company values should be projected outwards so potential clients already know what the company is about.

Speculative design is a disaster waiting to happen: a design is made without any communication, without any “vision aligning” (a.k.a. strategy). Combine speculative design with design by committee and you just put yourself in the position where it’s virtually impossible to produce a good result.

So in order to produce a good design (supposing both parties are experienced and the practical is no longer an issue), we have 3 possible situations:

1. The client leaves the designer to creating his vision, interfering only with that which is business critical.
2. The client takes up the autocratic role and uses the designer as a workhorse, creating his vision, “using” the designer, not as a thinker, but as a laborer.
3. All visions align (this situation becomes progressively harder to create with more people involved).

I’ve spent a lot of time thinking about this because an autocratic way of designing, where one person takes almost all of the design decisions, suggests that this one person has the one true solution to every problem.

As for myself, I wouldn’t even want to suggest that I know the design solution to every problem. At most, I like to believe that I can think clearly and given enough time produce a great solution for problems within the fields I am proficient in (i.e. interface design).

The second situation then, where the client is the micro decision maker and the designer is only a tool: I think there are few skilled designers who would be willing to be used as a design monkey. Besides, a designer cannot apply his domain knowledge if he is strictly used as a laborer.

But the third situation can be created: you can surround yourself with people who have the same vision. You can find clients with the same vision if you are clear about what you do and why you do it.

You can find people that believe in the same things you believe in. Craftsmen. Together you can create a design, a product, that is not a compromise. You don’t have to align visions anymore because they are already aligned.

It’s for this reason that I decided to grow Wolf’s Little Store in 2012. To be able to make great things I need people: people with a similar vision. These things I know: I’m moving the office to Antwerp mid december, and in 2012 it’s time to grow. So come talk to me.

Last week I gave a presentation called Design for Developers (view on SlideShare).

I was invited by the Zorros — web application afficionados — to give a two hour workshop about this subject. Then I gave a shorter version of the talk at a Fronteers event.

The goal of Design for Developers is to teach interface design as a set of rules: there are some good default values for a lot of design decisions that you should remember, there is a “scientific” way of approaching things like alignment, even though many designers will tell you it’s something you should “feel”.

View the presentation on SlideShare.

Then you see an app like ’101 sex positions’ or ’301 Fart Noises’ reach the lofty heights of App Store Success. They spent a week on a gimmick and made bank, you spent 6 months building an app of utility and are struggling. Let’s not even get into the long debates you get into with people about whether they should buy your $1.99 app. People will spend hours researching a $2 purchase, browsing reviews, emailing the developer, checking online forums. Then they will go to a coffee shop they’ve never been before and buy a $4 coffee. From the developer they expect unlimited support, unlimited free updates. From the coffee shop they expect nothing except mediocre coffee.

Well, don’t make $2 software then, that’s ridiculous to start with.

Windows 7 has an impressive set of built in hotkeys: if you’re on Windows try the Windows key + the up arrow to maximize the current window, or Windows key + left to snap to the left side of the screen. For the full list, see this article.

I have 3 computers, 1 portable computer. If you think this is overkill, I’m in the situation where 2 of the computers gave up, so I’m glad I have this.

I have 2 separate ways to test Internet Explorer: through virtualization or a separate Windows computer.

I have a backup 3G internet connection on 2 devices.

My data is in 5 places: backup, offsite backup, cloud backup, and on the hard drives of 2 computers.

I went to look for an office in Antwerp and the people there said they had subscriptions to 3 internet service providers. An extreme case of redundancy but maybe not a luxury if you support 30+ companies who depend on the internet daily.

Just making sure I did not miss my deadline because “my computer didn’t work”.

It’s conference season: in October I went to Fronteers and now I just got back from Build in Belfast, Ireland. We had a Belgian crew – six freelancers strong – and had a blast.

Build conference is a bit of a special conference case in a sense that it’s a week full of events (workshops, evening lectures, a pub quiz, a film screening and a beer craft festival) with only one real conference day. This is probably ideal for people who live in Belfast or nearby, or who combine the event with visiting Ireland (since the side events won’t take up your full day). We chose to just attend the conference day. Practicalities aside, let’s concentrate on what I learned and the conference day itself.

Andy McMillan — nowadays best known as the man behind The Manual — has been organising the Build conference for three years. I went because last year was supposedly fantastic. Tickets were almost sold out the day they went on sale.

This years’ speakers were a host of famous web designers from the UK and the US including Jason Santa Maria and Simon Collison.

The best talk (and this is not my opinion alone based on the standing ovation he received) was by Wilson Miner who delivered an hourlong epic combination of thoughts, images and personal story. We should build to last. The tools we shape shape us. You should not assume that everyone knows what you know. Computers are like a bicycle for our minds.

I wish I could frame this presentation and hang it on my office wall, next to a scan of a page from Paul Arden’s “It’s not how good you are, it’s how good you want to be.” (More info about this book)

My second favorite was Craig Mod (currently working on Flipboard) who talked about books in the digital age: the odd interaction design of iPad magazines, the Kindle experience of having your content on the device when you open the box – and a loss of romanticism or conversation because if everyone has a Kindle, how can we tell which book they’re reading and strike up a conversation? (This itself slightly alleviated by the “highlight” feature)

Craig Mod in action. On the slide what you can achieve design-wise in iBooks if you try hard: custom fonts, floated images. The future eBook is HTML5 and CSS3.

It’s hard to describe what Build was. What is sure is that none of the presentations were practical in any sense (bar Jason’s presentation on type). Almost all of them revolved around why we do the things we do. They were philosophical in a sense: deep thinking about why, how and where things should go.

The main theme of the day really, was craftsmanship. Richard Sennet says in his book The Craftsman that as a craftsman you have the innate desire to do a job well for its own sake. Sometimes in the daily work we do we tend to forget to bring out the best in ourselves.

I was glad to be reminded that we all want to do meaningful work that makes a dent in the universe.

The day brought good conversations, lots of beer and a newfound inspiration to do better work. Highly recommended.

Sun coming up as we walked to the conference

Jelle’s camera

Jochen & Jelle.

Crazy Irish burger

A baby Guiness!

I don’t get it.

This is the complete opposite of Apple’s (extreme) skeuomorphism in their UI design. It’s not attractive, it’s bland. It’s not “minimal”, it’s boring.

This looks like the work of people who took a phrase like “Perfection is achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” and applied it literally. Oh yeah, can we remove that border, to make our application easier to use? NO! That’s not the way to do it. The border is there for the visual hierarchy. There’s different background colors for different sections so I know where to look. Things are put in boxes so my eye can look for edges and start reading there.

And now the same design has invaded my e-mail client. C’mon Google, you have over 30 000 employees. You can do better than this.

It works surprisingly well, however, not really sure about the usefulness. This is probably great when launching a campaign so you can immediately see where the traffic comes from.

One of my main gripes with GA is that I can’t see the detailed referrer url, e.g. GA will tell me the traffic comes from t.co (Twitter’s shortened URLs), but then I can’t see from which specific tweet. I guess the dataset would become too large if data was held in this kind of detail.

I used to use Mint which had a nice “referrers” tab where I could see the exact URL that pointed to my site. This was useful for spotting any replies to blog posts or backtracking replies to comments I made on other blogs.

If you are interested you can sign up for real time early access here.