Device awareness I

Retina Display 大勝~

Image by Kent-Chen via Flickr

With the myriad of devices out in the wild today, ensuring your work is seen as you intended it to be is quite a challenge. Here’s a basic toolkit you would need to start addressing this problem.

1) User Agent Switcher – Testing tool. Firefox add-on. To hit your application with requests like they were coming from the devices you want to design for.

2) WURFL api – mechanism to detect and dynamically modify your UI according to the requesting device.

User Agent Switcher

First off, you will need a means to simulate requests as if they were coming from all the devices you want to consider. The Firefox plugin User Agent Switcher is an indispensable tool for the same. After you have installed the plugin, you will notice that you can simulate the iphone and a handful of other devices. You will want a more complete list of devices to simulate. A google search should reveal several such downloadable lists. I found this one adequate. Download this xml and import it as shown below (click on the pictures to see them better):

step 1

Step 2

Step 3

Step 4

Now, just select the device that you want to simulate and browse as usual. The requests from this browser will now be formed as if coming from the device it is emulating. Below is a screenshot of me selecting a kindle version for emulation.

using the emulator

I wrote a small html page that spits out the request headers so I can see my new addon in action. The code for that page is here (do a right click and view source). Below is a screenshot of my Firefox impersonating an iPhone :)

emulating an iPhone

My next post will be ablout the WURFL api that allows you to dynamically adapt to the device requesting your page. Over and out.

lean UX

I had the chance to attend a talk on Lean UX by Jeff Gothelf yesterday. Jeff spoke articulately about how shaving the fluff off of the design process brings back the focus on user experience rather than the production of deliverables.

Jeff’s slide deck

My notes

There were some interesting take-aways for someone some one hoping learning more about the design process.

1) Get away from the drawing board/napkin/computer as soon as you can. Make the idea public (in the org) with cheap prototypes and seek feedback early.

2) What makes a good portfolio that showcases design input? – getting rid of deliverables led to the question, what do you show case if you produce no deliverables? Which brings us back to that evergreen question – “what constitutes a good portfolio?”.  “Illustrate process” and “illustrate thinking” were the answers in Jeff’s book. Makes sense and adds up well with the fact that you may not be able to put in a lot of your best work anyways because of NDAs. Your interviewer would not like see you showcasing their assets in a future interview.

UX and design resources

I have been looking to beef up my Usability and Design experience of late. I have found several organizations in the New York area that seem to host events and have projects running that can use volunteers. Of course, this from the websites these organizations have on offer.  Some of them are:

http://www.upassoc.org/ (usability)

http://iainstitute.org/ (information architecture)

http://www.ixda.org/ (ux)

This page was particularly helpful in finding some amazing people to talk to for guidance. Luckily some of them could make time to exchange emails with me. The information they gave was quite useful in terms of:

1) The kind of concepts to familiarize myself with to be able to contribute to the design of products:

  • Research Methods – comes with experience. try volunteering/ pro-bono.
  • Best Practices – comes with experience. try volunteering/ pro-bono.
  • Psychological principles – classes in cog. psyc, statistics, perception, info processing
  • Technical skills – html, css, flash .. general web dev and design skills

2) relevant part time classes that can help. For instance website usability and information architecture. I found these in the continuing ed departments of sva and nyu.