All posts by Young Koh

About Young Koh

Young Koh - A Chicago graphic designer, UI engineer since 1999

Thoughts on Google Material Design

Design, UI development, Usability, UX,

First off, I am a fan of Google’s Material Design.
I have extensively studied their guidelines and have been following its evolution since Google made guidelines public.
Lot of my preachings over the years are, in fact, inspired by Material’s principles.

A brief background on Material
It’s a set of look and feel and design principles developed mainly for Google’s Android platform that has gradually evolved into a distinct set of rules and aesthetics, now coined as Material Design. Guidelines for Material Design was made public in 2014 but the effort to unify the look and feel and UI across Google products have existed under various names. Material is sort of the ultimate manifestation of those past efforts.

Design principles
Apart form the small subset of Android specific items, most of the design principles and guidelines within Material is a great foundation for any web project.
Actually, if you really think about it, most of the design principles and guidelines within it are common sense. Given proper context, there isn’t much a self-respecting UI designer wouldn’t have practiced anyway – Material or not.
Many of the principles in Material serve as a reminder of what good design is.

Once you strip away all the common sense and generally good design principles and guidelines – something that should be applied to any design anyway, only thing that’s left that makes Material unique is its look and feel – more look.
Now, the question becomes: “Do I want to merely mimic the look of Google’s Material Design?”

The web is saturated with numerous implementations of Material Design. Best examples are ones that selectively apply the pieces that support their project effectively.
There are no shortage of bad implementations of Material. Designs fail when the look and feel of Material is adopted, but without the complementing functionality and experience which it is designed for.

In conclusion, I think we should definitely borrow many of the great design principles and guidelines set forth by Material Design – specifically, the section “Cards Component” as well as Component section as a whole is a great place to take to heart for any UI designer.
However, attempt to apply Material Design in its entirety to random projects without fully understanding its intent and implications will most definitely result in disconnected and spotty experience.

Every project is too unique to successfully benefit from being strictly Material.

Are you still “clicking here?”

Usability, UX, ,

Back when the rotary telephone was the bleeding edge technology, say in 1890’s or so, it probably wasn’t unusual to say things like “put your finger in that hole, rotate to the right all the way, and repeat…”
Then it probably evolved to something like “Dial these numbers.” Now we just say “Call me.”

Do you remember when companies printed their website address in print or packaging it always had “http://www…”?
It went from “Visit our website at http://www.ourcompany.com”,
to “Visit our website www.ourcompany.com”,
to “ourcompany.com”.

As we become familiar with an idea, we describe them less. Simply because there’s no longer a need to describe or explain.

In the early days of the internet, it was perfectly acceptable or even encouraged to use the phrase “click here to do this…” simply because people did not know that they could click things on the screen. But things have changed didn’t they?

Usability experts discouraged use of “click here” by preaching something along the lines of “Focus on the goal not the method.” That was Google’s preaching as well. But apparently, it wasn’t very effective. “Click here” is still rampant. Probably because saying “Focus on the goal not the method” is a pretty boring way to convince someone.

So here’s an example that I hope can clear things up.
Which of the two phrases below would you rather use?

“Take the elevator up to fifteenth floor.”
or
“Push the up button next to the metal doors, get inside once the doors open, once inside locate the panel with lot of buttons, push the button with ’15’ written on it, and then….”

That should give a pretty good idea of how silly it is to use “click here” in this day and age.
Do yourself a favor. Don’t be a dinosaur.

User Centered Design vs. Ego Centered Design

Advertising, Design, UI development, Usability, UX, ,

User Centered Design vs. Ego Centered Design
Why print designers need to realign their thought process and mentality to become effective online designers.

The print process flows something like this: rough sketch is pitched, revised and refined finally into production ready comp. Client signs off on comp and nothing can change. Client expects exactly what was pitched. And that is what gets delivered. Why so rigid? Because there is no turning back once the ad runs in a magazine/newspaper or hundreds and thousands of brochures are printed. There is no other way but to be perfect. Therefore, delivering exactly what is pitched is engrained in the culture. In that respect, I acknowledge the bravery, admire and respect those who work in such cut-throat environment. I was there once, so I’m being honest here.

Ego enhancement and gratification
Print designers expect and get the end result exactly as they designed it. Production is typically a printer. Whether it’s advertising, magazine, annual report, or small time brochure, seeing the final printed product exactly as one designed and envisioned is the ultimate ego trip. Imagine what this will do to one’s brain. Experiencing this kind of gratification day in day out, year after year nurtures the belief that one’s design and vision is impregnable. In print design, getting back something with even a minute deviation is unfathomable. However, this is the one habit one should certainly discard when transitioning to online medium.

Typically, an advertising or print design campaign is a one-man ran event. One person – the creative director is running the entire show. The CD sets the vision, leads, and is a primary contact and liaison for clients. The end result is the exact rendition of the creative director’s vision. In the online sphere, however, the end product isn’t so much a manifestation of one person’s vision. Internet applications are result of many diverse expertise working in harmony. No single person has (should have) the last word. The creative leader’s vision here is the accumulative result consisting of contributions from everyone involved. Teams responsible for performance, security, maintenance, database, compatibility, usability, and design all have equally critical role. Naively applying the print mentality here will certainly result in a product that probably excels in one area but one that fails miserably in all other.

Another area that needs realigning is the definition of creativity. In print, creativity is often thought of as being different merely for the sake of being different purely on aesthetics and style. Tending to and exercising cool and hip does not have a cost. It simply gets printed as designed. End of story. In a stark contrast, everything has a cost in the online world. Creativity does not simply mean ‘wow-effect’ at any cost. Every design decision and functionality has to be carefully gauged against benefits versus cost, effort and consequence. Neglect in this regard can lead to devastating results. Performance, security, maintenance, compatibility, usability, and functionality are all codependent on each other. True creativity is one that brings all of these aspects together to perform in harmony.

The goal of advertising is to manipulate the audience. Mostly convincing people to buy things otherwise not bought. Whether the product offers genuine value to the customer is rarely considered because the primary goal is to sell and glorify. Why do I mention this? The point is, there is no empathy in advertising design or in any traditional print design for that matter. How often do print designers user test their layout to find out how easy it is to read? Right. Never. Users are almost never considered during the design process. Designers who become accustomed to this type of environment and practice lack empathy. This is a critical difference. Lack of empathy and lack of consideration for users can be devastating as web/internet professional.

The print design world is what it is. It will remain so as long as there are people. But the design model is changing for the rest of the industry facing human interaction. Designing around how people see things, not how the designer see things.

Be Battery Free – AC powered Apple Trackpad

Random Blog Posts, Usability, , , , ,

My Apple trackpad never leaves my desk. It always stays within few inches in front of my iMac. Therefore, its silly to have it battery powered. I also like to practice what I preach.

It is quite difficult to find an alternative to Apple trackpad in general. Let alone, finding one that is wired (usb powered) and has the aesthetics similar to what Apple offers is nearly impossible. The surface texture and tactile experience of the Apple trackpad is identical to my MacBookPro, and I prefer to keep it that way. So, this is how I transformed my Apple trackpad to be battery-free.

I initially planned to draw AC power from USB. But before you can do that, you need to convert the 5 volts from USB down to 3 volts that Apple trackpad uses (2 AA 1.5v batteries = 3v). That would require some voltage math along with fiddling with resistors. Until I can figure that out, I went ahead and bought a 3V output AC wall adaptor. The result is the same. It will just draw AC power from the wall outlet instead of the USB port.

Silly batteries

Apple Trackpad AC Conversion

This is the 3 volt output adaptor

Apple Trackpad AC Conversion - 3v ac adapter

1. Cut the output end plug of the AC adaptor wire (opposite of the wall side)
2. Drill a hole on the back of the trackpad battery barrel
3. Insert cut end of AC adapter wire into the hole and out through the battery cap

4. Find a wooden dowel about 1/4 inch in diameter. Length should roughly equal that of 2AA batteries (maybe little shorter to compensate for the 2 screws at each end)
Apple Trackpad AC Conversion step 1-4

5. Then I soldered the correct wires to the metal screws (careful not to mix up + and – )
6. Used some electrical tape to wrap the wire and the wooden dowel
Apple Trackpad AC Conversion

7. Insert the finished wooden dowel into the battery compartment, carefully guiding the wire while pulling out the excess wire back from the drilled hole
Apple Trackpad AC Conversion step 7
Apple Trackpad AC Conversion step 7

Wire Diagram

Apple Trackpad AC Conversion - wire diagram
A. 3V AC adaptor
B. Wooden dowel (about 1/4″ diameter, length of 2 AA batteries – or you can be creative with pencil or empty pen barrel)
C. Solder or wrap wires to metal screws at each end

The result – AC powered Apple Trackpad

Note that the trackpad will still use Bluetooth to communicate data to the computer. The AC power just provides…, well, just power.
Apple Trackpad AC Conversion
Apple Trackpad AC Conversion

I am battery-free forever!

Apple Trackpad AC Conversion
Apple Trackpad AC Conversion

** Disclaimer: If you are considering doing this, attempt at your own risk. This set-up works fantastically for me because I sort of knew what I was doing. Fiddling with electrics and voltage is no child’s play and lot of things (including burning down the house, electric shocks, frying your equipment, etc…) can go wrong depending on how handy, steady, and careful you are.

Google Effects on Memory

Design, Usability, UX, , ,

This scientific research paper is a quick read. The reading, however, is interrupted in few places by the actual numeric data from the research which appear quite cryptic. But you can skip over the numeric data and still come away with a clear understanding of what the research is about and its findings. The paper eventually comes to a comprehensible conclusion written in plain English for normal folks.

Here it is:
Google Effects on Memory: Cognitive Consequences of Having Information at Our Fingertips (pdf)

Lot of us already feel that this is happening in our lives. However, the data and the findings solidify our feel and give us concrete belief and the conviction to act upon the knowledge.

UX professionals should read and ponder.
The way we handle user experience in numerous domains will ultimately be shaped by the human adaptation such as the one discussed in this paper.

Meaningless and Overused Words in Design

Design, UI development, Usability, UX

SIMPLE, CLEAN, MODERN
“The goal is to create simple, clean, and modern design blah, blah, blah…”
How many times have you heard that phrase at the kick off meetings? As if that’s some sort of a differentiator. It isn’t.
No one wants complicated, dirty, or outdated anything. Therefore, pitching “simple”, “clean”, and “modern” is saying absolutely nothing. It’s truism. It’s meaningless. Imagine a GM executive saying “Our goal is to build a car that starts, moves forward and moves backward.”

POP
“That needs to pop more.”
Till this day, no one knows what that means. Not even the person suggesting it.

DIFFERENT
Being different among the crowd is good. But the difference must amount to something useful, beneficial, and valuable. There are no shortage of things that are different but stupid. Being different merely for the sake of being different adds no value. “Different” is a result. It should not be misunderstood as an attribute.

Law of the Conservation of Complexity

Design, UI development, Usability, UX,

Larry Tesler’s Law of the Conservation of Complexity states that every application has set amount of inherent complexity that cannot be reduced or increased. Complexity is constant. The only question is who will handle the complexity? End users or developer/designers?

Making things less complex for end users means it will be more complex to program for developers.
Read this excerpt form Tesler’s interview to see why developers and designers should always assume the responsibility of handling complexity. This short read will make you a much wiser developer or designer.

Problem with Over Predicting UX

Design, Usability, UX,

The iPad’s volume control is calibrated so that when you keep the down button pressed for more than a split second, it immediately switches to mute. Why? Because the designers of the iPad figured that anyone who keeps the volume down button pressed must be wanting to achieve total silence. Not true. This is over-thinking and over-predicting. Almost always when I keep the volume down button pressed, I am wanting to get to a certain low volume level. Not total silence.

There are people, including myself, who just naturally like to press buttons this way and not just on the iPad. If you are familiar with the device there is no reason to slow down any maneuver. I am capable of knowing when to lift my finger when my desired level is reached. On the iPad, my only option is successive button presses whether I want slow or quick decrease of volume. I find the iPad’s volume button behavior quite annoying. It just makes me wonder what sort of time difference we’re dealing with here if the buttons worked normally. I’m willing to bet that the saved time A) probably isn’t significant enough to make any sort of real world difference, and B) was not worth the risk of annoying the group of users who expect buttons to function normally.

The train of though that led to such feature may have made sense to few people. But concluding that the public at large must behave the same way is very narrow minded. Either the designers of the mute feature have not done proper research or they have made decisions in a vacuum.

Accommodating and thoughtful features elevate the user experience. But it’s a very fine line that separates the thoughtful from the aggravating. An over-thought UX can quickly ruin an otherwise typical, trouble-free, everyday operation. A good UX gets a nod from a recognizing user. A great UX feels so natural that it makes user think of nothing at all.

The Novelty Curve

Design, UX

Think back to when television was first invented. I bet no one back then thought that having to get up from your seat to adjust the volume or switch channel was an inconvenience. This is what I like to call the ‘technology honeymoon phase.’ Any and all aspects of the new technology is simply accepted as is with no questions asked. The initial awe and amazement leaves no room in our heads for complaints.

Then the novelty curve kicks in. When newness wanes we start to question why certain things are certain way. We start to form our own opinions about how certain things should be done. Suddenly, having to get up from your seat to change TV channel becomes an annoyance. So came the remote control. TV set plus a remote control – no matter how perfect a combination it once was, the novelty curve is constant. We now want on-demand programs, we want the internet in the television, etc. The cycle goes on.

