Windows 8 touch screen desktops make great kiosks
I have a Mac on my desk and find Windows 8 confusing, but I have to give Microsoft credit for promoting touch screens. Windows 8 desktop computers are available for very reasonable prices and almost al come with a touch screen. I recently realized that this combination makes for a really easy and affordable kiosk. Combine a Windows 8 computer with Chrome and a one-page JS app and you have a lean mean kiosk.
I attend the annual American Crossword Puzzle Tournament to promote my crossword website and last year noticed that attendees were struggling to find their scores. The scores are published online and there are print outs posted outside the ballroom, but a list of 500+ names with 7 different four digit numbers apiece isn’t exactly user friendly. Cell phone service is shoddy and the average age is 50+ which further complicates things (I saw a lot of pinch to zoom going on trying to make the text big enough to read). A couple of weeks ago I had the idea to reformat the scores into being mobile friendly and to have a computer on-site for people to look up scores on. The computer would also double as a way to demo my site, a big improvement over just showing people on my laptop like I did last year.
The hardware
After a little research I settled on an HP Envy Recline 23 which isn’t a powerhouse, but it has a 23″ 1920×1080 IPS LED backlit multi-touch screen and a very nifty stand that lets it be used anywhere from 90° vertical like a normal monitor to laying completely flat.
The stand is the key piece here–it can be put at any angle and remains firmly enough in place to use as a touch screen. A vertical monitor on a table tends to be hard to see or use for people at standing height. Instead of people having to bend over to see what’s on a screen, the Envy Recline does the work and flattens out for easy interaction by people who are standing. It also fools you into thinking the display is bigger than it really is–I have a 27″ display on my desk and this machine seemed way bigger when it was flattened out. I’ve used a lot of kiosks and I have never used one with a screen this nice.
One thing that did surprise me was the weight. Amazon lists it with a shipping weight of 38.6 pounds and not a lot of that is packaging. I have a feeling a lot of this is weight in the stand which allows the display to be held solidly at so many angles, but it is something to watch out for if you need to ship it (I checked it as luggage and it fit within standard size/weight guidelines). On the other hand, unlike a laptop, no one is going to steal a 40lb computer without someone noticing.
The software
Chrome has a kiosk mode which takes over the whole screen and doesn’t allow you to get an address bar. There’s also a supervised user mode which lets you control what sites can be visited. Either or both of these can be used to effectively keep users on what you want them to be on.
I used Bootstrap 3 to make a very simple UI that worked on desktops and phones. I will have plenty of time to improve it for next year, but this needed to be done on a very abbreviated time schedule and I needed every time saver I could get my hands on. I made a lot of use of Bootstrap’s hidden-xs and visible-xs classes to modify things for the phone. On the kiosk I zoomed in the text to 150% to make everything very large which meant the touch targets were extra generous.
KnockoutJS made the interactive portion simple. Because I knew there was a high chance that the venue’s network access would be dodgy I wanted to make sure that the leaderboard wouldn’t rely network access after being initially loaded. Verizon’s LTE network worked rather well which made this a non-issue, but not needing the network did keep things quite speedy and was also appreciated by people who used it on their phones.
The Feedback
It worked better than I was hoping and I think it will become a popular part of the tournament in the future. Several people asked where the real computer was (assuming that it was just a monitor). It felt so cohesive that I was almost embarrassed to reveal that it was just a cheap Windows computer.
The best part was that no one was confused by it–everyone from teenagers to octogenarians were able to use it without asking for help. They just went right up and started tapping on the screen. Without the touch screen I don’t think that would have been the case, keyboards and mice seem to be a large barrier for non-techies. Several people said that this simple app had improved their experience of the whole weekend.
As a web developer it’s not very common that I can see users interact with what I make, so it was very interesting to stand nearby and watch people navigate. I noticed a few things that could have been optimized and fixed them during the day. I even added a feature that had been requested (which really impressed the person who had asked for the feature).
Final thoughts
I have a ton of ideas for next year, but the concept has been proven and my mind is stirring with more use cases for a touch screen computer and simple web app. You should try and play with one if you haven’t already used a similar machine.