“The basic requirements of production: to build and deliver products in response to the demands of the customer at a scheduled delivery time, at an acceptable quality level, and at the lowest possible cost.” – High Output Management by Andrew S.Grove

“The art of product management is to combine a deep understanding of your target customer’s needs and desires with the capabilities of your engineering team and the technologies they have to work with in order to come up with a product definition that is both compelling and achievable.”  – Behind Every Great Product by Martin Cagan

“Ngon, Bổ, Rẻ” – Urban Vietnamese proverb 🙂

On Color

“Black looks good in all kinds of interiors: old interiors, messy interiors, a clean modern interior. It ages really well. It doesn’t look dirty. You don’t see the seams. He told me, Next time, look at a white car and look at a black car. On a white car you see all the joints.” –Sapper

Interaction Design

Present desktop GUIs are a compound of at least two distinct interfaces, a relatively visible and learnable but time-consuming menu-based system and an incomplete keyboard-based collection of hard-to-learn and unmemorable shortcuts. Two wrongs do not make a right.
— Jeff Raskin

Does not seem things have changed much.

What Product Designer does?

Many people are not familiar with product design still think it is kind of graphic design tasks. It is a lot more than that. Few things product designers need to keep in mind when working on a product:

* Business Requirements
* User Research
* Design Language
* Market Analysis
* Technical Limitations
* Priorities
* Budgets
* Developement Schedule


Motion Design

Animation and motion design have been part of digital product design for a long time. For example, the OS X dock animations , when it was first introduced, was welcomed with excitements. Animation and motion if used correctly can greatly enhance the user experience. However, so far many of them have looked like isolated clever tricks to make things more fancy; and they soon became annoying.

Windows Phone 7 is the first system, in my opinions, uses motion design in a  coherent and systematic way to greatly enhance the experience. “Windows Phone Design Days – Animation” by Jaime Rodriguez is a great presentation from which you can learn about WP motion design in particularly and motion design in general.

Here’s my notes from the presentation:

Why use motion?

  • Delight the user. Using interesting visual effect can make things more fun, make people tight to the device. I think you need to be careful not to overuse. I am working on a news app for iPhone, and I might introduce some weather effects into the app, one problem of introducing these kind of visual effects is the cost. It might cost too much to have one or two fun effects, not worth the investment.
  • Hint towards interaction. Let people being aware of possibilities. The most obvious example is the hopping home screen of WP to let people know how to unlock. In a perfect world, you should not have to do that, the design should be self-evident. In this sense, the iPhone unlock button is a better design. However, in case you need to guide users, motion design can be very handy.
  • Perceived performance. Mask slow performance -> make the experience more consistent. Let people know something happening. Using motion design to mask slow performance is new (to me); we have applied this trick to our recent iPhone product and got good results.
  • Help the user find their way (keep them grounded)

Things to keep in mind. Front load animation early in design process. Animation should be part of the design, not something you add to product later.

Definition: There are two main kind of motion in WP:

  • Transition: visual feedback given to the user as they move from one scene to another within the UI.
  • Animation: visual feedback confined to a local element within a scene which has motion, but not always tied to a user action.
The motion serves a purpose
  • Lets the user know the device is “alive”: sound likes part of the reason why WP has more motion is because the “flat” style of graphic design.
  • Teaches the user how to interact with the device
This aligns with my design philosophy that for product design, all design elements must serve a purpose, not just ornament. They decided to go for 2.5 D because they don’t want to overwhelm the user with too much design, and focus on the CONTENT.

No transition is an island. This point is really important, we have to keep things consistent.

  • all transitions are part of a system.
  • Each animation serves a specific purpose.

Techniques: the talk went to more specific techniques and examples.

Randomization. Using randomization on motion to avoid boring replication and to make motions feel more natural.

Continuum: there continuing elements which are common between screens, they create nice flows and make the user does not lose track. I have seen this technique being used more often now; for example, the latest Facebook iPhone app using the same idea when you tap in a photo to go to fullscreen mode. Flipboard employs this technique at few places too.

Easing: make things feel much quicker.

  • Keep easing consistent. Consistency in design is everything 🙂
  • Can help the UI feel more real
  • Can help make long waits feel shorter
  • Makes the UI feel snappier
Easing seems to be an important motion technique; I first saw this technique when hacking the code of for a experimental project. I find easing really help improving the motion experience.

Time. Look like 250ms to 350ms is the good range for animation duration. I am not sure where they get these numbers, but these numbers work.