Anyone in the business of catering to peoples’ wants and needs should be keenly aware of the novelty curve in order to stay current. The changes are more volatile in the consumer technology sector. The internet, the connectivity, streaming video, or the instant gratification in general is no longer a novelty. Satisfaction and happiness exists only in short cycles in the consumer society. The success of any product or service will last only as long as the technology honeymoon period. Like it or not, that period is getting shorter and shorter.

Unicorn Designers Are Real

Design, Random Blog Posts, UI development, Usability, UX

For the longest time I have marketed myself as designer-developer, developer-designer, UI/UX Developer & Designer, Front-End Developer/Designer, or some combinations of those words. I wasn’t quite sure what to call myself.

It turns out the web development community has coined a term for someone like myself and has been using it for some time. A web professional who excels in User Experience (UX), Front-End Coding (UI), and visual design is referred to as the Unicorn Designer or Unicorn Developer. The definition specifically reminds that unicorns are not generalists. If they were, they wouldn’t be that rare and therefore, wouldn’t be called unicorns. Unicorns are experts across all said disciplines.

You can Google ‘unicorn designers or developers’ and read all about them and varying point of views. Many discount unicorns simply as a myth, some believe unicorns exist, and few have claimed they have worked with one. At any rate, the reasoning goes, those who possess expertise in all three disciplines (UX, UI, Design) are called unicorns because they are extremely rare and expensive.

I never really thought unicorn developers were all that rare until I began reading about them. In fact, it was my naive assumption that all highly qualified web designer/developer should possess all of the related skill sets. I’m willing to guess that, like myself, many unicorns started from the early days of the dot com boom. In those days, if you worked at start ups or small web agencies, it wasn’t all that rare for visual designers to delve into heavy HTML or even javascript. Learning new skills – especially when it’s something tightly related to what you were doing – seemed like a natural path.

My background is in visual design and advertising. Along with related studies in psychology and photography, I took few web design/HTML classes. My first job after graduation was at an internet start up as a ‘digital artist’ (we thought it was a cool way of saying web designer). I started out as a visual designer with limited experience in HTML. I should also mention that early on I had a good mentor who helped me spark my interest in things back-end as well. Jumping into related skill sets happened naturally for me mainly because I passionately wanted to know how all of the pieces that make up a web project worked. And over the course of my career I have learned and gained control over many of the related technology and skill sets. Somewhere in the midst of all this, I delved heavily into social behavioral science and psychology, which gave me a boost in my Design/UX focus.

Some may argue that unicorn developers’ skills are spread thin. But then, that would be describing a generalist not unicorns. It isn’t rare for a skilled musician to play the keyboard, drums, and a guitar at an expert level. Many musicians, in fact, do possess these skill sets. For some it is crucial that they have absolute control over the things that are crucial to their artistic vision. A passionate web professional can behave the same way. So it’s not that difficult to understand what makes a unicorn.

So there you have it. Unicorn developers do exist. And they are not all that mysterious. All it takes is little passion for learning. If you absolutely love what you do, learning new things that are tightly related to what you do it isn’t all that difficult. Being an expert at what you do is cool. Being an expert at multiple things that directly affects your vision is sublime.

What vs. Why

Design, Usability, UX

Let’s imagine you walked into McDonald’s and saw a post-retirement aged man working the cash register or wiping the tables. What would you think? Would you think that he has made foolish choices when he was younger and didn’t save enough? Would you conclude that he works there because he desperately needed the money? What if you saw him get off work and get into a late model Buick or Lexus that costs more than your car? That would make you think a bit more about your prior conclusions, wouldn’t it?

It’s easy to see what people do. Most people form conclusions based on what they see people do. This is because the ‘what’ is readily available whereas the ‘why’ isn’t. But the why is far more important than the what. We’re in the business where we just can’t make decisions based on what people do. Especially as web designers and usability professionals, it’s far more important that we understand why people do what they do. This is one reason why we encourage test participants to think out aloud.

More importantly, more often than not, what people do isn’t a clear indication of what they actually want. As a simple example, a statistic showing frequent use of the back button while on your site does not necessarily mean people like to use back buttons. It just may be that you have not provided a convenient way to navigate your site. Mostly what people physically do is a manifestation of one’s cognitive process that occurs in advance. The mind forms a mental model of what experience to expect from a site or an app. We may not always be able to influence the formation of user’s mental model. But as designers of user experience we can design a conceptual model of our product that best matches user’s mental model. We need to minimize the conflict between user’s expectations and what the system does. The less we make people think, the more positive experience people will have with the product.

Translating the Language of Software for Humans

Design, UI development, Usability, UX

I have finally summarized in few short words the ultimate purpose and the goal of a UX professional. It’s translating the software language into human friendly conceptual model. It may come across as somewhat philosophical but it isn’t. It literally means what it says. For my job, I am constantly converting what the software does into something that humans can easily understand. My ultimate goal as UI/UX professional is to make complex things simple for humans. Make it beautiful and make it work.

The discipline of User Experience (UX) as we know it today has existed in various forms in the past. Some used the term Human Centered Design (HCD), or User Centered Design (UCD) interchangeably to refer to User Experience. However it was called, the practice of UX hasn’t received much spotlight – at least not in the web application design – until recent years. Many web apps were mere graphical representation of the underlying system and the data structure. Early web apps and software are examples of products designed around the machine way of thinking. Users of these products – humans were expected to adapt to machine ways of thinking and tolerate its limitations and quirks that came with it.

However, those days are long gone. Products designed around that old way of thinking are no longer tolerated nor accepted. Machines are now expected to adapt to the human ways of thinking. This inevitably requires the programs to be coded with smarter and more complicated logic. It’s also why I believe this is a truly exciting time to be a UX professional as the translation of complex technology into simple human comprehensible form will become a dire need.

As a generation, we’re witnessing the pivotal transformation of human-machine-interaction. Technology used to intimidate and complicate human lives. But that will no longer be the case. The survival of any future technology will depend on its human friendliness and simplicity.

Number of Clicks vs. Quality of Clicks

Design, Usability, UX

Reducing the number of clicks (I will use the word ‘click’ to represent both click and tap of touch devices) at any cost is one of the stickiest web design mantra handed down from the old school of thought. Less click is generally a good thing, but blindly reducing the number of clicks does not guarantee a positive user experience. Web clicks got a bad rap beginning from the early days of the web. Many poorly designed UI resulted in needless and wasted clicks. This is one reason the effort to reduce clicks became so prevalent.

Before we blindly reduce the number of clicks we need to carefully think about why people click. Any element that calls for a click promises or hints at something. Based on this promise or hint, users form a mental model of what to expect from the click. They click expecting a gratification that matches their mental model. When the gratification is provided as expected, then the said click is a quality click. A quality click is one that acts as expected, provides user with a sense of direction and accomplishment, or a step taken towards an expected goal.

We must remember that each click has a purpose. It’s important that a subsequent click does not duplicate the purpose of the former. For example, if I click on a link “Return an Item”, I am expecting to enter the process to return an item. What I’m not expecting to see is list of links related to customer services.

As long as users receive constant feedback that they are moving toward a goal or have accomplished something with each click, the effort of a click is no longer an annoyance. It’s only when the subsequent clicks feel redundant or repetitive without any sense of progress or accomplishment, the UX suffers.

What Makes User Experience Pleasant?

Design, Usability, UX, ,

There are many ways to achieve pleasant user experience as there are ways to make it unpleasant. We can achieve the former by minimizing the latter. In another words, by eliminating the unpleasant experience, we can automatically gain pleasant without even trying. So maybe we should shift our mental motto to “eliminate the unpleasant” instead of the far too ambiguous “make it pleasant.” Identifying the unpleasant is far easier than trying to create the pleasant out of thin air. This may seem like silly play on words, but it really isn’t. Let’s focus on one unpleasant experience – errors or user-errors as they say.
Errors

Would a more polite error message make things pleasant? No. It’s still an error. Instead, we should focus on how to eliminate the error altogether. In case of the user input errors, anytime a user is confronted with an error, basically, it’s the system telling users how stupid they are by not following the rules or by not knowing something so obvious. Does the system make things that obvious to the user all the time? No, most of the time they don’t. Required formats, prohibited characters, use of spaces, etc. are some of the things that many websites and apps fail to identify upfront. Yet, the system is happy to call the user stupid for not knowing them. How rude!

Imagine having a conversation with a person. And let’s say you mispronounce a word, stutter, or use improper grammar. Most of the time the conversation itself is fully comprehensible and can move on. But how would you feel if that person tries to constantly correct you every time? You’d be annoyed and punch that person in the face.

When we design an application, we need to think about ways to make the system smarter so that it can parse variety of human responses. The system should not make fuss over some trivialities arising from human interactions. We can design the system to foresee possible human responses and provide resolutions instead of throwing errors.

If A needs to be done before B, we should design the system so that it’s difficult or impossible to get to B before A. Alerting user that they did something wrong or relying on instructions is bad design that leads to unpleasant experience. It’s always better to guide the user to the path that results in less errors than alerting them when errors occur. Best error message is no message at all.

Web Design: What to Learn First

Design, UI development, UX

Over the years the all encompassing term ‘web designer’ is replaced by number of more specific-sounding names; User Interface (UI) Designer, User Experience (UX) Designer, Front-End Designer, or Interaction Designer to name a few. Depending on where you work, some of these terms may actually be tied to a specific role unique from one another. But in general, they are used interchangeably. Apart from the fact that these may be more period correct titles, they are all part of the archaic umbrella ‘web design’.

In addition to the change in what we call these professions, the expectations of their reach has changed as well. It’s no longer enough just knowing how to mockup a design in Photoshop. It’s been well established that you really can’t design unless you have some understanding of the underlying code. Using modern techniques, almost all graphical elements can be created with code. Bitmap elements are no longer used to construct the UI. It is quite possible to bypass the entire photoshop stages and not use any bitmaps in the creation of modern websites. Therefore, the market demands that designers not only able to think visually but also articulate their vision with code. The ability to code and to be able to do it properly is no longer preferred, it’s required.
So what should you learn first?

HTML and CSS

There is no way around this one. You need to live, think, and dream in HTML and CSS. HTML is the backbone of everything web. Almost all programming languages you may encounter in web development ultimately generates HTML markup as output. Know what it is, why it is, and what it does. HTML is to web as a dough is to pizza. No dough, no pizza.

Most dismiss the depth and seriousness of CSS because it is so easy to learn. It’s also the reason why it is so easy to write bad CSS. It may only take hours to learn CSS but to master all of the intricacies, nuances, and implications related to CSS requires serious commitment, time and effort. It’s no different than learning how to play chess. Easy to learn, but if you’re not serious, you’ll suck at it for the rest of your life.

Javascript

Javascript is no longer an optional skill set for web designers. Without it, you’ll most likely not get very far in your career. Some may disagree and claim you can go right to jQuery be done with it. But I strongly disagree. It’s easy to skim the surface of jQuery and be happy with what it does. But without the fundamental understanding and principles of object oriented programming, it’s impossible to exploit the full potential of any Javascript library. Although it’s not necessary that you master the full spectrum of Javascript but you need to at least get your head around the concept of objects, prototypes, inheritance, and constructors.

Javascript, on the surface may seem straight forward and easy. But a shallow knowledge of Javascript is a dangerous thing. You need to be seasoned enough not to write bad code. Javascript can add magic and life to the web. But it can also destroy it very quickly. Having in-depth knowledge will give you the power to straighten things out when things go wrong.

jQuery

Rarely anyone questions the value of jQuery. It is a Javascript helper tool written in Javascript. It has proven hugely popular among web designers and developers because it sheds huge burden of writing Javascript manually off of our shoulders. So learn it and embrace it. jQuery isn’t going anywhere anytime soon. Yet, jQuery isn’t meant to replace raw Javascript entirely. Some may say you do not need to know lick of Javascript to use jQuery. But the fact that you are using jQuery by definition means you are writing in Javascript. You will be enlightened once you discover why the syntax looks like it does and what goes behind the scenes. jQuery can be even more powerful tool once you become comfortable using it in conjunction with raw javascript and the foundational understanding of the language.

Sass, Less, Stylus

These are extensions of CSS also known as CSS preprocessors. If you are still writing CSS manually without aid of preprocessors, you will become a web design dinosaur very quickly, if not already. CSS by nature is not dynamic. It’s not quite smart enough for today’s large complex web applications. CSS can grow massive and out of control over time. Large CSS is a nightmare to maintain. CSS preprocessor adds a bit of intelligence to CSS by having concept of variables, functions and operations much like the behavior of many modern programming languages.

CSS preprocessors ultimately generate chunk of CSS for browsers to use. But you’ll mostly work in your authoring file which can be organized and written logically making it easy to maintain and manipulate.
Sass or Less? Seems like most designers feel less intimidated by Less (ah, potential pun, although not intended) because of its Javascript origin. However, I feel Sass is bit more robust. Feel free to disagree after you’ve become exposed to both. No need to fear Ruby dependencies of Sass. You only need it to install Sass and to compile css. Just knowing few lines of command line will suffice to get started. In any case, working with CSS preprocessors is lightyears more advanced than writing CSS manually. Stylus is also gaining momentum. Might want to check that out as well.

Angular JS

AngularJS is a Javascript based structural framework that lets you build rich, dynamic web applications. Angular makes your HTML page dynamic by adding interactivity, data-binding, routing, and state management. Angular is relatively lightweight for what it is and what it can do. This type of framework is known as Single Page Application (SPA). Although the SPA method is totally suitable for creating a single page applications or websites as its name implies, the term ‘single page’ is meant to describe the way Angular interacts with a given HTML (or View) template where the template can be part of a much larger project. Angular is widely used as part of large enterprise applications. Angular is built on the concept of Model-View-Controller (MVC), something you’ll come across when working with developers and software architects. MVC is a concept even designers should be familiar with going forward as its implications span multiple areas of web development.

