Mapping Kiosk User Interface Design Concepts

Last year we worked on requirements for Zion Hospital in Chicago for a mapping kiosk application, the project never reached to its implementation stage but the software UI designed was envisioned since my HKG days when I knew that touch screen kiosks were going to be big in accessing and serving up information in the easiest possible manner at public hot spots. I had first seen these beautiful touch-screen kiosk interfaces at the IFC tower in Hong Kong and the screen showed a 3D interface of all the different levels of offices and shops along with your current position and the easiest path to get to your destination. After I had seen this, the common sight on streets of Hong Kong was observing tourists holding their maps and trying to figure out where the nearest MTR station is or searching for the nearest restaurant is or where the next touristy spot was and what bus/taxi/subway connections take.

The interface attempt for the hospital sprung up from design ideas of installing standing or hanging touch screen kiosks like the ones shown below:


Here is the interface design we came up with, the idea of the touch application was to access information as fast as possible. The maintenance of these units can remotely be done with software updates released over the internet. Payment applications can also be built if there is a need for providing info on pay/access model. Click on the images below to open them in a new window.

Now you tell me what you think how  the usability of these interfaces can be improved. 

Enjoy!

Sam Kurien

Re-Design of the Parking Meter

The parking meter is an interesting piece of public equipment and many a downtowns have these weirdly shaped posts (mostly ugly) standing or planted on the sidewalks, an important source of revenue for the city. Here are some pictures to amuse you and the first definitely reveals the total chaos of people trying to figure out the condescending parking meter. Look at the images below there are at least six people trying to figure the parking meter a sight not so unusual for unfriendly user interfaces.


A closer look at these parking meters reveal traditional parking meters haven’t changed mucy from the 1930’, oh for sure once in while we see cool looking meters with easy interfaces like the one in Harvard square that look at least new agey but I have had a hard time finding one with easy to use interface. Thinking on those lines I decided to design an interface conceptualizing what it should look like.


Problems:

Unordered buttons
Most of the parking meters have a myriad of buttons all over which creates creepy and scary look first time you look at it, there is no clear order in which these buttons are laid out and placements are most haphazard not following hierarchical order to present needed input or output information.
Orientation
In most of the parking meters across the U.S the buttons are grouped well mostly in a vertical order and the user tends to input or read information in horizontal or diagonal fashion, so if there are more buttons the end user is looking down at an angle and incline of his or her vision goes lower and lower with each row, so if it’s a taller person the difficulty in reading and usability of presenting information is hampered.
Colors
The color coding on these meters is usually a mess and some of them show the standard grey with black and white and some other use bright red or green iron plates that are engraved, so if the city changes rates then new meters need to replaced escalation of cost, downtime of service and loss of revenue. Didn’t know colors and dissemination of information could cause so much harm .
Fare Plan
The Fare plans are again displayed in vertical order most of the time, it makes sense to start with the fare plan and the time plan at the same level instead of two levels.
Iconography
Most of the parking meters today still do not have neatly represented icons and most importantly from the usability point of view do I push or pull, yank them left or right, switch on or off are the kind of questions the user is face with.
Payment
Payment is most of the times done with coins, so if you don’t have the right change then you stand and beg from people who might have the change to save you from getting a ticket. There should be alternative payment methods.

Explanation of Instructions
In many newer version of parking meters there are side panels that display a cheat sheet or an explanation of instructions of how to use this complicated device again lot of use of space and if the information changes, replacement of the parking meter itself (cost increases, revenue decreases model). Another observation is most of the instructions wear out, phase out with weather conditions and do not make sense to the end user adding to their frustration levels.

Alternative Redesign
It is easy to criticize existing products without showing alternative solutions. An alternative interface is shown here from Netherlands and a proposed interface from me is shown as well for you to choose and comment as to what you think, again this is not tested with feedback or even proto-typed. The Nethterlands version is of course on the European market and seems to be working well and seem to have a better usability feedback compared to the American counterparts.

My proposed idea is to have a interface panel that is a touch screen, cost may be a concern here but cheap LCD panels that are durable and extremely thin can be manufactured at a low cost to volume ratio, one disadvantage of the product itself maybe the portability. Here are some pictures of how the meter-kiosk should look like. Now, of course these can double as other devices to dissemination information like mapping, advertisements from the city, hot spots, serve up web pages for valuable tourism information etc. The hardware device can be refined to almost a single post just like the traditional ones but with a touch screen that can even be solar powered, scratch resistant and durable for outside weathering conditions.


Proposed Parking Meter Interface


Below is my version of a touch screen interface which is almost self-explanatory and the hallmark of the good User Interface is exactly that it is “Self – Explanatory”. Please click on the image to see the zoomed in version in your browser.




