AtiKuS Design

I've been using OSX since tiger was released and of course we all know it's a beautiful operating system. I just wanted to point out one little feature that most people probably use and don't notice. It's good to celebrate the little things.

When you drag a file over a folder and hold it there for a second, a preview of the contents of that folder opens up allowing you to easily drop your file in there if you decide this is the place for it. However, if this isn't the folder you want your file to live in, then you can drag the file outside of the preview area and the folder then closes instantly, which leaves you free to explore the other folders available.

It's such a beautifully simple interaction you just wouldn't notice it.

Permalink | Leave a comment  »

If you have a video on your website that plays in a lightbox please take not of this advice.

When you ask someone to click a 'play' button on a video, you can bet they are expecting the video to play. Don't then load a lightbox and make them click another play button to watch the video. Instead, open the lightbox and auto-play the video.

Permalink | Leave a comment  »

A lot has been said, both good and bad, about the latest version of the Twitter iPhone app and while I can certainly see some of the bad points they added one feature that I really like.

Changing the 'Mentions' tab to a 'Connect' tab and adding Retweet, Follow and Favourite notifications in there was a great idea. It's really nice to discover when someone favourites your tweets and it helps you to keep track of what tweets are positively received. It's also now much easier to know who is following you and find out a little put about them.

So regardless of your opinions of the app as a whole, surely you can see some good things came of it?

Permalink | Leave a comment  »

A few months ago Facebook finally released a native iPad app and along with it they launched a brand new UI across all mobile devices. Visually, it seemed like a huge leap forward but after using it for a while now the experience of using it just makes me angry.

With the new design Facebook intriduced a side menu and a shortcut menu at the top, which allows you quick access to friend requests, messages and notifications. While it might seem logical to make those options easily accessible, the way they have done it is just wrong.

 

Why the Facebook app is wrong (in my opinion)

I'll admit I'm very OCD and don't like to leave notifications present and this is where Facebook lets me down. The hirearchy of the mobile app is so wrong, there are endless ways to get to the same content and seemingly each different method takes you to a new level in the app structure, I've often found myself hitting the back arrow numerous times and cycling through the same content until I get back to the top of the tree.

What makes this particulary frustrating is that I can be reading a message, and have a notification that is telling me the message I am reading has been updated by someone else. Instead of just showing me the update in the current screen, I have to activate the message popup and click the notification to then reload the message before the notifcation bubble goes away. Doing this on a particualrly active message board really gets tiring.

 

Has this bothered you in the Facebook app, or am I just too much of an OCD?

Permalink | Leave a comment  »

Merry Christmas! How many web sites or apps have you seen that have added some festive signs into their service?

Last week I noticed you could add snow to your YouTube video and drag a snowflake to swipe through your video.

And just now I've opened the brilliant Hailo app to spot they've added a Christmas hat to their little map pointer man.

It's a lovely way to put your customers in a good mood when they're using you during the holidays.

Have you seen any other Christmas additions?

Permalink | Leave a comment  »

There have been a lot of gushing tweets about the re-design of the Path iPhone app in the last week. It is a beautifully designed app (even though I won't ever use it, but that's another post).

The post menu is particularly nice. Opening the menu displays a number of options allowing you to choose the type of story you would like to share. As with a lot of iOS features it is hidden by default and would need people to explore the app to find it. However, the Path designer have tried to over come this by animating the menu opening during the first view of the app after registering. Doing this draws attention directly to the menu and by showing the animation it teaches viewers how to get it back when they want it.

Permalink | Leave a comment  »

Mobile devices exploded onto the scene in 2011 and are only going to get bigger in 2012 and with them came a whole new learning curve for designers.

The smaller screen space has meant that not every feature can be placed on the screen at the same time. This has led to a lot of features ring hidden only to be displayed after an arbitrary gesture. To get this hidden information across tooltips have become common place within many apps.

To use tooltips effectively thy should only display in the context where they are necessary and they should be easy to dismiss, otherwise they can get in the way of the experience just like this example from Path.

After registering, Path suggests that you connect with friends, however, I wasn't ready to yet and looked for a way to dismiss the tooltip and actually explore the app. Sadly, I discovered their gentle nudge to connect with friends was actually a demand because I couldn't dismiss the tooltip.

If you're going to use a suggestive tooltip you should make sure it is easy to get rid of. Path could have easily just added another step into their registration process that asked me to connect with friends of skip. However, they disguised this extra step as a tooltip, which I had to annoyingly accept and then instantly take a step back to the home screen I wanted to use.

