UXD - User eXperience Design

Top 5 Iphone styled websites

In the oxymoron that was mobile web design for many years we struggled to try our HTML pages out on different mobile devices only to have to resort to stripping out anything resembling good design or usabilty. On my trusty RAZR phone, I was content with using java apps to display things in a meaningful way, but having to learn the arcane hotkeys for each app became a chore, and they went little used. With the iphone, the promise was that regular sites look like their BS (big screen) brethren, where users can not have to learn new interaction conventions for their favorite sites outside of zooming and moving around to fit the screen. However, there is a second wave of web apps that optimize their site for the iphone. Using conventional xhtml, css, and some javascript, with a few unordered lists you can distill most complex sites into something new, and in many cases are easier, faster, and better user experiences than the 'real' sites! I hope this gives notice to web designers to pare down things that users rarely need and keep things simple. You may have your favorites, please add them to the comments, and non-iphoners can usen this emulator to try out the alternate sites:

5. iPhlickr - http://www.chandlerkent.com/iphlickr/
What sets this apart is a seeming blur between the iphone features and the browsing world, when you select a photo, you can then share it, send it, or view it within the flickr world, unfortunately when iphone apps become available next month, flickr will probably become an 'app', but until then, this is a very ingenious and useful approximation.

4. Wikipedia

Iphones aren't fast in downloading data (yet) so when I want some info, I don't want a huge load time with lots of info that isn't getting me to my goal, this interface is very fast, and also does a great job in reformatting wikipedia content to take advantage of show/hide heading behaviors, which is a new iphone 'standard', and one that helps parse long documents quickly.

3. Amazon

A old-time favorite (was iphonized pretty much right away), but Amazon should be applauded by honing down their value propositions to fit on this screen, that is product, price, ratings. Thats it, and thats what In need when I'm thinking about picking up that camera in Circuit City, i want to swoop in and Amazon it for comparison and this does the job.

2. Reqall - www.reqall.com

I mentioned how much I liked this the other day, a technologically amazing mashup of voice/text note taking, plus some nice keyword recognition make a pretty darn useful to-do list! Add on the iphone interface, with good integration of thick finger style tabs, gets a reasonable amount of navigation in a small place to seal the deal. Bummer is that it makes you login every time, but I am lobbying for that to be fixed ;-)

1. Google reader - www.google.com/reader/i

I could say the google iphone interface, but the reason for this post is a huge shout out to Google for their revamping of the RSS interface for the iphone. I am super picky about RSS readers, my copy of NewsFire broke the other day in an update and I was in a panic to find a replacement, to no avail (I fixed it by installing a previous version). The thing I dislike most about other RSS readers is using the metaphor of email. I think we all get too much email, and RSS is not email, its more like a very personalized newspaper. The google reader nails this, and has kept me busy on train trips really enjoying reading stories, with excellent ajax integration, which really shines on the iphone since refreshing the page can take 20+ seconds, keeping info inline is imperative.

I also want to give credit to the password filler-inner 1password for their iphone interface, and twistori that shows that the same design works on both BS and little if the concept and interaction are clear. If I had a wishlist for sites I wish worked on the iphone it would be cellartracker (their regular site is not too great either, but the content is invaluable on mobile) and chase - if you are really embracing mobile users, let me really bank online.

The environment will change in the next month with the introduction of iPhone apps, but the resourcefulness of these developers to take 'plain ol' HTML and make a good user experience in a very constrained environment shouldn't be lost. Give your comments and contribute your favorites I may have missed.

Design Pattern 7: Required fields

