Programming a user interface for a small device

Question

I'm looking for ideas/elements of a user interface for a device I'm making. Full description (and video of development setup) here.

In short:

• It's essentially a direction finder, so I'm starting off thinking, "Compass" but wondering what other design patterns would fit
• There isn't much interface to a compass - what kinds of input, other than physically turning the device, should I consider?
• I don't like deep menus. These are targetted at kids, so what gaming patterns and interfaces should I consider for options? I'm assuming that children aren't invested heavily in computer patterns, but don't know what patterns they are invested in.

This device is limited memory - so the interface has to be dynamically drawn each refresh, there is no video buffer. In some versions I'll have color (160x128 and 320x240) and others I'll have 15 level grayscale (100x160). I'd like the interface to be general enough, and vector-ish enough that one can use any of the devices as easily as the others.

What ideas do you have?

Where should I look for such interface and design patterns?

Where should I look for low level graphics programming (generating vector graphics on the fly, I expect, but perhaps I'm wrong to think of it this way)?

Answer 1

You're summary page indicates that you're getting GPS coordinates from two devices... so a nice feature for children would be to show a dot for mom and a dot at display center for the child. Draw a line between these. Draw an arrow showing the child's most recent direction of travel to GPS resolution.

Tell the child to press the "FIND MOM" button, line up the arrow on the line, and go that way, going around things as needed (and the arrow and line will always keep them up to date on which way they would like to be walking, if possible).

Make the dots, line, and arrow, big and friendly. Change the colors or make things flash when you're within the minimum GPS resolution or, generally, within shouting distance. This way, if the child ends up on the other side of a high barrier, he or she knows shouting is an option.

Interesting project idea. I think that moving the thing and having the "on" button is enough of an interface, if you have good enough motion detection sensors in the unit. It should probably auto-poweroff after an interval.

Whether you generate vector graphics or not is not the main thing... you should probably generate coordinates for the dots (which are also the endpoints of a line) and the arrow and arrowhead segments. All these can be drawn on a raster display quickly using only integer math using the old Bresenham line and circle algorithms.

Links to Wikipedia:

http://en.wikipedia.org/wiki/Midpoint_circle_algorithm

http://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm

Answer 2

I think it would be really cool to have it shaped like a Pokemon. I'm just saying...

Answer 3

I’d certainly try to look at some GPS, something basic like the Garmin eTrex Legend. It’s cheap, it’s grayscale, it’s probably also memory constrained as Your device will be and I am sure You will find a lot of UI ideas there. I would also consider looking at the iPhone. It is quite a different device, but lot of the UI concepts there are well thought-out and could be used even on a simple grayscale device. You can get the iPhone SDK with the iPhone simulator for free.