Here are some thoughts on elevator door buttons and design inspirations I got from the observation.

Common issues:

1. Language – there’re thousands of words in different languages to communicate the “open” and “close” functions. English is [open/close], Chinese is [開／關] or [开／关] (simplified Chinese), Japanese is [開／閉],…etc.
2. Icon – to solve the language problems stated above, it’d be better to use icons that is universally understandable regardless of the language barrier.
3. Button location – Some elevators has the open/close buttons located at the top of the button panel. While one person is pressing the [open] button to keep the door open, other people sometimes has to squeeze under his/her armpit to press the floor buttons. That’s quite inconvenient and could be embarrassing.
4. Mutual exclusive states – “open” and “close” are two mutually exclusive states of one object: the door. Logically, you only need one control to operate the door. Think about a light switch: one switch is connected to one lightbulb to turn it ON or OFF. However, perhaps when the engineer first designed the elevator, the two functions was identified as two separate tasks where each has to be implemented and engineered separately. Thus, the two buttons are mapped to control the two functions.
5. Accessibility – what if the user is colour blind or unable to see? What if the light goes out and you can only rely on touch?

A good solution

1. Language independence.
2. Every control should have at least two or more ways to communicate its function.
• Colour (green is open / black is close)
• Icon (outside pointing arrows is open / inside pointing arrows is close)
• Physical dimension (wider button is open / narrower button is close)

Real world example

Here is an interactive demo of the Lumix GF3 touchscreen provided by Panasonic Japan. You can select 3 controls that are available in iA Plus creative mode: White Balance, Exposure Compensation, and Soft Defocus. I have put some English descriptions in the screenshot above for those who cannot read Japanese. Please try it and experience the touchscreen user interface of these controls.

Link: Panasonic Japan GF3 Interactive Demo

Panasonic recently released it’s new iteration of the compact SLR-equivalent camera, which targets the average consumers rather than professional SLR photographers. The compactness of this camera is archived by eliminating the mirror box, hotshoe socket and optical viewfinder unit, while keeping most of the SLR goodness in a convenient and small housing. But most importantly, the camera comes with a 3-inch big touchscreen LCD and a secondary dial control, eliminating the need of many feature-specific buttons that are commonly seen in professional SLR cameras. In spite of the revolutionary mirrorless SLR technology, what interests me most is its touchscreen user interface.

The first time I learned about this camera and it’s touchscreen control was from it’s TV ad in Japan. In this ad series, the photographer is trying to capture the cute moments of a cat, which highlights its high-speed auto focus, touch-controlled focal point and shutter, and easiness to take pictures with blurry background (shallow depth of field).

http://www.youtube.com/watch?v=uZi-l_QYzf4

Touchscreen as a camera interface

Touchscreen is one of the main selling point of this camera. At a first glance, it feels like a gimmick that rides on the popularity of multi-touch powered smartphones. After reading its product catalog, however, it seems that the designer did carefully design the UI to take advantage of the touch hardware. Moreover, in the manual creative mode called iA Plus, there are three controls that user can easily adjust: defocus (depth of field), brightness (exposure compensation), and colour control (colour temperature).

I think the selection of these three specific controls is a careful observation of users and their most desired results that were only archivable with traditional SLR camera and some training. Take defocus for example: many people really like the effect of sharp main object with blurry background; but in order to archive such effect of shallow depth of view, one must know how to deal with shutter speed + aperture + sensor ISO. However, the GF3 camera does all the hard work for you, leaving you only one control of the background blurriness.

In terms of user experience design, by simplifying the traditional SLR controls into one defocus control, user can still feel in control to the creative process while greatly reducing the learning time and difficulty to operate the camera. Novice and post-novice users can enjoy the result of a reasonably professional looking picture. That will satisfy their emotional goal:

“Enjoy professional-looking photography casually without the headache of learning about F-stop and stuff” and ”play a role in the creative process and get a sense of achievement”

A similar experience design that result in “getting a sense of achievement” can be observed from Betty Crocker’s famous “Just add an egg” cake mix tale.