Solutions:


Orientation
Unordered buttons are now replaced by color coded section on the touch screen for easy selection. The end user if handicapped can also hear the information via the built in speaker telling them what to do.
The flow of information is horizontal primarily with three basic steps
1) Choose Duration
2) Based on the Duration selected the Hourly Rate changes
3) Deposit Payment
Colors
The color coding on the redesign is distinct separating and grouping the three step process. The third section is on part of the touch screen but is integrated into the meter device displaying the information on the second panel as well.
Fare Plan
The Fare plans are again displayed based upon the selection its both informative and intutive, these can be changed at any time based upon programming and sending the information wirelessly to update rates, as well as the information on the meter.
Iconography
High level information is reprsented and outline with color codes and icons, information flows vertically and is the short summary of test. If the screen is reflected and viewing is difficult you can also hear out the informational steps to operate the parking meter.
Payment
The device will accept coins, cash tendered notes, credit and debit cards and chip enabled cards that have prepaid parking dollars/euros paid into which the machine can read and then spew out the receipts.

Final Thoughts:

Obviously the interface is not tested and followed by the iterative process that I mentioned in the last post, but hey this is a start for better usability isn't it?. If you have better ideas or alternative solutions please feel free to sketch up something and email it to me.

Wondering If Intuitive Designs should be the norm?

This post will start off with a posing question that is different from the title of the post- Should Intuitive Designs be built into systems or is the adaptability to such systems/interfaces already built into us?

I often wonder about the above question and  problems  like this do stay to bother. A architect/system designer/UI designer or a product designer always (well…not always) wrestle with these kinds of questions. On the left here is the pic of my daughter playing with my mac, when this was taken she was not even three, she is now four and knows how to use cell phones, and almost all the digital devices that her dad uses at home ranging from (ipods, iphones, wii, blu-ray player, hdtv’s etc.)….sounds scary isn’t it but again I begin to wonder if this is the world we live in now, as a parent I am confused whether to be proud of it or not? However these question still loom up in the air…

As I dissect these ponderings let me come at it from the angle of first answering the title to this post: I think as systems are designed and inventions (hardware) or software’s come to life a certain amount of intuitive behavior is always built into them no matter what and they either result into friendly or not so friendly systems. From the pictures above some of the mac fans may argue it is the ease of the system that allows this four year old to watch YouTube videos on my laptop but hold that thought that’s why I merged the two images into one, the laptops on one half is a PC laptop and on the other half is the mac and the web page Hannah is watching is YouTube on both machines. She has somehow figured out watching me for a good amount of time how to click on the favorite links in Safari as well as Firefox. So the argument that the MAC interface is easier for the child or easier to use in Hannah’s case fails. Again this may not  be a very good example but there is this truth that in the systems or interfaces designed some are easier to use and some are harder or just plainly inconvenient.

The second aspect again…”I wonder” and question is if the cognitive adaptability of the mind is strong in some (and not so strong in others) that enables the end user to just figure out the system and make use of it to satisfy a given need. In Hannah’s case her need to watch cartoons made her aware of the system (ot the tool to be used), she adapted the system and the need was satisfied. Though she hasn’t figured out that the favorites “Tom & Jerry” is bookmarked on the sites whenever she pulls up that site, her adaptive mind doesn’t care whether it’s a PC or MAC, she doesn’t care if the interfaces are convenient or not but the need to watch those cartoons is satisfied by her congnitive adaptability of the system irrespective of the intuitive design. This is true in the case of systems like SAP, the manufacturing industry really needed software products that solved problems on supply chain, managing production cycles etc and SAP systems solved that very need but the user interfaces on those systems “sucked” (pardon my expression here) big time but that is the truth. The engineers solved the problem but the interfaces were clumsy to use and soon productivity over a period of time turned into time consuming nightmares with SAP specialists rising in the market (sorry SAP guys...you are special) . So the next question that arises would be ...should designers/architects of a system even bother what the end user thinks, if the need is there, the end user will adapt and learn. Unfortunately many systems both devices and softwares are designed by technical people who believe that they know best and the end users know less or for that matter the end users don't really know what they want. The evolution of systems and the design process has come a long way and the truth of the age is far from it, we live in a age where interface designing has matured not only in the everyday machines we use but in software interfaces we design. The very competitiveness of firms to survive depends on it. An interesting point to note here would be to ask what then is the balanced approach to known as to how much intuitiveness needs to be built in so that it is easy to use, learning cycles are cut short, and finally it is easy to adapt.