Github

If you are involved in any type of web development, chances are, you likely have come across Git. Git is simply a version control repository that uses algorithm that makes it really fast and efficient. It also has many unique features that allows contributions and community building. In some ways, you can think of Git as social media for geeks. If you are not yet familiar with Git, start now. Designers should get familiar with it because you will use it quite a bit as collaboration with developers tightens.

PHP/MySQL

PHP is the most popular, most used web language in the world. Because of its relatively low learning curve at the start and ease of implementation, PHP is sometimes referred to as the duct tape of the internet. But that shouldn’t undermine the importance and the power of PHP. Many big names on the web are based on PHP. It’s easy to get in the door of the server-side web development with PHP. It’s tight integration with mySQL database also means you’ll be exposed to database integration and SQL which is a big plus. More importantly, for many, PHP serves as a perfect transition phase or bridge to other server-side web technologies. Knowing one web technology makes it easier to get your foot in the door of another.

Grids

There are myriads of grid systems to choose from as it seems one is introduced each week. Feel free to experiment with as many or just stick with the most popular. In any case, I’m sure each one of those has some justification for its existence. Managing layout and responsive breakpoints becomes trivial and mindless with a well designed grid system. It’s an easy way to quickly build prototypes and POC as well as a foundation for the entire application. Most grid systems are designed around generic scenarios in hopes to accommodate wide range of uses with minimal tinkering. It’s relatively easy to experiment with various grid systems with a small websites or applications. But choose your grid system wisely as it may not fit your specific needs and it will become extremely cumbersome to switch to a different grid system as the project grows larger.

React JS

If you feel adventurous try to explore React. It is a very interesting concept based on what they refer to as Vitual DOM. Bunch of Javascript and JSX is used to generate the HTML/DOM. Some use React to generate inline styles. You create and manage the HTML with Javascript/JSX and possibly the styles as well. It is quite possible to build an entire app with React without use of any external stylesheets. It throws the conventional wisdom built around HTML markup out the window. However weird, React is gaining momentum. It’s yet too early to dismiss React. Who knows it may be the way of the future. Learn to embrace or at least acknowledge the things that question our old ways of doing things. Because lot of good things result from it.

And Other Stuff

There are many helper tools available to front-end developers. As designers become more serious with code, many of their toolsets will overlap with that of the developers. There are tools that automate minifications, managing dependencies and libraries, and many other repetitive tasks one may come across during web development.

It’s worthwhile to look into some of these tools at least to understand why they exist. You may not be interested in any of these tools at the moment. You may or may not need them for your job or projects at the moment. But do look into them and at least know what they are. It will broaden your knowledge spectrum as far as web development is concerned. Know what goes on not only in web design but in web development world as well. Be aware of the trends. Design and development is converging. Designers are no longer working in isolation from developers. Become resourceful, broaden your knowledge base, span across various disciplines within web development. Become a valuable asset anywhere you go.

Design – Art with Constraints

Design, Usability, UX

Be creative, be different! This is the one phrase that mostly sums up everything design students are taught at schools as well as what is expected of designers in the society.
If you work in the art and entertainment industry, it’s easy to experiment with things that are shockingly different, cool, and exciting. Creativity can be made tangible and obvious. In some industries you can try things for the sake of trying, be different for sake of being different and still keep your job.

But most of the world isn’t made of cool and artsy stuff. Many creative professionals work in the serious business world. Typically, they refer to themselves as designers not artists. Design is art with constraints. Art is primarily about expressing oneself whereas design focuses on solving practical problems. There can be some degree of self expression in design as long as there is logical reason behind it. That may sound like nonsense since self expression usually doesn’t need any justification in the art world. But designers deal with different sets of constraints and goals. A designer need to be creative, yet, with a concrete and practical purpose. Every line they draw, every color choice, every shape, every shift of the pixel must have a reason. Designer’s ideas and visions must amount to something that is usable and easy to understand to someone other than the designer. Designers still need to think different. But being different for the sake of being different isn’t allowed. Being different must have an explanation. Everything must bring positive results to the business.

Sounds like hell? Believe it or not, opportunities to be creative is endless. Creativity in the serious world is, in fact, alive and well. You just can’t see it right away. Actually, most of the time you never see the effort and creativity that went into it. It’s always easier to tell when something is badly designed. When something is well designed, you just don’t notice it. Designing something you can’t see is just as challenging and requires a great deal of creativity and ingenuity. If you’ve bought something online without banging your head on the keyboard, that is a good design at work.

Whether you are designing a poster for a punk rock band or decorating a shop window, understand there are constraints of different shapes and forms everywhere whether it’s the medium, budget, physical, time, or nature. No matter where you work, you’ll always be solving some problem. A true design professional embraces challenge and constraints. It’s what makes design interesting, enjoyable, and rewarding.

Make Boring Interesting

Design, Usability, UX, ,

“If I could work on something more exciting, I can kick some ass as a designer. Things I work on now is just too boring”. I’ve heard many designers say things along those lines many, many times. They’re the ones who think those ho-hum projects don’t deserve their best efforts. Those who think this way most likely will not succeed no matter where they work. Because the problem lies in their mentality not in the projects.
It’s not practical nor professional to expect to work on cool and exciting stuff that you like all the time. A true design professional is someone who seeks and successfully discovers opportunities to be interesting and engaging in everything they do. And that opportunity is everywhere.

Below is a variant of a real-life example (Name has changed for NDA reasons). A request for one page consisting of some text and a button. It can’t get any more dry and boring than this on the scale of dry and boring. The request was just that. It said to place the text on a page and provide button with provided label.

You have designers who come up with something like this just to get it over with.
Boring 1
It still works. It does everything that was asked. However, a designer’s job is not simply relaying the message. Designers need to make boring interesting. This is the work of extra pair of hands not a designer. No company should pay someone who comes up with crap like this.

Then you have designers who do this.
Interesting
Exact same content and same set of instructions. But this is the work of a true professional who goes beyond what was asked, someone who’s willing to give little more to make things a bit more interesting. A true designer finds opportunities to be interesting from things that are seemingly uninteresting and boring.

Here is another example. A request for a simple form that allows participant to select from list of choices.

Again, you have designers who do this.
Boring

And designers who do this.
Interesting

True Inspirations

Design, Usability, UX, , ,

The ‘Experience’ in User Experience is a cumulative outcome of many different practices working in harmony. Everything from aesthetics, technology, psychology, and economics play an important role in creating the experience. User experience isn’t a characteristic unique to web. User experience is an attribute of every man-made creation that comes in contact with a human being through any one or more of our senses. Inspirations for effective UX can come from anywhere.

Many web professionals seek for inspirations only from within the web community. Typically referring to design, UX, or web related blogs or articles. But the truly enlightening and eye opening inspirations rarely come from design or UX blogs. You may acquire few useful tips and tricks but most design/ux articles remain somewhat shallow as far as true inspirations go. Articles that tout design trends or inspirations are typically a mere collection of examples that usually reflect publisher’s biases. When we confine ourselves to a very specific subject or discipline for inspirations it prevents us from seeing the larger universe. Quite often the great inspirations, useful insights, and knowledge comes form outside of web development circles.

The very nature as well as the definition of the word itself, User Experience or User Centered Design requires that we understand how human beings behave in a given circumstance. Therefore, UX or any web or design professional should not only be familiar with design and technology, but should also have a keen understanding of human behaviors. I’ve been an advocate of social behavior education for web professional for many years. Many of my colleagues in the profession agree that such knowledge and insight is a tremendous asset not only in relation to their careers but in every aspect of life in general.

I usually find the most intriguing and thought provoking moments when reading about social economics, social behavior, or marketing. I find that human behavior online is not an isolated event. How people behave online is very much interrelated to human behavior offline. Understanding human interactions in one area may reveal invaluable insights to how you can handle the interactions in another. Studies of how shoppers behave in supermarkets may provide answers to improving online experiences in some other industry. As long as we can read between the lines and discover the similarities and uncover the nature of what makes us humans tick from seemingly unrelated contexts, the sources of inspirations suddenly become infinitely abundant.

Time and time again, I stress that getting familiar with social behavior and psychology is indispensable for any web UX and design professional. Being able to deliver beautiful design is important but aesthetics is only one piece of the puzzle. Once we understand why people do the things they do, many user interaction and behavior problems will no longer be a mystery. As we start to gain more insight into the human mind it becomes easier to piece things together to create a true user centered experience.

Below are few recommended books:
The Signal And The Noise – Why So Many Predictions Fail–but Some Don’t
Thinking Fast and Slow
How to Lie With Statistics

Become a confident designer

Design, UI development, Usability, UX, , ,

UX/UI designers are not artists who merely make things pretty. They are problem solvers of various domains. User experience designers need to have keen knowledge of visual arts, psychology, business agenda, cognitive science as well as various web technologies. User experience professionals are also mind readers. They need to anticipate what users will do next. They persuade, nudge, and guide users for a successful journey and a positive experience. And yes, they also need to make things look pretty.

Designing a piece of interaction requires a thought process that spans across all of the areas described above. One should consider every probable scenarios and possibilities. Sometimes a good idea comes naturally and almost instinctively as one gains experience. But never present a solution without any explanation or logic that backs it up. An experienced designer should and must have a clear and sound answer to everything. Always be prepared to explain your decisions.

As a designer it’s your job not only to provide solutions but to educate and enlighten those who are oblivious to the knowledge that you possess. As a UX professional you know a lot more about why some things are done in certain ways. You are armed with more knowledge and have more access to explanations and logic behind software and application designs then many others in the organization.

When presenting your ideas, designs, or solutions, it is important that you explain the whys. Once you have the answers to all the whys, you will feel confident. You’ll be seen as a confident designer. No one trusts a designer without answers. Within an organization where you aren’t designing for yourself, everyone expects an explanation. A designer is a provider of solutions, therefore, should be able to provide explanations.

Explain everything. For example, if something you have done is a standard practice, don’t just say “Oh, it’s the standard, everyone’s doing it.” That will only insult whoever you are trying to convince. Because you are implying that they didn’t know about the standard. It doesn’t matter even if they are people who are not expected to know such information. It’s just not a good way to end their inquiries. It will not make your design or solution any more appealing than not having had any explanation for it. If something is a standard there must be a reason why it became a standard. Explain why it is a standard. Explain the whys. Always.

Confidence is important. But a designer’s confidence should be backed by honesty, expert knowledge, and genuine effort. You should never make up bullshit as you go just to appear confident. That may win you some immediate results but it will not get you far. If you really did the research, if you’ve really put in a genuine effort, you shouldn’t have to make up anything. The answers and confidence will come naturally.

However, one thing to always keep in mind is that no amount of brainstorming, research, and effort is going to make us perfect. Even after all the genuine effort the result could end up off the mark. So it is very important to have an open mind while being confident at the same time. A designer needs to be flexible and should be prepared to acknowledge any reasonable feedback or ideas. It’s very easy for designers to get emotionally attached to their designs. As a result, many designers become defensive when their solutions are questioned or their ideas are countered. Try not to become overly defensive with your solutions. Acknowledge the fact that nothing is perfect. There is never a silver bullet in design.

On many occasions I’ve had very successful results when I incorporated feedbacks and suggestions received during reviews and presentations. Even the ones which I didn’t believe would work at the time turned out surprisingly well. Sometimes you just don’t know until you try it. Any reasonable suggestion is worth trying. Do not do anything to prove that something doesn’t work. Our job is to create things that work not proving something doesn’t work. If you’ve genuinely attempted to make something work but have failed, then you can be confident in explaining why something doesn’t work. It will only make you a more confident designer with more answers to everything.

We all are nightmare clients

Design,

The most difficult thing about being a designer is not the designing itself. It’s dealing with clients. I’m sure we all at one time or another have worked with nightmare clients. They are indecisive. They don’t know what they want. They change their mind all the time. Most designers don’t have a clue why clients act this way. They simply conclude clients are insane. Designers become frustrated and switch from creative mode to “just-get-the-shit-done” mode. It happens all the time. This isn’t cool nor healthy for either parties.

We can’t change how clients are. Clients have behaved this way for ages and they always will. However, we can try to look at things in a slightly different angle. I’d like to point out an interesting facet of designer-client-relationship that will help us understand clients on a more human level.

I’ve discovered that by looking at how designers do things we may be able to understand why clients behave the way they do. Say you’re working on a design project. Try and count the times when you have changed your mind. Think about the times when you’ve toggled between choices of fonts. Designers spend hours switching between colors, size or position. Honestly, we don’t know what we want either half the time. Think about how many times you undo, move, or delete. How many times have you scrapped something that seemed good few moments ago. We change our minds hundreds and thousands of times in one sitting. It turns out that we are indecisive as well. More so and more extreme than any of our clients. We just don’t realize this because we are the ones doing the design and everything is processed in an instant in our heads. But just imagine what it would be like if we had to rely on someone else. Imagine if we have to tell someone what we want or what we think we want. All the indecisiveness and mind changing will become vocal. And before we know it, we will become nightmare clients ourselves.