You can learn more about the touchscreen interface from this product detail page:
http://panasonic.net/avc/lumix/systemcamera/gms/gf3/ia.html#leadtitle

Pictures from official site: main UI

Soft focus creative mode

Ad poster in JR train

This talk from Simon Sinek is about inspirational leadership. He explains the difference between a typical leadership and a truly inspiring leadership, with three concentric circles labelled “What”, “How” and “Why” from the outside to the inside. Those are the three qualities of a leadership:

1. Almost all individuals and organizes know what they are doing. All companies know what they’re making and selling for profit, be it a computer manufacturer, software development company or a furniture store.
2. Some of them know how to to it well.
3. Only a few among all know why they do it. What’s your purpose, your cause, your believe. Why do we exist. Profit is not the reason, it’s just the end result of the process.

Simon gave an example of a marketing message that’s from the outside in (what > how > why):

Apple makes great computers > they’re beautifully design, simple to use, and user-friendly > Wanna buy one?

But this is what Apple communicates it’s value from the inside out (why > how > what):

Everything we do we believe in challenging the conventions, we believe in thinking differently > the way to archive that is to make our products beautifully designed, simple to use, and user-friendly > which we happen to make great computers. Wanna buy one?

“People don’t why what you do, they buy why you do it.” That’s the main point of being inspirational. Believe in purpose, believe in meaning.

TED Link: http://www.ted.com/talks/simon_sinek_how_great_leaders_inspire_action.html

Designing an auditory menu is, by nature, very different from designing a visual one. It is difficult for a user to listen through a long list of menu, memorize the choices, and pick the most appropriate one. Using auditory menu is more mentally taxing than s visual one.

One intriguing part in this interview is that when James mentioned the work of Patrick Commarford, who conducted [an experiment to see if a broad menu with many options but very little depth would work better, worse or equal to an auditory menu structure that had fewer options per level but more levels. And the thing that he did that turned out to be especially valuable was he measured the memory span of all his participants.]

I’m wondering, then, if the conditions of using the IVR systems are similar to mobile computing. For instance, user is usually in a very distracting and dynamic environment while using a mobile device, sometimes with very little time to spare. Under such condition, will the user become less capable of memorizing the menu structure/application flow, just like dealing with voice menu? And if that’s the case, will it be better to design a mobile app with broad-and-shallow menu, versus a narrow-and-deep one?

There’s a conventional wisdom of 7+/-2, the number of items an average human being can keep track of in the working memory, based on a very old research by George Miller in 1958. That’s more than 50 years ago. Things had changed a lot, including economy, technology and tool (the Internet, computer), education, living condition, how our mind works, etc.

Can we memorize more items now? Can our memory benefit from the rich visual effects in the smart phone platform? I don’t know the answer, but it’d be interesting to ask other mobile app experts for their opinions on that.

James Lewis is an experienced human factors engineer with IBM for thirty years. This episode of the podcast is a follow-up on James book: Practical Speech User Interface Design. Link to the podcast episode with transcript is: http://www.infodesign.com.au/uxpod/speechui

Patrick Commarford‘s publication about wide-and-deep menus:
http://www.vuidesign.net/usability-on-wide-and-deep-menus.htm
http://www.vocalabs.com/newsletter/how-design-phone-menu

Last Saturday I attended a meetup in Shinjuku from the Tokyo iOS Developer group. The organizer is Matthew Gillingham, and the group consists of experienced iOS engineers, designers and entrepreneurs.

In the first hour of the meetup, Matt gave a presentation to share the technical information he got from WWDC, briefing to us a bunch of new capabilities and possibilities with the upcoming version of the iOS. We then go on had some discussions regarding these new features and the future of iOS business. Here are some topics that I had discussed with the group.

iCloud and mobile Internet service — with the new iCloud and data storage/syncing over the web, will it introduces more trouble to mobile Internet service? I’m an E-Mobile user and is already suffering slow data transfer rate and occasional disconnection in places. With the promised push syncing with iCloud, I can only imagine more difficulties using the existing networks. Not sure about the U.S., but the mobile Internet over the cel-phone network in Japan aren’t very speedy to begin with, and the situation is probably going to be much worsened after the introduction of iCloud.

