Random ramblings of a UX Designer & Developer

One of the easiest ways to create an executable jar file is using Eclipse.

1. In Eclipse, goto File -> Export

2. Select Runnable JAR file click next

3. Enter the export destination and click Package required libraries into generated JAR

4. Click Finish

If you are using JMF you’ll need to include jmf.jar and jmf.properties in the same directory as the executable jar. If you have installed JMF you should be able to find these in the JMF libs directory. [In windows c:/Program Files/JMF2.1.1e/lib].

What a cool project. 37signals are building their new office from the ground up to promote team work and collaboration. Instead of individual offices they have a communal area with decked out team rooms and when needed people can still use the private rooms. It will be interesting to see what changes as a result this will bring to their products.

Occasionally I’ve noticed LogCat disconnects from the emulator in Eclipse especially if you manage to crash your application. To reconnect it goto the DDMS view (click DDMS at the top of the Eclipse window) and then click on the emulator in the devices window and you should see the LogCat window jump back to life.

If all else fails you can get debug information by running “adb logcat” in a command prompt. You can also filter the results, for example, “adb logcat UserTag:D *:S” just shows debug messages with the UserTag.

First you need to install the Android development tools. Personally I use Eclipse with the ADT plug-in because it allows you to easily manage Android projects and provides nice integrate with the emulator. Not quite as nice as Xcode but it does the trick.

Android development tools (install in this order)

1. Java Development Kit
2. Android SDK
   (Note: After installing add the location to your PATH system variable.)
3. Classic Eclipse (v3.5)
4. ADT Plugin for Eclipse
   This plugin is installed within Eclipse.
   Goto Help->Install New Software.
   Then add https://dl-ssl.google.com/android/eclipse/ to the “Location” field. After clicking “Ok” to the popup you should see “Developer Tools” added to the list. Check it and click next. Follow through until the Finish. Make sure you restart Eclipse.

Getting something quickly up and running on the emulator

First you need to create a new Android Virtual Device (AVD):

1. Goto Window->Android SDK and AVD Manager
2. Click “New” at the side to create an AVD
3. Enter a name for the AVD (remove all spaces)
4. Select a target Android version (most devices these days are running either v2.1+ or v1.6)
5. Enter in the size of the SD card (I usually just put 500MiB)
6. Then click “Create AVD”
7. You can now start up your enumerator by clicking start or it will be run automatically once the Project’s Build Target is set.
   

Running the sample helloworld application:

1. Create a new project using the existing helloworld sample source from the Android SDK directory.
2. File -> New -> Project
3. Select Android Project
4. Create project from existing source selecting the location of the sample HelloWorld application
   For example:
   C:\android-sdk-windows\platforms\android-4\samples\HelloActivity
   (Note: I’m using Android 1.6 (API Level 4) hence the android-4 directory)
5. Click “Finish”
6. Now goto Run -> Run (or press ctrl F11) to compile and run the project
7. The emulator will take a while to load but after a while you’ll see the Android UI then the Hello World app pop up.
   Note: After you make some changes you normally don’t need to restart the emulator every time, you can simply run again and it will re-install the app. Depending on what you have changed however you may need to uninstall your application first from the settings.

   For more information see the Android Development website: http://developer.android.com/sdk/index.html

Here are some extremely useful photoshop templates from teehan+lax that I’ve been using lately to design iPhone and iPad GUIs.

Download iPad PSD Template

Download iPad PSD Template

Making a quick physical mockup before you make a more functional prototype can, in a lot of cases, save you a lot of time and wasted development. Even if its made out of cardboard, it still gives you a feeling for the size of the device, how you and other people will hold it, a feel for where the buttons should be placed and their size. If you do have access to an FDM machine and the 3D model then by all means make something more realistic and sturdy. But if not there is a lot of insight that can be gained from cutting out some cardboard and drawing on the UI, and handing it around a few colleagues.

Around a month ago I was given a rough functional spec and a render of a product. I was given the job to design the UIs for the device and the desktop software. First task which was required within the week (being Tuesday already) was to specify what buttons were required and what would be displayed on the small LCD.

I began by sitting down with the people involved with the project to get up to speed as fast as possible with the product along with who it was targeted towards and any competitor products they liked. After reviewing all the material and playing with similar other products, I started sketching a few ideas for the UI trying to limit the number of modes, keeping the functionality clean and simple, and the key functions as accessible as possible. Eventually I come up with a design that everyone liked. The design was then sent off to become the first prototype. As I was pressed for time I had skipped the quick mockup stage. A mistake I will not be forgetting soon, a few hours would have saved a few weeks in development.

One month later I received the prototype. It worked great until I switched it into the second mode which made me naturally change my grip and made the left/right arrows become up/down which did not make sense in the UI. In addition because the device is designed to hold in one hand, users with slightly smaller hands found it difficult to reach the top quick keys with their thumb. There were also a few other small issues.

I’m sure a cardboard mockup would have identified pretty much all of these mistakes leaving us to focus on the next round of improvements with the prototype. Don’t make the same mistake as I did, take the time to do a quick mockup and pass it around a few colleagues and friends.

If you are like me and want to keep your bookmarks synchronized between your Mac (Firefox/Safari) and PC (Chrome/Firefox/IE) I totally recommend Xmarks. Its a small light weight extension to most browser. You can have multiple profiles but I just keep it simple and only have one.

I recommend organising your bookmarks first, then backing them up before installing the plug in. The easiest way to backup in most browsers is to export to an html file.

If you are like me and prefer to use Firefox rather than Safari on Mac (looking forward to a stable version of Chrome) then the first thing you will notice is there are no bookmark icons on the toolbar which is rather annoying cause the icons make the quick links so much faster to use.

Anyways, the easiest way to enable them is to install the following Firefox addon.

The other way is to install the MacOSX theme but the theme doesn’t look that good so I prefer to use the addon. I did try the latest MacOSX theme but it didn’t have the icons.