We all act and behave in similar ways when we count on others to execute our ideas. We all become indecisive and sometimes even irrational. Imagine, hiring someone to design your house, kitchen, garden or hiring a planner for your wedding, vacation, finances, retirement or for anything that is out of our profession. It’s likely we will say or do things that may seem stupid or irrational to professionals that serve us. Likewise, I think it’s only natural that our clients act the way they do. After all, they all have their own ideas of what their logo, website, catalog or ad should look like. And somehow they must communicate what’s in their head to us. It can be frustrating if you think about it. And of course all clients have unique ways of expressing this frustration all with varying degrees of absurdity and irrationality. However, looking at clients in this angle may help us see that it’s not insanity that drives them, but they are simply being human.

Is it the camera or the photographer?

Design, Photography

Does the camera matter?

Would a really expensive camera make you a better photographer? Does the camera really matter? Do equipments matter?
Photography is one of those rare crafts where the tools seem to be getting more recognition than the performer. You show someone a great photo and the most common responses are “what kind of camera was used?” or “what kind of lens?” It is quite baffling when you really think about it. No one really praises the piano over the pianist. Everyone seems to be in agreement that it’s the runner that does the running and not the gym shoes. A painter’s brush would never deserve more credit than the painter. In all of these examples, it’s unthinkable even to debate whether it’s the tool or the performer that ultimately deserves credit. But photography is strange. People actually argue and debate whether it’s the camera or the photographer that is responsible for the result. It’s one of the fiercely debated topics that spans many decades among pros and amateurs alike.

Why is this? Maybe because anyone can pick up a decent camera and actually produce a photo. These days it’s even easier to do so because modern cameras have far more advanced automations and smarter program algorithms that not only makes taking photos easier but are capable of producing decent results even when you’re not trying. So the cameras appear to be doing most of the work blurring the line between the competency of the performer and the role of the tool even further.

As Chase Jarvis has famously said, “the best camera in the world is one that’s with you”, many famous photographers seem to share similar attitude. But almost all famous photographers who opined that the equipment didn’t matter own a Leica M9, collection of precious Zeiss glasses, or other photo gears that have price tags similar to a family car. It seems apparent that hardly anyone is practicing what they preach in the photography circles. So in some ways it leads me to believe that maybe the equipment does matter. Or does it?

It appears that in photography that every ingredient is spelled out for you such as f-stop, shutter speed, iso, and so on, which creates an illusion that one may be able to produce professional results as long as the vital settings are imitated. But such notion is as illusive as believing that one can play as good as any famous violinist simply by picking up the same type of violin and playing the same music notes. If only art was that simple. Photography is an art. Just as any other art, numerous unseen and unquantifiable factors are at play. Modern cameras help you achieve technical perfection with state of the art sensors, ultra sharp lenses, and advanced color processors. But technical perfection alone is rarely a critical ingredient for a great photograph. Great photographs create emotions that move people. That emotion is the result of numerous subjective elements working in harmony including story telling, pleasing proportions, intricate balance of elements, intriguing perspective, effective cropping, etc. No camera can help you achieve any of these things no matter how expensive. These are decisions that you make in your brain as an artist.

So does the equipment matter? In all honesty, I’d be lying if I said the camera and the lens don’t matter at all. Because the characteristics of a lens or the speed of the camera does matter in certain situations. There are times when certain emotions and mood are dependent on the equipment’s capabilities. But these are things you worry about once you have become a seasoned photographer. You don’t become a good photographer because of the expensive equipments. Expensive equipments come after you’ve become good. So there you have it. My take on this debate is that the equipment somewhat matters only once you have become a good photographer. But even then, it’s not the equipment that makes great photographs. It’s your brain that dictates what a photograph should look like. The equipment is merely there only to execute your orders. So practically, any camera is capable of producing amazing photos. Yes, there are photo exhibits of iPhone photos that have won awards. Photography is strange.

Designing from the past

Design, Usability, , , ,

It’s been said that there is “nothing new under the sun.” It’s a somewhat depressing statement. It’s essentially saying that anything and everything happening or being created now has happened or have been created before. It basically means “You’re not special. It’s all been done before.” Assuming the bleak statement is true, what’s a creative person to do?

If it’s too late for us to create anything new, then why not take something cool from the past and do it again? This is exactly what Jonathan Ive did. Ive studied one of the great masters of industrial design Dieter Rams of Braun. Here is how the designs of the past decades inspired some of the notable Apple products.

It appears that Jonathan Ive is pretty open about his admiration of Dieter Rams. I’m not sure which came first, the inspiration or the open admiration. But the Apple bashers have been somewhat chill about the issue. You know what? It shouldn’t matter anyway. That’s what great designers do. Learn from the past and from each other. Some are more secretive about it than others. It’s nothing new.

Braun T3 Design

Braun T3 Design

Braun LE1 Design

Braun T1000 Design

Braun T1000 Design

Writing for Web Application

Design, Usability, UX, , ,

Almost all UX experts agree brevity is the key when writing for web application. Short and brief language is essential for quick organizational comprehension as well as improved captivation. Brevity is especially important when the language in question is used for navigational or actionable purposes. Web professionals typically have no problem dealing with this concept. But we need to explain this concept in layman’s terms when working with clients, content providers or architects who feel they need to describe everything the long way. Those with less experience with the web are typically the worst offenders. They tend to spell out everything and write as much as possible to get the point across. The usual response to this from web professionals is typically “no one reads all that on the web”, “need to be right to the point” or something along those lines. But that still doesn’t explain why no one reads or why it needs to be brief. We need to be able to persuasively explain the why.

Writing for web

Writing for web application is like writing for road signs. Imagine a sign in the intersection that reads “You can not make a turn while the light is red. You can make a turn only when the light is green.” While there isn’t anything wrong with the statement itself, it is not appropriate for the context in which it is used. Safe flow of the traffic is largely dependent on drivers making the right decisions usually within seconds approaching the matter. A simple 4-word “No turn on red” contains everything a driver needs to know at that second. Any activity on the web like driving is surrounded by distractions even within a given application. We are dealing with very short span of attention. We need to captivate, instruct or guide using as few words as possible. Imagine, instead of “Merge Left”, the sign read “If you are in the right lane, please be prepared to merge into the left lane.” Not only it’s needlessly long, it will simply be ineffective because very few would actually have time to read and respond.

Wrting for Web

Among seasoned UX and web professionals, the age of “Click here to do this…” certainly have come and gone. However, the bad habits of the early web still lingers on in more places than you may realize. And I think this traffic sign metaphor could be a simple and effective way to convince why we need to write for the web the way we do.

UX Design Mantra

Random Blog Posts

UX Design

  • Pretty design is not a substitute for flawed logic.
  • Good design is telling users what to do. Great design is knowing what user is about to do.
  • Best error message is no message at all.
  • Design is a solution not beautification.
  • What works for them may not work for you.
  • Learn from yesterday, work hard today, design for tomorrow.

And always remember,

Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away…

ANTOINE DE SAINT-EXUPERY (1900-1944)

You suck at design. Deal with it.

Design, Usability, ,

A designer by definition is one who is responsible for, well.., designing. It is the designer who comes up with solutions to a design problem. A designer tackles design problems with artistic intuition, creative process and career specific knowledge that other members of the organization may lack.

Design Review

Unless you are designing for yourself, a designer’s work is subject to review and approval by someone else. Whether that someone else is a client, stakeholders, manager, or business leaders, someone always has something to say. (I’ll refer to them as reviewers from here on.)

As a result, it isn’t uncommon for designers to feel that too often they are given design directions by non-design people. Designers complain that they are being asked to do things that are in conflict with their intuition, design principles or what they believe is right. Many designers end up making changes against their will. Some even literally apply the feedback verbatim as they were blurted out during the meeting. Not only the integrity of design is compromised, many frustrated and exhausted designers complain that they have become mere order takers and that creativity is gone from their role as a designer.

Which is partly true. Creativity isn’t required if all you do is exactly as told. A reviewer may say “I think it needs to be bold”, “we need to add this and that” or “I think it needs a line over here or there” or whatever. Sometimes the feedback appropriately points out things that designer may have overlooked. But what if you strongly disagree with what’s been said? What if those are things you’ve already tried that didn’t work? This is the critical moment when a designer must seek for an opportunity to be creative. This would be the moment that dictates whether a designer accepts being an order taker or continue to be a designer, a problem solver.

It’s important to remember reviewers are not designers. In most situations, they are not consciously giving design directions as much as it may sound as if they are. They are simply reacting to the issue in question. Designers must learn to analyze these reactions and pinpoint what may have caused such reaction and provide solutions. We have to remember that most of these reactions are impulsive and instantaneous much in the same way a test participant would react in user testing sessions.

When I’m tasting something that I think is bland, I might say “I think it needs some salt.” But I’m not a cook. I have no clue what other ingredients are involved or how they affect each other. It may or may not be salt. But due to my lack of knowledge in culinary arts, that’s probably all I can say as far as my reaction goes.
A seasoned cook would not take my feedback seriously especially if salt is not the solution. Likewise, a seasoned designer should learn how not to take every feedback literally.

Never resort to “well they asked for it. I’ll just give it to them” type of mentality. That is the worst thing a designer could do in a situation and will only lead to disaster. Not only for the design project in question but for designer’s career as well.

Once we discover the root cause of the reaction, we have the opportunity to solve the problem using our creative judgment. Take it as an opportunity to give back more than what was asked. Most reviewers are appreciative that the designer took the extra effort to address the problem and are rarely upset their literal words are ignored. Because it wasn’t ignored. The feedback functioned as a catalyst for the solution. Most reviewers realize this and are pleased that they were part of the solution.

As a creative individual, a designer has the power to turn things around even in seemingly unfavorable situations.
Think about the proverb “Instead of complaining that the rose bush is full of thorns, be happy the thorn bush has roses.”

Smart consistency vs. Foolish consistency

Design, UI development, Usability,

The words ‘simple’ and consistent’ is thrown around all the time in design and web development circles. Clients, stakeholders, designers, architects and developers alike all over love to blurt these words thinking they are some sort of silver bullet to designing.  Some simply feel they need to say it because they’ve heard other people say it all the time. Some wave the simple & consistency flag as a way of saying ‘don’t-want-to-create-any-more-work-than-we-can-get-away-with’ sort of thing.

Contrary to their literal meaning, being simple and consistent isn’t that simple at all when it comes to designing web applications. The fact is that majority of  people who want simple and consistency don’t even know what simple & consistent really is or what they want to achieve by being simple and consistent. (Maybe except for the people using it as ‘don’t-want-to-create-any-more-work-than-we-can-get-away-with’; They’re simply using it as an excuse to be lazy.)

Is consistency consistently good?

The concept of consistency is one of the key principles of interface design. Because consistency generally helps achieve better usability and enhance comprehension when used correctly. But consistency does not automatically guarantee better usability. Consistency is good only when it works to create positive experience for the user. There are situations where  the context dictates the logic and we need to be flexible in order to deliver more logical experience for the user. When such need is ignored and simple & consistent is blindly applied merely for the sake of being simple and consistent, it most definitely will lead to what’s referred to as ‘foolish consistency’ where inability to think creatively and refusal to be flexible lead to bad design.

Consistency also doesn’t mean everything should look the same. However, to be totally fair, there are websites that are literally simple and consistent that work very well. For one, we all know this very popular simple and consistent website. The concept works well for them but may not work for projects that you and I may be working on.

Consistency has more to do with the way things work than how things look. Usability suffers a lot more when an application is logically inconsistent. Visual consistency functions as a supplement to the predictability that application’s logic creates. Granted, there are times when an application’s logic needs to be flexible as well to give way to better user experience. When usefulness and consistency collide, the former should trump. Always. It’s all about making the right compromises at the right time in the right places.
A good designer is one who knows what consistency really is. A great designer is able to distinguish between bad consistency and good consistency.

Clean does not mean tons of white space.

Simply being clean and simple does not equal good design. That’s like saying cemeteries are  works of art because they are simple and has nice grid. Imagine a pile of random Lego pieces. At first glance, it may look like chaos but it really isn’t. Because everyone including toddlers immediately figure out how those pieces fit together. That’s because the logic behind how Lego pieces work is simple. Color or the shape of the pieces are immaterial in achieving such simplicity. And that should be the driving principle behind everything  we design. It’s not always the color choices, size of text, graphics or layout that makes something simple to use. It’s the predictability that such logic help form in the user’s brain that ultimately makes something easy and simple to use. And being consistent in presenting the logic help achieve better usability.

Conclusion

Simplicity and consistency is crucial in designing web applications. But applying these concepts in correct manner is a very sophisticated art both visually and logically. First and foremost, an application’s logic needs to be sound. Is the navigation structured and wired logically? Do menus, buttons, or transactions work the same way across the site? Do your users know where they are going or what they expect to happen before performing any action? These are some of the things that need to be answered before anything visual can do their magic. Visual design by itself can only achieve so much. Know that a great visual design is not a substitute for flawed application logic. Also, knowing the rules is important as well as knowing when to bend the rules. All of that combined is what distinguishes great designs from the rest.

Be a Sustainable Superhero – 3 Easy things you can do

Random Blog Posts, Random DIY, , , ,

Green technology, sustainable technology, or sustainable designs are some of the buzzwords of our time. What does it exactly mean? At the core of it, it’s an attempt to eliminate negative environmental impact and waste prevention through design. It all sounds grand. To many of us it sounds like something that only scientists, government or people who are smarter than us should be concerned with. But sustainability isn’t rocket science. I can think of three dead simple things you can do right at home right now that satisfies all of the sustainable design principles.
Even if you are someone who don’t give a damn about sustainability, green, earth, or whatever, the following info will make your life a bit simpler, less annoying and even save you some money.

Adopting the newest and the latest without discretion creates trivialities and needless concerns that waste more of our time.

