Wolf's Little Store

I am looking for a freelance webdesigner/user interface designer, preferably based in Antwerp. You can find the full job offer here.

Yesterday I was invited to speak at a Fronteers event in Rotterdam. I gave a talk about designing better user interfaces. This is the short description:

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.

My Photoshop was very slow today, here’s how I fixed 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)

Over the past year I’ve made a lot of wireframes. This post is about some tools I’ve used and my findings.

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, the first day of the new year is here. Happy new year everyone.

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!

I bought an Android phone 4 months ago because I thought I was going to sell an Android project and wanted to research the UI. I set up the phone, I hated it, and never really used it again.

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.

Last night my car didn’t start anymore. I was testing the Windows Phone I got, which defaults to Bing search. I searched for “VAB” which is the organization to call when your car breaks down in Belgium.

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?

Karl posted his 5 most read articles of 2011 (Dutch). Inspired by this I dug into Google Analytics to find out which pieces of content I created this year were popular. Seemingly the big hitters are the ones that teach things or reflect on craftsmanship and/or design in general. That’s not a real measurement of success (see: 9gag), but hey, it’s the easiest metric. In order:

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!