Interface and Software
PhotoShop/Solidworks Assignment - Priam
There are a number of things that the device needed to convey to the user. Its use needs to be obvious from its form and interface. It needed to convey to the user that the device was powered on, it is scanning and the scan was successful. Based on the form of the device I had 2 places both 30mm x 40mm in area where we could place any instructions and feeback to the user. After testing some alternatives using sketch models (see below) I decided to go with two panels, one on the right and one on the left. The left panel will be a symbol that should indicate to the user how to use the device. It will be lit up by an LED underneath (much like the power button on most laptops) when the device is turned on. The right panel will have status indicators for when the user is scanning and for when the user has succesfully completed a scan.
The left panel symbol is basically the picture of the scanner on a peice of paper. When the device is turned on the LED underneath this will be turned on. The arrows show the user the direction they should scan in. This also tells the user that the scanner should be as close to the paper as possible (important for the RFID reader). The symbol is basically a cutout of acrylic with a bright green LED behind it. I wanted to have this LED effect brought about in the photo rendered image. I used the feather and the fill tool to achieve this. I also embossed the area outside the cutout to give it the slightly raised look that I wanted. I could not seem to get the lighting right, the global lighting seetings in photoshop never seemed to work the way I wanted it to.
The right panel is just a status indicator. When the user hits the scan button the LED near the scanning text lights up and when thhey are done scanning the scan complete LED goes out. This gives the user a reasonable end state for their scan (Although it is not necessary with the RFID technology). The photorealistic image (bottom right) shows embossed text and LED's with one glowing. this LED effect brought about in the photo rendered image. I used the feather and the fill tool to achieve this.
PhotoShop/Solidworks Assignment - Marko
The overall proportions of the photoscanner and its mass distribution are intended to force the users into holding it with both hands. The scanning light-beam is deliberately very diffuse and that the user needs to hold the device close to the item to be scanned in order to see the reflection and make sure that the RFID reader can read the RFID tag. Various additional comments on how the users interact with the device can be found in the overall concept page.
My photoshop/solidworks assignment focuses on 'status indication' - telling the users what's happening (or what we want them to think is happening!) with the device. The 'big four' messages are:
* The device is 'on' and ready to use (fictitious - device is always on)
* The device is 'scanning' (fictitious - device is always scanning)
* The device is 'busy' storing your scan (ficticious - device saves clues instantaneously)
* The 'battery is low' (fictitious - this actually signals to the guide that the guests have found the four most important clues in the room)
Device On/Ready
An illuminated item of any description is a universal symbol that the device is powered - the most common is the 'broken circuit' symbol.
Given that the device required some form of usage instruction and the limited area available, we decided as a team to combine the device on/ready with the usage instruction - having the usage instruction illuminated so as to inform the user that the device is in fact powered on and ready to use. (early layout explorations include a separate power symbol)
Device Scanning
Again a topic of much debate within the team! When the user pushes the scan button the scanning light-bar on the base ofo teh device will illuminate. Some felt that this was sufficient to signify the device scanning, others not.
In the end we (probably more I) decided to include an active symbol to signify some sort of 'progress'. Taking a leaf out of the computer books, my initial thoughts were around a sequence of iamges showing a document going into the device. Space constraints prohibit this though, and in the end I simplified the symbol to a moving row of lamps as shown below:
Device Busy/Saving
Users like feedback about when devices have done what they're supposed to. The classic example is the heavy, noisy mirror-action on modern digital SLR cameras when you press the 'shutter release' button - my father's 'film SLR' generation can identify with this and it's strangely reassuring/gratifying even for those of us who've never handled a 'flim SLR' camera.
Not wanting to add any moving parts or sophisticated audio equipment to reproduce 'scanning' or 'storing' sounds, I chose to make the feedback visual. Trying to come up with a symbol to say 'saving' invariably brought me back to existing designs - the cylinder that's been with us since hard-drives were the size of washing-machines, the hour-glass that's been with us since the first GUIs, the floppy disk that we've not used in years, the CD/DVD symbol...
In the end I decided a flashing disk symbol would be the most recognisable, and that a yellow/orange colour for 'not ready but not broken either' would be appropriate:
Battery Low
Just like the 'save' symbol, we've been around electronic devices for long enough for certain 'low battery' symbols to have made their way into our sub-conscious. I wanted a 'low but not dead' symbol, and chose the symbol below. Red is a suitable warning colour:
Complete Sequence
Physical Aspects/Construction
There are many forms of display from simple masked lamps through full-blown colour screens.
A mainstream photoscanner/camera/phone type device would have used a monochrome LCD screen not so long ago, but this isn't practical for our device. Full-blown colour displays are unnecessarily complex/power-hungry.
Two solutions that I tried and worked well when making a one-off instrument cluster for my car were 'embossed symbols' and the 'magic panel': (personal preference - magic panel as it looks swisher/hides the bits you make!)
Embossed Symbols:
Embossed symbols consist of embossed plastic sheet (vacuum forming works well) with an LED or lamp behind them. A screen with cutouts (laser-cutting works well) fills the space in the 'dips' of the symbols and hides the gaps between each symbol and one can cover the whole assemby with a clear sheet to tidy it up.
The solidworks model shows a 2mm thick cutout screen with 5mm round LEDs and 5x3mm rectangulat LEDs behind. Photoshop renderings are based on a dark background with a black mask (w/ some lighting and a reflection on to give the impression of gloss), bevelled in and out to show the mating lines between the embossed plastic sheet and the screen. Lighting was done by creating blocks of colour (also double bevelled), expanding and feathering the selection and spotting over the top with a large semi-opaque paintbrush tool.
Solidworks model: (clicky)
Photoshop Renderings: (clicky)
Magic Panel:
A 'magic panel' is a ligh-tight box with a heavily tinted screen on one side. From the outside it looks almost pitch black unless an internal light source is present and when that light source is present the complete lack of any borders/visible joints makes the symbol appear like 'magic'.
'Magic panels' are also dead easy to make yourself - my car dash was one electrical potting box, several sheets of overhead transparency film, a piece of tinted perspex and several LEDs/acres of black sugar paper. Essentially you need to make some kind of screen (heavy printing ink on overhead transparency sheets, signwriting vinyl with cutouts or thin laser-cut sheets of plastic work well) and put a piece of tinted glass over the top. Place lights behind each symbol then shield around the lights to prevent them lighting up neighbouring symbols (sugar paper works, plastic is nicer). Finally enclose the back of the display in a light-tight surround.
Solidoworks and Photoshop below (done much the same way as before).
Solidworks model: (clicky)
Photoshop Renderings: (clicky)
Software/Hardware - Marko and Priam
Previous demonstrations used a 'phidget' RFID module hardwired into a computer to show the capabilities of the RFID technology.
In order to make our system wireless and completely intergrated on a handled device we needed to either:
1) Add a wireless link between the device and the exhibit control system or, (2) Make the device 'intelligent' enough to interrogate the RFID module, store the ID numbers it receieves and then upload them to the exhibit control system when it docks.
Priam and I chose (2) because of the colour of Matt's face when the word 'wireless' was mentioned... (reliability concerns)
We've spent most of the last 2 weeks with a much smaller "OEM 150" RFID module obtained from the HID corporation and a PIC microcontroller. This RFID module has enough processing power onboard to read the RFID tag ID numbers without asking the computer for help and will run off a 7.2V battery source.
The microcontroller (PIC) reads the data from the RFID controller, stores the ID numbers, controls the symbols on the photoscanner and transmits the ID numbers to the exhibit control system when docked via a standard called 'RS232'. The exhibit control system can then read this input and display the clues corresponding to the tags.
So far we have been able to get the reader to read the RIFD cars and output a signal. This is a 26-bit datastream with 40 microsecond long pulses: not the easiest thing to read! We have also been able to get the microcontroller broadcasting an RS232 signal that can be read by the computer which writes it to a text file. Once the data is read into a text file it becomes really easy for a program (such as flash) to read it and play a predetermind video or display the appripriate pictures etc.
We're currently working on the link between the OEM150 RFID module and the PIC microcontroller - we'd hoped to have this working by May 1st but program timing issues (and the fact that none of us are programmers and are learning as we go) were more significant than first expected.
Code itself is too dull (and mostly meaningless!) to be worth posting so we'll demo in-class. One 'item of note' is that we're discarding 19 of the 26 bits in teh ID number to make our lives easier. This means that we only store a 7-bit number for each ID tag (this still gives us 128 different clues) and can transmit the IDs to the computer the same way that a keyboard transmits letters. Letters in a text file are very easy for programmers to do things with; 7-bit numbers are much easier to store on an 8-bit microcontroller than 26-bit numbers and overall we've saved a lot of human-time/machine resources by taking this "shortcut."
Other Notes
Symbol Exploration - Priam
Here are some symbol concepts that I sketched out. Nobody liked my 3D scanner ideas since it was too confusing. I decided to go with just the 2D symbol and tried different variations of it using sketch models made out of foam. I gave the sketch model below to users to see how they would use the device. This particular symbol variation seemed to confuse people since they could not tell the device contour apart from the rest of the symbol.
Symbol Exploration - Marko
(quickly transcribed copies of some pencil sketches)