Use Mechanical Bathroom Scale

Bathroom scale is one thing that absolutely doesn’t need to depend on battery power. The concept of digital read-out electronic bathroom scale is a telling example of over-design and misapplication. They offer very little, if any practical benefit over mechanical scales. Mechanically operated scales are just as – or even more so – accurate, are more reliable and durable beyond any doubt than the digital ones. You can free yourself from buying, replacing, and discarding batteries by choosing mechanical scale. More importantly, you will never again experience the inconvenience of the down time caused by weak or dead battery. There. Your quality of life just went up and you get a “greenie badge” (for those who give a damn…) as a bonus.

Use Wired Mouse

Wireless computer mouse is another novelty-over-practicality invention of our time. A wireless mouse offers some benefit if you travel frequently with the laptop (but you should really learn to use the built-in touch pad). Think about the benefits of wireless mouse in relation to the cost – the things you have to put up with. Wireless mouse is typically more expensive, they are more likely less responsive than the wired ones, and are more prone to failure simply because they are more complicated. However, the most annoying of all, how do you really tell if your computer is being unresponsive or the battery in your wireless mouse is dying? No matter how computer savvy you are, there is always that moment when you are unsure. Go ahead and free yourself from the annoying down time, agonizing lag, and the chores of swapping batteries by going wired.

Use Wired Keyboard

Wireless keyboards are even sillier than the wireless mouse. Again, as with most wireless computer peripherals, there is that annoying unresponsive phase when the battery becomes weak. Signs of weak battery is undistinguishable from symptoms of a crashed or lagging system. Anyone who claims to know the difference is lying. So why do you put up with such inconvenience and annoyance every few months or so? What is that all worth? Go wired as any wise person would. Save yourself a few bucks and earn yourself another greenie badge as a bonus.

Thing that don't need to rely on battery

New gadgets and latest technology don’t always improve the quality of our lives. It’s easy to get blinded by the newness and the novelty and not realize that some are actually degrading the quality of life. Adopting the newest and the latest without discretion creates trivialities and needless concerns that waste more of our time.

Sustainable lifestyle isn’t only the right thing to do, but it’s better for us, frees us. It makes us think less about the insignificant and needless things that really don’t matter.

Update: AC Powered Apple Trackpad

Single Brain UI Design & Development

Design, UI development, Usability

Many UI professionals – typically in smaller to mid-sized organizations – are responsible for both visual design as well as front-end development. In such set-up, a UI designer/developer works directly with back-end programmers usually with the same code base and in the same environment. The handing over of files between teams and the need for extraneous instructions is virtually eliminated. This typically results in far more nimble and accurate transition from concept to execution.

How do you organize your workflow when you are both the designer and a developer? Which do you focus on first? Attractive design, usability, or efficiency? Below are high-level breakdown of workflow that, for me, have resulted positive outcome in numerous occasions.

1. Make it usable first.
2. Make it somewhat pretty and presentable.
3. Make the interface behave the way you intended.
4. Make it dynamic. Optimize. Modularize.

1. Make it usable first

First and foremost, this involves understanding the business needs and requirements. It also requires that you come up with a logical organization and breakdown of content and its delivery. Which basically means knowing what is important on a given page. What is the goal of a particular scenario? What should be in focus? Which elements are the star of the screen? And which are secondary or supporting elements? Answers to questions like these ultimately dictate design patterns such as font size, font-weight, placement, white space and sometimes shade and color*. This is easily the most crucial step of the design process. If you don’t get this step right, it doesn’t matter how pretty or trendy a page or the site looks. It just won’t work. No amount of cool animation or interactive bells and whistles is going to make up for the failure to communicate.
(* Although I was always a firm believer that a highly intelligent, highly evolved designs should work even as black-and-white or monochromatic, I realize strict enforcement of such belief isn’t always feasible nor practical.)

2. Make it somewhat pretty and presentable.

This is the step where you refine your markup and the CSS. A lot of the styling and formatting applied at this stage is more or less the direct result of the decisions made in the previous step. This is when you can also think about how to organize the front-end dependencies such as stylesheets, javascript, libraries, CDN, images, media files, markup and include files. I almost always use some type of server-side includes even for the prototypes. When developing locally, Mac OS can easily be setup to run PHP or for Windows, you can install something like WAMP. I say ‘somewhat pretty’ at this stage because you’ll be tweaking and fine-tuning the style throughout the next steps and probably right up to the point when the site is about to go live.

3. Make the interface behave the way you intended.

This is when you add interactivity to the interface to bring them to life. It’s much too easy to get carried away with javascript behaviors and effects. Effects should never be added simply because they are cool. If they don’t add any value, enhance usability or support communication they are distractions. And also remember that nothing is free in programming. Every interactivity adds cost either in performance, maintenance or something else. There’s always a cost to everything we add.

4. Make it dynamic. Optimize. Modularize.

Rarely anything we create for web these days are static. Also, many of the interactivity and behaviors may be dependent on dynamically pulled content or data. Elements such as menu, text, links, images are rarely hardcoded in the markup (actually, they should never be hardcoded). Whether you ultimately work with a database, XML, JSON, or third party content, it’s important to first make your code work with static content before attempting to write a complex code involving dynamic data. Start simple. If you can make your code work the way you want with static data, introducing the dynamic data later on should be simple.

Also think about the ways you can optimize your script. Find ways to write less code. If you find yourself writing a similar function more than once, chances are, you may be able to write it only once using variables and parameters. Are you repeatedly targeting elements using unique class names or id? Instead, try to find a unique identifying pattern in the DOM so that you can target elements without using given names. That way, you are making the code reusable; the same code or function can be used over and over again for other similar tasks.

Modularize your code. It basically means do not wrap everything in one huge block of code. For instance, if a particular function is made up of several smaller functions, separate out the smaller functions, put it outside, and make it reusable. The idea is to make your code work like the old Lego blocks, generalizing its purpose so a piece of code can be utilized in more places. Note that I said ‘old’ Lego blocks. Many modern Lego pieces are overly specialized that they exist only to serve a single purpose which is not the direction we wan to take with programming.

Looking at average Joe’s interweb

Design, UI development, Usability, ,

Not that long ago, when the general public was just getting to know the internet, the imagery, text, spinning globe, and flashing colors shown through a big fat CRT monitor was collectively referred to as the internet. To an average person, the computer or the internet is what you see on the monitor. Ever seen movies where a man with a gun shoots at the monitor thinking he’s destroying the computer? Right. I bring this up to point out that to the general public, the internet has a physical size; it’s the size of the monitor or the display.

Throughout the early years of the internet boom, computers became a necessity if you wanted the internet. Companies and professionals who work with computers buy them as tools of the trade. They always have and always will. But what if you were someone who otherwise absolutely have no need for a computer? In those days, you were forced to buy one. You simply had no other choice if you wanted the internet. Since the internet was the “thing”, everybody bought a computer. This is the time when PC sales skyrocketed exponentially.

Fast forward to modern times. PC sales plummet exponentially. In this day of mobile internet and smartphones, an average Joe doesn’t need to buy a full blown computer to use the internet (you can configure a wi-fi router using a smartphone, in case you were wondering). Computers as we know it is no longer a required appliance for most households. These days you’d buy a full blown computer only if you need them for your job or hobby. Otherwise, you can get away by having a tablet or a smartphone and still fully enjoy a modern, connected lifestyle. You can say for the general population, the internet is actually getting smaller, physically.

What does this all mean for us web professionals? The first Sony Walkman altered how people enjoyed music. It made music personal and portable. As the portability of music evolved so did the delivery method from cassette to CD to mp3 to cloud. When the microwave oven modified the way people prepared food, what we buy from supermarkets changed. Content stayed more or less the same. It’s just the delivery method that change.

In recent years, we’ve seen online content delivery methods evolve into various forms such as apps, mobile sites, and responsive and adaptive designs. Web professionals are among the quickest to adapt to change. Even as we speak, we are in the middle of an undeniable revolution that will change the form of the internet itself. We have already focused on mobile first. But many of us are still under the assumption that a typical user would have a choice to view something on a larger screen. I predict that such assumption may prove to be false in few short years. For most people, a tablet or a smartphone may be the only screen. This will affect how we design and deliver web content at all levels.

As the “smaller” internet becomes the norm, it will continue to create series of challenges. Portable music players have become ubiquitous but there are still people who listen to music sitting at home through a large loudspeaker. People still prepare food without using microwave oven. An original form in which something was popularized usually takes generations to vanish completely. Vinyl records are still being produced and film photography still exists. Likewise, there always will be a demographic using the internet on a large computer screen. There will always be serious business applications that may only be used on large screen. As web developers and designers we need to be prepared to cater to all of the available platforms.

We know that in some way or form the internet will exist. And it’s logical to expect that many new and strange platforms and devices will continue to challenge our creativity until we are stuck by a giant comet. It’s not easy keeping up and being alert in a field where the next big thing becomes so last week in matter of hours. But luckily, there are plenty tools and technologies available that will enable us to tackle such challenges. It’s fun and interesting time to be in the web development profession.

As far as future movies go, I think Hollywood producers are more likely to get it right when a dude with a gun shoots at a computer which will most likely be a tablet of some sort. In which case both the display and the data would be destroyed. That is, unless, the data have been stored in the cloud. =)

Recommended Books for UX Professionals and Designers

Design, UI development, Usability

Like many people in my line of profession, I have overlapping duties: part UI developer, part visual designer, and part UX/usability consultant. Because front-end code, front-end design, and user experience are all tightly connected and must work in harmony. The designer in me directs me to make things cool and trendy, the UX expert in me tells me I have to make things that work, while a developer in me insists I need to make things efficient. They all keep each other in check because we don’t build things that are merely cool and pretty; we build things that must also work.

In the past, I have read books on business and marketing and it naturally led to books about social behavior and psychology. These are not UI, UX, or design books but the topic of social psychology and behavior is directly related to what people in our profession must care about in order to make things that are usable. How people behave online is not totally unique to that medium; it’s often related to and inter-connected with offline behavior as well. The way the human minds work and how we design things around it is universal across all medium. Therefore, the topic of social behavior is very much related to what we do as UX professionals and designers.

I have selected three books that I found most memorable and intriguing. Even with seemingly dry subject as social behavior/psychology, I find many of the research and findings quite interesting and even entertaining in many cases. And the knowledge gained proved to be indispensable during the course of my career.

→ Blink – by Malcolm Gladwell

→ Predictably Irrational – by Dan Ariely

→ Nudge – by Richard H. Thaler

What Users Say vs. What They Really Mean

Design, Usability, ,

In the course of my career I’ve been fortunate enough to have attended numerous usability test sessions. I had chances to observe  many varieties from the most entertaining to the gawdawful boring, a fifty-something man operating a mouse with both of his hands to a tech-savvy who checks the view source.

Technology and devices have come a long way and continue to challenge designers, developers, and UX experts. However, what we take away from the usability testing remains constant; as an user experience professional, we need to know how to filter, translate, and interpret test results.

REAL LIFE vs. SIMULATION
First of all, let’s establish one obvious fact; how users behave or react during the test isn’t exactly how they would behave or react in the real world situations. In addition to the fact that most participants are after some cash or gift as a compensation, whatever they do during the test has nothing to do with their personal loss or gain. They are not really serious about the choices they’re making. Knowing that they’re playing along a fake scenario and not having to worry about consequences do affect users’ response. That is why it is critical for UX professional to learn how not to take what users say literally. The truly valuable insight into the users’ minds are hidden between the lines.

LITERAL MEANING vs. ACTUAL MEANING
We need to master the art of translating the literal meaning into its actual meaning. A user blurts out “I’d like some sort of instruction here telling me what to do…” Does that mean the user really wants to see an instruction? The worst thing you can do is add an instruction right where the user thinks it should go. There are many ways to guide or nudge the user to intended path without extraneous text or instructions.

ROOT CAUSE vs. SYMPTOMS
When interpreting user’s response it’s important to think about what may have caused such response. What users say is almost always less important than why they said it. Drilling down to the ‘why’ will guide us to the root problem. User’s responses are symptoms. They are not describing the problem. That difference is vital. Ability to distinguish between the symptom and the root cause is singlehandedly the most important skill a UX professional must master. Knowing that one vital difference is the key in avoiding flawed usability testing. Also know that the root cause rarely boils down to a single culprit. Issue in question may have arisen from multiple sources that caused series of problems.

PREFERENCE vs. USABILITY
It is also important to be able to distinguish preference from true usability issue. Any given response from a test participant may be a mixture of personal preference, emotion, and thought process. It’s the trained observation skills and keen understanding of human behavior that effectively identify and extract useful information from such unsorted output.

We also need to remember that usability does not have direct one to one relationship with how attractive something is. There is a correlation to some degree, but it is quite possible for an ugly site or an app to have strikingly easy to navigate interface and clearly defined user journey as it is possible for visually attractive site to fail miserably on all accounts.

In search for a Super Consumer

Random Blog Posts, , ,

What was once called the “Information Superhighway” has become “Information Wasteland”. We’re now experiencing severe information overload to a point where the information itself ceases to be beneficial and becomes the source of confusion for many people. Anything about everything is supported or opposed mostly without clear authoritative source and is accessible to everybody who are once again left to their own devices to decide what to accept or reject. So in effect, we’re no better now than 30 or 40 years ago when we didn’t have easy access to a wealth of information about anything.

The confusion arising from too much information affects various facets of our lives. Let’s narrow down to one specific area. Take shopping for instance.
Say, you’re shopping for a new car, camera, or a television. With the wealth of information and product reviews at your fingertips, you’d think that you can now become a smarter, well informed and better prepared consumer who can make wise decisions. But are you?

