Android UX: Day 2

I miss the iPhone home button. It is an amazing invention. One press, two presses, press and hold, that’s all you need from a button. I miss that physical affordance and feedback. I know when I’ve done it right.

On my HTC Sensation XL (which I just started using yesterday) I have 4 buttons that give me no indication of how hard and long I need to press, or whether it had worked. It is starting to be annoying.

On the other hand, I am preferring the Android’s on-screen keyboard to iPhones. Firstly the screen is larger so each key is easier to hit accurate, also the press-hold-key to switch it to numbers and common punctuation is excellent. I never liked switching keyboard modes on the iPhone (from characters, to numbers, to common symbols, and other symbols). I am waiting to get my matte screen protector for the HTC the shiny glossy screen makes it more difficult to drag and pinch the interface (I prefer the easy-glide texture of the matte screen protector).

I also like that the speakers on the HTC is built facing forward, not at the slim edge of the iPhone, exactly where I place my hand when I have the phone on landscape rotation.

My HTC does not seem to be as responsive as the iPhone, that is quite irritating.

After my second day, I am still finding the Android interface confusing, although I am starting to get a feel for it; how to get around, how to go back, when to press the menu button.

Posted in: Compare and review, iPhone

Tags: , , ,

Android UX

I just bought a HTC Sensation XL phone, running Android 3.2 (Ice Cream Sandwich). I believe I got those details right. The world of Android has always confused me. With so many manufacturers producing a range of phones, each interface with it’s own flavour, you have to forgive me for haven given up in the early days.

I have had the HTC Sensation for about 8 hours now, and some things have impressed me.

I like the large screen. It’s 2.5 cms longer and 1 cm wider than the iPhone 4s. In terms of pixel/resolutions, I don’t know off the top of my head but wouldn’t be too difficult to find out.

The hardwired buttons are okay, not as confusing as I was expecting it to be. Having these dedicated buttons for common actions (home, menu, back, search) means there is more screen space for displaying content. It also removes the need to tap in/out of full screen view used for many games and entertainment apps.

However, moving from the screen to the fixed button off screen does not feel a little more disconnected than a fully within-screen experience.

The camera is good, and has built in effects. I like that the camera lens is position away from the edges where I typically hold my phone. The number of times I have taken photos on my iPhone with a corner obstructed by my clumsy finger!

The screen and image quality is lovely, as good as iPhone 4. No complaints there.

I do also like being able to dismiss notifications easily. One thing that annoys me about the iPhone is the little red symbol indicating error or number of new messages, and it won’t go away until you go into the app. On the Android there is a notification centre which shows notifications from all applications, and you can clear them all with one tap.

These are all small improvements on the iPhone experience, however there are two things that frustrate me about the Android.

Firstly, the navigation is confusing. After 8 hours I am just getting accustomed to the idea of having a bunch of ‘shortcut screens’ that only show a few of your apps. The rest of the apps are hidden away, and is accessed from the ‘All Apps’ button on the bottom left of the screen. It took me a while to figure out how to remove, add and rearrange widgets on those shortcut screens. It just isn’t as clear and straightforward as Apple’s press-and-hold technique.

That’s not my hand by the way. But it does feel quite large in the hand, but not uncomfortably so.

The thing that I truly dislike about the Android interface is how to delete apps. On the iPhone it takes 2 actions: press-hold (entering rearrange/delete mode), then tap on the app to delete it. There is a confirmation message. But 3 actions. That’s all it takes. On the Android it taakes 6 taps to delete the app, and another tap to confirm. Too many. It was difficult to figure out as well. As a new user I am trying out lots of apps, and half of them I end up deleting. I would say deleting apps is a medium priority task, and should be easier and simpler to carry out.

It took me a little while to figure out how to use apps when the screen is locked. Dragging an icon to the ring to activate was not intuitive, however after a few errors I now think it’s pretty neat. I can call, mail, camera and message from the locked screen with one drag action. With the iPhone there is the drag to unlock, then tap to enter the app. For me, especially to use the camera to capture an urgent moment, this is a very smart feature.

The HTC Sensation sleep/lock button feels a little too shallow, not enough indentation when I press it. Otherwise, I am already missing iPhone’s silent button, and I haven’t yet had to use that feature yet.

I haven’t figured out yet how to change the ring and message tones.

Otherwise, still enjoying my shiny new toy.

Posted in: About UX, iPhone

Tags: , , , , , ,

The Whale Hunt: A new interface for story telling

Beautiful website I just stumbled onto. It tells the story of a man and his crew hunting whales in Barrow, Alaska, moment by moment. (For those concerned, it’s not as cruel as it may seem since whale is big part of their diet up there.) There are different viewing modes: mosaic, timeline and pinwheel. Beautiful photography aside, I really like this innovative (new?) form of media. Check it out:

http://thewhalehunt.org/whalehunt.html

 

one photo along the time scale

 

moment-by-moment story telling of the whale hunt

Posted in: The Catwalk

Tags: , , , ,

Unsubscribe mailing list: not hiding the ‘unsubscribe’ link

Following on from the last post on Unsubscribe Mailing list webpages, I found a great example of an email that highlight the unsubscribe feature. It shows these guys really understands users’ needs; makes them feel good about signing up, assures them they can unsubscribe anytime, and builds trust and confidence in the process.

You can unsubscribe anytime by clicking on this button.

Posted in: About UX, Design notes

Tags: , ,

Unsubscribe mailing list webpage

I have recently started to take real offence at the hundreds of irrelevant emails I’ve been receiving, most of them from mailing lists I was forced to sign up to for a discount (or tricked into doing it). Paging through my emails, and searching for that magic ‘unsubscribe’ word, not bothering with the rest of the content, and I realized a few things.

  1. Firstly, I’m glad of the policy these days that no login/password is required to unsubscribe.
  2. Secondly, mailing list owners are pretty good at hiding that magic ‘unsubscribe’ button, using phrases like “no longer wish to receive emails”, or changing the link text so it doesn’t look like a hyperlink anymore.
  3. On the unsubscribe confirmation webpage, it’s easy to accidentally subscribe to lists instead of unsubscribing; the language can be tricky.
  4. Finally, there needs to be a better system for people to subscribe to news, without it becoming cumbersome and annoying.

In my mind, I have a hierarchy of emails, from very important (personal emails, sent only to me), down to trivial (emails I’d only read if I was bored out of my mind). At a rough stab, I would use these categories:

  1. Very important: show me now, email is addressed to me and requires a response
  2. Important: addressed to me or CC’ed, but is FYI
  3. Interesting: mailing lists with important news, e.g. changes to gym timetables, council news
  4. Good to know: specials on at my supermarket, community events
  5. Trivial: specials on items I don’t usually buy (e.g. groupon vouchers), news from groups I’m not particularly interested in (e.g. sporting events)

Of course each person will have their own definition of what type of news/message is important, interesting, good to know or trivial. And I can imagine a page of checkboxes and radiobuttons where someone can set those preferences. My question right now is how does the email client present these categories? Are they just folders you can navigate to, default view being the Very Important category? Or does it list emails by priority: Very Important at the top, then list of Important, etc? Perhaps the Very Important emails will have their subject line displayed in large font, then the Important emails with slightly small font, etc. Outside of the inbox interface, perhaps only the important emails will raise an alert.

I am certainly interested in how a computer represents important or urgent information to take the user’s attention in the right way, compared to how it tries to shield the user from trivial or irrelevant information, let them know it’s there but never let it interfere. We can use visuals, audio, layout, colour, font, motion, a whole bunch of tactics to either attract or detract attention. It’s an interesting question, something I’ll be pondering…

On a separate topic, I am also fascinated by the unsubscribe email confirmation pages I have seen. Of the 20 or so emails I have unsubscribed in the last hour, there has been no duplicates. There is little consistency in how you unsubscribe to emails, which is confusing and perhaps a deliberate attempt to stop users from unsubscribing. Here are the patterns I have observed:

  1. Most of these pages ask you to check a bunch of items, and click ‘unsubscribe’
  2. Some of these pages ask you to UNcheck a bunch of items, and click ‘update’
  3. Some gives you an option to ‘unsubscribe all’
  4. A few gave the option to ‘opt-out’, which I assume means ‘never contact me again’.

I found one example which I thought was clear, and although not perfect, pretty close to it. This is the unsubscribe email confirmation page from a Sydney restaurant called Mumu grill.

unsubscribe email page

I do understand the difference between the last two radiobutton options, but it requires some ‘technical’ thinking, that an unsubscribed email will still exist in their database and accessible to new mailing lists, whereas ‘never email me again’ probably means the email address is deleted from the database, or put on to a ‘no contact’ list. The question is, would that make sense to the average user?

Posted in: Design notes, Websites

Tags: , , , ,

Bad search results page: Canon.com

Here is what I did to get to this page:

  1. On the homepage, I type in the search term in the Keywords field and clicked search
  2. This page appeared…

search results page showed no search results

The search results page doesn’t show me the information I was looking for. It doesn’t show me that no results were found. Instead it recommends I look at a page which has nothing to do with what I was looking for (a printer setup tool, nothing to do with cameras).

What’s needed here is a clear message saying (something like): “No results found for ‘CanonAPChkTool’. Take a look at these other pages which may be related to your search.”