This didn't give me the best first impression of them.

Permalink | Leave a comment  »

I recently discovered a nice little bookmarking service called Whimventory that is set up to allow you to create wish lists from multiple websites (especially good at Christmas time).

It is a simple little application and you should check it out. However, their registration process highlights a great example of how not use inline form validation.

The registration form is nice and short and shouldn't take a minute, however, the live form validation makes it take far longer than it needs to. As you as you activate a form field you get a list of errors telling you what you haven't had a chance to input yet. These errors only go away when you move to another input field with satisfactory information.

This constant validation check makes you stop and check that everything you input is accepted by the form before beginning on the next element. There is a saying in the UK which states 'you are innocent until proven guilty' and would be great advice to take note of on this form. Errors should only be displayed after some incorrect information has been entered and the active input has been left.

Live validation will always increase the initial time it takes to fill out a form because people will generally stop to check the validation before moving on. However, beginning with errors and then constantly validating after every key press is a sure fire way to make filling out a form far more painful than is necessary.

Permalink | Leave a comment  »

This has always bugged me so I thought it was about time to point it out to others. I use the wonderful twitter app on my iPad and for the most part marvel at the wonder of the interaction design.

However, unfollowing people on there always annoys me. When I click the nice and clear unfollow option on someone's profile I am then presented with the exact same option again, which I have to click to confirm.

Now I understand that for certain functions like deleting lots of work it can sometimes help to ask for confirmation just in case it was triggered in error. However, unfollowing someone isn't exactly life threatening and it's really easy to undo the action (just click on e massive 'follow' button you are left with) so I don't understand why they feel the need to ask me again. They don't even change the label, I just have to click two different unfollow buttons to complete the action.

Very annoying!

Rant over :-)

Permalink | Leave a comment  »

Since launching last year Fab.com has established itself as a big player in the flash sales market. Not only are they undeniably cool but the design and UX principles that they display are beautiful. They're fast becoming a "How do Fab do it?" kind of company.

One example of their genius is how they have chosen to implement variable rewards within their site. Variable rewards are a powerful persuader when done right. Because they are unexpected they're far more exciting and it also means you are likely to visit more just in case you get one.

Another thing Fab have done well is putting a time limit on their offer. By giving me only 24 hours to take advantage of this offer they make customers browse the site for products they could be persuaded to buy with this offer. Without this urgency it is unlikely the offer would be as successful.

How could you employ variable rewards on your site?

Permalink | Leave a comment  »

If you are ever considering the pricing structure for a product or service then pay special attention to how your prices increase.

