Are there any decent UI components for touch screen web applications?

Question

For various reasons a web application would be best suite a project that I am working on but I am worried about the user interface. There will be a lot of pick and choose options that could be handled by check lists, combo boxes, etc… and to a lesser extent their will be some free text fields. However, I am concerned about the usability of standard components because users will have to access the application from touchscreen computers that will be wall mounted in a manufacturing environment (i.e. they will be very dirty and poorly maintained).

Answer 1

As a touch is translated to a click, you can probably use mostly standard components, maybe supplemented by javascript. I. e., it should be easily possible to implement an onClick event for every label that toggles the associated checkbox.

I'd worry more about the text input. Touchscreen typing (especially when wall-mounted) sounds tedious.

Answer 2

We are currently in the process of rolling out an application that is exactly as you describe. There are a number of issues that you will run into.

You will probably need a "Soft keyboard" at some point. We have not found a decent third party one, but they are not too difiicult to write yourself.

If you want to implement any kind of keypress button that writes text into another control, you need to be able to call the SetStyle() method to ensure that focus does not change. We found that the Janus button controls did not allow us to make this change so we reverted back to the standard winforms button.

I have not seen any existing component libraries that are designed specifically for touch screens. We have used a combination of the standard winforms controls and the Janus UI components.

If I were starting again now though, I would start with WPF. It is such a huge improvement over Winforms that it would be an easy choice for me.

If you are really stuck with doing it in a web browser, then I would consider Silverlight as a viable option. Personally, I would never touch HTML for an application where quick data entry is important.

Don't forget about bar-code input, sooner or later someone is going to tell you they want to do input with a scanner.

Answer 3

I'm currently working on a touch screen web application myself and keep wondering when I would "have" to put in a soft keyboard. The modules currently being developed deal only with order entry and retrieval/dispatch functionality and the client wants to limit any input by the call center attendant whereever possible. So no data input yet.

However, I've been searching for a keyboard for a touch screen myself. Darryl, where would you suggest I should begin if I had to write one?

Good luck to both of you!

Answer 4

You might want to take a look at Baobab Health's open source touchscreen tookit. It does a nice job converting an html form into a touchscreen interaction using only javascript. Documentation is a little light, but it might at least be a good starting point.

Answer 5

You can use iPhone-like effect component for windows:

http://Win2iEen.add-soft.jp/

It will be helpful for you.