Posted in: Design notes

Tags: , , ,

Why aren’t you buying? getting user feedback

“Live chat now!” – It’s sometimes annoying but always gladdens my hear to see such easy and quick ways to get help when a user is stuck on the website.

I saw a nice variation of this today on bizzbuzz. This time, directly sales related. Look in the bottom right corner, the prompt is not intrusive yet you won’t fail to see it. It asks the question nicely, and lets you directly input a response.

bizzbuzz "chat now" prompt at bottom right "not buying this time? tell us why"

A prompt like this would be great for usability feedback too. We can ask “what do you think about the website?”, “did you find what you were looking for?”, “how can we make this website better?”

Posted in: Design notes

Tags: , , , ,

User experience articles: A list apart

Great website about user experience. Lots of useful articles.

Topics they use (great way to organize, might copy it for this website):

  1. Code
  2. Content
  3. Culture
  4. Design
  5. Mobile
  6. Process
  7. User Science

 

a list apart homepage

http://www.alistapart.com/

Posted in: About UX, Design notes

Tags: , , , ,

Requirements: what are they?

I just read something today that is so simple and true, yet I had never understood it like this.

Requirements = Business objectives + User goals

There are no “user requirements” and “business requirements”. What often happens is that business requirements are created, but user requirements is only given cursory pass. It makes much more sense to integrate the two perspectives.

Posted in: About UX

Tags: , , , ,

Online shopping add-ons: useful or plain annoying?

I’m shopping for a new digital camera (downgrading from my DSLR), and stumbled upon the DWI – Digital World International – website. Here I am looking at the G12, and I decided I want to buy it. I see the big list of optional extras and I immediately think: “Gosh, I don’t want any of those, but what a pain having to change all those options.” And I was right.

The first dropdown (SD memory cards) contained over 30 options, and I was forced to scroll to the bottom to find the ‘No’ option. The other dropdowns had fewer options but the ‘No’ option was always at the bottom (I guess they deserve brownie points for consistency). In total, I must have clicked at least 20 times, and scrolled a few times to bypass the add-on. I was glad when it was done. So all in all, pretty annoying right? Absolutely. And a useless feature? Not entirely.

Being forced to scroll through all the options in the dropdown to find ‘No’ meant I had to look through all the options, and scanning through them showed me that maybe I did want a SD Memory Card and LCD Screen Protector. It irks me, but the annoying add-on feature did its part in up-selling.

Of course selling add-ons isn’t evil at all. When done in the right way it is informative and allows customers to make a better decision on their purchase (sometimes you really should buy that cable to go with the new TV). It is only a problem when the user interface is deliberately made difficult to use to carry out this purpose.

One of the most popular online stores out there is the Apple store. They demonstrate that selecting add-ons does not have to be a painful process for the user.

Let’s also take a quick look at Amazon, they do it slightly differently but it still works great. They suggest extras on the product page, before you have added anything to the cart.

Secondly, other products are recommended on the “added to cart” confirmation page.

Clever clever clever! On the product page they are limited to show only a small number of add-on products, but on the “added to cart” page they can show as many as they like, with pictures and all.

Back to our original analysis of the DWI product page. I would also like to point out a disconnect in the within-page flow. The logical sequence of events would be:

  1. Look at product pictures and descriptions
  2. Select product
  3. Select add-ons
  4. Continue shopping or go to Checkout

If you look at the DWI webpage, there is no actual “add to cart” button after the big list of add-ons. When I was testing the page I scrolled all the way down to the bottom of the page (which was at least 10 screen heights in length) but found no button there. The “add to cart” button sits above the add-ons, the logical arrangement would have been to place the button below the list of add-ons, or place the add-ons on the next page.

A final comment: I was frustrated with the usability of the DWI website and eventually purchased the camera from a different website which offered a better shopping experience.

Posted in: Compare and review, Websites

Tags: , , , ,

Make them read

If you really want to make your users read something, you could try something like this:

community engine big orange text

Typically, UX people would advise against having big blocks of text on the homepage as people don’t usually read it. But if it must be done (e.g. the product/service offering is so unusual that people must read the words to understand the rest of the website), then this is a good way of doing it. Community Engine has placed a block of text on a bright orange background, front and center on the homepage, above the page fold, with nothing else really competing for that level of attention. It means users (even if unwilling), will be tempted to read the text before moving on to other things.

It must be noted that while the orange box is effective for drawing (or demanding) attention, it makes the white text a little difficult to read.

Posted in: Compare and review, Design notes, Websites

Contextual help: give help just when it’s needed

Anyone who has worked with me probably remembers me going on about contextual help. And I must stress it again: it is so good and so important!