It is one of the first problems of HTML markup that had no standard way to communicate to the user what they should do, I'm talkin' about the required form field. Personally, I have used some sort of asterisk in the past, coloration can work as well, but anything eye catching can distract from an error state (hey, you didn't notice we required that field, try again). So it caught my eye that the good people at reqall have an interesting pattern. In this case, make required fields have a bottom that is different from the non-required fields. This is fairly subtle, it took me a moment to figure out what it meant, but I give them kudos for trying something new. This is a long neglected design pattern of how to handle this in a consistent way, and this is a good a place to start. Its also a way to give a shout out to this service which mashes up text-to-speech, reminder lists, task distribution and has a nifty iphone interface as well, check it out!.

How to do it

Here's a capture from their stylesheet, an interesting element here is I didn't know that you could restyle the drawn box of an input, so there is room for much variation. I also like the way they specified 'solid' to get rid of the horrid default 'picture frame' style of merging borders when they don't match, which always makes me flashback to 1998 web design.

input.essential {
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 3px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #016098;
	border-right-color: #016098;
	border-bottom-color: #990000;
	border-left-color: #016098;
}

Pixel by Pixel...Or how I spent my last 2 weeks designing a few icons

"Our product is shipping globally, and we're not going to customize each device to the language of it's destination country.  So we need you to design a set of icons that will be used in place of textual messages."

Challenging, but simple enough, right?  Immerse yourself in the product, do some user research,  brainstorm designs that are meaningful, descriptive and culture neutral, and there you go.  Oh, and one more thing...the device's display is 128 x 64 pixels with 1 bit color depth.

Such was the nature of the project I recently worked on, and it was a challenge of a very different kind then I had faced in a while.  With either greater resolution or more color depth, It's relatively easy to depict pretty much anything with a high degree of recognizability.  Shading, perspective, non-linear surfaces are all time consuming but doable with one or the other.  Yet with only 2 colors and not many more pixels at your disposal, your so much more limited in what you can do.  Take a look at some early GUI icons to see what I mean...

   

Since I couldn't use more than 2 colors, I couldn't anti-alias, so I was basically confined to horizontal, vertical and 45 degree diagonal lines.  Forget about perspective.  Since true perspective doesn't involve straight lines, depicting a product from an angle on such a small scale is out of the question.  And shading--which is essential in illustrating that a surface displayed head on is curved--is just a matter of starting on the darker side with a high frequency of black, and then lessening the frequency as you move to the 'lit' side of the surface (Take a magnifying glass to a newspaper add to see what I mean).  Again, not an option here due to the small screen size, there just want enough room to do that.  I felt a lot like a writer being asked to weigh in on a complicated subject using 50 words or less.  They say brevity is the soul of wit.  I had to be clear and concise if I had any chance of success.

At 128 x 64, every pixel matters.  And at 1 bit color depth, rotating, scaling or otherwise transforming anything in Photoshop is useless because the software automatically anti-aliases, creating shades of grey that were forbidden.  So I had to design pixel by pixel--make a 1 x 1 selection, put my hands on the keyboard cursors and get to work.  See Wikipedia's entry on Pixel Art for a good reference. 

As it turns out, I was more at home on this project than i though I would be when found out the requirements.  You see back when I was a kid, the first computer graphics program I ever used was on my father's DOS machine.  The program itself wouldn't fit on the computer's hard drive, so it had to be loaded via floppy disk--the old 5 1/4" ones.  The computer didn't have a mouse, so almost everything I created had to be tediously drawn pixel by pixel using the cursor keys.  It took me months working 2-3 hours a night, but I created some pretty good stuff.  In particular, I remember drawing a hockey rink, with players, stands and all, which I'm pretty proud of.  Using Photoshop/Illustrator now, with the capabilities so far advanced over what I had to work with at that time, It's hard to see how I did what I did, or for that matter why I spent months doing it.  But there's something about taking time to do something right, struggling through the frustration that comes with the absence of 'Undo', picking yourself back up after making a mistake that renders 10 hours of work useless.  Creating art is a sprint.  Back then it was a marathon.   

So I forgot about my mouse, left the color picker behind, and zoomed in at 1600%.  I soon found the hang of it again, and I got in the groove I remembered from way back.  After a lot more time than I though it would take, I had a set of icons that worked...and that's the key.  And in the end, I feel a little more satisfaction than I would have if I was allowed to let Photoshop do it's magic.