NFC and mobile payment — While Google and it’s developers are actively exploring the possibilities of mobile payment with the NFC technology, the next iOS doesn’t seem to deal with that issue. While we see third party solutions like Square who are trying to tackle the mobile payment demand, it’s a natural move for Apple to integrate the NFC and provide a smooth experience in the near future.

By the way, I recently notice increasing traffic to my previous mobile payment posts (http://www.calvin-c.com/blog/tag/mobile-payment/). Perhaps more people are interested in the topic now?

Prototyping, how designer and engineer communicate — surprisingly, this question seems to amaze everybody. I got answers like paper sketch and wireframing, PowerPoint for interactive presentation etc. A lot of “talking” is required as it’s the only effective way for designer to express the interaction between controls and views.

Yet, the way of “talking” is also tricky. Designer and engineer must have a common language in, for instance, describing the rich transitions of views and screen objects. Core Animation, Core Image, Open GL, UIKit, video buffer…these are hard-to-digest stuff designed for engineers but not the designers. So here’s a potential project to create an open-source dictionary of these under-the-hood technologies in layman terms for “normal people”.

I told the group about the recent prototyping app Prototypes, and they seem to be very interested about it.

The next XCode will hopefully coming with a “storyboarding” feature. Not a lot of people are talking about it at the moment, but I really hope that it’ll be as easy to use as the Prototypes app.

However I’ve learned about Flurry, the user interaction logging and tracking service that can be useful for usability testing of apps. It’s works like Google Analytics which programmer can include a lightweight library and tracking code into your beta or production app, and your interaction will be send to the Flurry server for later research and analysis.

Money — App Annie is the only service I know that can track and keep you some idea about the app market. However, what I’m looking for is a more powerful market research tool that can show number of downloads, estimated revenue, etc.

Some folks I’ve met at the event

• Matthew Gillingham (http://www.twitter.com/gillygize) the organizer of the iOS Tokyo Meetup and a seasoned iOS developer specialized in gaming, but he actually seems to know just about everything iOS.
• Peter Mac Innes (www.fluid.jp)
• Frederic Nouel (papanouel.com, 3rdkind-inc.com) from France
• Richie Nguyen (3psports.jp) who’d lived in Hong Kong for a few years
• Danielle Kelly (newmediaeye.com) a creative director and editor who’s interested in user experience
• Anthony
• John, engineer working for Nomura
• Gary, entrepreneur and the “idea guy” who’s interesting in financial app for iPad

日本語：「ユーザエクスペリエンス」— pronouncing “YUZAEKUSUBERIENSU” is a Katakana conversion of the foreign word “User Experience”. The word, by itself, is just a straight phonetic representation, has no literal meaning in Japanese.「ユーザの体験」is a better translation which combines the foreign word 「ユーザ」(user) and Japanese Kanji「体験」(experience). Most Japanese can understand the foreign word「ユーザ」, while I have never heard them using the word 「使用者」（しようしゃ）.

中文：「使用者體驗／使用者經驗」— 兩者皆有人用，但我個人認為「體驗」比「經驗」合適。「經驗」聽起來好像在指透過長時間作同一行為而得到的經歷，是客觀和被動的結果，例如「工作經驗」「人生經驗」。而「體驗」比較有感情和人性化，透過自身從使用產品或服務的過程當中獲得的主觀感覺和感受，較符合英文 “User Experience” 的原意。

I really like this opening keynote speech given by Bill Verplank at Interaction 2011.

He is a visual thinker, who can visualize and organize his thought while thinking about it, and then sketching the ideas out on paper as he speaks. Of course, he must have been studying and talking about these human factor topics for hundreds of times, with a lot of practice to perfection.

I believe that my mind also work with visual better than textual, conceptual ways. Of course, with years of practice, it isn’t a huge problem to write a blog post or jot down notes in point form, but I find more natural to record my ideas in sketchnotes and mindmaps, encapsulating keywords into shapes and illustrations.

people are not born to read. You can see new born babies or toddlers doodling happily with crayon and paint, and getting stimulated by sound and pictures. It’s not until we get older, before or after we realize our own conscious and grow capable of understanding abstract ideas, then we are taught to use language and symbol to represent these concepts.

For instance, you often see kids having trouble to understand what it means by 1+1 in mathematical formula. But they can easily grasp the idea once you add context and story, like:

“It is afternoon tea time now. Mommy gives you one cookie. And then, mommy gives you another cookie. Now how many cookies do you have?”

And the kids are very likely to understand the concept right away.

Another idea: what represent nothingness? Shouldn’t it be “nothing” itself? Yet, we created the symbol “0″ to represent the concept of nothingness, and even extend it to non-existing concepts like decimal places and [a number]/0 (divid by zero).

Coming back to Usability and User Experience, both with a big “U”. It’s only a concept, yet everybody in the field (or rather, originated from other fields) is trying to define it in one’s own ways with own structures and metaphors. There are systems with visual, textual, story, persona, example, best practice,…etc etc. But Usability is, after all, an expression of how general people interact with your system/systems. Practitioners’ opinions and generalizations are heavily depended on one’s language, culture, experience and personal perspectives.

I’m not saying that we should abandon all systems and definitions and just follow your heart. It is still very critical to study from other practitioners’ studies and researches to know how other people think. Then from that point, I’ll try not to be obsessed with any one of them, and use my own way to conceptualize and visualize the term “Usability” and “UX” in the sea of my mind.

Prototypes is a Mac application for UI and UX designers to easily setup interactive mockups for their iOS design projects. Designers can simply drag mockup screen image files into Prototypes, assign hotspots that link from one screen to another, and viola you get an interactive prototype. No HTML or any coding knowledge required.

Furthermore, the app is designed for easy remote testing, by integrating a “share” button that let you upload the whole design to their dedicated server on the web. You can then fire up the browser on your iPhone/iPod or other device with Webkit-like browser, browse to the site “ptyp.es” and enter the dedicated PIN number, then your browser will play back the tappable, interactive prototype.

To try some published prototypes, do the follow:

1. On your iPhone or iPod touch, browse to http://ptyp.es
2. When asked to enter a PIN number, enter “12345678″ or “14675639″

What other features I want

Local FTP/export to HTML — right now the Prototypes app only allows designer to upload the projects to their own “ptyp.es” site. While it’s super easy to set up a test, my team and I are all concerned about the lack of password protection to our uploaded projects, meaning some outsiders maybe able to see our design of future products. Would be nice if Prototypes runs a local web-service or using Mac’s built-in Apache web sharing for local testing within private LAN.

Logging users’ actions, creating profiles and allowing playback/analyse — Prototypes is already a very powerful testing tool for iOS app design. However, it’ll be even more frigging awesome to be able to log users’ every tap, flick and all gesture, packaging them into profiles, and allowing playback and more comprehensive analysis at a later time. Think of it as the Silver Back usability testing software for iOS platform.

More transitions — while not critical at the moment, it’ll be nice to include more iOS native transitions for more realistic prototypes.

This app really have the potential to shine big times. Looking forward to seeing more improvements in the future.

Human Factor International periodically prepare online video on topics focusing on usability and human-centered design. I came across to this video from Apala Lahiri Chavan — “Cross Cultural Design“.

The topic feels very close to me, as I am currently working in Japan and experiencing similar cross-cultural issues in my design projects as well as daily life experience. But more interestingly, I’m mesmerized by the presentation of the video. It uses comic sketching that synchronizes with the voice over to deliver a smooth flow of information. I find it very easy to visualize and organize the concepts in my head.

Good Points:

• Use comics and graphics to present conceptual information
• Reveal part of the big picture with smooth, continuous flow through out the presentation
• Let user download the finished big picture/poster as a takeaway note

More animation videos from HFI:

• UX Enterprise: the Future of UX Work
• Building Industrial Strength User Experience (UX) with Dr. Eric Schaffer
• All videos