Information Overflow

Continue reading →

WordPress Twentythirteen

Random Blog Posts, UI development, , ,

It’s been a long time, been a long time,
been a long lonely, lonely, lonely, lonely, lonely time.
Yes it has.

Been too busy with work. Haven’t had energy left to touch my own stuff.
But I’m finally updating the site with WP Twentythirteen. It has responsive structure built right into the theme. And it’s pretty good. Much improved from Twentytwelve theme. Although the theme has responsiveness built in, it does not have the responsive grid. You’d need to integrate third party grid plugins or make your own which is very simple to do.

Anyhow, as of today, my site is still work in progress. It’s using a heavily modified child theme based off Twentythirteen.

Thunderbolt and Lightning. Very, very frightning…

Random Blog Posts, , ,

Thunderbolt
When the Thunderbolt was made exclusive to Macs, Apple ditched USB 3.0. Good marketing call but bad for the end users. Apple really should’ve kept both interfaces.

Lightning
Apple says it’s “…striving to make world-class products that deliver the best experience possible to its customers…”. Well, if they really meant it, Apple should have adopted the standardized mini-USB instead of the Lightning which offers no apparent benefit over the mini-USB. The Lightning interface undoubtedly makes more money for Apple. But the customers get absolutely nothing in return.

Can you guess what Apple’s next interface will be called?
Freddie Mercury has already predicted this almost 40 years ago.
Yes, it will be called the Frightening.

If you’ve been reading the news around the new iPhone5 and the iOS6, then you already know that upgrading to iOS6 will remove Google Maps from your iOS devices. But the upgrade will also wipe out YouTube app that was installed on the device as well. All because of corporate greed and power play. So much for “…striving to make world-class products that deliver the best experience possible to its customers…” bullcrap. What it really means is “Apple is striving to make products that deliver the best return possible for our board of directors…”

Google map vs. Apple map

Join the Movement on Google+

DIY Ghetto Microscope

Random Blog Posts, Random DIY

These are the remains of my old point-and-shoot Canon A80 from years ago. The part creative and part goofiness in me just couldn’t let these go to waste. I had to do something with them. I recently read about people attaching Holga lenses to their DSLRs to have some good ‘ol Holga fun. It got me wondering what would happen if I mount a compact zoom lens on APS-C sensor cameras. I just had to find out.

SLR with Point and Shoot Lens!

This is the result of some fiddling around with Nikon body cap, a glue gun, and left over pieces of the Canon compact. Now that this little lens officially became a Nikon f-mount I can mount it on my Nikon or my Canon Xti with the EOS-Nikon adapter. It even zooms in and out. How sweet is that?

SLR with Point and Shoot Lens!

SLR with Point and Shoot Lens!

SLR with Point and Shoot Lens!

Here is the result.
It’s not looking terribly handsome. And one has to wonder why anyone would want to do such a thing.
SLR with Point and Shoot Lens!

SLR with Point and Shoot Lens!

SLR with Point and Shoot Lens!

Here are the shots made with the silly frankenstein lens. The good news is that I can focus really close. I mean really close like 3/8 of an inch! It can almost serve as a cheap microscope. However, as you can see they aren’t terribly good looking. Also, at that focus distance you don’t get enough light between the subject and the front of the lens. So you’d need a tripod because you’ll be shooting really slow. Yes, the lens is crappy but fun. The same way go-carts are fun even if you drive a Bentley.
SLR with Point and Shoot Lens!

SLR with Point and Shoot Lens!

SLR with Point and Shoot Lens!

SLR with Point and Shoot Lens!

The screw head on these are 2mm in diameter.
SLR with Point and Shoot Lens!

SLR with Point and Shoot Lens!

Oh my, what’s up at Apple…

Design, Random Blog Posts, ,

I really couldn’t care less about the fact that the new iPhone that Apple introduced three months late wasn’t an iPhone5. However, as a web designer, I do seem to notice somethings more than others. Things like how they present new products on their website, design, layout, etc.

If you visited apple.com today, you’ll see that somebody was in a terrible hurry to get the iPhone site up. The iPhone images used in the slides weren’t properly cropped. Someone forgot to remove the white background on the corners and between the buttons. This became obvious because they added drop shadows behind the phones (I’m sure Apple probably have fixed this by the time anyone reads this post).

iphone image on Apple.com

iphone image on Apple.com

Things like this never happen on apple.com. Normally, something like this would never fly under designer’s radar at Apple or elsewhere. There’s only one explanation for such goof up. The phone images were switched at the very, very last minute. So last minute that no one at Apple had a chance to review the page.
Maybe it was images of iPhone5 that was originally meant for this animation. We’d never know…

Why are camera lenses so expensive?

Photography, , , ,

Have you wondered why camera lenses are so expensive? Aren’t they just pieces of glass?
Pros and amateurs alike are often baffled by the prohibitive cost of high performance lenses which can easily cost several times more than the camera itself.
Here’s a video that briefly takes you through the lens manufacturing process at Canon. The video itself isn’t terribly exciting to watch. But it does give you an insight to the complexity of the lens manufacturing process.

By the way, the Canon EF 500mm lens featured on the video sells for about $9500.00 USD.


How Lens are Made

Using Google Web Fonts

Design, UI development, ,

Google Web Fonts API now makes it even easier to use web fonts on websites. The days of choosing between Arial or Verdana are long gone. Hundreds of available Google Web Fonts are totally free and open source. The interface is simple and intuitive.

Google Web Fonts

The @font-face CSS stylesheet is automatically generated on Google’s end. All you have to do is embed the link and define font style as you would normally:

<link href='http://fonts.googleapis.com/css?family=Leckerli+One&v2' rel='stylesheet' type='text/css'>

h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }

You also have the option to choose multiple styles or font weight (on most fonts) before embedding the code. However, having to embed too many font or styles will slow down the page load. Thankfully, the interface comes with a nifty load impact meter. Although numbers indicated on the meter seems arbitrary, the colored zones give you a good idea of the relative impact. Have fun!

Pretty Loaded

Design, Random Blog Posts, , , , ,

Days of Flash loading screens are long gone…, well, almost.
Designers used Flash loaders to retain visitor’s attention while pre-loading bunch of other Flash stuff. Some of these short movie clips from the heydays of Flash were very creative, entertaining and enticing. PrettyLoaded is a growing collection of Flash Loaders from the past.

Pretty Loaded

Staples Home Robbery TV Ad

Advertising, , , , ,

Like everything else TV ads have their share of hits and misses. There are commercials we love because they are entertaining to watch. And there are ones that are just annoying or utterly tasteless.
One of the worst examples this years is Staple’s “Home Robbery” TV commercial. It boggles the mind how something so obviously lacking in intellect have made it through the approval process. I can only assume that something like this has been hastily approved over the phone in the middle of a golf shot or something.

Staples Home Robbery Ad
(The video has since become private. So we can’t view it. Perhaps, it is so stupid they felt the need to hide it.)

Here’s how the ad goes:
A young family consisting of a couple and a kid comes home and discovers that their house has been robbed. While everything of value seems to be stolen, the couple finds a computer – which looks like it’s from the 90s – sitting in one of the rooms untouched. And the couple’s response to this is, “Maybe it’s time for a new computer”. Fast forward toward the end, couple buys a spanking new computer at Staples. They both seem very happy then utters “Now, this is something they would steal”.

First all, you have to be vary cautious when playing off a negative life experience, especially something to which people can immediately relate. Even more so when it’s a commercial where you’re trying to persuade people to buy your products.

“Maybe it’s time for a new computer”? “Now, this is something they would steal”? Gimme a break.
If the thief didn’t steal your old computer, it’s a good thing. Especially if you had all the photos, videos and other important files in it. You wouldn’t immediately replace it with something “they would steal”.

Somewhere in the midst of all this absurdness the ad tries to hint the existence of Staple’s free file transfer service (btw, which I’m not sure why it’s such a big deal to transfer files). However, the entire ad is massively missing the mark and fails to provoke positive emotions.

At it’s core, this ad is basically saying; buy a new computer at Staples and make sure the thief takes it next time.
It wouldn’t be so “easy” to retrieve your photos, videos and taxes then would it?

Is WordPress Killing Web Design?

Design, ,

As a designer or developer if you’re simply tinkering with CSS that someone else has created or if your idea of of a layout is relocating ‘Widgets’, then your creative options may be limited.

But WordPress is much more than CSS and Widgets. The real beauty of WordPress is in creating your own theme and letting the WP’s framework take care of the database driven dynamic content. In creating a custom theme, you have as much freedom as creating any HTML from scratch. Building layout with HTML and WordPress PHP tags is like playing with Lego blocks where your imagination is the limit.

So is WordPress limiting creativity? Absolutely not. It’s not WP’s job nor its intention to dictate layout or design. All WordPress does is generate dynamic content in the back-end so that you don’t have to worry about it.

Wordpress

“Sent from my iPhone, inside my Ferrari”

Random Blog Posts, , ,

‘Sent from my iPhone’, ‘Sent via Blackberry’, or sent from whatever mobile device signatures used to imply one of few things:

1. “Look at me I’m cool~~!, I have [name of the latest mobile device here]. I’m also writing this as I’m driving my Audi A6 while reaching into my Prada to find something… oops…, gotta go, just dropped my D&G shades..”

2. An apology for being terse, brevity or a typo

3. “I do not know how to modify the default signature”

We all know that #1 no longer applies. It may have been a bragging right around 3 years ago but who cares anymore. A grocery bagger guy at my local produce fiddles with his iPhone between bags. He was also wearing a North Face Denali. Go figure.

I always believed #2 (an apology for being terse, brevity or a typo) was bullshit. If the mail in question is important enough for whatever reason business or otherwise, you would take the extra time to correct typos or elaborate the message. Brevity and typos have nothing to do with the size of a keyboard or whether you’re on the move or at home. It’s the importance and the context of the email in question.

For casual exchanges most people don’t proofread emails. And that’s okay. No one needs to apologize for that. Also, emailing someone isn’t some extraordinary opportunity where you only get one shot. People now are connected all of the time. No one writes more than they need to. In fact, everyone writes less and less regardless of the device they’re typing with. I don’t remember ever being temped to write longer emails because I was using a larger keyboard.

So there you have it. There is no reason why these little silly signatures should linger around. For those who do not know how to modify the default signatures, do yourself a favor and search how. Chances are you’re no more than 2 taps away from becoming less annoying. Seriously, no one really cares where your emails come from.

Fixing Samsung LCD TV – follow up

Random Blog Posts, Random DIY, , , , , , , , , , ,

I posted an article on how to repair the non-powering up Samsung LCD TV. Here’s the original post.

Quite a few people have e-mailed me saying that they could not find the same capacitors at Radio Shack.
Remember, as I stated in my original post, you’re NOT looking for the exact same capacitors at Radio Shack.
Chances are you’re not going find the exact capacitor with the same voltage rating like the one Samsung originally used.
For my LN Series Samsung LCD TV, I boiught 1000uf, 35v capacitor (uf = microfarad).
It’s a 1000 microfarad, 35 volt. The old ones on the TV I believe are 10v. You’re actually buying a higher voltage capacitor for this repair. Higher voltage capacitors should hold up better. So do not go into Radio Shack looking for 1000uf, 10v capacitor. You’ll not find it.

CAPACITOR TO GET:
1000uf, 35v

Remember not to reverse the polarity (+/-) on these capacitors. The negative side is marked with a big (-) symbol. Make note of the sides before removing the old ones.

Which is longer? Facebook Privacy Policy or The U.S. Constitution

Random Blog Posts, , , , ,

Facebook Policy Word Count = 5830 (and growing)
U.S. Constitution Word Count = 4543

Here’s a nice graphic from the New York Times that charts the growth of Facebook’s privacy policy.

How much does the entire Internet know about your personal life?
Here is how much

Facebook user data exposure

As a user you are not Facebook’s customer. You are its product. Facebook sells its product (your data) to the advertisers who are its customers.
You are not using Facebook. Facebook is using you.
Of course, this only matters if you are one of the minority who puts their ‘real’ information on Facebook.
But if you’re like the majority of smart Facebook users – scammers, perverts, voyeurs with fake names, gamers with multiple bogus accounts – Facebook can be a wonderful place.

Facebook Privacy: A Bewildering Tangle of Options

“How much of Facebook user data is exposed

Choosing focal length for your DSLR

Photography, , , , , , ,

Choosing the right lens for your DSLR may turn out to be much more difficult – and more critical decision than buying the camera body itself. After all, a lens is a single most greatest factor that affects the picture quality.

Lens selection usually starts with deciding on a focal length. There are lot of names and numbers out there; wide-angle, macro, telephoto, normal, zoom, 18-55mm, 80-200mm 10-24mm, 50mm, blah, blah, blah… Adding to the confusion, for most digital SLRs, the focal length written on the lens barrel is not the actual focal length that your camera sees. Depending on the crop factor/sensor size of the camera, the focal length will vary. For example, a normal 50mm lens mounted on a typical Canon DSLR would have an effect of 80mm not 50mm (it would be 50mm if mounted on a 35mm film SLR or a ‘full-frame’ DSLR camera).

Rather than a lengthy explanation why this is, here’s a handy Focal Length Simulator that you might find helpful. You can choose different lens as well as camera body and mix and match to see how they affect the view angle. This simulator is provided by Nikon but the basic crop factor/focal length simulation applies to any brand.

Click on the picture. The images may take a while to load.

Focal Length Simulator

Aperture & shutter speed explained