In conclusion, this is a very good talk about motion design, many techniques are general and you can apply to your products.




Back to the old days, people only talked about usability and user-centered design. Now those terms seem to be outdated. People talking about user experience. But I am not sure if the term “user experience” has become an buzzword or not.

This is the definition from Wikipedia:

User experience (UX) is the way a person feels about using a product, system or service. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership, but it also includes a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system. User experience is subjective in nature, because it is about an individual’s feelings and thoughts about the system. User experience is dynamic, because it changes over time as the circumstances change.

Sounds pretty vague, doesn’t it?

Few more related links:

Mobile Design: Sequential Presentation

Nokia phones , back to the old days, were always better than other phones in term of usability. They had very strong usability and design culture  which was described in the book Mobile Usability: How Nokia Changed the Face of the Mobile Phone. I have that book in my bookshelf, and sometimes re-read it. One of the important point was mentioned first in the book is a diagram looks like following:

Portability -> Small Size -> Small Screen -> Sequential Presentation -> Prioritization -> User Understanding

In order for the mobile phones get carried around, the size must be compact. Hence, with the small  surface area, and the amount of data can be presented on the screen at a given time is very limited.  So information in general must be presented to the users sequentially (opposed to desktop UIs where we can present plenty of options simultaneously on a sizable screen). The high density of the current Retina display technology slightly improves display quality, but we still stuck with the small-physical-size screen; there are only that much stuffs you can pack into a single screen.

I am working on the next version of our leading product BaoMoi iPhone, and this important point has totally changed our approach to the design, we have no longer tried to present too many items on the same screen.

Experimental Project: Digital Book

Sometimes I did few experimental projects. This is one of them during the time at Autodesk.

Tips & Tricks Wiki

The link about is a self-contained document, the missing things are graphical elements, at the time I could not find way to practically store photos within an HTML document. Need to learn more HTML5 now!

The original introduction I wrote:

“This is the TiddlyWiki version of the book “Tips & Tricks for Using AutoCAD 2007 Software” by LynnAllen. The conversion was done by TranTuanAnh.

The purpose of this experiment is to try out new ways to provide post-sale documentation to users. Few advantages of using TiddlyWiki are following:

* It is more interactive, TiddlyWiki offers an extremely interesting way to browse the content with the concepts of WikiWord, tags, etc.
* It helps to democratize the publication process. It is Read/Write documents my friends 🙂 Users can participate, they can make changes; we empower them.
* The kind of content like “Tips and Tricks” is MicroContent and should be written in a new WritingStyle.
* It is technically and practically convenient, this is just one HTML file. Anyone can ready it, everyone can publish it.

I leave you to figure out how ThisSiteStructure is mapped from the original document.”

Volume Control

HP has showed off at CES 2012 their latest laptop HP Envy 14 Spectre.

It seems (from the picture) the laptop has a real physical volume wheel. I am so happy to see people use dials/wheels for the volume control in laptops again. To control the sound volume, nothing beats physical dials/wheels. My first ever laptop, a Toshiba Satellite (year 1999), has a real volume wheel on the left side. The wheel is intuitive and easy to use. Even it has been more than 10 years, I think I can now reach that volume wheel blindfold. However, all computer makers (including Apple) since then switched to use the up/down button design.

To control sound volume, the volume dial/wheel is superior to any kind of up/down buttons. It all comes down to the muscle memory; with a knob/dial/wheel you can “feel” how much loud or quiet you want, and you can do it as quick or as slow as you want. I hoped that some companies such as Apple would pay attention to this detail, but HP Envy 14 Spectre has been the only laptop with a physical volume wheel I have seen after my Toshiba Satellite.

Worse, most of volume buttons nowadays are software-controlled. It means the feedback is slow; also it means the volume levels are discrete, in some laptops you have only five or six volume levels. It is unnatural to map a continuous concept (sound volume) to a discrete domain. Software-controlled also means you only can affect the volume after the laptop fully boots up. Even worse, the volume buttons are usually combined with function keys (F1-F12), for example, on my current laptop I have to press Fn+F8 and Fn+F9 to control volume.

Imagine that in a meeting, you open the laptop and Windows starts playing the infamous windows startup sound (it is very annoying when you left the volume maximum), you just want to quickly turn off the sound. With volume buttons you have to press the Fn key then looking for the volume down button among F1-F12 keys, you have to do all these things in dim light. I hope computer makers would pay more attention to usability and ergonomics as it seems laptop design is getting prettier but not better.