Another interesting question that I will pose here is how do we measure those balances while designing such systems? We know maturity models optimize processes, procedures and product development but adaptability will be a hard one to measure as humans are capable of adapting at different levels of cognition, but at the end of the day I will settle for a system that has high form factor, high functionality and high adaptability in every area of design engineering. A design approach like the one graphically represented here from Anothony Robinson's six stage UI design work flow makes perfect sense to me if the approach is user centric, iterative. This approach though may have longer gestation periods and may be expensive in the beginning the plus's are the longer life cycle of the product and a support engineer's boon  - less maintenance and bug fixes. Now this may vary from industry to industry but this is a good start.

So in short...systems should have built in them the ease of use graphical or logical intuitiveness. System designers and Product designers should start by defining usability and utility (mind you they are different) from a the perspective of the all types of users in the mass, know the limitations that you cannot please everybody (a certain level of adaptability will be assumed from certain segments) and the result is we have a process defined for intuitive design to be the norm.

Sorry this post must have posed more questions than having answered them but these spaces are placeholders for my thoughts and I am sure I will revisit it soon.

Sam Kurien

Microsoft Future - Productivity Vision

I have been reading and discussing a lot about user interfaces and the ideas of how intrefaces are going to change the way we interact with different systems. Pranav Mistry's from MIT media labs talk on TED.com of his research on sixth sense technology is one aspect of these kinds of development we have seen lately. My favorite place these days on the web is following Microsoft's vision of the future and the neat research they are doing. Feel free to follow their blog and get a perspective on what's happening there. I have included here a video for you to enjoy. Most of the scenery you see in the video is Hong Kong, Chep Lap Kok Airport and buildings in Central, HKG.




Talking about productivity when it comes to user interface's these words pop in my mind "Intuitive", "simple", "logical" (even for dummies), "transference" (digital to real world and real world to digital).

INVIVA's Campaign for Microsoft XUI Concept

INVIVA a user experience design company recently created a campaign for Microsoft. I thought it was cool how they communicate through the ad the changing face of XUI which stands of experience user interfaces. If you have followed closely R&D at Microsoft research labs, and some of the products occasionally they show-case they justify that our interfaces are going to drastically change and mimic more of the real world objects, the ideas now while driving cars, or using a computer, or ordering the next drink or a meal is wrapped around in bringing a better user experience.

Included here is the video of the concept INVIVA developed. Enjoy!

Introducing the Blend Art-board

The one thing I like about the Blend is the idea of moving towards a system where the designer, architect and programmer can visualize and talk to each other with ease. Not only intuitive user interfaces is the order of the day but building them fast and with ease is also on the high priority with software manufacturers. This post is to introduce you to the different parts of the Blend Software's UI.

The work surface is referred to as the artborad where you will design your Silverlight or WPF applications. 

The artboard is your work surface, where you can visually design a document in your application by drawing objects and modifying them.

1. The artboard background color can be changed to suit anything you want, it is like the canvas where the majority of your work will be done.  To change the color you can use the Tools >> Options menu to do so. 

2. XAML Editor : The code that is generated is called XAML and can be edited in this window. If you look at indicator 5 it will give you options to be in Split view which means (design+code), XAML View which means you can directly edit the code. 

3. The Artboard controls have five key controls which are snapping on and off the gridlines, snaplines, showing annotations and turning on and off rendering effects. This area also shows the zoom percentages that can be controlled by clicking on the list down. 

4. This is the area where the filenames of your project appear. 

5. See point number 2. 

When you are working on a project you will also see certain tabs on the left and the right which can be turned on and off based upon the objects and actions you are performing on them. I have included these screen shots for your reference, in case you are following for the first time after you have installed Expression Blend. 

Enjoy..Next Time we will go ahead and create a roll over application.

HTML 5 Sketchpad

HTML5 being touted as the wave of the future in markup languages. Just do a google search if you’re curious about html5 and you’ll find a ton of info on what it is. HTML5 is being developed as the next major revision of HTML (Hypertext Markup Language), the core markup language of the World Wide Web. The Web Hypertext Application Technology Working Group (WHATWG) started work on the specification around June 2004 under the name Web Applications 1.0.[1] As of February 2010, the specification is in the "Last Call" state at the WHATWG - which as mentioned earlier stands for WEB HYPERTEXT APPLICATION TECHNOLOGY WORKING GROUP. The main purpose of HTML 5.0 is to reduce the need of plug ins for RIA applications like Adobe Flash, Silverligh, Apache Pivot, JavaFX etc.

I won’t bore you with all the details about coding, but I found this cool online sketchbook while browsing completely flash free sketching application. It will be interesting to see if this will be cross system embeddable (Is that even a word? Good thing about the English language is use it and popularize it and somebody will add it in the dictionary) and portable with blogs/social networking sites.