I've just been browsing the Feng GUI website and after deciding I would like to take this relationship further, I wanted to find how much it would cost me to use. The site displays a clear price grid, which conveys various price options. However, as the price increases I don't seem to get any more for my money (except for a longer validity date, which isn't going to persuade me to act fast). It's commonplace to expect to get more value for money when you make bigger orders, known in economics as Economies of Scale.

In the Feng GUI example, I have no reason to purchase any more than 10 credits at a time, unless I specifically need to use more than 10 right away. If they re-thought their pricing they could persuade me to buy more credits by offering some for free as my order increases. For example, if $25 gets me 10 credits, $50 should get me 25 credits and $100 should buy me 100 credits etc.

Have you seen any good examples of this pricing structure being used?

Permalink | Leave a comment  »

I got a tweet from a friend last week telling me I should enter a competition to win some awesome concert tickets. When I looked at the link he sent I discovered all I had to do was fill in a small form so I decided to enter. I entered my details and hit enter, waited expecting to see a nice thank you message, however what I got was quite different.

The page refreshed showing me the form again with all of my details still entered. No other message, just reloaded the form. I guessed that something wasn't right and noticed my email input box was now yellow so assumed I had entered it wrong somehow. As I checked it, I found it was in fact correct and still had no clue why I couldn't submit the form. I hit enter a few more times and still couldn't get it to submit.

Why, I still don't know so in the end I gave up and left the site without entering. Whoever thought that it was a good idea to omit any error messaging at all should be shot!

If you're designing a form then be sure to spend a lot of time ensuring errors are displayed clearly and help people to diagnose the issue and solve it. This will significantly increase your conversion rate.

I always like to create a summary message at the top of the form to tell the viewer there has been a problem. Then I like to place another message just above the input in question, explaining clearly (as a human) what stopped the form from submitting and how to resolve it.

How do you like to handle error messaging? What advice would you give to the guys who designed this form?

Permalink | Leave a comment  »

iOS 5 is great and all but I've found a little UI issue that I don't really understand.

The main reason I wanted to use the new 'Reminders' app was for the location based reminder. I have both an iPad and an iPhone and have tried the app on both.

However, for some reason the location based reminders haven't been implemented on the iPad. I could understand that the iPad isn't really a mobile device so it might not be used by many people. The iPad does have GPS though so it is capable of having location based reminders.

Anywho, that isn't what irked me about the UI. If they had decided not to include the option to allow GPS reminders Apple should have amended the UI to accommodate.

The reminder option on the iPad has to be by day, so if I choose to look at that option why would I have to flip a switch to turn it on and select the date? This is clearly an after thought and leads to an extra action that just isn't needed.

This is unusually lazy design from Apple

Permalink | Leave a comment  »

With iOS 5 coming out there has been an huge amount of app updates to keep up with for any Apple customer. One of the apps that released an update was eBay and with it they sent out a nice little Easter egg.

In the list of changes to the app they listed "hugs" which I'm sure very few people noticed but for the small minority that did I bet it put a smile on their face!

Little touches like this can really engage your customers.

Permalink | Leave a comment  »

AppSumo are currently running a wonderful competition, where the winner receives a Dropbox Pro account for life.

Of course as an avid user of Dropbox this competition excited me and I entered instantly, however, it was what happened after my entry that interested me.

On the 'Good luck' screen I was asked to share the competition with my friends, which ordinarily I wouldn't do as there isn't anything in it for me. This time though, AppSumo told me that for every friend who entered (after following my link) would gain me an extra entry into the competition.

If you want people to share content for you, you should think about offering people incentives such as this one, which should improve the chances of them doing so.

Where else have you seen examples like this? I'd be keen to see some more.

Permalink | Leave a comment  »

I was playing about with the search bar in OS Lion today when I noticed a great way to indicate the relevancy of the results. In the example shown, I searched for the word 'dock' and as I typed the first 2 letters a number of icons were greyed out, leaving only a few slightly highlighted by a spotlight.

Then, as I completed the word 'dock' the icon for that feature was more obviously highlighted and the parental controls feature was ever so slightly highlighted. This was an excellent way to visualise how relevant different search results were. I could easily discount the items that weren't highlighted and I could clearly differentiate between the strength of the highlights.

Can you think of any other UI's that could use this feature? Why haven't we seen something like this more often?

Permalink | Leave a comment  »

I've just signed up for Pinterest as I had heard that it's a nice UI and wanted to have a play.

The sign up process is pretty simple and they have employed a neat little idea when they look to suggest people for you to follow.

Pinterest really needs you to follow some people because it would be hard for a new user to grasp what it is and the benefits they could get without doing so. So, after you give them your details they ask you to tell them a little about your interests before suggesting like-minded people for you to follow.

They don't just ask you to type in tags into an input field but instead they use the theory of recognition over recall and ask people to click on images which represent some common interests. Because clicking a few images is so quick and easy, it makes it a task everyone would do and in turn means the people suggestions on the next screen far more relevant.

Permalink | Leave a comment  »

The new Posterous launch has seen a whole new approach and this can be seen to great effect in their iPhone app redesign.

There are lots of new features to explore but my favourite interaction is the new way to add photos to your posts. I add a photo in every post, because I tend to comment on screenshots of UI's. My general process is: take screenshot, save to dropbox, open dropbox on phone and save photo to my camera roll, write post on iPhone app.

So, when I loaded up the new Posterous app to write a post and went to add a photo, I was pleasantly surprised to see the option to choose the latest few images from my camera roll from the same screen.

Historically, this has been done by loading a second screen that displays your photo library and navigating to the photo before choosing it. However, the designers have cleverly guessed that a majority of users might be attaching the latest photo in their camera roll and designed a quick way to do so for those people.

There is still the opportunity to navigate your photo library as before, but I am yet to need to.

This is a great feature as it will save a good majority of people some time and mental effort, while still providing the same backup solution for everyone else.

How can you make your audience's life easier?

Permalink | Leave a comment  »

While I was writing my last post on this blog, I added a hyperlink to a word that would link to an external website.

Of course, for this to work I'd have to add http:// which on this occasion I neglected to do. Luckily the clever little Posterous interface reminded me, via a pop up, asking if I would like them to add it for me. I did and they did.

If you can guess and detect possible errors that your users might make and suggest possible solutions then try to incorporate that into your app.

Permalink | Leave a comment  »