Beauty and usefulness in home screen design

It seems that there’s an Android subculture that revolves around the design of “home screens.”  (An Android “home screen” is equivalent to a “desktop” on a conventional computer.)  This subculture is so extensive that whole websites have sprung up to share home screen designs (e.g. MyColorScreen, and a significant portion of Deviant Art).  Given the overall customizability of Android, it’s no surprise that this should happen.  It should also come as no surprise that many of the home screens shown there, though beautiful, are surprisingly un-usable.

MINIMALFIELD by  xNiikk on deviantARTConsider this simple monochrome example from Deviant Art.  (I don’t think the “HOMESCREEN” thing at the top is actually part of the design.)  Notice the weak contrast in that bottom “bar” element, and how close together the icons are.  It’s very attractive, but how easy would it be to use?  What happens if you have slightly wider than average fingertips?  What if you’re trying to read the time while the sun is shining down on your phone?

home screen7_originalHere’s one from MyColorScreen.  In this case, contrast is pretty good, but the screen is far too cluttered.  Too many font sizes and orientations.  The icons at the top are again too small for anyone with less than perfect vision.  And why, at the bottom of the screen, are there apps listed by both name and icon?  Again, it looks cool – very LCARS – but how is anyone supposed to use it?

LIGHTS OUT Android Homescreen by rabrot   MyColorscreenHere’s another “minimalist” homescreen.  This one uses a dark background – which arguably helps on power consumption and screen burnout.  But again, the icons are absurdly small.  Also, the icons (with the redundant text again) don’t actually run apps but rather open folders of apps.  This means that to do anything more than check the time will require one more tap (to open the appropriate folder) than would have been necessary if the apps were themselves on the screen directly.

I could go on.  And on.

Don’t get me wrong – I can and do appreciate good aesthetic design, but not if it’s all looks and no function.  Style has to balance function, and while I recognize that different users have different needs, I really can’t see how these examples – and so many others – are usable at all.

If you’re going to design a home screen, you need to identify what bits of information you need and you need to rank order them in terms of importance, or frequency of use, or something.  Then you need to decide how to place the important things on your screen so that they’ll be clearly visible, easy to reach, etc.  Now you can start wondering about colours and fonts.  If it ain’t useful, beauty won’t matter for beans, so it’s got to be functional first.

My Homescreen June 2013 - 2For what it’s worth, here’s my current lock screen.  I’ve had dark screens with light text for a while now, and this is my first attempt at a light-screen variation.  The time and date are at the top and large enough to draw my attention; that’s because I don’t wear a watch and I use my phone to tell time.  Below that are my next two appointments.  Below that is the weather: current conditions in the centre, today’s forecast to the left, and tomorrow’s forecast to the right.  That’s because I check the weather every morning to help decide what I’ll wear to work.  Below that (the circle thing) is the battery charge.  It’s a solid circle when fully charged and the circle opens – like a clock as it were – as the charge drops.  I really don’t care if I have 51% charge left or only 49%, so this is plenty good enough for me.  Finally, at the bottom, are certain toggles for things I use often and that I don’t want to unlock the phone to use: camera, wifi, sound, bluetooth, and flashlight.

It’s working well for me.  The “chunks” of information are sufficiently spread out so they’re easy for me to find quite automatically.  The fonts on the important things are big enough for me to see (albeit I do need my reading glasses to see virtually anything within a couple of feet of my face).  The spartan appearance appeals to me because I don’t like being distracted.  I look at my lockscreen for specific purposes, not to see what the latest trending pic is on Instagram or whatever.

It does have some problems, though.

I like the weak contrast, but it’s a bit too weak.  Every few days, I tweak the colours, darkening things here and there.

I also don’t like the location of the flashlight icon (bottom right).  That’s because I use the “back” hardware button to unlock my phone, and the back button is about one centimetre below that flashlight icon.  You have no idea how often I’ve accidentally turned on the flashlight, and you have no idea how hot my phone gets if I leave it on too long.  I’m thinking of trying to run the icons up vertically from the bottom left of the screen.

I also think the day and date is still too small.  However, I’ve been careful to choose font sizes that are, I think, consistent.  I’m not sure I can find a font size that will be large enough to read and yet small enough to not distract from other elements.

…what can I say?  It’s a work in progress.

In any case, the point is that there’s a method here.  I understand that the same method will produce different home screens for different people, but I also think that there are common features that ought to work for everyone.  After all, that’s why so many iPhone users are happy even though they can’t screw around with their screens.

(If anyone’s interested in the details: this was done with WidgetLocker and Zooper Widget.  The font is Helvetica Neue.  I forget the name of the weather icons, but I found them after about 5 minutes of googling.  The bottom set of toggles is done with Power Toggles.  The wallpaper was generated with an app called Color Wallpaper.  All these are available on Google Play.)


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s