I believe that we (software/web designers and developers) can have a pretty good idea of what users are looking for, most of the time. We can track a user’s path through a website, and can have a pretty good guess at what they might want to look at next. Yet no one out there is doing this type of “predictive information architecture” yet. I (really really really) want to implement this concept in a product and prove how amazing the user experience can be if we tried to anticipate users’ needs. One way of doing this, and is often done by the better companies out there, is contextual help. By “contextual help” I mean putting in specific Q&A or “Did you know” type of supplementary information on the relevant page. For example, someone has just finalized payment for an online order of books, on the confirmation page a useful piece of help information would be “How to change delivery address after placing the order”. This information wouldn’t be relevant on the “About us” or product information page, but it is oh SOO useful when you have just placed an order and realized you used the wrong address.

Jetstar does this on their “change flights” page:

jetstar booking contextual help
The “Important stuff” on the right-hand side shows a few really relevant bits of information. There is no advantage to hiding information like this.

The problem with really good contextual help is the amount of effort involved in sorting out what help information is relevant to which page. In my experience this barrier has been the reason most websites do not offer contextual help (that and the “oh they can just go to the help section” attitude). I would argue that a little extra effort in creating the content taxonomy and architecture would ensure contextual help is do-able and scalable.

Posted in: Design notes, Websites

Tags: , , ,

iPhone UI design products

No more making square post-its into rectangular phone shapes! These clever stencils and pads will make life a little easier (and funner) designing apps for iPhones. Since it looks so pretty, I will also use mine for making the shopping list.

paper pads shaped like the iPhone

Just like photocopying your iphone but much better

stencil sheet to draw common UI widgets used in iPhone apps

Go mad with this.

http://www.designboom.com/weblog/cat/8/view/7675/iphone-app-design-products.html

Posted in: Design notes

ILUVUXDESIGN – Cute blurb about UX designers

Really cute clip answering the question “What is a UX Designer?”

http://johnnyholland.tv/post/2973277108/iluvuxdesign

I love how it de-mystify and mystify the role at the same time. No danger of over-explanation or over-simplification here. Cool.

Posted in: Design notes

Tags: ,

Motorola Atrix: the future of mobile computing?

I like the idea that all my files and apps are on hand all the time. I like the idea of being able to sit down and do work anywhere without worrying about poor 3G signal strength. In Thomas Friedman’s book “Hot, flat and crowded” he describe a system of computer terminals, where you can log in to your desktop environment from anywhere. It’s pretty good but I have little faith on the reliability of internet connections, and would feel safer if I could simply take all my data and settings with me wherever I go (and backed-up somewhere else of course).

The new mobile device Atrix from Motorola might be on the mark for this “anywhere, anytime” type of computing I dream of.

http://www.designboom.com/weblog/cat/16/view/12801/ces-2011-motorola-atrix.html

Posted in: Design notes, Future UI

Webook – great 10 minute experience

I came across this website and decided to give it a go.

webook homepage

https://www.webook.com/poll/raters.aspx

The service offering, as explained in the cartoon, is for visitors to read the first page of the book and rate it. There’s a whole angel and demon metaphor going on.

The best thing I found about the website is it’s sign-up process. I have recently been reading a lot about ways to make the sign-up process as pleasant and unobtrusive as possible, and Webook demonstrate it magnificently.

After clicking on the big “Rate now” button I am shown a quick sign-up form. But I can try the service immediately without signing up by clicking on the “Try it out as a guest” button. Fabulous.

You can try 5 books/stories before they bring up the sign-up form again, which was at about the exact same time I decided I want to continue to use the service.

Thumbs up Webook!

Posted in: Websites

Tags: , , , ,

Picture gallery navigation: Greg Martin

I like the cursor-based method of navigating the gallery thumbnails.

art of greg martin website

http://gallery.artofgregmartin.com/

 

Posted in: Design notes, Websites

Tags: ,

Extract sitemap of a website

I’m really happy with this free* tool. Given a website URL it extracts all the pages that sit beneath it. It is very useful for the initial review of the website. I have used similar desktop tools which extract to Excel but a web-based application is much more convenient.

http://www.siteopsys.com/website-url-list-extractor.tool

* Free here means free trial. You are given 100 credits when you sign up and for each website you analyse you could use 0 to 10 credits depending on the number of pages you want to extract.

Posted in: Tools and resources

Tags: , ,

Sitemap creator

This free tool looks quite good for creating sitemaps:

http://www.slickplan.com/create.php

Posted in: Tools and resources

Tags:

UX in Agile Development

I found this article which I thought was quite insightful. Expressed a lot of things I have been saying but better.

http://msdn.microsoft.com/en-us/magazine/dd882523.aspx

Posted in: About UX

Tags: , , ,