Photography, , , , ,

Affordable DSLRs are spawning everyday, amateur photographers everywhere. More and more people are asking how to take a better photograph now that they’re equipped with more serious equipment then the ubiquitous pocket digital camera.

I get asked questions such as “how many megapixel camera should I get?”, “what is the perfect shutter speed?”, “should I buy Canon or Nikon?”, “what is the best lens?” There are no right answers for any of those questions. My best response is usually, “It all depends.”

I’m not professional-level photographer by any means. However, having gone through three semesters of photo and darkroom studio courses during the course of my design studies and having fiddled with SLR cameras since 1983 puts me in a slightly better position to answer these questions with ample amount of credibility. So, here goes my humble yet believed to be solid attempt at Photography 101.

First of all, why would anyone want to shoot with an SLR when any decent modern pocket camera is capable of capturing great photos? Simply put, it’s like driving an automatic transmission vs. manual transmission, Chef Boyardee vs. making your own ravioli, pre-arranged marriage vs. freedom to pick your own spouse. The automatic version gets the job done. But it’s the manual version of things that produce something far more interesting.

Here are couple of basic camera terminology in plain English:

APERTURE
Aperture refers to an opening of a diaphragm in the camera lens that controls the amount of light taken in by the lens. This is indicated by an f-number or f-stops written as f/1.8, f/2.0, f/2.8, f/3.5 or simply 1.8, 2.0, 2.8, etc…. The lower the number, the larger the opening. Larger opening lets in more light into the camera. Higher the number, the opposite.

SHUTTER SPEED
Shutter is a curtain between the lens and the sensor. Shutter speed refers to how long the shutter stays open. Therefore, the shutter speed controls the ‘duration’ of the light hitting the sensor. This is indicated in seconds. 1/1000 (1 thousandths of a second), 1/500, 1/250, 1/125, etc… or simply 1000, 500, 250, 125, etc…

ISO
ISO refers to the sensor’s sensitivity to light. In the film days, the film itself was given the ASA/ISO number (100, 200, 400, etc…) which indicated the film’s sensitivity to light. The digital camera lets you dial in these numbers right in the camera which mimics the film ASA/ISO. The higher the number, the sensor becomes more sensitive to light. Higher light sensitivity means it needs less light to achieve a given exposure.

How does aperture and shutter speed work in combination? How do they affect each other?
I like to use the analogy of running water and a bucket. Let’s picture a faucet and below it, a bucket.
The amount of water flowing out from the faucet determines how fast the bucket gets filled and ultimately affects the duration needed to fill the bucket. In this analogy:
FAUCET is the APERTURE
WATER is the light LIGHT
BUCKET is the camera SENSOR
A FILLED BUCKET is the DESIRED EXPOSURE
TIME TO FILL is the SHUTTER SPEED

More water means it will take less time to fill the bucket – in camera, the larger the aperture (larger the opening), less time is needs to achieve a given exposure.

Less water flowing out from the faucet means it will take more time to fill the bucket – in camera, the smaller the aperture (smaller the opening), more time is needed to achieve a given exposure.

aperture

That pretty much explains the relationship between aperture and shutter speed.
Basically, the more light the lens takes in, the less time the shutter needs to stay open for a given exposure.

Given this relationship, it’s possible to use LARGE APERTURE at FAST SHUTTER SPEED or use SMALL APERTURE at SLOW SHUTTER SPEED to achieve the same exposure.

Following combinations would yield to same exposure:
a.) 1/500s + f/5.6
b.) 1/250s + f/8
c.) 1/125s + f/11

Combination a.) has faster shutter speed and a large aperture.
Combination c.) has slower shutter speed but a smaller aperture

However, even though the above combinations result in same exposure, the effects on the resulting image can be very different depending on the subject, lighting condition, and motion. This is where the text-book definitions end and fun and imaginations begin. Faster shutter speeds freezes action. The aperture of a lens affects the depth of field (the range of distance the subject is in focus). ISO also affects how much light is needed for a given exposure.

Shooting in manual mode allows you to explore endless possibilities. Mastering the exposure triangle (aperture, shutter speed, ISO) breaks you free from what has been pre-set in the camera. There are thousands of articles out there written about creative picture taking techniques. Understanding the basics of the relationship between aperture, shutter speed, and ISO will help you learn those techniques faster.
Shoot away!

Mega Wasted Pixels – The Digital Camera Myth

Photography, Random Blog Posts, , , , , , , , , ,

Digital camera market is full of advertising gibberish boasting high number of megapixel designed to lure consumer and beginner photographers into believing that more megapixel equals better picture and a better camera.

Million megapixel camera

This is complete nonsense. Higher number of megapixel does not equal to higher quality pictures. Higher number of megapixel in a digital camera does not mean it’s a better camera the same way the number of pages in a book has nothing to do with the greatness of the book.

Today, advertising driven consumers are lost deep within the misconception and myth surrounding digital cameras and megapixel. It’s almost laughable especially when practically all of the consumer level photographs end up as 4×6 or 5×7 prints at Walgreens or Costco. And knowing consumer level camera users, they’ll set their cameras to shoot at the highest MP setting as possible. In doing so, they soon realize the mega gigs of memory card they had is suddenly not big enough to hold all of the images. So they go out and buy more memory cards to hold more uselessly large images of blurry photos of their kids doing silly stuff.
They’ll go out and buy bigger hard drives to store more blurry photos of their kids doing silly stuff. Not only that, they’ll also soon realize their once capable computer isn’t fast enough at processing all of the uselessly large blurry photos of their kids doing silly stuff, so they’ll go out and buy a new computer as well.

Imagine all of the wasted space, memory, processing and transfer time not to mention the money wasted on hardware when measly 5 or 6 megapixel was more than enough to get a high quality 4×6 prints at a local Costco. There are photographs sold in galleries for thousands of dollars that are shot with 6 megapixel cameras.

So why so much emphasis on the megapixel? Well, advertising is for idiots. Advertising sells products just as politicians sell promises. Do your own research and make better decisions. There are lot more features of the camera that directly affects the picture quality and how the camera handles more than the count of megapixels. Also, the best and the greatest my not always work for you. Everyone has different needs and purpose for a camera. So concentrate on the features that are important to you. Focal length, zoom, aperture range, shutter speed, sensor size, weight, size, write speed, iso range are just some of the points to consider. Megapixel is matters to some degree but it’s not everything.

Designing a Better Business Application

Design, Usability, , ,

DESIGNING FOR VARIOUS STATES
When designing a page that draws set of results from collection of data (i.e. database) the screen layout should be designed to serve three core states of the application; Normal, Empty, and Error.

Normal State: is when system returns expected results.
Normal state can be further broken down into two sub-states:
– Overflow State: when the system returns too much results.
– Minimal State: when the system returns too little.
Empty State: when system returns no results

Error State: when system returns unexpected results due to system or user error.

Intended layout, aesthetics, and usability of the page must be preserved throughout all of the possible states described.

USING REALISTIC DATA SETS / CONTENT
It is important to use sample data sets or content that closely resemble the real-world scenario. Pages designed around irrelevant placeholders result in compromised usability, awkward layout and aesthetics when asked to handle production data.

Following are some points to consider:
– Maximum or minimum character length
– Anticipated amount of text (for heading or paragraph)
– Date or text format
– Amount of data (If only one or two lines are returned, does the table get lost on the page? Does it get buried under heading or text? Is the information still legible?)


DESIGNING FOR THE FUTURE
Applications designed for the web, by nature, change and evolve over time. Designers need to think about not only how the UI works now but how it would expand, get modified and improved over time. User interfaces and interactions need to be flexible enough to easily accommodate the future. This applies to design as a whole or individual feature.

Modifications may include:
– Addition of features, links or menu items
– Deletion of features, links or menu items
– Modified interaction
– Corrections
– New mesh-ups with third-party applications
– Optimization

The design should also take into account the possibility of customization, variations, or internationalization that caters to various clients, markets or cultures.

INTERNATIONALIZATION
An application should not only be able to support multiple languages, but layout and usability should also be maintained across various internationalizations. Consider the impact on the length of text in button labels, table headings, columns and other areas where real estate may be limited.

Cultural Difference
Designers should also be aware of the cultural differences. For example, different colors or shapes may carry different connotations in other parts of the world.
There are other socially sensitive issues that design need to take into account. For example, what radio button should be placed first? Male or Female? Which country should be listed first in the dropdown? Should it be strictly alphabetical or context sensitive? Things like this may have significant impact depending on the culture and the context.

PERSUASIVE DESIGN – GUIDING THE USER
Using hints to provide a clear obvious path is preferred over alerts, error messages, or lengthy instructions. In addition to concise textual hints, design elements such as white space, positioning, size, texture or color can contribute to guide a user complete the task successfully.

The best error message is no message at all.

As much as we try to avoid more interactions than absolutely necessary, there are scenarios where the app inevitably needs to require significant involvement from a user – whether in the form of additional clicks or additional pages. This may be due to technical limitations, business requirement, or other non-controllable external forces.

Users of business apps look to results. They are not looking to get entertained or be amused. Often in a business application, a reasonable amount of repetitiveness can be tolerated in return for improved accuracy and/or security. In a business app, when saving a click and accuracy collide, accuracy should always trump.

Focus on Activity-Centered Design
Sometimes overly emphasized user-centered design can lead to haphazard results and chaos. It shouldn’t be the goal of the design to cater to every possible user limitations or problems. Design must focus on the goal of the user. An activity-centered design focuses on the scope and the context of the utility in question rather than on the users’ ability (or inability), preferences or behavior.

This approach – by guiding or nudging the user in the right direction – is far more likely to yield desired results than correcting the user when errors are made.

SMART COMPROMISE
There is no single perfect solution or design for a given problem. Designing web application for the most part is about making appropriate compromises at the right time and in the right places. This is especially true for enterprise applications with complex business requirements and constraints.

AVOIDING NOISE
Advancements in front-end technology in recent years have made many ‘cool’ features on the web possible. We are in an era where if you can imagine it, there is always a technology or techniques that can make it happen. As a result, many are currently being used and also abused. The question now should be not ‘is this technologically possible?” (because, most likely the answer would be Yes) but “is this cool feature really necessary?”

Cool features or behaviors shouldn’t be used for coolness sake or just because it can be done. Like everything else on the web app it should be used only when it’s absolutely necessary for the task at hand.

Providing Alternative
Providing alternatives is a good idea but only if the alternative offers something new or different that the first method did not. Creating more than one way of achieving the same thing only creates confusion and noise unless they both present unique benefits that couldn’t be shared. For example, an application may provide options to view set of images and data vertically in a list or as a thumbnail grid. Each option provides benefit that the other cannot offer. List view may include more details while grid view shows more results at a glance. Both of which are difficult to achieve in a single solution. Therefore, proving an alternative view option is rightly justifiable.

Somebody pull his head out of his arse already.

Random Blog Posts, , ,

Will Zuck’s arrogance ever see an end? Facebook claims that their new messaging system will render e-mails and phone numbers obsolete. How are they planning to achieve this exactly? I don’t know. Maybe someday phone numbers or e-mails as we know it will become useless. But it surely won’t be because of Facebook. Not that over 90% of phone user in the world are not Facebook users. Or that the Facebook account itself relies on one having an external e-mail address to begin with.

Origin of Numbers

Random Blog Posts, , , ,

Have you ever wondered how Arabic numbers as we know it have come to take its current shape and form? I have taken few minutes to create this simple graph that outlines the evolution of Hindu-Arabic numerals glyphs.

Notice that 1, 2, and 3 started as mere count of an object – a stick.
Number 4 probably meant a quadrant or dividing something into four.
Seven looks like it’s always been seven as we know it.

Origin of Numbers

Waves / Up in Flames (Metric B-Side)

Random Blog Posts, , , , , ,

WAVES (Metric)
Saw the water not the waves
Caught your eye forgot your name
Always leaving either way
I want you to stop me

Episodes to fantasize
TV movie of our lives
The future is all mine
I’ll find it on my way back

When I’m gone
I’ll know what I’ve done
I’ll go where I don’t belong

It’s all, not one
I love everything
No sleep, I lose everything
Oh, don’t tell me again, I…
I won’t see you again, I…

Not one, I love everything
No sleep, I lose everything
Oh, don’t tell me again, I…
I won’t see you again, I…

Saw the waves but not the tide
I couldn’t stay I don’t know why
A sailor married to the sea
My luck is a lost key

The door is locked from the inside
Don’t wait around, I won’t arrive
Keep a room somewhere for me
I’ll find it on my way back

When I’m gone
I’ll know what I’ve done
I’ll go where I don’t belong

It’s all, not one
I love everything
No sleep, I lose everything
Oh, don’t tell me again, I…
I won’t see you again, I…

Not one, I love everything
No sleep, I lose everything
Oh, don’t tell me again, I…
I won’t see you again, I…

Samsung Galaxy Tab

Advertising, Random Blog Posts, , , ,

Samsung releases a product that has potential and actually could be useful, something that Apple’s iPad never was. The Samsung Galaxy Pad is smaller than the too-big-to-be-portable-iPad. It packs lot of features that puts iPad to extreme shame. In comparison to the iPad, the Samsung Galaxy Pad provides consumers what they want from the get go rather than purposely holding back features for later releases in attempt to secure future sales – a strategy obviously apparent in Apple’s recent products.

Silly example from Apple website

Design, Usability, , , , , ,

