Saturday, 27 February 2010

It's been a while now and I've been pretty busy with life, work, and other things, but at last here's a new version of the coverflow widget that I released a while back. There's not really much new functionality here, but I have cut down the amount of code needed by a lot. Gone are the CoverAbsSpinner and the CoverAdapterView classes and now we are left with just the CoverFlow class weighing in at less than 200 lines of code. Of course, you still have to instantiate it and populate it using an ImageAdapter so I'll also include the activity class for doing those tasks as well.

Background

The basic idea is that the Coverflow widget works very much like the standard Android Gallery widget, but with the addition of the rotation of the images. For more background information on the Coverflow widget see my original post here.

How to useIn your Android project create a package called com.example.coverflow, and in this place the CoverFlow class. Now all you need is an activity to instantiate the Coverflow widget in this example the activity class is called CoverflowExample. CoverFlowExample simply extends Activity and instantiates a Coverflow class in it's onCreate method. It also has an internal Class, ImageAdapter which we use as the adapter for the Coverflow widget, much as we would for a Gallery widget. It is also possible to use the Coverflow widget when it is specified in an XML layout file.

The CoverflowExample Code contains some extra code for creating reflections of the images, but apart from this is a standard activity class of the kind used with the Gallery widget.

The CoverFlow class extends the Gallery widget , but now we override a few methods to allow us to transform the images before they are displayed. The most important method that we override is the getChildStaticTransformation method. Here I have to say thank you to a user called Nerdrow on the Android developers group who first showed me an example of overriding this method. By setting setStaticTransformationsEnabled in the constructors, we are telling the parent ViewGroup of the Coverflow class to invoke getChildStaticTransformation every time one of our images in drawn. In getChildStaticTransformation we simply calculate and apply a rotation and scale to the ImageView depending on it's position relative to the centre of the Coverflow widget. We also override the onSizeChanged method. This method is called every time the widget changes size e.g. when we change the orientation of the phone from portrait to landscape. In the onSizeChanged method we just get the centre position of the coverflow widget. There are also a few parameters that we can set, mZoomMax controls the maximum zoom of the central image and mMaxRotationAngle sets the maximum rotation angle of each image.

Thanks

Lastly, I just wanted to say thanks to everyone who has commented and given me feedback on the coverflow widget. It's be really positive and great to hear that people have got it working successfully on a range of devices such as the HTC magic , Motorolla droid and Nexus 1. There's still more to do for the coverflow widget and I'll release new version as and when I make updates. If anyone has anymore suggests for cool widgets or enhancements to this Coverflow widget then please do get in touch.

Monday, 1 February 2010

I was recently reading an interesting article called Realism in UI design. This is a really nice piece on how it is not always a good idea to try and produce the most realistic icons that are possible when designing UIs. Some of the main conclusion here were:

"Graphical user interfaces are full of symbols. Symbols need to be reduced to their essence."

"Unless you are creating a virtual version of an actual physical object, the goal is not to make your user interface as realistic as possible. The goal is to add those details which help users identify what an element is, and how to interact with it, and to add no more than those details".

These are very good guide lines on the whole, and the author does make the point that while simplification is good, over simplifying designs can lead to obvious ambiguity. Keeping things simple enough is good, and backs up the mantra of "Don't make me think" used by usability gurus such as Steve Krug.

But is there something that we are missing here? What about good design, and what impact might design have on usability?

Studies have shown that identical functional designs can be perceived as easier or harder to use depending on how aesthetically pleasing a user interface is. The Israeli scientist Noam Tractinsky carried out a study using two ATM machines that were functionality identical, but one had a much more pleasing and attractive UI. To his surprise the results showed that subjects using the aesthetically pleasing design reported that they found this ATM easier to use. This effect is also known as the aesthetic usability effect.

Others such as Don Norman have also looked at how aesthetics in design impact our perceived usability. Norman states that there are three levels at play in design: visceral, behavioural and reflective. Visceral design is about how things look and feel, and is pretty much hard-wired into our brains. Visceral design is immediate, and is our first reaction to something. Aspects that make something viscerally appealing are, rounded soft edges, smooth surfaces, symmetry, primary colours etc..

Norman goes on to argue that not only does good visceral design give a perceived ease of use, but that it does actually make things easier to use. How could this be the case? The argument put forth is that using objects with good visceral design puts our brains into an open and creative way of thinking, therefore making it easier for us to solve small issues and ambiguities that we might find while using a device. While using UIs with bad visceral design puts our brains into a closed fight or flight mode, narrowing our thinking and therefore making these types of interface more difficult to use.

You may, or may not, buy into the idea that visceral design has an impact on usability, but lets take a look at a concrete example. Most would agree that Apples iPhone is a beautiful thing. But now lets imagine that we take away all the nice rounded corners, remove the reflective effects from the icons, even take out some of those nice transitional animations. It is still functionality the same, and you can still do all the things you could before. But do you think it would be as nice or as easy to use?

With all this in mind we can say that simplicity in design is indeed a good thing, but it should not be done to an extent that it affects the overall attractiveness and good aesthetics. So keep things simple, but do not neglect the visceral aspects of design. If you do, it could be that your product will be lacking not just in aesthetics, but also in usability.

About

My Name is Neil Davies and this is my blog. I live in the UK in the beautiful city of Bath. I've worked as a software engineer for a number of years in a variety of roles and with a wide range of technologies and programming languages. My special interests are in UI design and UX. Currently I'm enjoying programming on the Android platform. When I'm not programming I enjoy messing about on the water, which includes sailing, kayaking and surfing. If you'd like to get in touch email me at interfuser at googlemail dot com or say hello on Google plus, just click on the icon above.