A UX review of Clear, todo list manager of the future

Meet Clear, the todolist manager that does everything right.

Clear for iPhone from Realmac Software on Vimeo.

Intuitive interface

Clear has no interface. It just uses swipes pinches and touches in a list the same as you would on an image. While there is no such thing as intuitive, this is as close as I've ever seen.

But the best part about clear is it's use of color and sounds.

Use of color for information

Colors are used in the lists to show priority. The more saturated the color, the more important the task. Now the tasks are already in a list, so one could argue that adding colors to it is redundant. But this is not true. Any human scanning a list will see each item as equally important. Most of us tend to try and put the most important thing at the top of the list but every time we look at the list we still browse more than one item.

Making the list colored gives a subtle hint that you don't need to look at other tasks. This is the one.

It also gives the user a reason to order the list properly. While the app never tell the user they have to, just creating a rule that says the top is higher priority will make users want to use the rule. Think of it like a hidden keyboard shortcut. Once you learn it, if it's a valuable shortcut, you stick with it.

Sounds that make it fun

Audio feedback has been used to great effect in games for decades. Which is why I've always found it odd that it's had such little attention in software tool design. Until now.

Clear has a sound effect for every function.

New item? Pop.

Clear app: adding tasks

Finished item? Ping!

Clear app: completing tasks

Delete item? Swoosh

Clear app: deleting tasks

But I really mean sound effect. These aren't just midi notes annoyingly stacked to make an awful racket.  These are effects that sound great by themselves and stack neatly. What do I mean by stack? If you complete several tasks in a row, you don't just get an annoying amount of pings. You'd hate that. Instead you get a rising scale of pings that together seem to form a rising crescendo. Which incidentally is exactly like the normal sound design to gaining point in video games (remember picking up coins in Mario?)

UPDATE: The awesome sound design was done by Josh Mobley.

Getting out of the way

The reason the design of Clear is so impressive is that, while the UI reinforces the users positive emotions of using a todo list, it get's out of the way to let the users focus on thinking about tasks.

There's simply nothing else to think about. And you won't get those soothing sounds of completion if you don't complete some tasks.

Summary, or: is it awesome?

Clear is the best interface for getting things done I've seen so far. On any platform. It's also responsive like few apps on iOS.

It does gamification right by letting the user learn it's features intuitively and reinforcing the actual use of the product instead of showering them in useless badges.

Sadly however, it also really doesn't have a use. At least not for a todo-list power user such as myself. Enter a 100 tasks into Clear and you'll be looking at an infinite list with no overview. There's no search, there are no smart lists. But these features would not improve the product. In fact, I think including more features could destroy the product.

If you use lists often but don't have 1000 tasks in them. This app will make you smile on your way.

If you use really long lists, this app will be nice to play with but not useable.

Should you buy it? YES. If only to support good design.

 

 

As usual, the Verge has the best video first look:

An example of interactive UI design, the future of web design

HTML5 is a name we give the next level of web technology, it's just simpler to remember. All the web is built using HTML, CSS and Javascript and with HTML5 new and better ways of using these languages are being made available everywhere.

The revolution started with the iPhone.

With the launch of their breakthrough device they didn't intend for developers to be making Apps. Apple instead believed that developers would make web apps using HTML5 and save the web app as an icon of their phone. Surprisingly open by Apple's standards the strategy soon changed to native apps because web apps simply didn't feel quick enough.

Web technology is getting better

However, as HTML5 becomes a standard on PCs everywhere web apps are approaching the same sophistication as native applications. The hardest step now is for developers to take the plunge and create these great new interfaces and not get stuck in the old way of thinking and just pushing out another blog.

One of my favorite designers, Dustin Curtis, is leading the way with this new UI element on his site; the Kudos button.

It looks great. It's fun to use and it's a really simple way to add some life to a site. It doesn't work on touch interfaces for obvious reasons. Sadly Dustin hasn't made the code available yet, but most programmers could probably copy the concept. It's that easy. We just have to make sure we starting thinking less about static web and more about user interaction.

UX trend predictions of 2012 B:

Whenever likeminded creative people try to innovate trends emerge. Ideas give birth to ideas. As ideas keep combining in the heads of creative people everywhere some ideas become more sticky than others. I’ll document some of the trends in user experience design I predict will become the norm in 2012. You can find my first post on the subject here. Another example from a 2011 app is the amazing full screen representation in Wren.

Wren app for Mac

 

White space apps

When I first saw Wren I was amazed. It was focused and minimalist. Therefore I was shocked to see the full-screen button in the top right corner of the app, "Wouldn't that completely wreck the experience" was my knee-jerk reaction. Then I tried it and another trend was obvious, apps that scale without bloating their feature sets, or White space apps.

Why are White space apps different? Mobile.

The mobile revolution has some interaction and UI designers scratching their heads or pulling their hair trying to fit all the usual information. The current computing paradigm has relied on massive amounts of text and information tags for a long long time. Even programs that have really tried to rid themselves of rarely used functions or unnecessary amounts of help information have sometimes been stuck in contextual help hell due to the modus operandi of desktop interface design.

No more. Mobile has rid us of all these things. And some designers are provocative enough to realize that less really is more and simply scale their apps without adding more information or complexity.

Is this good or bad?

Only time will tell. But the dominance of mobile design today tells us a lot about what people like. I think it is less about the iPhone being a must-have product and a lot more about really smart and beautiful apps that are just complex piles of engineering on other platforms.

Simple is better. And using white space to focus the users attention on a sparingly chosen set of functions beautifully designed makes this clear. I believe these minimal products will in the future continue to trump the feature behemoths of yesteryear.

Due for iPad

Nokia N9 slogan - Just Swipe, dumbass!

Nokia N9 marketing

All screen No home button Just swipe Nokia N9 No way to know how to use it without reading a manual or being taught how Just swipe, DUMBASS!

Nokia must really love being different. Or at least love patenting interaction models, so they can differentiate from iPhone.

To bad different isn't the same as good.

Terms for Interaction Design

To work effectively with other people we need terms that define abstract things so we don't get stuck on them, such as Grok and User Interface. Let's define two more: Object and Model.

Any interaction consists of a one or more systems of thought. In cognitive psychology such systems (or representational models of the real world) are called cognitive models.

When we interact with something we use a lot of these models. But the term isn't fleshed out enough for daily use in interaction design.

An Interaction Object is the entire interaction process with a thing or a process. Using a pair of scissors (holding them correctly, using them to cut and understanding in what way they cut) consists of many cognitive models but only one Interaction Object. But every process or new function is a new object. A Swiss army knife has as many objects as it has tools.

A Interaction Model is one set of possible interaction methods. Much like the cognitive model a Interaction Model consists of only a single thought process about something. A pair of scissors can be held by the handles, one model. A pair of scissors has cutting surfaces that are sharp, another model. Etc etc.

Using these terms we can discuss interaction design for abstract products such as games and web apps with much greater efficiency.

Example 1: A menu on a web page is an Interaction Object. And if it has more than one or two Interaction Models you're making it to complicated.

Example 2: A game avatar has several Interaction Objects. To be able to understand them they must have very few Interaction Models.

Example 3: Facebook has a lot of Interaction Objects, but most Objects only has a single Interaction Model. Does this make Facebook easy to use or harder to Grok?

Can you use these terms or are they still to complicated or undefined? Let me know what you think.