Apple is usually sensible especially when it comes to their website design and usability. But I noticed something on Apple’s site that sort of insulted my intelligence. This happened when I was browsing their site for a new Macbook Pro. Once you drill down to the product detail you will see an image of the Macbook Pro on the right hand side. Below it are three links that let’s you view the three different sizes that MacBook Pro comes in; 13″, 15″, and 17″.

Continue reading →

The iPhone Cover-Up

Advertising, Design, Random Blog Posts, , , , , ,

The new iPhone 4, like generations before it, is a beautifully styled object. It appears cunningly simple at first but the amount of attention given to detail and design of each piece that make up the exterior is truly admirable. The texture, the curve, the sheen and the bevel of each button and pieces are styled and carved to make this one of the most strikingly elegant industrial design in recent years.

iphone 4

Continue reading →

DIY Macro Photography

Photography, , , , , , ,

If you’re into photography, you’ll most likely want to experiment with macro photography sooner or later. It’s fun and exciting. However, proper macro lenses can get pretty expensive. Most novices and non-professional photo enthusiasts are not likely to shell out big cash for specialty lenses. Instead, most of them resort to DIY macro tricks.

Continue reading →

Understanding your clients

Design, ,

Undo

Hardest thing about being a designer is not the designing itself, it’s understanding clients. We all have dealt with indecisive clients who don’t seem to know what they want and change their mind all the time. There are times when approvals or design sign-offs seem to have no effect at all. Most designers don’t have a clue why certain clients act this way and conclude that clients are insane. Designers become frustrated and switch from creative to “just-get-the-shit-done” mode. This happens all the time whether they realize it or not. And most clients end up with work done in the latter mode. This isn’t cool nor healthy for either parties. And since we can’t and shouldn’t expect clients to change their way of thinking, we should look at the matter in a slightly different angle. I’ve discovered that by looking at how we (designers) do things, we may be able to understand why they (clients) behave the way they do. Continue reading →

You won’t find me on Facebook

Random Blog Posts, , ,

Why don’t I own a Facebook account?
Because I don’t want my life, relationships, likes or dislikes, interests, buying habits, thoughts or goals in life to be monetized by a corporation. Especially by a corporation run by a kid who doesn’t value personal privacy except his own.

defacebook

I don’t want to agree to a Terms of Service that is totally one sided.

Continue reading →

Color correcting digital photos using Photoshop

Photography, , ,

No one and no camera’s auto AE program gets perfect exposure every time. In the film days, photographers were able to compensate for this imperfection in the development lab. During the film developing and print process, dodging, burning, and exposure duration can be used in combination to tweak the print. In digital, we don’t have development process. So it’s perfectly okay not to feel guilty using Photoshop to color correct your photos. Everyone, even pros use some digital manipulation (even when they don’t admit to it). Continue reading →

Inside your SLR

Photography, Random Blog Posts, , , , , , , , , , , ,

Meet “Esellar”, a reborn Nikon N75 film SLR. No, it doesn’t talk, move, or take pictures. It doesn’t do anything. Why did I cannibalize a perfectly good camera to create this hideous looking thing if it doesn’t do anything? Well, the Nikon N75 didn’t do anything either. It was sitting on the shelf collecting dust. And the camera in its previous form really wasn’t anything to blog about either. But here it is the one and only “Esellar”.

Nikon Robot Esellar
Continue reading →

Free for only $5!

Advertising, ,

While I was searching for a new hosting company I came across this Hostgator’s web hosting offers. Take a look at the three options. If you look closely and compare the Baby Plan (middle) with the Business Plan (third option), you’ll notice that the Business Plan has everything that the Baby Plan has plus couple more features that are included for free. But look at the price. The Business Plan costs 5 dollars more per month than the Baby Plan. Free is good right? Yes, but not so when you have to pay $5 for it.

hostgator pricing

This reminded me of ‘power of free’ from Dan Ariely‘s book, Predictably Irrational.

How I fixed my Samsung LCD TV

Random Blog Posts, Random DIY, , , , , , , ,

Everyone now can be an expert in anything with the help of the internet. Here’s how I DIY’d my Samsung LCD TV and saved $300 – $400.
The LN series Samsung LCD TV never really powers up instantly even when new. But the time it takes to power up the TV took longer and longer (as long as 10 minutes in some cases). The LED light on the power button would flash with clicking sound. This will eventually lead to your TV not powering up at all. Mind you, the TV is less than 2 years old. Turns out that this is a known problem with most Samsung LCD TVs with model number starting with “LN” and slew of other models as well. Continue reading →

Scarface School Play

Random Blog Posts, ,

People who came up with this should hang themselves. http://www.youtube.com/watch?v=uovMpapeCJQ.

You don’t have to be a model citizen to see this is totally inappropriate. Replacing swear words with “motherfudgers” doesn’t make it any safer for kids. What’s a swear word? Is it merely a collection of alphabets that make up a word? Is it not a swear as long as it’s misspelled or pronounced differently? No. swear words are contextual expression of hate. Exact pronunciation and spelling of it is irrelevant because they’re merely a representation of the emotion behind it. When someone swears at one in foreign language, it’s the emotion that gets the point across not the word itself. Think about how some people use the word “fuck”. It can be used to express anger but it also can be used to express amazement in a positive context.

People who made this video are f****g morons.

Is social media making us anti-social?

Random Blog Posts, , , , ,

I believe technology should enrich our lives, make our everyday a bit more interesting and garnish the life we already have as humans in a society. It should not be something that enslaves us.
Look what’s happening around you. Many so called ‘social’ media is actually making people anti-social. The addiction toward technology and social media is so severe that people rarely talk or mingle in person. Continue reading →

Using TABLE for layout

UI development, , , ,

I think designers and developers alike are realizing using HTML TABLE for some layout is a smart thing to do after all. Some wise usage of TABLE based layout is popping up everywhere recently including Google Apps. Below is a Firebug screen capture of parts of Google Calendar where it uses TABLE for layout.
Google Calendar HTML Table

I totally agree. The “no TABLE no matter what the cost” approach is a silly fad and a movement advocated by early css developers who were overly enthusiastic with their fascination with the new-found technique. I see where they’re coming from , too. If you were coming from the early days of web development with sketchy browser css support, using tables to workaround layout issues can get pretty messy and a maintenance nightmare. So a proper browser support of CSS was indeed a breath of fresh air and freedom. But shunning TABLE no matter what the cost subjects yourself to complicated rows of DIVs and floats which in essence works against the simple and maintainable approach. Using TABLE for layout makes sense if used properly. Although not captured in the example, content inside the table is organized nicely using <div>and lists <li>. Organizing content this way yields to much more predictable behavior across platform and browsers.

I would not recommend this TABLE + CSS hybrid method for blogs or any sites that are at the mercy of search engines or readers. But for applications or widgets it makes perfect sense and will make your life as a UI designer/developer a whole lot easier. As with any tool, you just have to be smart about when, where and how much to use.

It’s a good time to get a digital Single Lens Reflex – Nikon D90

Photography, , , , , , , , ,

I’ve waited long enough. Time has come for me to get a DSLR. I have ran out of excuses not to get one. I can no longer justify using film or shoot pocket cam when a job at hand demands more. While full-frames still cost more than what I want to spend most decent pro-consumer DSLRs have come down in price to a reasonable level. Objectively speaking, even the entry level DSLRs on the market today are exceptional value considering what they’re capable of. Continue reading →

Flash – How to hide layers from movie without deleting the layer

Design, UI development, , , , , , , ,

I had quite a few people ask me how they can hide a layer in Flash without actually deleting that layer. The little “X” below the eye icon hides a layer from view while you’re working on a file but doesn’t hide that layer from a published movie. What if you don’t want certain layers to be published in a movie but yet do not want to delete them in case you want it back? Many beginners simply delete the layer, test movie, and then undo the deletion if they want the layer back. While this works, it’s not very elegant nor efficient especially when you’re dealing with multiple layers. Not to mention relying on undo is very risky in Flash.

This is where the “Guide” layer comes in. The Guide feature is originally intended to hold a path on which an object should move. Since you wouldn’t want the guide to show in a movie, Flash hides any layer designated as a guide. Since you can designate any layer as a Guide layer, this in turn works perfectly in case you want to hide a layer from a published movie temporarily. Just turn the guide on to hide and turn it back off if you want to include it back in the movie! Simple and elegant.

Flash - Hide layer from movie

Be smart on Twitter

Random Blog Posts,

I’m not in love with Twitter myself yet but I do believe it can turn out to be a useful medium depending on how you choose to use it. Some anti Twitter like this one, at first glance, seem to have a point but you quickly realize the person really doesn’t know how to use Twitter – at least not in a way that would’ve been beneficial.

Many people are quick to dismiss Twitter as total waste of time (I was one of them). But anything can be a waste of time if used without any discretion or purpose. Watching television, reading magazines, reading books or going to movies can all be a waste of time if we’re not being selective. If you’re tired of seeing tweets about someone’s eating habits, you can choose not to follow them just like you would change the channel or turn off your TV set if you’re not interested. You don’t have to sit there and absorb all the random tweets. Of course, if you are mindlessly following bunch of people you don’t know, you are going to see lots of porn links, scams, and ads. But that’s the consequence of your actions not the design fault of Twitter.

I don’t follow too many people but I do find helpful articles and links related to my craft through those few that I do follow. Just be smart about what information you’d like to gain through the medium. Although, I’m not too crazy about the up-to-the-minute updates and information. As far as I’m concerned, nothing is that urgent. If something is that urgent, there are more effective communication mediums out there for urgent stuff. For any other casual information exchange, Twitter does the job.

Get to know WordPress plus real web development

Design, UI development
Photobucket

I’d like to single out yet another skill-set a web designer must be aware of. It’s WordPress. The enormous popularity of the WordPress platform along with blogging and simple content management has transformed the way we build lightweight websites. It’s unlikely that a large scale site or application would be built entirely of WordPress but we see it being used in blog sections of popular websites such as The New York Times.

WordPress has become so popular, that in some circles, a web designer is known as someone who customizes and designs for WordPress. Contrary to popular belief, however, working with WordPress does not free web designers from the need to learn and gain knowledge of other existing web technologies. WordPress is like a well prepared blank canvass that a designer or a developer must enhance upon. WordPress only frees us from reinventing the wheel, but as far as improving and spicing up the wheel, we can all get creative and sky is the limit.

It’s easy being Picasso

Design, Random Blog Posts, UI development, Usability

Seriously. Picasso created art as he saw fit. No one questions Picasso. If Picasso decides a woman’s right eye should be twice as large than the other, no one dared to argue otherwise. When Picasso sees a nostril of a goat would be a good match for a woman’s face, people go crazy throwing hundreds of millions of dollars at it.

I would guess that Picasso rarely had to deal with user experience, commercial feasibility, cultural compatibility, revisions, or approvals from fifteen different people. Those things are what lowly designers like us worry about. Because um…, we’re not Picasso.

Complainers are innovators in web development

Design, Random Blog Posts, UI development, , ,

For those of us who have been developing websites since the 1990s, it’s easy to lay back and say “it won’t get any better than this” as far as front-end development and client-side technologies go. We’ve lived through the early days of web development using primitive HTML tags, rustic browsers, and all of the growing pains of web. It’s amazing how the craft has improved over the years. Stylesheets are now well supported, browsers are much smarter and compliant, not to mention numerous javascript libraries and access to developer communities. So it’s easy to think this is the pinnacle for our tools of the trade.

But let’s think for a minute about those who began their career as web developers just a few short years ago. Things that we old schoolers have come to appreciate and find fascinating are taken for granted by the web newbies. The current technology is nothing new to them. It could have existed since the stone age for all they know. No one thinks about the origins of things in the web profession. And just as how we were distressed and annoyed with the limitation of the technologies of the time, the newbies now are going through the same phase. They aren’t satisfied with what they’re given. They complain about the limitations of the CSS. They complain about browsers not being perfect. Of course, we complain along with them because appreciation for technology is very short lived in this profession.

But you know what? That is a great thing. Because from that very dissatisfaction and from this cycle that web professionals go through comes new great ideas and continuous improvements. If no one complained, we might not have advanced to where we are today. It’s important that you complain. It’s important to want more. It’s important not to accept anything as a means to an end in web development. Everything is a beginning and a process.

So you wanna be a Web Designer

Design, UI development, ,

Many, many years ago, a web designer was someone who came up with somewhat believable Photoshop renderings of what a webpage could look like. Sometime later a web designer was expected to know some HTML along with pretty good Photoshop skills. A few years later, a web designer had to have some javascript knowledge, have good HTML skills, Photoshop knowledge along with decent discipline in aesthetics. Next, a web designer became someone who knows about CSS, DHTML, XHTML, XML, XSL, JSON and AJAX along with number of scripting frameworks.

Today, a typical web designer is most likely armed with most if not all of the skills mentioned above. Also, a web designer must possess a working knowledge of various web languages and a pretty good understanding of the programming language in general not to mention the knowledge of databases. Otherwise, it’s difficult to earn any  respect or work with other web professionals. In another words, a web designers is a serious jack-of-all-trades. Prepare to be overwhelmed.

You suck at Photoshop

Design, Random Blog Posts, , , , ,

If you haven’t seen You suck at Photoshop tutorials, start watching now. Not only you learn quite a bit on how to use Photoshop for your everyday casual use, the guy is hillarious. It’s not all jokes and comedy. These are genuine Photoshop tutorials. And no, the guy isn’t retarded. He just talks that way and it works. Here are few of my favorite ones. Discover them all on youtube.

You Suck at Photoshop #5: Select Color Range

You Suck at Photoshop #7: Patch Tools and Levels

You Suck at Photoshop #8: 3D Layers