Touchscreen-Oriented Website Development Recommendations for Non-Microsoft Platform

Question

We are currently designing a website that will be accessed from kiosks in a museum. Users will need to be able to browse through a number of different web pages that will currently contain static HTML content as well as go through various interactive presentations that will be based on flash and run in flash player. Users may need to input some information into a simple registration form from the kiosk as well.

One reason that we are currently designing this to run in a browser is because the same site and interactive presentations that are being accessed from the kiosks will also be available on the web.

Does anyone have recommendations on whether this design will even work or whether we should simply build two versions of the content, one for web and one for kiosk? What experiences has anyone had with building a website that is available on touchscreen and via the web?

This is a first time effort both for myself and for my company so any warnings, suggestions, recommendations at all would be greatly appreciated.

Note: We are currently working with Flash to build our interactive content and a LAMPP stack for the server-side everything so SilverLight is not really an option.

Answer 1

Using a browser for your UI seems like a good decision, the things I would be worried about would be other apps or even browser pop-ups coming up that would interfere with the usability of your kiosk. Possible mitigation for this is to create your own browser app using the Microsoft WebBrowser control to ensure there won't be any popups, and store all the files locally on the kiosk machine so that as long as it has power it will be able to run (and you won't have to worry about network accessibility errors being displayed to the user).

Answer 2

Designing for kiosks is 90% UI optimization. Have a read through this

http://www.voltagecreative.com/blog/2008/05/best-practices-of-touch-screen-interface-design/

Answer 3

You can have the same content, but you should have different CSS files. The touchscreen version will need to employ much larger fonts, and in some cases a touchscreen keyboard, whereas the home users won't need that.

Further, you may want to promote museum events on the sidebar of the home version to get people to come into the museum, whereas these would be a needless distraction at the kiosks.

Further, you may want to link to external websites and resources for the home user, but prevent external web browsing from inside the museum, so the stylesheet may also be used to deactivate links to external resources, without removing the text.

Keep them separate using stylesheets and/or JavaScript, but try to keep the content pages the same so you don't have to maintain two sets of content.